@kaizen/components 1.60.2 → 1.61.0

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

@@ -0,0 +1,172 @@
+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 { Tag } from "~components/__future__"
+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 (v3)",
+  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,
+    statusTag: <Tag color="purple">Draft</Tag>,
+    previousAction: <Button label="Back" />,
+    nextAction: <Button primary 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,
+    statusTag,
+    headerActions,
+    previousAction,
+    nextAction,
+    ...restProps
+  }) => (
+    <Workflow.Wrapper {...restProps}>
+      <Workflow.Header
+        workflowName={workflowName}
+        stepName={steps.find(step => step.id === currentStepId)!.label}
+        statusTag={statusTag}
+        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/v3/_docs/WorkflowFooter.mdx

@@ -0,0 +1,38 @@
+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/v3/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/v3/_docs/WorkflowFooter.stories.tsx

@@ -0,0 +1,95 @@
+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 (v3)/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 label="Back" />,
+    nextAction: <Button primary 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 primary label="Next" /> },
+}
+
+export const LastStep: Story = {
+  args: {
+    currentStepId: "schedule-step",
+    nextAction: (
+      <Button
+        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/v3/_docs/WorkflowHeader.mdx

@@ -0,0 +1,28 @@
+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/v3/layout"'
+/>
+
+## Overview
+
+<Canvas of={WorkflowHeaderStories.Playground} />
+<Controls of={WorkflowHeaderStories.Playground} />
+
+## API
+
+<DocsStory of={WorkflowHeaderStories.MultipleActions} />

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

@@ -0,0 +1,68 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { CloseIcon, VisibleIcon } from "~components/Icon"
+import { Button } from "~components/__actions__/v2"
+import { Tag } from "~components/__future__"
+import { Workflow } from "../"
+import { WorkflowControls } from "./controls"
+
+const meta = {
+  title: "Layout/Workflow/Workflow (v3)/Components/Header",
+  component: Workflow.Header,
+  argTypes: {
+    ...WorkflowControls.headerActions,
+  },
+  args: {
+    workflowName: "Create a self-reflection cycle",
+    stepName: "Settings",
+    statusTag: <Tag color="purple">Draft</Tag>,
+    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/v3/_docs/controls/controls.tsx

@@ -0,0 +1,93 @@
+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 primary label="Next" />,
+      "Next disabled": <Button primary disabled label="Next" />,
+      "Next submit": (
+        <Button 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 label="Back" />,
+      "Previous disabled": <Button disabled label="Back" />,
+      "Previous submit": (
+        <Button 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/v3/_docs/controls/index.tsx

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

package/src/__layout__/Workflow/v3/subcomponents/Footer/Footer.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import {
+  FooterRoot,
+  FooterAction,
+  ProgressStepper,
+  ProgressStepperProps,
+  FooterRootProps,
+} from "./components"
+
+export type FooterProps = {
+  /** An action to return to a previous step */
+  previousAction?: JSX.Element
+  /** An action to progress to the next step or submit the form */
+  nextAction?: JSX.Element
+} & ProgressStepperProps &
+  OverrideClassName<Omit<FooterRootProps, "children">>
+
+export const Footer = ({
+  steps,
+  currentStepId,
+  isComplete,
+  previousAction,
+  nextAction,
+  ...restProps
+}: FooterProps): JSX.Element => (
+  <FooterRoot {...restProps}>
+    <FooterAction action={previousAction} actionType="Previous" />
+    <ProgressStepper
+      steps={steps}
+      currentStepId={currentStepId}
+      isComplete={isComplete}
+    />
+    <FooterAction action={nextAction} actionType="Next" />
+  </FooterRoot>
+)
+
+Footer.displayName = "Workflow.Footer"

package/src/__layout__/Workflow/v3/subcomponents/Footer/components/FooterActions/FooterActions.module.css

@@ -0,0 +1,15 @@
+.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/v3/subcomponents/Footer/components/FooterActions/FooterActions.tsx

@@ -0,0 +1,28 @@
+import React, { HTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./FooterActions.module.css"
+
+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/v3/subcomponents/Footer/components/FooterActions/index.ts

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

package/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.css

@@ -0,0 +1,110 @@
+.stepsContainer {
+  --progress-stepper-indicator-size: 1.25rem;
+
+  width: 100%;
+  grid-area: stepper;
+}
+
+.stepList {
+  display: none;
+  justify-content: center;
+  align-items: flex-end;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  @media (width >= 768px) {
+    display: flex;
+  }
+}
+
+.step {
+  display: flex;
+  flex-grow: 1;
+  flex-basis: 100%;
+  justify-content: center;
+  max-width: var(--spacing-96);
+  overflow-wrap: break-word;
+  position: relative;
+  container: step / inline-size;
+}
+
+.stepContent {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.stepIndicator {
+  width: var(--progress-stepper-indicator-size);
+  height: var(--progress-stepper-indicator-size);
+  position: relative;
+}
+
+.stepName {
+  display: none;
+  text-align: center;
+  margin-bottom: var(--spacing-12);
+  font-weight: var(--typography-paragraph-bold-font-weight);
+  color: var(--color-gray-600);
+}
+
+.stepName.isCurrent {
+  color: var(--color-purple-800);
+}
+
+.stepIcon {
+  color: var(--color-purple-800);
+  position: absolute;
+  width: var(--progress-stepper-indicator-size);
+  height: var(--progress-stepper-indicator-size);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.stepIcon.isCompleted {
+  color: var(--color-green-500);
+}
+
+.stepDivider {
+  height: 0;
+  display: flex;
+  position: absolute;
+  flex-grow: 1;
+  min-width: calc(100% - var(--spacing-24));
+  border: solid var(--spacing-1) var(--color-gray-300);
+  margin: 0;
+  border-radius: var(--border-solid-border-radius);
+  left: 100%;
+
+  /* sets fron the bottom to the centre of the dot */
+  top: calc(100% - calc(var(--progress-stepper-indicator-size) / 2));
+  transform: translateX(-50%);
+
+  [dir="rtl"] & {
+    left: unset;
+    right: 100%;
+    transform: translateX(50%);
+  }
+}
+
+.stepperDescription {
+  display: flex;
+  justify-content: center;
+
+  @media (width >= 768px) {
+    /* sr hidden styles */
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+}
+
+/* Some defensive CSS for many steps on desktop screens */
+@container step (width >= 4.5rem) {
+  .stepName {
+    display: inline;
+  }
+}