@kaizen/components 1.62.0 → 1.63.1

package/src/__layout__/Workflow/v2/_docs/ProgressStepper.mdx

@@ -1,38 +0,0 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { Installation, 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"
-
-/>
-
-<Installation
-  installCommand="pnpm add @kaizen/components"
-  importStatement='import { Workflow } from "@kaizen/components/v2/layout"'
-/>
-
-## 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/__layout__/Workflow/v2/_docs/ProgressStepper.stories.tsx

@@ -1,94 +0,0 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Workflow } from "../"
-import { WorkflowControls } from "./controls"
-
-const meta = {
-  title: "Layout/Workflow/Workflow (v2)/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,
-  },
-  decorators: [
-    Story => (
-      <div className="bg-blue-500 p-8">
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof Workflow.ProgressStepper>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-/**
- * <p>This component is used in the `Footer` to track progress of the Workflows steps.</p>
- * <p>It has no reverse variant and should only be used in the Worflow's `Footer` component.</p>
- */
-export const Playground: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: "shown",
-      },
-    },
-  },
-}
-
-/** <p>To ensure WCAG AA compliance, there are 3 visually destinct states.</p>
- * <p>These are reflected in their accessible names for screen reader: "Completed", "Current" and "Not started"</p>
- */
-export const ProgressStates: Story = {
-  args: {
-    currentStepId: "questions-step",
-  },
-}
-
-/**
- * <p>You can use the `isComplete` follow a successful submission to render all steps as complete.</p>
- */
-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" },
-    ],
-  },
-}
-
-/**
- * <p>We have baked in a container query to ensure the component can be responsive.</p>
- * <p>When a step reaches its minimum size (4.5rem), it will hide the display name to maximise realestate.</p>
- */
-export const 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" },
-    ],
-  },
-}

package/src/__layout__/Workflow/v2/_docs/Workflow.mdx

@@ -1,165 +0,0 @@
-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"
-
-<Meta of={Workflow} />
-
-# Workflow
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Workflow"
-
-/>
-
-<Installation
-  installCommand="pnpm add @kaizen/components"
-  importStatement='import { Workflow } from "@kaizen/components/v2/layout"'
-/>
-
-## 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).
-
-<Canvas layout="fullscreen" of={Workflow.Playground} />
-
-## 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.
-
-<Canvas
-  layout="fullscreen"
-  of={WorkflowHeader.MultipleActions}
-  source={{code: `<Workflow
-    headerActions={[
-      <Button
-        key="would-use-uui-1"
-        label="Preview"
-        icon={VisibleIcon}
-        secondary
-        iconPosition="start"
-      />,
-      <Button
-        key="would-use-uui-2"
-        label="Save and close"
-        icon={CloseIcon}
-        secondary
-        iconPosition="end"
-      />
-    ]}
-    {...otherProps}
-  >
-    <MockContent />
-  </Workflow>`}}
-/>
-
-
-## Handling a Workflow exit
-
-A common pattern identified is a Workflow Exit button. An implementation of this component should be passed to the `headerActions` an array to handle a user leaving a Workflow. We've provided an example below that combines a Kaizen `Button` with the `ConfirmationModal` component.
-
-<Canvas
-  layout="fullscreen"
-  of={WorkflowHeader.Playground}
-  source={{code: `
-  const [showModal, setShowModal] = useState<boolean>(false)
-  ...
-  return (
-    <>
-      <Button
-        label={exitLabel}
-        icon={closeIcon}
-        iconPosition="end"
-        secondary
-        onClick={() => setShowModal(true)}
-      />
-      <ConfirmationModal
-        isOpen={showModal}
-        mood={mood}
-        isProminent={true}
-        title={exitTitle}
-        confirmLabel={confirmExitLabel}
-        dismissLabel={dismissExitLabel}
-        onConfirm={onConfirmExitCallback}
-        onDismiss={() => {
-          setShowModal(false)
-        }}
-      >
-        <div>
-          <Text variant="body">{exitDescription}</Text>
-        </div>
-      </ConfirmationModal>
-    </>
-  )`
-  }}
-/>
-
-## Tracking progress
-
-The Footer tracks the progress of the form by using finding the index of the `currentStepId` within the `steps` array.
-
-<Canvas
-  layout="fullscreen"
-  of={WorkflowFooter.FirstStep}
-  source={{code: `<Workflow
-    currentStepId="settings-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" },
-    ]}
-    {...otherProps}
-  >
-    <MockContent />
-  </Workflow>`}}
-/>
-
-The Footer is agnostic to the JSX elements that are used in the `previousAction` and `nextAction`. While we recommend using the Kaizen Button, a button-like component can be used in its place to satisfy project-specific requirements.
-
-
-To hide, disable or change the appearance of the Footer buttons you can leverage the props available for the `@kaizen/button` or pass in undefined to not render the component.
-
-<Canvas
-  layout="fullscreen"
-  of={WorkflowFooter.LastStep}
-  source={{code: `<Workflow
-    nextAction={<Button disabled label="Finish" primary reversed/>}
-    previousAction={<Button label="Back" reversed/>}
-    {...otherProps}
-  >
-    <MockContent />
-  </Workflow>`}}
-/>
-
-In Instances where users are returning to a completed workflow you can pass the `isComplete` prop to set the indicators to their "complete" status. This will also be reflected in their Aria title.
-
-<Canvas
-  layout="fullscreen"
-  of={WorkflowFooter.AllStepsComplete}
-  source={{code: `<Workflow
-    isComplete
-    {...otherProps}
-  >
-    <MockContent />
-  </Workflow>`}}
-/>
-
-## Composable Worflow
-
-While we do not advise this path, a composable Workflow may be created if required. Refer to the component's stories on how to consume each subcomponent.
-
-<Canvas layout="fullscreen" of={Workflow.ComposableWorkflow} />
-
-
-## Worflow API at a glance
-
-<ArgTypes of={Workflow.Playground} />

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

