@kaizen/components 1.61.1 → 1.61.2

package/src/Collapsible/Collapsible/Collapsible.spec.tsx

@@ -1,23 +1,11 @@
 import React from "react"
 import { queryByTestId, render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { Collapsible } from "./Collapsible"
-
 const user = userEvent.setup()
 
 describe("<Collapsible />", () => {
-  it("includes the 'sticky' class on buttons when the 'sticky' prop is specified", () => {
-    const { getByTestId } = render(
-      <Collapsible id="1" title="First panel" sticky={{ top: "0px" }}>
-        First panel content
-      </Collapsible>
-    )
-
-    const collapsibleContainer = getByTestId("collapsible-header-1")
-
-    expect(collapsibleContainer.classList.contains("sticky")).toBeTruthy()
-  })
-
   it("toggles the height of the section on click of the button", async () => {
     const { getByTestId } = render(
       <Collapsible id="1" open title="First panel">
@@ -74,7 +62,7 @@ describe("<Collapsible />", () => {
   })
 
   it("runs the onToggle callback", async () => {
-    const onToggle = jest.fn()
+    const onToggle = vi.fn()
 
     const { getByTestId } = render(
       <Collapsible id="1" open title="First panel" onToggle={onToggle}>

package/src/Collapsible/Collapsible/_docs/Collapsible.stickersheet.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react"
 import { Meta } from "@storybook/react"
+import { within } from "@storybook/test"
 import { Heading } from "~components/Heading"
+import { Text } from "~components/Text"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -73,3 +75,50 @@ export const StickerSheetRTL: StickerSheetStory = {
   name: "Sticker Sheet (RTL)",
   parameters: { textDirection: "rtl" },
 }
+
+export const Sticky: StickerSheetStory = {
+  render: () => (
+    <StickerSheet>
+      <StickerSheet.Body>
+        <StickerSheet.Row rowTitle="Sticky header">
+          <div style={{ height: "300px", overflow: "auto" }}>
+            <Collapsible
+              open
+              title="Sticky"
+              sticky={{ top: "-1px" }}
+              style={{ maxWidth: "300px" }}
+            >
+              <Text variant="body">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Phasellus ac scelerisque sem, vel ultricies justo. Donec eu
+                porttitor ante, nec gravida orci. Nulla facilisi. Cras varius
+                erat id fermentum mattis. Mauris bibendum vestibulum erat, quis
+                blandit metus viverra sit amet. Vivamus pretium vitae turpis ut
+                condimentum. Sed vulputate magna nisl, in cursus urna hendrerit
+                et. Aenean semper, est non feugiat sodales, nisl ligula aliquet
+                lorem, sit amet scelerisque arcu quam a sapien. Donec in viverra
+                urna.
+              </Text>
+              <Text variant="body" data-testid="bottom-content">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Phasellus ac scelerisque sem, vel ultricies justo. Donec eu
+                porttitor ante, nec gravida orci. Nulla facilisi. Cras varius
+                erat id fermentum mattis. Mauris bibendum vestibulum erat, quis
+                blandit metus viverra sit amet. Vivamus pretium vitae turpis ut
+                condimentum. Sed vulputate magna nisl, in cursus urna hendrerit
+                et. Aenean semper, est non feugiat sodales, nisl ligula aliquet
+                lorem, sit amet scelerisque arcu quam a sapien. Donec in viverra
+                urna.
+              </Text>
+            </Collapsible>
+          </div>
+        </StickerSheet.Row>
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const element = canvas.getByTestId("bottom-content")
+    element.scrollIntoView({ behavior: "instant", block: "end" })
+  },
+}

package/src/Collapsible/Collapsible/_docs/Collapsible.stories.tsx

@@ -88,17 +88,6 @@ export const CustomHeader: Story = {
   ),
 }
 
-export const Sticky: Story = {
-  args: {
-    title: "Sticky header",
-  },
-  render: ({ title }) => (
-    <Collapsible open title={title} sticky={{ top: "-1px" }}>
-      This does not work in Storybook docs, so use this as a code example only.
-    </Collapsible>
-  ),
-}
-
 const controlledSourceCode = `
 const [isOpen, setIsOpen] = useState<boolean>(false)
 return (<Collapsible {...args} open={isOpen} onToggle={setIsOpen} />)

package/src/DateInput/DateInputDescription/DateInputDescription.spec.tsx

@@ -1,19 +1,18 @@
 import React from "react"
-import { waitFor } from "@testing-library/react"
+import { waitFor, render } from "@testing-library/react"
 import { enUS } from "date-fns/locale"
-import { renderWithIntl } from "~tests"
 import { DateInputDescription } from "./DateInputDescription"
 
 describe("DateInputDescription", () => {
   it("returns template string when description is undefined", async () => {
-    const { container } = renderWithIntl(<DateInputDescription locale={enUS} />)
+    const { container } = render(<DateInputDescription locale={enUS} />)
     await waitFor(() => {
       expect(container).toHaveTextContent("Input format:mm/dd/yyyy")
     })
   })
 
   it("returns template string when description is empty string", async () => {
-    const { container } = renderWithIntl(
+    const { container } = render(
       <DateInputDescription description="" locale={enUS} />
     )
     await waitFor(() => {
@@ -22,7 +21,7 @@ describe("DateInputDescription", () => {
   })
 
   it("returns template string when description is a string", async () => {
-    const { container } = renderWithIntl(
+    const { container } = render(
       <DateInputDescription
         description="Custom description here"
         locale={enUS}
@@ -36,7 +35,7 @@ describe("DateInputDescription", () => {
   })
 
   it("returns template string when description is an element", async () => {
-    const { container } = renderWithIntl(
+    const { container } = render(
       <DateInputDescription
         description={<span>Custom description span</span>}
         locale={enUS}

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.spec.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from "react"
 import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import {
   DateInputWithIconButton,
   DateInputWithIconButtonProps,
@@ -11,7 +12,7 @@ const user = userEvent.setup()
 const defaultProps: DateInputWithIconButtonProps = {
   id: "test__date-input-with-icon-button",
   labelText: "Due date",
-  onButtonClick: jest.fn<void, []>(),
+  onButtonClick: vi.fn(),
 }
 
 const DateInputWithIconButtonWrapper = (
@@ -52,10 +53,7 @@ describe("<DateInputWithIconButton />", () => {
 
   describe("Refs", () => {
     it("correctly passes through input and button refs", async () => {
-      const onButtonClick = jest.fn<
-        void,
-        [string | null | undefined, string | null | undefined]
-      >()
+      const onButtonClick = vi.fn()
 
       const Wrapper = (): JSX.Element => {
         const inputRef = useRef<HTMLInputElement>(null)
@@ -74,7 +72,7 @@ describe("<DateInputWithIconButton />", () => {
               ref={ref}
               id="test__date-input-field--ref"
               labelText="label"
-              onButtonClick={jest.fn<void, []>()}
+              onButtonClick={vi.fn()}
             />
             <button type="button" onClick={handleClick}>
               Click me

package/src/DatePicker/DatePicker.spec.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react"
-import { screen, waitFor, within } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { renderWithIntl } from "~tests"
+import { vi } from "vitest"
 import { DatePicker } from "./DatePicker"
 import { DatePickerProps } from "."
 
@@ -27,14 +27,14 @@ const DatePickerWrapper = ({
 
 describe("<DatePicker />", () => {
   it("should not show the calendar initially", async () => {
-    renderWithIntl(<DatePickerWrapper />)
+    render(<DatePickerWrapper />)
     await waitFor(() => {
       expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
     })
   })
 
   it("should have an empty input value when a date is not provided", async () => {
-    renderWithIntl(<DatePickerWrapper />)
+    render(<DatePickerWrapper />)
     await waitFor(() => {
       const input = screen.getByLabelText("Input label", { selector: "input" })
       expect(input).toHaveValue("")
@@ -42,7 +42,7 @@ describe("<DatePicker />", () => {
   })
 
   it("should pre-fill the input when an initial date is provided", async () => {
-    renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+    render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
     await waitFor(() => {
       expect(screen.getByDisplayValue("Mar 1, 2022")).toBeInTheDocument()
     })
@@ -68,7 +68,7 @@ describe("<DatePicker />", () => {
       )
     }
 
-    renderWithIntl(<DelayedSelectedDate />)
+    render(<DelayedSelectedDate />)
     expect(screen.getByRole("combobox")).toBeInTheDocument()
     expect(screen.getByRole("combobox")).toHaveValue("")
     await waitFor(() => {
@@ -77,7 +77,7 @@ describe("<DatePicker />", () => {
   })
 
   it("allows you to tab through input, button and calendar", async () => {
-    renderWithIntl(<DatePickerWrapper />)
+    render(<DatePickerWrapper />)
     const input = screen.getByLabelText("Input label", { selector: "input" })
 
     await user.tab()
@@ -112,9 +112,7 @@ describe("<DatePicker />", () => {
   }, 6000)
 
   it("should validate and close the calendar when the user presses the Enter key while focus is in the input", async () => {
-    renderWithIntl(
-      <DatePickerWrapper disabledDates={[new Date("2022-05-01")]} />
-    )
+    render(<DatePickerWrapper disabledDates={[new Date("2022-05-01")]} />)
 
     const input = screen.getByLabelText("Input label", { selector: "input" })
     await user.click(input)
@@ -139,7 +137,7 @@ describe("<DatePicker />", () => {
 describe("<DatePicker /> - Focus element", () => {
   describe("Click on input", () => {
     beforeEach(async () => {
-      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.click(input)
@@ -181,7 +179,7 @@ describe("<DatePicker /> - Focus element", () => {
 
   describe("Keydown arrow on input", () => {
     it("shows focus within the calendar", async () => {
-      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.tab()
@@ -200,7 +198,7 @@ describe("<DatePicker /> - Focus element", () => {
     })
 
     it("returns focus to the input when the user escapes from the calendar", async () => {
-      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.tab()
@@ -222,7 +220,7 @@ describe("<DatePicker /> - Focus element", () => {
 
   describe("Click on calendar button", () => {
     beforeEach(async () => {
-      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
       const calendarButton = screen.getByRole("button", {
         name: "Change date, Mar 1, 2022",
@@ -258,7 +256,7 @@ describe("<DatePicker /> - Focus element", () => {
     let calendarButton: HTMLElement
 
     beforeEach(async () => {
-      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
       calendarButton = screen.getByRole("button", {
         name: "Change date, Mar 1, 2022",
@@ -305,7 +303,7 @@ describe("<DatePicker /> - Focus element", () => {
 
 describe("<DatePicker /> - Input format", () => {
   it("formats values when focus is on the input", async () => {
-    renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+    render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
     const input = screen.getByLabelText("Input label", { selector: "input" })
     expect(input).toHaveValue("Mar 1, 2022")
@@ -318,7 +316,7 @@ describe("<DatePicker /> - Input format", () => {
   })
 
   it("formats values when the input loses focus - onBlur", async () => {
-    renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+    render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
     const input = screen.getByLabelText("Input label", { selector: "input" })
     expect(input).toHaveValue("Mar 1, 2022")
@@ -340,7 +338,7 @@ describe("<DatePicker /> - Input format", () => {
 describe("<DatePicker /> - Validation", () => {
   describe("Custom Validation", () => {
     it("displays custom validation message when provided (overrides inbuilt validation)", async () => {
-      renderWithIntl(
+      render(
         <DatePickerWrapper
           status="error"
           validationMessage="Custom validation message"
@@ -358,8 +356,8 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("does not show inbuilt validation message when onValidate is set", async () => {
-      const onValidate = jest.fn()
-      renderWithIntl(
+      const onValidate = vi.fn()
+      render(
         <DatePickerWrapper
           selectedDay={new Date("potato")}
           onValidate={onValidate}
@@ -377,8 +375,8 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("triggers validation when initial selected date is invalid", async () => {
-      const onValidate = jest.fn()
-      renderWithIntl(
+      const onValidate = vi.fn()
+      render(
         <DatePickerWrapper
           onValidate={onValidate}
           selectedDay={new Date("potato")}
@@ -390,8 +388,8 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("triggers validation when initial selected date is disabled", async () => {
-      const onValidate = jest.fn()
-      renderWithIntl(
+      const onValidate = vi.fn()
+      render(
         <DatePickerWrapper
           onValidate={onValidate}
           disabledBefore={new Date("2022-05-15")}
@@ -404,8 +402,8 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("does not trigger validation when initial selected date is empty", async () => {
-      const onValidate = jest.fn()
-      renderWithIntl(
+      const onValidate = vi.fn()
+      render(
         <DatePickerWrapper onValidate={onValidate} selectedDay={undefined} />
       )
       await waitFor(() => {
@@ -414,8 +412,8 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("does not trigger validation when initial selected date is valid", async () => {
-      const onValidate = jest.fn()
-      renderWithIntl(
+      const onValidate = vi.fn()
+      render(
         <DatePickerWrapper
           onValidate={onValidate}
           selectedDay={new Date("2022-05-05")}
@@ -427,8 +425,8 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("triggers validation when selected date is updated to invalid", async () => {
-      const onValidate = jest.fn()
-      renderWithIntl(
+      const onValidate = vi.fn()
+      render(
         <DatePickerWrapper
           onValidate={onValidate}
           defaultMonth={new Date("2022-03-01")}
@@ -451,7 +449,7 @@ describe("<DatePicker /> - Validation", () => {
 
   describe("Inbuilt Validation", () => {
     it("displays error message when selected day is invalid", async () => {
-      renderWithIntl(<DatePickerWrapper selectedDay={new Date("potato")} />)
+      render(<DatePickerWrapper selectedDay={new Date("potato")} />)
 
       await waitFor(() => {
         const icon = screen.getByLabelText("error message")
@@ -461,7 +459,7 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("displays error message when selected day is disabled", async () => {
-      renderWithIntl(
+      render(
         <DatePickerWrapper
           disabledBefore={new Date("2022-05-15")}
           selectedDay={new Date("2022-05-05")}
@@ -476,7 +474,7 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("displays error message when input date is invalid", async () => {
-      renderWithIntl(<DatePickerWrapper />)
+      render(<DatePickerWrapper />)
 
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.type(input, "05/05/2022Blah")
@@ -491,9 +489,7 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("displays error message when input date is disabled", async () => {
-      renderWithIntl(
-        <DatePickerWrapper disabledBefore={new Date("2022-05-15")} />
-      )
+      render(<DatePickerWrapper disabledBefore={new Date("2022-05-15")} />)
 
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.type(input, "05/05/2022")

package/src/DatePicker/subcomponents/DateInputField/DateInputField.spec.tsx

@@ -1,8 +1,8 @@
 import React, { useRef } from "react"
-import { screen, waitFor } from "@testing-library/react"
+import { screen, waitFor, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { enUS } from "date-fns/locale"
-import { renderWithIntl } from "~tests"
+import { vi } from "vitest"
 import { DateInputField, DateInputFieldProps } from "./DateInputField"
 
 const user = userEvent.setup()
@@ -10,8 +10,8 @@ const user = userEvent.setup()
 const defaultProps: DateInputFieldProps = {
   id: "test__date-input-field",
   labelText: "Bacon expiry",
-  onButtonClick: jest.fn(),
-  onKeyDown: jest.fn(),
+  onButtonClick: vi.fn(),
+  onKeyDown: vi.fn(),
   value: undefined,
   locale: enUS,
 }
@@ -23,7 +23,7 @@ const DateInputFieldWrapper = (
 describe("<DateInputField />", () => {
   describe("Input", () => {
     it("associates the description with the input", async () => {
-      renderWithIntl(<DateInputFieldWrapper />)
+      render(<DateInputFieldWrapper />)
       await waitFor(() => {
         expect(
           screen.getByRole("textbox", {
@@ -37,7 +37,7 @@ describe("<DateInputField />", () => {
 
   describe("Icon button", () => {
     it("has helpful label", async () => {
-      renderWithIntl(<DateInputFieldWrapper />)
+      render(<DateInputFieldWrapper />)
       await waitFor(() => {
         expect(
           screen.getByRole("button", { name: "Choose date" })
@@ -46,7 +46,7 @@ describe("<DateInputField />", () => {
     })
 
     it("has helpful label showing the current date when one is selected", async () => {
-      renderWithIntl(
+      render(
         <DateInputFieldWrapper
           value="Mar 1, 2022"
           onChange={(): void => undefined}
@@ -62,7 +62,7 @@ describe("<DateInputField />", () => {
 
   describe("States", () => {
     it("disables both input and icon button", async () => {
-      renderWithIntl(<DateInputFieldWrapper disabled />)
+      render(<DateInputFieldWrapper disabled />)
       const input = screen.getByRole("textbox", { name: "Bacon expiry" })
       const calendarButton = screen.getByRole("button", { name: "Choose date" })
       await waitFor(() => {
@@ -74,7 +74,7 @@ describe("<DateInputField />", () => {
 
   describe("Validation", () => {
     it("shows validation message", async () => {
-      renderWithIntl(
+      render(
         <DateInputFieldWrapper
           status="error"
           validationMessage="There is an error"
@@ -87,7 +87,7 @@ describe("<DateInputField />", () => {
     })
 
     it("does not show validation message when field is disabled", async () => {
-      renderWithIntl(
+      render(
         <DateInputFieldWrapper
           status="error"
           validationMessage="There is an error"
@@ -106,7 +106,7 @@ describe("<DateInputField />", () => {
 
   describe("Refs", () => {
     it("correctly passes through input and button refs", async () => {
-      const onButtonClick = jest.fn()
+      const onButtonClick = vi.fn()
 
       const Wrapper = (): JSX.Element => {
         const inputRef = useRef<HTMLInputElement>(null)
@@ -125,7 +125,7 @@ describe("<DateInputField />", () => {
               ref={ref}
               id="test__date-input-field--ref"
               labelText="Adventure time"
-              onButtonClick={jest.fn<void, []>()}
+              onButtonClick={vi.fn()}
               locale={enUS}
             />
             <button type="button" onClick={handleClick}>
@@ -135,7 +135,7 @@ describe("<DateInputField />", () => {
         )
       }
 
-      renderWithIntl(<Wrapper />)
+      render(<Wrapper />)
 
       await user.click(screen.getByText("Click me"))
       expect(onButtonClick).toHaveBeenCalledWith(

package/src/DatePicker/utils/validateDate.spec.ts

@@ -1,5 +1,4 @@
-import { screen, waitFor } from "@testing-library/react"
-import { renderWithIntl } from "~tests"
+import { screen, waitFor, render } from "@testing-library/react"
 import { validateDate } from "./validateDate"
 
 describe("validateDate", () => {
@@ -40,7 +39,7 @@ describe("validateDate", () => {
     })
     expect(newDate).toBeUndefined()
 
-    renderWithIntl(validationMessage)
+    render(validationMessage)
     await waitFor(() => {
       expect(screen.getByText("Date is invalid")).toBeVisible()
     })
@@ -64,7 +63,7 @@ describe("validateDate", () => {
     })
     expect(newDate).toBeUndefined()
 
-    renderWithIntl(validationMessage)
+    render(validationMessage)
     await waitFor(() => {
       expect(screen.getByText("Date is invalid")).toBeVisible()
     })
@@ -88,7 +87,7 @@ describe("validateDate", () => {
     })
     expect(newDate).toBeUndefined()
 
-    renderWithIntl(validationMessage)
+    render(validationMessage)
     await waitFor(() => {
       expect(screen.getByText("potato is an invalid date")).toBeVisible()
     })
@@ -117,7 +116,7 @@ describe("validateDate", () => {
     })
     expect(newDate).toBeUndefined()
 
-    renderWithIntl(validationMessage)
+    render(validationMessage)
     await waitFor(() => {
       expect(
         screen.getByText("03/01/2022 is not available, try another date")

package/src/EmptyState/EmptyState.spec.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { cleanup, render } from "@testing-library/react"
 import { EmptyState, EmptyStateProps } from "./EmptyState"
 
-jest.mock("~components/Illustration", () => ({
+vi.mock("~components/Illustration", () => ({
   EmptyStatesPositive: (): JSX.Element => (
     <div>EmptyStatesPositive_Component</div>
   ),