feat(progress-indicator): remove story and use knob, add max-width

carbon-design-system · Jan 23, 2020 · b05f46c · b05f46c
1 parent 17fb59d
commit b05f46c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 71 deletions.
diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss
@@ -225,10 +225,14 @@
     display: block;
   }
 
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step {
+    padding-bottom: rem(24px);
+  }
+
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step,
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button {
     display: list-item;
-    min-height: 3.625rem;
+    min-height: rem(58px);
     width: initial;
     min-width: initial;
   }
@@ -250,9 +254,10 @@
   .#{$prefix}--progress--vertical .#{$prefix}--progress-label {
     display: inline-block;
     width: initial;
-    max-width: none;
+    max-width: rem(160px);
     vertical-align: top;
     margin: 0;
+    white-space: initial;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip {

diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withKnobs, number } from '@storybook/addon-knobs';
+import { withKnobs, number, boolean, text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { ProgressIndicator, ProgressStep } from '../ProgressIndicator';
 import ProgressIndicatorSkeleton from '../ProgressIndicator/ProgressIndicator.Skeleton';
@@ -22,76 +22,10 @@ storiesOf('ProgressIndicator', module)
     'Default',
     () => (
       <ProgressIndicator
+        vertical={boolean('Vertical', false)}
         currentIndex={number('Current progress (currentIndex)', 1)}>
         <ProgressStep
-          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>
-    ),
-    {
-      info: {
-        text: `
-            For React usage, ProgressIndicator holds the currentIndex state to indicate which ProgressStep is the current step. The ProgressIndicator component should always be used with ProgressStep components as its children. Changing currentIndex prop will automatically set the ProgressStep components props (complete, incomplete, current).
-            For general usage, Progress Indicators display steps in a process. It should indicate when steps have been complete, the active step,
-            and the steps to come.
-          `,
-      },
-    }
-  )
-  .add(
-    'Vertical',
-    () => (
-      <ProgressIndicator
-        vertical
-        currentIndex={number('Current progress (currentIndex)', 1)}>
-        <ProgressStep
-          label="First step"
+          label={text('Label', 'First step')}
           description="Step 1: Getting started with Carbon Design System"
           secondaryLabel="Optional label"
         />