feat: emit event on progress step click. update story book & update md (

#1219) Co-authored-by: David Nixon <> Co-authored-by: Lee Chase <[email protected]>
carbon-design-system · Jul 12, 2021 · 6088957 · 6088957
1 parent 4bea868
commit 6088957
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,7 @@ storybook-static
 
 # Cache folders
 .cache
+.yarn-offline-mirror
 
 # Logs
 logs
@@ -45,4 +46,4 @@ package-lock.json
 package-info.jsonl
 
 # Local Netlify folder
-.netlify
+.netlify
diff --git a/packages/core/src/components/cv-progress/cv-progress-notes.md b/packages/core/src/components/cv-progress/cv-progress-notes.md
@@ -12,10 +12,10 @@ Includes carbon 9 functionality and adds new features using slotted cv-progress-
 
 ```html
 <cv-progress>
-  <cv-progress-step label="Step 1" complete additional-info="Optional info" />
-  <cv-progress-step label="Step 2" complete />
-  <cv-progress-step label="Step 3" />
-  <cv-progress-step label="Step 4" invalid />
+  <cv-progress-step label="Step 1" complete additional-info="Optional info" @step-clicked="actionStepClicked" />
+  <cv-progress-step label="Step 2" complete @step-clicked="actionStepClicked" />
+  <cv-progress-step label="Step 3" @step-clicked="actionStepClicked" />
+  <cv-progress-step label="Step 4" invalid @step-clicked="actionStepClicked" />
   <cv-progress-step label="Step 4" disabled />
 </cv-progress>
 ```
@@ -49,5 +49,9 @@ NOTE: steps is an array of strings declared elsewhere.
 
 ### Attributes
 
-- steps : An array of steaps e.g. ['Step 1', 'Step 2', 'Step 3', 'Step 4']
+- steps : An array of steps e.g. ['Step 1', 'Step 2', 'Step 3', 'Step 4']
 - initial-step : index of initial step
+
+## Events
+
+Clicking on the steps raise step-cliked events.
diff --git a/packages/core/src/components/cv-progress/cv-progress-step.vue b/packages/core/src/components/cv-progress/cv-progress-step.vue
@@ -18,6 +18,7 @@
       :class="[`${carbonPrefix}--progress-label`, { [`${carbonPrefix}--progress-label-overflow`]: showOverflow }]"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
+      @click="$emit('step-clicked')"
       ref="label"
     >
       {{ label }}

diff --git a/storybook/stories/cv-progress-story.js b/storybook/stories/cv-progress-story.js
@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/vue';
 import { array, number, boolean } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
 
 import SvTemplateView from '../_storybook/views/sv-template-view/sv-template-view';
 // import consts from '../_storybook/utils/consts';
@@ -37,11 +38,11 @@ const preKnobs = {
   },
   slotted: {
     group: 'slots',
-    value: `<cv-progress-step label="Step 1" additional-info="Optional info" :complete="complete[0]" description="This is the first step"/>
-  <cv-progress-step label="Step 2 is a bit longer" :complete="complete[1]" description="This is the second step"/>
-  <cv-progress-step label="Step 3" :complete="complete[2]" tip-text="Step 3 has hard coded tip" description="This is the third step"/>
-  <cv-progress-step label="Step 4" :complete="complete[3]" invalid description="This is the penultimate step"/>
-  <cv-progress-step label="Step 4" :complete="complete[4]" disabled description="This is the last step"/>
+    value: `<cv-progress-step label="Step 1" additional-info="Optional info" :complete="complete[0]" description="This is the first step" @step-clicked="actionStepClicked" />
+  <cv-progress-step label="Step 2 is a bit longer" :complete="complete[1]" description="This is the second step" @step-clicked="actionStepClicked"/>
+  <cv-progress-step label="Step 3" :complete="complete[2]" tip-text="Step 3 has hard coded tip" description="This is the third step" @step-clicked="actionStepClicked" />
+  <cv-progress-step label="Step 4" :complete="complete[3]" invalid description="This is the penultimate step" @step-clicked="actionStepClicked"/>
+  <cv-progress-step label="Step 4" :complete="complete[4]" disabled description="This is the last step" @step-clicked="actionStepClicked"/>
 `,
   },
 };
@@ -83,6 +84,9 @@ for (const story of storySet) {
         data: () => ({ complete: [true, false, false, false, false] }),
         template: templateViewString,
         props: settings.props,
+        methods: {
+          actionStepClicked: action('CV Progress Step - step-clicked'),
+        },
       };
     },
     {