-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update Steps to array of objects (#3761)
* Update Workflow Step and Steps types and id logic * add test coverage for progress stepper * update stepper controls story for better DX * add sr only colon to title for better screen reader experience * update docs on how progress is maintained * add changeset * revert changes for Workflow steps * add future version of workflow with breaking change * delete example component * update future and legacy docs and changeset * fix stories that were broken when reverting to previous version * add JSDoc @deprecated to original Workflow export * add @deprecated JSDoc on the old workflow and update legacy prompt in docs --------- Co-authored-by: Geoffrey Chong <gyfchong@users.noreply.github.com>
- Loading branch information
1 parent
d3968f5
commit 41a305d
Showing
58 changed files
with
1,755 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| --- | ||
| "@kaizen/components": minor | ||
| --- | ||
|
|
||
| Create /future release for Workflow component that updates Steps to array of objects and stepName to currentStepId | ||
| - updates the stepName to currentStepId | ||
| - updates steps from non-empty array of strings to non-empty array of Steps | ||
| - exports Step and Steps types for convenience in consuming repos | ||
| - refactor Workflow to use the new type and id to reference active steps from array | ||
| - adds test coverage to ProgressStepper and improve docs |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 0 additions & 3 deletions
3
packages/components/src/__future__/ExampleComponent/ExampleComponent.module.scss
This file was deleted.
Oops, something went wrong.
12 changes: 0 additions & 12 deletions
12
packages/components/src/__future__/ExampleComponent/ExampleComponent.spec.tsx
This file was deleted.
Oops, something went wrong.
29 changes: 0 additions & 29 deletions
29
packages/components/src/__future__/ExampleComponent/ExampleComponent.tsx
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React, { HTMLAttributes } from "react" | ||
| import { OverrideClassName } from "~types/OverrideClassName" | ||
| import { | ||
| Footer, | ||
| FooterProps, | ||
| Header, | ||
| Main, | ||
| HeaderProps, | ||
| ProgressStepper, | ||
| Wrapper, | ||
| } from "./subcomponents" | ||
|
|
||
| export type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & | ||
| FooterProps & | ||
| Pick<HeaderProps, "workflowName" | "status" | "headerActions"> | ||
|
|
||
| const WorkflowComponent = ({ | ||
| steps, | ||
| currentStepId, | ||
| isComplete, | ||
| workflowName, | ||
| status, | ||
| headerActions, | ||
| children, | ||
| nextAction, | ||
| previousAction, | ||
| classNameOverride, | ||
| ...restProps | ||
| }: WorkflowProps): JSX.Element => { | ||
| const currentStep = steps.find(step => step.id === currentStepId) | ||
| return ( | ||
| <Workflow.Wrapper classNameOverride={classNameOverride} {...restProps}> | ||
| <Workflow.Header | ||
| workflowName={workflowName} | ||
| stepName={currentStep!.label} | ||
| status={status} | ||
| headerActions={headerActions} | ||
| /> | ||
| <Workflow.Main>{children}</Workflow.Main> | ||
| <Workflow.Footer | ||
| currentStepId={currentStepId} | ||
| steps={steps} | ||
| isComplete={isComplete} | ||
| nextAction={nextAction} | ||
| previousAction={previousAction} | ||
| /> | ||
| </Workflow.Wrapper> | ||
| ) | ||
| } | ||
|
|
||
| export const Workflow = Object.assign(WorkflowComponent, { | ||
| Header, | ||
| Footer, | ||
| Main, | ||
| ProgressStepper, | ||
| Wrapper, | ||
| }) |
137 changes: 137 additions & 0 deletions
137
packages/components/src/__future__/Workflow/_docs/ProgressStepper.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| import React from "react" | ||
| import { Meta, StoryFn } from "@storybook/react" | ||
| import { ComponentDocsTemplate } from "../../../../../../storybook/components/DocsContainer" | ||
| import { ProgressStepperProps } from "../subcomponents" | ||
| import { Workflow } from "../" | ||
| import { WorkflowControls } from "./controls" | ||
|
|
||
| const defaultArgs = { | ||
| currentStepId: "preview-step", | ||
| steps: [ | ||
| { label: "Settings", id: "settings-step" }, | ||
| { label: "Questions", id: "questions-step" }, | ||
| { label: "Preview", id: "preview-step" }, | ||
| { label: "Employees", id: "employees-step" }, | ||
| { label: "Schedule", id: "schedule-step" }, | ||
| ], | ||
| isComplete: false, | ||
| } satisfies ProgressStepperProps | ||
|
|
||
| const meta = { | ||
| tags: ["autodocs"], | ||
| title: "Pages/Workflow/Components/Progress Stepper", | ||
| component: Workflow.ProgressStepper, | ||
| parameters: { | ||
| docs: { | ||
| source: { type: "code" }, | ||
| container: ComponentDocsTemplate, | ||
| }, | ||
| installation: [ | ||
| "yarn add @kaizen/workflow", | ||
| "import { ProgressStepper } from `@kaizen/components/future`", | ||
| ], | ||
| resourceLinks: { | ||
| sourceCode: | ||
| "https://github.com/cultureamp/kaizen-design-system/tree/main/packages/workflow/", | ||
| figma: | ||
| "https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1", | ||
| /** @todo (optional): Add Confluence link */ | ||
| designGuidelines: | ||
| "https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation", | ||
| }, | ||
| }, | ||
| argTypes: { | ||
| currentStepId: WorkflowControls.currentStepId, | ||
| }, | ||
| } satisfies Meta<typeof Workflow.ProgressStepper> | ||
|
|
||
| export default meta | ||
|
|
||
| /** | ||
| * <p>This component is used in the `Footer` to track progress of the Workflows steps.</p> | ||
| * <p>It has no reverse variant and should only be used in the Worflow's `Footer` component.</p> | ||
| */ | ||
| export const Playground: StoryFn<ProgressStepperProps> = ({ | ||
| currentStepId, | ||
| steps, | ||
| isComplete, | ||
| ...restProps | ||
| }) => ( | ||
| <div className="bg-blue-500 p-8"> | ||
| <Workflow.ProgressStepper | ||
| currentStepId={currentStepId} | ||
| steps={steps} | ||
| isComplete={isComplete} | ||
| {...restProps} | ||
| /> | ||
| </div> | ||
| ) | ||
|
|
||
| Playground.args = { ...defaultArgs } | ||
|
|
||
| const VariantTemplate: StoryFn<ProgressStepperProps> = ({ | ||
| currentStepId, | ||
| steps, | ||
| isComplete, | ||
| ...restProps | ||
| }) => ( | ||
| <div className="bg-blue-500 p-8"> | ||
| <Workflow.ProgressStepper | ||
| currentStepId={currentStepId} | ||
| steps={steps} | ||
| isComplete={isComplete} | ||
| {...restProps} | ||
| /> | ||
| </div> | ||
| ) | ||
|
|
||
| /** <p>To ensure WCAG AA compliance, there are 3 visually destinct states.</p> | ||
| * <p>These are reflected in their accessible names for screen reader: "Completed", "Current" and "Not started"</p> | ||
| */ | ||
| export const ProgressStates = VariantTemplate.bind({}) | ||
|
|
||
| ProgressStates.args = { | ||
| currentStepId: "questions-step", | ||
| steps: defaultArgs.steps, | ||
| isComplete: false, | ||
| } | ||
|
|
||
| /** | ||
| * <p>You can use the `isComplete` follow a successful submission to render all steps as complete.</p> | ||
| */ | ||
| export const AllStepsComplete = VariantTemplate.bind({}) | ||
|
|
||
| AllStepsComplete.args = { | ||
| currentStepId: "schedule-step", | ||
| steps: defaultArgs.steps, | ||
| isComplete: true, | ||
| } | ||
|
|
||
| export const FewerSteps = VariantTemplate.bind({}) | ||
|
|
||
| FewerSteps.args = { | ||
| currentStepId: "questions-step", | ||
| steps: [ | ||
| { label: "Settings", id: "settings-step" }, | ||
| { label: "Questions", id: "questions-step" }, | ||
| { label: "Preview", id: "preview-step" }, | ||
| ], | ||
| isComplete: false, | ||
| } | ||
|
|
||
| /** | ||
| * <p>We have baked in a container query to ensure the component can be responsive.</p> | ||
| * <p>When a step reaches its minimum size (4.5rem), it will hide the display name to maximise realestate.</p> | ||
| */ | ||
| export const SevenSteps = VariantTemplate.bind({}) | ||
|
|
||
| SevenSteps.args = { | ||
| currentStepId: "questions-step", | ||
| steps: [ | ||
| ...defaultArgs.steps, | ||
| { label: "Plan", id: "plan-step" }, | ||
| { label: "Provision", id: "provision-step" }, | ||
| { label: "Procure", id: "procure-step" }, | ||
| ], | ||
| isComplete: false, | ||
| } |
Oops, something went wrong.