@kaizen/components 1.41.1 → 1.42.1

package/src/Modal/ContextModal/_docs/ContextModal.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import isChromatic from "chromatic"
 import { AddImage } from "~components/Illustration"
 import { ModalAccessibleDescription } from "~components/Modal/GenericModal/subcomponents/ModalAccessibleDescription"
@@ -9,6 +10,26 @@ import { ContextModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
+const meta = {
+  title: "Components/Modals/Context Modal",
+  component: ContextModal,
+  args: {
+    isOpen: false,
+    title: "Context modal title",
+    children: undefined,
+    onDismiss: fn(),
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+} satisfies Meta<typeof ContextModal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
 const ContextModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)
@@ -72,25 +93,6 @@ const ContextModalTemplate: Story = {
   },
 }
 
-const meta = {
-  title: "Components/Modals/Context Modal",
-  component: ContextModal,
-  args: {
-    isOpen: false,
-    title: "Context modal title",
-    children: undefined,
-  },
-  argTypes: {
-    children: {
-      control: false,
-    },
-  },
-} satisfies Meta<typeof ContextModal>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
 export const Playground: Story = {
   ...ContextModalTemplate,
   parameters: {

package/src/Modal/InputEditModal/InputEditModal.tsx

@@ -30,7 +30,7 @@ export type InputEditModalProps = {
   automationId?: string
   children: React.ReactNode
   submitWorking?: { label: string; labelHidden?: boolean }
-} & HTMLAttributes<HTMLDivElement>
+} & Omit<HTMLAttributes<HTMLDivElement>, "onSubmit">
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal#Input-Edit-Modal Guidance} |

package/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import isChromatic from "chromatic"
 import { ModalAccessibleDescription } from "~components/Modal"
 import { Text } from "~components/Text"
@@ -9,33 +10,6 @@ import { InputEditModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
-const InputModalTemplate: Story = {
-  render: args => {
-    const [isOpen, setIsOpen] = useState(IS_CHROMATIC)
-
-    const handleOpen = (): void => setIsOpen(true)
-    const handleClose = (): void => setIsOpen(false)
-
-    return (
-      <>
-        <button
-          type="button"
-          className="border border-gray-500"
-          onClick={handleOpen}
-        >
-          Open Modal
-        </button>
-        <InputEditModal
-          {...args}
-          isOpen={isOpen}
-          onSubmit={handleClose}
-          onDismiss={handleClose}
-        />
-      </>
-    )
-  },
-}
-
 const ExampleForm = (): JSX.Element => (
   <>
     <ModalAccessibleDescription>
@@ -58,6 +32,8 @@ const meta = {
     mood: "positive",
     children: <ExampleForm />,
     submitLabel: "Submit label",
+    onSubmit: fn(),
+    onDismiss: fn(),
   },
   argTypes: {
     children: {
@@ -70,6 +46,33 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+const InputModalTemplate: Story = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(IS_CHROMATIC)
+
+    const handleOpen = (): void => setIsOpen(true)
+    const handleClose = (): void => setIsOpen(false)
+
+    return (
+      <>
+        <button
+          type="button"
+          className="border border-gray-500"
+          onClick={handleOpen}
+        >
+          Open Modal
+        </button>
+        <InputEditModal
+          {...args}
+          isOpen={isOpen}
+          onSubmit={handleClose}
+          onDismiss={handleClose}
+        />
+      </>
+    )
+  },
+}
+
 export const Playground: Story = {
   ...InputModalTemplate,
   parameters: {

package/src/MultiSelect/_docs/MultiSelect.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { MultiSelect, MultiSelectProps } from "../index"
 
 const meta = {
@@ -41,6 +42,8 @@ const meta = {
         value: "toastie",
       },
     ],
+    onSelectedValuesChange: fn(),
+    onOpenChange: fn(),
   },
 } satisfies Meta<typeof MultiSelect>
 

package/src/MultiSelect/subcomponents/MultiSelectOptions/_docs/MultiSelectOptions.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { MultiSelectOptions, MultiSelectOptionsProps } from "../index"
 
 const meta = {
@@ -22,6 +23,7 @@ const meta = {
         value: "toastie",
       },
     ],
+    onChange: fn(),
   },
 } satisfies Meta<typeof MultiSelectOptions>
 

package/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { Button } from "~components/Button"
 import {
   EditorContentArray,
@@ -15,6 +16,7 @@ const meta = {
   args: {
     content: dummyContent,
     labelText: "Editable rich text content",
+    onClick: fn(),
   },
   argTypes: {
     content: { control: "disabled" },

package/src/TimeField/_docs/TimeField.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 import { TimeField } from "../index"
 import { ValueType } from "../types"
 
@@ -18,6 +19,7 @@ const meta = {
     label: "Time",
     locale: "en-US",
     value: null,
+    onChange: fn(),
   },
 } satisfies Meta<typeof TimeField>
 

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: {

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

@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<VideoPlayer /> use-reduced-motion defaults to autoplay when user does not set use-reduced-motion preferences 1`] = `
-<video
-  aria-hidden="true"
-  autoplay=""
-  class="wrapper"
-  data-testid="kz-video-player"
-  muted=""
-  playsinline=""
-  poster="https://d1e7r7b0lb8p4d.cloudfront.net/illustrations/heart/spot/moods-cautionary.svg.png"
-  preload="metadata"
-  tabindex="-1"
-  width="100%"
-/>
-`;
-
-exports[`<VideoPlayer /> use-reduced-motion respects the use-reduced-motion preferences of the user 1`] = `
-<video
-  aria-hidden="true"
-  class="wrapper"
-  data-testid="kz-video-player"
-  muted=""
-  playsinline=""
-  poster="https://d1e7r7b0lb8p4d.cloudfront.net/illustrations/heart/spot/moods-cautionary.svg.png"
-  preload="metadata"
-  tabindex="-1"
-  width="100%"
-/>
-`;