@kaizen/components 1.42.0 → 1.42.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.42.0",
+  "version": "1.42.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -47,11 +47,11 @@
     "@react-stately/select": "^3.6.2",
     "@react-types/shared": "^3.22.1",
     "classnames": "^2.5.1",
-    "date-fns": "^3.5.0",
+    "date-fns": "^3.6.0",
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
     "prosemirror-commands": "^1.5.2",
-    "prosemirror-history": "^1.3.2",
+    "prosemirror-history": "^1.4.0",
     "prosemirror-inputrules": "^1.4.0",
     "prosemirror-keymap": "^1.2.2",
     "prosemirror-model": "^1.19.4",
@@ -60,7 +60,7 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.8.0",
     "prosemirror-utils": "^1.2.1-0",
-    "prosemirror-view": "^1.33.1",
+    "prosemirror-view": "^1.33.3",
     "react-animate-height": "^3.2.3",
     "react-day-picker": "^8.10.0",
     "react-focus-lock": "^2.11.2",
@@ -79,9 +79,9 @@
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
-    "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
-    "@cultureamp/frontend-apis": "^9.4.2",
-    "@cultureamp/i18n-react-intl": "^2.5.3",
+    "@babel/plugin-transform-react-pure-annotations": "^7.24.1",
+    "@cultureamp/frontend-apis": "^9.4.3",
+    "@cultureamp/i18n-react-intl": "^2.5.5",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -90,19 +90,19 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react-dom": "^18.2.22",
+    "@types/react-dom": "^18.2.23",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^9.0.8",
     "agadoo": "^3.0.0",
-    "autoprefixer": "^10.4.18",
+    "autoprefixer": "^10.4.19",
     "babel-plugin-pure-static-props": "^0.2.0",
     "concat-cli": "^4.0.0",
     "query-string": "^9.0.0",
-    "react-intl": "^6.6.2",
-    "rollup": "^4.12.1",
+    "react-intl": "^6.6.4",
+    "rollup": "^4.13.2",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-ignore": "^1.0.10",
-    "rollup-plugin-node-externals": "^7.0.1",
+    "rollup-plugin-node-externals": "^7.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.72.0",
     "serialize-query-params": "^2.0.2",
@@ -111,13 +111,13 @@
     "ts-node": "^10.9.2",
     "ts-patch": "^3.1.2",
     "typescript-transform-paths": "^3.4.7",
-    "@kaizen/design-tokens": "10.3.19",
-    "@kaizen/tailwind": "1.2.5"
+    "@kaizen/tailwind": "1.2.6",
+    "@kaizen/design-tokens": "10.3.20"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.5.3",
+    "@cultureamp/i18n-react-intl": "^2.5.5",
     "react": "^18.2.0",
