@kaizen/components 1.66.1 → 1.67.1

package/src/Workflow/_docs/WorkflowHeader.stories.tsx

@@ -1,8 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { CloseIcon, VisibleIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
-import { Tag } from "~components/__future__"
+import { Icon, Tag } from "~components/__future__"
 import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 
@@ -20,7 +19,7 @@ const meta = {
       <Button
         key="would-use-uui-2"
         label="Save and close"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         secondary
         iconPosition="end"
         onClick={(): void => alert("mock example of a save action")}
@@ -51,14 +50,14 @@ export const MultipleActions: Story = {
       <Button
         key="would-use-uui-1"
         label="Preview"
-        icon={<VisibleIcon role="presentation" />}
+        icon={<Icon name="visibility" isPresentational isFilled />}
         secondary
         iconPosition="start"
       />,
       <Button
         key="would-use-uui-2"
         label="Save and close"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         secondary
         iconPosition="end"
         onClick={(): void => alert("mock example of a save action")}

package/src/Workflow/_docs/controls/controls.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { ArgTypes } from "@storybook/react"
-import { CloseIcon, VisibleIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 
 export const WorkflowControls: Partial<ArgTypes> = {
   headerActions: {
@@ -14,7 +14,7 @@ export const WorkflowControls: Partial<ArgTypes> = {
         <Button
           key="would-use-uui-1"
           label="Close"
-          icon={<CloseIcon role="presentation" />}
+          icon={<Icon name="close" isPresentational />}
           secondary
           iconPosition="end"
         />,
@@ -23,14 +23,14 @@ export const WorkflowControls: Partial<ArgTypes> = {
         <Button
           key="would-use-uui-1"
           label="Close"
-          icon={<CloseIcon role="presentation" />}
+          icon={<Icon name="close" isPresentational />}
           secondary
           iconPosition="end"
         />,
         <Button
           key="would-use-uui-2"
           label="Preview"
-          icon={<VisibleIcon role="presentation" />}
+          icon={<Icon name="visibility" isPresentational isFilled />}
           secondary
           iconPosition="start"
         />,

package/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx

@@ -1,11 +1,7 @@
 import React from "react"
 import classnames from "classnames"
-import {
-  IndicatorActiveIcon,
-  IndicatorInactiveIcon,
-  SuccessIcon,
-} from "~components/Icon"
 import { VisuallyHidden } from "~components/VisuallyHidden"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./ProgressStepper.module.css"
 
 export type Step = {
@@ -34,39 +30,18 @@ const getStepStatus = (
 } => {
   if (isComplete) {
     return {
-      icon: (
-        <SuccessIcon
-          key={index}
-          inheritSize
-          role="presentation"
-          classNameOverride="success"
-        />
-      ),
+      icon: <Icon key={index} name="check_circle" isPresentational isFilled />,
       accessibleName: `Completed: ${step.label}`,
     }
   }
   if (isCurrentStep) {
     return {
-      icon: (
-        <IndicatorActiveIcon
-          key={index}
-          inheritSize
-          role="presentation"
-          classNameOverride="active"
-        />
-      ),
+      icon: <Icon key={index} name="radio_button_checked" isPresentational />,
       accessibleName: `Current: ${step.label}`,
     }
   }
   return {
-    icon: (
-      <IndicatorInactiveIcon
-        key={index}
-        inheritSize
-        classNameOverride="incomplete"
-        role="presentation"
-      />
-    ),
+    icon: <Icon key={index} name="radio_button_unchecked" isPresentational />,
     accessibleName: `Not started: ${step.label}`,
   }
 }
@@ -91,7 +66,7 @@ export const ProgressStepper = ({
         {steps.map((step, index: number) => {
           const isCurrentStep = currentStepIndex === index
           const isCompletedStep = index < currentStepIndex || isComplete
-          const { accessibleName, icon: Icon } = getStepStatus(
+          const { accessibleName, icon } = getStepStatus(
             isCompletedStep,
             isCurrentStep,
             step,
@@ -122,7 +97,7 @@ export const ProgressStepper = ({
                       [styles.isCompleted]: isCompletedStep,
                     })}
                   >
-                    {Icon}
+                    {icon}
                   </span>
                 </div>
                 {index < steps.length - 1 && (

package/src/__actions__/Button/v1/Button/_docs/Button.mdx

@@ -47,7 +47,7 @@ A disabled Button prevents user interaction. It doesn't appear in the tab order,
 
 Use any <LinkTo pageId="components-icons">Icon</LinkTo> component in the `icon` prop.
 
-<Canvas of={ButtonStories.Icon} />
+<Canvas of={ButtonStories.IconStory} />
 
 #### Icon position
 

package/src/__actions__/Button/v1/Button/_docs/Button.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { AddIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -8,7 +8,7 @@ import {
 import { Button, ButtonProps } from "../index"
 
 export default {
-  title: "Actions/Button/v1",
+  title: "Actions/Button/Button (v1)",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
@@ -69,12 +69,12 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     const ICON_LEFT_PROPS: ButtonProps = {
       label: "Label",
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="add" isPresentational />,
     }
 
     const ICON_RIGHT_PROPS: ButtonProps = {
       label: "Label",
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     }
 
@@ -84,12 +84,12 @@ const StickerSheetTemplate: StickerSheetStory = {
     }
     const BADGE_LEFT_PROPS: ButtonProps = {
       ...BADGE_PROPS,
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="add" isPresentational />,
     }
 
     const BADGE_RIGHT_PROPS: ButtonProps = {
       ...BADGE_PROPS,
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     }
 

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

@@ -1,12 +1,12 @@
 import React, { useState } from "react"
 import { StoryObj, Meta } from "@storybook/react"
-import { AddIcon, ArrowRightIcon } from "~components/Icon"
 import { LoadingInput } from "~components/Loading"
 import { TextField } from "~components/TextField"
+import { Icon } from "~components/__future__/Icon"
 import { Button } from "../index"
 
 const meta = {
-  title: "Actions/Button/v1",
+  title: "Actions/Button/Button (v1)",
   component: Button,
   args: {
     label: "Label",
@@ -65,12 +65,13 @@ export const Disabled: Story = {
 const sourceCodeIcon = `
 import { Button, AddIcon } from "@kaizen/components"
 
-<Button label="Label" icon={<AddIcon role="presentation" />} />
+<Button label="Label" icon={<Icon name="add" isPresentational />} />
 `
 
-export const Icon: Story = {
+export const IconStory: Story = {
+  name: "Icon",
   args: {
-    icon: <AddIcon role="presentation" />,
+    icon: <Icon name="add" isPresentational />,
   },
   parameters: {
     docs: { source: { code: sourceCodeIcon } },
@@ -79,7 +80,7 @@ export const Icon: Story = {
 
 export const IconPosition: Story = {
   args: {
-    icon: <ArrowRightIcon role="presentation" />,
+    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
     iconPosition: "end",
   },
 }

package/src/__actions__/Button/v1/IconButton/_docs/IconButton.stickersheet.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { FilterIcon, MeatballsIcon, TrashIcon } from "~components/Icon"
 import { ButtonProps } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -9,7 +9,7 @@ import {
 import { IconButton, IconButtonProps } from "../index"
 
 export default {
-  title: "Actions/IconButton/v1",
+  title: "Actions/IconButton/IconButton (v1)",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
@@ -30,14 +30,14 @@ const REVERSED__VARIANT_PROPS: Array<{
     title: "Default",
     props: {
       label: "Default label",
-      icon: <MeatballsIcon role="presentation" />,
+      icon: <Icon name="more_horiz" isPresentational />,
     },
   },
   {
     title: "Primary",
     props: {
       label: "Primary label",
-      icon: <MeatballsIcon role="presentation" />,
+      icon: <Icon name="more_horiz" isPresentational />,
       primary: true,
     },
   },
@@ -45,7 +45,7 @@ const REVERSED__VARIANT_PROPS: Array<{
     title: "Destructive",
     props: {
       label: "Label",
-      icon: <TrashIcon role="presentation" />,
+      icon: <Icon name="delete" isPresentational isFilled />,
       destructive: true,
     },
   },
@@ -53,7 +53,7 @@ const REVERSED__VARIANT_PROPS: Array<{
     title: "Secondary",
     props: {
       label: "Label",
-      icon: <FilterIcon role="presentation" />,
+      icon: <Icon name="tune" isPresentational />,
       secondary: true,
     },
   },
@@ -72,7 +72,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             title: "Secondary Destructive",
             props: {
               label: "Label",
-              icon: <TrashIcon role="presentation" />,
+              icon: <Icon name="delete" isPresentational isFilled />,
               secondary: true,
               destructive: true,
             },

package/src/__actions__/Button/v1/IconButton/_docs/IconButton.stories.tsx

@@ -1,24 +1,24 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { AddIcon, MeatballsIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { IconButton } from "../index"
 
 const meta = {
-  title: "Actions/IconButton/v1",
+  title: "Actions/IconButton/IconButton (v1)",
   component: IconButton,
   argTypes: {
     icon: {
       options: ["MeatballsIcon", "AddIcon"],
       control: { type: "radio" },
       mapping: {
-        MeatballsIcon: <MeatballsIcon role="presentation" />,
-        AddIcon: <AddIcon role="presentation" />,
+        MeatballsIcon: <Icon name="more_horiz" isPresentational />,
+        AddIcon: <Icon name="add" isPresentational />,
       },
     },
   },
   args: {
     label: "icon button",
-    icon: <MeatballsIcon role="presentation" />,
+    icon: <Icon name="more_horiz" isPresentational />,
   },
 } satisfies Meta<typeof IconButton>
 

package/src/__actions__/Button/v2/Button/_docs/Button.mdx

@@ -47,7 +47,7 @@ A disabled Button prevents user interaction. It doesn't appear in the tab order,
 
 Use any <LinkTo pageId="components-icons">Icon</LinkTo> component in the `icon` prop.
 
-<Canvas of={ButtonStories.Icon} />
+<Canvas of={ButtonStories.IconStory} />
 
 #### Icon position
 

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

@@ -1,12 +1,12 @@
 import React, { useState } from "react"
 import { StoryObj, Meta } from "@storybook/react"
-import { ArrowForwardIcon, ArrowRightIcon } from "~components/Icon"
 import { LoadingInput } from "~components/Loading"
 import { TextField } from "~components/TextField"
+import { Icon } from "~components/__future__/Icon"
 import { Button } from "../index"
 
 const meta = {
-  title: "Actions/Button/v2",
+  title: "Actions/Button/Button (v2)",
   component: Button,
   args: {
     label: "Label",
@@ -65,12 +65,13 @@ export const Disabled: Story = {
 const sourceCodeIcon = `
 import { Button, ArrowForwardIcon } from "@kaizen/components"
 
-<Button label="Label" icon={<ArrowForwardIcon role="presentation" />} />
+<Button label="Label" icon={<Icon name="arrow_forward" isPresentational shouldMirrorInRTL />} />
 `
 
-export const Icon: Story = {
+export const IconStory: Story = {
+  name: "Icon",
   args: {
-    icon: <ArrowForwardIcon role="presentation" />,
+    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
   },
   parameters: {
     docs: { source: { code: sourceCodeIcon } },
@@ -79,7 +80,7 @@ export const Icon: Story = {
 
 export const IconPosition: Story = {
   args: {
-    icon: <ArrowRightIcon role="presentation" />,
+    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
     iconPosition: "end",
   },
 }

package/src/__actions__/Button/v2/IconButton/_docs/IconButton.stories.tsx

@@ -1,24 +1,24 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { AddIcon, MeatballsIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { IconButton } from "../index"
 
 const meta = {
-  title: "Actions/IconButton/v2",
+  title: "Actions/IconButton/IconButton (v2)",
   component: IconButton,
   argTypes: {
     icon: {
       options: ["MeatballsIcon", "AddIcon"],
       control: { type: "radio" },
       mapping: {
-        MeatballsIcon: <MeatballsIcon role="presentation" />,
-        AddIcon: <AddIcon role="presentation" />,
+        MeatballsIcon: <Icon name="more_horiz" isPresentational />,
+        AddIcon: <Icon name="add" isPresentational />,
       },
     },
   },
   args: {
     label: "icon button",
-    icon: <MeatballsIcon role="presentation" />,
+    icon: <Icon name="more_horiz" isPresentational />,
   },
 } satisfies Meta<typeof IconButton>
 

package/src/__actions__/Button/v3/_docs/ApiSpecification.mdx

@@ -3,7 +3,7 @@ import { ResourceLinks, SbContent, KAIOInstallation } from "~storybook/component
 import * as docsStories from "./Button.docs.stories"
 import * as exampleStories from "./Button.stories"
 
-<Meta title="Actions/Button/v3/API Specification" />
+<Meta title="Actions/Button/Button (v3)/API Specification" />
 
 <SbContent>
   # Button API Specification (v3)

package/src/__actions__/Button/v3/_docs/Button.docs.stories.tsx

@@ -5,7 +5,7 @@ import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import { Button } from "../index"
 
 const meta = {
-  title: "Actions/Button/v3/Doc Assets",
+  title: "Actions/Button/Button (v3)/Doc Assets",
   component: Button,
   args: {
     children: "Label",

package/src/__actions__/Button/v3/_docs/Button.mdx

@@ -2,7 +2,7 @@ import { Canvas, Meta, Controls } from "@storybook/blocks"
 import { ResourceLinks, SbContent, Installation } from "~storybook/components"
 import * as Button from "./Button.stories"
 
-<Meta title="Actions/Button/v3/Usage Guidelines" />
+<Meta title="Actions/Button/Button (v3)/Usage Guidelines" />
 
 <SbContent>
   # Button (v3)

package/src/__actions__/Button/v3/_docs/Button.spec.stories.tsx

@@ -14,7 +14,7 @@ import { Button } from "../index"
 const onPressEvent = fn()
 
 const meta = {
-  title: "Actions/Button/v3/Tests",
+  title: "Actions/Button/Button (v3)/Tests",
   component: Button,
   args: {
     children: "Label",

package/src/__actions__/Button/v3/_docs/Button.stickersheet.stories.tsx

@@ -9,7 +9,7 @@ import {
 import { Button } from "../index"
 
 export default {
-  title: "Actions/Button/v3/Tests",
+  title: "Actions/Button/Button (v3)/Tests",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

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

@@ -6,7 +6,7 @@ import { VisuallyHidden } from "~components/VisuallyHidden"
 import { Button } from "../index"
 
 const meta = {
-  title: "Actions/Button/v3",
+  title: "Actions/Button/Button (v3)",
   component: Button,
   args: {
     children: "Label",

package/src/__actions__/Menu/v1/_docs/Menu.stickersheet.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { ChevronDownIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -30,7 +30,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               button={
                 <Button
                   label="Menu"
-                  icon={<ChevronDownIcon role="presentation" />}
+                  icon={<Icon name="keyboard_arrow_down" isPresentational />}
                   iconPosition="end"
                 />
               }
@@ -45,7 +45,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               button={
                 <Button
                   label="Menu"
-                  icon={<ChevronDownIcon role="presentation" />}
+                  icon={<Icon name="keyboard_arrow_down" isPresentational />}
                   iconPosition="end"
                 />
               }

package/src/__actions__/Menu/v1/_docs/Menu.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { ChevronDownIcon, DuplicateIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { Menu } from "../index"
 import { MenuHeading } from "../subcomponents/MenuHeading"
 import { MenuItem } from "../subcomponents/MenuItem"
@@ -14,7 +14,7 @@ const meta = {
     button: (
       <Button
         label="Actions"
-        icon={<ChevronDownIcon role="presentation" />}
+        icon={<Icon name="keyboard_arrow_down" isPresentational />}
         iconPosition="end"
       />
     ),
@@ -24,7 +24,7 @@ const meta = {
           onClick={() => {
             alert("Duplicated!")
           }}
-          icon={<DuplicateIcon role="presentation" />}
+          icon={<Icon name="content_copy" isPresentational isFilled />}
           label="Duplicate item"
         />
         <MenuList heading={<MenuHeading>Extra links</MenuHeading>}>

package/src/__actions__/Menu/v1/_docs/MenuContentExample.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { DuplicateIcon, EditIcon, TrashIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { MenuHeading } from "../subcomponents/MenuHeading"
 import { MenuItem } from "../subcomponents/MenuItem"
 import { MenuList } from "../subcomponents/MenuList"
@@ -34,7 +34,7 @@ export const MenuContentExample = ({
               alert("Hello")
               e.preventDefault()
             }}
-            icon={<EditIcon role="presentation" />}
+            icon={<Icon name="edit" isPresentational isFilled />}
             label="Menu button"
           />
           <MenuItem
@@ -46,7 +46,7 @@ export const MenuContentExample = ({
             ): void => {
               e.preventDefault()
             }}
-            icon={<DuplicateIcon role="presentation" />}
+            icon={<Icon name="content_copy" isPresentational isFilled />}
             label="Menu button but the label is too long"
           />
           <MenuItem
@@ -58,7 +58,7 @@ export const MenuContentExample = ({
             ): void => {
               e.preventDefault()
             }}
-            icon={<TrashIcon role="presentation" />}
+            icon={<Icon name="delete" isPresentational isFilled />}
             destructive
             label="Destructive Menu button"
           />
@@ -71,7 +71,7 @@ export const MenuContentExample = ({
             ): void => {
               e.preventDefault()
             }}
-            icon={<TrashIcon role="presentation" />}
+            icon={<Icon name="delete" isPresentational isFilled />}
             disabled
             label="Disabled Menu button"
           />
@@ -84,7 +84,7 @@ export const MenuContentExample = ({
             ): void => {
               e.preventDefault()
             }}
-            icon={<TrashIcon role="presentation" />}
+            icon={<Icon name="delete" isPresentational isFilled />}
             disabled
             destructive
             label="Disabled Destructive Menu button"

package/src/__actions__/Menu/v1/_docs/examples.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { action } from "@storybook/addon-actions"
-import { DuplicateIcon, EditIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { MenuItem, MenuList } from "../"
 
 export const exampleActionButtonPropsButton = {
@@ -16,12 +16,12 @@ export const exampleActionButtonPropsAnchor = {
 export const exampleDropdownContentEnabled = (
   <MenuList>
     <MenuItem
-      icon={<EditIcon role="presentation" />}
+      icon={<Icon name="edit" isPresentational isFilled />}
       label="Menu Item 1"
       onClick={action("clicked")}
     />
     <MenuItem
-      icon={<DuplicateIcon role="presentation" />}
+      icon={<Icon name="content_copy" isPresentational isFilled />}
       label="Menu Item 2"
     />
   </MenuList>
@@ -30,12 +30,12 @@ export const exampleDropdownContentEnabled = (
 export const exampleDropdownContentOneDisabled = (
   <MenuList>
     <MenuItem
-      icon={<EditIcon role="presentation" />}
+      icon={<Icon name="edit" isPresentational isFilled />}
       label="Menu Item 1"
       disabled
     />
     <MenuItem
-      icon={<DuplicateIcon role="presentation" />}
+      icon={<Icon name="content_copy" isPresentational isFilled />}
       label="Menu Item 2"
     />
   </MenuList>

package/src/__actions__/Menu/v2/_docs/Menu.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { ChevronDownIcon, DuplicateIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import * as MenuV1Stories from "../../v1/_docs/Menu.stories"
 import { Menu, MenuList, MenuItem, MenuHeading } from "../index"
 
@@ -12,7 +12,7 @@ const meta = {
     button: (
       <Button
         label="Actions"
-        icon={<ChevronDownIcon role="presentation" />}
+        icon={<Icon name="keyboard_arrow_down" isPresentational />}
         iconPosition="end"
       />
     ),
@@ -22,7 +22,7 @@ const meta = {
           onClick={() => {
             alert("Duplicated!")
           }}
-          icon={<DuplicateIcon role="presentation" />}
+          icon={<Icon name="content_copy" isPresentational isFilled />}
           label="Duplicate item"
         />
         <MenuList heading={<MenuHeading>Extra links</MenuHeading>}>