From d7e372ed4b35080f1af711689c3177852ffcc9b5 Mon Sep 17 00:00:00 2001
From: widgeter <onwidget.developer@gmail.com>
Date: Tue, 8 Aug 2023 14:17:44 +0200
Subject: [PATCH] Modify Steps2 widget

---
 src/components/widgets/Steps2.astro | 167 ++++++++++------------------
 src/pages/about.astro               |  35 +++++-
 src/types.d.ts                      |   1 +
 3 files changed, 91 insertions(+), 112 deletions(-)

diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index ae13600..68e2981 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -1,20 +1,8 @@
 ---
 import { Icon } from 'astro-icon/components';
-import { CallToAction } from '~/types';
-
-interface Item {
-  title: string;
-  description: string;
-  icon?: string;
-}
-
-export interface Props {
-  title?: string;
-  subtitle?: string;
-  tagline?: string;
-  callToAction?: string | CallToAction;
-  items: Array<Item>;
-}
+import Headline from '../ui/Headline.astro';
+import { Steps } from '~/types';
+import WidgetWrapper from '../ui/WidgetWrapper.astro';
 
 const {
   title = await Astro.slots.render('title'),
@@ -22,101 +10,68 @@ const {
   tagline,
   callToAction = await Astro.slots.render('callToAction'),
   items = [],
-} = Astro.props;
+  isReversed = false,
 
-/**
- * 
-	
-<!-- Steps2 Widget Example ***************** -->
-
-<Steps2
-	title="Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst."
-	subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus."
-	callToAction={{
-		text: 'Get template',
-		href: 'https://github.com/onwidget/astrowind',
-		icon: 'tabler:download',
-	}}
-	items={[
-		{
-			title: 'Responsive Elements',
-			description:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
-		},
-		{
-			title: 'Flexible Team',
-			description:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
-		},
-		{
-			title: 'Ecologic Software',
-			description:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
-		},
-	]}
-/>
- */
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render('bg'),
+} = Astro.props as Steps;
 ---
 
