@kaizen/components 1.68.5 → 1.68.7

package/src/Workflow/Workflow.tsx

@@ -1,5 +1,5 @@
-import React, { HTMLAttributes } from "react"
-import { OverrideClassName } from "~components/types/OverrideClassName"
+import React, { HTMLAttributes } from 'react'
+import { OverrideClassName } from '~components/types/OverrideClassName'
 import {
   Footer,
   FooterProps,
@@ -8,11 +8,11 @@ import {
   HeaderProps,
   ProgressStepper,
   Wrapper,
-} from "./subcomponents"
+} from './subcomponents'
 
 export type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> &
   FooterProps &
-  Pick<HeaderProps, "workflowName" | "statusTag" | "headerActions">
+  Pick<HeaderProps, 'workflowName' | 'statusTag' | 'headerActions'>
 
 export const Workflow = ({
   steps,
@@ -27,7 +27,7 @@ export const Workflow = ({
   classNameOverride,
   ...restProps
 }: WorkflowProps): JSX.Element => {
-  const currentStep = steps.find(step => step.id === currentStepId)
+  const currentStep = steps.find((step) => step.id === currentStepId)
   return (
     <Workflow.Wrapper classNameOverride={classNameOverride} {...restProps}>
       <Workflow.Header

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

@@ -1,21 +1,21 @@
-import { Meta, StoryObj } from "@storybook/react"
-import { Workflow } from "../"
-import { WorkflowControls } from "./controls"
+import { Meta, StoryObj } from '@storybook/react'
+import { Workflow } from '../'
+import { WorkflowControls } from './controls'
 
 const meta = {
-  title: "Layout/Workflow/Components/Progress Stepper",
+  title: 'Layout/Workflow/Components/Progress Stepper',
   component: Workflow.ProgressStepper,
   argTypes: {
     currentStepId: WorkflowControls.currentStepId,
   },
   args: {
-    currentStepId: "preview-step",
+    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" },
+      { 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,
   },
@@ -33,7 +33,7 @@ export const Playground: Story = {
   parameters: {
     docs: {
       canvas: {
-        sourceState: "shown",
+        sourceState: 'shown',
       },
     },
   },
@@ -44,7 +44,7 @@ export const Playground: Story = {
  */
 export const ProgressStates: Story = {
   args: {
-    currentStepId: "questions-step",
+    currentStepId: 'questions-step',
   },
 }
 
@@ -53,18 +53,18 @@ export const ProgressStates: Story = {
  */
 export const AllStepsComplete: Story = {
   args: {
-    currentStepId: "schedule-step",
+    currentStepId: 'schedule-step',
     isComplete: true,
   },
 }
 
 export const FewerSteps: Story = {
   args: {
-    currentStepId: "questions-step",
+    currentStepId: 'questions-step',
     steps: [
-      { label: "Settings", id: "settings-step" },
-      { label: "Questions", id: "questions-step" },
-      { label: "Preview", id: "preview-step" },
+      { label: 'Settings', id: 'settings-step' },
+      { label: 'Questions', id: 'questions-step' },
+      { label: 'Preview', id: 'preview-step' },
     ],
   },
 }
@@ -75,12 +75,12 @@ export const FewerSteps: Story = {
  */
 export const EightSteps: Story = {
   args: {
-    currentStepId: "questions-step",
+    currentStepId: 'questions-step',
     steps: [
       ...meta.args.steps,
-      { label: "Plan", id: "plan-step" },
-      { label: "Provision", id: "provision-step" },
-      { label: "Procure", id: "procure-step" },
+      { label: 'Plan', id: 'plan-step' },
+      { label: 'Provision', id: 'provision-step' },
+      { label: 'Procure', id: 'procure-step' },
     ],
   },
 }

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

@@ -1,23 +1,18 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Heading } from "~components/Heading"
-import { Text } from "~components/Text"
-import { TextField } from "~components/TextField"
-import { Button } from "~components/__actions__/v2"
-import { Icon, Tag } from "~components/__future__"
-import { Workflow } from "../"
-import { WorkflowControls } from "./controls"
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Heading } from '~components/Heading'
+import { Text } from '~components/Text'
+import { TextField } from '~components/TextField'
+import { Button } from '~components/__actions__/v2'
+import { Icon, 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">
-      <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"
-      >
+      <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">
         <Heading variant="heading-3" classNameOverride="mb-24">
           Name the cycle
         </Heading>
@@ -33,18 +28,18 @@ const MockContent = (): JSX.Element => (
 )
 
 const meta = {
-  title: "Layout/Workflow",
+  title: 'Layout/Workflow',
   component: Workflow,
   argTypes: WorkflowControls,
   args: {
-    workflowName: "Create a self-reflection cycle",
-    currentStepId: "settings-step",
+    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" },
+      { 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>,
@@ -71,7 +66,7 @@ export const Playground: Story = {
   parameters: {
     docs: {
       canvas: {
-        sourceState: "shown",
+        sourceState: 'shown',
       },
     },
     chromatic: { disable: false },
@@ -94,14 +89,14 @@ export const MultipleActions: Story = {
         icon={<Icon name="close" isPresentational />}
         secondary
         iconPosition="end"
-        onClick={(): void => alert("mock example of a save action")}
+        onClick={(): void => alert('mock example of a save action')}
       />,
     ],
   },
 }
 
 export const FinalStep: Story = {
-  args: { currentStepId: "schedule-step" },
+  args: { currentStepId: 'schedule-step' },
 }
 
 export const CompletedWorkflow: Story = {
@@ -124,17 +119,16 @@ export const ComposableWorkflow: Story = {
     <Workflow.Wrapper {...restProps}>
       <Workflow.Header
         workflowName={workflowName}
-        stepName={steps.find(step => step.id === currentStepId)!.label}
+        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?
+          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
@@ -153,21 +147,21 @@ export const ResponsiveWorkflow: Story = {
   parameters: {
     docs: {
       canvas: {
-        sourceState: "hidden",
+        sourceState: 'hidden',
       },
     },
     viewport: {
       viewports: {
         vieportZoomed: {
-          name: "Simulate 400% zoom",
+          name: 'Simulate 400% zoom',
           styles: {
-            width: "500px",
-            height: "800px",
+            width: '500px',
+            height: '800px',
           },
-          type: "mobile",
+          type: 'mobile',
         },
       },
-      defaultViewport: "vieportZoomed",
+      defaultViewport: 'vieportZoomed',
     },
     chromatic: {
       disable: false,

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

@@ -1,11 +1,11 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/__actions__/v2"
-import { Workflow } from "../"
-import { WorkflowControls } from "./controls"
+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/Components/Footer",
+  title: 'Layout/Workflow/Components/Footer',
   component: Workflow.Footer,
   argTypes: {
     ...WorkflowControls.nextAction,
@@ -13,13 +13,13 @@ const meta = {
     ...WorkflowControls.currentStepId,
   },
   args: {
-    currentStepId: "preview-step",
+    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" },
+      { 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" />,
@@ -35,7 +35,7 @@ export const Playground: Story = {
   parameters: {
     docs: {
       canvas: {
-        sourceState: "shown",
+        sourceState: 'shown',
       },
     },
   },
@@ -43,7 +43,7 @@ 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: { currentStepId: "settings-step" },
+  args: { currentStepId: 'settings-step' },
 }
 
 export const NextStepDisabled: Story = {
@@ -52,44 +52,37 @@ export const NextStepDisabled: Story = {
 
 export const LastStep: Story = {
   args: {
-    currentStepId: "schedule-step",
-    nextAction: (
-      <Button
-        primary
-        disabled
-        form="worflow-form-id-for-submit"
-        label="Finish"
-      />
-    ),
+    currentStepId: 'schedule-step',
+    nextAction: <Button primary disabled form="worflow-form-id-for-submit" label="Finish" />,
   },
 }
 
 export const AllStepsComplete: Story = {
   args: {
-    currentStepId: "schedule-step",
+    currentStepId: 'schedule-step',
     isComplete: true,
   },
 }
 
 export const FewerSteps: Story = {
   args: {
-    currentStepId: "questions-step",
+    currentStepId: 'questions-step',
     steps: [
-      { label: "Settings", id: "settings-step" },
-      { label: "Questions", id: "questions-step" },
-      { label: "Preview", id: "preview-step" },
+      { label: 'Settings', id: 'settings-step' },
+      { label: 'Questions', id: 'questions-step' },
+      { label: 'Preview', id: 'preview-step' },
     ],
   },
 }
 
 export const EightSteps: Story = {
   args: {
-    currentStepId: "questions-step",
+    currentStepId: 'questions-step',
     steps: [
       ...meta.args.steps,
-      { label: "Plan", id: "plan-step" },
-      { label: "Provision", id: "provision-step" },
-      { label: "Procure", id: "procure-step" },
+      { label: 'Plan', id: 'plan-step' },
+      { label: 'Provision', id: 'provision-step' },
+      { label: 'Procure', id: 'procure-step' },
     ],
   },
 }

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

@@ -1,19 +1,19 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/__actions__/v2"
-import { Icon, Tag } from "~components/__future__"
-import { Workflow } from "../"
-import { WorkflowControls } from "./controls"
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Button } from '~components/__actions__/v2'
+import { Icon, Tag } from '~components/__future__'
+import { Workflow } from '../'
+import { WorkflowControls } from './controls'
 
 const meta = {
-  title: "Layout/Workflow/Components/Header",
+  title: 'Layout/Workflow/Components/Header',
   component: Workflow.Header,
   argTypes: {
     ...WorkflowControls.headerActions,
   },
   args: {
-    workflowName: "Create a self-reflection cycle",
-    stepName: "Settings",
+    workflowName: 'Create a self-reflection cycle',
+    stepName: 'Settings',
     statusTag: <Tag color="purple">Draft</Tag>,
     headerActions: [
       <Button
@@ -22,7 +22,7 @@ const meta = {
         icon={<Icon name="close" isPresentational />}
         secondary
         iconPosition="end"
-        onClick={(): void => alert("mock example of a save action")}
+        onClick={(): void => alert('mock example of a save action')}
       />,
     ],
   },
@@ -36,7 +36,7 @@ export const Playground: Story = {
   parameters: {
     docs: {
       canvas: {
-        sourceState: "shown",
+        sourceState: 'shown',
       },
     },
   },
@@ -60,7 +60,7 @@ export const MultipleActions: Story = {
         icon={<Icon name="close" isPresentational />}
         secondary
         iconPosition="end"
-        onClick={(): void => alert("mock example of a save action")}
+        onClick={(): void => alert('mock example of a save action')}
       />,
     ],
   },

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

@@ -1,16 +1,16 @@
-import React from "react"
-import { ArgTypes } from "@storybook/react"
-import { Button } from "~components/__actions__/v2"
-import { Icon } from "~components/__future__/Icon"
+import React from 'react'
+import { ArgTypes } from '@storybook/react'
+import { Button } from '~components/__actions__/v2'
+import { Icon } from '~components/__future__/Icon'
 
 export const WorkflowControls: Partial<ArgTypes> = {
   headerActions: {
     control: {
-      type: "radio",
+      type: 'radio',
     },
-    options: ["Single action", "Multiple actions", "No actions"],
+    options: ['Single action', 'Multiple actions', 'No actions'],
     mapping: {
-      "Single action": [
+      'Single action': [
         <Button
           key="would-use-uui-1"
           label="Close"
@@ -19,7 +19,7 @@ export const WorkflowControls: Partial<ArgTypes> = {
           iconPosition="end"
         />,
       ],
-      "Multiple actions": [
+      'Multiple actions': [
         <Button
           key="would-use-uui-1"
           label="Close"
@@ -35,59 +35,44 @@ export const WorkflowControls: Partial<ArgTypes> = {
           iconPosition="start"
         />,
       ],
-      "No actions": [],
+      'No actions': [],
     },
   },
   nextAction: {
     control: {
-      type: "radio",
+      type: 'radio',
     },
-    options: ["Next active", "Next disabled", "Next submit", "No next action"],
+    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,
+      '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",
+      type: 'radio',
     },
-    options: [
-      "Previous active",
-      "Previous disabled",
-      "Previous submit",
-      "No Previous action",
-    ],
+    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,
+      '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",
+      type: 'select',
     },
-    options: [
-      "settings-step",
-      "questions-step",
-      "preview-step",
-      "employees-step",
-      "schedule-step",
-    ],
+    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",
+      'settings-step': 'settings-step',
+      'questions-step': 'questions-step',
+      'preview-step': 'preview-step',
+      'employees-step': 'employees-step',
+      'schedule-step': 'schedule-step',
     },
   },
 }

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

@@ -1 +1 @@
-export * from "./controls"
+export * from './controls'

package/src/Workflow/index.ts

@@ -1 +1 @@
-export * from "./Workflow"
+export * from './Workflow'

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

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

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

@@ -5,11 +5,11 @@
 }
 
 .footerActionPrevious {
-  grid-area: "prev";
+  grid-area: 'prev';
   justify-content: start;
 }
 
 .footerActionNext {
-  grid-area: "next";
+  grid-area: 'next';
   justify-content: end;
 }

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

@@ -1,28 +1,25 @@
-import React, { HTMLAttributes } from "react"
-import classnames from "classnames"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./FooterActions.module.css"
+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"
+  actionType?: 'Previous' | 'Next'
   action?: JSX.Element
-} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "children">>
+} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, 'children'>>
 
 /** A simple wrapper for a Footer previous or next action  */
 export const FooterAction = ({
-  actionType = "Previous",
+  actionType = 'Previous',
   action,
   ...restProps
 }: FooterActionsProps): JSX.Element => (
   <div
-    className={classnames([
-      styles.footerAction,
-      styles[`footerAction${actionType}`],
-    ])}
+    className={classnames([styles.footerAction, styles[`footerAction${actionType}`]])}
     {...restProps}
   >
     {action}
   </div>
 )
 
-FooterAction.displayName = "Workflow.FooterActions"
+FooterAction.displayName = 'Workflow.FooterActions'

package/src/Workflow/subcomponents/Footer/components/FooterActions/index.ts

@@ -1 +1 @@
-export * from "./FooterActions"
+export * from './FooterActions'