@kaizen/components 1.61.3 → 1.63.0

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.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} />

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

@@ -1,70 +0,0 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { CloseIcon, VisibleIcon } from "~components/Icon"
-import { Button } from "~components/__actions__/v2"
-import { Workflow } from "../"
-import { WorkflowControls } from "./controls"
-
-const meta = {
-  title: "Layout/Workflow/Workflow (v2)/Components/Header",
-  component: Workflow.Header,
-  argTypes: {
-    ...WorkflowControls.headerActions,
-  },
-  args: {
-    workflowName: "Create a self-reflection cycle",
-    stepName: "Settings",
-    status: {
-      content: "Draft",
-      variant: "statusDraft",
-    },
-    headerActions: [
-      <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")}
-      />,
-    ],
-  },
-} satisfies Meta<typeof Workflow.Header>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: "shown",
-      },
-    },
-  },
-}
-
-/** <p>`headerActions` gives consumers the ability to add multiple `JSX Element`'s to top of the Workflow Header. We assume these will be Button or Button-like components</p>
- * <p>There is no limit to the number of actions you can pass in, but please consider the limited realesate with labels.</p>  */
-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")}
-      />,
-    ],
-  },
-}

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

@@ -1,93 +0,0 @@
-import React from "react"
-import { ArgTypes } from "@storybook/react"
-import { CloseIcon, VisibleIcon } from "~components/Icon"
-import { Button } from "~components/__actions__/v2"
-
-export const WorkflowControls: Partial<ArgTypes> = {
-  headerActions: {
-    control: {
-      type: "radio",
-    },
-    options: ["Single action", "Multiple actions", "No actions"],
-    mapping: {
-      "Single action": [
-        <Button
-          key="would-use-uui-1"
-          label="Close"
-          icon={<CloseIcon role="presentation" />}
-          secondary
-          iconPosition="end"
-        />,
-      ],
-      "Multiple actions": [
-        <Button
-          key="would-use-uui-1"
-          label="Close"
-          icon={<CloseIcon role="presentation" />}
-          secondary
-          iconPosition="end"
-        />,
-        <Button
-          key="would-use-uui-2"
-          label="Preview"
-          icon={<VisibleIcon role="presentation" />}
-          secondary
-          iconPosition="start"
-        />,
-      ],
-      "No actions": [],
-    },
-  },
-  nextAction: {
-    control: {
-      type: "radio",
-    },
-    options: ["Next active", "Next disabled", "Next submit", "No next action"],
-    mapping: {
-      "Next active": <Button reversed label="Next" />,
-      "Next disabled": <Button reversed disabled label="Next" />,
-      "Next submit": (
-        <Button reversed formTarget="workflow-form-id" primary label="Finish" />
-      ),
-      "No next action": undefined,
-    },
-  },
-  previousAction: {
-    control: {
-      type: "radio",
-    },
-    options: [
-      "Previous active",
-      "Previous disabled",
-      "Previous submit",
-      "No Previous action",
-    ],
-    mapping: {
-      "Previous active": <Button reversed label="Back" />,
-      "Previous disabled": <Button reversed disabled label="Back" />,
-      "Previous submit": (
-        <Button reversed formTarget="workflow-form-id" primary label="Back" />
-      ),
-      "No Previous action": undefined,
-    },
-  },
-  currentStepId: {
-    control: {
-      type: "select",
-    },
-    options: [
-      "settings-step",
-      "questions-step",
-      "preview-step",
-      "employees-step",
-      "schedule-step",
-    ],
-    mapping: {
-      "settings-step": "settings-step",
-      "questions-step": "questions-step",
-      "preview-step": "preview-step",
-      "employees-step": "employees-step",
-      "schedule-step": "schedule-step",
-    },
-  },
-}

package/src/__layout__/Workflow/v2/_docs/controls/index.tsx

@@ -1 +0,0 @@
-export * from "./controls"

package/src/__layout__/Workflow/v2/index.ts

@@ -1,10 +0,0 @@
-// 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

package/src/__layout__/Workflow/v2/subcomponents/Footer/components/FooterActions/FooterActions.module.scss

@@ -1,15 +0,0 @@
-.footerAction {
-  display: flex;
-  flex-grow: 1;
-  flex-basis: auto;
-}
-
-.footerActionPrevious {
-  grid-area: "prev";
-  justify-content: start;
-}
-
-.footerActionNext {
-  grid-area: "next";
-  justify-content: end;
-}

package/src/__layout__/Workflow/v2/subcomponents/Footer/components/FooterActions/FooterActions.tsx

@@ -1,28 +0,0 @@
-import React, { HTMLAttributes } from "react"
-import classnames from "classnames"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./FooterActions.module.scss"
-
-export type FooterActionsProps = {
-  actionType?: "Previous" | "Next"
-  action?: JSX.Element
-} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "children">>
-
-/** A simple wrapper for a Footer previous or next action  */
-export const FooterAction = ({
-  actionType = "Previous",
-  action,
-  ...restProps
-}: FooterActionsProps): JSX.Element => (
-  <div
-    className={classnames([
-      styles.footerAction,
-      styles[`footerAction${actionType}`],
-    ])}
-    {...restProps}
-  >
-    {action}
-  </div>
-)
-
-FooterAction.displayName = "Workflow.FooterActions"

package/src/__layout__/Workflow/v2/subcomponents/Footer/components/FooterActions/index.ts

@@ -1 +0,0 @@
-export * from "./FooterActions"

package/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/index.ts

@@ -1 +0,0 @@
-export * from "./ProgressStepper"