@kaizen/components 1.66.0 → 1.67.0

package/src/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.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 { vi } from "vitest"
 import {
@@ -83,10 +83,10 @@ describe("<MultiSelectOptions />", () => {
     })
 
     it("returns updated selected values when selecting an option", async () => {
-      const { getByRole, queryAllByRole } = render(
+      const { getByRole } = render(
         <MultiSelectOptionsWrapper selectedValues={new Set(["pancakes"])} />
       )
-      expect(queryAllByRole("presentation", { hidden: true }).length).toBe(1)
+      expect(screen.getAllByRole("checkbox", { checked: true }).length).toBe(1)
 
       const waffleOption = getByRole("checkbox", { name: "Waffle" })
       expect(waffleOption).not.toBeChecked()
@@ -96,17 +96,19 @@ describe("<MultiSelectOptions />", () => {
       await waitFor(() => {
         expect(onChange).toBeCalledWith(new Set(["pancakes", "waffle"]))
         expect(waffleOption).toBeChecked()
-        expect(queryAllByRole("presentation", { hidden: true }).length).toBe(2)
+        expect(screen.getAllByRole("checkbox", { checked: true }).length).toBe(
+          2
+        )
       })
     })
 
     it("returns updated selected values when unselecting an option", async () => {
-      const { getByRole, queryAllByRole } = render(
+      const { getByRole } = render(
         <MultiSelectOptionsWrapper
           selectedValues={new Set(["pancakes", "waffle"])}
         />
       )
-      expect(queryAllByRole("presentation", { hidden: true }).length).toBe(2)
+      expect(screen.getAllByRole("checkbox", { checked: true }).length).toBe(2)
 
       const waffleOption = getByRole("checkbox", { name: "Waffle" })
       expect(waffleOption).toBeChecked()
@@ -116,7 +118,9 @@ describe("<MultiSelectOptions />", () => {
       await waitFor(() => {
         expect(onChange).toBeCalledWith(new Set(["pancakes"]))
         expect(waffleOption).not.toBeChecked()
-        expect(queryAllByRole("presentation", { hidden: true }).length).toBe(1)
+        expect(screen.getAllByRole("checkbox", { checked: true }).length).toBe(
+          1
+        )
       })
     })
   })

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

@@ -2,8 +2,7 @@ import React, { HTMLAttributes, forwardRef, useId } 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__"
+import { Icon, RemovableTag } from "~components/__future__"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { MultiSelectOption } from "../../types"
 import styles from "./MultiSelectToggle.module.scss"
@@ -70,11 +69,10 @@ export const MultiSelectToggle = forwardRef<
               onClick(e)
             }}
           >
-            {isOpen ? (
-              <ChevronUpIcon role="presentation" />
-            ) : (
-              <ChevronDownIcon role="presentation" />
-            )}
+            <Icon
+              name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+              isPresentational
+            />
           </button>
 
           <div

package/src/Notification/subcomponents/CancelButton/CancelButton.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { CloseIcon } from "~components/Icon/CloseIcon"
+import { Icon } from "~components/__future__/Icon"
 import styles from "../GenericNotification/GenericNotification.module.scss"
 
 type CancelButtonProps = {
@@ -14,7 +14,7 @@ export const CancelButton = ({ onClick }: CancelButtonProps): JSX.Element => (
     data-testid="close-button"
     aria-label="Close notification"
   >
-    <CloseIcon role="presentation" />
+    <Icon name="close" isPresentational />
   </button>
 )
 

package/src/Notification/subcomponents/GenericNotification/_mixins.scss

@@ -165,12 +165,14 @@ $notification-slide-right: transform 300ms ease-out;
   %ca-notification---toast & {
     width: 22px;
     height: 22px;
+    font-size: 22px;
     margin-top: $spacing-6;
   }
 
   %ca-notification---global & {
     width: 24px;
     height: 24px;
+    font-size: 24px;
   }
 }
 

package/src/Notification/subcomponents/NotificationIcon/NotificationIcon.module.css

@@ -0,0 +1,3 @@
+.notificationIcon {
+  font-size: inherit;
+}

package/src/Notification/subcomponents/NotificationIcon/NotificationIcon.tsx

@@ -1,13 +1,19 @@
 import React from "react"
-import { CautionIcon } from "~components/Icon/CautionIcon"
-import { ExclamationIcon } from "~components/Icon/ExclamationIcon"
-import { InformationIcon } from "~components/Icon/InformationIcon"
-import { SecurityTipIcon } from "~components/Icon/SecurityTipIcon"
-import { SuccessIcon } from "~components/Icon/SuccessIcon"
 import {
   NotificationType,
   NotificationVariant,
 } from "~components/Notification/types"
+import { Icon } from "~components/__future__"
+import styles from "./NotificationIcon.module.css"
+
+const NotificationIcon = ({ name }: { name: string }): JSX.Element => (
+  <Icon
+    name={name}
+    isFilled
+    isPresentational
+    className={styles.notificationIcon}
+  />
+)
 
 export type NotificationIconTypeProps = {
   type: NotificationType
@@ -18,17 +24,17 @@ export const NotificationIconType = ({
 }: NotificationIconTypeProps): JSX.Element => {
   switch (type) {
     case "positive":
-      return <SuccessIcon role="presentation" inheritSize />
+      return <NotificationIcon name="check_circle" />
     case "negative":
-      return <ExclamationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="error" />
     case "cautionary":
-      return <CautionIcon role="presentation" inheritSize />
+      return <NotificationIcon name="warning" />
     case "informative":
-      return <InformationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="info" />
     case "security":
-      return <SecurityTipIcon role="presentation" inheritSize />
+      return <NotificationIcon name="privacy_tip" />
     default:
-      return <InformationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="info" />
   }
 }
 
@@ -43,15 +49,15 @@ export const NotificationIconVariant = ({
 }: NotificationIconVariantProps): JSX.Element => {
   switch (variant) {
     case "success":
-      return <SuccessIcon role="presentation" inheritSize />
+      return <NotificationIcon name="check_circle" />
     case "warning":
-      return <ExclamationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="error" />
     case "cautionary":
-      return <CautionIcon role="presentation" inheritSize />
+      return <NotificationIcon name="warning" />
     case "informative":
-      return <InformationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="info" />
     case "security":
-      return <SecurityTipIcon role="presentation" inheritSize />
+      return <NotificationIcon name="privacy_tip" />
   }
 }
 

package/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.module.scss

@@ -4,10 +4,6 @@
 @import "../../../__actions__/Button/v1/utils/variables";
 
 %directional-link {
-  [dir="rtl"] & {
-    transform: rotate(180deg);
-  }
-
   border: $border-solid-border-width solid $color-blue-300;
 
   @include enabled-pseudo-states-variant($color-blue-100, $color-blue-400);

package/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.tsx

@@ -1,14 +1,9 @@
 import React from "react"
-import {
-  ArrowBackwardIcon,
-  ArrowForwardIcon,
-  EndIcon,
-  StartIcon,
-} from "~components/Icon"
 import {
   GenericButton,
   GenericProps,
 } from "~components/__actions__/Button/v2/GenericButton"
+import { Icon } from "~components/__future__/Icon"
 
 export type DirectionalLinkProps = {
   label: string
@@ -16,11 +11,11 @@ export type DirectionalLinkProps = {
   direction: "prev" | "next" | "start" | "end"
 } & GenericProps
 
-const iconMap = {
-  prev: <ArrowBackwardIcon role="presentation" />,
-  next: <ArrowForwardIcon role="presentation" />,
-  start: <StartIcon role="presentation" />,
-  end: <EndIcon role="presentation" />,
+const iconNameMap = {
+  prev: "arrow_back",
+  next: "arrow_forward",
+  start: "keyboard_tab_rtl",
+  end: "keyboard_tab",
 }
 
 /**
@@ -38,7 +33,13 @@ export const DirectionalLink = ({
     {...otherProps}
     iconButton
     directionalLink
-    icon={iconMap[otherProps.direction]}
+    icon={
+      <Icon
+        name={iconNameMap[otherProps.direction]}
+        isPresentational
+        shouldMirrorInRTL
+      />
+    }
   />
 )
 

package/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.scss

@@ -4,7 +4,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 36px;
   width: 36px;
   background-color: transparent;
   color: rgba($color-purple-800-rgb, 0.7);

package/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { EllipsisIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./TruncateIndicator.module.scss"
 
 export const TruncateIndicator = (): JSX.Element => (
@@ -7,6 +7,6 @@ export const TruncateIndicator = (): JSX.Element => (
     className={styles.truncateIndicatorWrapper}
     data-testid="truncate-indicator"
   >
-    <EllipsisIcon role="presentation" />
+    <Icon name="more_horiz" isPresentational />
   </div>
 )

package/src/Popover/Popover.module.scss

@@ -140,15 +140,15 @@ $cautionary-box-border-color: var(--color-yellow-700);
 }
 
 .informativeIcon {
-  color: $color-blue-500;
+  color: var(--color-blue-500);
 }
 
 .positiveIcon {
-  color: $color-green-400;
+  color: var(--color-green-500);
 }
 
 .negativeIcon {
-  color: $color-red-500;
+  color: var(--color-red-500);
 }
 
 .cautionaryIcon {

package/src/Popover/Popover.tsx

@@ -2,8 +2,8 @@ import React, { HTMLAttributes, useMemo, useState } from "react"
 import classnames from "classnames"
 import { usePopper } from "react-popper"
 import { Heading } from "~components/Heading"
-import { CloseIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { Placement, PopoverSize, PopoverVariant } from "./types"
 import {
@@ -140,7 +140,7 @@ export const Popover = ({
                 type="button"
                 aria-label="close"
               >
-                <CloseIcon role="presentation" />
+                <Icon name="close" isPresentational isFilled />
               </button>
             )}
           </div>

package/src/Popover/utils/classMappers.tsx

@@ -1,10 +1,5 @@
 import React from "react"
-import {
-  CautionIcon,
-  ExclamationIcon,
-  InformationIcon,
-  SuccessIcon,
-} from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import styles from "../Popover.module.scss"
 import { PopoverVariant, PopoverSize } from "../types"
 
@@ -43,15 +38,15 @@ export const mapVariantToIconClass = (
 export const mapVariantToIcon = (variant: PopoverVariant): JSX.Element => {
   switch (variant) {
     case "informative":
-      return <InformationIcon role="presentation" />
+      return <Icon name="info" isPresentational isFilled />
     case "positive":
-      return <SuccessIcon role="presentation" />
+      return <Icon name="check_circle" isPresentational isFilled />
     case "negative":
-      return <ExclamationIcon role="presentation" />
+      return <Icon name="error" isPresentational isFilled />
     case "cautionary":
-      return <CautionIcon role="presentation" />
+      return <Icon name="warning" isPresentational isFilled />
     default:
-      return <InformationIcon role="presentation" />
+      return <Icon name="info" isPresentational isFilled />
   }
 }
 

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { BoldIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -25,36 +25,36 @@ const ToggleIconButtonGroup = ({
   <StickerSheet.Row rowTitle={rowTitle}>
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       data-sb-pseudo-styles="hover"
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       isActive
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       data-sb-pseudo-styles="focus"
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       disabled
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       disabled
       data-sb-pseudo-styles="focus"

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stories.tsx

@@ -1,13 +1,13 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { BoldIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { ToggleIconButton } from "../ToggleIconButton"
 
 const meta = {
   title: "Components/RichTextEditor/Subcomponents/ToggleIconButton",
   component: ToggleIconButton,
   args: {
-    icon: <BoldIcon role="presentation" />,
+    icon: <Icon name="format_bold" isPresentational />,
     label: "Bold",
   },
   argTypes: {

package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { BoldIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { ToggleIconButton } from "../ToggleIconButton"
 import { ToolbarSection } from "../ToolbarSection"
 import { Toolbar } from "."
@@ -11,14 +11,17 @@ const user = userEvent.setup()
 const ExampleToolbar = (): JSX.Element => (
   <Toolbar aria-label="Toolbar" aria-controls="editable-id">
     <ToolbarSection>
-      <ToggleIconButton label="Bold" icon={<BoldIcon role="presentation" />} />
+      <ToggleIconButton
+        label="Bold"
+        icon={<Icon name="format_bold" isPresentational />}
+      />
       <ToggleIconButton
         label="Italic"
-        icon={<BoldIcon role="presentation" />}
+        icon={<Icon name="format_italic" isPresentational />}
       />
       <ToggleIconButton
         label="Underline"
-        icon={<BoldIcon role="presentation" />}
+        icon={<Icon name="format_underlined" isPresentational />}
       />
     </ToolbarSection>
   </Toolbar>

package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.stories.tsx

@@ -1,12 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import {
-  BoldIcon,
-  BullettedListIcon,
-  ItalicsIcon,
-  NumberedListIcon,
-  UnderlineIcon,
-} from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { ToggleIconButton } from "../../ToggleIconButton"
 import { ToolbarSection } from "../../ToolbarSection"
 import { Toolbar } from "../index"
@@ -22,25 +16,37 @@ const meta = {
         <ToolbarSection>
           <ToggleIconButton
             label="Bold"
-            icon={<BoldIcon role="presentation" />}
+            icon={<Icon name="format_bold" isPresentational />}
           />
           <ToggleIconButton
             label="Italic"
-            icon={<ItalicsIcon role="presentation" />}
+            icon={<Icon name="format_italic" isPresentational />}
           />
           <ToggleIconButton
             label="Underline"
-            icon={<UnderlineIcon role="presentation" />}
+            icon={<Icon name="format_underlined" isPresentational />}
           />
         </ToolbarSection>
         <ToolbarSection>
           <ToggleIconButton
             label="Bullet list"
-            icon={<BullettedListIcon role="presentation" />}
+            icon={
+              <Icon
+                name="format_list_bulleted"
+                isPresentational
+                shouldMirrorInRTL
+              />
+            }
           />
           <ToggleIconButton
             label="Numbered list"
-            icon={<NumberedListIcon role="presentation" />}
+            icon={
+              <Icon
+                name="format_list_numbered"
+                isPresentational
+                shouldMirrorInRTL
+              />
+            }
           />
         </ToolbarSection>
       </>

package/src/RichTextEditor/RichTextEditor/utils/controlmap.tsx

@@ -1,14 +1,5 @@
 import React from "react"
-import {
-  AddLinkIcon,
-  BoldIcon,
-  BullettedListIcon,
-  DecreaseIndentIcon,
-  IncreaseIndentIcon,
-  ItalicsIcon,
-  NumberedListIcon,
-  UnderlineIcon,
-} from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { ToolbarItems, ToolbarControlTypes } from "../../types"
 import { listIsActive, markIsActive } from "../../utils/commands"
 import {
@@ -210,7 +201,7 @@ export const buildControlMap = (
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Bold",
-      icon: <BoldIcon role="presentation" />,
+      icon: <Icon name="format_bold" isPresentational />,
     })
   }
 
@@ -221,7 +212,7 @@ export const buildControlMap = (
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Italic",
-      icon: <ItalicsIcon role="presentation" />,
+      icon: <Icon name="format_italic" isPresentational />,
     })
   }
 
@@ -232,7 +223,7 @@ export const buildControlMap = (
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Underline",
-      icon: <UnderlineIcon role="presentation" />,
+      icon: <Icon name="format_underlined" isPresentational />,
     })
   }
 
@@ -243,7 +234,9 @@ export const buildControlMap = (
       action: createToggleListCommand(type),
       isActive: listIsActive(editorState, type, listNodes),
       label: "Bullet List",
-      icon: <BullettedListIcon role="presentation" />,
+      icon: (
+        <Icon name="format_list_bulleted" isPresentational shouldMirrorInRTL />
+      ),
     })
   }
 
@@ -254,7 +247,9 @@ export const buildControlMap = (
       action: createToggleListCommand(type),
       isActive: listIsActive(editorState, type, listNodes),
       label: "Numbered List",
-      icon: <NumberedListIcon role="presentation" />,
+      icon: (
+        <Icon name="format_list_numbered" isPresentational shouldMirrorInRTL />
+      ),
     })
   }
 
@@ -270,14 +265,26 @@ export const buildControlMap = (
         disabled: liftListIsDisabled(editorState),
         isActive: false,
         label: "Decrease indent",
-        icon: <DecreaseIndentIcon role="presentation" />,
+        icon: (
+          <Icon
+            name="format_indent_decrease"
+            isPresentational
+            shouldMirrorInRTL
+          />
+        ),
       },
       {
         action: createIndentListCommand(),
         disabled: indentListIsDisabled(editorState),
         isActive: false,
         label: "Increase indent",
-        icon: <IncreaseIndentIcon role="presentation" />,
+        icon: (
+          <Icon
+            name="format_indent_increase"
+            isPresentational
+            shouldMirrorInRTL
+          />
+        ),
       }
     )
   }
@@ -290,7 +297,7 @@ export const buildControlMap = (
       disabled: editorState.selection.empty,
       isActive: false,
       label: "Link",
-      icon: <AddLinkIcon role="presentation" />,
+      icon: <Icon name="add_link" isPresentational />,
     })
   }
 

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.tsx

@@ -1,7 +1,7 @@
 import React from "react"
-import { EditIcon, ExternalLinkIcon, RemoveLinkIcon } from "~components/Icon"
 import { usePopover } from "~components/Popover"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { SelectionPosition } from "../../types"
 import { Positioner } from "./Positioner"
 import styles from "./LinkPopover.module.scss"
@@ -26,7 +26,7 @@ export const LinkPopover = ({
       <Positioner ref={ElementRef} {...selectionPosition} />
       <Popover size="large">
         <div className={styles.popoverContent}>
-          <ExternalLinkIcon role="presentation" />
+          <Icon name="open_in_new" isPresentational />
           <div className={styles.popoverLinkContainer}>
             <Text
               variant="body"
@@ -44,13 +44,9 @@ export const LinkPopover = ({
             </Text>
           </div>
           <div className={styles.popoverActions}>
-            <EditIcon role="img" onClick={onEdit} aria-label="Edit link" />
+            <Icon name="edit" onClick={onEdit} alt="Edit link" />
           </div>
-          <RemoveLinkIcon
-            role="img"
-            onClick={onRemove}
-            aria-label="Remove link"
-          />
+          <Icon name="link_off" onClick={onRemove} alt="Remove link" />
         </div>
       </Popover>
     </>

package/src/Select/Select.module.scss

@@ -345,6 +345,8 @@ $focus-border-color: $color-blue-500;
     }
 
     .dropdownIndicator {
+      --icon-size: 14;
+
       padding-top: 0;
       padding-bottom: 0;
       transform: translateY(1px);