@kaizen/components 1.35.1 → 1.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.35.1",
+  "version": "1.36.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -28,7 +28,7 @@
   "scripts": {
     "prepublishOnly": "yarn build:components && yarn build:styles && yarn postBuild && yarn dist:clean",
     "build": "yarn clean && yarn prepublishOnly",
-    "test": "jest",
+    "test": "FORCE_COLOR=1 jest",
     "test:ci": "yarn test --ci",
     "test:treeshake": "agadoo ./dist/esm/index.mjs",
     "clean": "rimraf dist node_modules",

package/src/Button/Button/_docs/Button.mdx

@@ -82,6 +82,11 @@ Alternatively use the `workingLabelHidden` prop to hide the button label all tog
 
 <Canvas of={ButtonStories.Working} />
 
+### Controlling the working state
+Here is an example of controlling whether the button is 'working' or not, using state.
+
+<Canvas of={ButtonStories.ResolveWorking} />
+
 ### Loading
 
 Use the <LinkTo pageId="components-loading-states-loadinginput">LoadingInput</LinkTo> component for button placeholders.

package/src/Button/Button/_docs/Button.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { StoryObj, Meta } from "@storybook/react"
 import { AddIcon, ArrowRightIcon } from "~components/Icon"
 import { LoadingInput } from "~components/Loading"
@@ -142,3 +142,29 @@ export const NativeFormButton: Story = {
   ),
   parameters: { controls: { disable: true } },
 }
+
+export const ResolveWorking: Story = {
+  render: () => {
+    const [state, setState] = useState<"Ready" | "Working" | "Completed">(
+      "Ready"
+    )
+    const handleClick = (): void => {
+      if (state === "Ready") {
+        setState("Working")
+        setTimeout(() => setState("Completed"), 3000)
+      } else {
+        setState("Ready")
+      }
+    }
+
+    return (
+      <Button
+        label={state}
+        working={state === "Working"}
+        workingLabel="Button is doing some work"
+        workingLabelHidden
+        onClick={handleClick}
+      />
+    )
+  },
+}

package/src/Button/GenericButton/GenericButton.spec.tsx

@@ -111,3 +111,72 @@ describe("<GenericButton /> with native HTML `form` attributes", () => {
     ).toHaveAttribute("form", buttonFormAttributes.form)
   })
 })
+
+describe("<GenericButton /> `working` accessible states", () => {
+  it("renders a button without aria-live by default", () => {
+    const { getByTestId } = render(
+      <GenericButton
+        data-testid="id--generic-test"
+        id="id--button"
+        label="button label"
+      />
+    )
+
+    const button = getByTestId("id--generic-test")
+    // The id is passed to the element not the container so we have to get its parent
+    const buttonContainer = button.parentElement
+
+    expect(buttonContainer).not.toHaveAttribute("aria-live", "")
+  })
+
+  it("renders a button with aria-live if working label if provided", () => {
+    const { getByTestId } = render(
+      <GenericButton
+        data-testid="id--generic-test"
+        id="id--button"
+        label="button label"
+        workingLabel="Loading"
+      />
+    )
+    const button = getByTestId("id--generic-test")
+    const buttonContainer = button.parentElement
+
+    expect(buttonContainer).toHaveAttribute("aria-live", "polite")
+  })
+
+  it("renders a link button with aria-live if working label if provided", () => {
+    const { getByTestId } = render(
+      <GenericButton
+        data-testid="id--generic-test"
+        id="id--button"
+        label="button label"
+        workingLabel="Loading"
+        href="/"
+      />
+    )
+    const button = getByTestId("id--generic-test")
+    const buttonContainer = button.parentElement
+
+    expect(buttonContainer).toHaveAttribute("aria-live", "polite")
+  })
+
+  it("renders a custom button with aria-live if working label if provided", () => {
+    const { getByTestId } = render(
+      <GenericButton
+        data-testid="id--generic-test"
+        id="id--button"
+        label="button label"
+        workingLabel="Loading"
+        component={props => (
+          <button type="button" {...props}>
+            Custom button
+          </button>
+        )}
+      />
+    )
+    const button = getByTestId("id--generic-test")
+    const buttonContainer = button.parentElement
+
+    expect(buttonContainer).toHaveAttribute("aria-live", "polite")
+  })
+})

