feat: stepper: adds timeline variant (#504)

* feat: stepper: adds timeline variant * chore: stepper: hover state when step is complete * chore: stepper: export step size enum * chore: stepper: address pr feedback
EightfoldAI · Jan 17, 2023 · 62f433f · 62f433f
1 parent 65d51f0
commit 62f433f
Show file tree

Hide file tree

Showing 13 changed files with 47,246 additions and 5,284 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -7,6 +7,12 @@
         font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,Oxygen-Sans, Ubuntu,Cantarell, "Helvetica Neue", sans-serif;
     }
 
+    .custom-stepper-line {
+        --stepper-line-horizontal-offset: 5px;
+        --stepper-line-width: 2px;
+        --stepper-line-vertical-offset: 13px;
+    }
+
     .virtual-table .table-container:before,
     .virtual-table .table-container:after {
         display: none;

diff --git a/src/components/Carousel/Separator/Separator.tsx b/src/components/Carousel/Separator/Separator.tsx
@@ -9,6 +9,7 @@ export const Separator: FC<SeparatorProps> = memo((props: SeparatorProps) => {
 
   return (
     <div
+      aria-hidden="true"
       className={classNames}
       {...{ [dataKeyAttribute]: id, [dataIndexAttribute]: index }}
       ref={ref}

diff --git a/src/components/Carousel/Tests/__snapshots__/ScrollMenu.test.tsx.snap b/src/components/Carousel/Tests/__snapshots__/ScrollMenu.test.tsx.snap
@@ -31,6 +31,7 @@ exports[`ScrollMenu Children and buttons LeftArrow, ScrollContainer, MenuItems,
           </div>
         </li>
         <div
+          aria-hidden="true"
           class="carousel-scroll-menu-separator"
           data-index="0.1"
           data-key="test1-separator"
@@ -85,6 +86,7 @@ exports[`ScrollMenu should render without props 1`] = `
           </div>
         </li>
         <div
+          aria-hidden="true"
           class="carousel-scroll-menu-separator"
           data-index="0.1"
           data-key="test1-separator"

diff --git a/src/components/Icon/mdi.ts b/src/components/Icon/mdi.ts
@@ -234,6 +234,7 @@ export enum IconName {
   mdiFire = 'M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z',
   mdiFireCircle = 'M14.66 14.18C14.69 14.29 14.7 14.4 14.7 14.5C14.73 15.15 14.44 15.85 13.97 16.28C13.75 16.47 13.39 16.67 13.11 16.75C12.23 17.06 11.35 16.62 10.83 16.11C11.77 15.89 12.32 15.21 12.5 14.5C12.62 13.89 12.37 13.38 12.27 12.78C12.17 12.2 12.19 11.71 12.4 11.18C12.55 11.47 12.71 11.77 12.9 12C13.5 12.78 14.45 13.12 14.66 14.18M22 12C22 17.5 17.5 22 12 22S2 17.5 2 12 6.5 2 12 2 22 6.5 22 12M17.16 12.56L17.06 12.36C16.9 12 16.45 11.38 16.45 11.38C16.27 11.15 16.05 10.94 15.85 10.74C15.32 10.27 14.73 9.94 14.22 9.45C13.05 8.31 12.79 6.44 13.54 5C12.79 5.18 12.14 5.58 11.58 6.03C9.55 7.65 8.75 10.5 9.71 12.95C9.74 13.03 9.77 13.11 9.77 13.21C9.77 13.38 9.65 13.53 9.5 13.6C9.31 13.67 9.13 13.63 9 13.5C8.93 13.46 8.9 13.42 8.87 13.37C8 12.26 7.84 10.66 8.43 9.39C7.12 10.45 6.41 12.24 6.5 13.92C6.56 14.31 6.6 14.7 6.74 15.09C6.85 15.56 7.06 16 7.3 16.44C8.14 17.78 9.61 18.75 11.19 18.94C12.87 19.15 14.67 18.85 15.96 17.7C17.4 16.4 17.9 14.33 17.16 12.56Z',
   mdiFlag = 'M14.4,6L14,4H5V21H7V14H12.6L13,16H20V6H14.4Z',
+  mdiFlagCheckered = 'M14.4,6H20V16H13L12.6,14H7V21H5V4H14L14.4,6M14,14H16V12H18V10H16V8H14V10L13,8V6H11V8H9V6H7V8H9V10H7V12H9V10H11V12H13V10L14,12V14M11,10V8H13V10H11M14,10H16V12H14V10Z',
   mdiFlagOutline = 'M12.36,6L12.76,8H18V14H14.64L14.24,12H7V6H12.36M14,4H5V21H7V14H12.6L13,16H20V6H14.4',
   mdiFlagVariant = 'M6,3A1,1 0 0,1 7,4V4.88C8.06,4.44 9.5,4 11,4C14,4 14,6 16,6C19,6 20,4 20,4V12C20,12 19,14 16,14C13,14 13,12 11,12C8,12 7,14 7,14V21H5V4A1,1 0 0,1 6,3Z',
   mdiFlagVariantOutline = 'M6,3A1,1 0 0,1 7,4V4.88C8.06,4.44 9.5,4 11,4C14,4 14,6 16,6C19,6 20,4 20,4V12C20,12 19,14 16,14C13,14 13,12 11,12C8,12 7,14 7,14V21H5V4A1,1 0 0,1 6,3M7,7.25V11.5C7,11.5 9,10 11,10C13,10 14,12 16,12C18,12 18,11 18,11V7.5C18,7.5 17,8 16,8C14,8 13,6 11,6C9,6 7,7.25 7,7.25Z',

diff --git a/src/components/Stepper/Stepper.stories.tsx b/src/components/Stepper/Stepper.stories.tsx
@@ -1,7 +1,13 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Step, Stepper, StepperSize, StepperVariant } from './';
+import {
+  Step,
+  Stepper,
+  StepperLineStyle,
+  StepperSize,
+  StepperVariant,
+} from './';
 import { Col, Row } from '../Grid';
 
 export default {
@@ -16,7 +22,7 @@ export default {
               <p>
                 The Stepper component should be used with a small number of
                 steps, and should display next to the items to be completed in
-                numerical order. The Stepper indicated the number of steps, and
+                numerical order. The Stepper indicates the number of steps, and
                 whether or not the steps have been completed.
               </p>
             </section>
@@ -51,6 +57,14 @@ export default {
       options: ['horizontal', 'vertical'],
       control: { type: 'inline-radio' },
     },
+    lineStyle: {
+      options: [
+        StepperLineStyle.Dash,
+        StepperLineStyle.Dot,
+        StepperLineStyle.Solid,
+      ],
+      control: { type: 'inline-radio' },
+    },
     nodeAriaLabelText: {
       control: 'text',
     },
@@ -79,9 +93,30 @@ export default {
       options: [StepperSize.Medium, StepperSize.Small],
       control: { type: 'inline-radio' },
     },
+    status: {
+      options: ['error', 'success', 'warning'],
+      control: { type: 'inline-radio' },
+    },
     steps: {
       control: 'object',
     },
+    theme: {
+      options: [
+        'red',
+        'redOrange',
+        'orange',
+        'yellow',
+        'yellowGreen',
+        'green',
+        'blueGreen',
+        'blue',
+        'blueViolet',
+        'violet',
+        'violetRed',
+        'grey',
+      ],
+      control: 'select',
+    },
     variant: {
       options: [StepperVariant.Default, StepperVariant.Timeline],
       control: { type: 'inline-radio' },
@@ -93,7 +128,7 @@ export default {
 } as ComponentMeta<typeof Stepper>;
 
 const Default_Story: ComponentStory<typeof Stepper> = (args) => {
-  const workflow: Step[] = [1, 2, 3, 4, 5].map((i) => ({
+  const workflow: Step[] = [1, 2, 3, 4, 5].map((i: number) => ({
     index: i,
     content: `Step label ${i}`,
     complete: i > args.index ? false : true,