@kaizen/components 1.62.0 → 1.63.0

package/src/__layout__/Workflow/v1/subcomponents/Header/components/Root/Root.tsx

@@ -1,20 +0,0 @@
-import React, { HTMLAttributes } from "react"
-import classnames from "classnames"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./Root.module.scss"
-
-export type HeaderRootProps = OverrideClassName<
-  HTMLAttributes<HTMLHeadingElement>
->
-
-export const HeaderRoot = ({
-  children,
-  classNameOverride,
-  ...restProps
-}: HeaderRootProps): JSX.Element => (
-  <header className={classnames(styles.root, classNameOverride)} {...restProps}>
-    {children}
-  </header>
-)
-
-HeaderRoot.displayName = "Workflow.HeaderRoot"

package/src/__layout__/Workflow/v1/subcomponents/Header/components/Titles/Titles.module.scss

@@ -1,23 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.titles {
-  grid-area: titles;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-}
-
-.pageTitle {
-  display: flex;
-  flex-direction: column;
-}
-
-.prefix {
-  margin-bottom: $spacing-4;
-}
-
-.status {
-  margin-top: $spacing-8;
-}

package/src/__layout__/Workflow/v1/subcomponents/Header/components/Titles/Titles.tsx

@@ -1,55 +0,0 @@
-import React, { HTMLAttributes } from "react"
-import { Heading } from "~components/Heading"
-import { Tag, DefaultTagProps } from "~components/Tag"
-import { VisuallyHidden } from "~components/VisuallyHidden"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./Titles.module.scss"
-
-export type WorkflowStatus = {
-  /** @default: "statusDraft" */
-  variant?: DefaultTagProps["variant"]
-  content?: string
-}
-
-export type WorkflowTitlesProps = {
-  workflowName: string
-  stepName: string
-  status?: WorkflowStatus
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
-
-export const Titles = ({
-  workflowName,
-  stepName,
-  status,
-  ...restProps
-}: WorkflowTitlesProps): JSX.Element => (
-  <div className={styles.titles} {...restProps}>
-    <Heading
-      variant="heading-1"
-      tag="h1"
-      color="dark"
-      classNameOverride={styles.pageTitle}
-    >
-      <Heading
-        classNameOverride={styles.prefix}
-        variant="heading-6"
-        tag="span"
-        color="dark-reduced-opacity"
-      >
-        {workflowName}
-        <VisuallyHidden>:</VisuallyHidden>
-      </Heading>
-      <span>{stepName}</span>
-    </Heading>
-    {status && (
-      // status may need to be update by a fetch
-      <div className={styles.status}>
-        <Tag inline variant={status?.variant || "statusDraft"}>
-          {status?.content}
-        </Tag>
-      </div>
-    )}
-  </div>
-)
-
-Titles.displayName = "Workflow.Titles"

package/src/__layout__/Workflow/v1/subcomponents/Main/Main.module.scss

@@ -1,4 +0,0 @@
-.main {
-  // This is set so children will sit beneath the header and footer when sticky
-  z-index: 0;
-}

package/src/__layout__/Workflow/v1/subcomponents/Main/Main.tsx

@@ -1,22 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from "react"
-import classnames from "classnames"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./Main.module.scss"
-
-export type WorkflowMainProps = OverrideClassName<
-  HTMLAttributes<HTMLDivElement>
-> & {
-  children: ReactNode
-}
-
-export const Main = ({
-  children,
-  classNameOverride,
-  ...restProps
-}: WorkflowMainProps): JSX.Element => (
-  <main className={classnames([styles.main, classNameOverride])} {...restProps}>
-    {children}
-  </main>
-)
-
-Main.displayName = "Workflow.Main"

package/src/__layout__/Workflow/v1/subcomponents/Wrapper/Wrapper.module.scss

@@ -1,9 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-
-.wrapper {
-  display: grid;
-  grid-template-rows: min-content 1fr min-content;
-  position: relative;
-  min-height: 100vh;
-  background: $color-gray-100;
-}

package/src/__layout__/Workflow/v1/subcomponents/Wrapper/Wrapper.tsx

@@ -1,22 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from "react"
-import classnames from "classnames"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./Wrapper.module.scss"
-
-export type WorkflowWrapperProps = OverrideClassName<
-  HTMLAttributes<HTMLDivElement>
-> & {
-  children: ReactNode
-}
-
-export const Wrapper = ({
-  children,
-  classNameOverride,
-  ...restProps
-}: WorkflowWrapperProps): JSX.Element => (
-  <div className={classnames(styles.wrapper, classNameOverride)} {...restProps}>
-    {children}
-  </div>
-)
-
-Wrapper.displayName = "Workflow.Wrapper"

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

@@ -1,55 +0,0 @@
-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" | "status" | "headerActions">
-
-export const Workflow = ({
-  steps,
-  currentStepId,
-  isComplete,
-  workflowName,
-  status,
-  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}
-        status={status}
-        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

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],
-    },
-  },
-}