From 2d34341ea9e6d8c28af80645e6bef3cd60cb8f8e Mon Sep 17 00:00:00 2001 From: Doug MacKenzie Date: Fri, 30 Aug 2024 09:03:53 +1000 Subject: [PATCH] feat(Workflow): Create v3 Workflow (#4978) * feat(Workflow): Create v3 Workflow * Update story names to include Workflow name alongside version * Add package.json files for new layout category * Add deprecate docblocks to v1 and v2 * Update page title to use composable-header-title Heading variant * Adjust status prop in Header to allow ReactNode * Convert all sass to css in v3 * Rename status prop to statusTag * Update import statements * Delete KaioLegacyDocsNotification * Remove background decorator on v3 footer story --- .changeset/thin-bulldogs-carry.md | 10 + .../KaioLegacyDocsNotification.tsx | 17 -- .../KaioLegacyDocsNotification/index.ts | 1 - docs/components/index.ts | 1 - packages/components/rollup.config.mjs | 3 + .../src/__future__/Workflow/index.ts | 1 - packages/components/src/__future__/index.ts | 2 +- .../Workflow/v1}/Workflow.tsx | 0 .../Workflow/v1}/_docs/ProgressStepper.mdx | 9 +- .../v1}/_docs/ProgressStepper.stories.tsx | 2 +- .../Workflow/v1}/_docs/Workflow.mdx | 13 +- .../Workflow/v1}/_docs/Workflow.stories.tsx | 2 +- .../Workflow/v1}/_docs/WorkflowFooter.mdx | 10 +- .../v1}/_docs/WorkflowFooter.stories.tsx | 2 +- .../Workflow/v1}/_docs/WorkflowHeader.mdx | 10 +- .../v1}/_docs/WorkflowHeader.stories.tsx | 2 +- .../Workflow/v1}/_docs/controls/controls.tsx | 0 .../Workflow/v1}/_docs/controls/index.tsx | 0 .../src/__layout__/Workflow/v1/index.ts | 10 + .../v1}/subcomponents/Footer/Footer.tsx | 0 .../FooterActions/FooterActions.module.scss | 0 .../FooterActions/FooterActions.tsx | 0 .../Footer/components/FooterActions/index.ts | 0 .../ProgressStepper.module.scss | 0 .../ProgressStepper/ProgressStepper.tsx | 0 .../components/ProgressStepper/index.ts | 0 .../components/Root/FooterRoot.module.scss | 0 .../Footer/components/Root/Root.tsx | 0 .../Footer/components/Root/index.ts | 0 .../subcomponents/Footer/components/index.ts | 0 .../v1}/subcomponents/Footer/index.ts | 0 .../v1}/subcomponents/Header/Header.tsx | 0 .../components/Actions/Actions.module.scss | 0 .../Header/components/Actions/Actions.tsx | 0 .../Header/components/Actions/index.ts | 0 .../components/Branding/Branding.module.scss | 0 .../Header/components/Branding/Branding.tsx | 0 .../Header/components/Branding/index.ts | 0 .../Header/components/Root/Root.module.scss | 0 .../Header/components/Root/Root.tsx | 0 .../Header/components/Root/index.tsx | 0 .../components/Titles/Titles.module.scss | 0 .../Header/components/Titles/Titles.tsx | 0 .../Header/components/Titles/index.ts | 0 .../subcomponents/Header/components/index.ts | 0 .../v1}/subcomponents/Header/index.ts | 0 .../v1}/subcomponents/Main/Main.module.scss | 0 .../Workflow/v1}/subcomponents/Main/Main.tsx | 0 .../Workflow/v1}/subcomponents/Main/index.tsx | 0 .../subcomponents/Wrapper/Wrapper.module.scss | 0 .../v1}/subcomponents/Wrapper/Wrapper.tsx | 0 .../v1}/subcomponents/Wrapper/index.ts | 0 .../Workflow/v1}/subcomponents/index.ts | 0 .../Workflow/v2}/Workflow.tsx | 0 .../Workflow/v2}/_docs/ProgressStepper.mdx | 13 +- .../v2}/_docs/ProgressStepper.stories.tsx | 2 +- .../Workflow/v2}/_docs/Workflow.mdx | 10 +- .../Workflow/v2}/_docs/Workflow.stories.tsx | 2 +- .../Workflow/v2}/_docs/WorkflowFooter.mdx | 13 +- .../v2}/_docs/WorkflowFooter.stories.tsx | 2 +- .../Workflow/v2}/_docs/WorkflowHeader.mdx | 13 +- .../v2}/_docs/WorkflowHeader.stories.tsx | 2 +- .../Workflow/v2}/_docs/controls/controls.tsx | 0 .../Workflow/v2}/_docs/controls/index.tsx | 0 .../src/__layout__/Workflow/v2/index.ts | 10 + .../v2}/subcomponents/Footer/Footer.tsx | 0 .../FooterActions/FooterActions.module.scss | 0 .../FooterActions/FooterActions.tsx | 0 .../Footer/components/FooterActions/index.ts | 0 .../ProgressStepper.module.scss | 0 .../ProgressStepper/ProgressStepper.spec.tsx | 0 .../ProgressStepper/ProgressStepper.tsx | 0 .../components/ProgressStepper/index.ts | 0 .../components/Root/FooterRoot.module.scss | 0 .../Footer/components/Root/Root.tsx | 0 .../Footer/components/Root/index.ts | 0 .../subcomponents/Footer/components/index.ts | 0 .../v2}/subcomponents/Footer/index.ts | 0 .../v2}/subcomponents/Header/Header.tsx | 0 .../components/Actions/Actions.module.scss | 0 .../Header/components/Actions/Actions.tsx | 0 .../Header/components/Actions/index.ts | 0 .../components/Branding/Branding.module.scss | 0 .../Header/components/Branding/Branding.tsx | 0 .../Header/components/Branding/index.ts | 0 .../Header/components/Root/Root.module.scss | 0 .../Header/components/Root/Root.tsx | 0 .../Header/components/Root/index.tsx | 0 .../components/Titles/Titles.module.scss | 0 .../Header/components/Titles/Titles.tsx | 0 .../Header/components/Titles/index.ts | 0 .../subcomponents/Header/components/index.ts | 0 .../v2}/subcomponents/Header/index.ts | 0 .../v2}/subcomponents/Main/Main.module.scss | 0 .../Workflow/v2}/subcomponents/Main/Main.tsx | 0 .../Workflow/v2}/subcomponents/Main/index.tsx | 0 .../subcomponents/Wrapper/Wrapper.module.scss | 0 .../v2}/subcomponents/Wrapper/Wrapper.tsx | 0 .../v2}/subcomponents/Wrapper/index.ts | 0 .../Workflow/v2}/subcomponents/index.ts | 0 .../src/__layout__/Workflow/v3/Workflow.tsx | 55 ++++++ .../Workflow/v3/_docs/ProgressStepper.mdx | 37 ++++ .../v3/_docs/ProgressStepper.stories.tsx | 86 +++++++++ .../__layout__/Workflow/v3/_docs/Workflow.mdx | 165 +++++++++++++++++ .../Workflow/v3/_docs/Workflow.stories.tsx | 172 ++++++++++++++++++ .../Workflow/v3/_docs/WorkflowFooter.mdx | 38 ++++ .../v3/_docs/WorkflowFooter.stories.tsx | 95 ++++++++++ .../Workflow/v3/_docs/WorkflowHeader.mdx | 28 +++ .../v3/_docs/WorkflowHeader.stories.tsx | 68 +++++++ .../Workflow/v3/_docs/controls/controls.tsx | 93 ++++++++++ .../Workflow/v3/_docs/controls/index.tsx | 1 + .../Workflow/v3}/index.ts | 0 .../v3/subcomponents/Footer/Footer.tsx | 38 ++++ .../FooterActions/FooterActions.module.css | 15 ++ .../FooterActions/FooterActions.tsx | 28 +++ .../Footer/components/FooterActions/index.ts | 1 + .../ProgressStepper.module.css | 110 +++++++++++ .../ProgressStepper/ProgressStepper.spec.tsx | 45 +++++ .../ProgressStepper/ProgressStepper.tsx | 154 ++++++++++++++++ .../components/ProgressStepper/index.ts | 1 + .../components/Root/FooterRoot.module.css | 19 ++ .../Footer/components/Root/Root.tsx | 23 +++ .../Footer/components/Root/index.ts | 1 + .../subcomponents/Footer/components/index.ts | 3 + .../Workflow/v3/subcomponents/Footer/index.ts | 2 + .../v3/subcomponents/Header/Header.tsx | 31 ++++ .../components/Actions/Actions.module.css | 15 ++ .../Header/components/Actions/Actions.tsx | 24 +++ .../Header/components/Actions/index.ts | 1 + .../components/Branding/Branding.module.css | 15 ++ .../Header/components/Branding/Branding.tsx | 20 ++ .../Header/components/Branding/index.ts | 1 + .../Header/components/Root/Root.module.css | 20 ++ .../Header/components/Root/Root.tsx | 20 ++ .../Header/components/Root/index.tsx | 1 + .../components/Titles/Titles.module.css | 21 +++ .../Header/components/Titles/Titles.tsx | 44 +++++ .../Header/components/Titles/index.ts | 1 + .../subcomponents/Header/components/index.ts | 4 + .../Workflow/v3/subcomponents/Header/index.ts | 2 + .../v3/subcomponents/Main/Main.module.css | 4 + .../Workflow/v3/subcomponents/Main/Main.tsx | 22 +++ .../Workflow/v3/subcomponents/Main/index.tsx | 1 + .../subcomponents/Wrapper/Wrapper.module.css | 7 + .../v3/subcomponents/Wrapper/Wrapper.tsx | 22 +++ .../v3/subcomponents/Wrapper/index.ts | 1 + .../Workflow/v3/subcomponents/index.ts | 4 + packages/components/src/__layout__/v1.ts | 1 + packages/components/src/__layout__/v2.ts | 1 + packages/components/src/__layout__/v3.ts | 1 + packages/components/src/index.ts | 2 +- packages/components/v1/layout/package.json | 5 + packages/components/v2/layout/package.json | 5 + packages/components/v3/layout/package.json | 5 + 154 files changed, 1660 insertions(+), 81 deletions(-) create mode 100644 .changeset/thin-bulldogs-carry.md delete mode 100644 docs/components/KaioLegacyDocsNotification/KaioLegacyDocsNotification.tsx delete mode 100644 docs/components/KaioLegacyDocsNotification/index.ts delete mode 100644 packages/components/src/__future__/Workflow/index.ts rename packages/components/src/{Workflow => __layout__/Workflow/v1}/Workflow.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v1}/_docs/ProgressStepper.mdx (84%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/_docs/ProgressStepper.stories.tsx (96%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/_docs/Workflow.mdx (92%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/_docs/Workflow.stories.tsx (98%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v1}/_docs/WorkflowFooter.mdx (83%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/_docs/WorkflowFooter.stories.tsx (96%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v1}/_docs/WorkflowHeader.mdx (78%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/_docs/WorkflowHeader.stories.tsx (96%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/_docs/controls/controls.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/_docs/controls/index.tsx (100%) create mode 100644 packages/components/src/__layout__/Workflow/v1/index.ts rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Footer/Footer.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Footer/components/FooterActions/FooterActions.module.scss (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Footer/components/FooterActions/FooterActions.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Footer/components/FooterActions/index.ts (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Footer/components/ProgressStepper/index.ts (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Footer/components/Root/FooterRoot.module.scss (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Footer/components/Root/Root.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Footer/components/Root/index.ts (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Footer/components/index.ts (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Footer/index.ts (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/Header.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/components/Actions/Actions.module.scss (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/components/Actions/Actions.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/components/Actions/index.ts (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/components/Branding/Branding.module.scss (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/components/Branding/Branding.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/components/Branding/index.ts (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/components/Root/Root.module.scss (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/components/Root/Root.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/components/Root/index.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/components/Titles/Titles.module.scss (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/components/Titles/Titles.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/components/Titles/index.ts (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/components/index.ts (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Header/index.ts (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Main/Main.module.scss (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Main/Main.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Main/index.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Wrapper/Wrapper.module.scss (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Wrapper/Wrapper.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/Wrapper/index.ts (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v1}/subcomponents/index.ts (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/Workflow.tsx (100%) rename packages/components/src/{Workflow => __layout__/Workflow/v2}/_docs/ProgressStepper.mdx (73%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/_docs/ProgressStepper.stories.tsx (97%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/_docs/Workflow.mdx (96%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/_docs/Workflow.stories.tsx (99%) rename packages/components/src/{Workflow => __layout__/Workflow/v2}/_docs/WorkflowFooter.mdx (71%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/_docs/WorkflowFooter.stories.tsx (97%) rename packages/components/src/{Workflow => __layout__/Workflow/v2}/_docs/WorkflowHeader.mdx (64%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/_docs/WorkflowHeader.stories.tsx (96%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/_docs/controls/controls.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/_docs/controls/index.tsx (100%) create mode 100644 packages/components/src/__layout__/Workflow/v2/index.ts rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Footer/Footer.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Footer/components/FooterActions/FooterActions.module.scss (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Footer/components/FooterActions/FooterActions.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Footer/components/FooterActions/index.ts (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Footer/components/ProgressStepper/ProgressStepper.spec.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Footer/components/ProgressStepper/index.ts (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Footer/components/Root/FooterRoot.module.scss (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Footer/components/Root/Root.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Footer/components/Root/index.ts (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Footer/components/index.ts (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Footer/index.ts (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/Header.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/components/Actions/Actions.module.scss (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/components/Actions/Actions.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/components/Actions/index.ts (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/components/Branding/Branding.module.scss (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/components/Branding/Branding.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/components/Branding/index.ts (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/components/Root/Root.module.scss (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/components/Root/Root.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/components/Root/index.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/components/Titles/Titles.module.scss (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/components/Titles/Titles.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/components/Titles/index.ts (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/components/index.ts (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Header/index.ts (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Main/Main.module.scss (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Main/Main.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Main/index.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Wrapper/Wrapper.module.scss (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Wrapper/Wrapper.tsx (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/Wrapper/index.ts (100%) rename packages/components/src/{__future__/Workflow => __layout__/Workflow/v2}/subcomponents/index.ts (100%) create mode 100644 packages/components/src/__layout__/Workflow/v3/Workflow.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/_docs/ProgressStepper.mdx create mode 100644 packages/components/src/__layout__/Workflow/v3/_docs/ProgressStepper.stories.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/_docs/Workflow.mdx create mode 100644 packages/components/src/__layout__/Workflow/v3/_docs/Workflow.stories.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/_docs/WorkflowFooter.mdx create mode 100644 packages/components/src/__layout__/Workflow/v3/_docs/WorkflowFooter.stories.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/_docs/WorkflowHeader.mdx create mode 100644 packages/components/src/__layout__/Workflow/v3/_docs/WorkflowHeader.stories.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/_docs/controls/controls.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/_docs/controls/index.tsx rename packages/components/src/{Workflow => __layout__/Workflow/v3}/index.ts (100%) create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/Footer.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/FooterActions/FooterActions.module.css create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/FooterActions/FooterActions.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/FooterActions/index.ts create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.css create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.spec.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/index.ts create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/Root/FooterRoot.module.css create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/Root/Root.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/Root/index.ts create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/index.ts create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/index.ts create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/Header.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Actions/Actions.module.css create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Actions/Actions.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Actions/index.ts create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Branding/Branding.module.css create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Branding/Branding.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Branding/index.ts create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/Root.module.css create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/Root.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/index.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Titles/Titles.module.css create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Titles/Titles.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Titles/index.ts create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/index.ts create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Header/index.ts create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Main/Main.module.css create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Main/Main.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Main/index.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Wrapper/Wrapper.module.css create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Wrapper/Wrapper.tsx create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/Wrapper/index.ts create mode 100644 packages/components/src/__layout__/Workflow/v3/subcomponents/index.ts create mode 100644 packages/components/src/__layout__/v1.ts create mode 100644 packages/components/src/__layout__/v2.ts create mode 100644 packages/components/src/__layout__/v3.ts create mode 100644 packages/components/v1/layout/package.json create mode 100644 packages/components/v2/layout/package.json create mode 100644 packages/components/v3/layout/package.json diff --git a/.changeset/thin-bulldogs-carry.md b/.changeset/thin-bulldogs-carry.md new file mode 100644 index 00000000000..59439d60949 --- /dev/null +++ b/.changeset/thin-bulldogs-carry.md @@ -0,0 +1,10 @@ +--- +"@kaizen/components": minor +--- + +Create v3 Workflow component, changing footer to a white background + +Two adjustments will need to be made on the implementation side when upgrading from v2 to v3: + +- All footer buttons should have the `reversed` prop removed +- Next button in the footer should have `primary` prop added (not just the finish button as previously) diff --git a/docs/components/KaioLegacyDocsNotification/KaioLegacyDocsNotification.tsx b/docs/components/KaioLegacyDocsNotification/KaioLegacyDocsNotification.tsx deleted file mode 100644 index 4ba008aeedf..00000000000 --- a/docs/components/KaioLegacyDocsNotification/KaioLegacyDocsNotification.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react" -import { InlineNotification } from "~components/Notification" - -type KaioLegacyDocsNotificationProps = { - version: string -} - -export const KaioLegacyDocsNotification = ({ - version, -}: KaioLegacyDocsNotificationProps): JSX.Element => ( - - If you are using @kaizen/components at {version} or lower, - please refer to our legacy documentation. - -) - -KaioLegacyDocsNotification.title = "KaioLegacyDocsNotification" diff --git a/docs/components/KaioLegacyDocsNotification/index.ts b/docs/components/KaioLegacyDocsNotification/index.ts deleted file mode 100644 index e4e5975b54a..00000000000 --- a/docs/components/KaioLegacyDocsNotification/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./KaioLegacyDocsNotification" diff --git a/docs/components/index.ts b/docs/components/index.ts index d2e3bc9c327..7a669fd2c15 100644 --- a/docs/components/index.ts +++ b/docs/components/index.ts @@ -1,6 +1,5 @@ export * from "./NoClipCanvas" export * from "./Installation" -export * from "./KaioLegacyDocsNotification" export * from "./LinkTo" export * from "./ResourceLinks" export * from "./SbReleaseNotification" diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index fb46397f644..d0b3714a3d6 100644 --- a/packages/components/rollup.config.mjs +++ b/packages/components/rollup.config.mjs @@ -9,6 +9,9 @@ export default rollupConfig({ actionsV3: "./src/__actions__/v3.ts", containersV1: "./src/__containers__/v1.ts", containersV2: "./src/__containers__/v2.ts", + layoutV1: "./src/__layout__/v1.ts", + layoutV2: "./src/__layout__/v2.ts", + layoutV3: "./src/__layout__/v3.ts", overlaysV1: "./src/__overlays__/v1.ts", overlaysV2: "./src/__overlays__/v2.ts", overlaysV3: "./src/__overlays__/v3.ts", diff --git a/packages/components/src/__future__/Workflow/index.ts b/packages/components/src/__future__/Workflow/index.ts deleted file mode 100644 index 62b68a30df4..00000000000 --- a/packages/components/src/__future__/Workflow/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./Workflow" diff --git a/packages/components/src/__future__/index.ts b/packages/components/src/__future__/index.ts index b6ea3209270..29d478434c0 100644 --- a/packages/components/src/__future__/index.ts +++ b/packages/components/src/__future__/index.ts @@ -1,3 +1,3 @@ export * from "./Select" export * from "./Tag" -export * from "./Workflow" +export * from "../__layout__/Workflow/v2" diff --git a/packages/components/src/Workflow/Workflow.tsx b/packages/components/src/__layout__/Workflow/v1/Workflow.tsx similarity index 100% rename from packages/components/src/Workflow/Workflow.tsx rename to packages/components/src/__layout__/Workflow/v1/Workflow.tsx diff --git a/packages/components/src/__future__/Workflow/_docs/ProgressStepper.mdx b/packages/components/src/__layout__/Workflow/v1/_docs/ProgressStepper.mdx similarity index 84% rename from packages/components/src/__future__/Workflow/_docs/ProgressStepper.mdx rename to packages/components/src/__layout__/Workflow/v1/_docs/ProgressStepper.mdx index b9c358dbd7e..03f7947f972 100644 --- a/packages/components/src/__future__/Workflow/_docs/ProgressStepper.mdx +++ b/packages/components/src/__layout__/Workflow/v1/_docs/ProgressStepper.mdx @@ -1,5 +1,5 @@ import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { KAIOInstallation, ResourceLinks, KaioLegacyDocsNotification } from "~storybook/components" +import { Installation, ResourceLinks } from "~storybook/components" import * as ProgressStepperStories from "./ProgressStepper.stories" @@ -13,9 +13,10 @@ import * as ProgressStepperStories from "./ProgressStepper.stories" /> - - - + ## Overview diff --git a/packages/components/src/Workflow/_docs/ProgressStepper.stories.tsx b/packages/components/src/__layout__/Workflow/v1/_docs/ProgressStepper.stories.tsx similarity index 96% rename from packages/components/src/Workflow/_docs/ProgressStepper.stories.tsx rename to packages/components/src/__layout__/Workflow/v1/_docs/ProgressStepper.stories.tsx index 49a17df0615..0569f5287aa 100644 --- a/packages/components/src/Workflow/_docs/ProgressStepper.stories.tsx +++ b/packages/components/src/__layout__/Workflow/v1/_docs/ProgressStepper.stories.tsx @@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react" import { Workflow } from "../" const meta = { - title: "Pages/Workflow/Components/Progress Stepper", + title: "Layout/Workflow/Workflow (v1)/Components/Progress Stepper", component: Workflow.ProgressStepper, args: { stepName: "Settings", diff --git a/packages/components/src/Workflow/_docs/Workflow.mdx b/packages/components/src/__layout__/Workflow/v1/_docs/Workflow.mdx similarity index 92% rename from packages/components/src/Workflow/_docs/Workflow.mdx rename to packages/components/src/__layout__/Workflow/v1/_docs/Workflow.mdx index 72310034153..5972fd6aa06 100644 --- a/packages/components/src/Workflow/_docs/Workflow.mdx +++ b/packages/components/src/__layout__/Workflow/v1/_docs/Workflow.mdx @@ -1,6 +1,5 @@ import { ArgTypes, Canvas, Meta } from "@storybook/blocks" -import { InlineNotification } from "~components/Notification" -import { KAIOInstallation, ResourceLinks } from "~storybook/components" +import { Installation, ResourceLinks } from "~storybook/components" import * as Workflow from "./Workflow.stories" import * as WorkflowFooter from "./WorkflowFooter.stories" import * as WorkflowHeader from "./WorkflowHeader.stories" @@ -14,12 +13,10 @@ import * as WorkflowHeader from "./WorkflowHeader.stories" /> - - {`This version of the Workflow is deprecated and will be removed in the next major release. - Import from "@kaizen/components/future" for the latest version.`} - - - + ## Overview diff --git a/packages/components/src/Workflow/_docs/Workflow.stories.tsx b/packages/components/src/__layout__/Workflow/v1/_docs/Workflow.stories.tsx similarity index 98% rename from packages/components/src/Workflow/_docs/Workflow.stories.tsx rename to packages/components/src/__layout__/Workflow/v1/_docs/Workflow.stories.tsx index 9734733032e..9b18710911c 100644 --- a/packages/components/src/Workflow/_docs/Workflow.stories.tsx +++ b/packages/components/src/__layout__/Workflow/v1/_docs/Workflow.stories.tsx @@ -27,7 +27,7 @@ const MockContent = (): JSX.Element => ( ) const meta = { - title: "Pages/Workflow", + title: "Layout/Workflow/Workflow (v1)", component: Workflow, argTypes: { ...WorkflowControls }, args: { diff --git a/packages/components/src/__future__/Workflow/_docs/WorkflowFooter.mdx b/packages/components/src/__layout__/Workflow/v1/_docs/WorkflowFooter.mdx similarity index 83% rename from packages/components/src/__future__/Workflow/_docs/WorkflowFooter.mdx rename to packages/components/src/__layout__/Workflow/v1/_docs/WorkflowFooter.mdx index 88fc2c707a6..3739066d2e2 100644 --- a/packages/components/src/__future__/Workflow/_docs/WorkflowFooter.mdx +++ b/packages/components/src/__layout__/Workflow/v1/_docs/WorkflowFooter.mdx @@ -1,5 +1,5 @@ import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { KAIOInstallation, KaioLegacyDocsNotification, ResourceLinks } from "~storybook/components" +import { Installation, ResourceLinks } from "~storybook/components" import * as WorkflowFooterStories from "./WorkflowFooter.stories" @@ -13,10 +13,10 @@ import * as WorkflowFooterStories from "./WorkflowFooter.stories" /> - - - - + ## Overview diff --git a/packages/components/src/Workflow/_docs/WorkflowFooter.stories.tsx b/packages/components/src/__layout__/Workflow/v1/_docs/WorkflowFooter.stories.tsx similarity index 96% rename from packages/components/src/Workflow/_docs/WorkflowFooter.stories.tsx rename to packages/components/src/__layout__/Workflow/v1/_docs/WorkflowFooter.stories.tsx index 36930f1cb75..299ceb58ac2 100644 --- a/packages/components/src/Workflow/_docs/WorkflowFooter.stories.tsx +++ b/packages/components/src/__layout__/Workflow/v1/_docs/WorkflowFooter.stories.tsx @@ -5,7 +5,7 @@ import { Workflow } from "../" import { WorkflowControls } from "./controls" const meta = { - title: "Pages/Workflow/Components/Footer", + title: "Layout/Workflow/Workflow (v1)/Components/Footer", component: Workflow.Footer, argTypes: { ...WorkflowControls.nextAction, diff --git a/packages/components/src/__future__/Workflow/_docs/WorkflowHeader.mdx b/packages/components/src/__layout__/Workflow/v1/_docs/WorkflowHeader.mdx similarity index 78% rename from packages/components/src/__future__/Workflow/_docs/WorkflowHeader.mdx rename to packages/components/src/__layout__/Workflow/v1/_docs/WorkflowHeader.mdx index 7dc226e6c7f..6bf7075a09f 100644 --- a/packages/components/src/__future__/Workflow/_docs/WorkflowHeader.mdx +++ b/packages/components/src/__layout__/Workflow/v1/_docs/WorkflowHeader.mdx @@ -1,5 +1,5 @@ import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { KAIOInstallation, KaioLegacyDocsNotification, ResourceLinks } from "~storybook/components" +import { Installation, ResourceLinks } from "~storybook/components" import * as WorkflowHeaderStories from "./WorkflowHeader.stories" @@ -13,10 +13,10 @@ import * as WorkflowHeaderStories from "./WorkflowHeader.stories" /> - - - - + ## Overview diff --git a/packages/components/src/Workflow/_docs/WorkflowHeader.stories.tsx b/packages/components/src/__layout__/Workflow/v1/_docs/WorkflowHeader.stories.tsx similarity index 96% rename from packages/components/src/Workflow/_docs/WorkflowHeader.stories.tsx rename to packages/components/src/__layout__/Workflow/v1/_docs/WorkflowHeader.stories.tsx index 5ee3a446ca4..351e33af505 100644 --- a/packages/components/src/Workflow/_docs/WorkflowHeader.stories.tsx +++ b/packages/components/src/__layout__/Workflow/v1/_docs/WorkflowHeader.stories.tsx @@ -6,7 +6,7 @@ import { Workflow } from "../" import { WorkflowControls } from "./controls" const meta = { - title: "Pages/Workflow/Components/Header", + title: "Layout/Workflow/Workflow (v1)/Components/Header", component: Workflow.Header, argTypes: { ...WorkflowControls.headerActions, diff --git a/packages/components/src/Workflow/_docs/controls/controls.tsx b/packages/components/src/__layout__/Workflow/v1/_docs/controls/controls.tsx similarity index 100% rename from packages/components/src/Workflow/_docs/controls/controls.tsx rename to packages/components/src/__layout__/Workflow/v1/_docs/controls/controls.tsx diff --git a/packages/components/src/Workflow/_docs/controls/index.tsx b/packages/components/src/__layout__/Workflow/v1/_docs/controls/index.tsx similarity index 100% rename from packages/components/src/Workflow/_docs/controls/index.tsx rename to packages/components/src/__layout__/Workflow/v1/_docs/controls/index.tsx diff --git a/packages/components/src/__layout__/Workflow/v1/index.ts b/packages/components/src/__layout__/Workflow/v1/index.ts new file mode 100644 index 00000000000..97168dbfb24 --- /dev/null +++ b/packages/components/src/__layout__/Workflow/v1/index.ts @@ -0,0 +1,10 @@ +// Since we can't add a deprecation flag on a * export +import { + Workflow as WorkflowV1, + WorkflowProps as WorkflowPropsV1, +} from "./Workflow" + +/** * @deprecated upgrade to v3 for the latest release */ +export const Workflow = WorkflowV1 +/** * @deprecated upgrade to v3 for the latest release */ +export type WorkflowProps = WorkflowPropsV1 diff --git a/packages/components/src/Workflow/subcomponents/Footer/Footer.tsx b/packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/Footer.tsx similarity index 100% rename from packages/components/src/Workflow/subcomponents/Footer/Footer.tsx rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/Footer.tsx diff --git a/packages/components/src/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.scss b/packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/FooterActions/FooterActions.module.scss similarity index 100% rename from packages/components/src/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.scss rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/FooterActions/FooterActions.module.scss diff --git a/packages/components/src/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.tsx b/packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/FooterActions/FooterActions.tsx similarity index 100% rename from packages/components/src/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.tsx rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/FooterActions/FooterActions.tsx diff --git a/packages/components/src/Workflow/subcomponents/Footer/components/FooterActions/index.ts b/packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/FooterActions/index.ts similarity index 100% rename from packages/components/src/Workflow/subcomponents/Footer/components/FooterActions/index.ts rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/FooterActions/index.ts diff --git a/packages/components/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss b/packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss similarity index 100% rename from packages/components/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss diff --git a/packages/components/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx b/packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx similarity index 100% rename from packages/components/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx diff --git a/packages/components/src/Workflow/subcomponents/Footer/components/ProgressStepper/index.ts b/packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/ProgressStepper/index.ts similarity index 100% rename from packages/components/src/Workflow/subcomponents/Footer/components/ProgressStepper/index.ts rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/ProgressStepper/index.ts diff --git a/packages/components/src/Workflow/subcomponents/Footer/components/Root/FooterRoot.module.scss b/packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/Root/FooterRoot.module.scss similarity index 100% rename from packages/components/src/Workflow/subcomponents/Footer/components/Root/FooterRoot.module.scss rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/Root/FooterRoot.module.scss diff --git a/packages/components/src/Workflow/subcomponents/Footer/components/Root/Root.tsx b/packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/Root/Root.tsx similarity index 100% rename from packages/components/src/Workflow/subcomponents/Footer/components/Root/Root.tsx rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/Root/Root.tsx diff --git a/packages/components/src/Workflow/subcomponents/Footer/components/Root/index.ts b/packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/Root/index.ts similarity index 100% rename from packages/components/src/Workflow/subcomponents/Footer/components/Root/index.ts rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/Root/index.ts diff --git a/packages/components/src/Workflow/subcomponents/Footer/components/index.ts b/packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/index.ts similarity index 100% rename from packages/components/src/Workflow/subcomponents/Footer/components/index.ts rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/components/index.ts diff --git a/packages/components/src/Workflow/subcomponents/Footer/index.ts b/packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/index.ts similarity index 100% rename from packages/components/src/Workflow/subcomponents/Footer/index.ts rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Footer/index.ts diff --git a/packages/components/src/Workflow/subcomponents/Header/Header.tsx b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/Header.tsx similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/Header.tsx rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/Header.tsx diff --git a/packages/components/src/Workflow/subcomponents/Header/components/Actions/Actions.module.scss b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Actions/Actions.module.scss similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/components/Actions/Actions.module.scss rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Actions/Actions.module.scss diff --git a/packages/components/src/Workflow/subcomponents/Header/components/Actions/Actions.tsx b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Actions/Actions.tsx similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/components/Actions/Actions.tsx rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Actions/Actions.tsx diff --git a/packages/components/src/Workflow/subcomponents/Header/components/Actions/index.ts b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Actions/index.ts similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/components/Actions/index.ts rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Actions/index.ts diff --git a/packages/components/src/Workflow/subcomponents/Header/components/Branding/Branding.module.scss b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Branding/Branding.module.scss similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/components/Branding/Branding.module.scss rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Branding/Branding.module.scss diff --git a/packages/components/src/Workflow/subcomponents/Header/components/Branding/Branding.tsx b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Branding/Branding.tsx similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/components/Branding/Branding.tsx rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Branding/Branding.tsx diff --git a/packages/components/src/Workflow/subcomponents/Header/components/Branding/index.ts b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Branding/index.ts similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/components/Branding/index.ts rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Branding/index.ts diff --git a/packages/components/src/Workflow/subcomponents/Header/components/Root/Root.module.scss b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Root/Root.module.scss similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/components/Root/Root.module.scss rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Root/Root.module.scss diff --git a/packages/components/src/Workflow/subcomponents/Header/components/Root/Root.tsx b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Root/Root.tsx similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/components/Root/Root.tsx rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Root/Root.tsx diff --git a/packages/components/src/Workflow/subcomponents/Header/components/Root/index.tsx b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Root/index.tsx similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/components/Root/index.tsx rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Root/index.tsx diff --git a/packages/components/src/Workflow/subcomponents/Header/components/Titles/Titles.module.scss b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Titles/Titles.module.scss similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/components/Titles/Titles.module.scss rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Titles/Titles.module.scss diff --git a/packages/components/src/Workflow/subcomponents/Header/components/Titles/Titles.tsx b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Titles/Titles.tsx similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/components/Titles/Titles.tsx rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Titles/Titles.tsx diff --git a/packages/components/src/Workflow/subcomponents/Header/components/Titles/index.ts b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Titles/index.ts similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/components/Titles/index.ts rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/Titles/index.ts diff --git a/packages/components/src/Workflow/subcomponents/Header/components/index.ts b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/index.ts similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/components/index.ts rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/components/index.ts diff --git a/packages/components/src/Workflow/subcomponents/Header/index.ts b/packages/components/src/__layout__/Workflow/v1/subcomponents/Header/index.ts similarity index 100% rename from packages/components/src/Workflow/subcomponents/Header/index.ts rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Header/index.ts diff --git a/packages/components/src/Workflow/subcomponents/Main/Main.module.scss b/packages/components/src/__layout__/Workflow/v1/subcomponents/Main/Main.module.scss similarity index 100% rename from packages/components/src/Workflow/subcomponents/Main/Main.module.scss rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Main/Main.module.scss diff --git a/packages/components/src/Workflow/subcomponents/Main/Main.tsx b/packages/components/src/__layout__/Workflow/v1/subcomponents/Main/Main.tsx similarity index 100% rename from packages/components/src/Workflow/subcomponents/Main/Main.tsx rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Main/Main.tsx diff --git a/packages/components/src/Workflow/subcomponents/Main/index.tsx b/packages/components/src/__layout__/Workflow/v1/subcomponents/Main/index.tsx similarity index 100% rename from packages/components/src/Workflow/subcomponents/Main/index.tsx rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Main/index.tsx diff --git a/packages/components/src/Workflow/subcomponents/Wrapper/Wrapper.module.scss b/packages/components/src/__layout__/Workflow/v1/subcomponents/Wrapper/Wrapper.module.scss similarity index 100% rename from packages/components/src/Workflow/subcomponents/Wrapper/Wrapper.module.scss rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Wrapper/Wrapper.module.scss diff --git a/packages/components/src/Workflow/subcomponents/Wrapper/Wrapper.tsx b/packages/components/src/__layout__/Workflow/v1/subcomponents/Wrapper/Wrapper.tsx similarity index 100% rename from packages/components/src/Workflow/subcomponents/Wrapper/Wrapper.tsx rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Wrapper/Wrapper.tsx diff --git a/packages/components/src/Workflow/subcomponents/Wrapper/index.ts b/packages/components/src/__layout__/Workflow/v1/subcomponents/Wrapper/index.ts similarity index 100% rename from packages/components/src/Workflow/subcomponents/Wrapper/index.ts rename to packages/components/src/__layout__/Workflow/v1/subcomponents/Wrapper/index.ts diff --git a/packages/components/src/Workflow/subcomponents/index.ts b/packages/components/src/__layout__/Workflow/v1/subcomponents/index.ts similarity index 100% rename from packages/components/src/Workflow/subcomponents/index.ts rename to packages/components/src/__layout__/Workflow/v1/subcomponents/index.ts diff --git a/packages/components/src/__future__/Workflow/Workflow.tsx b/packages/components/src/__layout__/Workflow/v2/Workflow.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/Workflow.tsx rename to packages/components/src/__layout__/Workflow/v2/Workflow.tsx diff --git a/packages/components/src/Workflow/_docs/ProgressStepper.mdx b/packages/components/src/__layout__/Workflow/v2/_docs/ProgressStepper.mdx similarity index 73% rename from packages/components/src/Workflow/_docs/ProgressStepper.mdx rename to packages/components/src/__layout__/Workflow/v2/_docs/ProgressStepper.mdx index 2eb814b09e7..71f7c901e74 100644 --- a/packages/components/src/Workflow/_docs/ProgressStepper.mdx +++ b/packages/components/src/__layout__/Workflow/v2/_docs/ProgressStepper.mdx @@ -1,6 +1,5 @@ import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { InlineNotification } from "~components/Notification" -import { KAIOInstallation, ResourceLinks } from "~storybook/components" +import { Installation, ResourceLinks } from "~storybook/components" import * as ProgressStepperStories from "./ProgressStepper.stories" @@ -14,12 +13,10 @@ import * as ProgressStepperStories from "./ProgressStepper.stories" /> - - {`This version of the Workflow is deprecated and will be removed in the next major release. - Import from "@kaizen/components/future" for the latest version.`} - - - + ## Overview diff --git a/packages/components/src/__future__/Workflow/_docs/ProgressStepper.stories.tsx b/packages/components/src/__layout__/Workflow/v2/_docs/ProgressStepper.stories.tsx similarity index 97% rename from packages/components/src/__future__/Workflow/_docs/ProgressStepper.stories.tsx rename to packages/components/src/__layout__/Workflow/v2/_docs/ProgressStepper.stories.tsx index 8636361e370..dd994245497 100644 --- a/packages/components/src/__future__/Workflow/_docs/ProgressStepper.stories.tsx +++ b/packages/components/src/__layout__/Workflow/v2/_docs/ProgressStepper.stories.tsx @@ -4,7 +4,7 @@ import { Workflow } from "../" import { WorkflowControls } from "./controls" const meta = { - title: "Pages/Workflow/Future/Components/Progress Stepper", + title: "Layout/Workflow/Workflow (v2)/Components/Progress Stepper", component: Workflow.ProgressStepper, argTypes: { currentStepId: WorkflowControls.currentStepId, diff --git a/packages/components/src/__future__/Workflow/_docs/Workflow.mdx b/packages/components/src/__layout__/Workflow/v2/_docs/Workflow.mdx similarity index 96% rename from packages/components/src/__future__/Workflow/_docs/Workflow.mdx rename to packages/components/src/__layout__/Workflow/v2/_docs/Workflow.mdx index 0802144a290..590eecfea37 100644 --- a/packages/components/src/__future__/Workflow/_docs/Workflow.mdx +++ b/packages/components/src/__layout__/Workflow/v2/_docs/Workflow.mdx @@ -1,5 +1,5 @@ import { ArgTypes, Canvas, Meta } from "@storybook/blocks" -import { KAIOInstallation, KaioLegacyDocsNotification, ResourceLinks } from "~storybook/components" +import { Installation, ResourceLinks } from "~storybook/components" import * as Workflow from "./Workflow.stories" import * as WorkflowFooter from "./WorkflowFooter.stories" import * as WorkflowHeader from "./WorkflowHeader.stories" @@ -13,10 +13,10 @@ import * as WorkflowHeader from "./WorkflowHeader.stories" /> - - - - + ## Overview diff --git a/packages/components/src/__future__/Workflow/_docs/Workflow.stories.tsx b/packages/components/src/__layout__/Workflow/v2/_docs/Workflow.stories.tsx similarity index 99% rename from packages/components/src/__future__/Workflow/_docs/Workflow.stories.tsx rename to packages/components/src/__layout__/Workflow/v2/_docs/Workflow.stories.tsx index 04c0eb80d3f..8a3cad5a3a0 100644 --- a/packages/components/src/__future__/Workflow/_docs/Workflow.stories.tsx +++ b/packages/components/src/__layout__/Workflow/v2/_docs/Workflow.stories.tsx @@ -27,7 +27,7 @@ const MockContent = (): JSX.Element => ( ) const meta = { - title: "Pages/Workflow/Future", + title: "Layout/Workflow/Workflow (v2)", component: Workflow, argTypes: WorkflowControls, args: { diff --git a/packages/components/src/Workflow/_docs/WorkflowFooter.mdx b/packages/components/src/__layout__/Workflow/v2/_docs/WorkflowFooter.mdx similarity index 71% rename from packages/components/src/Workflow/_docs/WorkflowFooter.mdx rename to packages/components/src/__layout__/Workflow/v2/_docs/WorkflowFooter.mdx index 117ef2382ae..c9ec454c268 100644 --- a/packages/components/src/Workflow/_docs/WorkflowFooter.mdx +++ b/packages/components/src/__layout__/Workflow/v2/_docs/WorkflowFooter.mdx @@ -1,6 +1,5 @@ import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { InlineNotification } from "~components/Notification" -import { KAIOInstallation, ResourceLinks } from "~storybook/components" +import { Installation, ResourceLinks } from "~storybook/components" import * as WorkflowFooterStories from "./WorkflowFooter.stories" @@ -14,12 +13,10 @@ import * as WorkflowFooterStories from "./WorkflowFooter.stories" /> - - {`This version of the Workflow is deprecated and will be removed in the next major release. - Import from "@kaizen/components/future" for the latest version.`} - - - + ## Overview diff --git a/packages/components/src/__future__/Workflow/_docs/WorkflowFooter.stories.tsx b/packages/components/src/__layout__/Workflow/v2/_docs/WorkflowFooter.stories.tsx similarity index 97% rename from packages/components/src/__future__/Workflow/_docs/WorkflowFooter.stories.tsx rename to packages/components/src/__layout__/Workflow/v2/_docs/WorkflowFooter.stories.tsx index 6420cc01a2a..23c68e75471 100644 --- a/packages/components/src/__future__/Workflow/_docs/WorkflowFooter.stories.tsx +++ b/packages/components/src/__layout__/Workflow/v2/_docs/WorkflowFooter.stories.tsx @@ -5,7 +5,7 @@ import { Workflow } from "../" import { WorkflowControls } from "./controls" const meta = { - title: "Pages/Workflow/Future/Components/Footer", + title: "Layout/Workflow/Workflow (v2)/Components/Footer", component: Workflow.Footer, argTypes: { ...WorkflowControls.nextAction, diff --git a/packages/components/src/Workflow/_docs/WorkflowHeader.mdx b/packages/components/src/__layout__/Workflow/v2/_docs/WorkflowHeader.mdx similarity index 64% rename from packages/components/src/Workflow/_docs/WorkflowHeader.mdx rename to packages/components/src/__layout__/Workflow/v2/_docs/WorkflowHeader.mdx index 019c8da061c..b87266a72b0 100644 --- a/packages/components/src/Workflow/_docs/WorkflowHeader.mdx +++ b/packages/components/src/__layout__/Workflow/v2/_docs/WorkflowHeader.mdx @@ -1,6 +1,5 @@ import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { InlineNotification } from "~components/Notification" -import { KAIOInstallation, ResourceLinks } from "~storybook/components" +import { Installation, ResourceLinks } from "~storybook/components" import * as WorkflowHeaderStories from "./WorkflowHeader.stories" @@ -14,12 +13,10 @@ import * as WorkflowHeaderStories from "./WorkflowHeader.stories" /> - - {`This version of the Workflow is deprecated and will be removed in the next major release. - Import from "@kaizen/components/future" for the latest version.`} - - - + ## Overview diff --git a/packages/components/src/__future__/Workflow/_docs/WorkflowHeader.stories.tsx b/packages/components/src/__layout__/Workflow/v2/_docs/WorkflowHeader.stories.tsx similarity index 96% rename from packages/components/src/__future__/Workflow/_docs/WorkflowHeader.stories.tsx rename to packages/components/src/__layout__/Workflow/v2/_docs/WorkflowHeader.stories.tsx index f7f74f7a1c1..719d8fa0aa5 100644 --- a/packages/components/src/__future__/Workflow/_docs/WorkflowHeader.stories.tsx +++ b/packages/components/src/__layout__/Workflow/v2/_docs/WorkflowHeader.stories.tsx @@ -6,7 +6,7 @@ import { Workflow } from "../" import { WorkflowControls } from "./controls" const meta = { - title: "Pages/Workflow/Future/Components/Header", + title: "Layout/Workflow/Workflow (v2)/Components/Header", component: Workflow.Header, argTypes: { ...WorkflowControls.headerActions, diff --git a/packages/components/src/__future__/Workflow/_docs/controls/controls.tsx b/packages/components/src/__layout__/Workflow/v2/_docs/controls/controls.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/_docs/controls/controls.tsx rename to packages/components/src/__layout__/Workflow/v2/_docs/controls/controls.tsx diff --git a/packages/components/src/__future__/Workflow/_docs/controls/index.tsx b/packages/components/src/__layout__/Workflow/v2/_docs/controls/index.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/_docs/controls/index.tsx rename to packages/components/src/__layout__/Workflow/v2/_docs/controls/index.tsx diff --git a/packages/components/src/__layout__/Workflow/v2/index.ts b/packages/components/src/__layout__/Workflow/v2/index.ts new file mode 100644 index 00000000000..8462c74fb19 --- /dev/null +++ b/packages/components/src/__layout__/Workflow/v2/index.ts @@ -0,0 +1,10 @@ +// Since we can't add a deprecation flag on a * export +import { + Workflow as WorkflowV2, + WorkflowProps as WorkflowPropsV2, +} from "./Workflow" + +/** * @deprecated upgrade to v3 for the latest release */ +export const Workflow = WorkflowV2 +/** * @deprecated upgrade to v3 for the latest release */ +export type WorkflowProps = WorkflowPropsV2 diff --git a/packages/components/src/__future__/Workflow/subcomponents/Footer/Footer.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/Footer.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Footer/Footer.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/Footer.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.scss b/packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/FooterActions/FooterActions.module.scss similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.scss rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/FooterActions/FooterActions.module.scss diff --git a/packages/components/src/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/FooterActions/FooterActions.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/FooterActions/FooterActions.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Footer/components/FooterActions/index.ts b/packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/FooterActions/index.ts similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Footer/components/FooterActions/index.ts rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/FooterActions/index.ts diff --git a/packages/components/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss b/packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss diff --git a/packages/components/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.spec.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.spec.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.spec.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.spec.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/index.ts b/packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/index.ts similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/index.ts rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/index.ts diff --git a/packages/components/src/__future__/Workflow/subcomponents/Footer/components/Root/FooterRoot.module.scss b/packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/Root/FooterRoot.module.scss similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Footer/components/Root/FooterRoot.module.scss rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/Root/FooterRoot.module.scss diff --git a/packages/components/src/__future__/Workflow/subcomponents/Footer/components/Root/Root.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/Root/Root.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Footer/components/Root/Root.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/Root/Root.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Footer/components/Root/index.ts b/packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/Root/index.ts similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Footer/components/Root/index.ts rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/Root/index.ts diff --git a/packages/components/src/__future__/Workflow/subcomponents/Footer/components/index.ts b/packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/index.ts similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Footer/components/index.ts rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/components/index.ts diff --git a/packages/components/src/__future__/Workflow/subcomponents/Footer/index.ts b/packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/index.ts similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Footer/index.ts rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Footer/index.ts diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/Header.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/Header.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/Header.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/Header.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/components/Actions/Actions.module.scss b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Actions/Actions.module.scss similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/components/Actions/Actions.module.scss rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Actions/Actions.module.scss diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/components/Actions/Actions.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Actions/Actions.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/components/Actions/Actions.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Actions/Actions.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/components/Actions/index.ts b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Actions/index.ts similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/components/Actions/index.ts rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Actions/index.ts diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/components/Branding/Branding.module.scss b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Branding/Branding.module.scss similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/components/Branding/Branding.module.scss rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Branding/Branding.module.scss diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/components/Branding/Branding.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Branding/Branding.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/components/Branding/Branding.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Branding/Branding.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/components/Branding/index.ts b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Branding/index.ts similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/components/Branding/index.ts rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Branding/index.ts diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/components/Root/Root.module.scss b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Root/Root.module.scss similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/components/Root/Root.module.scss rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Root/Root.module.scss diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/components/Root/Root.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Root/Root.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/components/Root/Root.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Root/Root.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/components/Root/index.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Root/index.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/components/Root/index.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Root/index.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/components/Titles/Titles.module.scss b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Titles/Titles.module.scss similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/components/Titles/Titles.module.scss rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Titles/Titles.module.scss diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/components/Titles/Titles.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Titles/Titles.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/components/Titles/Titles.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Titles/Titles.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/components/Titles/index.ts b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Titles/index.ts similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/components/Titles/index.ts rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/Titles/index.ts diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/components/index.ts b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/index.ts similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/components/index.ts rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/components/index.ts diff --git a/packages/components/src/__future__/Workflow/subcomponents/Header/index.ts b/packages/components/src/__layout__/Workflow/v2/subcomponents/Header/index.ts similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Header/index.ts rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Header/index.ts diff --git a/packages/components/src/__future__/Workflow/subcomponents/Main/Main.module.scss b/packages/components/src/__layout__/Workflow/v2/subcomponents/Main/Main.module.scss similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Main/Main.module.scss rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Main/Main.module.scss diff --git a/packages/components/src/__future__/Workflow/subcomponents/Main/Main.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Main/Main.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Main/Main.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Main/Main.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Main/index.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Main/index.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Main/index.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Main/index.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Wrapper/Wrapper.module.scss b/packages/components/src/__layout__/Workflow/v2/subcomponents/Wrapper/Wrapper.module.scss similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Wrapper/Wrapper.module.scss rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Wrapper/Wrapper.module.scss diff --git a/packages/components/src/__future__/Workflow/subcomponents/Wrapper/Wrapper.tsx b/packages/components/src/__layout__/Workflow/v2/subcomponents/Wrapper/Wrapper.tsx similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Wrapper/Wrapper.tsx rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Wrapper/Wrapper.tsx diff --git a/packages/components/src/__future__/Workflow/subcomponents/Wrapper/index.ts b/packages/components/src/__layout__/Workflow/v2/subcomponents/Wrapper/index.ts similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/Wrapper/index.ts rename to packages/components/src/__layout__/Workflow/v2/subcomponents/Wrapper/index.ts diff --git a/packages/components/src/__future__/Workflow/subcomponents/index.ts b/packages/components/src/__layout__/Workflow/v2/subcomponents/index.ts similarity index 100% rename from packages/components/src/__future__/Workflow/subcomponents/index.ts rename to packages/components/src/__layout__/Workflow/v2/subcomponents/index.ts diff --git a/packages/components/src/__layout__/Workflow/v3/Workflow.tsx b/packages/components/src/__layout__/Workflow/v3/Workflow.tsx new file mode 100644 index 00000000000..61c6d1a3fa8 --- /dev/null +++ b/packages/components/src/__layout__/Workflow/v3/Workflow.tsx @@ -0,0 +1,55 @@ +import React, { HTMLAttributes } from "react" +import { OverrideClassName } from "~components/types/OverrideClassName" +import { + Footer, + FooterProps, + Header, + Main, + HeaderProps, + ProgressStepper, + Wrapper, +} from "./subcomponents" + +export type WorkflowProps = OverrideClassName> & + FooterProps & + Pick + +export const Workflow = ({ + steps, + currentStepId, + isComplete, + workflowName, + statusTag, + headerActions, + children, + nextAction, + previousAction, + classNameOverride, + ...restProps +}: WorkflowProps): JSX.Element => { + const currentStep = steps.find(step => step.id === currentStepId) + return ( + + + {children} + + + ) +} + +Workflow.Header = Header +Workflow.Footer = Footer +Workflow.Main = Main +Workflow.ProgressStepper = ProgressStepper +Workflow.Wrapper = Wrapper diff --git a/packages/components/src/__layout__/Workflow/v3/_docs/ProgressStepper.mdx b/packages/components/src/__layout__/Workflow/v3/_docs/ProgressStepper.mdx new file mode 100644 index 00000000000..172b7d34f5b --- /dev/null +++ b/packages/components/src/__layout__/Workflow/v3/_docs/ProgressStepper.mdx @@ -0,0 +1,37 @@ +import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" +import { Installation, ResourceLinks } from "~storybook/components" +import * as ProgressStepperStories from "./ProgressStepper.stories" + + + +# Progress Stepper + + + + + +## Overview + +This component is used in the `Footer` to track progress of the Workflows steps. + +It has no reverse variant and should only be used in the Worflow's `Footer` component. + + + + +## API + + + + + + + + diff --git a/packages/components/src/__layout__/Workflow/v3/_docs/ProgressStepper.stories.tsx b/packages/components/src/__layout__/Workflow/v3/_docs/ProgressStepper.stories.tsx new file mode 100644 index 00000000000..7c48ef592b2 --- /dev/null +++ b/packages/components/src/__layout__/Workflow/v3/_docs/ProgressStepper.stories.tsx @@ -0,0 +1,86 @@ +import { Meta, StoryObj } from "@storybook/react" +import { Workflow } from "../" +import { WorkflowControls } from "./controls" + +const meta = { + title: "Layout/Workflow/Workflow (v3)/Components/Progress Stepper", + component: Workflow.ProgressStepper, + argTypes: { + currentStepId: WorkflowControls.currentStepId, + }, + args: { + 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 Meta + +export default meta + +type Story = StoryObj + +/** + *

This component is used in the `Footer` to track progress of the Workflows steps.

+ *

It has no reverse variant and should only be used in the Worflow's `Footer` component.

+ */ +export const Playground: Story = { + parameters: { + docs: { + canvas: { + sourceState: "shown", + }, + }, + }, +} + +/**

To ensure WCAG AA compliance, there are 3 visually destinct states.

+ *

These are reflected in their accessible names for screen reader: "Completed", "Current" and "Not started"

+ */ +export const ProgressStates: Story = { + args: { + currentStepId: "questions-step", + }, +} + +/** + *

You can use the `isComplete` follow a successful submission to render all steps as complete.

+ */ +export const AllStepsComplete: Story = { + args: { + currentStepId: "schedule-step", + isComplete: true, + }, +} + +export const FewerSteps: Story = { + args: { + currentStepId: "questions-step", + steps: [ + { label: "Settings", id: "settings-step" }, + { label: "Questions", id: "questions-step" }, + { label: "Preview", id: "preview-step" }, + ], + }, +} + +/** + *

We have baked in a container query to ensure the component can be responsive.

+ *

When a step reaches its minimum size (4.5rem), it will hide the display name to maximise realestate.

+ */ +export const EightSteps: Story = { + args: { + currentStepId: "questions-step", + steps: [ + ...meta.args.steps, + { label: "Plan", id: "plan-step" }, + { label: "Provision", id: "provision-step" }, + { label: "Procure", id: "procure-step" }, + ], + }, +} diff --git a/packages/components/src/__layout__/Workflow/v3/_docs/Workflow.mdx b/packages/components/src/__layout__/Workflow/v3/_docs/Workflow.mdx new file mode 100644 index 00000000000..cbcd52fc70f --- /dev/null +++ b/packages/components/src/__layout__/Workflow/v3/_docs/Workflow.mdx @@ -0,0 +1,165 @@ +import { ArgTypes, Canvas, Meta } from "@storybook/blocks" +import { Installation, ResourceLinks } from "~storybook/components" +import * as Workflow from "./Workflow.stories" +import * as WorkflowFooter from "./WorkflowFooter.stories" +import * as WorkflowHeader from "./WorkflowHeader.stories" + + + +# Workflow + + + + + +## Overview + +This is a page template component containing the header, footer, and main landmarks that compose a Workflow page. Its purpose is to guide a customer through a multi-step form to create a Workflow. + +The Worflow is intended as a page wrapper and sets a minimum height of `100vh` with a sticky `Header` component. The `Children` will be wrapped in an unstyled main landmark to provide flexibility for inner content layouts. + +To ensure at readability at 400% zoom (See WCAG's [Reflow criteria](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html)) this component will collapse to a vertical layout on smaller screen sizes and remove `sticky` positioning to maximise screen real estate. You can see an example in [the responsive workflow story](/story/pages-workflow-components-workflow--responsive-workflow). + + + +## Header actions + +The `headerActions` prop takes array of JSX elements that will render in the top right of the `Header` component. + +While the number of JSX elements is not limited, is important to consider the real estate in the `Header` and how larger strings or components may be rendered on smaller screen sizes. + +, +