-<section>
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 overflow-hidden not-prose">
-    <div class="py-12 md:py-20">
-      <div class="py-4 sm:py-6 lg:py-8">
-        <div class="flex flex-wrap md:-mx-8">
-          <div class="w-full lg:w-1/2 px-0 sm:px-8 mb-12">
-            <div>
-              {
-                tagline && (
-                  <p
-                    class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
-                    set:html={tagline}
-                  />
-                )
-              }
-              {title && <h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
-              {subtitle && <p class="mb-8 text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-screen-xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
+  <div class={`flex flex-col gap-8 md:gap-12 md:flex-row ${isReversed ? 'md:flex-row-reverse' : ''}`}>
+    <div class={`w-full lg:w-1/2 gap-8 md:gap-12 ${isReversed ? 'lg:ml-16 md:ml-8 ml-0' : 'lg:mr-16 md:mr-8 mr-0'}`}>
+      <Headline
+        title={title}
+        subtitle={subtitle}
+        tagline={tagline}
+        callToAction={callToAction}
+        classes={{
+          container: 'text-left mb-4 md:mb-8',
+          title: 'mb-4 text-3xl lg:text-4xl font-bold font-heading',
+          subtitle: 'mb-8 text-xl text-muted dark:text-slate-400',
+          // ...((classes?.headline as {}) ?? {}),
+        }}
+      />
 
-              <div class="w-full">
-                {
-                  typeof callToAction === 'string' ? (
-                    <Fragment set:html={callToAction} />
-                  ) : (
-                    callToAction &&
-                    callToAction.text &&
-                    callToAction.href && (
-                      <a class="btn btn-primary mb-4 sm:mb-0" href={callToAction.href} target="_blank" rel="noopener">
-                        {callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
-                        {callToAction.text}
-                      </a>
-                    )
-                  )
-                }
-              </div>
-            </div>
-          </div>
-          <div class="w-full lg:w-1/2 px-0 sm:px-8">
-            <ul class="space-y-10">
-              {
-                items && items.length
-                  ? items.map(({ title: title2, description, icon }, index) => (
-                      <li class="flex md:-mx-4">
-                        <div class="pr-4 sm:pl-4">
-                          <span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-blue-100 text-primary">
-                            {icon ? <Icon name={icon} class="w-6 h-6 icon-bold" /> : index + 1}
-                          </span>
-                        </div>
-                        <div class="pl-4">
-                          <h3 class="mb-4 text-xl font-semibold font-heading" set:html={title2} />
-                          <p class="text-muted dark:text-gray-400" set:html={description} />
-                        </div>
-                      </li>
-                    ))
-                  : ''
-              }
-            </ul>
-          </div>
-        </div>
+      <div class="w-full">
+        {
+          typeof callToAction === 'string' ? (
+            <Fragment set:html={callToAction} />
+          ) : (
+            callToAction &&
+            callToAction.text &&
+            callToAction.href && (
+              <a class="btn btn-primary mb-12" href={callToAction.href} target="_blank" rel="noopener">
+                {callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
+                {callToAction.text}
+              </a>
+            )
+          )
+        }
       </div>
     </div>
+    <div class="w-full lg:w-1/2 px-8 sm:px-0">
+      <ul class="space-y-10">
+        {
+          items && items.length
+            ? items.map(({ title: title2, description, icon }, index) => (
+                <li class="flex md:-mx-4">
+                  <div class="pr-4 sm:pl-4">
+                    <span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-blue-100 text-primary">
+                      {icon ? <Icon name={icon} class="w-6 h-6 icon-bold" /> : index + 1}
+                    </span>
+                  </div>
+                  <div class="pl-4">
+                    <h3 class="mb-4 text-xl font-semibold font-heading" set:html={title2} />
+                    <p class="text-muted dark:text-gray-400" set:html={description} />
+                  </div>
+                </li>
+              ))
+            : ''
+        }
+      </ul>
+    </div>
   </div>
-</section>
+</WidgetWrapper>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 063f241..bc256e2 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -118,9 +118,38 @@ const metadata = {
 
   <!-- Steps2 Widget ****************** -->
 
+  <Steps2
+    title="Our values"
+    subtitle="Maecenas eu tellus eget est scelerisque lacinia et a diam. Aliquam velit lorem, vehicula id fermentum et, rhoncus et purus. Nulla facilisi. Vestibulum malesuada lacus id nibh posuere feugiat."
+    items={[
+      {
+        title: 'Customer-centric approach',
+        description:
+          'Donec id nibh neque. Quisque et fermentum tortor. Fusce vitae dolor a mauris dignissim commodo. Ut eleifend luctus condimentum.',
+      },
+      {
+        title: 'Constant Improvement',
+        description:
+          'Phasellus laoreet fermentum venenatis. Vivamus dapibus pulvinar arcu eget mattis. Fusce eget mauris leo.',
+      },
+      {
+        title: 'Ethical Practices',
+        description:
+          'Vestibulum imperdiet libero et lectus molestie, et maximus augue porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+      },
+    ]}
+  />
+
+  <!-- Steps2 Widget ****************** -->
+
   <Steps2
     title="Achievements"
     subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus."
+    isReversed={true}
+    callToAction={{
+      text: 'See more',
+      href: '/',
+    }}
     items={[
       {
         title: 'Global reach',
@@ -139,12 +168,6 @@ const metadata = {
           'Phasellus lacinia cursus velit, eu malesuada magna pretium eu. Etiam aliquet tellus purus, blandit lobortis ex rhoncus vitae.',
         icon: 'tabler:award',
       },
-      {
-        title: 'Market leadership',
-        description:
-          'Aliquam sem orci, varius pharetra tortor vel, ultricies elementum augue. Vestibulum ante ipsum primis in faucibus.',
-        icon: 'tabler:trophy',
-      },
     ]}
   />
 
diff --git a/src/types.d.ts b/src/types.d.ts
index 17fa9e0..5298748 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -233,6 +233,7 @@ export interface Steps extends Headline, Widget {
     icon?: string;
     classes?: Record<string, string>;
   }>;
+  callToAction?: string | CallToAction;
   image?: string | Image;
   isReversed?: boolean;
 }