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

@@ -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)

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"

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",

packages/components/src/__future__/index.ts

@@ -1,3 +1,3 @@
 export * from "./Select"
 export * from "./Tag"
-export * from "./Workflow"
+export * from "../__layout__/Workflow/v2"

packages/components/src/__future__/Workflow/_docs/ProgressStepper.mdx → 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"
 
 <Meta of={ProgressStepperStories} />
@@ -13,9 +13,10 @@ import * as ProgressStepperStories from "./ProgressStepper.stories"
 
 />
 
-<KaioLegacyDocsNotification version="1.16.0" />
-
-<KAIOInstallation exportNames="ProgressStepper" isFuture />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v1/layout"'
+/>
 
 ## Overview
 

packages/components/src/Workflow/_docs/ProgressStepper.stories.tsx → 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",

packages/components/src/Workflow/_docs/Workflow.mdx → 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"
 
 />
 
-<InlineNotification type="negative" persistent>
-  {`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.`}
-</InlineNotification>
-
-<KAIOInstallation exportNames="Workflow" />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v1/layout"'
+/>
 
 ## Overview
 

packages/components/src/Workflow/_docs/Workflow.stories.tsx → 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: {

packages/components/src/__future__/Workflow/_docs/WorkflowFooter.mdx → 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"
 
 <Meta of={WorkflowFooterStories} />
@@ -13,10 +13,10 @@ import * as WorkflowFooterStories from "./WorkflowFooter.stories"
 
 />
 
-
-<KaioLegacyDocsNotification version="1.16.0" />
-
-<KAIOInstallation exportNames="WorkflowFooter" isFuture />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v1/layout"'
+/>
 
 ## Overview
 

packages/components/src/Workflow/_docs/WorkflowFooter.stories.tsx → 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,

packages/components/src/__future__/Workflow/_docs/WorkflowHeader.mdx → 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"
 
 <Meta of={WorkflowHeaderStories} />
@@ -13,10 +13,10 @@ import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
 
 />
 
-
-<KaioLegacyDocsNotification version="1.16.0" />
-
-<KAIOInstallation exportNames="WorkflowHeader" isFuture />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v1/layout"'
+/>
 
 ## Overview
 

packages/components/src/Workflow/_docs/WorkflowHeader.stories.tsx → 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,

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

packages/components/src/Workflow/_docs/ProgressStepper.mdx → 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"
 
 <Meta of={ProgressStepperStories} />
@@ -14,12 +13,10 @@ import * as ProgressStepperStories from "./ProgressStepper.stories"
 
 />
 
-<InlineNotification type="negative" persistent>
-  {`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.`}
-</InlineNotification>
-
-<KAIOInstallation exportNames="Workflow" />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v2/layout"'
+/>
 
 ## Overview
 

packages/components/src/__future__/Workflow/_docs/ProgressStepper.stories.tsx → 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,

packages/components/src/__future__/Workflow/_docs/Workflow.mdx → 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"
 
 />
 
-
-<KaioLegacyDocsNotification version="1.16.0" />
-
-<KAIOInstallation exportNames="Workflow" isFuture />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v2/layout"'
+/>
 
 ## Overview
 

packages/components/src/__future__/Workflow/_docs/Workflow.stories.tsx → 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: {

packages/components/src/Workflow/_docs/WorkflowFooter.mdx → 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"
 
 <Meta of={WorkflowFooterStories} />
@@ -14,12 +13,10 @@ import * as WorkflowFooterStories from "./WorkflowFooter.stories"
 
 />
 
-<InlineNotification type="negative" persistent>
-  {`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.`}
-</InlineNotification>
-
-<KAIOInstallation exportNames="Workflow" />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v2/layout"'
+/>
 
 ## Overview
 

packages/components/src/__future__/Workflow/_docs/WorkflowFooter.stories.tsx → 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,

packages/components/src/Workflow/_docs/WorkflowHeader.mdx → 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"
 
 <Meta of={WorkflowHeaderStories} />
@@ -14,12 +13,10 @@ import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
 
 />
 
-<InlineNotification type="negative" persistent>
-  {`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.`}
-</InlineNotification>
-
-<KAIOInstallation exportNames="Workflow" />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components/v2/layout"'
+/>
 
 ## Overview
 

packages/components/src/__future__/Workflow/_docs/WorkflowHeader.stories.tsx → 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,

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

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<HTMLAttributes<HTMLDivElement>> &
+  FooterProps &
+  Pick<HeaderProps, "workflowName" | "statusTag" | "headerActions">
+
+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 (
+    <Workflow.Wrapper classNameOverride={classNameOverride} {...restProps}>
+      <Workflow.Header
+        workflowName={workflowName}
+        stepName={currentStep!.label}
+        statusTag={statusTag}
+        headerActions={headerActions}
+      />
+      <Workflow.Main>{children}</Workflow.Main>
+      <Workflow.Footer
+        currentStepId={currentStepId}
+        steps={steps}
+        isComplete={isComplete}
+        nextAction={nextAction}
+        previousAction={previousAction}
+      />
+    </Workflow.Wrapper>
+  )
+}
+
+Workflow.Header = Header
+Workflow.Footer = Footer
+Workflow.Main = Main
+Workflow.ProgressStepper = ProgressStepper
+Workflow.Wrapper = Wrapper