@@ -1,174 +0,0 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { CloseIcon, VisibleIcon } from "~components/Icon"
-import { TextField } from "~components/TextField"
-import { Button } from "~components/__actions__/v2"
-import { Workflow } from "../"
-import { WorkflowControls } from "./controls"
-
-const MockContent = (): JSX.Element => (
-  <div className="flex flex-col flex-1 m-24 items-center">
-    <div className="max-w-[1392px] w-full">
-      <h2>Name and schedule the self-reflection cycle</h2>
-      <form
-        id="workflow-form-id"
-        className="bg-white rounded shadow-sm my-32 p-64"
-      >
-        <h3>Name the cycle</h3>
-        <TextField
-          labelText="Cycle name"
-          type="text"
-          id="input-workflow"
-          description="This is the name that will be displayed across the cycle for everyone"
-        />
-      </form>
-    </div>
-  </div>
-)
-
-const meta = {
-  title: "Layout/Workflow/Workflow (v2)",
-  component: Workflow,
-  argTypes: WorkflowControls,
-  args: {
-    workflowName: "Create a self-reflection cycle",
-    currentStepId: "settings-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,
-    status: {
-      content: "Draft",
-      variant: "statusDraft",
-    },
-    previousAction: <Button reversed label="Back" />,
-    nextAction: <Button reversed label="Next" />,
-    headerActions: [
-      <Button
-        key="would-use-uui-2"
-        label="Save and close"
-        icon={<CloseIcon role="presentation" />}
-        secondary
-        iconPosition="end"
-      />,
-    ],
-    children: <MockContent />,
-  },
-} satisfies Meta<typeof Workflow>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: "shown",
-      },
-    },
-    chromatic: { disable: false },
-  },
-}
-
-export const MultipleActions: Story = {
-  args: {
-    headerActions: [
-      <Button
-        key="would-use-uui-1"
-        label="Preview"
-        icon={<VisibleIcon role="presentation" />}
-        secondary
-        iconPosition="start"
-      />,
-      <Button
-        key="would-use-uui-2"
-        label="Save and close"
-        icon={<CloseIcon role="presentation" />}
-        secondary
-        iconPosition="end"
-        onClick={(): void => alert("mock example of a save action")}
-      />,
-    ],
-  },
-}
-
-export const FinalStep: Story = {
-  args: { currentStepId: "schedule-step" },
-}
-
-export const CompletedWorkflow: Story = {
-  args: { isComplete: true },
-  parameters: { chromatic: { disable: false } },
-}
-
-export const ComposableWorkflow: Story = {
-  render: ({
-    steps,
-    isComplete,
-    workflowName,
-    currentStepId,
-    status,
-    headerActions,
-    previousAction,
-    nextAction,
-    ...restProps
-  }) => (
-    <Workflow.Wrapper {...restProps}>
-      <Workflow.Header
-        workflowName={workflowName}
-        stepName={steps.find(step => step.id === currentStepId)!.label}
-        status={status}
-        headerActions={headerActions}
-      />
-      <Workflow.Main>
-        <h3>Content</h3>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta error
-          labore dolorum debitis eaque laboriosam qui quidem itaque
-          necessitatibus obcaecati aut earum consectetur excepturi accusamus
-          nulla libero maxime, quibusdam vero?
-        </p>
-      </Workflow.Main>
-      <Workflow.Footer
-        currentStepId={currentStepId}
-        steps={steps}
-        isComplete={isComplete}
-        nextAction={nextAction}
-        previousAction={previousAction}
-      />
-    </Workflow.Wrapper>
-  ),
-  parameters: { chromatic: { disable: false } },
-}
-
-export const ResponsiveWorkflow: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: "hidden",
-      },
-    },
-    viewport: {
-      viewports: {
-        vieportZoomed: {
-          name: "Simulate 400% zoom",
-          styles: {
-            width: "500px",
-            height: "800px",
-          },
-          type: "mobile",
-        },
-      },
-      defaultViewport: "vieportZoomed",
-    },
-    chromatic: {
-      disable: false,
-      viewports: [500, 1200],
-    },
-  },
-}

