From 8265c16c3c3c5511590b2169448a47d9bf94ddde Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Thu, 27 Jun 2024 13:54:27 -0400 Subject: [PATCH 01/16] LG-4333: VerticalStepper (#163) * wip * wip, transitions * image * break out step icon component * tabindex * line color * fix story * status to state * padding * style cleanup * style updates * consts * add tests * README * changeset * types and tests * cleanup * cleanup * lint * cleanup again * some feedback * update icon styles * inert and tabindex * use descedants * remove extra div * update package.json * pass isCompleted to StepIcon * cleanup * feedback --- README.md | 92 ++++++++ package.json | 42 ++++ src/StepIcon/StepIcon.styles.ts | 82 ++++++++ src/StepIcon/StepIcon.tsx | 32 +++ src/StepIcon/StepIcon.types.ts | 11 + src/StepIcon/index.ts | 2 + src/VerticalStep/InternalVerticalStep.tsx | 113 ++++++++++ src/VerticalStep/VerticalStep.spec.tsx | 196 ++++++++++++++++++ src/VerticalStep/VerticalStep.styles.ts | 122 +++++++++++ src/VerticalStep/VerticalStep.tsx | 55 +++++ src/VerticalStep/VerticalStep.types.ts | 52 +++++ src/VerticalStep/index.ts | 7 + .../VerticalStepButtons.styles.tsx | 33 +++ .../VerticalStepButtons.tsx | 51 +++++ .../VerticalStepButtons.types.ts | 6 + src/VerticalStepButtons/index.ts | 0 src/VerticalStepper.stories.tsx | 100 +++++++++ src/VerticalStepper/VerticalStepper.spec.tsx | 176 ++++++++++++++++ src/VerticalStepper/VerticalStepper.styles.ts | 7 + src/VerticalStepper/VerticalStepper.tsx | 79 +++++++ src/VerticalStepper/VerticalStepper.types.ts | 18 ++ src/VerticalStepper/index.ts | 2 + src/constants.ts | 11 + src/context/VerticalStepperContext.tsx | 31 +++ .../VerticalStepperDescendantsContext.ts | 11 + src/context/index.ts | 5 + src/index.ts | 2 + tsconfig.json | 11 + 28 files changed, 1349 insertions(+) create mode 100644 README.md create mode 100644 package.json create mode 100644 src/StepIcon/StepIcon.styles.ts create mode 100644 src/StepIcon/StepIcon.tsx create mode 100644 src/StepIcon/StepIcon.types.ts create mode 100644 src/StepIcon/index.ts create mode 100644 src/VerticalStep/InternalVerticalStep.tsx create mode 100644 src/VerticalStep/VerticalStep.spec.tsx create mode 100644 src/VerticalStep/VerticalStep.styles.ts create mode 100644 src/VerticalStep/VerticalStep.tsx create mode 100644 src/VerticalStep/VerticalStep.types.ts create mode 100644 src/VerticalStep/index.ts create mode 100644 src/VerticalStepButtons/VerticalStepButtons.styles.tsx create mode 100644 src/VerticalStepButtons/VerticalStepButtons.tsx create mode 100644 src/VerticalStepButtons/VerticalStepButtons.types.ts create mode 100644 src/VerticalStepButtons/index.ts create mode 100644 src/VerticalStepper.stories.tsx create mode 100644 src/VerticalStepper/VerticalStepper.spec.tsx create mode 100644 src/VerticalStepper/VerticalStepper.styles.ts create mode 100644 src/VerticalStepper/VerticalStepper.tsx create mode 100644 src/VerticalStepper/VerticalStepper.types.ts create mode 100644 src/VerticalStepper/index.ts create mode 100644 src/constants.ts create mode 100644 src/context/VerticalStepperContext.tsx create mode 100644 src/context/VerticalStepperDescendantsContext.ts create mode 100644 src/context/index.ts create mode 100644 src/index.ts create mode 100644 tsconfig.json diff --git a/README.md b/README.md new file mode 100644 index 0000000000..e2839585eb --- /dev/null +++ b/README.md @@ -0,0 +1,92 @@ +# Vertical Stepper + +![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/vertical-stepper.svg) + +#### [View on MongoDB.design](https://www.mongodb.design/component/vertical-stepper/example/) + +## Installation + +### Yarn + +```shell +yarn add @leafygreen-ui/vertical-stepper +``` + +### NPM + +```shell +npm install @leafygreen-ui/vertical-stepper +``` + +## Example + +```js +import { VerticalStepper, VerticalStep } from `@leafygreen-ui/vertical-stepper`; + +const [currentStep, setCurrentStep] = useState(0); + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam + efficitur nunc mattis magna pretium, id mattis metus vestibulum. Integer + cursus ex ante, ut molestie lorem vestibulum id.{' '} + Im a link + + } + primaryButtonProps={{ + children: 'primary button', + onClick: () => setCurrentStep(step => step + 1) + }} + /> + setCurrentStep(step => step + 1) + }} + secondaryButtonProps={{ + children: 'secondary button', + onClick: () => setCurrentStep(step => step - 1), + }} + media={test} + /> + setCurrentStep(step => step + 1) + }} + secondaryButtonProps={{ + children: 'secondary button', + onClick: () => setCurrentStep(step => step - 1), + }} + media={test} + /> + + +``` + +## Properties + +### `` + +| Prop | Type | Description | Default | +| ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | +| darkMode | `boolean` | Determines if the component renders in dark mode | `false` | +| currentStep | `number` | Zero-based. The index of the current step that will appear active. All steps will be marked as completed if the currentStep equals the number of steps. | `0` | +| children | `string` | Two or more `` components | | + +### `` + +| Prop | Type | Description | Default | +| -------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | +| title | `string` | The title of the step. | | +| description | `React.ReactNode` | The description of the step. This will render below the title. | | +| media | `React.ReactNode` | The image to the right of the text. E.g. `` or `` | | +| primaryButtonProps | `Omit` | The right-most button under the description. An object that accepts all [Button props](https://github.com/mongodb/leafygreen-ui/blob/main/packages/button/README.md#properties) but excludes `variant`. If there is a secondary button, the `variant` is `primary`. If there isn’t a secondary button, the `variant` is `default`. | | +| secondaryButtonProps | `Omit` | The button to the left of the primary button. An object that accepts all [Button props](https://github.com/mongodb/leafygreen-ui/blob/main/packages/button/README.md#properties) but excludes `variant`. The `variant` is always `default`. | | diff --git a/package.json b/package.json new file mode 100644 index 0000000000..5fd6c182dd --- /dev/null +++ b/package.json @@ -0,0 +1,42 @@ + +{ + "name": "@lg-private/vertical-stepper", + "version": "0.0.1", + "description": "LeafyGreen UI Kit Vertical Stepper", + "main": "./dist/index.js", + "module": "./dist/esm/index.js", + "types": "./dist/index.d.ts", + "license": "Apache-2.0", + "scripts": { + "build": "lg build-package", + "tsc": "lg build-ts", + "docs": "lg build-tsdoc" + }, + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@leafygreen-ui/button": "^21.2.1", + "@leafygreen-ui/descendants": "^0.2.0", + "@leafygreen-ui/emotion": "^4.0.8", + "@leafygreen-ui/icon": "^12.5.4", + "@leafygreen-ui/lib": "^13.6.0", + "@leafygreen-ui/palette": "^4.0.10", + "@leafygreen-ui/tokens": "^2.9.0", + "@leafygreen-ui/typography": "^19.2.0" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^3.1.12" + }, + "devDependencies": { + "@lg-tools/storybook-utils": "^0.1.1" + }, + "homepage": "https://github.com/10gen/leafygreen-ui-private/tree/main/packages/vertical-stepper", + "repository": { + "type": "git", + "url": "https://github.com/10gen/leafygreen-ui-private" + }, + "bugs": { + "url": "https://jira.mongodb.org/projects/PD/summary" + } +} diff --git a/src/StepIcon/StepIcon.styles.ts b/src/StepIcon/StepIcon.styles.ts new file mode 100644 index 0000000000..10cde3af6f --- /dev/null +++ b/src/StepIcon/StepIcon.styles.ts @@ -0,0 +1,82 @@ +import { css } from '@leafygreen-ui/emotion'; +import { createUniqueClassName, Theme } from '@leafygreen-ui/lib'; +import { palette } from '@leafygreen-ui/palette'; +import { transitionDuration } from '@leafygreen-ui/tokens'; + +import { State } from '../VerticalStep/VerticalStep.types'; + +export const stepIconClassName = createUniqueClassName('step'); + +const STEP_SIZE = 20; + +export const getStepWrapperStyles = (isCompleted: boolean) => css` + position: relative; + + &::after { + background: ${isCompleted ? palette.green.dark1 : palette.gray.base}; + position: absolute; + width: 1px; + height: calc(100% - ${STEP_SIZE}px); + left: 50%; + transition: background ${transitionDuration.default}ms ease; + } +`; + +export const stepStyles = css` + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid; + transition: ${transitionDuration.default}ms ease; + width: ${STEP_SIZE}px; + height: ${STEP_SIZE}px; + position: relative; + font-size: 12px; + font-weight: 500; +`; + +export const themedStateColor = { + [Theme.Dark]: { + [State.Future]: palette.gray.light1, + [State.Completed]: palette.black, + [State.Current]: palette.green.base, + }, + [Theme.Light]: { + [State.Future]: palette.gray.dark1, + [State.Completed]: palette.white, + [State.Current]: palette.green.dark2, + }, +}; + +export const themedStateBgColor = { + [Theme.Dark]: { + [State.Future]: 'rgba(255, 255, 255, 0)', + [State.Completed]: palette.green.base, + [State.Current]: 'rgba(255, 255, 255, 0)', + }, + [Theme.Light]: { + [State.Future]: 'rgba(255, 255, 255, 0)', + [State.Completed]: palette.green.dark1, + [State.Current]: 'rgba(255, 255, 255, 0)', + }, +}; + +export const themedStateBorderColor = { + [Theme.Dark]: { + [State.Future]: palette.gray.light1, + [State.Completed]: palette.green.base, + [State.Current]: palette.green.base, + }, + [Theme.Light]: { + [State.Future]: palette.gray.base, + [State.Completed]: palette.green.dark1, + [State.Current]: palette.green.dark1, + }, +}; + +export const getThemedStateStyles = (theme: Theme, state: State) => css` + color: ${themedStateColor[theme][state]}; + background-color: ${themedStateBgColor[theme][state]}; + border-color: ${themedStateBorderColor[theme][state]}; +`; diff --git a/src/StepIcon/StepIcon.tsx b/src/StepIcon/StepIcon.tsx new file mode 100644 index 0000000000..9504d27c66 --- /dev/null +++ b/src/StepIcon/StepIcon.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +import { cx } from '@leafygreen-ui/emotion'; +// @ts-expect-error - Could not find a declaration file +import CheckmarkIcon from '@leafygreen-ui/icon/dist/Checkmark'; +import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; + +import { + getStepWrapperStyles, + getThemedStateStyles, + stepIconClassName, + stepStyles, +} from './StepIcon.styles'; +import { StepIconProps } from './StepIcon.types'; + +/** + * + * @internal + */ +export const StepIcon = ({ isCompleted, state, index }: StepIconProps) => { + const { theme } = useDarkMode(); + + return ( +
+
+ {isCompleted ? : index + 1} +
+
+ ); +}; + +StepIcon.displayName = 'StepIcon'; diff --git a/src/StepIcon/StepIcon.types.ts b/src/StepIcon/StepIcon.types.ts new file mode 100644 index 0000000000..29a8ceeff7 --- /dev/null +++ b/src/StepIcon/StepIcon.types.ts @@ -0,0 +1,11 @@ +import { InternalVerticalStepProps } from '../VerticalStep'; + +export type StepIconProps = Pick< + InternalVerticalStepProps, + 'index' | 'state' +> & { + /** + * Whether the step is completed + */ + isCompleted: boolean; +}; diff --git a/src/StepIcon/index.ts b/src/StepIcon/index.ts new file mode 100644 index 0000000000..1d4011b03a --- /dev/null +++ b/src/StepIcon/index.ts @@ -0,0 +1,2 @@ +export { StepIcon } from './StepIcon'; +export { stepIconClassName } from './StepIcon.styles'; diff --git a/src/VerticalStep/InternalVerticalStep.tsx b/src/VerticalStep/InternalVerticalStep.tsx new file mode 100644 index 0000000000..861c2a2267 --- /dev/null +++ b/src/VerticalStep/InternalVerticalStep.tsx @@ -0,0 +1,113 @@ +import React from 'react'; + +import { cx } from '@leafygreen-ui/emotion'; +import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; +import { BaseFontSize } from '@leafygreen-ui/tokens'; +import { Body, Description } from '@leafygreen-ui/typography'; + +import { LGIDS_VERTICAL_STEPPER } from '../constants'; +import { StepIcon } from '../StepIcon'; +import { VerticalStepButtons } from '../VerticalStepButtons/VerticalStepButtons'; + +import { + baseStyles, + contentClassName, + getContentStyles, + getInnerStyles, + getTitleStyles, + getWrapperStyles, + mediaStyles, +} from './VerticalStep.styles'; +import { InternalVerticalStepProps, State } from './VerticalStep.types'; + +/** + * @internal + */ + +export const InternalVerticalStep = React.forwardRef< + HTMLLIElement, + InternalVerticalStepProps +>( + ( + { + title, + description, + media, + primaryButtonProps, + secondaryButtonProps, + state, + index, + className, + ...rest + }: InternalVerticalStepProps, + forwardRef, + ) => { + const { theme } = useDarkMode(); + + const isCompleted = state === State.Completed; + const isCurrent = state === State.Current; + const hasButtons = primaryButtonProps; + + return ( +
  • + +
    + + {title} + + +
    +
    + + {description} + + {media && ( +
    + {media} +
    + )} + {hasButtons && ( + + )} +
    +
    +
    +
    • + ); + }, +); + +InternalVerticalStep.displayName = 'InternalVerticalStep'; diff --git a/src/VerticalStep/VerticalStep.spec.tsx b/src/VerticalStep/VerticalStep.spec.tsx new file mode 100644 index 0000000000..e0a53aad1a --- /dev/null +++ b/src/VerticalStep/VerticalStep.spec.tsx @@ -0,0 +1,196 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import { LGIDS_VERTICAL_STEPPER } from '../constants'; + +import { State } from './VerticalStep.types'; +import { + InternalVerticalStep, + InternalVerticalStepProps, + VerticalStep, +} from '.'; + +const titleText = 'This is the title'; +const descriptionText = 'This is the description'; + +const renderVerticalStepper = ({ + title = titleText, + description = descriptionText, + state = State.Current, + ...props +}: Partial) => { + const utils = render( + , + ); + + const verticalStep = utils.getByTestId(LGIDS_VERTICAL_STEPPER.step); + + return { + ...utils, + verticalStep, + }; +}; + +describe('packages/vertical-step', () => { + describe('step', () => { + describe('rendering', () => { + test('title renders', () => { + const { getByTestId } = renderVerticalStepper({}); + const title = getByTestId(LGIDS_VERTICAL_STEPPER.stepTitle); + expect(title).toBeInTheDocument(); + expect(title).toHaveTextContent(titleText); + }); + test('description renders', () => { + const { getByTestId } = renderVerticalStepper({}); + const description = getByTestId(LGIDS_VERTICAL_STEPPER.stepDescription); + expect(description).toBeInTheDocument(); + expect(description).toHaveTextContent(descriptionText); + }); + + describe('media', () => { + test('renders', () => { + const { getByTestId } = renderVerticalStepper({ + media: test, + }); + const media = getByTestId(LGIDS_VERTICAL_STEPPER.stepMedia); + expect(media).toBeInTheDocument(); + }); + test('does not render', () => { + const { queryByTestId } = renderVerticalStepper({}); + const media = queryByTestId(LGIDS_VERTICAL_STEPPER.stepMedia); + expect(media).not.toBeInTheDocument(); + }); + }); + + describe('ctas', () => { + test('primaryButton renders', () => { + const { getByTestId } = renderVerticalStepper({ + primaryButtonProps: { + children: 'primary button', + }, + }); + const primaryButton = getByTestId( + LGIDS_VERTICAL_STEPPER.stepPrimaryButton, + ); + expect(primaryButton).toBeInTheDocument(); + expect(primaryButton).toHaveTextContent('primary button'); + }); + test('secondaryButton renders', () => { + const { getByTestId } = renderVerticalStepper({ + primaryButtonProps: { + children: 'primary button', + }, + secondaryButtonProps: { + children: 'secondary button', + }, + }); + const secondaryButton = getByTestId( + LGIDS_VERTICAL_STEPPER.stepSecondaryButton, + ); + expect(secondaryButton).toBeInTheDocument(); + expect(secondaryButton).toHaveTextContent('secondary button'); + }); + test('secondaryButton does not render without a primaryButton', () => { + const { queryByTestId } = renderVerticalStepper({ + secondaryButtonProps: { + children: 'secondary button', + }, + }); + const secondaryButton = queryByTestId( + LGIDS_VERTICAL_STEPPER.stepSecondaryButton, + ); + expect(secondaryButton).not.toBeInTheDocument(); + }); + }); + }); + + describe('current', () => { + test('aria-current is "step"', async () => { + const { verticalStep } = renderVerticalStepper({}); + expect(verticalStep).toHaveAttribute('data-state', State.Current); + expect(verticalStep).toHaveAttribute('aria-current', 'step'); + }); + + test('buttons are tabbable', async () => { + const { verticalStep } = renderVerticalStepper({ + primaryButtonProps: { + children: 'primary button', + }, + }); + const tabIndex = verticalStep.querySelectorAll("button[tabindex='-1']"); + expect(tabIndex).toHaveLength(0); + }); + }); + + describe('completed', () => { + test('aria-current is false', async () => { + const { verticalStep } = renderVerticalStepper({ + state: State.Completed, + }); + expect(verticalStep).toHaveAttribute('data-state', State.Completed); + expect(verticalStep).toHaveAttribute('aria-current', 'false'); + }); + + test('buttons are not tabbable', async () => { + const { verticalStep } = renderVerticalStepper({ + state: State.Completed, + primaryButtonProps: { + children: 'primary button', + }, + }); + const tabIndex = verticalStep.querySelectorAll("button[tabindex='-1']"); + expect(tabIndex).toHaveLength(1); + }); + }); + + describe('future', () => { + test('aria-current is false', async () => { + const { verticalStep } = renderVerticalStepper({ + state: State.Future, + }); + expect(verticalStep).toHaveAttribute('data-state', State.Future); + expect(verticalStep).toHaveAttribute('aria-current', 'false'); + }); + + test('buttons are not tabbable', async () => { + const { verticalStep } = renderVerticalStepper({ + state: State.Future, + primaryButtonProps: { + children: 'primary button', + }, + }); + const tabIndex = verticalStep.querySelectorAll("button[tabindex='-1']"); + expect(tabIndex).toHaveLength(1); + }); + }); + }); + + describe('TypeScript types are correct', () => { + // eslint-disable-next-line jest/no-disabled-tests + test.skip('VerticalStepper component types', () => { + <> + + + {/* @ts-expect-error Missing title and description */} + + + } + primaryButtonProps={{ children: 'primary button', onClick: () => {} }} + secondaryButtonProps={{ + children: 'secondary button', + onClick: () => {}, + }} + /> + ; + }); + }); +}); diff --git a/src/VerticalStep/VerticalStep.styles.ts b/src/VerticalStep/VerticalStep.styles.ts new file mode 100644 index 0000000000..32dbe6ad13 --- /dev/null +++ b/src/VerticalStep/VerticalStep.styles.ts @@ -0,0 +1,122 @@ +import { css } from '@leafygreen-ui/emotion'; +import { createUniqueClassName, Theme } from '@leafygreen-ui/lib'; +import { palette } from '@leafygreen-ui/palette'; +import { + breakpoints, + fontWeights, + spacing, + transitionDuration, + typeScales, +} from '@leafygreen-ui/tokens'; + +import { stepIconClassName } from '../StepIcon'; + +import { State } from './VerticalStep.types'; + +export const contentClassName = createUniqueClassName('content'); + +export const baseStyles = css` + display: flex; + gap: ${spacing[200]}px; + + // This adds the line between steps + &:not(:last-of-type) { + .${stepIconClassName} { + &::after { + content: ''; + } + } + } + + &:last-of-type { + .${contentClassName} { + margin: 0; + } + } +`; + +export const getWrapperStyles = (isCompleted = false) => css` + display: grid; + transition: grid-template-rows ${transitionDuration.slowest}ms ease-in-out; + grid-template-rows: 1fr; + + ${isCompleted && + css` + grid-template-rows: 0fr; + `} +`; + +export const getInnerStyles = (hasMedia = false) => css` + overflow: hidden; + padding-inline-start: ${spacing[200]}px; + + ${hasMedia && + css` + @media (min-width: ${breakpoints.Tablet}px) { + display: grid; + } + + column-gap: ${spacing[400]}px; + grid-template: + 'desc img' + 'cta img' + 'cta img'; + grid-template-columns: minmax(370px, 1fr) auto; + `} +`; + +export const mediaStyles = css` + grid-area: img; + margin-block-start: ${spacing[200]}px; + max-width: 800px; + width: 100%; + + @media (min-width: ${breakpoints.Tablet}px) { + margin-block-start: 0; + } + + img, + svg { + max-width: 100%; + vertical-align: middle; + } +`; + +export const titleStyles: Record> = { + [Theme.Dark]: { + [State.Current]: palette.white, + [State.Completed]: palette.green.base, + [State.Future]: palette.gray.light1, + }, + [Theme.Light]: { + [State.Current]: palette.black, + [State.Completed]: palette.green.dark2, + [State.Future]: palette.gray.dark1, + }, +}; + +export const getTitleStyles = (theme: Theme, state: State) => { + return css` + color: ${titleStyles[theme][state]}; + padding-inline-start: ${spacing[200]}px; + line-height: ${typeScales.body1.lineHeight}px; + transition: ${transitionDuration.default}ms font-weight ease-in-out; + + ${state !== State.Completed && + css` + font-weight: ${fontWeights.bold}; + `} + `; +}; + +export const getContentStyles = (isOpen = false, hasButtons = false) => css` + margin-block-end: ${spacing[400]}px; + transition: margin-block-end ${transitionDuration.slowest}ms ease-in-out; + width: 100%; + + ${isOpen && + hasButtons && + css` + margin-block-end: ${spacing[200]}px; + `} +`; diff --git a/src/VerticalStep/VerticalStep.tsx b/src/VerticalStep/VerticalStep.tsx new file mode 100644 index 0000000000..0bd222b58c --- /dev/null +++ b/src/VerticalStep/VerticalStep.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { useDescendant } from '@leafygreen-ui/descendants'; + +import { + useVerticalStepperContext, + VerticalStepperDescendantsContext, +} from '../context'; + +import { InternalVerticalStep } from './InternalVerticalStep'; +import { State, VerticalStepProps } from './VerticalStep.types'; + +export const VerticalStep = React.forwardRef( + ({ ...rest }: VerticalStepProps, forwardRef) => { + const { index, ref } = useDescendant( + VerticalStepperDescendantsContext, + forwardRef, + ); + + const { currentStep, hasVerticalStepperParent } = + useVerticalStepperContext(); + + const getState = (index: number) => { + if (index === currentStep) return State.Current; + if (index < currentStep) return State.Completed; + return State.Future; + }; + + if (!hasVerticalStepperParent) { + throw Error( + '`VerticalStep` must be a child of a `VerticalStepper` instance', + ); + } + + return ( + + ); + }, +); + +VerticalStep.displayName = 'VerticalStep'; + +VerticalStep.prototype = { + title: PropTypes.string.isRequired, + description: PropTypes.node.isRequired, + media: PropTypes.element, + primaryButtonProps: PropTypes.objectOf(PropTypes.any), + secondaryButtonProps: PropTypes.objectOf(PropTypes.any), +}; diff --git a/src/VerticalStep/VerticalStep.types.ts b/src/VerticalStep/VerticalStep.types.ts new file mode 100644 index 0000000000..e7ca6b4576 --- /dev/null +++ b/src/VerticalStep/VerticalStep.types.ts @@ -0,0 +1,52 @@ +import { ComponentPropsWithRef } from 'react'; + +import { ButtonProps } from '@leafygreen-ui/button'; + +type CustomConfirmButtonProps = Omit; + +export interface VerticalStepProps extends ComponentPropsWithRef<'li'> { + /** + * The title of the step + */ + title: string; + + /** + * The description of the step. This will render below the title + */ + description: React.ReactNode; + + /** + * The image to the right of the text + */ + media?: React.ReactNode; + + /** + * The right-most button under the description. An object that accepts all `Button` props but excludes `variant`. If there is a secondary button, the `variant` is `primary`. If there isn’t a secondary button, the `variant` is `default`. + */ + primaryButtonProps?: CustomConfirmButtonProps; + + /** + * The button to the left of the primary button. An object that accepts all `Button` props but excludes `variant`. The `variant` is always `default`. + */ + secondaryButtonProps?: CustomConfirmButtonProps; +} + +export const State = { + Current: 'current', + Completed: 'completed', + Future: 'future', +} as const; + +export type State = (typeof State)[keyof typeof State]; + +export interface InternalVerticalStepProps extends VerticalStepProps { + /** + * The internal state of the step + */ + state: State; + + /** + * The index of the step + */ + index: number; +} diff --git a/src/VerticalStep/index.ts b/src/VerticalStep/index.ts new file mode 100644 index 0000000000..d1d8a88705 --- /dev/null +++ b/src/VerticalStep/index.ts @@ -0,0 +1,7 @@ +export { InternalVerticalStep } from './InternalVerticalStep'; +export { VerticalStep } from './VerticalStep'; +export { + InternalVerticalStepProps, + State, + type VerticalStepProps, +} from './VerticalStep.types'; diff --git a/src/VerticalStepButtons/VerticalStepButtons.styles.tsx b/src/VerticalStepButtons/VerticalStepButtons.styles.tsx new file mode 100644 index 0000000000..ca643c59e9 --- /dev/null +++ b/src/VerticalStepButtons/VerticalStepButtons.styles.tsx @@ -0,0 +1,33 @@ +import { css } from '@leafygreen-ui/emotion'; +import { spacing, transitionDuration } from '@leafygreen-ui/tokens'; + +export const innerStyles = css` + overflow: hidden; +`; + +export const getBaseStyles = (isCurrent = false) => css` + display: grid; + transition: grid-template-rows ${transitionDuration.slowest}ms ease-in-out; + grid-template-rows: 0fr; + margin-inline-start: -${spacing[200]}px; + + ${isCurrent && + css` + grid-template-rows: 1fr; + `} +`; + +export const getWrapperStyles = (isCurrent = false) => css` + padding-inline-start: ${spacing[200]}px; + padding-block-end: 0; + padding-block-start: ${spacing[200]}px; + transition: padding-block-end 400ms ease; + + display: flex; + gap: ${spacing[200]}px; + + ${isCurrent && + css` + padding-block-end: ${spacing[200]}px; // Add padding in here so that hover states are not cut off by the overflow + `} +`; diff --git a/src/VerticalStepButtons/VerticalStepButtons.tsx b/src/VerticalStepButtons/VerticalStepButtons.tsx new file mode 100644 index 0000000000..d7749f62f8 --- /dev/null +++ b/src/VerticalStepButtons/VerticalStepButtons.tsx @@ -0,0 +1,51 @@ +import React from 'react'; + +import Button, { Variant } from '@leafygreen-ui/button'; +import { cx } from '@leafygreen-ui/emotion'; + +import { LGIDS_VERTICAL_STEPPER } from '../constants'; +import { State } from '../VerticalStep/VerticalStep.types'; + +import { + getBaseStyles, + getWrapperStyles, + innerStyles, +} from './VerticalStepButtons.styles'; +import { VerticalStepperButtonProps } from './VerticalStepButtons.types'; + +export const VerticalStepButtons = ({ + primaryButtonProps, + secondaryButtonProps, + state, +}: VerticalStepperButtonProps) => { + const isCurrent = state === State.Current; + + return ( +
    +
    +
    + {primaryButtonProps && secondaryButtonProps && ( +
    +
    +
    + ); +}; + +VerticalStepButtons.displayName = 'VerticalStepButtons'; diff --git a/src/VerticalStepButtons/VerticalStepButtons.types.ts b/src/VerticalStepButtons/VerticalStepButtons.types.ts new file mode 100644 index 0000000000..febcc5bcca --- /dev/null +++ b/src/VerticalStepButtons/VerticalStepButtons.types.ts @@ -0,0 +1,6 @@ +import { InternalVerticalStepProps } from '../VerticalStep/VerticalStep.types'; + +export type VerticalStepperButtonProps = Pick< + InternalVerticalStepProps, + 'primaryButtonProps' | 'secondaryButtonProps' | 'state' +>; diff --git a/src/VerticalStepButtons/index.ts b/src/VerticalStepButtons/index.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/VerticalStepper.stories.tsx b/src/VerticalStepper.stories.tsx new file mode 100644 index 0000000000..e42ca2c292 --- /dev/null +++ b/src/VerticalStepper.stories.tsx @@ -0,0 +1,100 @@ +import React from 'react'; +import { StoryMetaType } from '@lg-tools/storybook-utils'; +import { StoryObj } from '@storybook/react'; + +import { Link } from '@leafygreen-ui/typography'; + +import { VerticalStep, VerticalStepper } from '.'; + +export default { + title: 'Components/VerticalStepper', + component: VerticalStepper, + parameters: { + default: 'LiveExample', + }, + args: { + darkMode: false, + currentStep: 0, + children: [ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam + efficitur nunc mattis magna pretium, id mattis metus vestibulum. + Integer cursus ex ante, ut molestie lorem vestibulum id.{' '} + Im a link + + } + primaryButtonProps={{ + children: 'primary button', + // eslint-disable-next-line no-console + onClick: () => console.log('click'), + }} + />, + } + />, + } + />, + , + } + />, + , + ], + }, + argTypes: { + darkMode: { + control: 'boolean', + }, + currentStep: { + control: { + type: 'number', + min: 0, + max: 6, + }, + }, + }, +} satisfies StoryMetaType; + +export const LiveExample = { + render: ({ ...args }) => , +} satisfies StoryObj; + +export const Generated = { + render: () => <>, + parameters: { + generate: { + combineArgs: { + darkMode: [false, true], + currentStep: [0, 2, 6], + }, + }, + }, +} satisfies StoryObj; diff --git a/src/VerticalStepper/VerticalStepper.spec.tsx b/src/VerticalStepper/VerticalStepper.spec.tsx new file mode 100644 index 0000000000..2b34c57a0d --- /dev/null +++ b/src/VerticalStepper/VerticalStepper.spec.tsx @@ -0,0 +1,176 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; + +import { Link } from '@leafygreen-ui/typography'; + +import { LGIDS_VERTICAL_STEPPER } from '../constants'; +import { VerticalStep } from '../VerticalStep/VerticalStep'; + +import { VerticalStepper, VerticalStepperProps } from '.'; + +const currentStepString = 'li[data-state="current"]'; +const completedStepString = 'li[data-state="completed"]'; +const futureStepString = 'li[data-state="future"]'; + +const childrenData = [ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam + efficitur nunc mattis magna pretium, id mattis metus vestibulum. Integer + cursus ex ante, ut molestie lorem vestibulum id.{' '} + Im a link + + } + primaryButtonProps={{ + children: 'primary button', + }} + />, + } + />, + } + />, + , + , + } + />, +]; + +const renderVerticalStepper = ({ + currentStep: currentStepProp = 2, + children = childrenData, + ...props +}: Partial) => { + const utils = render( + + {children} + , + ); + + const verticalStepper = utils.getByTestId(LGIDS_VERTICAL_STEPPER.root); + const verticalSteps = utils.getAllByTestId(LGIDS_VERTICAL_STEPPER.step); + const currentStep = verticalStepper.querySelectorAll(currentStepString); + const completedSteps = verticalStepper.querySelectorAll(completedStepString); + const futureSteps = verticalStepper.querySelectorAll(futureStepString); + + return { + ...utils, + verticalStepper, + verticalSteps, + currentStep, + completedSteps, + futureSteps, + }; +}; + +describe('packages/vertical-stepper', () => { + describe('a11y', () => { + test('does not have basic accessibility issues', async () => { + const { container } = renderVerticalStepper({}); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + }); + + test('warns if there is only 1 step', () => { + const spy = jest.spyOn(console, 'warn').mockImplementation(() => {}); + + render( + + } + /> + , + ); + + expect(spy).toHaveBeenCalledTimes(1); + expect(spy).toHaveBeenCalledWith( + 'Two or more components are required', + ); + spy.mockClear(); + }); + + describe('steps', () => { + test('are all rendered', async () => { + const { verticalSteps } = renderVerticalStepper({}); + expect(verticalSteps).toHaveLength(6); + }); + + describe('current', () => { + test('has 1 current step', async () => { + const { currentStep } = renderVerticalStepper({}); + expect(currentStep).toHaveLength(1); + }); + }); + + describe('completed', () => { + test('has correct number of steps', async () => { + const { completedSteps } = renderVerticalStepper({}); + expect(completedSteps).toHaveLength(2); + }); + }); + + describe('future', () => { + test('has correct number of steps', async () => { + const { futureSteps } = renderVerticalStepper({}); + expect(futureSteps).toHaveLength(3); + }); + }); + }); + + describe('TypeScript types are correct', () => { + // eslint-disable-next-line jest/no-disabled-tests + test.skip('VerticalStepper component types', () => { + <> + {/* @ts-expect-error Missing children and currentStep */} + + + {/* @ts-expect-error Missing children */} + + + {/* @ts-expect-error Missing currentStep */} + + {/* @ts-expect-error Missing all props */} + + + + + {/* @ts-expect-error Missing all props */} + + + ; + }); + }); +}); diff --git a/src/VerticalStepper/VerticalStepper.styles.ts b/src/VerticalStepper/VerticalStepper.styles.ts new file mode 100644 index 0000000000..c89b8fdbdb --- /dev/null +++ b/src/VerticalStepper/VerticalStepper.styles.ts @@ -0,0 +1,7 @@ +import { css } from '@leafygreen-ui/emotion'; + +export const baseStyles = css` + list-style-type: none; + padding: 0; + margin: 0; +`; diff --git a/src/VerticalStepper/VerticalStepper.tsx b/src/VerticalStepper/VerticalStepper.tsx new file mode 100644 index 0000000000..7df82c4233 --- /dev/null +++ b/src/VerticalStepper/VerticalStepper.tsx @@ -0,0 +1,79 @@ +import React, { useMemo } from 'react'; +import PropTypes from 'prop-types'; + +import { + DescendantsProvider, + useInitDescendants, +} from '@leafygreen-ui/descendants'; +import { cx } from '@leafygreen-ui/emotion'; +import LeafyGreenProvider, { + useDarkMode, +} from '@leafygreen-ui/leafygreen-provider'; + +import { LGIDS_VERTICAL_STEPPER } from '../constants'; +import { + VerticalStepperDescendantsContext, + VerticalStepperProvider, +} from '../context'; + +import { baseStyles } from './VerticalStepper.styles'; +import { VerticalStepperProps } from './VerticalStepper.types'; + +export const VerticalStepper = React.forwardRef< + HTMLOListElement, + VerticalStepperProps +>( + ( + { + currentStep = 0, + darkMode: darkModeProp, + children, + className, + 'data-lgid': dataLgId = LGIDS_VERTICAL_STEPPER.root, + }: VerticalStepperProps, + forwardRef, + ) => { + const { darkMode } = useDarkMode(darkModeProp); + const childrenLength = React.Children.toArray(children).length; + + const { descendants, dispatch } = useInitDescendants(); + + const providerData = useMemo(() => { + return { currentStep, hasVerticalStepperParent: true }; + }, [currentStep]); + + if (childrenLength < 2) { + console.warn('Two or more components are required'); + return null; + } + + return ( + + + +
      + {children} +
    +     +     +     + ); + }, +); + +VerticalStepper.displayName = 'VerticalStepper'; + +VerticalStepper.propTypes = { + darkMode: PropTypes.bool, + currentStep: PropTypes.number.isRequired, + children: PropTypes.node.isRequired, +} as any; // avoid inferred types from interfering diff --git a/src/VerticalStepper/VerticalStepper.types.ts b/src/VerticalStepper/VerticalStepper.types.ts new file mode 100644 index 0000000000..136e0782a1 --- /dev/null +++ b/src/VerticalStepper/VerticalStepper.types.ts @@ -0,0 +1,18 @@ +import React, { ComponentPropsWithRef } from 'react'; + +import { DarkModeProps, LgIdProps } from '@leafygreen-ui/lib'; + +export interface VerticalStepperProps + extends DarkModeProps, + LgIdProps, + Omit, 'children'> { + /** + * Zero-based. The index of the current step that will appear active. All steps will be marked as completed if the currentStep equals the number of steps. + */ + currentStep: number; + + /** + * Two or more `` components + */ + children: React.ReactNode; +} diff --git a/src/VerticalStepper/index.ts b/src/VerticalStepper/index.ts new file mode 100644 index 0000000000..1219e654b5 --- /dev/null +++ b/src/VerticalStepper/index.ts @@ -0,0 +1,2 @@ +export { VerticalStepper } from './VerticalStepper'; +export { VerticalStepperProps } from './VerticalStepper.types'; diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 0000000000..cceb4ed92e --- /dev/null +++ b/src/constants.ts @@ -0,0 +1,11 @@ +const LGID_ROOT = 'lg-vertical_stepper'; + +export const LGIDS_VERTICAL_STEPPER = { + root: LGID_ROOT, + step: `${LGID_ROOT}-step`, + stepTitle: `${LGID_ROOT}-step-title`, + stepDescription: `${LGID_ROOT}-step-description`, + stepMedia: `${LGID_ROOT}-step-media`, + stepPrimaryButton: `${LGID_ROOT}-step-primary_button`, + stepSecondaryButton: `${LGID_ROOT}-step-secondary_button`, +} as const; diff --git a/src/context/VerticalStepperContext.tsx b/src/context/VerticalStepperContext.tsx new file mode 100644 index 0000000000..e020e63575 --- /dev/null +++ b/src/context/VerticalStepperContext.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { createContext, PropsWithChildren, useContext } from 'react'; + +export interface VerticalStepperContextProps { + currentStep: number; + hasVerticalStepperParent: boolean; +} + +export const VerticalStepperContext = + createContext({ + currentStep: 0, + hasVerticalStepperParent: false, + }); + +export const useVerticalStepperContext = () => { + return useContext(VerticalStepperContext); +}; + +export const VerticalStepperProvider = ({ + children, + currentStep, + hasVerticalStepperParent, +}: PropsWithChildren) => { + return ( + + {children} + + ); +}; diff --git a/src/context/VerticalStepperDescendantsContext.ts b/src/context/VerticalStepperDescendantsContext.ts new file mode 100644 index 0000000000..154d637a3b --- /dev/null +++ b/src/context/VerticalStepperDescendantsContext.ts @@ -0,0 +1,11 @@ +import { + createDescendantsContext, + useDescendantsContext, +} from '@leafygreen-ui/descendants'; + +export const VerticalStepperDescendantsContext = + createDescendantsContext('VerticalStepperDescendantsContext'); + +export function useVerticalStepperDescendantsContext() { + return useDescendantsContext(VerticalStepperDescendantsContext); +} diff --git a/src/context/index.ts b/src/context/index.ts new file mode 100644 index 0000000000..746c7db028 --- /dev/null +++ b/src/context/index.ts @@ -0,0 +1,5 @@ +export { + useVerticalStepperContext, + VerticalStepperProvider, +} from './VerticalStepperContext'; +export { VerticalStepperDescendantsContext } from './VerticalStepperDescendantsContext'; diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000000..91b0c6f61f --- /dev/null +++ b/src/index.ts @@ -0,0 +1,2 @@ +export { VerticalStep, type VerticalStepProps } from './VerticalStep'; +export { VerticalStepper, type VerticalStepperProps } from './VerticalStepper'; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000000..383f3302b3 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "@lg-tools/build/config/package.tsconfig.json", + "compilerOptions": { + "declarationDir": "dist", + "outDir": "dist", + "rootDir": "src" + }, + "include": ["src/**/*"], + "exclude": ["**/*.spec.*", "**/*.story.*"], + "references": [] +} From 0d492737dda4eefdf27eeea8feca554ad668e413 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 27 Jun 2024 15:01:36 -0700 Subject: [PATCH 02/16] Version Packages (#169) Co-authored-by: github-actions[bot] --- CHANGELOG.md | 7 +++++++ package.json | 3 +-- 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000000..b49094bb9a --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,7 @@ +# @lg-private/vertical-stepper + +## 1.0.0 + +### Major Changes + +- d50a214: First major release of `VerticalStepper`. [LG-4333](https://jira.mongodb.org/browse/LG-4333) diff --git a/package.json b/package.json index 5fd6c182dd..8ee47566af 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,6 @@ - { "name": "@lg-private/vertical-stepper", - "version": "0.0.1", + "version": "1.0.0", "description": "LeafyGreen UI Kit Vertical Stepper", "main": "./dist/index.js", "module": "./dist/esm/index.js", From 4f9ba260fdb74df627311f51faec4bb252f6a854 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Fri, 12 Jul 2024 13:43:09 -0700 Subject: [PATCH 03/16] Fix naming of lg-private packages (#183) * Fix lg-private packages naming * Changeset --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index e2839585eb..a2c9342bdc 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Vertical Stepper -![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/vertical-stepper.svg) +![npm (scoped)](https://img.shields.io/npm/v/@lg-private/vertical-stepper.svg) #### [View on MongoDB.design](https://www.mongodb.design/component/vertical-stepper/example/) @@ -9,19 +9,19 @@ ### Yarn ```shell -yarn add @leafygreen-ui/vertical-stepper +yarn add @lg-private/vertical-stepper ``` ### NPM ```shell -npm install @leafygreen-ui/vertical-stepper +npm install @lg-private/vertical-stepper ``` ## Example ```js -import { VerticalStepper, VerticalStep } from `@leafygreen-ui/vertical-stepper`; +import { VerticalStepper, VerticalStep } from `@lg-private/vertical-stepper`; const [currentStep, setCurrentStep] = useState(0); From 8f377b07025f2995af287410e8edac189241a091 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Mon, 15 Jul 2024 14:56:48 -0700 Subject: [PATCH 04/16] LG-4395: feature walls major release (#186) * LG-4395: vertical stepper design QA * LG-4395: feature walls design QA * Changeset --- src/VerticalStep/VerticalStep.types.ts | 2 +- src/VerticalStepButtons/VerticalStepButtons.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/VerticalStep/VerticalStep.types.ts b/src/VerticalStep/VerticalStep.types.ts index e7ca6b4576..fc6a123a49 100644 --- a/src/VerticalStep/VerticalStep.types.ts +++ b/src/VerticalStep/VerticalStep.types.ts @@ -2,7 +2,7 @@ import { ComponentPropsWithRef } from 'react'; import { ButtonProps } from '@leafygreen-ui/button'; -type CustomConfirmButtonProps = Omit; +type CustomConfirmButtonProps = Omit; export interface VerticalStepProps extends ComponentPropsWithRef<'li'> { /** diff --git a/src/VerticalStepButtons/VerticalStepButtons.tsx b/src/VerticalStepButtons/VerticalStepButtons.tsx index d7749f62f8..6670533500 100644 --- a/src/VerticalStepButtons/VerticalStepButtons.tsx +++ b/src/VerticalStepButtons/VerticalStepButtons.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Button, { Variant } from '@leafygreen-ui/button'; +import Button, { Size, Variant } from '@leafygreen-ui/button'; import { cx } from '@leafygreen-ui/emotion'; import { LGIDS_VERTICAL_STEPPER } from '../constants'; @@ -30,6 +30,7 @@ export const VerticalStepButtons = ({ data-testid={LGIDS_VERTICAL_STEPPER.stepSecondaryButton} tabIndex={!isCurrent ? -1 : 0} // Prevent keyboard interaction when the step is not current {...secondaryButtonProps} + size={Size.Small} variant={Variant.Default} /> )} @@ -39,6 +40,7 @@ export const VerticalStepButtons = ({ data-testid={LGIDS_VERTICAL_STEPPER.stepPrimaryButton} tabIndex={!isCurrent ? -1 : 0} // Prevent keyboard interaction when the step is not current {...primaryButtonProps} + size={Size.Small} variant={secondaryButtonProps ? Variant.Primary : Variant.Default} /> )} From 358d22ad9e9fd65227eab217e056ac523a91820b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 15 Jul 2024 15:22:38 -0700 Subject: [PATCH 05/16] Version Packages (#184) Co-authored-by: github-actions[bot] --- CHANGELOG.md | 10 ++++++++++ package.json | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b49094bb9a..ba04c34a87 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ # @lg-private/vertical-stepper +## 1.1.0 + +### Minor Changes + +- f78419b: [LG-4395](https://jira.mongodb.org/browse/LG-4395): Fixes buttons sizes from default to small + +### Patch Changes + +- 8f076fb: Fixes naming of lg private packages from `@leafygreen-ui/*` to `@lg-private/*` + ## 1.0.0 ### Major Changes diff --git a/package.json b/package.json index 8ee47566af..4b4404e237 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lg-private/vertical-stepper", - "version": "1.0.0", + "version": "1.1.0", "description": "LeafyGreen UI Kit Vertical Stepper", "main": "./dist/index.js", "module": "./dist/esm/index.js", From 765e1b25b385339f7c6aa1a39e5a30a373708173 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Wed, 17 Jul 2024 10:48:53 -0700 Subject: [PATCH 06/16] Use actions slot prop for vertical stepper and activation steps (#191) * VerticalStepper takes actions prop instead of primaryButtonProps and secondaryButtonProps * ActivationSteps uses updated VerticalStepper API * Changeset * Address feedback --- README.md | 79 ++++++++----- src/VerticalStep/InternalVerticalStep.tsx | 19 ++-- src/VerticalStep/VerticalStep.spec.tsx | 106 +++++++----------- src/VerticalStep/VerticalStep.tsx | 3 +- src/VerticalStep/VerticalStep.types.ts | 13 +-- .../VerticalStepActions.styles.tsx} | 0 .../VerticalStepActions.tsx | 34 ++++++ .../VerticalStepActions.types.ts} | 4 +- src/VerticalStepActions/index.ts | 1 + .../VerticalStepButtons.tsx | 53 --------- src/VerticalStepButtons/index.ts | 0 src/VerticalStepper.stories.tsx | 39 +++++-- src/VerticalStepper/VerticalStepper.spec.tsx | 27 +++-- src/constants.ts | 3 +- 14 files changed, 182 insertions(+), 199 deletions(-) rename src/{VerticalStepButtons/VerticalStepButtons.styles.tsx => VerticalStepActions/VerticalStepActions.styles.tsx} (100%) create mode 100644 src/VerticalStepActions/VerticalStepActions.tsx rename src/{VerticalStepButtons/VerticalStepButtons.types.ts => VerticalStepActions/VerticalStepActions.types.ts} (51%) create mode 100644 src/VerticalStepActions/index.ts delete mode 100644 src/VerticalStepButtons/VerticalStepButtons.tsx delete mode 100644 src/VerticalStepButtons/index.ts diff --git a/README.md b/README.md index a2c9342bdc..5751f94f59 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ npm install @lg-private/vertical-stepper ## Example ```js +import Button, { Size, Variant } from `@leafygreen-ui/button`; import { VerticalStepper, VerticalStep } from `@lg-private/vertical-stepper`; const [currentStep, setCurrentStep] = useState(0); @@ -36,39 +37,60 @@ const [currentStep, setCurrentStep] = useState(0); Im a link } - primaryButtonProps={{ - children: 'primary button', - onClick: () => setCurrentStep(step => step + 1) - }} + actions={ + + } /> setCurrentStep(step => step + 1) - }} - secondaryButtonProps={{ - children: 'secondary button', - onClick: () => setCurrentStep(step => step - 1), - }} + actions={ + <> + + + + } media={test} /> setCurrentStep(step => step + 1) - }} - secondaryButtonProps={{ - children: 'secondary button', - onClick: () => setCurrentStep(step => step - 1), - }} + actions={ + <> + + + + } media={test} /> -     - +    ; ``` ## Properties @@ -83,10 +105,9 @@ const [currentStep, setCurrentStep] = useState(0); ### `` -| Prop | Type | Description | Default | -| -------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -| title | `string` | The title of the step. | | -| description | `React.ReactNode` | The description of the step. This will render below the title. | | -| media | `React.ReactNode` | The image to the right of the text. E.g. `` or `` | | -| primaryButtonProps | `Omit` | The right-most button under the description. An object that accepts all [Button props](https://github.com/mongodb/leafygreen-ui/blob/main/packages/button/README.md#properties) but excludes `variant`. If there is a secondary button, the `variant` is `primary`. If there isn’t a secondary button, the `variant` is `default`. | | -| secondaryButtonProps | `Omit` | The button to the left of the primary button. An object that accepts all [Button props](https://github.com/mongodb/leafygreen-ui/blob/main/packages/button/README.md#properties) but excludes `variant`. The `variant` is always `default`. | | +| Prop | Type | Description | Default | +| ----------- | ----------------- | --------------------------------------------------------------- | ------- | +| title | `string` | The title of the step. | | +| description | `React.ReactNode` | The description of the step. This will render below the title. | | +| media | `React.ReactNode` | The image to the right of the text. E.g. `` or `` | | +| actions | `React.ReactNode` | Optional buttons that will render below the text. | | diff --git a/src/VerticalStep/InternalVerticalStep.tsx b/src/VerticalStep/InternalVerticalStep.tsx index 861c2a2267..886abee0c2 100644 --- a/src/VerticalStep/InternalVerticalStep.tsx +++ b/src/VerticalStep/InternalVerticalStep.tsx @@ -7,7 +7,7 @@ import { Body, Description } from '@leafygreen-ui/typography'; import { LGIDS_VERTICAL_STEPPER } from '../constants'; import { StepIcon } from '../StepIcon'; -import { VerticalStepButtons } from '../VerticalStepButtons/VerticalStepButtons'; +import { VerticalStepActions } from '../VerticalStepActions'; import { baseStyles, @@ -33,8 +33,7 @@ export const InternalVerticalStep = React.forwardRef< title, description, media, - primaryButtonProps, - secondaryButtonProps, + actions, state, index, className, @@ -46,7 +45,7 @@ export const InternalVerticalStep = React.forwardRef< const isCompleted = state === State.Completed; const isCurrent = state === State.Current; - const hasButtons = primaryButtonProps; + const hasActions = actions !== undefined; return (
  • @@ -95,12 +94,8 @@ export const InternalVerticalStep = React.forwardRef< {media}
    )} - {hasButtons && ( - + {hasActions && ( + )} diff --git a/src/VerticalStep/VerticalStep.spec.tsx b/src/VerticalStep/VerticalStep.spec.tsx index e0a53aad1a..ab4bfb30f3 100644 --- a/src/VerticalStep/VerticalStep.spec.tsx +++ b/src/VerticalStep/VerticalStep.spec.tsx @@ -1,5 +1,8 @@ import React from 'react'; import { render } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import Button from '@leafygreen-ui/button'; import { LGIDS_VERTICAL_STEPPER } from '../constants'; @@ -13,7 +16,7 @@ import { const titleText = 'This is the title'; const descriptionText = 'This is the description'; -const renderVerticalStepper = ({ +const renderVerticalStep = ({ title = titleText, description = descriptionText, state = State.Current, @@ -41,13 +44,13 @@ describe('packages/vertical-step', () => { describe('step', () => { describe('rendering', () => { test('title renders', () => { - const { getByTestId } = renderVerticalStepper({}); + const { getByTestId } = renderVerticalStep({}); const title = getByTestId(LGIDS_VERTICAL_STEPPER.stepTitle); expect(title).toBeInTheDocument(); expect(title).toHaveTextContent(titleText); }); test('description renders', () => { - const { getByTestId } = renderVerticalStepper({}); + const { getByTestId } = renderVerticalStep({}); const description = getByTestId(LGIDS_VERTICAL_STEPPER.stepDescription); expect(description).toBeInTheDocument(); expect(description).toHaveTextContent(descriptionText); @@ -55,82 +58,57 @@ describe('packages/vertical-step', () => { describe('media', () => { test('renders', () => { - const { getByTestId } = renderVerticalStepper({ + const { getByTestId } = renderVerticalStep({ media: test, }); const media = getByTestId(LGIDS_VERTICAL_STEPPER.stepMedia); expect(media).toBeInTheDocument(); }); test('does not render', () => { - const { queryByTestId } = renderVerticalStepper({}); + const { queryByTestId } = renderVerticalStep({}); const media = queryByTestId(LGIDS_VERTICAL_STEPPER.stepMedia); expect(media).not.toBeInTheDocument(); }); }); - describe('ctas', () => { - test('primaryButton renders', () => { - const { getByTestId } = renderVerticalStepper({ - primaryButtonProps: { - children: 'primary button', - }, - }); - const primaryButton = getByTestId( - LGIDS_VERTICAL_STEPPER.stepPrimaryButton, - ); - expect(primaryButton).toBeInTheDocument(); - expect(primaryButton).toHaveTextContent('primary button'); - }); - test('secondaryButton renders', () => { - const { getByTestId } = renderVerticalStepper({ - primaryButtonProps: { - children: 'primary button', - }, - secondaryButtonProps: { - children: 'secondary button', - }, + describe('actions', () => { + test('render', () => { + const { getByTestId } = renderVerticalStep({ + actions: , }); - const secondaryButton = getByTestId( - LGIDS_VERTICAL_STEPPER.stepSecondaryButton, - ); - expect(secondaryButton).toBeInTheDocument(); - expect(secondaryButton).toHaveTextContent('secondary button'); + const actions = getByTestId(LGIDS_VERTICAL_STEPPER.stepActions); + expect(actions).toBeInTheDocument(); + expect(actions).toHaveTextContent('primary button'); }); - test('secondaryButton does not render without a primaryButton', () => { - const { queryByTestId } = renderVerticalStepper({ - secondaryButtonProps: { - children: 'secondary button', - }, - }); - const secondaryButton = queryByTestId( - LGIDS_VERTICAL_STEPPER.stepSecondaryButton, - ); - expect(secondaryButton).not.toBeInTheDocument(); + test('does not render', () => { + const { queryByTestId } = renderVerticalStep({}); + const actions = queryByTestId(LGIDS_VERTICAL_STEPPER.stepActions); + expect(actions).not.toBeInTheDocument(); }); }); }); describe('current', () => { test('aria-current is "step"', async () => { - const { verticalStep } = renderVerticalStepper({}); + const { verticalStep } = renderVerticalStep({}); expect(verticalStep).toHaveAttribute('data-state', State.Current); expect(verticalStep).toHaveAttribute('aria-current', 'step'); }); test('buttons are tabbable', async () => { - const { verticalStep } = renderVerticalStepper({ - primaryButtonProps: { - children: 'primary button', - }, + const buttonTestId = 'test-button'; + const { getByTestId } = renderVerticalStep({ + actions: , }); - const tabIndex = verticalStep.querySelectorAll("button[tabindex='-1']"); - expect(tabIndex).toHaveLength(0); + const button = getByTestId(buttonTestId); + userEvent.tab(); + expect(button).toHaveFocus(); }); }); describe('completed', () => { test('aria-current is false', async () => { - const { verticalStep } = renderVerticalStepper({ + const { verticalStep } = renderVerticalStep({ state: State.Completed, }); expect(verticalStep).toHaveAttribute('data-state', State.Completed); @@ -138,20 +116,19 @@ describe('packages/vertical-step', () => { }); test('buttons are not tabbable', async () => { - const { verticalStep } = renderVerticalStepper({ + const { getByTestId } = renderVerticalStep({ state: State.Completed, - primaryButtonProps: { - children: 'primary button', - }, + actions: , }); - const tabIndex = verticalStep.querySelectorAll("button[tabindex='-1']"); - expect(tabIndex).toHaveLength(1); + const actions = getByTestId(LGIDS_VERTICAL_STEPPER.stepActions); + // should test with .not.toHaveFocus() but jsdom does not currently support the `inert` attribute: https://github.com/jsdom/jsdom/issues/3605 + expect(actions).toHaveAttribute('inert'); }); }); describe('future', () => { test('aria-current is false', async () => { - const { verticalStep } = renderVerticalStepper({ + const { verticalStep } = renderVerticalStep({ state: State.Future, }); expect(verticalStep).toHaveAttribute('data-state', State.Future); @@ -159,14 +136,13 @@ describe('packages/vertical-step', () => { }); test('buttons are not tabbable', async () => { - const { verticalStep } = renderVerticalStepper({ + const { getByTestId } = renderVerticalStep({ state: State.Future, - primaryButtonProps: { - children: 'primary button', - }, + actions: , }); - const tabIndex = verticalStep.querySelectorAll("button[tabindex='-1']"); - expect(tabIndex).toHaveLength(1); + const actions = getByTestId(LGIDS_VERTICAL_STEPPER.stepActions); + // should test with .not.toHaveFocus() but jsdom does not currently support the `inert` attribute: https://github.com/jsdom/jsdom/issues/3605 + expect(actions).toHaveAttribute('inert'); }); }); }); @@ -184,11 +160,7 @@ describe('packages/vertical-step', () => { title="title" description="desc" media={test} - primaryButtonProps={{ children: 'primary button', onClick: () => {} }} - secondaryButtonProps={{ - children: 'secondary button', - onClick: () => {}, - }} + actions={} /> ; }); diff --git a/src/VerticalStep/VerticalStep.tsx b/src/VerticalStep/VerticalStep.tsx index 0bd222b58c..fa044e5004 100644 --- a/src/VerticalStep/VerticalStep.tsx +++ b/src/VerticalStep/VerticalStep.tsx @@ -50,6 +50,5 @@ VerticalStep.prototype = { title: PropTypes.string.isRequired, description: PropTypes.node.isRequired, media: PropTypes.element, - primaryButtonProps: PropTypes.objectOf(PropTypes.any), - secondaryButtonProps: PropTypes.objectOf(PropTypes.any), + actions: PropTypes.node, }; diff --git a/src/VerticalStep/VerticalStep.types.ts b/src/VerticalStep/VerticalStep.types.ts index fc6a123a49..9d630d0235 100644 --- a/src/VerticalStep/VerticalStep.types.ts +++ b/src/VerticalStep/VerticalStep.types.ts @@ -1,9 +1,5 @@ import { ComponentPropsWithRef } from 'react'; -import { ButtonProps } from '@leafygreen-ui/button'; - -type CustomConfirmButtonProps = Omit; - export interface VerticalStepProps extends ComponentPropsWithRef<'li'> { /** * The title of the step @@ -21,14 +17,9 @@ export interface VerticalStepProps extends ComponentPropsWithRef<'li'> { media?: React.ReactNode; /** - * The right-most button under the description. An object that accepts all `Button` props but excludes `variant`. If there is a secondary button, the `variant` is `primary`. If there isn’t a secondary button, the `variant` is `default`. - */ - primaryButtonProps?: CustomConfirmButtonProps; - - /** - * The button to the left of the primary button. An object that accepts all `Button` props but excludes `variant`. The `variant` is always `default`. + * Optional buttons that will render below the text */ - secondaryButtonProps?: CustomConfirmButtonProps; + actions?: React.ReactNode; } export const State = { diff --git a/src/VerticalStepButtons/VerticalStepButtons.styles.tsx b/src/VerticalStepActions/VerticalStepActions.styles.tsx similarity index 100% rename from src/VerticalStepButtons/VerticalStepButtons.styles.tsx rename to src/VerticalStepActions/VerticalStepActions.styles.tsx diff --git a/src/VerticalStepActions/VerticalStepActions.tsx b/src/VerticalStepActions/VerticalStepActions.tsx new file mode 100644 index 0000000000..14c2d9aa5b --- /dev/null +++ b/src/VerticalStepActions/VerticalStepActions.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import { LGIDS_VERTICAL_STEPPER } from '../constants'; +import { State } from '../VerticalStep/VerticalStep.types'; + +import { + getBaseStyles, + getWrapperStyles, + innerStyles, +} from './VerticalStepActions.styles'; +import { VerticalStepActionsProps } from './VerticalStepActions.types'; + +export const VerticalStepActions = ({ + actions, + state, +}: VerticalStepActionsProps) => { + const isCurrent = state === State.Current; + + return ( +
    +
    +
    {actions}
    +
    +
    + ); +}; + +VerticalStepActions.displayName = 'VerticalStepActions'; diff --git a/src/VerticalStepButtons/VerticalStepButtons.types.ts b/src/VerticalStepActions/VerticalStepActions.types.ts similarity index 51% rename from src/VerticalStepButtons/VerticalStepButtons.types.ts rename to src/VerticalStepActions/VerticalStepActions.types.ts index febcc5bcca..6d7918175b 100644 --- a/src/VerticalStepButtons/VerticalStepButtons.types.ts +++ b/src/VerticalStepActions/VerticalStepActions.types.ts @@ -1,6 +1,6 @@ import { InternalVerticalStepProps } from '../VerticalStep/VerticalStep.types'; -export type VerticalStepperButtonProps = Pick< +export type VerticalStepActionsProps = Pick< InternalVerticalStepProps, - 'primaryButtonProps' | 'secondaryButtonProps' | 'state' + 'actions' | 'state' >; diff --git a/src/VerticalStepActions/index.ts b/src/VerticalStepActions/index.ts new file mode 100644 index 0000000000..297d0252b9 --- /dev/null +++ b/src/VerticalStepActions/index.ts @@ -0,0 +1 @@ +export { VerticalStepActions } from './VerticalStepActions'; diff --git a/src/VerticalStepButtons/VerticalStepButtons.tsx b/src/VerticalStepButtons/VerticalStepButtons.tsx deleted file mode 100644 index 6670533500..0000000000 --- a/src/VerticalStepButtons/VerticalStepButtons.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; - -import Button, { Size, Variant } from '@leafygreen-ui/button'; -import { cx } from '@leafygreen-ui/emotion'; - -import { LGIDS_VERTICAL_STEPPER } from '../constants'; -import { State } from '../VerticalStep/VerticalStep.types'; - -import { - getBaseStyles, - getWrapperStyles, - innerStyles, -} from './VerticalStepButtons.styles'; -import { VerticalStepperButtonProps } from './VerticalStepButtons.types'; - -export const VerticalStepButtons = ({ - primaryButtonProps, - secondaryButtonProps, - state, -}: VerticalStepperButtonProps) => { - const isCurrent = state === State.Current; - - return ( -
    -
    -
    - {primaryButtonProps && secondaryButtonProps && ( -
    -
    -
    - ); -}; - -VerticalStepButtons.displayName = 'VerticalStepButtons'; diff --git a/src/VerticalStepButtons/index.ts b/src/VerticalStepButtons/index.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/VerticalStepper.stories.tsx b/src/VerticalStepper.stories.tsx index e42ca2c292..9d2ddda096 100644 --- a/src/VerticalStepper.stories.tsx +++ b/src/VerticalStepper.stories.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { StoryMetaType } from '@lg-tools/storybook-utils'; import { StoryObj } from '@storybook/react'; +import Button, { Size, Variant } from '@leafygreen-ui/button'; import { Link } from '@leafygreen-ui/typography'; import { VerticalStep, VerticalStepper } from '.'; @@ -27,39 +28,55 @@ export default { Im a link } - primaryButtonProps={{ - children: 'primary button', - // eslint-disable-next-line no-console - onClick: () => console.log('click'), - }} + actions={ + + } />, + + + + } media={test} />, + + + + } media={test} />, primary button} />, primary button} media={test} />, Im a link } - primaryButtonProps={{ - children: 'primary button', - }} + actions={} />, + + + + } media={test} />, + + + + } media={test} />, primary button} />, primary button} media={test} />, ]; @@ -109,7 +116,7 @@ describe('packages/vertical-stepper', () => { primary button} media={test} /> , diff --git a/src/constants.ts b/src/constants.ts index cceb4ed92e..9dbfbe57df 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -6,6 +6,5 @@ export const LGIDS_VERTICAL_STEPPER = { stepTitle: `${LGID_ROOT}-step-title`, stepDescription: `${LGID_ROOT}-step-description`, stepMedia: `${LGID_ROOT}-step-media`, - stepPrimaryButton: `${LGID_ROOT}-step-primary_button`, - stepSecondaryButton: `${LGID_ROOT}-step-secondary_button`, + stepActions: `${LGID_ROOT}-step-actions`, } as const; From 7dfeff64455dc8a0e74e07052715be049e4e8c40 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 17 Jul 2024 19:35:45 +0000 Subject: [PATCH 07/16] Version Packages (#190) Co-authored-by: github-actions[bot] --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ba04c34a87..e3292344d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # @lg-private/vertical-stepper +## 2.0.0 + +### Major Changes + +- a3f1aa9: Replaces `primaryButtonProps` and `secondaryButtonProps` with `actions` prop to enable more flexibility for CTAs in each step + ## 1.1.0 ### Minor Changes diff --git a/package.json b/package.json index 4b4404e237..098777c909 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lg-private/vertical-stepper", - "version": "1.1.0", + "version": "2.0.0", "description": "LeafyGreen UI Kit Vertical Stepper", "main": "./dist/index.js", "module": "./dist/esm/index.js", From d0f04e98a1d422ecb26848a319ed8d5e93e3d6bd Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Wed, 24 Jul 2024 13:38:51 -0700 Subject: [PATCH 08/16] LG-4412: all sections render in card UI (#194) * Update Section styling and add optional renderInCard prop * FeatureOverview renders in card, handles children container, and removes custom storybook decorator * Templates always renders in card and export type Template * UseCases always renders in card * ActivationSteps type updates and remove storybook decorator * Export types for ActivationStep, Template, and UseCase * Changeset * LG-4413: vertical stepper always renders description and media (#195) * VerticalStepper always renders description and media * Changeset * Cleanup --- src/VerticalStep/InternalVerticalStep.tsx | 44 ++++++++++------------- src/VerticalStep/VerticalStep.styles.ts | 13 +------ 2 files changed, 19 insertions(+), 38 deletions(-) diff --git a/src/VerticalStep/InternalVerticalStep.tsx b/src/VerticalStep/InternalVerticalStep.tsx index 886abee0c2..aa4ca72a3e 100644 --- a/src/VerticalStep/InternalVerticalStep.tsx +++ b/src/VerticalStep/InternalVerticalStep.tsx @@ -13,7 +13,6 @@ import { baseStyles, contentClassName, getContentStyles, - getInnerStyles, getTitleStyles, getWrapperStyles, mediaStyles, @@ -72,32 +71,25 @@ export const InternalVerticalStep = React.forwardRef< > {title} - -
    -
    - + + {description} + + {media && ( +
    - {description} - - {media && ( -
    - {media} -
    - )} - {hasActions && ( - - )} -
    + {media} +
    + )} + {hasActions && ( + + )}
    • diff --git a/src/VerticalStep/VerticalStep.styles.ts b/src/VerticalStep/VerticalStep.styles.ts index 32dbe6ad13..dd31a31b9c 100644 --- a/src/VerticalStep/VerticalStep.styles.ts +++ b/src/VerticalStep/VerticalStep.styles.ts @@ -35,18 +35,7 @@ export const baseStyles = css` } `; -export const getWrapperStyles = (isCompleted = false) => css` - display: grid; - transition: grid-template-rows ${transitionDuration.slowest}ms ease-in-out; - grid-template-rows: 1fr; - - ${isCompleted && - css` - grid-template-rows: 0fr; - `} -`; - -export const getInnerStyles = (hasMedia = false) => css` +export const getWrapperStyles = (hasMedia = false) => css` overflow: hidden; padding-inline-start: ${spacing[200]}px; From 347c44abbaff45716986a023c755ed05f31d6028 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 27 Jul 2024 00:25:00 +0000 Subject: [PATCH 09/16] Version Packages (#197) Co-authored-by: github-actions[bot] --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e3292344d9..2b928ba883 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # @lg-private/vertical-stepper +## 2.1.0 + +### Minor Changes + +- dcab77e: [LG-4413](https://jira.mongodb.org/browse/LG-4413): VerticalStepper steps always render description and media regardless of current step + ## 2.0.0 ### Major Changes diff --git a/package.json b/package.json index 098777c909..bbfa7bf726 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lg-private/vertical-stepper", - "version": "2.0.0", + "version": "2.1.0", "description": "LeafyGreen UI Kit Vertical Stepper", "main": "./dist/index.js", "module": "./dist/esm/index.js", From 3d4ea1666f57321dfe6ab14d6ed7dd2c6418efc6 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Fri, 15 Nov 2024 10:52:43 -0800 Subject: [PATCH 10/16] LG-4670: feature walls component resizing (#294) * Update vertical stepper button layout on smaller breakpoints * Fix resizing in AccordionPanel * Fix resizing in ExpandableGrid * Feedback * height is always available --- .../VerticalStepActions.styles.tsx | 64 +++++++++++-------- 1 file changed, 39 insertions(+), 25 deletions(-) diff --git a/src/VerticalStepActions/VerticalStepActions.styles.tsx b/src/VerticalStepActions/VerticalStepActions.styles.tsx index ca643c59e9..86c1c447e9 100644 --- a/src/VerticalStepActions/VerticalStepActions.styles.tsx +++ b/src/VerticalStepActions/VerticalStepActions.styles.tsx @@ -1,33 +1,47 @@ -import { css } from '@leafygreen-ui/emotion'; -import { spacing, transitionDuration } from '@leafygreen-ui/tokens'; +import { css, cx } from '@leafygreen-ui/emotion'; +import { + breakpoints, + spacing, + transitionDuration, +} from '@leafygreen-ui/tokens'; export const innerStyles = css` overflow: hidden; `; -export const getBaseStyles = (isCurrent = false) => css` - display: grid; - transition: grid-template-rows ${transitionDuration.slowest}ms ease-in-out; - grid-template-rows: 0fr; - margin-inline-start: -${spacing[200]}px; +export const getBaseStyles = (isCurrent = false) => + cx( + css` + display: grid; + transition: grid-template-rows ${transitionDuration.slowest}ms ease-in-out; + grid-template-rows: 0fr; + margin-inline-start: -${spacing[200]}px; + `, + { + [css` + grid-template-rows: 1fr; + `]: isCurrent, + }, + ); - ${isCurrent && - css` - grid-template-rows: 1fr; - `} -`; - -export const getWrapperStyles = (isCurrent = false) => css` - padding-inline-start: ${spacing[200]}px; - padding-block-end: 0; - padding-block-start: ${spacing[200]}px; - transition: padding-block-end 400ms ease; +export const getWrapperStyles = (isCurrent = false) => + cx( + css` + padding-inline-start: ${spacing[200]}px; + padding-block-end: 0; + padding-block-start: ${spacing[200]}px; + transition: padding-block-end 400ms ease; - display: flex; - gap: ${spacing[200]}px; + display: flex; + gap: ${spacing[200]}px; - ${isCurrent && - css` - padding-block-end: ${spacing[200]}px; // Add padding in here so that hover states are not cut off by the overflow - `} -`; + @media (max-width: ${breakpoints.Tablet}px) { + flex-direction: column; + } + `, + { + [css` + padding-block-end: ${spacing[200]}px; // Add padding in here so that hover states are not cut off by the overflow + `]: isCurrent, + }, + ); From 39e4ac41f05116c4f2fcd6373062215cdd49d906 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 15 Nov 2024 13:09:51 -0800 Subject: [PATCH 11/16] Version Packages (#292) * Version Packages * Version next @lg-private/vertical-stepper and update changelogs --------- Co-authored-by: github-actions[bot] Co-authored-by: Stephen Lee --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2b928ba883..bf90438a12 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # @lg-private/vertical-stepper +## 2.1.1 + +### Patch Changes + +- 066c4ce: [LG-4670](https://jira.mongodb.org/browse/LG-4670): vertically stack buttons in `VerticalStepActions` on smaller breakpoints + ## 2.1.0 ### Minor Changes diff --git a/package.json b/package.json index bbfa7bf726..9d51890a91 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lg-private/vertical-stepper", - "version": "2.1.0", + "version": "2.1.1", "description": "LeafyGreen UI Kit Vertical Stepper", "main": "./dist/index.js", "module": "./dist/esm/index.js", From ba412a91dd3a1d487b5dcd8246b09ca19286bb08 Mon Sep 17 00:00:00 2001 From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com> Date: Thu, 9 Jan 2025 15:55:54 -0500 Subject: [PATCH 12/16] Updates Popover/Menu/Tooltip to TopLayer LG-4746 (#337) * bump other packages * major popover updates * bump provider * bump global provider * bump cli * rm popoverZIndex * Create forty-days-rest.md * Delete .eslintignore * update lg to latest major * Removes prop-types, and bump LG packages * lint * Update .eslintrc.js * update storybook @lg-tools/storybook-utils * lint --- package.json | 16 ++++++++-------- src/VerticalStep/VerticalStep.tsx | 8 -------- src/VerticalStepper/VerticalStepper.tsx | 11 +++-------- 3 files changed, 11 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 9d51890a91..97281463c3 100644 --- a/package.json +++ b/package.json @@ -15,17 +15,17 @@ "access": "public" }, "dependencies": { - "@leafygreen-ui/button": "^21.2.1", - "@leafygreen-ui/descendants": "^0.2.0", + "@leafygreen-ui/button": "^22.0.0", + "@leafygreen-ui/descendants": "^2.0.0", "@leafygreen-ui/emotion": "^4.0.8", - "@leafygreen-ui/icon": "^12.5.4", - "@leafygreen-ui/lib": "^13.6.0", - "@leafygreen-ui/palette": "^4.0.10", - "@leafygreen-ui/tokens": "^2.9.0", - "@leafygreen-ui/typography": "^19.2.0" + "@leafygreen-ui/icon": "^13.0.0", + "@leafygreen-ui/lib": "^14.0.0", + "@leafygreen-ui/palette": "^4.1.1", + "@leafygreen-ui/tokens": "^2.11.0", + "@leafygreen-ui/typography": "^20.0.0" }, "peerDependencies": { - "@leafygreen-ui/leafygreen-provider": "^3.1.12" + "@leafygreen-ui/leafygreen-provider": "^4.0.0" }, "devDependencies": { "@lg-tools/storybook-utils": "^0.1.1" diff --git a/src/VerticalStep/VerticalStep.tsx b/src/VerticalStep/VerticalStep.tsx index fa044e5004..b91fa56987 100644 --- a/src/VerticalStep/VerticalStep.tsx +++ b/src/VerticalStep/VerticalStep.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { useDescendant } from '@leafygreen-ui/descendants'; @@ -45,10 +44,3 @@ export const VerticalStep = React.forwardRef( ); VerticalStep.displayName = 'VerticalStep'; - -VerticalStep.prototype = { - title: PropTypes.string.isRequired, - description: PropTypes.node.isRequired, - media: PropTypes.element, - actions: PropTypes.node, -}; diff --git a/src/VerticalStepper/VerticalStepper.tsx b/src/VerticalStepper/VerticalStepper.tsx index 7df82c4233..bcddd8718c 100644 --- a/src/VerticalStepper/VerticalStepper.tsx +++ b/src/VerticalStepper/VerticalStepper.tsx @@ -1,5 +1,4 @@ import React, { useMemo } from 'react'; -import PropTypes from 'prop-types'; import { DescendantsProvider, @@ -36,7 +35,9 @@ export const VerticalStepper = React.forwardRef< const { darkMode } = useDarkMode(darkModeProp); const childrenLength = React.Children.toArray(children).length; - const { descendants, dispatch } = useInitDescendants(); + const { descendants, dispatch } = useInitDescendants( + VerticalStepperDescendantsContext, + ); const providerData = useMemo(() => { return { currentStep, hasVerticalStepperParent: true }; @@ -71,9 +72,3 @@ export const VerticalStepper = React.forwardRef< ); VerticalStepper.displayName = 'VerticalStepper'; - -VerticalStepper.propTypes = { - darkMode: PropTypes.bool, - currentStep: PropTypes.number.isRequired, - children: PropTypes.node.isRequired, -} as any; // avoid inferred types from interfering From d2c07646bbcd2a34f014a332082cd823cd22a06c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 21 Jan 2025 13:28:01 -0500 Subject: [PATCH 13/16] Version Packages (#343) Co-authored-by: github-actions[bot] --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bf90438a12..0f7d12fb87 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # @lg-private/vertical-stepper +## 3.0.0 + +### Major Changes + +- c9203f7: Removes `prop-types`. Updates LG core packages to latest + ## 2.1.1 ### Patch Changes diff --git a/package.json b/package.json index 97281463c3..8eb1edd23d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lg-private/vertical-stepper", - "version": "2.1.1", + "version": "3.0.0", "description": "LeafyGreen UI Kit Vertical Stepper", "main": "./dist/index.js", "module": "./dist/esm/index.js", From 0ecd65c0f3f3b9decdaa0680a149628c62b1795e Mon Sep 17 00:00:00 2001 From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com> Date: Wed, 18 Jun 2025 12:44:57 -0400 Subject: [PATCH 14/16] PNPM + Storybook 8 (private) (#426) * pnpm import * Delete yarn.lock * workflows * yarn -> pnpm docs * workspace:^ * add missing global packages * @storybook/test * story ts fixes * Adds missing peers * rm lg.json * bump base lg * fix product icon builds * fix sb * bump peer deps * rm pnpm/action-setup@v4 * Revert "rm pnpm/action-setup@v4" This reverts commit 14198eb258e958ddaa0e480fee17cfddec5ce6fd. * Update pnpm-lock.yaml * apk * apk all * wget * restore pnpm * specific pnpm action * workspace * lint fix * tools @ latest * minor lint errors * tools build dev deps * typescript * tsconfig * package exports * ts fixes * Create rollup.config.mjs * lint * checkout main src * ts fixes * lint * isolated async tests * Update CloudNav.analytics.spec.tsx * skip mongonav tests * feature walls tests * Create rollup.config.mjs * lint fix * Update pr.yml * Update release.yml * cache/restore * chromatic + pnpm * update cache restore paths * cache save path * addon 0.5.2-next.0 * addon 0.5.2-next.2 --- package.json | 14 +++++++++++--- tsconfig.json | 6 +++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 8eb1edd23d..188c9783cd 100644 --- a/package.json +++ b/package.json @@ -2,9 +2,16 @@ "name": "@lg-private/vertical-stepper", "version": "3.0.0", "description": "LeafyGreen UI Kit Vertical Stepper", - "main": "./dist/index.js", + "main": "./dist/umd/index.js", "module": "./dist/esm/index.js", - "types": "./dist/index.d.ts", + "types": "./dist/types/index.d.ts", + "exports": { + ".": { + "require": "./dist/umd/index.js", + "import": "./dist/esm/index.js", + "types": "./dist/types/index.d.ts" + } + }, "license": "Apache-2.0", "scripts": { "build": "lg build-package", @@ -28,7 +35,8 @@ "@leafygreen-ui/leafygreen-provider": "^4.0.0" }, "devDependencies": { - "@lg-tools/storybook-utils": "^0.1.1" + "@lg-tools/build": "0.8.0", + "@lg-tools/storybook-utils": "^0.3.0" }, "homepage": "https://github.com/10gen/leafygreen-ui-private/tree/main/packages/vertical-stepper", "repository": { diff --git a/tsconfig.json b/tsconfig.json index 383f3302b3..658ef3acd3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,9 +1,9 @@ { "extends": "@lg-tools/build/config/package.tsconfig.json", "compilerOptions": { - "declarationDir": "dist", - "outDir": "dist", - "rootDir": "src" + "paths": { + "@lg-private/*": ["../*/src"] + } }, "include": ["src/**/*"], "exclude": ["**/*.spec.*", "**/*.story.*"], From 87eb2022c35b83fe773e8638704a60c5d27629d3 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Mon, 29 Sep 2025 16:05:54 -0700 Subject: [PATCH 15/16] chore(vertical-stepper): move from @lg-private to @leafygreen-ui scope --- README.md | 1 + packages/vertical-stepper/CHANGELOG.md | 6 ++- packages/vertical-stepper/README.md | 8 ++-- packages/vertical-stepper/package.json | 28 ++++++------- .../src/StepIcon/StepIcon.tsx | 1 - .../src/VerticalStepper.stories.tsx | 2 +- packages/vertical-stepper/tsconfig.json | 39 +++++++++++++++++-- pnpm-lock.yaml | 37 ++++++++++++++++++ tools/install/src/ALL_PACKAGES.ts | 1 + 9 files changed, 99 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 030a3b95f7..111b375d89 100644 --- a/README.md +++ b/README.md @@ -141,6 +141,7 @@ import Button from '@leafygreen-ui/button'; | [@leafygreen-ui/toolbar](./packages/toolbar) | [![version](https://img.shields.io/npm/v/@leafygreen-ui/toolbar)](https://www.npmjs.com/package/@leafygreen-ui/toolbar) | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/toolbar?color=white) | [Live Example](http://mongodb.design/component/toolbar/live-example) | | [@leafygreen-ui/tooltip](./packages/tooltip) | [![version](https://img.shields.io/npm/v/@leafygreen-ui/tooltip)](https://www.npmjs.com/package/@leafygreen-ui/tooltip) | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/tooltip?color=white) | [Live Example](http://mongodb.design/component/tooltip/live-example) | | [@leafygreen-ui/typography](./packages/typography) | [![version](https://img.shields.io/npm/v/@leafygreen-ui/typography)](https://www.npmjs.com/package/@leafygreen-ui/typography) | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/typography?color=white) | [Live Example](http://mongodb.design/component/typography/live-example) | +| [@leafygreen-ui/vertical-stepper](./packages/vertical-stepper) | [![version](https://img.shields.io/npm/v/@leafygreen-ui/vertical-stepper)](https://www.npmjs.com/package/@leafygreen-ui/vertical-stepper) | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/vertical-stepper?color=white) | [Live Example](http://mongodb.design/component/vertical-stepper/live-example) | | [@lg-charts/chart-card](./charts/chart-card) | [![version](https://img.shields.io/npm/v/@lg-charts/chart-card)](https://www.npmjs.com/package/@lg-charts/chart-card) | ![downloads](https://img.shields.io/npm/dm/@lg-charts/chart-card?color=white) | [Live Example](http://mongodb.design/component/chart-card/live-example) | | [@lg-charts/colors](./charts/colors) | [![version](https://img.shields.io/npm/v/@lg-charts/colors)](https://www.npmjs.com/package/@lg-charts/colors) | ![downloads](https://img.shields.io/npm/dm/@lg-charts/colors?color=white) | [Live Example](http://mongodb.design/component/colors/live-example) | | [@lg-charts/core](./charts/core) | [![version](https://img.shields.io/npm/v/@lg-charts/core)](https://www.npmjs.com/package/@lg-charts/core) | ![downloads](https://img.shields.io/npm/dm/@lg-charts/core?color=white) | [Live Example](http://mongodb.design/component/core/live-example) | diff --git a/packages/vertical-stepper/CHANGELOG.md b/packages/vertical-stepper/CHANGELOG.md index 0f7d12fb87..384d4b2c88 100644 --- a/packages/vertical-stepper/CHANGELOG.md +++ b/packages/vertical-stepper/CHANGELOG.md @@ -1,9 +1,13 @@ -# @lg-private/vertical-stepper +# @leafygreen-ui/vertical-stepper ## 3.0.0 ### Major Changes +- **Package has been renamed and moved!** This package is now published under the `@leafygreen-ui` scope. All dependencies and import paths must be updated from `@lg-private/vertical-stepper` to `@leafygreen-ui/vertical-stepper`. + +### Major Changes + - c9203f7: Removes `prop-types`. Updates LG core packages to latest ## 2.1.1 diff --git a/packages/vertical-stepper/README.md b/packages/vertical-stepper/README.md index 5751f94f59..827c037b34 100644 --- a/packages/vertical-stepper/README.md +++ b/packages/vertical-stepper/README.md @@ -1,6 +1,6 @@ # Vertical Stepper -![npm (scoped)](https://img.shields.io/npm/v/@lg-private/vertical-stepper.svg) +![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/vertical-stepper.svg) #### [View on MongoDB.design](https://www.mongodb.design/component/vertical-stepper/example/) @@ -9,20 +9,20 @@ ### Yarn ```shell -yarn add @lg-private/vertical-stepper +yarn add @leafygreen-ui/vertical-stepper ``` ### NPM ```shell -npm install @lg-private/vertical-stepper +npm install @leafygreen-ui/vertical-stepper ``` ## Example ```js import Button, { Size, Variant } from `@leafygreen-ui/button`; -import { VerticalStepper, VerticalStep } from `@lg-private/vertical-stepper`; +import { VerticalStepper, VerticalStep } from `@leafygreen-ui/vertical-stepper`; const [currentStep, setCurrentStep] = useState(0); diff --git a/packages/vertical-stepper/package.json b/packages/vertical-stepper/package.json index 188c9783cd..3ff801e128 100644 --- a/packages/vertical-stepper/package.json +++ b/packages/vertical-stepper/package.json @@ -1,5 +1,5 @@ { - "name": "@lg-private/vertical-stepper", + "name": "@leafygreen-ui/vertical-stepper", "version": "3.0.0", "description": "LeafyGreen UI Kit Vertical Stepper", "main": "./dist/umd/index.js", @@ -22,26 +22,26 @@ "access": "public" }, "dependencies": { - "@leafygreen-ui/button": "^22.0.0", - "@leafygreen-ui/descendants": "^2.0.0", - "@leafygreen-ui/emotion": "^4.0.8", - "@leafygreen-ui/icon": "^13.0.0", - "@leafygreen-ui/lib": "^14.0.0", - "@leafygreen-ui/palette": "^4.1.1", - "@leafygreen-ui/tokens": "^2.11.0", - "@leafygreen-ui/typography": "^20.0.0" + "@leafygreen-ui/button": "workspace:^", + "@leafygreen-ui/descendants": "workspace:^", + "@leafygreen-ui/emotion": "workspace:^", + "@leafygreen-ui/icon": "workspace:^", + "@leafygreen-ui/lib": "workspace:^", + "@leafygreen-ui/palette": "workspace:^", + "@leafygreen-ui/tokens": "workspace:^", + "@leafygreen-ui/typography": "workspace:^" }, "peerDependencies": { - "@leafygreen-ui/leafygreen-provider": "^4.0.0" + "@leafygreen-ui/leafygreen-provider": "workspace:^" }, "devDependencies": { - "@lg-tools/build": "0.8.0", - "@lg-tools/storybook-utils": "^0.3.0" + "@lg-tools/build": "workspace:^", + "@lg-tools/storybook-utils": "workspace:^" }, - "homepage": "https://github.com/10gen/leafygreen-ui-private/tree/main/packages/vertical-stepper", + "homepage": "https://github.com/10gen/leafygreen-ui/tree/main/packages/vertical-stepper", "repository": { "type": "git", - "url": "https://github.com/10gen/leafygreen-ui-private" + "url": "https://github.com/10gen/leafygreen-ui" }, "bugs": { "url": "https://jira.mongodb.org/projects/PD/summary" diff --git a/packages/vertical-stepper/src/StepIcon/StepIcon.tsx b/packages/vertical-stepper/src/StepIcon/StepIcon.tsx index 9504d27c66..563c8700c1 100644 --- a/packages/vertical-stepper/src/StepIcon/StepIcon.tsx +++ b/packages/vertical-stepper/src/StepIcon/StepIcon.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { cx } from '@leafygreen-ui/emotion'; -// @ts-expect-error - Could not find a declaration file import CheckmarkIcon from '@leafygreen-ui/icon/dist/Checkmark'; import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; diff --git a/packages/vertical-stepper/src/VerticalStepper.stories.tsx b/packages/vertical-stepper/src/VerticalStepper.stories.tsx index 9d2ddda096..249a705746 100644 --- a/packages/vertical-stepper/src/VerticalStepper.stories.tsx +++ b/packages/vertical-stepper/src/VerticalStepper.stories.tsx @@ -8,7 +8,7 @@ import { Link } from '@leafygreen-ui/typography'; import { VerticalStep, VerticalStepper } from '.'; export default { - title: 'Components/VerticalStepper', + title: 'Composition/Data Display/VerticalStepper', component: VerticalStepper, parameters: { default: 'LiveExample', diff --git a/packages/vertical-stepper/tsconfig.json b/packages/vertical-stepper/tsconfig.json index 658ef3acd3..f8088449c0 100644 --- a/packages/vertical-stepper/tsconfig.json +++ b/packages/vertical-stepper/tsconfig.json @@ -2,10 +2,43 @@ "extends": "@lg-tools/build/config/package.tsconfig.json", "compilerOptions": { "paths": { - "@lg-private/*": ["../*/src"] + "@leafygreen-ui/icon/dist/*": [ + "../icon/src/generated/*" + ], + "@leafygreen-ui/*": [ + "../*/src" + ] } }, "include": ["src/**/*"], - "exclude": ["**/*.spec.*", "**/*.story.*"], - "references": [] + "exclude": ["**/*.stories.*"], + "references": [ + { + "path": "../button" + }, + { + "path": "../descendants" + }, + { + "path": "../emotion" + }, + { + "path": "../icon" + }, + { + "path": "../leafygreen-provider" + }, + { + "path": "../lib" + }, + { + "path": "../palette" + }, + { + "path": "../tokens" + }, + { + "path": "../typography" + } + ] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b353d9ba05..a10e6d7287 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3753,6 +3753,43 @@ importers: specifier: workspace:^ version: link:../../tools/build + packages/vertical-stepper: + dependencies: + '@leafygreen-ui/button': + specifier: workspace:^ + version: link:../button + '@leafygreen-ui/descendants': + specifier: workspace:^ + version: link:../descendants + '@leafygreen-ui/emotion': + specifier: workspace:^ + version: link:../emotion + '@leafygreen-ui/icon': + specifier: workspace:^ + version: link:../icon + '@leafygreen-ui/leafygreen-provider': + specifier: workspace:^ + version: link:../leafygreen-provider + '@leafygreen-ui/lib': + specifier: workspace:^ + version: link:../lib + '@leafygreen-ui/palette': + specifier: workspace:^ + version: link:../palette + '@leafygreen-ui/tokens': + specifier: workspace:^ + version: link:../tokens + '@leafygreen-ui/typography': + specifier: workspace:^ + version: link:../typography + devDependencies: + '@lg-tools/build': + specifier: workspace:^ + version: link:../../tools/build + '@lg-tools/storybook-utils': + specifier: workspace:^ + version: link:../../tools/storybook-utils + tools/build: dependencies: '@babel/core': diff --git a/tools/install/src/ALL_PACKAGES.ts b/tools/install/src/ALL_PACKAGES.ts index 7ee8b6b4de..6ee2eddfcc 100644 --- a/tools/install/src/ALL_PACKAGES.ts +++ b/tools/install/src/ALL_PACKAGES.ts @@ -76,6 +76,7 @@ export const ALL_PACKAGES = [ '@leafygreen-ui/toolbar', '@leafygreen-ui/tooltip', '@leafygreen-ui/typography', + '@leafygreen-ui/vertical-stepper', '@lg-charts/chart-card', '@lg-charts/colors', '@lg-charts/core', From fac5f9e53cf4edd276106b35e6ef0424b90a9d55 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Tue, 30 Sep 2025 12:37:27 -0700 Subject: [PATCH 16/16] chore(vertical-stepper): disable snapshot of LiveExample story --- packages/vertical-stepper/src/VerticalStepper.stories.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/vertical-stepper/src/VerticalStepper.stories.tsx b/packages/vertical-stepper/src/VerticalStepper.stories.tsx index 249a705746..71a76bd1ed 100644 --- a/packages/vertical-stepper/src/VerticalStepper.stories.tsx +++ b/packages/vertical-stepper/src/VerticalStepper.stories.tsx @@ -102,6 +102,11 @@ export default { export const LiveExample = { render: ({ ...args }) => , + parameters: { + chromatic: { + disableSnapshot: true, + }, + }, } satisfies StoryObj; export const Generated = {