-    "react-intl": "^6.6.2"
+    "react-intl": "^6.6.4"
   },
   "scripts": {
     "build": "pnpm clean && pnpm prepublishOnly",

package/src/ButtonGroup/_docs/ButtonGroup.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
+import * as ButtonGroupStories from "./ButtonGroup.stories"
+
+<Meta of={ButtonGroupStories} />
+
+# Button Group
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/ButtonGroup"
+  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?type=design&node-id=6-28579&t=bowQ0LWOQKOd0UYS-0"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093959/Filters"
+  className="!mb-8"
+/>
+
+<KAIOInstallation exportNames="ButtonGroup" />
+
+## Overview
+
+Used to group buttons. Compatible with buttons wrapped by Tooltip. Currently only compatible with Filter Buttons.
+
+<Canvas of={ButtonGroupStories.Playground} />
+<Controls of={ButtonGroupStories.Playground} />

package/src/ButtonGroup/_docs/ButtonGroup.stories.tsx

@@ -1,43 +1,20 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { FilterButtonBase } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
-import { ComponentDocsTemplate } from "~storybook/components/DocsContainer"
 import { ButtonGroup } from ".."
 
 const meta = {
-  tags: ["autodocs"],
   // Not to be nested until full KAIO migration
   // title: "Components/Button/Button Group",
   title: "Components/Button Group",
   component: ButtonGroup,
   args: { children: undefined },
-  parameters: {
-    docs: {
-      container: ComponentDocsTemplate,
-    },
-    isInKaio: true,
-    installation: [
-      "pnpm add @kaizen/components",
-      "import { ButtonGroup } from `@kaizen/components`",
-    ],
-    resourceLinks: {
-      sourceCode:
-        "https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/ButtonGroup",
-      figma:
-        "https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?type=design&node-id=6-28579&t=bowQ0LWOQKOd0UYS-0",
-      designGuidelines:
-        "https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093959/Filters",
-    },
-  },
 } satisfies Meta<typeof ButtonGroup>
 
 export default meta
 
 type Story = StoryObj<typeof meta>
 
-/**
- * Used to group buttons. Compatible with buttons wrapped by Tooltip. Currently only compatible with Filter Buttons.
- */
 export const Playground: Story = {
   render: args => (
     <ButtonGroup {...args}>

package/src/ErrorPage/_docs/ErrorPage.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
+import * as ErrorPageStories from "./ErrorPage.stories"
+
+<Meta of={ErrorPageStories} />
+
+# Error Page
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/master/packages/components/src/ErrorPage"
+  className="!mb-8"
+/>
+
+<KAIOInstallation exportNames="ErrorPage" />
+
+## Overview
+
+Error pages for when things go wrong.
+
+<Canvas of={ErrorPageStories.Playground} />
+<Controls of={ErrorPageStories.Playground} />

package/src/ErrorPage/_docs/ErrorPage.stories.tsx

@@ -1,26 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react"
-import { ComponentDocsTemplate } from "~storybook/components/DocsContainer"
 import { statusCodes } from "../hooks"
 import { ErrorPage } from "../index"
 
 const meta = {
-  tags: ["autodocs"],
   title: "Pages/Error Page",
   component: ErrorPage,
-  parameters: {
-    docs: {
-      container: ComponentDocsTemplate,
-    },
-    installation: [
-      "npm install @kaizen/components",
-      "import { ErrorPage } from `@kaizen/components`",
-    ],
-    resourceLinks: {
-      /** @todo: Add Github link (adjust as needed) */
-      sourceCode:
-        "https://github.com/cultureamp/kaizen-design-system/tree/master/packages/components/src/ErrorPage",
-    },
-  },
 } satisfies Meta<typeof ErrorPage>
 
 export default meta

package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.spec.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import React from "react"
 import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { VideoPlayer } from "./VideoPlayer"
@@ -25,7 +25,6 @@ const mockPause = jest.fn()
 
 describe("<VideoPlayer />", () => {
   beforeEach(() => {
-    jest.clearAllMocks()
     window.HTMLMediaElement.prototype.load = mockLoad
     window.HTMLMediaElement.prototype.play = mockPlay
     window.HTMLMediaElement.prototype.pause = mockPause
@@ -39,6 +38,10 @@ describe("<VideoPlayer />", () => {
     })
   })
 
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
   it("renders a video player in the document and autoplay", async () => {
     render(
       <VideoPlayer
@@ -49,7 +52,7 @@ describe("<VideoPlayer />", () => {
     )
     const videoPlayer = screen.getByTestId("kz-video-player")
     expect(videoPlayer).toBeInTheDocument()
-    expect(mockPlay).toBeCalled()
+    expect(mockPlay).toHaveBeenCalled()
   })
 
   describe("use-reduced-motion", () => {
@@ -65,8 +68,8 @@ describe("<VideoPlayer />", () => {
         />
       )
       const videoPlayer = screen.getByTestId("kz-video-player")
-      expect(videoPlayer).toMatchSnapshot()
-      expect(mockPause).toBeCalled()
+      expect(videoPlayer).not.toHaveAttribute("autoplay")
+      expect(mockPause).toHaveBeenCalled()
     })
 
     it("defaults to autoplay when user does not set use-reduced-motion preferences", () => {
@@ -81,8 +84,8 @@ describe("<VideoPlayer />", () => {
         />
       )
       const videoPlayer = screen.getByTestId("kz-video-player")
-      expect(videoPlayer).toMatchSnapshot()
-      expect(mockPlay).toBeCalled()
+      expect(videoPlayer).toHaveAttribute("autoplay")
+      expect(mockPlay).toHaveBeenCalled()
     })
   })
 

package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx

@@ -51,7 +51,9 @@ export const VideoPlayer = ({
   const videoRef = useRef<HTMLVideoElement>(null)
   const [prefersReducedMotion, setPrefersReducedMotion] =
     React.useState<boolean>(true)
-  const [sourceEl, setSourceEl] = React.useState<React.ReactNode>()
+  const [isWebmCompatible, setIsWebmCompatible] = React.useState<boolean>(false)
+  const [windowIsAvailable, setWindowIsAvailable] =
+    React.useState<boolean>(false)
 
   useEffect(() => {
     /**
@@ -151,31 +153,23 @@ export const VideoPlayer = ({
   }, [videoRef])
 
   useEffect(() => {
-    /**
-     * This seems counter-intuitive, but webm support is codec specific.
-     * Only offer webm if we are positive the browser supports it.
-     * Reference: https://bugs.webkit.org/show_bug.cgi?id=216652#c1
-     */
-    canPlayWebm() ? (
-      setSourceEl(
-        <>
-          <source src={assetUrl(`${source}.webm`)} type="video/webm" />
-          <source src={assetUrl(`${source}.mp4`)} type="video/mp4" />
-        </>
-      )
-    ) : (
-      <source src={assetUrl(`${source}.mp4`)} type="video/mp4" />
-    )
-  }, [setSourceEl])
+    // SSR does not have a window, which is required for canPlayWebm.
+    if (window !== undefined) setWindowIsAvailable(true)
+  }, [])
+
+  useEffect(() => {
+    if (windowIsAvailable) setIsWebmCompatible(canPlayWebm())
+  }, [windowIsAvailable])
 
   const pausePlay = usePausePlay(videoRef)
 
   return (
     <figure
-      className={classnames(styles.figure, {
-        [`${styles[aspectRatio!]} ${styles.aspectRatioWrapper}`]:
-          Boolean(aspectRatio),
-      })}
+      className={classnames(
+        styles.figure,
+        aspectRatio && styles[aspectRatio],
+        aspectRatio && styles.aspectRatioWrapper
+      )}
     >
       <video
         muted={true}
@@ -191,7 +185,10 @@ export const VideoPlayer = ({
         playsInline={true}
         tabIndex={-1}
       >
-        {sourceEl}
+        {isWebmCompatible && (
+          <source src={assetUrl(`${source}.webm`)} type="video/webm" />
+        )}
+        <source src={assetUrl(`${source}.mp4`)} type="video/mp4" />
       </video>
       <IconButton
         onClick={(): void => pausePlay.toggle()}

package/src/LabelledMessage/_docs/LabelledMessage.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
+import * as LabelledMessageStories from "./LabelledMessage.stories"
+
+<Meta of={LabelledMessageStories} />
+
+# Labelled Message
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/LabelledMessage"
+  className="!mb-8"
+/>
+
+<KAIOInstallation exportNames="LabelledMessage" />
+
+## Overview
+
+A label and message with a separator in between. This component supports `dir="ltr"`.
+
+<Canvas of={LabelledMessageStories.Playground} />
+<Controls of={LabelledMessageStories.Playground} />

package/src/LabelledMessage/_docs/LabelledMessage.stories.tsx

@@ -1,36 +1,17 @@
 import { Meta, StoryObj } from "@storybook/react"
-import { ComponentDocsTemplate } from "~storybook/components/DocsContainer"
 import { LabelledMessage } from "../LabelledMessage"
 
 const meta = {
-  tags: ["autodocs"],
   title: "Components/Utilities/Labelled Message",
   component: LabelledMessage,
   args: {
     label: "Label",
     message: "Custom message here",
   },
-  parameters: {
-    docs: {
-      container: ComponentDocsTemplate,
-    },
-    isInKaio: true,
-    installation: [
-      "npm install @kaizen/components",
-      'import { LabelledMessage } from "@kaizen/components"',
-    ],
-    resourceLinks: {
-      sourceCode:
-        "https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/LabelledMessage",
-    },
-  },
 } satisfies Meta<typeof LabelledMessage>
 
 export default meta
 
-/**
- * A label and message with a separator in between. This component supports `dir="ltr"`.
- */
 export const Playground: StoryObj<typeof meta> = {
   parameters: {
     docs: {

package/src/Workflow/_docs/ProgressStepper.mdx

@@ -0,0 +1,41 @@
+import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
+import { InlineNotification } from "~components/Notification"
+import { KAIOInstallation, ResourceLinks } from "~storybook/components"
+import * as ProgressStepperStories from "./ProgressStepper.stories"
+
+<Meta of={ProgressStepperStories} />
+
+# Progress Stepper
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
+  figma="https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation"
+  className="!mb-8"
+/>
+
+<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" />
+
+## 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.
+
+<Canvas of={ProgressStepperStories.Playground} />
+<Controls of={ProgressStepperStories.Playground} />
+
+## API
+
+<DocsStory of={ProgressStepperStories.ProgressStates} />
+
+<DocsStory of={ProgressStepperStories.AllStepsComplete} />
+
+<DocsStory of={ProgressStepperStories.FewerSteps} />
+
+<DocsStory of={ProgressStepperStories.EightSteps} />

package/src/Workflow/_docs/ProgressStepper.stories.tsx

@@ -1,10 +1,8 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { ComponentDocsTemplate } from "~storybook/components/DocsContainer"
 import { Workflow } from "../"
 
 const meta = {
-  tags: ["autodocs"],
   title: "Pages/Workflow/Components/Progress Stepper",
   component: Workflow.ProgressStepper,
   args: {
@@ -12,25 +10,6 @@ const meta = {
     steps: ["Settings", "Questions", "Preview", "Employees", "Schedule"],
     isComplete: false,
   },
-  parameters: {
-    docs: {
-      source: { type: "code" },
-      container: ComponentDocsTemplate,
-    },
-    installation: [
-      "pnpm add @kaizen/workflow",
-      "import { ProgressStepper } from `@kaizen/components`",
-    ],
-    resourceLinks: {
-      sourceCode:
-        "https://github.com/cultureamp/kaizen-design-system/tree/main/packages/workflow/",
-      figma:
-        "https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1",
-      /** @todo (optional): Add Confluence link */
-      designGuidelines:
-        "https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation",
-    },
-  },
   decorators: [
     Story => (
       <div className="bg-blue-500 p-8">

package/src/Workflow/_docs/Workflow.mdx

@@ -5,7 +5,7 @@ import * as Workflow from "./Workflow.stories"
 import * as WorkflowFooter from "./WorkflowFooter.stories"
 import * as WorkflowHeader from "./WorkflowHeader.stories"
 
-<Meta title="Pages/Workflow/Legacy" />
+<Meta of={Workflow} />
 
 # Workflow
 
@@ -14,7 +14,6 @@ import * as WorkflowHeader from "./WorkflowHeader.stories"
   className="!mb-8"
 />
 
-
 <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.`}

package/src/Workflow/_docs/Workflow.stories.tsx

@@ -27,7 +27,7 @@ const MockContent = (): JSX.Element => (
 )
 
 const meta = {
-  title: "Pages/Workflow/Components/Workflow",
+  title: "Pages/Workflow",
   component: Workflow,
   argTypes: WorkflowControls,
   args: {

package/src/Workflow/_docs/WorkflowFooter.mdx

@@ -0,0 +1,41 @@
+import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
+import { InlineNotification } from "~components/Notification"
+import { KAIOInstallation, ResourceLinks } from "~storybook/components"
+import * as WorkflowFooterStories from "./WorkflowFooter.stories"
+
+<Meta of={WorkflowFooterStories} />
+
+# Footer
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
+  figma="https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation"
+  className="!mb-8"
+/>
+
+<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" />
+
+## Overview
+
+<Canvas of={WorkflowFooterStories.Playground} />
+<Controls of={WorkflowFooterStories.Playground} />
+
+## API
+
+<DocsStory of={WorkflowFooterStories.FirstStep} />
+
+<DocsStory of={WorkflowFooterStories.NextStepDisabled} />
+
+<DocsStory of={WorkflowFooterStories.LastStep} />
+
+<DocsStory of={WorkflowFooterStories.AllStepsComplete} />
+
+<DocsStory of={WorkflowFooterStories.FewerSteps} />
+
+<DocsStory of={WorkflowFooterStories.EightSteps} />

package/src/Workflow/_docs/WorkflowFooter.stories.tsx

@@ -1,32 +1,12 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { Button } from "~components/Button"
-import { ComponentDocsTemplate } from "~storybook/components/DocsContainer"
 import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 
 const meta = {
-  tags: ["autodocs"],
   title: "Pages/Workflow/Components/Footer",
   component: Workflow.Footer,
-  parameters: {
-    docs: {
-      sourceState: "shown",
-      container: ComponentDocsTemplate,
-    },
-    installation: [
-      "pnpm add @kaizen/components",
-      "import { Workflow } from `@kaizen/components`",
-    ],
-    resourceLinks: {
-      sourceCode:
-        "https://github.com/cultureamp/kaizen-design-system/tree/main/packages/workflow/",
-      figma:
-        "https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1",
-      designGuidelines:
-        "https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation",
-    },
-  },
   argTypes: {
     nextAction: WorkflowControls.nextAction,
     previousAction: WorkflowControls.previousAction,

package/src/Workflow/_docs/WorkflowHeader.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
+import { InlineNotification } from "~components/Notification"
+import { KAIOInstallation, ResourceLinks } from "~storybook/components"
+import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
+
+<Meta of={WorkflowHeaderStories} />
+
+# Header
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
+  figma="https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation"
+  className="!mb-8"
+/>
+
+<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" />
+
+## Overview
+
+<Canvas of={WorkflowHeaderStories.Playground} />
+<Controls of={WorkflowHeaderStories.Playground} />
+
+## API
+
+<DocsStory of={WorkflowHeaderStories.MultipleActions} />

package/src/Workflow/_docs/WorkflowHeader.stories.tsx

@@ -2,32 +2,12 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { Button } from "~components/Button"
 import { CloseIcon, VisibleIcon } from "~components/Icon"
-import { ComponentDocsTemplate } from "~storybook/components/DocsContainer"
 import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 
 const meta = {
-  tags: ["autodocs"],
   title: "Pages/Workflow/Components/Header",
   component: Workflow.Header,
-  parameters: {
-    docs: {
-      sourceState: "shown",
-      container: ComponentDocsTemplate,
-    },
-    installation: [
-      "pnpm add @kaizen/components",
-      "import { Workflow } from `@kaizen/components`",
-    ],
-    resourceLinks: {
-      sourceCode:
-        "https://github.com/cultureamp/kaizen-design-system/tree/main/packages/workflow/",
-      figma:
-        "https://www.figma.com/file/IJTy1JpS4Xyop5cQwroRje/%F0%9F%9B%A0%EF%B8%8F-Self-reflection%3A-Build-Handoff?node-id=188%3A62005&t=x4zyx07E2G3BmKGw-1",
-      designGuidelines:
-        "https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064989884/Documentation",
-    },
-  },
   argTypes: {
     headerActions: WorkflowControls.headerActions,
   },

package/src/__future__/Workflow/_docs/Workflow.mdx

@@ -4,7 +4,7 @@ import * as Workflow from "./Workflow.stories"
 import * as WorkflowFooter from "./WorkflowFooter.stories"
 import * as WorkflowHeader from "./WorkflowHeader.stories"
 
-<Meta title="Pages/Workflow" />
+<Meta of={Workflow} />
 
 # Workflow
 

package/src/__future__/Workflow/_docs/Workflow.stories.tsx

@@ -27,7 +27,7 @@ const MockContent = (): JSX.Element => (
 )
 
 const meta = {
-  title: "Pages/Workflow/Future/Components/Workflow",
+  title: "Pages/Workflow/Future",
   component: Workflow,
   argTypes: WorkflowControls,
   args: {