@kaizen/components 1.61.0 → 1.61.2

package/src/__future__/Select/Select.spec.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { render, waitFor, screen, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { Select, SelectProps } from "./Select"
 import { singleMockItems } from "./_docs/mockData"
-
 const user = userEvent.setup()
 
 const SelectWrapper = ({
@@ -87,7 +87,7 @@ describe("<Select />", () => {
       })
 
       it("fires the onOpenChange callback when the trigger is interacted", async () => {
-        const onOpenChange = jest.fn()
+        const onOpenChange = vi.fn()
         const { getByRole } = render(
           <SelectWrapper
             selectedKey="batch-brew"
@@ -267,7 +267,7 @@ describe("<Select />", () => {
 
     describe("Selection - Mouse interaction", () => {
       it("fires onSelectionChange when clicks on a option", async () => {
-        const spy = jest.fn()
+        const spy = vi.fn()
         const { getByRole } = render(
           <SelectWrapper defaultOpen onSelectionChange={spy} />
         )
@@ -335,7 +335,7 @@ describe("<Select />", () => {
       })
 
       it("fires onSelectionChange when hits enter on a option", async () => {
-        const spy = jest.fn()
+        const spy = vi.fn()
         const { getByRole } = render(<SelectWrapper onSelectionChange={spy} />)
 
         await user.tab()

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

@@ -1,6 +1,8 @@
 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__"
@@ -10,12 +12,16 @@ 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"

package/src/__layout__/Workflow/v3/subcomponents/Footer/components/Root/FooterRoot.module.css

@@ -8,6 +8,7 @@
   padding: var(--spacing-24) var(--spacing-12);
   background: var(--color-white);
   gap: var(--spacing-16);
+  border-top: 2px solid rgba(var(--color-gray-600-rgb), 0.1);
 
   @media (width >= 768px) {
     grid-template-columns: 1fr 5fr 1fr;

package/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/Root.module.css

@@ -6,9 +6,9 @@
   justify-content: center;
   align-items: center;
   text-align: center;
-  box-shadow: var(--shadow-small-box-shadow);
   padding: var(--spacing-24);
   gap: var(--spacing-16);
+  border-bottom: 2px solid rgb(var(--color-gray-600-rgb), 0.1);
 
   @media (width >= 768px) {
     align-items: start;

package/src/__overlays__/Tooltip/v1/Tooltip.spec.tsx

@@ -48,7 +48,7 @@ describe("<Tooltip />", () => {
     // Non-semantic elements without roles should not have aria-description on them.
     // They won't read to all screen readers as expected and may be reported in Storybook's accessibility tab (which uses Axe under the hood)
     it("doesn't add an accessible description when wrapping a non-semantic element", async () => {
-      const warn = jest.spyOn(console, "warn").mockImplementation()
+      const warn = vi.spyOn(console, "warn").mockImplementation(vi.fn())
 
       render(
         <Tooltip

package/src/__overlays__/Tooltip/v1/utils/isSemanticElement.spec.tsx

@@ -1,13 +1,13 @@
 import React from "react"
+import { vi } from "vitest"
 import { ArrowRightIcon } from "~components/Icon"
 import { Button, IconButton } from "~components/__actions__/v2"
 import { isSemanticElement } from "./isSemanticElement"
-
 describe("isSemanticElement", () => {
   it("returns true if provided a native element with a semantic role", () => {
     expect(
       isSemanticElement(
-        <button onClick={jest.fn()} type="button">
+        <button onClick={vi.fn()} type="button">
           click
         </button>
       )
@@ -28,19 +28,14 @@ describe("isSemanticElement", () => {
   it("will return true if provided a non-semantic element with a semantic role", () => {
     expect(
       isSemanticElement(
-        <span
-          tabIndex={0}
-          role="button"
-          onKeyDown={jest.fn}
-          onClick={jest.fn()}
-        >
+        <span tabIndex={0} role="button" onKeyDown={vi.fn()} onClick={vi.fn()}>
           custom semantic el
         </span>
       )
     ).toBe(true)
     expect(
       isSemanticElement(
-        <div tabIndex={0} role="button" onKeyDown={jest.fn} onClick={jest.fn()}>
+        <div tabIndex={0} role="button" onKeyDown={vi.fn()} onClick={vi.fn()}>
           custom semantic el
         </div>
       )

package/src/utils/useMediaQueries.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
+import { vi } from "vitest"
 import { useMediaQueries, subtractOnePixel } from "./useMediaQueries"
-
 const ExampleComponent = (): JSX.Element => {
   const { queries, components } = useMediaQueries({
     prefersReducedMotion: "(prefers-reduced-motion: reduce)",
@@ -27,15 +27,15 @@ const ExampleComponent = (): JSX.Element => {
 export const mockMatchMedia = (matches: boolean = false): void => {
   Object.defineProperty(window, "matchMedia", {
     writable: true,
-    value: jest.fn().mockImplementation(query => ({
+    value: vi.fn().mockImplementation(query => ({
       matches,
       media: query,
       onchange: null,
-      addListener: jest.fn(), // Deprecated
-      removeListener: jest.fn(), // Deprecated
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
+      addListener: vi.fn(), // Deprecated
+      removeListener: vi.fn(), // Deprecated
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
     })),
   })
 }

package/src/Heading/__snapshots__/Heading.spec.tsx.snap

@@ -1,85 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={display-0} /> 1`] = `
-<body>
-  <div>
-    <h1
-      class="heading display-0 dark large"
-    >
-      Example
-    </h1>
-  </div>
-</body>
-`;
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={heading-1} /> 1`] = `
-<body>
-  <div>
-    <h1
-      class="heading heading-1 dark large"
-    >
-      Example
-    </h1>
-  </div>
-</body>
-`;
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={heading-2} /> 1`] = `
-<body>
-  <div>
-    <h2
-      class="heading heading-2 dark large"
-    >
-      Example
-    </h2>
-  </div>
-</body>
-`;
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={heading-3} /> 1`] = `
-<body>
-  <div>
-    <h3
-      class="heading heading-3 dark small"
-    >
-      Example
-    </h3>
-  </div>
-</body>
-`;
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={heading-4} /> 1`] = `
-<body>
-  <div>
-    <h4
-      class="heading heading-4 dark small"
-    >
-      Example
-    </h4>
-  </div>
-</body>
-`;
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={heading-5} /> 1`] = `
-<body>
-  <div>
-    <h5
-      class="heading heading-5 dark small"
-    >
-      Example
-    </h5>
-  </div>
-</body>
-`;
-
-exports[`<Heading /> defaults to the correct HTML element renders the correct element for <Heading variant={heading-6} /> 1`] = `
-<body>
-  <div>
-    <h6
-      class="heading heading-6 dark small"
-    >
-      Example
-    </h6>
-  </div>
-</body>
-`;

package/src/Illustration/utils/usePausePlay.spec.tsx

@@ -1,85 +0,0 @@
-import React, { RefObject, act } from "react"
-import { render, renderHook } from "@testing-library/react"
-import { LaunchIcon, PauseIcon } from "~components/Icon"
-import { usePausePlay, usePausePlayHook } from "./usePausePlay"
-
-describe("usePausePlay()", () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  let hookResult: usePausePlayHook
-  const mockPause = jest.fn()
-  const mockPlay = jest.fn()
-
-  describe("when toggling a currently playing video", () => {
-    beforeEach(() => {
-      const fakeRef = {
-        current: {
-          pause: mockPause,
-          play: mockPlay,
-          paused: false, // It's playing
-        },
-      } as unknown as RefObject<HTMLVideoElement>
-
-      const { result } = renderHook(() => usePausePlay(fakeRef))
-
-      act(() => {
-        result.current.toggle()
-      })
-
-      hookResult = result.current
-    })
-
-    it("pauses the video", () => {
-      expect(mockPause).toHaveBeenCalled()
-    })
-
-    it("returns the play icon", () => {
-      const { baseElement: original } = render(hookResult.icon)
-      const { baseElement: comparison } = render(
-        <LaunchIcon role="presentation" />
-      )
-      expect(original).toEqual(comparison)
-    })
-
-    it("returns the 'Play animation' label", () => {
-      expect(hookResult.label).toEqual("Play animation")
-    })
-  })
-
-  describe("when toggling a currently paused video", () => {
-    beforeEach(() => {
-      const fakeRef = {
-        current: {
-          pause: mockPause,
-          play: mockPlay,
-          paused: true, // It's not playing
-        },
-      } as unknown as RefObject<HTMLVideoElement>
-
-      const { result } = renderHook(() => usePausePlay(fakeRef))
-
-      act(() => {
-        result.current.toggle()
-      })
-
-      hookResult = result.current
-    })
-    it("starts the video again", () => {
-      expect(mockPlay).toHaveBeenCalled()
-    })
-
-    it("returns the pause icon", () => {
-      const { baseElement: original } = render(hookResult.icon)
-      const { baseElement: comparison } = render(
-        <PauseIcon role="presentation" />
-      )
-      expect(original).toEqual(comparison)
-    })
-
-    it("returns the 'Pause animation' label", () => {
-      expect(hookResult.label).toEqual("Pause animation")
-    })
-  })
-})

package/src/Notification/subcomponents/GenericNotification/GenericNotification.spec.tsx

@@ -1,76 +0,0 @@
-import React, { act } from "react"
-import { fireEvent, waitFor } from "@testing-library/dom"
-import { render } from "@testing-library/react"
-import ReactTestUtils from "react-dom/test-utils"
-import { GenericNotification } from "./GenericNotification"
-
-describe("<GenericNotification />", () => {
-  afterEach(() => {
-    jest.runAllTimers()
-  })
-
-  beforeEach(() => {
-    jest.useFakeTimers()
-  })
-
-  it('begins "hidden" but transitions out of it immediately', async () => {
-    const { container } = render(
-      <GenericNotification type="positive" style="inline" title="Success">
-        This is my positive notification
-      </GenericNotification>
-    )
-
-    await waitFor(() => {
-      expect(container.querySelector(".hidden")).toBeInTheDocument()
-    })
-
-    await act(async () => {
-      jest.advanceTimersByTime(50)
-    })
-
-    await waitFor(() => {
-      expect(container.querySelector(".hidden")).not.toBeInTheDocument()
-    })
-  })
-
-  it("hides the notification and triggers the onHide callback when the cancel button is clicked", async () => {
-    const onHide = jest.fn()
-    const { container, getByTestId } = render(
-      <GenericNotification
-        type="positive"
-        style="inline"
-        title="Success"
-        onHide={onHide}
-      >
-        Notification Text
-      </GenericNotification>
-    )
-
-    // The element should start in a "hidden" state
-    expect(container.querySelector(".hidden")).toBeTruthy()
-
-    // After clicking, the element should fade out, but the onHide not trigger yet.
-    const cancelButton = getByTestId("close-button")
-    const notification = container.querySelector(".notification")
-
-    fireEvent(cancelButton, new MouseEvent("click"))
-
-    await waitFor(() => {
-      expect(notification).toBeTruthy()
-    })
-
-    // Cannot use @testing-library/react `fireEvent` as it relies on jsdom events
-    // TransitionEvent has not been implemented yet, using `ReactTestUtils.Simulate` is a workaround
-    act(() => {
-      notification &&
-        ReactTestUtils.Simulate.transitionEnd(notification, {
-          propertyName: "margin-top",
-        } as any)
-    })
-
-    await waitFor(() => {
-      expect(notification).not.toBeInTheDocument()
-    })
-    await waitFor(() => expect(onHide).toHaveBeenCalledTimes(1))
-  })
-})

package/src/Text/__snapshots__/Text.spec.tsx.snap

@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Text /> defaults to the correct HTML element renders the correct element for <Text variant={body} /> 1`] = `
-<body>
-  <div>
-    <p
-      class="text body dark"
-    >
-      Example
-    </p>
-  </div>
-</body>
-`;
-
-exports[`<Text /> defaults to the correct HTML element renders the correct element for <Text variant={extra-small} /> 1`] = `
-<body>
-  <div>
-    <p
-      class="text extra-small dark"
-    >
-      Example
-    </p>
-  </div>
-</body>
-`;
-
-exports[`<Text /> defaults to the correct HTML element renders the correct element for <Text variant={intro-lede} /> 1`] = `
-<body>
-  <div>
-    <p
-      class="text intro-lede dark"
-    >
-      Example
-    </p>
-  </div>
-</body>
-`;
-
-exports[`<Text /> defaults to the correct HTML element renders the correct element for <Text variant={small} /> 1`] = `
-<body>
-  <div>
-    <p
-      class="text small dark"
-    >
-      Example
-    </p>
-  </div>
-</body>
-`;

package/src/__overlays__/Tooltip/v1/subcomponents/AppearanceAnim.spec.tsx

@@ -1,39 +0,0 @@
-import React from "react"
-import { render } from "@testing-library/react"
-import useDebounce from "use-debounce"
-import { AnimationProvider } from "./AppearanceAnim"
-
-jest.mock("use-debounce")
-
-const useDebouncedCallback = useDebounce.useDebouncedCallback as jest.Mock
-let mockReturnValue: Record<string, any>
-
-describe("<AnimationProvider />", () => {
-  beforeEach(() => {
-    mockReturnValue = jest.fn()
-    mockReturnValue.cancel = (): void => undefined
-    useDebouncedCallback.mockImplementation(() => mockReturnValue)
-  })
-
-  describe("When no animationDuration prop is given", () => {
-    it("calls useDebouncedCallback with a 400 ms delay", () => {
-      render(<AnimationProvider isVisible />)
-      expect(useDebouncedCallback).toHaveBeenCalledWith(
-        expect.anything(),
-        400,
-        expect.anything()
-      )
-    })
-  })
-  describe("When an animationDuration prop is given", () => {
-    it("calls useDebouncedCallback with the animationDuration value", () => {
-      const expected = 1000
-      render(<AnimationProvider isVisible animationDuration={expected} />)
-      expect(useDebouncedCallback).toHaveBeenCalledWith(
-        expect.anything(),
-        expected,
-        expect.anything()
-      )
-    })
-  })
-})