@kaizen/components 0.0.0-canary-toast-notification-fix-20240822034045 → 0.0.0-canary-workflow-export-20240910075656

package/src/__future__/Workflow/_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: "Pages/Workflow/Future",
-  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/__future__/Workflow/_docs/WorkflowFooter.mdx

@@ -1,38 +0,0 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { KAIOInstallation, KaioLegacyDocsNotification, 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"
-
-/>
-
-
-<KaioLegacyDocsNotification version="1.16.0" />
-
-<KAIOInstallation exportNames="WorkflowFooter" isFuture />
-
-## 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/__future__/Workflow/_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: "Pages/Workflow/Future/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/__future__/Workflow/_docs/WorkflowHeader.mdx

@@ -1,28 +0,0 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { KAIOInstallation, KaioLegacyDocsNotification, 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"
-
-/>
-
-
-<KaioLegacyDocsNotification version="1.16.0" />
-
-<KAIOInstallation exportNames="WorkflowHeader" isFuture />
-
-## Overview
-
-<Canvas of={WorkflowHeaderStories.Playground} />
-<Controls of={WorkflowHeaderStories.Playground} />
-
-## API
-
-<DocsStory of={WorkflowHeaderStories.MultipleActions} />

package/src/__future__/Workflow/_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: "Pages/Workflow/Future/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/__future__/Workflow/_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/__future__/Workflow/_docs/controls/index.tsx

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

package/src/__future__/Workflow/index.ts

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

package/src/__future__/Workflow/subcomponents/Footer/Footer.tsx

@@ -1,38 +0,0 @@
-import React from "react"
-import { OverrideClassName } from "~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/__future__/Workflow/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/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.tsx

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

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

package/src/__future__/Workflow/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;
-  }
-}