@kaizen/components 1.66.0 → 1.67.0

package/src/Filter/FilterBar/FilterBar.spec.tsx

@@ -313,7 +313,7 @@ describe("<FilterBar />", () => {
           />
         )
         await waitForI18nContent()
-        expect(getByTestId("testid__values").textContent).toEqual(
+        expect(getByTestId("testid__values").textContent).toBe(
           JSON.stringify({})
         )
       })
@@ -580,7 +580,7 @@ describe("<FilterBar />", () => {
         await user.click(getByRole("option", { name: "Long Black" }))
 
         await waitFor(() => {
-          expect(coffeeButton.textContent).toBe("Coffee:Long Black")
+          expect(coffeeButton).toHaveAccessibleName("Coffee : Long Black")
         })
         const iceButton = getByRole("button", { name: "Ice" })
         expect(iceButton).toBeVisible()
@@ -590,7 +590,7 @@ describe("<FilterBar />", () => {
         await user.click(getByRole("option", { name: "Latte" }))
 
         await waitFor(() => {
-          expect(coffeeButton.textContent).toBe("Coffee:Latte")
+          expect(coffeeButton).toHaveAccessibleName("Coffee : Latte")
         })
         const milkButton = getByRole("button", { name: "Milk" })
         expect(milkButton).toBeVisible()
@@ -600,7 +600,7 @@ describe("<FilterBar />", () => {
         await user.click(getByRole("option", { name: "Oat" }))
 
         await waitFor(() => {
-          expect(milkButton.textContent).toBe("Milk:Oat")
+          expect(milkButton).toHaveAccessibleName("Milk : Oat")
         })
         expect(addFiltersButton).not.toBeDisabled()
 
@@ -657,16 +657,16 @@ describe("<FilterBar />", () => {
       })
       const iceLevelButton = getByRole("button", { name: "Ice Level : 100%" })
 
-      expect(flavourButton.textContent).toBe("Flavour:Jasmine Milk Tea")
-      expect(sugarLevelButton.textContent).toBe("Sugar Level:50%")
-      expect(iceLevelButton.textContent).toBe("Ice Level:100%")
+      expect(flavourButton).toHaveAccessibleName("Flavour : Jasmine Milk Tea")
+      expect(sugarLevelButton).toHaveAccessibleName("Sugar Level : 50%")
+      expect(iceLevelButton).toHaveAccessibleName("Ice Level : 100%")
 
       await user.click(getByRole("button", { name: "Clear all filters" }))
 
       await waitFor(() => {
-        expect(flavourButton.textContent).toBe("Flavour")
-        expect(sugarLevelButton.textContent).toBe("Sugar Level")
-        expect(iceLevelButton.textContent).toBe("Ice Level")
+        expect(flavourButton).toHaveAccessibleName("Flavour")
+        expect(sugarLevelButton).toHaveAccessibleName("Sugar Level")
+        expect(iceLevelButton).toHaveAccessibleName("Ice Level")
       })
     })
 
@@ -744,14 +744,14 @@ describe("<FilterBar />", () => {
       await waitForI18nContent()
 
       const flavourButton = getByRole("button", { name: "Flavour" })
-      expect(flavourButton.textContent).toEqual("Flavour")
+      expect(flavourButton).toHaveAccessibleName("Flavour")
 
       await user.click(
         getByRole("button", { name: "Update Flavour to honey-milk-tea" })
       )
 
       await waitFor(() => {
-        expect(flavourButton.textContent).toEqual("Flavour:Honey Milk Tea")
+        expect(flavourButton).toHaveAccessibleName("Flavour : Honey Milk Tea")
       })
     })
 

package/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
-import { AddIcon } from "~components/Icon"
 import { Menu, MenuList, MenuItem, Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { useFilterBarContext } from "../../context/FilterBarContext"
 
 export const AddFiltersMenu = (): JSX.Element => {
@@ -24,7 +24,7 @@ export const AddFiltersMenu = (): JSX.Element => {
           label={menuButtonLabel}
           secondary
           disabled={inactiveFilters.length === 0}
-          icon={<AddIcon role="presentation" />}
+          icon={<Icon name="add" isPresentational />}
         />
       }
     >

package/src/Filter/FilterButton/FilterButton/FilterButton.module.scss

@@ -10,7 +10,7 @@
 }
 
 .hasSelectedValues {
-  font-weight: $typography-button-primary-font-weight;
+  font-weight: bold;
 }
 
 .labelSeparator {

package/src/Filter/FilterButton/FilterButton/FilterButton.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react"
 import classnames from "classnames"
-import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { isRefObject } from "~components/utils/isRefObject"
 import { FilterTriggerRef } from "../../Filter/types"
 import {
@@ -45,11 +45,10 @@ export const FilterButton = forwardRef<FilterTriggerRef, FilterButtonProps>(
             label
           )}
         </span>
-        {isOpen ? (
-          <ChevronUpIcon role="presentation" />
-        ) : (
-          <ChevronDownIcon role="presentation" />
-        )}
+        <Icon
+          name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+          isPresentational
+        />
       </FilterButtonBase>
     )
   }

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
 import { ButtonGroup, ButtonGroupProps } from "~components/ButtonGroup"
 import { FilterTriggerRef } from "~components/Filter/Filter"
-import { ClearIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { Tooltip } from "~components/__overlays__/Tooltip/v1"
 import { DataAttributes } from "~components/types/DataAttributes"
 import { isRefObject } from "~components/utils/isRefObject"
@@ -50,7 +50,7 @@ export const FilterButtonRemovable = forwardRef<
       <FilterButton ref={ref} {...triggerButtonProps} />
       <Tooltip text={removeButtonLabel} display="inline-block" position="below">
         <FilterButtonBase ref={removeButtonRef} {...removeButtonProps}>
-          <ClearIcon role="img" aria-label={removeButtonLabel} />
+          <Icon name="cancel" alt={removeButtonLabel} isFilled />
         </FilterButtonBase>
       </Tooltip>
     </ButtonGroup>

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

@@ -115,7 +115,6 @@ describe("<FilterDateRangePicker />", () => {
 
       await waitFor(() => {
         expect(inputEndDate).not.toHaveFocus()
-        expect(filterButton.textContent).toEqual("Dates")
       })
     }, 10000)
   })

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

@@ -67,7 +67,8 @@ describe("<DateRangeInputField />", () => {
     const inputStart = screen.getByRole("textbox", { name: "Date from" })
     await waitFor(() => {
       expect(inputStart).toHaveAccessibleDescription(
-        "Date Start has an error Input format : dd/mm/yyyy"
+        // React Testing Library bug: Icon should be showing aria-label "error message" instead
+        "error Date Start has an error Input format : dd/mm/yyyy"
       )
       expect(screen.getByText("Date Start has an error")).toBeVisible()
     })

package/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx

@@ -4,8 +4,8 @@ import { useOption } from "@react-aria/listbox"
 import { mergeProps } from "@react-aria/utils"
 import classnames from "classnames"
 import { Badge } from "~components/Badge"
-import { CheckIcon } from "~components/Icon"
 import { VisuallyHidden } from "~components/VisuallyHidden"
+import { Icon } from "~components/__future__/Icon"
 import { useSelectionContext } from "../../context"
 import { MultiSelectItem } from "../../types"
 import styles from "./MultiSelectOption.module.scss"
@@ -50,7 +50,7 @@ export const MultiSelectOption = ({
       <span
         className={classnames(styles.icon, isSelected && styles.isSelected)}
       >
-        {isSelected && <CheckIcon role="presentation" />}
+        {isSelected && <Icon name="check" isPresentational />}
       </span>
       {/* can also be item.value since 'rendered' is defined as item.value in SelectionProvider*/}
       {item.rendered}

package/src/Filter/FilterSelect/FilterSelect.spec.tsx

@@ -198,16 +198,15 @@ describe("<FilterSelect>", () => {
     it("changes the value within the button when an option is selected", async () => {
       render(
         <FilterSelectWrapper
-          isOpen
           renderTrigger={(triggerButtonProps): JSX.Element => (
-            <FilterButton data-testid="test__trigger" {...triggerButtonProps} />
+            <FilterButton {...triggerButtonProps} />
           )}
         />
       )
-      // Use testid because when the filter is open, the button is inaccessible
-      expect(screen.getByTestId("test__trigger").textContent).toBe("Coffee")
 
-      await user.tab()
+      const button = screen.getByRole("button", { name: "Coffee" })
+
+      await user.click(button)
       await waitFor(() => {
         expect(screen.queryByRole("listbox")).toBeVisible()
       })

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from "react"
 import classNames from "classnames"
 import Media from "react-media"
 import { Heading, HeadingProps } from "~components/Heading"
-import { ArrowForwardIcon } from "~components/Icon"
 import { SceneProps, SpotProps } from "~components/Illustration"
 import { Text } from "~components/Text"
 import { Button, ButtonProps } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
 import { VariantType } from "./types"
 import styles from "./GuidanceBlock.module.scss"
@@ -223,7 +223,11 @@ export const GuidanceBlock = ({
                     <Button
                       icon={
                         withActionButtonArrow ? (
-                          <ArrowForwardIcon role="presentation" />
+                          <Icon
+                            name="arrow_forward"
+                            isPresentational
+                            shouldMirrorInRTL
+                          />
                         ) : undefined
                       }
                       iconPosition="end"

package/src/Icon/_docs/{Icon.stories.tsx → Icon.docs.stories.tsx}

@@ -7,7 +7,7 @@ import { AddIcon } from "../index"
 import styles from "./icon.module.scss"
 
 const meta = {
-  title: "Components/Icons",
+  title: "Illustrations/Icon",
   component: AddIcon,
   args: {
     role: "presentation",

package/src/Icon/_docs/Icon.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta, Story } from "@storybook/blocks"
 import { ResourceLinks } from "~storybook/components"
-import * as IconStories from "./Icon.stories"
+import * as IconStories from "./Icon.docs.stories"
 
 <Meta of={IconStories} />
 
@@ -8,7 +8,6 @@ import * as IconStories from "./Icon.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Icons"
-
 />
 
 ## Installation

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

@@ -7,7 +7,7 @@ import {
 } from "~storybook/components/StickerSheet"
 
 export default {
-  title: "Components/Icons",
+  title: "Illustrations/Icon",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Illustration/utils/usePausePlay.tsx

@@ -1,5 +1,5 @@
 import React, { useState, RefObject } from "react"
-import { LaunchIcon, PauseIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 
 export type usePausePlayHook = {
   toggle: () => void
@@ -24,10 +24,12 @@ export const usePausePlay = (
         videoRef.current.pause()
       }
     },
-    icon: isPaused ? (
-      <LaunchIcon role="presentation" />
-    ) : (
-      <PauseIcon role="presentation" />
+    icon: (
+      <Icon
+        name={isPaused ? "play_circle" : "pause"}
+        isPresentational
+        isFilled
+      />
     ),
     label: isPaused ? "Play animation" : "Pause animation",
   }

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

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { MeatballsIcon, WritingIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -35,16 +35,18 @@ const InputExampleGroup = (props: InputProps): JSX.Element => (
           value={type}
           type={type}
           startIconAdornment={
-            <WritingIcon
-              role="presentation"
+            <Icon
+              name="edit"
+              isPresentational
               data-sb-a11y-color-contrast-disable={
                 props.disabled ? "true" : "false"
               }
             />
           }
           endIconAdornment={
-            <MeatballsIcon
-              role="presentation"
+            <Icon
+              name="close"
+              isPresentational
               data-sb-a11y-color-contrast-disable={
                 props.disabled ? "true" : "false"
               }

package/src/Input/Input/_docs/Input.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { UserAddIcon, WritingIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { Input } from "../index"
 
 const meta = {
@@ -87,14 +87,16 @@ export const Icons: Story = {
         <Input
           type="text"
           value="Start Icon"
-          startIconAdornment={<UserAddIcon role="presentation" />}
+          startIconAdornment={
+            <Icon name="person_add" isPresentational isFilled />
+          }
         />
       </li>
       <li>
         <Input
           type="text"
           value="End Icon"
-          endIconAdornment={<WritingIcon role="presentation" />}
+          endIconAdornment={<Icon name="edit" isPresentational isFilled />}
         />
       </li>
     </ul>

package/src/Input/InputSearch/InputSearch.tsx

@@ -2,8 +2,8 @@ import React, { InputHTMLAttributes, useRef } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
 import classnames from "classnames"
 import { ClearButton } from "~components/ClearButton"
-import { SearchIcon } from "~components/Icon/SearchIcon"
 import { LoadingSpinner } from "~components/Loading"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./InputSearch.module.scss"
 
@@ -63,7 +63,7 @@ export const InputSearch = (props: InputSearchProps): JSX.Element => {
             classNameOverride={styles.loadingSpinner}
           />
         ) : (
-          <SearchIcon role="presentation" />
+          <Icon name="search" isPresentational />
         )}
       </div>
 

package/src/Label/Label.module.scss

@@ -5,6 +5,10 @@
 
 $label-start-margin: $spacing-xs;
 
+.label {
+  --icon-vertical-align: text-bottom;
+}
+
 .label,
 :global(.ideal-sans) .label {
   // override Murmur global styles :(

package/src/LikertScaleLegacy/LikertScaleLegacy.tsx

@@ -1,8 +1,8 @@
 import React, { createRef, useState } from "react"
 import classnames from "classnames"
 import { FieldMessage } from "~components/FieldMessage"
-import { CheckIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { ScaleValue, Scale, ScaleItem, ColorSchema } from "./types"
 import determineSelectionFromKeyPress from "./utils/determineSelectionFromKeyPress"
 import styles from "./LikertScaleLegacy.module.scss"
@@ -29,7 +29,7 @@ export type LikertScaleProps = {
 }
 
 const SelectedItemIcon = (): JSX.Element => (
-  <CheckIcon role="presentation" classNameOverride={styles.check} />
+  <Icon name="check" isPresentational className={styles.check} />
 )
 
 /**

package/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { Avatar } from "~components/Avatar"
-import { ConfigureIcon } from "~components/Icon"
 import { BrandMomentPositiveOutro, Informative } from "~components/Illustration"
+import { Icon } from "~components/__future__/Icon"
 import { StickerSheet } from "~storybook/components/StickerSheet"
 import { LoadingGraphic } from "../index"
 
@@ -49,7 +49,7 @@ export const Size: Story = {
       <StickerSheet.Body>
         <StickerSheet.Row rowTitle="Icon (small)">
           <LoadingGraphic size="small" />
-          <ConfigureIcon aria-label="Aliens approaching!" role="img" />
+          <Icon name="build" alt="Aliens approaching!" isFilled />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Avatar (medium)">
           <LoadingGraphic size="medium" />

package/src/Modal/ConfirmationModal/ConfirmationModal.module.scss

@@ -47,6 +47,8 @@
   }
 
   .spotIcon {
+    --icon-size: 30;
+
     width: 30px;
     height: 30px;
 

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -1,12 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { Heading } from "~components/Heading"
-import {
-  CautionWhiteIcon,
-  ExclamationWhiteIcon,
-  InformationWhiteIcon,
-  SuccessWhiteIcon,
-} from "~components/Icon"
 import {
   Assertive,
   Cautionary,
@@ -23,6 +17,7 @@ import {
   ModalBody,
 } from "~components/Modal/GenericModal"
 import { ButtonProps } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./ConfirmationModal.module.scss"
 
 type Mood = "positive" | "informative" | "negative" | "cautionary" | "assertive"
@@ -77,46 +72,48 @@ type ConfirmationModalVariants = {
 export type ConfirmationModalProps = BaseConfirmationModalProps &
   (ConfirmationModalMoods | ConfirmationModalVariants)
 
-const getIcon = (
-  variantName: Mood | Variant,
-  isProminent: boolean
-): JSX.Element => {
+const getIconName = (variantName: Mood | Variant): string => {
   switch (variantName) {
     case "cautionary":
-      return isProminent ? (
-        <Cautionary />
-      ) : (
-        <CautionWhiteIcon inheritSize role="presentation" />
-      )
+      return "warning"
     case "informative":
-      return isProminent ? (
-        <Informative />
-      ) : (
-        <InformationWhiteIcon inheritSize role="presentation" />
-      )
+      return "info"
     case "negative":
     case "warning":
-      return isProminent ? (
-        <Negative />
-      ) : (
-        <ExclamationWhiteIcon inheritSize role="presentation" />
-      )
+      return "error"
     case "positive":
     case "success":
-      return isProminent ? (
-        <Positive />
-      ) : (
-        <SuccessWhiteIcon inheritSize role="presentation" />
-      )
+      return "check_circle"
     case "assertive":
-      return isProminent ? (
-        <Assertive />
-      ) : (
-        <ExclamationWhiteIcon inheritSize role="presentation" />
-      )
+      return "error"
   }
 }
 
+const getIcon = (
+  variantName: Mood | Variant,
+  isProminent: boolean
+): JSX.Element => {
+  if (isProminent) {
+    switch (variantName) {
+      case "cautionary":
+        return <Cautionary />
+      case "informative":
+        return <Informative />
+      case "negative":
+      case "warning":
+        return <Negative />
+      case "positive":
+      case "success":
+        return <Positive />
+      case "assertive":
+        return <Assertive />
+    }
+  }
+
+  const iconName = getIconName(variantName)
+  return <Icon name={iconName} isPresentational isFilled />
+}
+
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-modals-confirmationmodal--docs Storybook}

package/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { CloseIcon } from "~components/Icon"
 import { IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { ModalBody } from "../ModalBody"
 import styles from "./ModalHeader.module.scss"
 
@@ -20,7 +20,7 @@ export const ModalHeader = ({
     <div className={styles.dismissButton}>
       <IconButton
         label="Dismiss"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         reversed={reversed}
         onClick={onDismiss}
         disabled={onDismiss == undefined}

package/src/MultiSelect/MultiSelect.spec.tsx

@@ -350,6 +350,7 @@ describe("Has validation status", () => {
     )
     expect(screen.getByText("No waffles are available")).toBeInTheDocument()
   })
+
   it("describes the Toggle", () => {
     render(
       <MultiSelectWrapper
@@ -364,13 +365,16 @@ describe("Has validation status", () => {
     expect(
       screen.getByRole("button", {
         name: "Breakfast menu",
-        description: "Only four waffles remain",
+        // React Testing Library bug: Icon should be showing aria-label "caution message" instead
+        description: "warning 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."
+    const description = "Choose your breakfast."
+    // React Testing Library bug: Icon should be showing aria-label "caution message" instead
+    const validationMessage = "warning Only four waffles remain."
 
     render(
       <MultiSelectWrapper

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

@@ -68,11 +68,5 @@ $focus-ring-size: calc(#{$checkbox-size} + #{$focus-ring-offset});
 }
 
 .icon {
-  height: $checkbox-size;
-  width: $checkbox-size;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   color: $color-white;
 }

package/src/MultiSelect/subcomponents/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, InputHTMLAttributes } from "react"
 import classnames from "classnames"
-import { CheckIcon, MinusIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Checkbox.module.scss"
 
@@ -25,14 +25,15 @@ export type CheckboxProps = {
   >
 
 const renderIcon = (status: CheckedStatus): JSX.Element | null => {
-  switch (status) {
-    case "indeterminate":
-      return <MinusIcon role="presentation" classNameOverride={styles.icon} />
-    case "checked":
-      return <CheckIcon role="presentation" classNameOverride={styles.icon} />
-    default:
-      return null
-  }
+  if (status === "unchecked") return null
+
+  return (
+    <Icon
+      name={status === "checked" ? "check" : "remove"}
+      isPresentational
+      className={styles.icon}
+    />
+  )
 }
 
 export const Checkbox = ({