package/src/Button/GenericButton/GenericButton.tsx

@@ -129,7 +129,7 @@ export const GenericButton = forwardRef(
           styles.container,
           props.fullWidth && styles.fullWidth
         )}
-        aria-live="polite"
+        aria-live={"workingLabel" in props ? "polite" : undefined}
       >
         {determineButtonRenderer()}
       </span>

package/src/DatePicker/DatePicker.spec.tsx

@@ -103,7 +103,7 @@ describe("<DatePicker />", () => {
       })
       expect(arrowButton).toHaveFocus()
     })
-  })
+  }, 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")]} />)

package/src/KaizenProvider/KaizenProvider.tsx

@@ -1,4 +1,6 @@
 import React from "react"
+import { ToastNotificationsList } from "~components/Notification"
+import { ToastNotificationProvider } from "~components/Notification/ToastNotification/context/ToastNotificationContext"
 import { FontDefinitions } from "./subcomponents/FontDefinitions"
 import { OptionalIntlProvider } from "./subcomponents/OptionalIntlProvider"
 
@@ -13,7 +15,10 @@ export const KaizenProvider = ({
 }: KaizenProviderProps): JSX.Element => (
   <OptionalIntlProvider locale={locale}>
     <>
-      {children}
+      <ToastNotificationProvider>
+        <ToastNotificationsList />
+        {children}
+      </ToastNotificationProvider>
       <FontDefinitions />
     </>
   </OptionalIntlProvider>

package/src/Modal/ContextModal/ContextModal.spec.tsx

@@ -13,10 +13,10 @@ const ContextModalWrapper = ({
   <ContextModal
     isOpen={true}
     title="Example modal title"
-    onConfirm={(): void => undefined}
-    onDismiss={(): void => undefined}
+    onConfirm={() => undefined}
+    onDismiss={() => undefined}
     secondaryLabel="Example secondary"
-    onSecondaryAction={(): void => undefined}
+    onSecondaryAction={() => undefined}
     {...props}
   >
     {children}

package/src/Modal/ContextModal/ContextModal.tsx

@@ -18,6 +18,7 @@ export type ContextModalSecondaryActionProps =
     }
   | {
       secondaryLabel?: undefined
+      onSecondaryAction?: never
     }
 
 export type ContextModalProps = Readonly<
@@ -56,6 +57,7 @@ export const ContextModal = ({
   layout = "portrait",
   title,
   onConfirm,
+  onDismiss: propsOnDismiss,
   onAfterLeave,
   confirmLabel = "Confirm",
   confirmWorking,
@@ -63,9 +65,11 @@ export const ContextModal = ({
   children,
   contentHeader,
   image,
+  secondaryLabel,
+  onSecondaryAction,
   ...props
 }: ContextModalProps): JSX.Element => {
-  const onDismiss = confirmWorking ? undefined : props.onDismiss
+  const onDismiss = confirmWorking ? undefined : propsOnDismiss
 
   const footerActions: ButtonProps[] = []
 
@@ -82,10 +86,10 @@ export const ContextModal = ({
     footerActions.push({ ...confirmAction, ...workingProps })
   }
 
-  if (props.secondaryLabel) {
+  if (secondaryLabel) {
     footerActions.push({
-      label: props.secondaryLabel,
-      onClick: props.onSecondaryAction,
+      label: secondaryLabel,
+      onClick: onSecondaryAction,
       disabled: !!confirmWorking,
     })
   }
@@ -126,7 +130,7 @@ export const ContextModal = ({
               {onConfirm != null && (
                 <div
                   className={
-                    props.secondaryLabel
+                    secondaryLabel
                       ? styles.footerWithSecondaryAction
                       : styles.footer
                   }

package/src/MultiSelect/MultiSelect.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, waitFor } from "@testing-library/react"
+import { render, waitFor, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { MultiSelect, MultiSelectProps } from "./MultiSelect"
 
@@ -331,3 +331,58 @@ describe("Removing all options", () => {
     })
   })
 })
+
+describe("Has validation status", () => {
+  it("renders a validation message", () => {
+    render(
+      <MultiSelectWrapper
+        selectedValues={new Set(["waffle"])}
+        validationMessage={{
+          status: "error",
+          message: "No waffles are available",
+        }}
+      />
+    )
+    expect(screen.getByText("No waffles are available")).toBeInTheDocument()
+  })
+  it("describes the Toggle", () => {
+    render(
+      <MultiSelectWrapper
+        selectedValues={new Set(["waffle"])}
+        label="Breakfast menu"
+        validationMessage={{
+          status: "caution",
+          message: "Only four waffles remain",
+        }}
+      />
+    )
+    expect(
+      screen.getByRole("button", {
+        name: "Breakfast menu",
+        description: "Only four waffles remain",
+      })
+    ).toBeInTheDocument()
+  })
+  it("announces the validation message before the Toggle's description", () => {
+    const description = "Choose you breakfast."
+    const validationMessage = "Only four waffles remain."
+
+    render(
+      <MultiSelectWrapper
+        selectedValues={new Set(["waffle"])}
+        label="Breakfast menu"
+        description={description}
+        validationMessage={{
+          status: "caution",
+          message: "Only four waffles remain.",
+        }}
+      />
+    )
+    expect(
+      screen.getByRole("button", {
+        name: "Breakfast menu",
+        description: `${validationMessage} ${description}`,
+      })
+    ).toBeInTheDocument()
+  })
+})

package/src/MultiSelect/MultiSelect.tsx

@@ -10,7 +10,7 @@ import {
 } from "./subcomponents/MultiSelectOptions"
 import { MultiSelectToggle } from "./subcomponents/MultiSelectToggle"
 import { Popover, useFloating } from "./subcomponents/Popover"
-import { MultiSelectOption } from "./types"
+import { MultiSelectOption, ValidationMessage } from "./types"
 import styles from "./MultiSelect.module.scss"
 
 export type MultiSelectProps = {
@@ -24,6 +24,8 @@ export type MultiSelectProps = {
   onSelectedValuesChange: MultiSelectOptionsProps["onChange"]
   isOpen: boolean
   onOpenChange: (isOpen: boolean) => void
+  /** A status and message to provide context to the validation issue  */
+  validationMessage?: ValidationMessage
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>
 
 export const MultiSelect = ({
@@ -36,10 +38,12 @@ export const MultiSelect = ({
   isOpen,
   onOpenChange,
   classNameOverride,
+  validationMessage,
   ...restProps
 }: MultiSelectProps): JSX.Element => {
   const id = propsId ?? useId()
   const descriptionId = `${id}-description`
+  const validationId = `${id}-validation-message`
 
   const toggleButtonRef = useRef<HTMLButtonElement>(null)
   const { refs } = useFloating()
@@ -88,20 +92,23 @@ export const MultiSelect = ({
           ref={toggleButtonRef}
           id={`${id}--toggle`}
           aria-labelledby={`${id}--label`}
-          aria-describedby={descriptionId}
+          aria-describedby={`${validationId} ${descriptionId}`}
           aria-controls={`${id}--popover`}
           onClick={handleToggleClick}
           isOpen={isOpen}
           selectedOptions={Array.from(selectedValues).map(
             value => itemsMap[value]
           )}
+          status={validationMessage?.status}
           onRemoveOption={handleOnRemoveOption}
           onRemoveAllOptions={handleRemoveAllOptions}
         />
       </div>
 
+      {validationMessage && (
+        <FieldMessage id={validationId} {...validationMessage} />
+      )}
       {description && <FieldMessage id={descriptionId} message={description} />}
-      {/* ValidationMessage */}
 
       {isOpen && (
         <Popover

package/src/MultiSelect/_docs/MultiSelect.mdx

@@ -64,3 +64,13 @@ The open state is controlled by the consumer through the `isOpen` and `onOpenCha
 You can add a description which will be linked to the trigger button with aria-describedby.
 
 <Canvas of={MultiSelectStories.Description} />
+
+### Validation
+
+Validation states are defined in the `validationMessage` object, containing a `status` and `message`.
+
+<Canvas of={MultiSelectStories.ValidationMessage} />
+
+A validation message will render below the MultiSelect and will be read to assistive technologies before the `description` content.
+
+<Canvas of={MultiSelectStories.ValidationMessageWithDescription} />

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

@@ -51,49 +51,87 @@ const StickerSheetTemplate: StickerSheetStory = {
     >(new Set())
 
     return (
-      <StickerSheet
-        heading="MultiSelect"
-        className={classnames("w-full", IS_CHROMATIC && "pb-160")}
-      >
-        <StickerSheet.Header
-          headings={["Closed", "Open", "No items"]}
-          headingsWidth="30%"
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <MultiSelect
-              id="id--multi-select-options--closed"
-              label="Label"
-              description="A short description"
-              isOpen={isOpenClosed}
-              onOpenChange={setIsOpenClosed}
-              onSelectedValuesChange={setSelectedValuesClosed}
-              selectedValues={selectedValuesClosed}
-              items={options}
-            />
-            <MultiSelect
-              id="id--multi-select-options--open"
-              label="Label"
-              description="A short description"
-              isOpen={isOpenOpen}
-              onOpenChange={setIsOpenOpen}
-              onSelectedValuesChange={setSelectedValuesOpen}
-              selectedValues={selectedValuesOpen}
-              items={options}
-            />
-            <MultiSelect
-              id="id--multi-select-options--no-items"
-              label="Label"
-              description="A short description"
-              isOpen={isOpenNoItems}
-              onOpenChange={setIsOpenNoItems}
-              selectedValues={selectedValuesNoItems}
-              onSelectedValuesChange={setSelectedValuesNoItems}
-              items={[]}
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
-      </StickerSheet>
+      <>
+        <StickerSheet
+          heading="MultiSelect"
+          className={classnames("w-full", IS_CHROMATIC && "pb-160")}
+        >
+          <StickerSheet.Header
+            headings={["Closed", "Open", "No items"]}
+            headingsWidth="30%"
+          />
+          <StickerSheet.Body>
+            <StickerSheet.Row>
+              <MultiSelect
+                id="id--multi-select-options--closed"
+                label="Label"
+                description="A short description"
+                isOpen={isOpenClosed}
+                onOpenChange={setIsOpenClosed}
+                onSelectedValuesChange={setSelectedValuesClosed}
+                selectedValues={selectedValuesClosed}
+                items={options}
+              />
+              <MultiSelect
+                id="id--multi-select-options--open"
+                label="Label"
+                description="A short description"
+                isOpen={isOpenOpen}
+                onOpenChange={setIsOpenOpen}
+                onSelectedValuesChange={setSelectedValuesOpen}
+                selectedValues={selectedValuesOpen}
+                items={options}
+              />
+              <MultiSelect
+                id="id--multi-select-options--no-items"
+                label="Label"
+                description="A short description"
+                isOpen={isOpenNoItems}
+                onOpenChange={setIsOpenNoItems}
+                selectedValues={selectedValuesNoItems}
+                onSelectedValuesChange={setSelectedValuesNoItems}
+                items={[]}
+              />
+            </StickerSheet.Row>
+          </StickerSheet.Body>
+        </StickerSheet>
+        <StickerSheet
+          heading="Validation"
+          className={classnames("w-full", IS_CHROMATIC && "pb-160")}
+        >
+          <StickerSheet.Header headings={["Error", "Caution"]} />
+          <StickerSheet.Body>
+            <StickerSheet.Row>
+              <MultiSelect
+                id="id--multi-select--error"
+                label="Label"
+                isOpen={false}
+                onOpenChange={() => undefined}
+                onSelectedValuesChange={() => undefined}
+                selectedValues={selectedValuesOpen}
+                items={options}
+                validationMessage={{
+                  status: "error",
+                  message: "There are no waffles left.",
+                }}
+              />
+              <MultiSelect
+                id="id--multi-select--caution"
+                label="Label"
+                isOpen={false}
+                onOpenChange={() => undefined}
+                onSelectedValuesChange={() => undefined}
+                selectedValues={selectedValuesNoItems}
+                items={options}
+                validationMessage={{
+                  status: "error",
+                  message: "There are only four pancakes left.",
+                }}
+              />
+            </StickerSheet.Row>
+          </StickerSheet.Body>
+        </StickerSheet>
+      </>
     )
   },
 }

package/src/MultiSelect/_docs/MultiSelect.stories.tsx

@@ -150,3 +150,24 @@ export const Description: Story = {
     description: "Breakfast will be delivered directly to your house",
   },
 }
+
+export const ValidationMessage: Story = {
+  ...MultiSelectTemplate,
+  args: {
+    validationMessage: {
+      status: "error",
+      message: "There are no more waffles",
+    },
+  },
+}
+
+export const ValidationMessageWithDescription: Story = {
+  ...MultiSelectTemplate,
+  args: {
+    description: "Breakfast will be delivered to your house.",
+    validationMessage: {
+      status: "caution",
+      message: "Only five more waffles remain.",
+    },
+  },
+}

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.module.scss

@@ -18,6 +18,15 @@
     border-color: $color-gray-600;
     background-color: $color-gray-200;
   }
+
+  &.error {
+    border: $border-solid-border-style $border-solid-border-width $color-red-500;
+  }
+
+  &.caution {
+    border: $border-solid-border-style $border-solid-border-width
+      $color-yellow-600;
+  }
 }
 
 .toggleButton {

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, forwardRef } from "react"
 import classnames from "classnames"
 import { ClearButton } from "~components/ClearButton"
+import { FieldMessageProps } from "~components/FieldMessage"
 import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import { RemovableTag } from "~components/__future__/Tag"
 import { OverrideClassName } from "~types/OverrideClassName"
@@ -13,6 +14,7 @@ export type MultiSelectToggleProps = {
   ["aria-controls"]: string
   selectedOptions: MultiSelectOption[]
   isOpen?: boolean
+  status?: FieldMessageProps["status"]
   onRemoveOption: (optionValue: MultiSelectOption["value"]) => void
   onRemoveAllOptions: () => void
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>
@@ -32,6 +34,7 @@ export const MultiSelectToggle = forwardRef<
       selectedOptions,
       onRemoveOption,
       onRemoveAllOptions,
+      status,
       ...restProps
     },
     ref
@@ -43,7 +46,11 @@ export const MultiSelectToggle = forwardRef<
        */}
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div
-        className={classnames(styles.multiSelectToggle, classNameOverride)}
+        className={classnames(
+          styles.multiSelectToggle,
+          classNameOverride,
+          status && styles[status]
+        )}
         onClick={onClick}
         {...restProps}
       >

package/src/MultiSelect/subcomponents/MultiSelectToggle/_docs/MultiSelectToggle.stickersheet.stories.tsx

@@ -92,6 +92,23 @@ const StickerSheetTemplate: StickerSheetStory = {
           </StickerSheet.Body>
         </StickerSheet>
 
+        <StickerSheet
+          isReversed={isReversed}
+          heading="Validation states"
+          className="w-full"
+        >
+          <StickerSheet.Header
+            headings={["Error", "Caution"]}
+            verticalHeadingsWidth="10rem"
+          />
+          <StickerSheet.Body>
+            <StickerSheet.Row>
+              <MultiSelectToggle status="error" {...defaultProps} />
+              <MultiSelectToggle status="caution" {...defaultProps} />
+            </StickerSheet.Row>
+          </StickerSheet.Body>
+        </StickerSheet>
+
         <StickerSheet
           isReversed={isReversed}
           heading="Has selected values"

package/src/MultiSelect/subcomponents/Popover/Popover.tsx

@@ -43,7 +43,7 @@ export const Popover = <RT extends ReferenceType>({
     },
     placement: "bottom-start",
     middleware: [
-      offset(15),
+      offset(6),
       flip(),
       size({
         apply({ availableWidth, availableHeight, elements }) {

package/src/MultiSelect/types.ts

@@ -1,5 +1,12 @@
+import { FieldMessageStatus } from "~components/FieldMessage"
+
 export type MultiSelectOption = {
   label: string
   // Used for "value" attribute in option - must be unique
   value: string | number
 }
+
+export type ValidationMessage = {
+  status?: Extract<FieldMessageStatus, "error" | "caution">
+  message: string | React.ReactElement
+}