feat: stepper: adds show active step index prop (#505)

ensures there is an option to show the numerical index for the active timeline step
EightfoldAI · Jan 18, 2023 · 6d0176f · 6d0176f
1 parent b6ab5cb
commit 6d0176f
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 9 deletions.
diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx
@@ -56,11 +56,12 @@ export const Stepper: FC<StepperProps> = React.forwardRef(
       scrollLeftAriaLabelText: defaultScrollLeftAriaLabelText,
       scrollRightAriaLabelText: defaultScrollRightAriaLabelText,
       scrollUpAriaLabelText: defaultScrollUpAriaLabelText,
+      showActiveStepIndex,
       size = StepperSize.Medium,
-      theme,
       status,
       steps,
       style,
+      theme,
       variant = StepperVariant.Default,
       width,
       'data-test-id': dataTestId,
@@ -285,15 +286,20 @@ export const Stepper: FC<StepperProps> = React.forwardRef(
           (styles as any)[`${theme}`],
           (styles as any)[`${status}`],
         ])}
-        iconProps={{
-          path: getIcon(icon, active, complete),
-          classNames: styles.checkIcon,
-        }}
+        iconProps={
+          active && showActiveStepIndex
+            ? null
+            : {
+                path: getIcon(icon, active, complete),
+                classNames: styles.checkIcon,
+              }
+        }
         onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
           handleOnClick(event, index)
         }
         shape={ButtonShape.Round}
         size={stepSizeToButtonSizeMap.get(size)}
+        text={active && showActiveStepIndex ? `${index + 1}` : null}
       />
     );
 

diff --git a/src/components/Stepper/Stepper.types.ts b/src/components/Stepper/Stepper.types.ts
@@ -204,6 +204,11 @@ export interface StepperProps
    * @default 'Scroll up'
    */
   scrollUpAriaLabelText?: string;
+  /**
+   * Show active step index.
+   * Use when step is an icon, but an index is desired for the active step.
+   */
+  showActiveStepIndex?: boolean;
   /**
    * The Stepper size.
    * @default StepperSize.Medium
@@ -213,14 +218,14 @@ export interface StepperProps
    * The validation status.
    */
   status?: StepperValidationStatus;
-  /**
-   * Theme of the Stepper.
-   */
-  theme?: StepperThemeName;
   /**
    * The Stepper Steps.
    */
   steps?: Step[];
