feat(fds-stepper): dispatch step click event (#730)

Finastra · May 30, 2022 · b617cc9 · b617cc9
1 parent d0eb256
commit b617cc9
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 14 deletions.
diff --git a/libs/web-components/stepper/demo/index.html b/libs/web-components/stepper/demo/index.html
@@ -2,30 +2,30 @@
 <script type="module" src="node_modules/@finastra/stepper/dist/src/vertical-stepper.js"></script>
 <div>Horizontal stepper</div>
 <div class="main-content">
-  <label>step 2</label>
+  <label>Step 2</label>
   <fds-horizontal-stepper id="hStepper" currentStepIndex="1"></fds-horizontal-stepper>
 
-  <label>step 3</label>
+  <label>Step 3</label>
   <fds-horizontal-stepper id="hStepper" currentStepIndex="2"></fds-horizontal-stepper>
 
-  <label>secondary</label>
+  <label>Secondary</label>
   <fds-horizontal-stepper style="width: 700px" id="hStepper" secondary currentStepIndex="3"></fds-horizontal-stepper>
 
-  <label>step 5</label>
+  <label>Step 5</label>
   <fds-horizontal-stepper id="hStepper" currentStepIndex="4"></fds-horizontal-stepper>
 </div>
 <br />
 <div>Vertical stepper</div>
-<label>step 2</label>
+<label>Step 2</label>
 <fds-vertical-stepper id="hStepper" currentStepIndex="1"></fds-vertical-stepper>
 
-<label>step 3</label>
+<label>Step 3</label>
 <fds-vertical-stepper label-mode="center" id="hStepper" currentStepIndex="2"></fds-vertical-stepper>
 
 <label>secondary</label>
 <fds-vertical-stepper style="width: 250px" id="hStepper" secondary currentStepIndex="2"></fds-vertical-stepper>
 
-<label>step 5</label>
+<label>Step 5</label>
 <fds-vertical-stepper label-mode="background" style="width: 300px" id="hStepper" currentStepIndex="2"></fds-vertical-stepper>
 <script>
   const hSteppers = document.querySelectorAll('#hStepper');

diff --git a/libs/web-components/stepper/src/base-stepper.ts b/libs/web-components/stepper/src/base-stepper.ts
@@ -1,6 +1,7 @@
 import { html, LitElement, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { EVENTS } from './constants';
 
 export interface Step {
   label: string;
@@ -21,17 +22,18 @@ export class BaseStepper extends LitElement {
   currentStepIndex = -1;
 
   renderIconAndLine(index: number) {
-    const startLineClass = { hidden: index === 0, current: index === (this.currentStepIndex + 1) && !this.steps[index-1].disabled, first: index === 0};
+    const startLineClass = { hidden: index === 0, current: index === (this.currentStepIndex + 1) && !this.steps[index - 1].disabled, first: index === 0 };
     const endLineClass = { hidden: index === this.steps.length - 1, last: index === this.steps.length - 1 };
     return html`
       <div class="line  start-line ${classMap(startLineClass)}"></div>
       <div class="circle step-item-icon">
         ${index >= this.currentStepIndex
         ? index + 1
         : svg`<svg width="14" height="11" viewBox="0 0 14 11">
-<path d="M4.75012 8.12757L1.62262 5.00007L0.557617 6.05757L4.75012 10.2501L13.7501 1.25007L12.6926 0.192566L4.75012 8.12757Z"/>
-</svg>
-`}
+          <path
+            d="M4.75012 8.12757L1.62262 5.00007L0.557617 6.05757L4.75012 10.2501L13.7501 1.25007L12.6926 0.192566L4.75012 8.12757Z" />
+        </svg>
+        `}
       </div>
       <div class="line end-line ${classMap(endLineClass)}"></div>
     `;
@@ -41,7 +43,7 @@ export class BaseStepper extends LitElement {
     return html`<div class="container">
       ${this.steps.map(
       (step, idx) =>
-        html`<div class="step-item ${idx < this.currentStepIndex? 'done' : ''} ${idx === this.currentStepIndex && !step.disabled? 'current' : ''} ${step.disabled && idx >= this.currentStepIndex ? 'disabled' : ''} ">
+      html`<div class="step-item ${idx < this.currentStepIndex ? 'done' : ''} ${idx === this.currentStepIndex && !step.disabled? 'current' : ''} ${step.disabled? 'disabled' : ''}" @click="${() => this._onStepClick(idx)}">
             ${this.renderIconAndLine(idx)}
             ${step.description
             ? html`<div class="text-wrapper">
@@ -53,4 +55,20 @@ export class BaseStepper extends LitElement {
     )}
     </div>`;
   }
+
+  _onStepClick(index: number) {
+    if (!this.steps[index]?.disabled) {
+      this.currentStepIndex = index;
+      this.dispatchEvent(
+        new CustomEvent(EVENTS.STEPCLICK, {
+          bubbles: true, composed: true, detail: {
+            value: `${index}`
+          }
+        })
+      )
+    }
+    else {
+      return;
+    }
+  }
 }
diff --git a/libs/web-components/stepper/src/base-styles.scss b/libs/web-components/stepper/src/base-styles.scss
@@ -17,11 +17,22 @@
   @include fds.property(border-color, outline);
 }
 
-.step-item-label,
-.step-item-description {
+.step-item {
+  cursor: pointer;
+}
+
+.disabled.step-item {
+  pointer-events: none;
+}
+
+.step-item-label {
   @include fds.text-color(on-background);
 }
 
+.step-item-description {
+  @include fds.text-color(on-surface-medium);
+}
+
 .done {
   .circle {
     @include fds.property(border-color, success);
@@ -37,10 +48,18 @@
   }
 }
 
+.disabled.done {
+  .circle {
+    @include fds.property(border-color, success);
+    @include fds.bg-color(success);
+  }
+}
+
 .disabled {
   .circle {
     background: var(--fds-surface-disabled);
     @include fds.text-color(on-surface-disabled);
+    pointer-events: none;
   }
 
   .step-item-label,

diff --git a/libs/web-components/stepper/src/constants.ts b/libs/web-components/stepper/src/constants.ts
@@ -0,0 +1,4 @@
+export const EVENTS = {
+    STEPCLICK: 'step-click'
+};
+
diff --git a/libs/web-components/stepper/stories/horizontal-stepper.stories.ts b/libs/web-components/stepper/stories/horizontal-stepper.stories.ts
@@ -4,6 +4,8 @@ import type { HorizontalStepper } from '@finastra/stepper';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
 import { argTypes, cssprops } from './custom-element.json';
+import { EVENTS } from '../src/constants';
+
 const demoData = [
   {
     label: 'Step Success',
@@ -46,6 +48,9 @@ export default {
     currentStepIndex: 1
   },
   parameters: {
+    actions: {
+      handles: [EVENTS.STEPCLICK]
+    },
     docs: {
       description: { component: README }
     },

diff --git a/libs/web-components/stepper/stories/vertical-stepper.stories.ts b/libs/web-components/stepper/stories/vertical-stepper.stories.ts
@@ -3,6 +3,7 @@ import '@finastra/stepper';
 import type { VerticalStepper } from '@finastra/stepper';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
+import { EVENTS } from '../src/constants';
 import { argTypes, cssprops } from './custom-element.json';
 const demoData = [
   {
@@ -62,6 +63,9 @@ export default {
     currentStepIndex: 1
   },
   parameters: {
+    actions: {
+      handles: [EVENTS.STEPCLICK]
+    },
     docs: {
       description: { component: README }
     },