package/src/__layout__/Workflow/v2/_docs/WorkflowFooter.mdx

@@ -1,38 +0,0 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { Installation, 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"
-
-/>
-
-<Installation
-  installCommand="pnpm add @kaizen/components"
-  importStatement='import { Workflow } from "@kaizen/components/v2/layout"'
-/>
-
-## 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/__layout__/Workflow/v2/_docs/WorkflowFooter.stories.tsx

@@ -1,96 +0,0 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/__actions__/v2"
-import { Workflow } from "../"
-import { WorkflowControls } from "./controls"
-
-const meta = {
-  title: "Layout/Workflow/Workflow (v2)/Components/Footer",
-  component: Workflow.Footer,
-  argTypes: {
-    ...WorkflowControls.nextAction,
-    ...WorkflowControls.previousAction,
-    ...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,
-    previousAction: <Button reversed label="Back" />,
-    nextAction: <Button reversed label="Next" />,
-  },
-} satisfies Meta<typeof Workflow.Footer>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: "shown",
-      },
-    },
-  },
-}
-
-/** <p>Next and previous button are passed in by the consumer to allow for page routing method to be determined by the user</p> */
-export const FirstStep: Story = {
-  args: { currentStepId: "settings-step" },
-}
-
-export const NextStepDisabled: Story = {
-  args: { nextAction: <Button disabled reversed label="Next" /> },
-}
-
-export const LastStep: Story = {
-  args: {
-    currentStepId: "schedule-step",
-    nextAction: (
-      <Button
-        reversed
-        primary
-        disabled
-        form="worflow-form-id-for-submit"
-        label="Finish"
-      />
-    ),
-  },
-}
-
-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" },
-    ],
-  },
-}
-
-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" },
-    ],
-  },
-}

package/src/__layout__/Workflow/v2/_docs/WorkflowHeader.mdx

@@ -1,28 +0,0 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { Installation, 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"
-
-/>
-
-<Installation
-  installCommand="pnpm add @kaizen/components"
-  importStatement='import { Workflow } from "@kaizen/components/v2/layout"'
-/>
-
-## Overview
-
-<Canvas of={WorkflowHeaderStories.Playground} />
-<Controls of={WorkflowHeaderStories.Playground} />
-
-## API
-
-<DocsStory of={WorkflowHeaderStories.MultipleActions} />