feat(ProgressIndicator): add animation

packages/components/src/components/progress-indicator/_progress-indicator.scss

@@ -16,6 +16,7 @@
 /// Progress indicator styles
 /// @access private
 /// @group progress-indicator
+
 @mixin progress-indicator {
   .#{$prefix}--progress {
     @include reset;
@@ -31,6 +32,7 @@
     width: rem(128px);
     min-width: 7rem;
     flex-direction: row;
+    border-top: 2px solid $ui-03;
 
     .#{$prefix}--tooltip__label {
       display: block;
@@ -45,14 +47,14 @@
   .#{$prefix}--progress-line {
     position: absolute;
     left: 0;
-    width: rem(128px);
-    height: 1px;
-    border: $progress-indicator-bar-width;
+    width: 0;
+    height: 2px;
+    transform: translateY(-2px);
+    transition: width 0.15s cubic-bezier(0.2, 0, 0.38, 0.9) 0.15s;
   }
 
   .#{$prefix}--progress--space-equal .#{$prefix}--progress-line {
-    width: 100%;
-    min-width: rem(128px);
+    width: 0;
   }
 
   .#{$prefix}--progress-step svg {
@@ -129,7 +131,6 @@
 
     display: block;
     width: rem(125px);
-
     min-width: rem(115px);
     min-height: $carbon--spacing-06;
     padding: $carbon--spacing-03 $carbon--spacing-05;
@@ -158,13 +159,23 @@
     margin-left: $carbon--spacing-06;
     color: $text-secondary;
     text-align: start;
+    opacity: 0;
+    transform: translateY(-10px);
+    animation: 0.15s optional-text-entrance 0.15s motion(standard, productive)
+      forwards;
   }
 
   //CURRENT STYLING
   .#{$prefix}--progress-step--current {
     .#{$prefix}--progress-line {
       background-color: $interactive;
     }
+
+    svg circle {
+      opacity: 0;
+      animation: 0.15s progress-indicator-icon-fade 0.15s
+        motion(standard, productive) forwards;
+    }
   }
 
   //INCOMPLETE STYLING
@@ -181,8 +192,15 @@
   //COMPLETED STYLING
   .#{$prefix}--progress-step--complete {
     .#{$prefix}--progress-line {
+      width: 100%;
       background-color: $interactive;
     }
+
+    svg {
+      opacity: 0;
+      animation: 0.15s progress-indicator-icon-fade motion(standard, productive)
+        forwards;
+    }
   }
 
   //interactive button
@@ -223,6 +241,12 @@
       fill: $disabled;
     }
 
+    svg circle {
+      opacity: 0;
+      animation: 0.15s progress-indicator-icon-fade 0.15s
+        motion(standard, productive) forwards;
+    }
+
     .#{$prefix}--progress-label,
     .#{$prefix}--progress-label:hover {
       box-shadow: none;
@@ -262,10 +286,14 @@
   }
 
   // Vertical Variant
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step {
+    border-top: none;
+  }
 
   .#{$prefix}--progress--vertical {
     display: flex;
     flex-direction: column;
+    border-left: 2px solid $ui-03;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step,
@@ -308,8 +336,33 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: 1px;
-    height: 100%;
+    width: 2px;
+    height: 0;
+    background-color: $interactive;
+    transform: translateX(-2px);
+    transition: height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9) 0.15s;
+  }
+
+  .#{$prefix}--progress--vertical {
+    .#{$prefix}--progress-step--complete {
+      .#{$prefix}--progress-line {
+        height: 100%;
+      }
+    }
+  }
+}
+
+// Animations
+@keyframes optional-text-entrance {
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes progress-indicator-icon-fade {
+  to {
+    opacity: 1;
   }
 }
 

packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js

@@ -32,61 +32,72 @@ export default {
   },
 };
 
