From 188fd992c28c34c370debd59b4db8cb82ca9752b Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Mon, 17 Jul 2023 19:25:24 -0500 Subject: [PATCH] feat(HorizontalStepper)!: remove top-level sub-component(s) (#1696) --- .../HorizontalStep/HorizontalStep.module.css | 73 ------------- .../HorizontalStep/HorizontalStep.tsx | 91 ---------------- src/components/HorizontalStep/index.ts | 1 - .../HorizontalStepper.module.css | 74 +++++++++++++ .../HorizontalStepper.stories.tsx | 101 ++++++++++++++---- .../HorizontalStepper/HorizontalStepper.tsx | 92 +++++++++++++++- src/index.ts | 1 - 7 files changed, 247 insertions(+), 186 deletions(-) delete mode 100644 src/components/HorizontalStep/HorizontalStep.module.css delete mode 100644 src/components/HorizontalStep/HorizontalStep.tsx delete mode 100644 src/components/HorizontalStep/index.ts diff --git a/src/components/HorizontalStep/HorizontalStep.module.css b/src/components/HorizontalStep/HorizontalStep.module.css deleted file mode 100644 index 7ea16c675..000000000 --- a/src/components/HorizontalStep/HorizontalStep.module.css +++ /dev/null @@ -1,73 +0,0 @@ -/*------------------------------------*\ - # 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/HorizontalStep/HorizontalStep.tsx b/src/components/HorizontalStep/HorizontalStep.tsx deleted file mode 100644 index 1f48c7b42..000000000 --- a/src/components/HorizontalStep/HorizontalStep.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import clsx from 'clsx'; -import React from 'react'; -import Icon from '../Icon'; -import NumberIcon from '../NumberIcon'; -import Text from '../Text'; -import styles from './HorizontalStep.module.css'; - -export type Props = { - /** - * CSS class names that can be appended to the component. - */ - className?: string; - /** - * Indicates which number the step is. - */ - stepNumber: number; - /** - * Text that describes the step. - */ - text: string; - /** - * Indicates the state of the step. - */ - variant: 'complete' | 'active' | 'incomplete'; -}; - -/** - * `import {HorizontalStep} from "@chanzuckerberg/eds";` - * - * A step sub component for the . - * Determines which icon to use and places the text next to it. - * - * Example usage: - * - * ```tsx - * - * ``` - */ -export const HorizontalStep = ({ - className, - stepNumber, - text, - variant, -}: Props) => { - /** - * Determines which icon to display. - */ - const numberIconClassName = clsx( - styles['horizontal-step__number-icon'], - variant === 'incomplete' && - styles['horizontal-step__number-icon--incomplete'], - ); - const icon = - variant === 'complete' ? ( - - ) : ( - - ); - - const componentClassName = clsx( - styles['horizontal-step'], - styles[`horizontal-step--${variant}`], - className, - ); - return ( -
  • - {icon} - - {text} - -
    • - ); -}; diff --git a/src/components/HorizontalStep/index.ts b/src/components/HorizontalStep/index.ts deleted file mode 100644 index 5a68b501f..000000000 --- a/src/components/HorizontalStep/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { HorizontalStep as default } from './HorizontalStep'; diff --git a/src/components/HorizontalStepper/HorizontalStepper.module.css b/src/components/HorizontalStepper/HorizontalStepper.module.css index e3cc4283c..1332b5fbd 100644 --- 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 index 085dc57a9..742f5b948 100644 --- 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 = { export const HorizontalSteps: StoryObj = { render: () => (
      - - - + = { export const HorizontalStepsDifferentNumbers: StoryObj = { render: () => (
        - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
      ), }; diff --git a/src/components/HorizontalStepper/HorizontalStepper.tsx b/src/components/HorizontalStepper/HorizontalStepper.tsx index e292820b0..80ec206be 100644 --- a/src/components/HorizontalStepper/HorizontalStepper.tsx +++ b/src/components/HorizontalStepper/HorizontalStepper.tsx @@ -1,6 +1,9 @@ import clsx from 'clsx'; import React from 'react'; -import HorizontalStep from '../HorizontalStep'; +import Icon from '../Icon'; +import NumberIcon from '../NumberIcon'; +import Text from '../Text'; + import styles from './HorizontalStepper.module.css'; export type Props = { @@ -23,6 +26,25 @@ export type Props = { steps: string[]; }; +export type StepProps = { + /** + * CSS class names that can be appended to the component. + */ + className?: string; + /** + * Indicates which number the step is. + */ + stepNumber: number; + /** + * Text that describes the step. + */ + text: string; + /** + * Indicates the state of the step. + */ + variant: 'complete' | 'active' | 'incomplete'; +}; + /** * `import {HorizontalStepper} from "@chanzuckerberg/eds";` * @@ -108,3 +130,71 @@ export const HorizontalStepper = ({ return
        {stepComponents}
      ; }; + +/** + * `import {HorizontalStep} from "@chanzuckerberg/eds";` + * + * A step sub component for the . + * Determines which icon to use and places the text next to it. + * + * Example usage: + * + * ```tsx + * + * ``` + */ +export const HorizontalStep = ({ + className, + stepNumber, + text, + variant, +}: StepProps) => { + /** + * Determines which icon to display. + */ + const numberIconClassName = clsx( + styles['horizontal-step__number-icon'], + variant === 'incomplete' && + styles['horizontal-step__number-icon--incomplete'], + ); + const icon = + variant === 'complete' ? ( + + ) : ( + + ); + + const componentClassName = clsx( + styles['horizontal-step'], + styles[`horizontal-step--${variant}`], + className, + ); + return ( +
    1. + {icon} + + {text} + +
      2. + ); +}; + +HorizontalStepper.Step = HorizontalStep; diff --git a/src/index.ts b/src/index.ts index 02512c0ef..d8fecc366 100644 --- a/src/index.ts +++ b/src/index.ts @@ -33,7 +33,6 @@ export { default as FiltersPopover } from './components/FiltersPopover'; export { default as Grid } from './components/Grid'; export { default as GridItem } from './components/GridItem'; export { default as Heading } from './components/Heading'; -export { default as HorizontalStep } from './components/HorizontalStep'; export { default as HorizontalStepper } from './components/HorizontalStepper'; export { default as Hr } from './components/Hr'; export { default as Icon } from './components/Icon';