✨ Add Svelte + React stepper components

scripts/buildTypes.js

@@ -76,6 +76,7 @@ const buildTypes = type => {
                 'Icon',
                 'Rating',
                 'Spinner',
+                'Stepper',
                 'Table',
                 'Progress'
             ]

src/components/Stepper/Stepper.astro

@@ -15,12 +15,14 @@ const {
     color,
     completedColor,
     activeColor,
+    borderless,
     vertical,
     className
 } = Astro.props
 
 const classes = [
     styles.stepper,
+    borderless && styles.borderless,
     vertical && styles.vertical,
     className
 ]
@@ -29,7 +31,7 @@ const styleVariables = [
     color && `--w-stepper-color-border: ${color}`,
     completedColor && `--w-stepper-color-complete: ${completedColor}`,
     activeColor && `--w-stepper-color-active: ${activeColor}`
-].filter(Boolean).join('')
+].filter(Boolean).join(';')
 ---
 
 <ol class:list={classes} style={styleVariables}>

src/components/Stepper/Stepper.svelte

@@ -1,14 +1,59 @@
 <script lang="ts">
     import type { StepperProps } from './stepper'
 
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
     import { classNames } from '../../utils/classNames'
 
     import styles from './stepper.module.scss'
 
+    export let items: StepperProps['items'] = []
+    export let color: StepperProps['color'] = ''
+    export let completedColor: StepperProps['completedColor'] = ''
+    export let activeColor: StepperProps['activeColor'] = ''
+    export let borderless: StepperProps['vertical'] = false
+    export let vertical: StepperProps['vertical'] = false
     export let className: StepperProps['className'] = ''
 
     const classes = classNames([
         styles.stepper,
+        borderless && styles.borderless,
+        vertical && styles.vertical,
         className
     ])
-</script>
+
+    const styleVariables = [
+        color && `--w-stepper-color-border: ${color}`,
+        completedColor && `--w-stepper-color-complete: ${completedColor}`,
+        activeColor && `--w-stepper-color-active: ${activeColor}`
+    ].filter(Boolean).join(';')
+</script>
+
+<ol class={classes} style={styleVariables || null}>
+    {#each items as item, index}
+        <li class={classNames([
+            index !== 0 && styles.connect,
+            item.active && styles.active,
+            item.completed && styles.completed
+        ])}>
+            <span class={styles.number}>
+                {#if item.icon}
+                    {@html item.icon}
+                {:else}
+                    {index + 1}
+                {/if}
+            </span>
+            <ConditionalWrapper
+                condition={!!(item.title && item.subTitle)}
+                class={styles.container}
+            >
+                {#if item.title}
+                    <span>{item.title}</span>
+                {/if}
+                {#if item.subTitle}
+                    <span class={styles.muted}>{item.subTitle}</span>
+                {/if}
+            </ConditionalWrapper>
+        </li>
+    {/each}
+</ol>

src/components/Stepper/Stepper.tsx

@@ -1,19 +1,60 @@
 import React from 'react'
 import type { StepperProps } from './stepper'
 
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
 import { classNames } from '../../utils/classNames'
 
 import styles from './stepper.module.scss'
 
 const Stepper = ({
+    items,
+    color,
+    completedColor,
+    activeColor,
+    borderless,
+    vertical,
     className
 }: StepperProps) => {
     const classes = classNames([
         styles.stepper,
+        borderless && styles.borderless,
+        vertical && styles.vertical,
         className
     ])
 
-    return <div>Stepper</div>
+    const styleVariables = {
+        ...(color && { '--w-stepper-color-border': color }),
+        ...(completedColor && { '--w-stepper-color-complete': completedColor }),
+        ...(activeColor && { '--w-stepper-color-active': activeColor })
+    } as React.CSSProperties
+
+    return (
+        <ol className={classes} style={styleVariables}>
+            {items?.map((item, index) => (
+                <li className={classNames([
+                    index !== 0 && styles.connect,
+                    item.active && styles.active,
+                    item.completed && styles.completed
+                ])} key={index}>
+                    <span
+                        className={styles.number}
+                        dangerouslySetInnerHTML={{ __html: item.icon
+                            ? item.icon
+                            : index + 1
+                        }}
+                    />
+                    <ConditionalWrapper
+                        condition={!!(item.title && item.subTitle)}
+                        wrapper={children => <div className={styles.container}>{children}</div>}
+                    >
+                        {item.title && <span>{item.title}</span>}
+                        {item.subTitle && <span className={styles.muted}>{item.subTitle}</span>}
+                    </ConditionalWrapper>
+                </li>
+            ))}
+        </ol>
+    )
 }
 
-export default Stepper
+export default Stepper

src/components/Stepper/stepper.module.scss

@@ -15,6 +15,10 @@ $size: 20px;
 
     list-style-type: none;
 
+    &:not(.borderless) .number {
+        border: 2px solid var(--w-stepper-color-border);
+    }
+
     li {
         @include layout(flex, sm, v-center);
         @include typography(normal);
@@ -27,7 +31,7 @@ $size: 20px;
 
             &::before {
                 @include position(absolute, l16px);
-                @include background(primary-50);
+                @include background(var(--w-stepper-color-border));
                 @include size(w2px);
 
                 top: -50%;
@@ -59,8 +63,6 @@ $size: 20px;
             @include spacing(p-md);
             @include typography(bold, md);
 
-            border: 2px solid var(--w-stepper-color-border);
-
             svg {
                 @include position(absolute);
             }

src/components/Stepper/stepper.ts

@@ -11,6 +11,7 @@ export type StepperProps = {
     color?: string
     completedColor?: string
     activeColor?: string
+    borderless?: boolean
     vertical?: boolean
     className?: string
 }

src/pages/components/stepper.astro

@@ -19,27 +19,21 @@ const sections = getSections({
     title: 'steppers',
     components: [AstroStepper, SvelteStepper, ReactStepper]
 })
-
-const items = [
-    { title: 'Setup', subTitle: 'Get ready', completed: true, icon: 'circle-check' },
-    { title: 'Configure', subTitle: 'Preferences', active: true, icon: 'github' },
-    { title: 'Finish', subTitle: 'Final steps' }
-]
 ---
 
 <Layout>
     <h1>Stepper</h1>
     <div class="grid md-2 lg-3">
         <ComponentWrapper type="Astro">
-            <AstroStepper items={items} />
+            <AstroStepper items={stepperWithIcons} />
         </ComponentWrapper>
 
         <ComponentWrapper type="Svelte">
-            <SvelteStepper items={items} />
+            <SvelteStepper items={stepperWithIcons} />
         </ComponentWrapper>
 
         <ComponentWrapper type="React">
-            <ReactStepper items={items} />
+            <ReactStepper items={stepperWithIcons} />
         </ComponentWrapper>
     </div>
 
@@ -72,9 +66,16 @@ const items = [
             <ComponentWrapper title="Borderless stepper">
                 <section.component
                     items={stepperWithIcons}
-                    color="transparent"
-                    completedColor="transparent"
-                    activeColor="transparent"
+                    borderless={true}
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Custom colors">
+                <section.component
+                    items={stepperWithIcons}
+                    color="var(--w-color-alert)"
+                    completedColor="var(--w-color-info)"
+                    activeColor="var(--w-color-warning)"
                 />
             </ComponentWrapper>