@kaizen/components 1.52.1 → 1.54.0

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

@@ -1,7 +1,8 @@
 import React, { useRef } from "react"
-import { render, screen } from "@testing-library/react"
+import { screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { enUS } from "date-fns/locale"
+import { renderWithIntl } from "~tests"
 import { DateInputField, DateInputFieldProps } from "./DateInputField"
 
 const user = userEvent.setup()
@@ -9,8 +10,8 @@ const user = userEvent.setup()
 const defaultProps: DateInputFieldProps = {
   id: "test__date-input-field",
   labelText: "Bacon expiry",
-  onButtonClick: jest.fn<void, []>(),
-  onKeyDown: jest.fn<void, [React.KeyboardEvent<HTMLInputElement>]>(),
+  onButtonClick: jest.fn(),
+  onKeyDown: jest.fn(),
   value: undefined,
   locale: enUS,
 }
@@ -21,68 +22,83 @@ const DateInputFieldWrapper = (
 
 describe("<DateInputField />", () => {
   describe("Input", () => {
-    it("associates the description with the input", () => {
-      render(<DateInputFieldWrapper />)
-      expect(
-        screen.getByRole("textbox", {
-          name: "Bacon expiry",
-          description: "Input format : mm/dd/yyyy",
-        })
-      ).toBeInTheDocument()
+    it("associates the description with the input", async () => {
+      renderWithIntl(<DateInputFieldWrapper />)
+      await waitFor(() => {
+        expect(
+          screen.getByRole("textbox", {
+            name: "Bacon expiry",
+            description: "Input format : mm/dd/yyyy",
+          })
+        ).toBeInTheDocument()
+      })
     })
   })
 
   describe("Icon button", () => {
-    it("has helpful label", () => {
-      render(<DateInputFieldWrapper />)
-      expect(
-        screen.getByRole("button", { name: "Choose date" })
-      ).toBeInTheDocument()
+    it("has helpful label", async () => {
+      renderWithIntl(<DateInputFieldWrapper />)
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: "Choose date" })
+        ).toBeInTheDocument()
+      })
     })
 
-    it("has helpful label showing the current date when one is selected", () => {
-      render(
+    it("has helpful label showing the current date when one is selected", async () => {
+      renderWithIntl(
         <DateInputFieldWrapper
           value="Mar 1, 2022"
           onChange={(): void => undefined}
         />
       )
-      expect(
-        screen.getByRole("button", { name: "Change date, Mar 1, 2022" })
-      ).toBeInTheDocument()
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: "Change date, Mar 1, 2022" })
+        ).toBeInTheDocument()
+      })
     })
   })
 
   describe("States", () => {
-    it("disables both input and icon button", () => {
-      render(<DateInputFieldWrapper disabled />)
+    it("disables both input and icon button", async () => {
+      renderWithIntl(<DateInputFieldWrapper disabled />)
       const input = screen.getByRole("textbox", { name: "Bacon expiry" })
       const calendarButton = screen.getByRole("button", { name: "Choose date" })
-      expect(input).toBeDisabled()
-      expect(calendarButton).toBeDisabled()
+      await waitFor(() => {
+        expect(input).toBeDisabled()
+        expect(calendarButton).toBeDisabled()
+      })
     })
   })
 
   describe("Validation", () => {
-    it("shows validation message", () => {
-      render(
+    it("shows validation message", async () => {
+      renderWithIntl(
         <DateInputFieldWrapper
           status="error"
           validationMessage="There is an error"
         />
       )
       const errorMessage = screen.getByText("There is an error")
-      expect(errorMessage).toBeInTheDocument()
+      await waitFor(() => {
+        expect(errorMessage).toBeInTheDocument()
+      })
     })
 
-    it("does not show validation message when field is disabled", () => {
-      render(
+    it("does not show validation message when field is disabled", async () => {
+      renderWithIntl(
         <DateInputFieldWrapper
           status="error"
           validationMessage="There is an error"
           disabled
         />
       )
+      await waitFor(() => {
+        expect(
+          screen.getByRole("textbox", { name: "Bacon expiry" })
+        ).toBeVisible()
+      })
       const errorMessage = screen.queryByText("There is an error")
       expect(errorMessage).not.toBeInTheDocument()
     })
@@ -90,10 +106,7 @@ describe("<DateInputField />", () => {
 
   describe("Refs", () => {
     it("correctly passes through input and button refs", async () => {
-      const onButtonClick = jest.fn<
-        void,
-        [string | null | undefined, string | null | undefined]
-      >()
+      const onButtonClick = jest.fn()
 
       const Wrapper = (): JSX.Element => {
         const inputRef = useRef<HTMLInputElement>(null)
@@ -122,10 +135,10 @@ describe("<DateInputField />", () => {
         )
       }
 
-      render(<Wrapper />)
+      renderWithIntl(<Wrapper />)
 
       await user.click(screen.getByText("Click me"))
-      expect(onButtonClick).toBeCalledWith(
+      expect(onButtonClick).toHaveBeenCalledWith(
         "test__date-input-field--ref",
         "Choose date"
       )

package/src/DatePicker/types.ts

@@ -1,10 +1,11 @@
+import { ReactElement } from "react"
 import { FieldMessageStatus } from "~components/FieldMessage"
 
 export type ValidationResponse = {
   date: Date | undefined
   inputValue: string | undefined // Input value upon validation
   status: FieldMessageStatus | undefined
-  validationMessage: string | undefined
+  validationMessage: string | ReactElement | undefined
   isDisabled: boolean
   isInvalid: boolean
   isEmpty: boolean

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

@@ -1,8 +1,8 @@
-import { enAU } from "date-fns/locale"
+import { enGB } from "date-fns/locale"
 import { getLocale } from "./getLocale"
 
 describe("getLocale", () => {
   it("retrieves fallback value when passed an unsupported locale", () => {
-    expect(getLocale("invalid")).toEqual(enAU)
+    expect(getLocale("invalid")).toEqual(enGB)
   })
 })

package/src/DatePicker/utils/getLocale.ts

@@ -1,17 +1,152 @@
 import type { Locale } from "date-fns"
-import { enAU, enUS } from "date-fns/locale"
-import { StringSuggestions } from "~types/StringSuggestions"
+import {
+  arSA,
+  bg,
+  cs,
+  cy,
+  da,
+  de,
+  el,
+  enGB,
+  enUS,
+  es,
+  et,
+  fi,
+  fr,
+  frCA,
+  he,
+  hi,
+  ht,
+  hu,
+  id,
+  it,
+  ja,
+  km,
+  ko,
+  lt,
+  lv,
+  ms,
+  nb,
+  nl,
+  pl,
+  pt,
+  ptBR,
+  ro,
+  ru,
+  sk,
+  sr,
+  sv,
+  th,
+  tr,
+  uk,
+  vi,
+  zhCN,
+  zhTW,
+} from "date-fns/locale"
 
 // Ensure you update the storybook DATE_PICKER_SUPPORTED_LOCALES arg options when updating DatePickerSupportedLocales.
-export type DatePickerSupportedLocales = StringSuggestions<"en-US" | "en-AU">
+export type DatePickerSupportedLocales = string
 
 export const getLocale = (locale: DatePickerSupportedLocales): Locale => {
   switch (locale) {
-    case "en-AU":
-      return enAU
+    case "zh":
+      return zhCN
+    case "zh-TW":
+      return zhTW
+    case "da":
+      return da
+    case "nl":
+      return nl
     case "en-US":
       return enUS
+    case "fr":
+      return fr
+    case "de":
+      return de
+    case "he":
+      return he
+    case "it":
+      return it
+    case "ja":
+      return ja
+    case "ko":
+    case "kr":
+      return ko
+    case "es-419":
+      return es
+    case "sv":
+      return sv
+    case "ru":
+      return ru
+    // @todo: Add when locale is available https://github.com/date-fns/date-fns/issues/2627
+    // case "mi":
+    // return miNZ
+    case "pl":
+      return pl
+    case "pt-BR":
+      return ptBR
+    case "uk":
+      return uk
+    case "en":
+    case "en-GB":
+    case "en-AU":
+      return enGB
+    case "ar":
+      return arSA
+    case "bg":
+      return bg
+    case "cs":
+      return cs
+    case "et":
+      return et
+    case "fi":
+      return fi
+    case "fr-CA":
+      return frCA
+    case "ht":
+      return ht
+    case "el":
+      return el
+    case "hi":
+      return hi
+    case "hu":
+      return hu
+    case "id":
+      return id
+    case "km-KH":
+      return km
+    case "lv":
+      return lv
+    case "lt":
+      return lt
+    case "ms":
+      return ms
+    case "nb":
+    case "no":
+      return nb
+    case "pt":
+      return pt
+    case "ro":
+      return ro
+    case "sr":
+      return sr
+    // case "si-LK":
+    //   return siLK
+    case "sk":
+      return sk
+    case "es":
+      return es
+    // case "tl":
+    //   return tlPH
+    case "th":
+      return th
+    case "tr":
+      return tr
+    case "vi":
+      return vi
+    case "cy":
+      return cy
     default:
-      return enAU
+      return enGB
   }
 }

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

@@ -1,3 +1,5 @@
+import { screen, waitFor } from "@testing-library/react"
+import { renderWithIntl } from "~tests"
 import { validateDate } from "./validateDate"
 
 describe("validateDate", () => {
@@ -20,64 +22,79 @@ 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({
+    const { validationMessage, ...response } = validationResponse
+
+    expect(response).toStrictEqual({
       date,
       inputValue,
       status: "error",
-      validationMessage: "Date is invalid",
       isInvalid: true,
       isDisabled: false,
       isEmpty: false,
       isValidDate: false,
     })
-
     expect(newDate).toBeUndefined()
+
+    renderWithIntl(validationMessage)
+    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({
+    const { validationMessage, ...response } = validationResponse
+
+    expect(response).toEqual({
       date,
       inputValue,
       status: "error",
-      validationMessage: "Date is invalid",
       isInvalid: true,
       isDisabled: false,
       isEmpty: false,
       isValidDate: false,
     })
-
     expect(newDate).toBeUndefined()
+
+    renderWithIntl(validationMessage)
+    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({
+    const { validationMessage, ...response } = validationResponse
+
+    expect(response).toStrictEqual({
       date,
       inputValue,
       status: "error",
-      validationMessage: "potato is an invalid date",
       isInvalid: true,
       isDisabled: false,
       isEmpty: false,
       isValidDate: false,
     })
-
     expect(newDate).toBeUndefined()
+
+    renderWithIntl(validationMessage)
+    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")]
@@ -87,18 +104,25 @@ describe("validateDate", () => {
       disabledDays,
     })
 
-    expect(validationResponse).toStrictEqual({
+    const { validationMessage, ...response } = validationResponse
+
+    expect(response).toStrictEqual({
       date,
       inputValue,
       status: "error",
-      validationMessage: "03/01/2022 is not available, try another date",
       isInvalid: false,
       isDisabled: true,
       isEmpty: false,
       isValidDate: false,
     })
-
     expect(newDate).toBeUndefined()
+
+    renderWithIntl(validationMessage)
+    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/DatePicker/utils/{validateDate.ts → validateDate.tsx}

@@ -1,3 +1,5 @@
+import React from "react"
+import { FormattedMessage } from "@cultureamp/i18n-react-intl"
 import {
   DisabledDays,
   isDisabledDate,
@@ -47,9 +49,20 @@ export const validateDate = ({
       validationResponse: {
         ...baseResponse,
         status: "error",
-        validationMessage: inputValue
-          ? `${inputValue} is an invalid date`
-          : "Date is invalid",
+        validationMessage: inputValue ? (
+          <FormattedMessage
+            id="date.validation.invalidDateWithValue"
+            defaultMessage="{inputValue} is an invalid date"
+            description="Error message when the user enters an invalid date and we know their input value"
+            values={{ inputValue }}
+          />
+        ) : (
+          <FormattedMessage
+            id="date.validation.invalidDate"
+            defaultMessage="Date is invalid"
+            description="Error message when the user enters an invalid date and we do not know their input value"
+          />
+        ),
         isInvalid: true,
       },
       newDate: undefined,
@@ -61,7 +74,14 @@ export const validateDate = ({
       validationResponse: {
         ...baseResponse,
         status: "error",
-        validationMessage: `${inputValue} is not available, try another date`,
+        validationMessage: (
+          <FormattedMessage
+            id="date.validation.unavailableDate"
+            defaultMessage="{inputValue} is not available, try another date"
+            description="Error message when the user tries to select a date that is unavailable"
+            values={{ inputValue }}
+          />
+        ),
         isDisabled: true,
       },
       newDate: undefined,

package/src/DateRangePicker/DateRangePicker.tsx

@@ -37,8 +37,8 @@ export type DateRangePickerProps = {
    */
   value?: string
   /**
-   * Accepts a DayOfWeek value to start the week on that day. By default,
-   * it's set to Monday.
+   * Accepts a DayOfWeek value to start the week on that day.
+   * By default it adapts to the provided locale.
    */
   weekStartsOn?: LegacyCalendarRangeProps["weekStartsOn"]
   /**

package/src/DateRangePicker/_docs/DateRangePicker.mdx

@@ -10,7 +10,7 @@ import * as DateRangePickerStories from "./DateRangePicker.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/DateRangePicker"
   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/3082094237/Date+Range+Picker"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="DateRangePicker" />

package/src/Divider/_docs/Divider.mdx

@@ -10,7 +10,7 @@ import * as DividerStories from "./Divider.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Divider"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=6%3A18248&t=P1w10jr2cpPuaayw-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061035/Divider"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="Divider" />

package/src/EmptyState/_docs/EmptyState.mdx

@@ -10,7 +10,7 @@ import * as EmptyStateStories from "./EmptyState.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/EmptyState"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?type=design&node-id=6-18405&mode=design&t=zslxM6C2B20CxDxt-0"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094098/Empty+State"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="EmptyState" />

package/src/ErrorPage/_docs/ErrorPage.mdx

@@ -8,7 +8,7 @@ import * as ErrorPageStories from "./ErrorPage.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/master/packages/components/src/ErrorPage"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="ErrorPage" />

package/src/FieldGroup/_docs/FieldGroup.mdx

@@ -9,7 +9,7 @@ import * as FieldGroupStories from "./FieldGroup.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FieldGroup"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="FieldGroup" />

package/src/FieldMessage/_docs/FieldMessage.mdx

@@ -10,7 +10,7 @@ import * as FieldMessageStories from "./FieldMessage.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FieldMessage"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=34254%3A91754&mode=design&t=HvwF2tRq9DbfkSuV-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928705/Text+Field"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames="FieldMessage" />

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

@@ -11,7 +11,7 @@ import * as FilterStories from "./Filter.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Filter"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?type=design&node-id=6-28579&t=bowQ0LWOQKOd0UYS-0"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093959/Filters"
-  className="!mb-8"
+
 />
 
 <KAIOInstallation exportNames={["Filter", "FilterContents"]} />