feat: added it-stepper

.changeset/config.json

@@ -43,6 +43,7 @@
       "@italia/section",
       "@italia/select",
       "@italia/skiplinks",
+      "@italia/stepper",
       "@italia/sticky",
       "@italia/tabs",
       "@italia/timeline",

.changeset/shy-areas-talk.md

@@ -0,0 +1,6 @@
+---
+'@italia/dev-kit-italia': minor
+'@italia/stepper': minor
+---
+
+Added `it-stepper` component

.storybook/elements.ts

@@ -31,6 +31,7 @@ import '../packages/section/dist/src';
 import '../packages/select/dist/src';
 import '../packages/skiplinks/dist/src';
 import '../packages/sticky/dist/src';
+import '../packages/stepper/dist/src';
 import '../packages/tabs/dist/src';
 import '../packages/thumbnav/dist/src';
 import '../packages/timeline/dist/src';

examples/angular-app/src/app/app.routes.ts

@@ -230,6 +230,11 @@ export const routes: Routes = [
     path: 'sticky',
     loadComponent: () => import('./pages/sticky.component').then((c) => c.StickyComponent),
   },
+  {
+    title: 'Stepper',
+    path: 'stepper',
+    loadComponent: () => import('./pages/stepper.component').then((c) => c.StepperComponent),
+  },
   {
     title: 'Tables',
     path: 'tables',

examples/angular-app/src/app/pages/stepper.component.html

@@ -0,0 +1,161 @@
+<div
+  class="stepper-examples"
+  (it-stepper-change)="logStepperEvent($event)"
+  (it-stepper-save)="logStepperEvent($event)"
+  (it-stepper-confirm)="logStepperEvent($event)"
+>
+  <h1>Stepper</h1>
+
+  <section>
+    <h2>Solo testo</h2>
+    <it-stepper current="1" header-variant="text">
+      <it-stepper-step
+        *ngFor="let step of steps; let index = index"
+        [attr.icon]="step.icon"
+      >
+        <span slot="label">{{ step.label }}</span>
+        <div class="p-5 text-center border bg-light"><p class="m-0">Contenuto dello step {{ index + 1 }}</p></div>
+      </it-stepper-step>
+    </it-stepper>
+  </section>
+
+  <section>
+    <h2>Testo e icone</h2>
+    <it-stepper current="1" header-variant="icons">
+      <it-stepper-step
+        *ngFor="let step of steps; let index = index"
+        [attr.icon]="step.icon"
+      >
+        <span slot="label">{{ step.label }}</span>
+        <div class="p-5 text-center border bg-light"><p class="m-0">Contenuto dello step {{ index + 1 }}</p></div>
+      </it-stepper-step>
+    </it-stepper>
+  </section>
+
+  <section>
+    <h2>Testo e numeri</h2>
+    <it-stepper current="1" header-variant="numbers">
+      <it-stepper-step
+        *ngFor="let step of steps; let index = index"
+        [attr.icon]="step.icon"
+      >
+        <span slot="label">{{ step.label }}</span>
+        <div class="p-5 text-center border bg-light"><p class="m-0">Contenuto dello step {{ index + 1 }}</p></div>
+      </it-stepper-step>
+    </it-stepper>
+  </section>
+
+  <section>
+    <h2>Navigazione degli step</h2>
+    <it-stepper current="1" prev-label="Precedente" next-label="Successivo">
+      <it-stepper-step
+        *ngFor="let step of steps; let index = index"
+        [attr.icon]="step.icon"
+      >
+        <span slot="label">{{ step.label }}</span>
+        <div class="p-5 text-center border bg-light"><p class="m-0">Contenuto dello step {{ index + 1 }}</p></div>
+      </it-stepper-step>
+    </it-stepper>
+  </section>
+
+  <section>
+    <h2>Progress bar</h2>
+    <it-stepper current="1" mobile-progress="bar" mobile-progress-on-desktop>
+      <it-stepper-step
+        *ngFor="let step of steps; let index = index"
+        [attr.icon]="step.icon"
+      >
+        <span slot="label">{{ step.label }}</span>
+        <div class="p-5 text-center border bg-light"><p class="m-0">Contenuto dello step {{ index + 1 }}</p></div>
+      </it-stepper-step>
+    </it-stepper>
+  </section>
+
+  <section>
+    <h2>Pallini</h2>
+    <it-stepper current="1" mobile-progress="dots" mobile-progress-on-desktop>
+      <it-stepper-step
+        *ngFor="let step of steps; let index = index"
+        [attr.icon]="step.icon"
+      >
+        <span slot="label">{{ step.label }}</span>
+        <div class="p-5 text-center border bg-light"><p class="m-0">Contenuto dello step {{ index + 1 }}</p></div>
+      </it-stepper-step>
+    </it-stepper>
+  </section>
+
+  <section>
+    <h2>Salva</h2>
+    <it-stepper
+      current="1"
+      save-label="Salva"
+      save-title="Vuoi salvare il progresso?"
+      save-description="Potrai riprendere il flusso da questo punto in poi."
+    >
+      <it-stepper-step
+        *ngFor="let step of steps; let index = index"
+        [attr.icon]="step.icon"
+      >
+        <span slot="label">{{ step.label }}</span>
+        <div class="p-5 text-center border bg-light"><p class="m-0">Contenuto dello step {{ index + 1 }}</p></div>
+      </it-stepper-step>
+    </it-stepper>
+  </section>
+
+  <section>
+    <h2>Conferma</h2>
+    <it-stepper current="1" show-confirm confirm-label="Conferma">
+      <it-stepper-step
+        *ngFor="let step of steps; let index = index"
+        [attr.icon]="step.icon"
+      >
+        <span slot="label">{{ step.label }}</span>
+        <div class="p-5 text-center border bg-light"><p class="m-0">Contenuto dello step {{ index + 1 }}</p></div>
+      </it-stepper-step>
+    </it-stepper>
+  </section>
+
+  <section class="bg-dark p-4">
+    <h2 class="text-white">Sfondo scuro</h2>
+    <it-stepper current="1" dark>
+      <it-stepper-step
+        *ngFor="let step of steps; let index = index"
+        [attr.icon]="step.icon"
+      >
+        <span slot="label">{{ step.label }}</span>
+        <div class="p-5 text-center border text-white"><p class="m-0">Contenuto dello step {{ index + 1 }}</p></div>
+      </it-stepper-step>
+    </it-stepper>
+  </section>
+
+  <section class="stepper-variant-stack bg-dark p-4">
+    <h2 class="text-white">Sfondo scuro - varianti intestazione</h2>
+    <it-stepper current="1" dark header-variant="text">
+      <it-stepper-step
+        *ngFor="let step of steps; let index = index"
+        [attr.icon]="step.icon"
+      >
+        <span slot="label">{{ step.label }}</span>
+        <div class="p-5 text-center border text-white"><p class="m-0">Contenuto dello step {{ index + 1 }}</p></div>
+      </it-stepper-step>
+    </it-stepper>
+    <it-stepper current="1" dark header-variant="icons">
+      <it-stepper-step
+        *ngFor="let step of steps; let index = index"
+        [attr.icon]="step.icon"
+      >
+        <span slot="label">{{ step.label }}</span>
+        <div class="p-5 text-center border text-white"><p class="m-0">Contenuto dello step {{ index + 1 }}</p></div>
+      </it-stepper-step>
+    </it-stepper>
+    <it-stepper current="1" dark header-variant="numbers">
+      <it-stepper-step
+        *ngFor="let step of steps; let index = index"
+        [attr.icon]="step.icon"
+      >
+        <span slot="label">{{ step.label }}</span>
+        <div class="p-5 text-center border text-white"><p class="m-0">Contenuto dello step {{ index + 1 }}</p></div>
+      </it-stepper-step>
+    </it-stepper>
+  </section>
+</div>

examples/angular-app/src/app/pages/stepper.component.ts

@@ -0,0 +1,36 @@
+import { NgFor } from '@angular/common';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@Component({
+  selector: 'app-stepper',
+  templateUrl: './stepper.component.html',
+  imports: [NgFor],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  standalone: true,
+  styles: [
+    `
+      .stepper-examples {
+        display: flex;
+        flex-direction: column;
+        gap: var(--bsi-spacing-xl, 2rem);
+      }
+
+      .stepper-variant-stack {
+        display: flex;
+        flex-direction: column;
+        gap: var(--bsi-spacing-xl);
+      }
+    `,
+  ],
+})
+export class StepperComponent {
+  steps = [
+    { label: 'Primo contenuto', icon: 'it-calendar' },
+    { label: 'Secondo contenuto', icon: 'it-lock' },
+    { label: 'Terzo contenuto', icon: 'it-settings' },
+  ];
+
+  logStepperEvent(event: Event): void {
+    console.info(event.type, (event as CustomEvent).detail);
+  }
+}

examples/react-app/src/pages/Stepper.jsx

@@ -0,0 +1,130 @@
+import { useEffect, useRef } from 'react';
+
+const steps = [
+  { label: 'Primo contenuto', icon: 'it-calendar' },
+  { label: 'Secondo contenuto', icon: 'it-lock' },
+  { label: 'Terzo contenuto', icon: 'it-settings' },
+];
+
+function StepperExample({ dark = false, headerVariant = '', mobileProgress = '', ...attrs }) {
+  const stepperAttrs = {
+    current: 1,
+    dark: dark || undefined,
+    'header-variant': headerVariant || undefined,
+    'mobile-progress': mobileProgress || undefined,
+    ...attrs,
+  };
+
+  return (
+    <it-stepper {...stepperAttrs}>
+      {steps.map((step, index) => (
+        <it-stepper-step key={step.label} icon={step.icon}>
+          <span slot="label">{step.label}</span>
+          <div className={`p-5 text-center border ${dark ? 'text-white' : 'bg-light'}`}>
+            <p className="m-0">Contenuto dello step {index + 1}</p>
+          </div>
+        </it-stepper-step>
+      ))}
+    </it-stepper>
+  );
+}
+
+const Stepper = () => {
+  const rootRef = useRef(null);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return undefined;
+
+    const logStepperEvent = (event) => console.info(event.type, event.detail);
+    root.addEventListener('it-stepper-change', logStepperEvent);
+    root.addEventListener('it-stepper-save', logStepperEvent);
+    root.addEventListener('it-stepper-confirm', logStepperEvent);
+
+    return () => {
+      root.removeEventListener('it-stepper-change', logStepperEvent);
+      root.removeEventListener('it-stepper-save', logStepperEvent);
+      root.removeEventListener('it-stepper-confirm', logStepperEvent);
+    };
+  }, []);
+
+  return (
+    <div ref={rootRef} className="stepper-examples">
+      <style>{`
+        .stepper-examples {
+          display: flex;
+          flex-direction: column;
+          gap: var(--bsi-spacing-xl, 2rem);
+        }
+
+        .stepper-variant-stack {
+          display: flex;
+          flex-direction: column;
+          gap: var(--bsi-spacing-xl);
+        }
+      `}</style>
+
+      <h1>Stepper</h1>
+
+      <section>
+        <h2>Solo testo</h2>
+        <StepperExample headerVariant="text" />
+      </section>
+
+      <section>
+        <h2>Testo e icone</h2>
+        <StepperExample headerVariant="icons" />
+      </section>
+
+      <section>
+        <h2>Testo e numeri</h2>
+        <StepperExample headerVariant="numbers" />
+      </section>
+
+      <section>
+        <h2>Navigazione degli step</h2>
+        <StepperExample {...{ 'prev-label': 'Precedente', 'next-label': 'Successivo' }} />
+      </section>
+
+      <section>
+        <h2>Progress bar</h2>
+        <StepperExample mobileProgress="bar" {...{ 'mobile-progress-on-desktop': '' }} />
+      </section>
+
+      <section>
+        <h2>Pallini</h2>
+        <StepperExample mobileProgress="dots" {...{ 'mobile-progress-on-desktop': '' }} />
+      </section>
+
+      <section>
+        <h2>Salva</h2>
+        <StepperExample
+          {...{
+            'save-label': 'Salva',
+            'save-title': 'Vuoi salvare il progresso?',
+            'save-description': 'Potrai riprendere il flusso da questo punto in poi.',
+          }}
+        />
+      </section>
+
+      <section>
+        <h2>Conferma</h2>
+        <StepperExample {...{ 'show-confirm': '', 'confirm-label': 'Conferma' }} />
+      </section>
+
+      <section className="bg-dark p-4">
+        <h2 className="text-white">Sfondo scuro</h2>
+        <StepperExample dark />
+      </section>
+
+      <section className="stepper-variant-stack bg-dark p-4">
+        <h2 className="text-white">Sfondo scuro - varianti intestazione</h2>
+        <StepperExample dark headerVariant="text" />
+        <StepperExample dark headerVariant="icons" />
+        <StepperExample dark headerVariant="numbers" />
+      </section>
+    </div>
+  );
+};
+
+export default Stepper;