feat(HorizontalStepper)!: remove top-level sub-component(s) (#1696)

chanzuckerberg · Jul 19, 2023 · 188fd99 · 188fd99
1 parent 7ec01f4
commit 188fd99
Show file tree

Hide file tree

Showing 7 changed files with 247 additions and 186 deletions.
diff --git a/src/components/HorizontalStep/HorizontalStep.module.css b/src/components/HorizontalStep/HorizontalStep.module.css
diff --git a/src/components/HorizontalStep/HorizontalStep.tsx b/src/components/HorizontalStep/HorizontalStep.tsx
diff --git a/src/components/HorizontalStep/index.ts b/src/components/HorizontalStep/index.ts
diff --git a/src/components/HorizontalStepper/HorizontalStepper.module.css b/src/components/HorizontalStepper/HorizontalStepper.module.css
@@ -25,3 +25,77 @@
   flex-grow: 1;
   min-width: var(--eds-size-2);
 }
+
+/*------------------------------------*\
+    # HORIZONTAL STEP
+\*------------------------------------*/
+
+/**
+ * Horizontal Step displays the step text and associated decorative icon.
+ */
+ .horizontal-step {
+  display: flex;
+  align-items: center;
+  gap: var(--eds-size-1);
+  /**
+   * Required to prevent overflowing outside container.
+   */
+  min-width: 0;
+}
+
+/**
+ * Horizontal step variants
+ */
+.horizontal-step--complete {
+  color: var(--eds-theme-color-text-neutral-subtle);
+}
+.horizontal-step--active {
+  color: var(--eds-theme-color-text-neutral-strong);
+}
+.horizontal-step--incomplete {
+  color: var(--eds-theme-color-text-neutral-subtle);
+}
+
+/**
+ * Inherits the color from the parent.
+ *
+ * Changes icon from black to gray by default.
+ */
+.horizontal-step__number-icon {
+  color: inherit;
+}
+
+.horizontal-step__number-icon--incomplete {
+  --number-icon-incomplete-fill: var(--eds-theme-color-icon-disabled);
+}
+
+/**
+ * Horizontal Step Complete.
+ */
+.horizontal-step__complete-icon {
+  fill: var(--eds-theme-color-icon-utility-success);
+}
+
+/**
+ * Horizontal Step Incomplete.
+ */
+.horizontal-step__incomplete-icon {
+  margin-left: var(--eds-size-1);
+  margin-right: var(--eds-size-1);
+  fill: var(--eds-theme-color-icon-disabled);
+}
+
+/**
+ * Horizontal Step Text.
+ */
+.horizontal-step__text {
+  /* Hides text for smaller screen sizes. */
+  display: none;
+  @media all and (min-width: $eds-bp-md) {
+    display: inline;
+    /* Hides overflow text with ellipsis. */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
diff --git a/src/components/HorizontalStepper/HorizontalStepper.stories.tsx b/src/components/HorizontalStepper/HorizontalStepper.stories.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { HorizontalStepper } from './HorizontalStepper';
 import Button from '../Button';
 import ButtonGroup from '../ButtonGroup';
-import HorizontalStep from '../HorizontalStep';
 import Icon from '../Icon';
 
 export default {
@@ -87,13 +86,17 @@ export const Interactive: StoryObj<Args> = {
 export const HorizontalSteps: StoryObj<Args> = {
   render: () => (
     <ol className="p-0">
-      <HorizontalStep
+      <HorizontalStepper.Step
         stepNumber={1}
         text="Horizontal step"
         variant="incomplete"
       />
-      <HorizontalStep stepNumber={1} text="Horizontal step" variant="active" />
-      <HorizontalStep
+      <HorizontalStepper.Step
+        stepNumber={1}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
         stepNumber={1}
         text="Horizontal step"
         variant="complete"
@@ -105,21 +108,81 @@ export const HorizontalSteps: StoryObj<Args> = {
 export const HorizontalStepsDifferentNumbers: StoryObj<Args> = {
   render: () => (
     <ol className="p-0">
-      <HorizontalStep stepNumber={1} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={2} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={3} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={4} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={5} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={6} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={7} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={8} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={9} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={10} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={21} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={32} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={43} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={54} text="Horizontal step" variant="active" />
-      <HorizontalStep stepNumber={65} text="Horizontal step" variant="active" />
+      <HorizontalStepper.Step
+        stepNumber={1}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={2}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={3}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={4}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={5}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={6}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={7}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={8}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={9}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={10}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={21}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={32}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={43}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={54}
+        text="Horizontal step"
+        variant="active"
+      />
+      <HorizontalStepper.Step
+        stepNumber={65}
+        text="Horizontal step"
+        variant="active"
+      />
     </ol>
   ),
 };