@kaizen/components 1.52.1 → 1.53.0

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: {

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.ts

@@ -1,9 +1,11 @@
 import type { Locale } from "date-fns"
-import { enAU, enUS } from "date-fns/locale"
+import { enAU, enUS, frCA } from "date-fns/locale"
 import { StringSuggestions } from "~types/StringSuggestions"
 
 // 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 = StringSuggestions<
+  "en-US" | "en-AU" | "fr-CA"
+>
 
 export const getLocale = (locale: DatePickerSupportedLocales): Locale => {
   switch (locale) {
@@ -11,6 +13,8 @@ export const getLocale = (locale: DatePickerSupportedLocales): Locale => {
       return enAU
     case "en-US":
       return enUS
+    case "fr-CA":
+      return frCA
     default:
       return enAU
   }

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/_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"]} />