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

package/src/Workflow/_docs/Workflow.mdx

@@ -1,6 +1,5 @@
 import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
-import { KAIOInstallation, ResourceLinks } from "~storybook/components"
+import { Installation, ResourceLinks } from "~storybook/components"
 import * as Workflow from "./Workflow.stories"
 import * as WorkflowFooter from "./WorkflowFooter.stories"
 import * as WorkflowHeader from "./WorkflowHeader.stories"
@@ -14,12 +13,10 @@ import * as WorkflowHeader from "./WorkflowHeader.stories"
 
 />
 
-<InlineNotification type="negative" persistent>
-  {`This version of the Workflow is deprecated and will be removed in the next major release.
-  Import from "@kaizen/components/future" for the latest version.`}
-</InlineNotification>
-
-<KAIOInstallation exportNames="Workflow" />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components"'
+/>
 
 ## Overview
 
@@ -106,19 +103,19 @@ A common pattern identified is a Workflow Exit button. An implementation of this
 
 ## Tracking progress
 
-The Footer tracks the progress of the form by comparing the current step, indicated by `stepName`, against its position in the `steps` array.
+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
-    stepName="Setting"
+    currentStepId="settings-step"
     steps={[
-      'Settings',
-      'Questions',
-      'Preview',
-      'Employees',
-      'Schedule'
+      { 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}
   >
@@ -135,8 +132,8 @@ To hide, disable or change the appearance of the Footer buttons you can leverage
   layout="fullscreen"
   of={WorkflowFooter.LastStep}
   source={{code: `<Workflow
-    nextAction={<Button disabled label="Finish" primary reversed/>}
-    previousAction={<Button label="Back" reversed/>}
+    nextAction={<Button disabled label="Finish" primary />}
+    previousAction={<Button label="Back" />}
     {...otherProps}
   >
     <MockContent />

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

@@ -1,20 +1,27 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { Heading } from "~components/Heading"
 import { CloseIcon, VisibleIcon } from "~components/Icon"
+import { Text } from "~components/Text"
 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>
+      <Text variant="intro-lede">
+        Name and schedule the self-reflection cycle
+      </Text>
       <form
         id="workflow-form-id"
         className="bg-white rounded shadow-sm my-32 p-64"
       >
-        <h3>Name the cycle</h3>
+        <Heading variant="heading-3" classNameOverride="mb-24">
+          Name the cycle
+        </Heading>
         <TextField
           labelText="Cycle name"
           type="text"
@@ -27,20 +34,23 @@ const MockContent = (): JSX.Element => (
 )
 
 const meta = {
-  title: "Pages/Workflow",
+  title: "Layout/Workflow/Workflow",
   component: Workflow,
-  argTypes: { ...WorkflowControls },
+  argTypes: WorkflowControls,
   args: {
     workflowName: "Create a self-reflection cycle",
-    stepName: "Settings",
-    steps: ["Settings", "Questions", "Preview", "Employees", "Schedule"],
+    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" />,
+    statusTag: <Tag color="purple">Draft</Tag>,
+    previousAction: <Button label="Back" />,
+    nextAction: <Button primary label="Next" />,
     headerActions: [
       <Button
         key="would-use-uui-2"
@@ -92,18 +102,12 @@ export const MultipleActions: Story = {
 }
 
 export const FinalStep: Story = {
-  args: {
-    stepName: "Schedule",
-  },
+  args: { currentStepId: "schedule-step" },
 }
 
 export const CompletedWorkflow: Story = {
-  args: {
-    isComplete: true,
-  },
-  parameters: {
-    chromatic: { disable: false },
-  },
+  args: { isComplete: true },
+  parameters: { chromatic: { disable: false } },
 }
 
 export const ComposableWorkflow: Story = {
@@ -111,8 +115,8 @@ export const ComposableWorkflow: Story = {
     steps,
     isComplete,
     workflowName,
-    stepName,
-    status,
+    currentStepId,
+    statusTag,
     headerActions,
     previousAction,
     nextAction,
@@ -121,8 +125,8 @@ export const ComposableWorkflow: Story = {
     <Workflow.Wrapper {...restProps}>
       <Workflow.Header
         workflowName={workflowName}
-        stepName={stepName}
-        status={status}
+        stepName={steps.find(step => step.id === currentStepId)!.label}
+        statusTag={statusTag}
         headerActions={headerActions}
       />
       <Workflow.Main>
@@ -135,7 +139,7 @@ export const ComposableWorkflow: Story = {
         </p>
       </Workflow.Main>
       <Workflow.Footer
-        stepName={stepName}
+        currentStepId={currentStepId}
         steps={steps}
         isComplete={isComplete}
         nextAction={nextAction}
@@ -143,9 +147,7 @@ export const ComposableWorkflow: Story = {
       />
     </Workflow.Wrapper>
   ),
-  parameters: {
-    chromatic: { disable: false },
-  },
+  parameters: { chromatic: { disable: false } },
 }
 
 export const ResponsiveWorkflow: Story = {

package/src/Workflow/_docs/WorkflowFooter.mdx

@@ -1,6 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
-import { KAIOInstallation, ResourceLinks } from "~storybook/components"
+import { Installation, ResourceLinks } from "~storybook/components"
 import * as WorkflowFooterStories from "./WorkflowFooter.stories"
 
 <Meta of={WorkflowFooterStories} />
@@ -14,12 +13,10 @@ import * as WorkflowFooterStories from "./WorkflowFooter.stories"
 
 />
 
-<InlineNotification type="negative" persistent>
-  {`This version of the Workflow is deprecated and will be removed in the next major release.
-  Import from "@kaizen/components/future" for the latest version.`}
-</InlineNotification>
-
-<KAIOInstallation exportNames="Workflow" />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components"'
+/>
 
 ## Overview
 

package/src/Workflow/_docs/WorkflowFooter.stories.tsx

@@ -5,18 +5,25 @@ import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 
 const meta = {
-  title: "Pages/Workflow/Components/Footer",
+  title: "Layout/Workflow/Workflow/Components/Footer",
   component: Workflow.Footer,
   argTypes: {
     ...WorkflowControls.nextAction,
     ...WorkflowControls.previousAction,
+    ...WorkflowControls.currentStepId,
   },
   args: {
-    stepName: "Preview",
-    steps: ["Settings", "Questions", "Preview", "Employees", "Schedule"],
+    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" />,
+    previousAction: <Button label="Back" />,
+    nextAction: <Button primary label="Next" />,
   },
 } satisfies Meta<typeof Workflow.Footer>
 
@@ -24,27 +31,30 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Playground: Story = {}
+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: {
-    stepName: "Settings",
-  },
+  args: { currentStepId: "settings-step" },
 }
 
 export const NextStepDisabled: Story = {
-  args: {
-    nextAction: <Button disabled reversed label="Next" />,
-  },
+  args: { nextAction: <Button disabled primary label="Next" /> },
 }
 
 export const LastStep: Story = {
   args: {
-    stepName: "Schedule",
+    currentStepId: "schedule-step",
     nextAction: (
       <Button
-        reversed
         primary
         disabled
         form="worflow-form-id-for-submit"
@@ -56,30 +66,30 @@ export const LastStep: Story = {
 
 export const AllStepsComplete: Story = {
   args: {
-    stepName: "Schedule",
+    currentStepId: "schedule-step",
     isComplete: true,
   },
 }
 
 export const FewerSteps: Story = {
   args: {
-    stepName: "Questions",
-    steps: ["Settings", "Questions", "Preview"],
+    currentStepId: "questions-step",
+    steps: [
+      { label: "Settings", id: "settings-step" },
+      { label: "Questions", id: "questions-step" },
+      { label: "Preview", id: "preview-step" },
+    ],
   },
 }
 
 export const EightSteps: Story = {
   args: {
-    stepName: "Questions",
+    currentStepId: "questions-step",
     steps: [
-      "Settings",
-      "Questions",
-      "Preview",
-      "Employees",
-      "Schedule",
-      "Plan",
-      "Provision",
-      "Another thing",
+      ...meta.args.steps,
+      { label: "Plan", id: "plan-step" },
+      { label: "Provision", id: "provision-step" },
+      { label: "Procure", id: "procure-step" },
     ],
   },
 }

package/src/Workflow/_docs/WorkflowHeader.mdx

@@ -1,6 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
-import { KAIOInstallation, ResourceLinks } from "~storybook/components"
+import { Installation, ResourceLinks } from "~storybook/components"
 import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
 
 <Meta of={WorkflowHeaderStories} />
@@ -14,12 +13,10 @@ import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
 
 />
 
-<InlineNotification type="negative" persistent>
-  {`This version of the Workflow is deprecated and will be removed in the next major release.
-  Import from "@kaizen/components/future" for the latest version.`}
-</InlineNotification>
-
-<KAIOInstallation exportNames="Workflow" />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Workflow } from "@kaizen/components'
+/>
 
 ## Overview
 

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

@@ -2,11 +2,12 @@ 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: "Pages/Workflow/Components/Header",
+  title: "Layout/Workflow/Workflow/Components/Header",
   component: Workflow.Header,
   argTypes: {
     ...WorkflowControls.headerActions,
@@ -14,10 +15,7 @@ const meta = {
   args: {
     workflowName: "Create a self-reflection cycle",
     stepName: "Settings",
-    status: {
-      content: "Draft",
-      variant: "statusDraft",
-    },
+    statusTag: <Tag color="purple">Draft</Tag>,
     headerActions: [
       <Button
         key="would-use-uui-2"
@@ -35,7 +33,15 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Playground: Story = {}
+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>  */

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

@@ -44,10 +44,10 @@ export const WorkflowControls: Partial<ArgTypes> = {
     },
     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 active": <Button primary label="Next" />,
+      "Next disabled": <Button primary disabled label="Next" />,
       "Next submit": (
-        <Button reversed formTarget="workflow-form-id" primary label="Finish" />
+        <Button formTarget="workflow-form-id" primary label="Finish" />
       ),
       "No next action": undefined,
     },
@@ -63,10 +63,10 @@ export const WorkflowControls: Partial<ArgTypes> = {
       "No Previous action",
     ],
     mapping: {
-      "Previous active": <Button reversed label="Back" />,
-      "Previous disabled": <Button reversed disabled label="Back" />,
+      "Previous active": <Button label="Back" />,
+      "Previous disabled": <Button disabled label="Back" />,
       "Previous submit": (
-        <Button reversed formTarget="workflow-form-id" primary label="Back" />
+        <Button formTarget="workflow-form-id" primary label="Back" />
       ),
       "No Previous action": undefined,
     },

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

@@ -1,10 +1,11 @@
-import React, { HTMLAttributes } from "react"
-import { OverrideClassName } from "~types/OverrideClassName"
+import React from "react"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import {
   FooterRoot,
   FooterAction,
   ProgressStepper,
   ProgressStepperProps,
+  FooterRootProps,
 } from "./components"
 
 export type FooterProps = {
@@ -13,11 +14,11 @@ export type FooterProps = {
   /** An action to progress to the next step or submit the form */
   nextAction?: JSX.Element
 } & ProgressStepperProps &
-  OverrideClassName<Omit<HTMLAttributes<HTMLElement>, "children">>
+  OverrideClassName<Omit<FooterRootProps, "children">>
 
 export const Footer = ({
   steps,
-  stepName,
+  currentStepId,
   isComplete,
   previousAction,
   nextAction,
@@ -27,7 +28,7 @@ export const Footer = ({
     <FooterAction action={previousAction} actionType="Previous" />
     <ProgressStepper
       steps={steps}
-      stepName={stepName}
+      currentStepId={currentStepId}
       isComplete={isComplete}
     />
     <FooterAction action={nextAction} actionType="Next" />

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

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
-import styles from "./FooterActions.module.scss"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./FooterActions.module.css"
 
 export type FooterActionsProps = {
   actionType?: "Previous" | "Next"

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

@@ -0,0 +1,117 @@
+.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-family: var(--typography-paragraph-small-font-family);
+  font-size: var(--typography-paragraph-small-font-size);
+  line-height: var(--typography-paragraph-small-line-height);
+  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;
+  font-family: var(--typography-paragraph-small-font-family);
+  font-weight: var(--typography-paragraph-small-font-weight);
+  font-size: var(--typography-paragraph-small-font-size);
+  line-height: var(--typography-paragraph-small-line-height);
+
+  @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;
+  }
+}