@kaizen/components 1.52.1 → 1.53.0

package/src/Filter/FilterDatePicker/hooks/{useDateValidation.spec.tsx → useDateValidation.spec.ts}

@@ -1,6 +1,7 @@
-import React, { act } from "react"
+import { act } from "react"
+import { waitFor } from "@testing-library/react"
 import { renderHook } from "@testing-library/react-hooks"
-import { LabelledMessage } from "~components/LabelledMessage"
+import { renderWithIntl } from "~tests"
 import { useDateValidation } from "./useDateValidation"
 
 describe("useDateValidation()", () => {
@@ -23,11 +24,9 @@ describe("useDateValidation()", () => {
   })
 
   describe("with an invalid date", () => {
-    it("returns a validation message and no date", () => {
+    it("returns a validation message and no date", async () => {
       const { result } = renderHook(() =>
-        useDateValidation({
-          inputLabel: "Date",
-        })
+        useDateValidation({ inputLabel: "Date" })
       )
       const { validateDate, updateValidation } = result.current
       const { validationResponse, newDate } = validateDate({
@@ -38,14 +37,16 @@ describe("useDateValidation()", () => {
       act(() => {
         updateValidation(validationResponse)
       })
+      expect(newDate).toEqual(undefined)
 
-      expect(result.current.validationMessage).toStrictEqual({
-        status: "error",
-        message: (
-          <LabelledMessage label="Date" message="potato is an invalid date" />
-        ),
+      expect(result.current.validationMessage?.status).toBe("error")
+
+      const { container } = renderWithIntl(
+        result.current.validationMessage?.message
+      )
+      await waitFor(() => {
+        expect(container).toHaveTextContent("Date:potato is an invalid date")
       })
-      expect(newDate).toBeUndefined()
     })
   })
 

package/src/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { useIntl } from "@cultureamp/i18n-react-intl"
 import type { Locale } from "date-fns"
 import {
   DateInput,
@@ -41,6 +42,14 @@ export const DateInputField = React.forwardRef<
     },
     ref
   ) => {
+    const { formatMessage } = useIntl()
+
+    const dateInputLabelFallback = formatMessage({
+      id: "filterDatePickerDateInputField.dateInputLabelFallback",
+      defaultMessage: "Date",
+      description: "Default label for date input field",
+    })
+
     const descriptionId = `${id}--field-message`
 
     const errorMessageId = validationMessage
@@ -58,7 +67,7 @@ export const DateInputField = React.forwardRef<
         <DateInput
           ref={ref}
           id={id}
-          labelText={labelText || "Date"}
+          labelText={labelText || dateInputLabelFallback}
           aria-describedby={inputDescribedBy}
           aria-errormessage={errorMessageId}
           aria-invalid={dateIsInvalid}

package/src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.spec.tsx

@@ -1,6 +1,7 @@
 import React, { useState, FocusEvent } 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 { FilterDatePickerField, FilterDatePickerFieldProps } from "."
 
 const user = userEvent.setup()
@@ -27,30 +28,36 @@ const FilterDatePickerFieldWrapper = ({
   )
 }
 
+const waitForI18nContent = async (): Promise<void> => {
+  await waitFor(() => {
+    expect(screen.getByLabelText("Date")).toBeVisible()
+  })
+}
+
 describe("<FilterDatePickerField />", () => {
   beforeEach(() => {
     jest.clearAllMocks()
   })
 
   describe("Inputs", () => {
-    it("has empty inputs when a date is not provided", () => {
-      render(<FilterDatePickerFieldWrapper />)
-
+    it("has empty inputs when a date is not provided", async () => {
+      renderWithIntl(<FilterDatePickerFieldWrapper />)
+      await waitForI18nContent()
       const inputDate = screen.getByLabelText("Date")
       expect(inputDate).toHaveValue("")
     })
 
-    it("pre-fills the inputs when date is provided", () => {
-      render(
+    it("pre-fills the inputs when date is provided", async () => {
+      renderWithIntl(
         <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-01")} />
       )
-
+      await waitForI18nContent()
       const inputDate = screen.getByLabelText("Date")
       expect(inputDate).toHaveValue("1 May 2022")
     })
 
-    it("allows customising the input labels", () => {
-      render(
+    it("allows customising the input labels", async () => {
+      renderWithIntl(
         <FilterDatePickerFieldWrapper
           selectedDate={new Date("2022-05-01")}
           inputProps={{
@@ -58,21 +65,23 @@ describe("<FilterDatePickerField />", () => {
           }}
         />
       )
-
-      const date = screen.getByLabelText("Due date")
-      expect(date).toHaveValue("1 May 2022")
+      await waitFor(() => {
+        const date = screen.getByLabelText("Due date")
+        expect(date).toHaveValue("1 May 2022")
+      })
     })
 
     describe("onBlur", () => {
       it("updates date input and calendar values correctly on blur", async () => {
         const inputDateOnBlur = jest.fn<void, [FocusEvent]>()
 
-        render(
+        renderWithIntl(
           <FilterDatePickerFieldWrapper
             selectedDate={new Date("2022-05-02")}
             onBlur={inputDateOnBlur}
           />
         )
+        await waitForI18nContent()
 
         const inputDate = screen.getByLabelText("Date")
         expect(inputDate).toHaveValue("2 May 2022")
@@ -99,9 +108,10 @@ describe("<FilterDatePickerField />", () => {
 
     describe("Press Enter key", () => {
       it("updates calendar values and calls submit when the date is valid", async () => {
-        render(
+        renderWithIntl(
           <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-02")} />
         )
+        await waitForI18nContent()
 
         const inputDate = screen.getByLabelText("Date")
         expect(inputDate).toHaveValue("2 May 2022")
@@ -124,9 +134,10 @@ describe("<FilterDatePickerField />", () => {
       })
 
       it("does not call submit when the date is invalid", async () => {
-        render(
+        renderWithIntl(
           <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-02")} />
         )
+        await waitForI18nContent()
 
         const inputDate = screen.getByLabelText("Date")
         await user.click(inputDate)
@@ -141,9 +152,10 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("updates the calendar month to match the new start date input", async () => {
-      render(
+      renderWithIntl(
         <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-02")} />
       )
+      await waitForI18nContent()
 
       const inputDate = screen.getByLabelText("Date")
       expect(inputDate).toHaveValue("2 May 2022")
@@ -162,24 +174,27 @@ describe("<FilterDatePickerField />", () => {
   })
 
   describe("Calendar", () => {
-    it("shows the default month as the start month when there isn't a selected value", () => {
-      render(
+    it("shows the default month as the start month when there isn't a selected value", async () => {
+      renderWithIntl(
         <FilterDatePickerFieldWrapper defaultMonth={new Date("2022-05-02")} />
       )
-
+      await waitForI18nContent()
       expect(screen.getByText("May 2022")).toBeVisible()
     })
 
-    it("shows the selected start date month as the start month when provided", () => {
-      render(
+    it("shows the selected start date month as the start month when provided", async () => {
+      renderWithIntl(
         <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-01")} />
       )
-
+      await waitForI18nContent()
       expect(screen.getByText("May 2022")).toBeVisible()
     })
 
-    it("shows the current month as the start month when selected date is invalid", () => {
-      render(<FilterDatePickerFieldWrapper selectedDate={new Date("potato")} />)
+    it("shows the current month as the start month when selected date is invalid", async () => {
+      renderWithIntl(
+        <FilterDatePickerFieldWrapper selectedDate={new Date("potato")} />
+      )
+      await waitForI18nContent()
       const currentMonth = new Date().toLocaleDateString("en-AU", {
         month: "long",
         year: "numeric",
@@ -188,7 +203,7 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("calls the onDateSubmit when selecting a date", async () => {
-      render(
+      renderWithIntl(
         <FilterDatePickerFieldWrapper defaultMonth={new Date("2022-05-01")} />
       )
       const targetMonth = screen.getByRole("grid", { name: "May 2022" })
@@ -203,9 +218,10 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("updates the input when changing the date", async () => {
-      render(
+      renderWithIntl(
         <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-15")} />
       )
+      await waitForI18nContent()
 
       const inputDate = screen.getByLabelText("Date")
       expect(inputDate).toHaveValue("15 May 2022")
@@ -224,9 +240,10 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("clears the inputs when clearing the calendar value", async () => {
-      render(
+      renderWithIntl(
         <FilterDatePickerFieldWrapper selectedDate={new Date("2022-05-15")} />
       )
+      await waitForI18nContent()
 
       const inputDate = screen.getByLabelText("Date")
       expect(inputDate).toHaveValue("15 May 2022")
@@ -248,8 +265,8 @@ describe("<FilterDatePickerField />", () => {
     const dateErrorId = "#test__filter-date-picker--input--date-error-message"
 
     describe("Custom validation", () => {
-      it("shows validation messages passed in from the consumer", () => {
-        render(
+      it("shows validation messages passed in from the consumer", async () => {
+        renderWithIntl(
           <FilterDatePickerFieldWrapper
             onValidate={(): void => undefined}
             validationMessage={{
@@ -258,14 +275,15 @@ describe("<FilterDatePickerField />", () => {
             }}
           />
         )
-
+        await waitForI18nContent()
         expect(screen.getByText("Date error message")).toBeVisible()
       })
     })
 
     describe("Inbuilt validation", () => {
       it("shows inbuilt validation messages", async () => {
-        const { container } = render(<FilterDatePickerFieldWrapper />)
+        const { container } = renderWithIntl(<FilterDatePickerFieldWrapper />)
+        await waitForI18nContent()
 
         const inputDate = screen.getByLabelText("Date")
 
@@ -282,16 +300,16 @@ describe("<FilterDatePickerField />", () => {
         })
       })
 
-      it("shows inbuilt validation messages for pre-existing values", () => {
-        const { container } = render(
+      it("shows inbuilt validation messages for pre-existing values", async () => {
+        const { container } = renderWithIntl(
           <FilterDatePickerFieldWrapper
             selectedDate={new Date("2022-05-15")}
             disabledDays={[new Date("2022-05-15")]}
           />
         )
+        await waitForI18nContent()
 
         const dateErrorContainer = container.querySelector(dateErrorId)
-
         expect(dateErrorContainer).toHaveTextContent(
           "15/05/2022 is not available, try another date"
         )
@@ -299,7 +317,10 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("does not call onDateSubmit when the input value is invalid", async () => {
-      const { getByLabelText } = render(<FilterDatePickerFieldWrapper />)
+      const { getByLabelText } = renderWithIntl(
+        <FilterDatePickerFieldWrapper />
+      )
+      await waitForI18nContent()
 
       const inputDate = getByLabelText("Date")
       await user.clear(inputDate)
@@ -312,7 +333,7 @@ describe("<FilterDatePickerField />", () => {
     })
 
     it("re-validates values when selecting a value using the calendar", async () => {
-      const { container } = render(
+      const { container } = renderWithIntl(
         <FilterDatePickerFieldWrapper
           selectedDate={new Date("potato")}
           defaultMonth={new Date("2022-05-01")}

package/src/Filter/FilterDatePicker/utils/validateDate.spec.ts

@@ -1,3 +1,5 @@
+import { waitFor, screen } from "@testing-library/react"
+import { renderWithIntl } from "~tests"
 import { validateDate } from "./validateDate"
 
 describe("validateDate()", () => {
@@ -19,70 +21,85 @@ describe("validateDate()", () => {
     expect(newDate).toBeUndefined()
   })
 
-  it("returns expected response when selected day is invalid and input value is undefined", () => {
+  it("returns expected response when selected day is invalid and input value is undefined", async () => {
     const date = new Date("potato")
     const inputValue = undefined
     const { validationResponse, newDate } = validateDate({ date, inputValue })
 
-    expect(validationResponse).toStrictEqual({
+    expect(newDate).toBeUndefined()
+
+    const { validationMessage, ...response } = validationResponse
+
+    expect(response).toStrictEqual({
       date,
       inputValue,
-      validationMessage: {
-        status: "error",
-        message: "Date is invalid",
-      },
       isInvalid: true,
       isDisabled: false,
       isEmpty: false,
       isValidDate: false,
     })
 
-    expect(newDate).toBeUndefined()
+    expect(validationMessage?.status).toBe("error")
+
+    renderWithIntl(validationMessage?.message)
+    await waitFor(() => {
+      expect(screen.getByText("Date is invalid")).toBeVisible()
+    })
   })
 
-  it("returns expected response when selected day is invalid and input value is empty string", () => {
+  it("returns expected response when selected day is invalid and input value is empty string", async () => {
     const date = new Date("potato")
     const inputValue = ""
     const { validationResponse, newDate } = validateDate({ date, inputValue })
 
-    expect(validationResponse).toStrictEqual({
+    expect(newDate).toBeUndefined()
+
+    const { validationMessage, ...response } = validationResponse
+
+    expect(response).toStrictEqual({
       date,
       inputValue,
-      validationMessage: {
-        status: "error",
-        message: "Date is invalid",
-      },
       isInvalid: true,
       isDisabled: false,
       isEmpty: false,
       isValidDate: false,
     })
 
-    expect(newDate).toBeUndefined()
+    expect(validationMessage?.status).toBe("error")
+
+    renderWithIntl(validationMessage?.message)
+    await waitFor(() => {
+      expect(screen.getByText("Date is invalid")).toBeVisible()
+    })
   })
 
-  it("returns expected response when selected day is invalid and input value is valid string", () => {
+  it("returns expected response when selected day is invalid and input value is valid string", async () => {
     const date = new Date("potato")
     const inputValue = "potato"
     const { validationResponse, newDate } = validateDate({ date, inputValue })
 
-    expect(validationResponse).toStrictEqual({
+    expect(newDate).toBeUndefined()
+
+    const { validationMessage, ...response } = validationResponse
+
+    expect(response).toStrictEqual({
       date,
       inputValue,
-      validationMessage: {
-        status: "error",
-        message: "potato is an invalid date",
-      },
       isInvalid: true,
       isDisabled: false,
       isEmpty: false,
       isValidDate: false,
     })
 
-    expect(newDate).toBeUndefined()
+    expect(validationMessage?.status).toBe("error")
+
+    renderWithIntl(validationMessage?.message)
+    await waitFor(() => {
+      expect(screen.getByText("potato is an invalid date")).toBeVisible()
+    })
   })
 
-  it("returns expected response when selected day is disabled", () => {
+  it("returns expected response when selected day is disabled", async () => {
     const date = new Date("2022-03-01")
     const inputValue = "03/01/2022"
     const disabledDays = [new Date("2022-03-01")]
@@ -92,20 +109,27 @@ describe("validateDate()", () => {
       disabledDays,
     })
 
-    expect(validationResponse).toStrictEqual({
+    expect(newDate).toBeUndefined()
+
+    const { validationMessage, ...response } = validationResponse
+
+    expect(response).toStrictEqual({
       date,
       inputValue,
-      validationMessage: {
-        status: "error",
-        message: "03/01/2022 is not available, try another date",
-      },
       isInvalid: false,
       isDisabled: true,
       isEmpty: false,
       isValidDate: false,
     })
 
-    expect(newDate).toBeUndefined()
+    expect(validationMessage?.status).toBe("error")
+
+    renderWithIntl(validationMessage?.message)
+    await waitFor(() => {
+      expect(
+        screen.getByText("03/01/2022 is not available, try another date")
+      ).toBeVisible()
+    })
   })
 
   it("returns expected response when selected day is valid", () => {

package/src/Filter/FilterDateRangePicker/FilterDateRangePicker.spec.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { renderWithIntl } from "~tests"
 import { DateRange } from "~components/Calendar"
 import { FilterButton } from "~components/Filter/FilterButton"
 import { FilterDateRangePicker, FilterDateRangePickerProps } from "./index"
@@ -81,7 +82,7 @@ describe("<FilterDateRangePicker />", () => {
     })
 
     it("should show the calendar when the filter button is clicked", async () => {
-      const { queryByRole, getByRole, getByText } = render(
+      const { queryByRole, getByRole, getByText } = renderWithIntl(
         <FilterDateRangePickerWrapper defaultMonth={new Date("2022-05-01")} />
       )
       expect(queryByRole("dialog")).not.toBeInTheDocument()
@@ -95,7 +96,7 @@ describe("<FilterDateRangePicker />", () => {
     })
 
     it("should not show a date range in the button if the selected range is not valid", async () => {
-      const { getByRole, getByLabelText } = render(
+      const { getByRole, getByLabelText } = renderWithIntl(
         <FilterDateRangePickerWrapper
           selectedRange={{ from: new Date("2022-05-01") }}
         />

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx

@@ -10,7 +10,7 @@ import * as FilterDRPStories from "./FilterDateRangePicker.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FilterDateRangePicker"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=2349%3A110993&t=gzsKluk8LiOX3jCF-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093959/Filters"
-  className="!mb-8"
+
 />
 
 Date Range Picker to use for Filtering.

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx

@@ -10,7 +10,7 @@ import {
   StickerSheetStory,
 } from "~storybook/components/StickerSheet"
 import { FilterButton } from "../../FilterButton"
-import { FilterDateRangePicker } from "../index"
+import { FilterDateRangePicker, FilterDateRangePickerProps } from "../index"
 import { FilterDateRangePickerField } from "../subcomponents/FilterDateRangePickerField"
 
 const IS_CHROMATIC = isChromatic()
@@ -56,7 +56,7 @@ const StickerSheetTemplate: StickerSheetStory = {
     })
 
     return (
-      <StaticIntlProvider locale="en">
+      <>
         <StickerSheet
           heading="Filter Date Range Picker"
           style={{ paddingBottom: IS_CHROMATIC ? "33rem" : undefined }}
@@ -138,28 +138,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             </StickerSheet.Row>
           </StickerSheet.Body>
         </StickerSheet>
-
-        <StickerSheet heading="Translated">
-          <StickerSheet.Body>
-            <StickerSheet.Row rowTitle="Japanese">
-              <StaticIntlProvider locale="ja">
-                <FilterDateRangePickerField
-                  id="stickersheet--filter-drp-field--translated"
-                  label="Dates"
-                  locale="en-US"
-                  selectedRange={rangeFieldValidation}
-                  onRangeChange={setRangeFieldValidation}
-                  onValidate={{
-                    dateStart: action(
-                      "Validation story: date start onValidate"
-                    ),
-                  }}
-                />
-              </StaticIntlProvider>
-            </StickerSheet.Row>
-          </StickerSheet.Body>
-        </StickerSheet>
-      </StaticIntlProvider>
+      </>
     )
   },
   play: async ({ canvasElement }): Promise<void> => {
@@ -191,3 +170,55 @@ export const StickerSheetRTL: StickerSheetStory = {
   name: "Sticker Sheet (RTL)",
   parameters: { textDirection: "rtl" },
 }
+
+export const StickerSheetLocales: StickerSheetStory = {
+  name: "Sticker Sheet (Locales)",
+  render: () => {
+    const props = {
+      isOpen: false,
+      setIsOpen: () => undefined,
+      renderTrigger: (triggerButtonProps): JSX.Element => (
+        <FilterButton {...triggerButtonProps} />
+      ),
+      label: "Dates",
+      selectedRange: {
+        from: new Date("2022-05-15"),
+        to: new Date("2022-06-22"),
+      },
+      onRangeChange: () => undefined,
+      locale: "en-AU",
+    } satisfies FilterDateRangePickerProps
+
+    return (
+      <>
+        <StickerSheet heading="Localisation">
+          <StickerSheet.Header headings={["en-AU", "en-US"]} />
+          <StickerSheet.Body>
+            <StickerSheet.Row>
+              <FilterDateRangePicker {...props} locale="en-AU" />
+              <FilterDateRangePicker {...props} locale="en-US" />
+            </StickerSheet.Row>
+          </StickerSheet.Body>
+        </StickerSheet>
+
+        <StickerSheet>
+          <StickerSheet.Header headings={["fr-CA"]} />
+          <StickerSheet.Body>
+            <StickerSheet.Row>
+              <StaticIntlProvider locale="fr-CA">
+                <FilterDateRangePicker {...props} locale="fr-CA" isOpen />
+              </StaticIntlProvider>
+            </StickerSheet.Row>
+          </StickerSheet.Body>
+        </StickerSheet>
+      </>
+    )
+  },
+  decorators: [
+    Story => (
+      <div className="mb-[520px]">
+        <Story />
+      </div>
+    ),
+  ],
+}