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

package/src/TimeField/TimeField.spec.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { TimeField, TimeFieldProps } from "./TimeField"
 import { ValueType } from "./types"
-
 const user = userEvent.setup()
 
-const mockOnChange = jest.fn()
+const mockOnChange = vi.fn()
 const LABEL = "Launch Time Label"
 
 const pressArrowKey =

package/src/TimeField/TimeField.tsx

@@ -9,7 +9,7 @@ import {
 import classnames from "classnames"
 import { FieldMessage } from "~components/FieldMessage"
 import { Label } from "~components/Label"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { TimeSegment } from "./subcomponents/TimeSegment"
 import { StatusType, TimeValue, ValueType } from "./types"
 import styles from "./TimeField.module.scss"

package/src/TitleBlockZen/TitleBlockZen.spec.tsx

@@ -1,12 +1,28 @@
 import React from "react"
 import { render, waitFor, screen, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { mockMatchMedia } from "~utils/useMediaQueries.spec"
+import { vi } from "vitest"
 import { CustomBreadcrumbProps, SectionTitleRenderProps } from "./types"
 import { TitleBlockZen } from "./index"
 
 const user = userEvent.setup()
 
+const mockMatchMedia = (matches: boolean = false): void => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: vi.fn().mockImplementation(query => ({
+      matches,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(), // Deprecated
+      removeListener: vi.fn(), // Deprecated
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  })
+}
+
 describe("<TitleBlockZen />", () => {
   beforeEach(() => {
     mockMatchMedia()
@@ -41,7 +57,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when the primary action is a button with only an onClick", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const primaryActionAsButton = {
       label: "primaryActionLabel",
       onClick: testOnClickFn,
@@ -84,7 +100,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when the primary action is disabled", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const primaryActionAsButton = {
       label: "primaryActionLabel",
       onClick: testOnClickFn,
@@ -166,7 +182,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when the primary action is a button with both an href and an onClick", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const primaryActionAsLinkAndOnClick = {
       label: "primaryActionLabel",
       href: "#primaryActionHref",
@@ -307,7 +323,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when the default action is a button with only an onClick", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const defaultActionAsButton = {
       label: "defaultActionLabel",
       onClick: testOnClickFn,
@@ -363,7 +379,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when the default action is a button with both an href and an onClick", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const defaultActionAsLinkAndOnClick = {
       label: "defaultActionLabel",
       href: "#defaultActionHref",
@@ -423,7 +439,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when the default action is disabled", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const defaultActionAsButton = {
       label: "defaultActionLabel",
       onClick: testOnClickFn,
@@ -504,7 +520,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when a secondary action is passed with both an href and an onClick", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const secondaryActionWithLinkAndOnClick = {
       label: "secondaryActionLabel",
       href: "#secondaryActionHref",
@@ -516,8 +532,8 @@ describe("<TitleBlockZen />", () => {
     })
 
     it("renders the secondary action with both the href and onClick", async () => {
-      const mockWarnFn = jest.fn()
-      const spy = jest
+      const mockWarnFn = vi.fn()
+      const spy = vi
         .spyOn(global.console, "warn")
         .mockImplementation(mockWarnFn)
       const { getByTestId } = render(
@@ -543,8 +559,8 @@ describe("<TitleBlockZen />", () => {
     })
 
     it("renders the action as a single mobile actions drawer item with an onClick", async () => {
-      const mockWarnFn = jest.fn()
-      const spy = jest
+      const mockWarnFn = vi.fn()
+      const spy = vi
         .spyOn(global.console, "warn")
         .mockImplementation(mockWarnFn)
       const { getAllByTestId } = render(
@@ -681,7 +697,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when a disabled secondary action is passed with only an onClick", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const secondaryActionWithOnClick = {
       label: "secondaryActionLabel",
       onClick: testOnClickFn,
@@ -708,7 +724,7 @@ describe("<TitleBlockZen />", () => {
   })
 
   describe("when a disabled secondary overflow menu item is passed with only an onClick for the action", () => {
-    const testOnClickFn = jest.fn()
+    const testOnClickFn = vi.fn()
     const secondaryOverflowMenuItemWithOnClick = {
       label: "secondaryActionOverflowMenuItemLabel",
       action: testOnClickFn,
@@ -737,54 +753,6 @@ describe("<TitleBlockZen />", () => {
     })
   })
 
-  describe("survey status", () => {
-    it("doesn't render tag when field is omitted", async () => {
-      render(<TitleBlockZen title="Test Title">Example</TitleBlockZen>)
-
-      await waitFor(() => {
-        expect(
-          screen.queryByTestId("survey-status-tag")
-        ).not.toBeInTheDocument()
-      })
-    })
-
-    it.each([
-      ["draft", "statusDraft"],
-      ["live", "statusLive"],
-      ["closed", "statusClosed"],
-      ["scheduled", "statusClosed"],
-      ["sentimentPositive", "sentimentPositive"],
-      ["default", "default"],
-    ])(
-      "renders tag with correct text and variant when %s status",
-      async (status, expectedClassName) => {
-        render(
-          <TitleBlockZen
-            title="Test Title"
-            surveyStatus={{
-              text: `${status} text`,
-              status: `${status}` as
-                | "draft"
-                | "live"
-                | "scheduled"
-                | "closed"
-                | "sentimentPositive"
-                | "default",
-            }}
-          >
-            Example
-          </TitleBlockZen>
-        )
-
-        const tagElement = (await screen.findByTestId("survey-status-tag"))
-          .firstChild
-
-        expect(tagElement).toHaveTextContent(`${status} text`)
-        expect(tagElement).toHaveClass(expectedClassName)
-      }
-    )
-  })
-
   describe("automation ID behaviour", () => {
     describe("when default automation IDs are not provided alongside required conditional renders", () => {
       it("renders the default automation IDs", () => {
@@ -807,7 +775,7 @@ describe("<TitleBlockZen />", () => {
             breadcrumb={{
               text: "Test Breadcrumb",
               path: "/",
-              handleClick: jest.fn(),
+              handleClick: vi.fn(),
             }}
             sectionTitle="Test Section Title"
             sectionTitleDescription="Test Section Title Description"
@@ -845,7 +813,7 @@ describe("<TitleBlockZen />", () => {
             breadcrumb={{
               text: "Test Breadcrumb",
               path: "/",
-              handleClick: jest.fn(),
+              handleClick: vi.fn(),
             }}
             sectionTitle="Test Section Title"
             sectionTitleDescription="Test Section Title Description"
@@ -909,7 +877,7 @@ describe("<TitleBlockZen />", () => {
     })
 
     it("renders a custom component when you pass a 'render' prop", async () => {
-      const mockFn = jest.fn()
+      const mockFn = vi.fn()
 
       const CustomComponent = (props: CustomBreadcrumbProps): JSX.Element => (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -1018,7 +986,7 @@ describe("<TitleBlockZen />", () => {
       })
 
       it("will render custom button with functional onClick", async () => {
-        const testClickFunc = jest.fn()
+        const testClickFunc = vi.fn()
         render(
           <TitleBlockZen
             title="Test Title"
@@ -1045,7 +1013,7 @@ describe("<TitleBlockZen />", () => {
       })
 
       it("will render custom button with children and not label", () => {
-        const testClickFunc = jest.fn()
+        const testClickFunc = vi.fn()
         render(
           <TitleBlockZen
             title="Test Title"
@@ -1177,7 +1145,7 @@ describe("<TitleBlockZen />", () => {
       })
 
       it("will render the component in the top list of the Drawer content if it is a clickable button", () => {
-        const testClickFunc = jest.fn()
+        const testClickFunc = vi.fn()
         render(
           <TitleBlockZen
             title="Test Title"

package/src/TitleBlockZen/TitleBlockZen.tsx

@@ -6,7 +6,7 @@ import { ArrowLeftIcon, ArrowRightIcon, HamburgerIcon } from "~components/Icon"
 import { Select } from "~components/Select"
 import { Tag } from "~components/Tag"
 import { IconButton } from "~components/__actions__/v2"
-import { useMediaQueries } from "~utils/useMediaQueries"
+import { useMediaQueries } from "~components/utils/useMediaQueries"
 import { MainActions } from "./subcomponents/MainActions"
 import { MobileActions } from "./subcomponents/MobileActions"
 import { SecondaryActions } from "./subcomponents/SecondaryActions"

package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { assetUrl } from "@kaizen/hosted-assets"
 import { AddIcon, StarOnIcon } from "~components/Icon"
+import { assetUrl } from "~components/utils/hostedAssets"
 import { StickerSheet } from "~storybook/components/StickerSheet"
 import { NavigationTab, TitleBlockZen } from "../index"
 
@@ -75,13 +75,6 @@ const meta = {
       <NavigationTab key="6" text="Label" href="#" />,
     ],
   },
-  decorators: [
-    Story => (
-      <div style={{ margin: "-1rem" }}>
-        <Story />
-      </div>
-    ),
-  ],
 } satisfies Meta<typeof TitleBlockZen>
 
 export default meta
@@ -152,7 +145,7 @@ export const HasLongTitle: Story = {
   args: { title: "A long title with over thirty characters" },
 }
 
-export const StickerSheetDefault: Story = {
+export const StickerSheetBreadcrumbs: Story = {
   parameters: {
     docs: {
       canvas: {
@@ -208,4 +201,81 @@ export const StickerSheetDefault: Story = {
       </StickerSheet.Row>
     </StickerSheet>
   ),
+  name: "Sticker Sheet (Breadcrumb)",
+}
+
+export const StickerSheetDefault: Story = {
+  render: () => (
+    <StickerSheet title="Survey Status">
+      <StickerSheet.Body>
+        <StickerSheet.Row rowTitle="Draft">
+          <TitleBlockZen
+            title="Draft Title"
+            surveyStatus={{
+              text: "draft text",
+              status: "draft",
+            }}
+          >
+            Draft
+          </TitleBlockZen>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Default">
+          <TitleBlockZen
+            title="Default Title"
+            surveyStatus={{
+              text: "default text",
+              status: "default",
+            }}
+          >
+            Default
+          </TitleBlockZen>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Scheduled">
+          <TitleBlockZen
+            title="Scheduled Title"
+            surveyStatus={{
+              text: "scheduled text",
+              status: "scheduled",
+            }}
+          >
+            Due
+          </TitleBlockZen>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Live">
+          <TitleBlockZen
+            title="Live Title"
+            surveyStatus={{
+              text: "live text",
+              status: "live",
+            }}
+          >
+            Overdue
+          </TitleBlockZen>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Closed">
+          <TitleBlockZen
+            title="Closed Title"
+            surveyStatus={{
+              text: "closed text",
+              status: "closed",
+            }}
+          >
+            Completed
+          </TitleBlockZen>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Sentiment Positive">
+          <TitleBlockZen
+            title="Sentiment Positive Title"
+            surveyStatus={{
+              text: "sentimentPositive text",
+              status: "sentimentPositive",
+            }}
+          >
+            Completed
+          </TitleBlockZen>
+        </StickerSheet.Row>
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+  name: "Sticker Sheet (Survey Status)",
 }

package/src/TitleBlockZen/subcomponents/MobileActions.spec.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { MobileActions } from "./MobileActions"
-
 const user = userEvent.setup()
 
 const MENU_LINKS = [
@@ -147,7 +147,7 @@ describe("<MobileActions />", () => {
 
 describe("when autoHide is true", () => {
   beforeEach(() => {
-    window.alert = jest.fn()
+    window.alert = vi.fn()
     render(
       <MobileActions
         primaryAction={{

package/src/TitleBlockZen/subcomponents/NavigationTabs.spec.tsx

@@ -1,7 +1,9 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { NavigationTab, CustomNavigationTabProps } from "./NavigationTabs"
+import styles from "./NavigationTabs.module.scss"
 
 const user = userEvent.setup()
 
@@ -33,7 +35,7 @@ describe("NavigationTabs", () => {
 
   describe("with a render prop", () => {
     it("renders the component passed with the navigation tab props", async () => {
-      const handleClick = jest.fn()
+      const handleClick = vi.fn()
       const text = "I am also navigation tabs"
       const href = "www.cultureamp.com"
       render(
@@ -50,7 +52,11 @@ describe("NavigationTabs", () => {
       const button = screen.getByRole("button", {
         name: `${href} - ${text} - true`,
       })
-      expect(button).toHaveClass("linkAnchor", "active", "lightBackground")
+      expect(button).toHaveClass(
+        styles.linkAnchor,
+        styles.active,
+        styles.lightBackground
+      )
 
       await user.click(button)
       await waitFor(() => {

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.spec.tsx

@@ -1,13 +1,13 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { ToggleSwitch, ToggleSwitchProps } from "./ToggleSwitch"
-
 const user = userEvent.setup()
 
 const defaultToggleSwitchProps = {
   id: "someToggleSwitchId",
-  onToggle: jest.fn(),
+  onToggle: vi.fn(),
 }
 
 const renderToggleSwitch = (

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx

@@ -1,7 +1,7 @@
 import React, { InputHTMLAttributes } from "react"
 import classnames from "classnames"
 import { CheckIcon } from "~components/Icon"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./ToggleSwitch.module.scss"
 
 export type ToggledStatus = "on" | "off"

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./VisuallyHidden.module.scss"
 
 export type VisuallyHiddenProps = {

package/src/Well/Well.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import { WellBorderStyleType, WellVariantType, WellColors } from "./types"
 import styles from "./Well.module.scss"
 

package/src/Workflow/Workflow.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react"
-import { OverrideClassName } from "~types/OverrideClassName"
+import { OverrideClassName } from "~components/types/OverrideClassName"
 import {
   Footer,
   FooterProps,
@@ -12,41 +12,41 @@ import {
 
 export type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> &
   FooterProps &
-  HeaderProps
+  Pick<HeaderProps, "workflowName" | "statusTag" | "headerActions">
 
-/**
- * @deprecated Use { Workflow } from `@kaizen/components/future`
- */
 export const Workflow = ({
-  stepName,
   steps,
+  currentStepId,
   isComplete,
   workflowName,
-  status,
+  statusTag,
   headerActions,
   children,
   nextAction,
   previousAction,
   classNameOverride,
   ...restProps
-}: WorkflowProps): JSX.Element => (
-  <Workflow.Wrapper classNameOverride={classNameOverride} {...restProps}>
-    <Workflow.Header
-      workflowName={workflowName}
-      stepName={stepName}
-      status={status}
-      headerActions={headerActions}
-    />
-    <Workflow.Main>{children}</Workflow.Main>
-    <Workflow.Footer
-      stepName={stepName}
-      steps={steps}
-      isComplete={isComplete}
-      nextAction={nextAction}
-      previousAction={previousAction}
-    />
-  </Workflow.Wrapper>
-)
+}: WorkflowProps): JSX.Element => {
+  const currentStep = steps.find(step => step.id === currentStepId)
+  return (
+    <Workflow.Wrapper classNameOverride={classNameOverride} {...restProps}>
+      <Workflow.Header
+        workflowName={workflowName}
+        stepName={currentStep!.label}
+        statusTag={statusTag}
+        headerActions={headerActions}
+      />
+      <Workflow.Main>{children}</Workflow.Main>
+      <Workflow.Footer
+        currentStepId={currentStepId}
+        steps={steps}
+        isComplete={isComplete}
+        nextAction={nextAction}
+        previousAction={previousAction}
+      />
+    </Workflow.Wrapper>
+  )
+}
 
 Workflow.Header = Header
 Workflow.Footer = Footer

package/src/Workflow/_docs/ProgressStepper.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 ProgressStepperStories from "./ProgressStepper.stories"
 
 <Meta of={ProgressStepperStories} />
@@ -11,15 +10,12 @@ import * as ProgressStepperStories from "./ProgressStepper.stories"
   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"
-
 />
 
-<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/ProgressStepper.stories.tsx

@@ -1,22 +1,24 @@
-import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { Workflow } from "../"
+import { WorkflowControls } from "./controls"
 
 const meta = {
-  title: "Pages/Workflow/Components/Progress Stepper",
+  title: "Layout/Workflow/Workflow/Components/Progress Stepper",
   component: Workflow.ProgressStepper,
+  argTypes: {
+    currentStepId: WorkflowControls.currentStepId,
+  },
   args: {
-    stepName: "Settings",
-    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,
   },
-  decorators: [
-    Story => (
-      <div className="bg-blue-500 p-8">
-        <Story />
-      </div>
-    ),
-  ],
 } satisfies Meta<typeof Workflow.ProgressStepper>
 
 export default meta
@@ -42,7 +44,7 @@ export const Playground: Story = {
  */
 export const ProgressStates: Story = {
   args: {
-    stepName: "Questions",
+    currentStepId: "questions-step",
   },
 }
 
@@ -51,15 +53,19 @@ export const ProgressStates: 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" },
+    ],
   },
 }
 
@@ -69,16 +75,12 @@ export const FewerSteps: Story = {
  */
 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" },
     ],
   },
 }