+const tooltipTwo = () => {
+  return (
+    <Tooltip
+      direction="bottom"
+      showIcon={false}
+      triggerClassName={`${prefix}--progress-label`}
+      triggerText={'Second step with tooltip'}
+      tooltipId="tooltipId-0">
+      <p>Overflow tooltip content.</p>
+    </Tooltip>
+  );
+};
+
+const tooltipThree = () => {
+  return (
+    <Tooltip
+      direction="bottom"
+      showIcon={false}
+      triggerClassName={`${prefix}--progress-label`}
+      triggerText={'Third step with tooltip'}
+      tooltipId="tooltipId-1">
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
+        consequuntur hic ratione aliquid cupiditate, nesciunt saepe iste
+        blanditiis cumque maxime tenetur veniam est illo deserunt sint quae
+        pariatur. Laboriosam, consequatur.
+      </p>
+    </Tooltip>
+  );
+};
+
+const stepData = [
+  {
+    label: 'First step',
+    description: 'Step 1: Getting started with Carbon Design System',
+    secondaryLabel: 'Optional label',
+  },
+  {
+    label: 'Second step with tooltip',
+    description: 'Step 2: Getting started with Carbon Design System',
+    renderLabel: tooltipTwo,
+  },
+  {
+    label: 'Third step with tooltip',
+    description: 'Step 3: Getting started with Carbon Design System',
+    renderLabel: tooltipThree,
+  },
+  {
+    label: 'Fourth step',
+    description: 'Step 4: Getting started with Carbon Design System',
+    invalid: 'invalid',
+    secondaryLabel: 'Example invalid step',
+  },
+  {
+    label: 'Fifth step',
+    description: 'Step 5: Getting started with Carbon Design System',
+    disabled: 'disabled',
+  },
+];
+
 export const Default = () => (
   <ProgressIndicator
     vertical={boolean('Vertical (vertical)', false)}
     currentIndex={number('Current progress (currentIndex)', 1)}
-    spaceEqually={boolean('Space Equally (spaceEqually)', false)}>
-    <ProgressStep
-      label={text('Label (label)', 'First step')}
-      description="Step 1: Getting started with Carbon Design System"
-      secondaryLabel="Optional label"
-    />
-    <ProgressStep
-      label="Second step with tooltip"
-      description="Step 2: Getting started with Carbon Design System"
-      renderLabel={() => (
-        <Tooltip
-          direction="bottom"
-          showIcon={false}
-          triggerClassName={`${prefix}--progress-label`}
-          triggerText={'Second step with tooltip'}
-          tooltipId="tooltipId-0">
-          <p>Overflow tooltip content.</p>
-        </Tooltip>
-      )}
-    />
-    <ProgressStep
-      label="Third step with tooltip"
-      description="Step 3: Getting started with Carbon Design System"
-      renderLabel={() => (
-        <Tooltip
-          direction="bottom"
-          showIcon={false}
-          triggerClassName={`${prefix}--progress-label`}
-          triggerText={'Third step with tooltip'}
-          tooltipId="tooltipId-1">
-          <p>
-            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
-            consequuntur hic ratione aliquid cupiditate, nesciunt saepe iste
-            blanditiis cumque maxime tenetur veniam est illo deserunt sint quae
-            pariatur. Laboriosam, consequatur.
-          </p>
-        </Tooltip>
-      )}
-    />
-    <ProgressStep
-      label="Fourth step"
-      description="Step 4: Getting started with Carbon Design System"
-      invalid
-      secondaryLabel="Example invalid step"
-    />
-    <ProgressStep
-      label="Fifth step"
-      description="Step 5: Getting started with Carbon Design System"
-      disabled
-    />
-  </ProgressIndicator>
+    spaceEqually={boolean('Space Equally (spaceEqually)', false)}
+    stepData={stepData}></ProgressIndicator>
 );
 
 Default.parameters = {
@@ -102,35 +113,8 @@ Default.parameters = {
 export const Interactive = () => (
   <ProgressIndicator
     currentIndex={number('Current progress (currentIndex)', 1)}
-    onChange={action('onChange')}>
-    <ProgressStep
-      label="Click me"
-      description="Step 1: Register a onChange event"
-    />
-    <ProgressStep
-      label="Really long label"
-      description="The progress indicator will listen for clicks on the steps"
-    />
-    <ProgressStep
-      label="Tooltip and really long label"
-      description="The progress indicator will listen for clicks on the steps"
-      renderLabel={() => (
-        <Tooltip
-          direction="bottom"
-          showIcon={false}
-          triggerClassName={`${prefix}--progress-label`}
-          triggerText="Tooltip and really long label"
-          tooltipId="tooltipId-1">
-          <p>
-            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
-            consequuntur hic ratione aliquid cupiditate, nesciunt saepe iste
-            blanditiis cumque maxime tenetur veniam est illo deserunt sint quae
-            pariatur. Laboriosam, consequatur.
-          </p>
-        </Tooltip>
-      )}
-    />
-  </ProgressIndicator>
+    onChange={action('onChange')}
+    stepData={stepData}></ProgressIndicator>
 );
 
 Interactive.storyName = 'interactive';