@kaizen/components 1.52.0 → 1.53.0

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

@@ -1,43 +1,51 @@
 import React from "react"
-import { render } from "@testing-library/react"
+import { waitFor } 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", () => {
-    const { container } = render(<DateInputDescription locale={enUS} />)
-    expect(container).toHaveTextContent("Input format:mm/dd/yyyy")
+  it("returns template string when description is undefined", async () => {
+    const { container } = renderWithIntl(<DateInputDescription locale={enUS} />)
+    await waitFor(() => {
+      expect(container).toHaveTextContent("Input format:mm/dd/yyyy")
+    })
   })
 
-  it("returns template string when description is empty string", () => {
-    const { container } = render(
+  it("returns template string when description is empty string", async () => {
+    const { container } = renderWithIntl(
       <DateInputDescription description="" locale={enUS} />
     )
-    expect(container).toHaveTextContent("Input format:mm/dd/yyyy")
+    await waitFor(() => {
+      expect(container).toHaveTextContent("Input format:mm/dd/yyyy")
+    })
   })
 
-  it("returns template string when description is a string", () => {
-    const { container } = render(
+  it("returns template string when description is a string", async () => {
+    const { container } = renderWithIntl(
       <DateInputDescription
         description="Custom description here"
         locale={enUS}
       />
     )
-    expect(container).toHaveTextContent(
-      "Custom description here(Input format:mm/dd/yyyy)"
-    )
+    await waitFor(() => {
+      expect(container).toHaveTextContent(
+        "Custom description here(Input format:mm/dd/yyyy)"
+      )
+    })
   })
 
-  it("returns template string when description is an element", () => {
-    const { container } = render(
+  it("returns template string when description is an element", async () => {
+    const { container } = renderWithIntl(
       <DateInputDescription
         description={<span>Custom description span</span>}
         locale={enUS}
       />
     )
-
-    expect(container).toHaveTextContent(
-      "Custom description span(Input format:mm/dd/yyyy)"
-    )
+    await waitFor(() => {
+      expect(container).toHaveTextContent(
+        "Custom description span(Input format:mm/dd/yyyy)"
+      )
+    })
   })
 })

package/src/DatePicker/DatePicker.spec.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react"
-import { render, screen, waitFor, within } from "@testing-library/react"
+import { screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { renderWithIntl } from "~tests"
 import { DatePicker } from "./DatePicker"
-import { ValidationResponse } from "./types"
 import { DatePickerProps } from "."
 
 const user = userEvent.setup()
@@ -26,20 +26,26 @@ const DatePickerWrapper = ({
 }
 
 describe("<DatePicker />", () => {
-  it("should not show the calendar initially", () => {
-    render(<DatePickerWrapper />)
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+  it("should not show the calendar initially", async () => {
+    renderWithIntl(<DatePickerWrapper />)
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    })
   })
 
-  it("should have an empty input value when a date is not provided", () => {
-    render(<DatePickerWrapper />)
-    const input = screen.getByLabelText("Input label", { selector: "input" })
-    expect(input).toHaveValue("")
+  it("should have an empty input value when a date is not provided", async () => {
+    renderWithIntl(<DatePickerWrapper />)
+    await waitFor(() => {
+      const input = screen.getByLabelText("Input label", { selector: "input" })
+      expect(input).toHaveValue("")
+    })
   })
 
-  it("should pre-fill the input when an initial date is provided", () => {
-    render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
-    expect(screen.getByDisplayValue("Mar 1, 2022")).toBeInTheDocument()
+  it("should pre-fill the input when an initial date is provided", async () => {
+    renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("Mar 1, 2022")).toBeInTheDocument()
+    })
   })
 
   it("re-renders the displayed input when an selectedDay is updated after initial render", async () => {
@@ -62,7 +68,7 @@ describe("<DatePicker />", () => {
       )
     }
 
-    render(<DelayedSelectedDate />)
+    renderWithIntl(<DelayedSelectedDate />)
     expect(screen.getByRole("combobox")).toBeInTheDocument()
     expect(screen.getByRole("combobox")).toHaveValue("")
     await waitFor(() => {
@@ -71,7 +77,7 @@ describe("<DatePicker />", () => {
   })
 
   it("allows you to tab through input, button and calendar", async () => {
-    render(<DatePickerWrapper />)
+    renderWithIntl(<DatePickerWrapper />)
     const input = screen.getByLabelText("Input label", { selector: "input" })
 
     await user.tab()
@@ -106,11 +112,9 @@ describe("<DatePicker />", () => {
   }, 6000)
 
   it("should validate and close the calendar when the user presses the Enter key while focus is in the input", async () => {
-    render(<DatePickerWrapper disabledDates={[new Date("2022-05-01")]} />)
-
-    expect(
-      screen.queryByText("05/01/2022 is not available, try another date")
-    ).not.toBeInTheDocument()
+    renderWithIntl(
+      <DatePickerWrapper disabledDates={[new Date("2022-05-01")]} />
+    )
 
     const input = screen.getByLabelText("Input label", { selector: "input" })
     await user.click(input)
@@ -135,7 +139,7 @@ describe("<DatePicker />", () => {
 describe("<DatePicker /> - Focus element", () => {
   describe("Click on input", () => {
     beforeEach(async () => {
-      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.click(input)
@@ -176,11 +180,9 @@ describe("<DatePicker /> - Focus element", () => {
   })
 
   describe("Keydown arrow on input", () => {
-    beforeEach(async () => {
-      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
-    })
-
     it("shows focus within the calendar", async () => {
+      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.tab()
       await waitFor(() => {
@@ -198,6 +200,8 @@ 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")} />)
+
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.tab()
       await waitFor(() => {
@@ -218,7 +222,7 @@ describe("<DatePicker /> - Focus element", () => {
 
   describe("Click on calendar button", () => {
     beforeEach(async () => {
-      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
       const calendarButton = screen.getByRole("button", {
         name: "Change date, Mar 1, 2022",
@@ -254,7 +258,7 @@ describe("<DatePicker /> - Focus element", () => {
     let calendarButton: HTMLElement
 
     beforeEach(async () => {
-      render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+      renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
       calendarButton = screen.getByRole("button", {
         name: "Change date, Mar 1, 2022",
@@ -301,7 +305,7 @@ describe("<DatePicker /> - Focus element", () => {
 
 describe("<DatePicker /> - Input format", () => {
   it("formats values when focus is on the input", async () => {
-    render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+    renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
     const input = screen.getByLabelText("Input label", { selector: "input" })
     expect(input).toHaveValue("Mar 1, 2022")
@@ -314,7 +318,7 @@ describe("<DatePicker /> - Input format", () => {
   })
 
   it("formats values when the input loses focus - onBlur", async () => {
-    render(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
+    renderWithIntl(<DatePickerWrapper selectedDay={new Date("2022-03-01")} />)
 
     const input = screen.getByLabelText("Input label", { selector: "input" })
     expect(input).toHaveValue("Mar 1, 2022")
@@ -335,75 +339,96 @@ describe("<DatePicker /> - Input format", () => {
 
 describe("<DatePicker /> - Validation", () => {
   describe("Custom Validation", () => {
-    it("displays custom validation message when provided (overrides inbuilt validation)", () => {
-      render(
+    it("displays custom validation message when provided (overrides inbuilt validation)", async () => {
+      renderWithIntl(
         <DatePickerWrapper
           status="error"
           validationMessage="Custom validation message"
           selectedDay={new Date("potato")}
         />
       )
-      const icon = screen.getByLabelText("error message")
 
-      expect(icon).toBeInTheDocument()
+      await waitFor(() => {
+        const icon = screen.getByLabelText("error message")
+        expect(icon).toBeInTheDocument()
+      })
+
       expect(screen.getByText("Custom validation message")).toBeVisible()
       expect(screen.queryByText("Date is invalid")).not.toBeInTheDocument()
     })
 
-    it("does not show inbuilt validation message when onValidate is set", () => {
-      const onValidate = jest.fn<void, [ValidationResponse]>()
-      render(<DatePickerWrapper onValidate={onValidate} />)
+    it("does not show inbuilt validation message when onValidate is set", async () => {
+      const onValidate = jest.fn()
+      renderWithIntl(
+        <DatePickerWrapper
+          selectedDay={new Date("potato")}
+          onValidate={onValidate}
+        />
+      )
+
+      await waitFor(() => {
+        expect(
+          screen.getByLabelText("Input label", { selector: "input" })
+        ).toBeVisible()
+      })
+
       expect(screen.queryByTitle("error message")).not.toBeInTheDocument()
-      expect(
-        screen.queryByText("Custom validation message")
-      ).not.toBeInTheDocument()
+      expect(screen.queryByText("Date is invalid")).not.toBeInTheDocument()
     })
 
-    it("triggers validation when initial selected date is invalid", () => {
-      const onValidate = jest.fn<void, [ValidationResponse]>()
-      render(
+    it("triggers validation when initial selected date is invalid", async () => {
+      const onValidate = jest.fn()
+      renderWithIntl(
         <DatePickerWrapper
           onValidate={onValidate}
           selectedDay={new Date("potato")}
         />
       )
-      expect(onValidate).toBeCalledTimes(1)
+      await waitFor(() => {
+        expect(onValidate).toHaveBeenCalledTimes(1)
+      })
     })
 
-    it("triggers validation when initial selected date is disabled", () => {
-      const onValidate = jest.fn<void, [ValidationResponse]>()
-      render(
+    it("triggers validation when initial selected date is disabled", async () => {
+      const onValidate = jest.fn()
+      renderWithIntl(
         <DatePickerWrapper
           onValidate={onValidate}
           disabledBefore={new Date("2022-05-15")}
           selectedDay={new Date("2022-05-05")}
         />
       )
-      expect(onValidate).toBeCalledTimes(1)
+      await waitFor(() => {
+        expect(onValidate).toHaveBeenCalledTimes(1)
+      })
     })
 
-    it("does not trigger validation when initial selected date is empty", () => {
-      const onValidate = jest.fn<void, [ValidationResponse]>()
-      render(
+    it("does not trigger validation when initial selected date is empty", async () => {
+      const onValidate = jest.fn()
+      renderWithIntl(
         <DatePickerWrapper onValidate={onValidate} selectedDay={undefined} />
       )
-      expect(onValidate).toBeCalledTimes(0)
+      await waitFor(() => {
+        expect(onValidate).not.toHaveBeenCalled()
+      })
     })
 
-    it("does not trigger validation when initial selected date is valid", () => {
-      const onValidate = jest.fn<void, [ValidationResponse]>()
-      render(
+    it("does not trigger validation when initial selected date is valid", async () => {
+      const onValidate = jest.fn()
+      renderWithIntl(
         <DatePickerWrapper
           onValidate={onValidate}
           selectedDay={new Date("2022-05-05")}
         />
       )
-      expect(onValidate).toBeCalledTimes(0)
+      await waitFor(() => {
+        expect(onValidate).not.toHaveBeenCalled()
+      })
     })
 
     it("triggers validation when selected date is updated to invalid", async () => {
-      const onValidate = jest.fn<void, [ValidationResponse]>()
-      render(
+      const onValidate = jest.fn()
+      renderWithIntl(
         <DatePickerWrapper
           onValidate={onValidate}
           defaultMonth={new Date("2022-03-01")}
@@ -419,35 +444,39 @@ describe("<DatePicker /> - Validation", () => {
       const dateToSelect = within(month).getByRole("gridcell", { name: "6" })
       await user.click(dateToSelect)
       await waitFor(() => {
-        expect(onValidate).toBeCalledTimes(1)
+        expect(onValidate).toHaveBeenCalledTimes(1)
       })
     })
   })
 
   describe("Inbuilt Validation", () => {
-    it("displays error message when selected day is invalid", () => {
-      render(<DatePickerWrapper selectedDay={new Date("potato")} />)
-      const icon = screen.getByLabelText("error message")
+    it("displays error message when selected day is invalid", async () => {
+      renderWithIntl(<DatePickerWrapper selectedDay={new Date("potato")} />)
 
-      expect(screen.getByText("Date is invalid")).toBeVisible()
-      expect(icon).toBeInTheDocument()
+      await waitFor(() => {
+        const icon = screen.getByLabelText("error message")
+        expect(screen.getByText("Date is invalid")).toBeVisible()
+        expect(icon).toBeInTheDocument()
+      })
     })
 
-    it("displays error message when selected day is disabled", () => {
-      render(
+    it("displays error message when selected day is disabled", async () => {
+      renderWithIntl(
         <DatePickerWrapper
           disabledBefore={new Date("2022-05-15")}
           selectedDay={new Date("2022-05-05")}
         />
       )
 
-      expect(
-        screen.getByText("05/05/2022 is not available, try another date")
-      ).toBeVisible()
+      await waitFor(() => {
+        expect(
+          screen.getByText("05/05/2022 is not available, try another date")
+        ).toBeVisible()
+      })
     })
 
     it("displays error message when input date is invalid", async () => {
-      render(<DatePickerWrapper />)
+      renderWithIntl(<DatePickerWrapper />)
 
       const input = screen.getByLabelText("Input label", { selector: "input" })
       await user.type(input, "05/05/2022Blah")
@@ -462,7 +491,9 @@ describe("<DatePicker /> - Validation", () => {
     })
 
     it("displays error message when input date is disabled", async () => {
-      render(<DatePickerWrapper disabledBefore={new Date("2022-05-15")} />)
+      renderWithIntl(
+        <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/DatePicker.tsx

@@ -1,4 +1,5 @@
 import React, { RefObject, useEffect, useId, useRef, useState } from "react"
+import { useIntl } from "@cultureamp/i18n-react-intl"
 import { DayClickEventHandler } from "react-day-picker"
 import { FocusOn } from "react-focus-on"
 import {
@@ -21,7 +22,7 @@ import {
   DateInputField,
   DateInputFieldProps,
 } from "./subcomponents/DateInputField"
-import { ValidationResponse } from "./types"
+import type { ValidationResponse } from "./types"
 import { DatePickerSupportedLocales, getLocale } from "./utils/getLocale"
 import { validateDate } from "./utils/validateDate"
 
@@ -105,6 +106,14 @@ export const DatePicker = ({
   onValidate,
   ...restDateInputFieldProps
 }: DatePickerProps): JSX.Element => {
+  const { formatMessage } = useIntl()
+
+  const calendarLabelDesc = formatMessage({
+    id: "datePicker.calendarLabelDescription",
+    defaultMessage: "Select date from calendar for:",
+    description: "Label for the search input",
+  })
+
   const reactId = useId()
   const id = propsId ?? reactId
 
@@ -123,9 +132,8 @@ export const DatePicker = ({
   const [inbuiltStatus, setInbuiltStatus] = useState<
     DateInputFieldProps["status"] | undefined
   >()
-  const [inbuiltValidationMessage, setInbuiltValidationMessage] = useState<
-    string | undefined
-  >()
+  const [inbuiltValidationMessage, setInbuiltValidationMessage] =
+    useState<ValidationResponse["validationMessage"]>()
 
   const shouldUseInbuiltValidation = onValidate === undefined
 
@@ -312,7 +320,7 @@ export const DatePicker = ({
         >
           <>
             <VisuallyHidden id={`${id}-calendar-label`}>
-              Select date from calendar for:
+              {calendarLabelDesc}
             </VisuallyHidden>
             <CalendarSingle
               id={calendarId}

package/src/DatePicker/_docs/DatePicker.mdx

@@ -10,7 +10,7 @@ import * as DatePickerStories from "./DatePicker.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/DatePicker"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=10458%3A45652&mode=design&t=4Mycc044XjC1WLin-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061174/Date+Picker"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="DatePicker" />

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

@@ -1,5 +1,7 @@
 import React, { useState } from "react"
+import { StaticIntlProvider } from "@cultureamp/i18n-react-intl"
 import { Meta } from "@storybook/react"
+import { expect, userEvent, within } from "@storybook/test"
 import { Text } from "~components/Text"
 import {
   StickerSheet,
@@ -134,27 +136,6 @@ const StickerSheetTemplate: StickerSheetStory = {
             </StickerSheet.Row>
           </StickerSheet.Body>
         </StickerSheet>
-
-        <StickerSheet isReversed={isReversed} heading="Localisation">
-          <StickerSheet.Header headings={["en-AU", "en-US"]} />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <DatePicker
-                labelText="Label"
-                selectedDay={new Date("2022, 1, 5")}
-                onDayChange={() => undefined}
-                isReversed={isReversed}
-              />
-              <DatePicker
-                labelText="Label"
-                selectedDay={new Date("2022, 1, 5")}
-                onDayChange={() => undefined}
-                isReversed={isReversed}
-                locale="en-US"
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
-        </StickerSheet>
       </>
     )
   },
@@ -199,3 +180,58 @@ export const StickerSheetRTL: StickerSheetStory = {
     textDirection: "rtl",
   },
 }
+
+export const StickerSheetLocales: StickerSheetStory = {
+  name: "Sticker Sheet (Locales)",
+  render: () => (
+    <>
+      <StickerSheet heading="Localisation">
+        <StickerSheet.Header headings={["en-AU", "en-US"]} />
+        <StickerSheet.Body>
+          <StickerSheet.Row>
+            <DatePicker
+              labelText="Label"
+              selectedDay={new Date("2022, 1, 5")}
+              onDayChange={() => undefined}
+            />
+            <DatePicker
+              labelText="Label"
+              selectedDay={new Date("2022, 1, 5")}
+              onDayChange={() => undefined}
+              locale="en-US"
+            />
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+
+      <StickerSheet>
+        <StickerSheet.Header headings={["fr-CA"]} />
+        <StickerSheet.Body>
+          <StickerSheet.Row>
+            <StaticIntlProvider locale="fr-CA">
+              <DatePicker
+                labelText="Label"
+                selectedDay={new Date("2022, 1, 5")}
+                onDayChange={() => undefined}
+                locale="fr-CA"
+                data-testid="id--dp-fr-ca"
+              />
+            </StaticIntlProvider>
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+    </>
+  ),
+  decorators: [
+    Story => (
+      <div className="mb-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByTestId("id--dp-fr-ca"))
+    await expect(canvas.getByText("janvier 2022")).toBeInTheDocument()
+  },
+}

package/src/DatePicker/_docs/DatePicker.stories.tsx

@@ -143,9 +143,8 @@ export const Validation: Story = {
     )
     const [status, setStatus] = useState<FieldMessageStatus | undefined>()
     const [response, setResponse] = useState<ValidationResponse | undefined>()
-    const [validationMessage, setValidationMessage] = useState<
-      string | undefined
-    >()
+    const [validationMessage, setValidationMessage] =
+      useState<ValidationResponse["validationMessage"]>()
 
     const handleValidation = (validationResponse: ValidationResponse): void => {
       setResponse(validationResponse)

package/src/DatePicker/_docs/controls/datePickerLocaleControls.ts

@@ -1,6 +1,6 @@
 import { ArgTypes } from "@storybook/react"
 
-const DATE_PICKER_SUPPORTED_LOCALES = ["en-US", "en-AU"]
+const DATE_PICKER_SUPPORTED_LOCALES = ["en-US", "en-AU", "fr-CA"]
 
 export const datePickerLocaleControls: Partial<ArgTypes> = {
   locale: {