+  /**
+   * Theme of the Stepper.
+   */
+  theme?: StepperThemeName;
   /**
    * The Stepper variant.
    * options: Default, Timeline

diff --git a/src/components/Stepper/Timeline.stories.tsx b/src/components/Stepper/Timeline.stories.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useArgs } from '@storybook/client-api';
 import {
   Stepper,
   StepperLineStyle,
@@ -167,21 +168,89 @@ const Default_Story: ComponentStory<typeof Stepper> = (args) => {
   );
 };
 
+const Show_Small_Active_Index_Story: ComponentStory<typeof Stepper> = (
+  args
+) => {
+  const [_, updateArgs] = useArgs();
+
+  const handle = (index: number = 3) => {
+    updateArgs({
+      ...args,
+      activeStepIndex: index,
+      index: index,
+      steps: [1, 2, 3, 4, 5].map((i: number) => ({
+        index: i,
+        content: `Timeline label ${i}`,
+        complete: i > 2 ? false : true,
+        nodeAriaLabelText: i === 5 ? 'Finish' : null,
+        nodeIcon: i === 5 ? IconName.mdiFlagCheckered : null,
+        size: i === index + 1 ? StepSize.Large : StepSize.Small,
+      })),
+    });
+  };
+
+  return (
+    <Row>
+      <Col span="12">
+        <Stepper {...args} onChange={(step: number) => handle(step)} />
+      </Col>
+    </Row>
+  );
+};
+
+const Show_Medium_Active_Index_Story: ComponentStory<typeof Stepper> = (
+  args
+) => {
+  const [_, updateArgs] = useArgs();
+
+  const handle = (index: number = 3) => {
+    updateArgs({
+      ...args,
+      activeStepIndex: index,
+      index: index,
+      steps: [1, 2, 3, 4, 5].map((i: number) => ({
+        index: i,
+        content: <TimelineItem index={i} />,
+        complete: i > 2 ? false : true,
+        nodeAriaLabelText: i === 5 ? 'Finish' : null,
+        nodeIcon: i === 5 ? IconName.mdiFlagCheckered : null,
+        size: i === index + 1 ? StepSize.Large : StepSize.Small,
+      })),
+    });
+  };
+
+  return (
+    <Row>
+      <Col span="12">
+        <Stepper {...args} onChange={(step: number) => handle(step)} />
+      </Col>
+    </Row>
+  );
+};
+
 export const Default_Horizontal_Small = Default_Story.bind({});
 export const Default_Horizontal_Small_Required = Default_Story.bind({});
 export const Default_Horizontal_Small_Read_Only = Default_Story.bind({});
+export const Default_Horizontal_Small_Show_Active_Index =
+  Show_Small_Active_Index_Story.bind({});
 export const Default_Horizontal_Small_Custom = Default_Story.bind({});
 export const Default_Horizontal_Medium = Default_Story.bind({});
 export const Default_Horizontal_Medium_Required = Default_Story.bind({});
 export const Default_Horizontal_Medium_Read_Only = Default_Story.bind({});
+export const Default_Horizontal_Medium_Show_Active_Index =
+  Show_Medium_Active_Index_Story.bind({});
 export const Default_Horizontal_Medium_Custom = Default_Story.bind({});
 export const Default_Vertical_Small = Default_Story.bind({});
 export const Default_Vertical_Small_Required = Default_Story.bind({});
 export const Default_Vertical_Small_Read_Only = Default_Story.bind({});
+export const Default_Vertical_Small_Show_Active_Index =
+  Show_Small_Active_Index_Story.bind({});
 export const Default_Vertical_Small_Custom = Default_Story.bind({});
 export const Default_Vertical_Medium = Default_Story.bind({});
 export const Default_Vertical_Medium_Required = Default_Story.bind({});
 export const Default_Vertical_Medium_Read_Only = Default_Story.bind({});
+export const Default_Vertical_Medium_Show_Active_Index =
+  Show_Medium_Active_Index_Story.bind({});
 export const Default_Vertical_Medium_Scroll = Default_Story.bind({});
 export const Default_Vertical_Medium_Custom = Default_Story.bind({});
 
@@ -245,6 +314,20 @@ Default_Horizontal_Small_Read_Only.args = {
   })),
 };
 
+Default_Horizontal_Small_Show_Active_Index.args = {
+  ...timelineArgs,
+  showActiveStepIndex: true,
+  size: StepperSize.Small,
+  steps: [1, 2, 3, 4, 5].map((i: number) => ({
+    index: i,
+    content: `Timeline label ${i}`,
+    complete: i > 2 ? false : true,
+    nodeAriaLabelText: i === 5 ? 'Finish' : null,
+    nodeIcon: i === 5 ? IconName.mdiFlagCheckered : null,
+    size: i === 3 ? StepSize.Large : StepSize.Small,
+  })),
+};
+
 Default_Horizontal_Small_Custom.args = {
   ...timelineArgs,
   classNames: 'custom-stepper-line',
@@ -282,6 +365,19 @@ Default_Horizontal_Medium_Read_Only.args = {
   readonly: true,
 };
 
+Default_Horizontal_Medium_Show_Active_Index.args = {
+  ...timelineArgs,
+  showActiveStepIndex: true,
+  steps: [1, 2, 3, 4, 5].map((i: number) => ({
+    index: i,
+    content: <TimelineItem index={i} />,
+    complete: i > 2 ? false : true,
+    nodeAriaLabelText: i === 5 ? 'Finish' : null,
+    nodeIcon: i === 5 ? IconName.mdiFlagCheckered : null,
+    size: i === 3 ? StepSize.Large : StepSize.Small,
+  })),
+};
+
 Default_Horizontal_Medium_Custom.args = {
   ...timelineArgs,
   classNames: 'custom-stepper-line',
@@ -345,6 +441,21 @@ Default_Vertical_Small_Read_Only.args = {
   })),
 };
 
+Default_Vertical_Small_Show_Active_Index.args = {
+  ...timelineArgs,
+  layout: 'vertical',
+  showActiveStepIndex: true,
+  size: StepperSize.Small,
+  steps: [1, 2, 3, 4, 5].map((i: number) => ({
+    index: i,
+    content: `Timeline label ${i}`,
+    complete: i > 2 ? false : true,
+    nodeAriaLabelText: i === 5 ? 'Finish' : null,
+    nodeIcon: i === 5 ? IconName.mdiFlagCheckered : null,
+    size: i === 3 ? StepSize.Large : StepSize.Small,
+  })),
+};
+
 Default_Vertical_Small_Custom.args = {
   ...timelineArgs,
   classNames: 'custom-stepper-line',
@@ -386,6 +497,20 @@ Default_Vertical_Medium_Read_Only.args = {
   readonly: true,
 };
 
+Default_Vertical_Medium_Show_Active_Index.args = {
+  ...timelineArgs,
+  layout: 'vertical',
+  showActiveStepIndex: true,
+  steps: [1, 2, 3, 4, 5].map((i: number) => ({
+    index: i,
+    content: <TimelineItem index={i} />,
+    complete: i > 2 ? false : true,
+    nodeAriaLabelText: i === 5 ? 'Finish' : null,
+    nodeIcon: i === 5 ? IconName.mdiFlagCheckered : null,
+    size: i === 3 ? StepSize.Large : StepSize.Small,
+  })),
+};
+
 Default_Vertical_Medium_Scroll.args = {
   ...timelineArgs,
   height: 420,