feat: add wizard steps variant

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lukso/web-components",
-	"version": "1.188.0",
+	"version": "1.190.0",
 	"type": "module",
 	"files": [
 		"dist",

src/components/lukso-wizard/index.ts

@@ -1,4 +1,4 @@
-import { html } from 'lit'
+import { html, nothing } from 'lit'
 import { property } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
 import { tv } from 'tailwind-variants'
@@ -12,6 +12,7 @@ export type WizardStep = {
 }
 
 export type WizardSize = 'small' | 'medium' | 'large' | 'full-width'
+export type WizardVariant = 'default' | 'secondary'
 
 /**
  * A multi-step progress indicator (stepper) showing labelled steps with completed/current/upcoming states.
@@ -27,6 +28,34 @@ export class LuksoWizard extends TailwindStyledElement(style) {
   @property({ type: String })
   size: WizardSize = 'medium'
 
+  @property({ type: String })
+  variant: WizardVariant = 'default'
+
+  private numberedStepStyles = tv({
+    slots: {
+      base: 'flex items-center flex-1 last:flex-none',
+      circle: `lukso-wizard-numbered-circle w-7 h-7 rounded-full flex items-center justify-center
+        shrink-0 body-inter-12-bold text-neutral-80 border border-neutral-80`,
+      label: 'ml-2 body-inter-12-medium text-neutral-80 whitespace-nowrap',
+      line: 'lukso-wizard-numbered-line flex-1 h-[2px] mx-3 bg-neutral-90 transition-colors duration-300',
+    },
+    variants: {
+      completed: {
+        true: {
+          circle: 'bg-green-45 text-neutral-100 border border-green-54',
+          label: 'text-green-54',
+          line: 'bg-green-45',
+        },
+      },
+      active: {
+        true: {
+          circle: 'bg-neutral-10 text-neutral-100 border border-neutral-20 ',
+          label: 'text-neutral-20',
+        },
+      },
+    },
+  })
+
   private stepStyles = tv({
     slots: {
       base: `inline-flex flex-col items-center justify-end first:-ml-12 last:-mr-12 relative
@@ -79,6 +108,20 @@ export class LuksoWizard extends TailwindStyledElement(style) {
     },
   })
 
+  numberedStepTemplate(step: WizardStep, index: number, totalSteps: number) {
+    const isCompleted = index + 1 < this.activeStep
+    const isActive = index + 1 === this.activeStep
+    const { base, circle, label, line } = this.numberedStepStyles({
+      completed: isCompleted,
+      active: isActive,
+    })
+    return html`<li class="${base()}">
+      <div class="${circle()}">${index + 1}</div>
+      <span class="${label()}">${step.label}</span>
+      ${index < totalSteps - 1 ? html`<div class="${line()}"></div>` : nothing}
+    </li>`
+  }
+
   stepTemplate(step: WizardStep, index: number) {
     const { base, circle, innerCircle } = this.stepStyles({
       completed: index + 1 < this.activeStep,
@@ -88,7 +131,7 @@ export class LuksoWizard extends TailwindStyledElement(style) {
     })
     return html`<li class="${base()}">
       <div
-        class="text-purple-51 nav-inter-8-medium-uppercase whitespace-pre-line flex text-center break-words uppercase leading-none"
+        class="text-purple-51 nav-inter-8-medium-uppercase whitespace-pre-line flex text-center wrap-break-word uppercase leading-none"
       >
         ${step.label}
       </div>
@@ -101,6 +144,19 @@ export class LuksoWizard extends TailwindStyledElement(style) {
   render() {
     const steps = JSON.parse(this.steps) as WizardStep[]
 
+    if (this.variant === 'secondary') {
+      return html`
+        <ul class="flex items-center w-full" data-testid="wizard">
+          ${repeat(
+            steps || [],
+            step => steps.indexOf(step),
+            (step, index) =>
+              this.numberedStepTemplate(step, index, steps.length)
+          )}
+        </ul>
+      `
+    }
+
     return html`
       <ul class="flex justify-center" data-testid="wizard">
         ${repeat(
@@ -115,8 +171,8 @@ export class LuksoWizard extends TailwindStyledElement(style) {
   updated() {
     // delay animation to allow for DOM to be updated
     setTimeout(() => {
-      const currentStep = this.shadowRoot.querySelectorAll('.current')
-      currentStep[0]?.classList.add('animated-step')
+      const currentStep = this.shadowRoot?.querySelectorAll('.current')
+      currentStep?.[0]?.classList.add('animated-step')
     }, 10)
   }
 }

src/components/lukso-wizard/lukso-wizard.stories.ts

@@ -31,6 +31,13 @@ const meta: Meta = {
         category: 'Attributes',
       },
     },
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'secondary'],
+      table: {
+        category: 'Attributes',
+      },
+    },
     'active-step': {
       name: 'activeStep',
     },
@@ -68,11 +75,35 @@ LYXe`,
 
 export default meta
 
-const Template = ({ steps, activeStep, size }) =>
+const Template = ({
+  steps,
+  activeStep,
+  size,
+  variant,
+}: {
+  steps: object[]
+  activeStep: number
+  size: string
+  variant: string
+}) =>
   html`<lukso-wizard
     steps=${JSON.stringify(steps)}
     active-step=${activeStep}
     size=${size ? size : nothing}
+    variant=${variant ? variant : nothing}
   ></lukso-wizard>`
 
 export const BasicWizard = Template.bind({})
+
+export const NumberedWizard = Template.bind({})
+;(NumberedWizard as typeof Template & { args: object }).args = {
+  steps: [
+    { label: 'Token information' },
+    { label: 'Token settings' },
+    { label: 'Review' },
+    { label: 'Deploy' },
+  ],
+  size: 'full-width',
+  activeStep: 3,
+  variant: 'secondary',
+}