@kaizen/components 1.61.3 → 1.63.0

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

@@ -1,176 +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 (v1)",
-  component: Workflow,
-  argTypes: { ...WorkflowControls },
-  args: {
-    workflowName: "Create a self-reflection cycle",
-    stepName: "Settings",
-    steps: ["Settings", "Questions", "Preview", "Employees", "Schedule"],
-    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: {
-    stepName: "Schedule",
-  },
-}
-
-export const CompletedWorkflow: Story = {
-  args: {
-    isComplete: true,
-  },
-  parameters: {
-    chromatic: { disable: false },
-  },
-}
-
-export const ComposableWorkflow: Story = {
-  render: ({
-    steps,
-    isComplete,
-    workflowName,
-    stepName,
-    status,
-    headerActions,
-    previousAction,
-    nextAction,
-    ...restProps
-  }) => (
-    <Workflow.Wrapper {...restProps}>
-      <Workflow.Header
-        workflowName={workflowName}
-        stepName={stepName}
-        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
-        stepName={stepName}
-        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/v1/_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/v1/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/v1/_docs/WorkflowFooter.stories.tsx

@@ -1,85 +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 (v1)/Components/Footer",
-  component: Workflow.Footer,
-  argTypes: {
-    ...WorkflowControls.nextAction,
-    ...WorkflowControls.previousAction,
-  },
-  args: {
-    stepName: "Preview",
-    steps: ["Settings", "Questions", "Preview", "Employees", "Schedule"],
-    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 = {}
-
-/** <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: {
-    stepName: "Settings",
-  },
-}
-
-export const NextStepDisabled: Story = {
-  args: {
-    nextAction: <Button disabled reversed label="Next" />,
-  },
-}
-
-export const LastStep: Story = {
-  args: {
-    stepName: "Schedule",
-    nextAction: (
-      <Button
-        reversed
-        primary
-        disabled
-        form="worflow-form-id-for-submit"
-        label="Finish"
-      />
-    ),
-  },
-}
-
-export const AllStepsComplete: Story = {
-  args: {
-    stepName: "Schedule",
-    isComplete: true,
-  },
-}
-
-export const FewerSteps: Story = {
-  args: {
-    stepName: "Questions",
-    steps: ["Settings", "Questions", "Preview"],
-  },
-}
-
-export const EightSteps: Story = {
-  args: {
-    stepName: "Questions",
-    steps: [
-      "Settings",
-      "Questions",
-      "Preview",
-      "Employees",
-      "Schedule",
-      "Plan",
-      "Provision",
-      "Another thing",
-    ],
-  },
-}

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

@@ -1,62 +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 (v1)/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 = {}
-
-/** <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/v1/_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/v1/index.ts

@@ -1,10 +0,0 @@
-// Since we can't add a deprecation flag on a * export
-import {
-  Workflow as WorkflowV1,
-  WorkflowProps as WorkflowPropsV1,
-} from "./Workflow"
-
-/** * @deprecated upgrade to v3 for the latest release */
-export const Workflow = WorkflowV1
-/** * @deprecated upgrade to v3 for the latest release */
-export type WorkflowProps = WorkflowPropsV1

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

@@ -1,37 +0,0 @@
-import React, { HTMLAttributes } from "react"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import {
-  FooterRoot,
-  FooterAction,
-  ProgressStepper,
-  ProgressStepperProps,
-} 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<HTMLAttributes<HTMLElement>, "children">>
-
-export const Footer = ({
-  steps,
-  stepName,
-  isComplete,
-  previousAction,
-  nextAction,
-  ...restProps
-}: FooterProps): JSX.Element => (
-  <FooterRoot {...restProps}>
-    <FooterAction action={previousAction} actionType="Previous" />
-    <ProgressStepper
-      steps={steps}
-      stepName={stepName}
-      isComplete={isComplete}
-    />
-    <FooterAction action={nextAction} actionType="Next" />
-  </FooterRoot>
-)
-
-Footer.displayName = "Workflow.Footer"

package/src/__layout__/Workflow/v1/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/v1/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/v1/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss

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