@kaizen/components 1.66.0 → 1.67.0

package/src/__future__/Icon/types.ts

@@ -0,0 +1,11 @@
+import iconsMetadata from "./material-symbols-metadata.json"
+
+// Icon names are from https://github.com/marella/material-symbols/blob/main/metadata/versions.json
+// Update `material-symbols-metadata.json` for new icons.
+// Last updated: 28 Aug 2024
+type MaterialIconNames = keyof typeof iconsMetadata
+
+// `auto_awesome` is not listed as part of Material Symbols, however is
+// available in Material Icons, which appears to still work.
+// https://fonts.google.com/icons?icon.query=auto+awesome&icon.set=Material+Icons&icon.size=20&icon.color=%23000000&selected=Material+Icons+Outlined:auto_awesome:
+export type IconNames = MaterialIconNames | "auto_awesome"

package/src/__future__/Select/subcomponents/Option/Option.tsx

@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from "react"
 import { FocusableElement } from "@react-types/shared"
 import classnames from "classnames"
 import { mergeProps, useFocusRing, useOption } from "react-aria"
-import { CheckIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { useSelectContext } from "../../context"
 import { SelectOption, SelectOptionNode } from "../../types"
@@ -56,7 +56,7 @@ export const Option = <Option extends SelectOption = SelectOption>({
       <span
         className={classnames(styles.icon, isSelected && styles.isSelected)}
       >
-        {isSelected && <CheckIcon inheritSize role="presentation" />}
+        {isSelected && <Icon name="check" isPresentational />}
       </span>
     </li>
   )

package/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.module.scss

@@ -9,7 +9,6 @@
 }
 
 .icon {
-  margin-inline-start: $spacing-12;
   color: $color-gray-500;
 }
 
@@ -145,4 +144,5 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-inline-end: var(--spacing-12);
 }

package/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.tsx

@@ -1,8 +1,8 @@
 import React, { HTMLAttributes } from "react"
 import { DOMAttributes, FocusableElement } from "@react-types/shared"
 import classnames from "classnames"
-import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import { Label } from "~components/Label"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./SelectToggle.module.scss"
 
@@ -69,14 +69,11 @@ export const SelectToggle = React.forwardRef<
         <span {...valueProps} className={styles.value}>
           {value ?? placeholder}
         </span>
-        {isOpen ? (
-          <ChevronUpIcon role="presentation" classNameOverride={styles.icon} />
-        ) : (
-          <ChevronDownIcon
-            role="presentation"
-            classNameOverride={styles.icon}
-          />
-        )}
+        <Icon
+          name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+          isPresentational
+          className={styles.icon}
+        />
       </button>
     </div>
   )

package/src/__future__/Tag/RemovableTag/_docs/RemovableTag.stories.tsx

@@ -1,6 +1,4 @@
 import { Meta, StoryObj } from "@storybook/react"
-// import { AcademyIcon, ActionOffIcon, AddIcon, TagIcon } from "~components/Icon"
-// import { TagColorKeys } from "../../Tag/types"
 import { RemovableTag } from "../RemovableTag"
 
 const meta = {
@@ -20,19 +18,6 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {
-  // This can be added when we add Icon support
-  // argTypes: {
-  // icon: {
-  // options: ["AcademyIcon", "ActionOffIcon", "AddIcon", "TagIcon"],
-  // control: { type: "radio" },
-  // mapping: {
-  // AcademyIcon: <AcademyIcon role="presentation" />,
-  // ActionOffIcon: <ActionOffIcon role="presentation" />,
-  // AddIcon: <AddIcon role="presentation" />,
-  // TagIcon: <TagIcon role="presentation" />,
-  // },
-  // },
-  // },
   parameters: {
     docs: {
       canvas: {
@@ -46,68 +31,6 @@ export const Children: Story = {
   args: { children: "This text is the children" },
 }
 
-// Colors and Icons may be added in at a later time.
-//
-// export const Color: Story = {
-// render: () => (
-// <>
-// {TagColorKeys.map(color => (
-// <RemovableTag
-// color={color}
-// icon={<TagIcon role="presentation" />}
-// key={color}
-// removeButtonProps={{
-// ariaLabel: "close",
-// onClick: () => alert("Clicked"),
-// }}
-// >
-// {color}
-// </RemovableTag>
-// ))}
-// </>
-// ),
-// parameters: {
-// docs: {
-// source: { type: "dynamic" },
-// },
-// },
-// }
-// export const Icon: Story = {
-// render: () => (
-// <>
-// <RemovableTag
-// icon={<AcademyIcon role="presentation" />}
-// removeButtonProps={{
-// ariaLabel: "close",
-// onClick: () => alert("Clicked"),
-// }}
-// >
-// AcademyIcon
-// </RemovableTag>
-// <RemovableTag
-/// / color="yellow"
-// icon={<ActionOffIcon role="presentation" />}
-// removeButtonProps={{
-// ariaLabel: "close",
-// onClick: () => alert("Clicked"),
-// }}
-// >
-// ActionOffIcon
-// </RemovableTag>
-// <RemovableTag
-/// / color="green"
-// icon={<AddIcon role="presentation" />}
-// removeButtonProps={{
-// ariaLabel: "close",
-// onClick: () => alert("Clicked"),
-// }}
-// >
-// AddIcon
-// </RemovableTag>
-// </>
-// ),
-// }
-
 export const ClassNameOverride: Story = {
   args: {
     classNameOverride: "border-red-500 border-solid border-",

package/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss

@@ -44,59 +44,3 @@
     color: $color-purple-800;
   }
 }
-
-// .gray {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-gray-600-rgb, 0.2);
-// }
-// }
-
-// .blue {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-blue-500-rgb, 0.3);
-// }
-// }
-
-// .green {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-green-500-rgb, 0.3);
-// }
-// }
-
-// .yellow {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-yellow-500-rgb, 0.5);
-// }
-// }
-
-// .orange {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-orange-500-rgb, 0.3);
-// }
-// }
-
-// .red {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-red-500-rgb, 0.3);
-// }
-// }
-
-// .purple {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-purple-500-rgb, 0.3);
-// }
-// }

package/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.tsx

@@ -1,20 +1,10 @@
 import React, { ButtonHTMLAttributes } from "react"
 import classnames from "classnames"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
-import { RemoveTagIcon } from "./RemoveTagIcon"
 import styles from "./RemoveButton.module.scss"
 
-// type RemoveButtonColor =
-// | "gray"
-// | "blue"
-// | "green"
-// | "yellow"
-// | "orange"
-// | "red"
-// | "purple"
-
 export type RemoveButtonBaseProps = {
-  // color?: RemoveButtonColor
   ariaLabel: string
   onClick: () => void
 }
@@ -37,7 +27,7 @@ export const RemoveButton = ({
     onClick={onClick}
     {...restProps}
   >
-    <RemoveTagIcon role="presentation" />
+    <Icon name="close" isPresentational />
   </button>
 )
 

package/src/__future__/Tag/Tag/Tag.module.scss

@@ -47,7 +47,7 @@
   color: $color-yellow-700;
 
   .iconContainer {
-    color: $color-yellow-500;
+    color: $color-yellow-700;
   }
 }
 

package/src/__future__/Tag/Tag/_docs/Tag-migration-guide.stories.tsx

@@ -2,14 +2,9 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
 import { Avatar } from "~components/Avatar"
-import {
-  CautionIcon,
-  ExclamationIcon,
-  InformationIcon,
-  SuccessIcon,
-  LiveIcon,
-} from "~components/Icon"
+import { LiveIcon } from "~components/Icon"
 import styles from "~components/Tag/Tag.module.scss"
+import { Icon } from "~components/__future__/Icon"
 import { Tag, RemovableTag } from "../.."
 
 const meta = {
@@ -148,25 +143,19 @@ export const ValidationMigration: StoryObj = {
     <>
       <Tag
         color="green"
-        icon={<SuccessIcon role="img" aria-label="Success," />}
+        icon={<Icon name="check_circle" isFilled alt="Success," />}
       >
         Tag
       </Tag>
-      <Tag
-        color="blue"
-        icon={<InformationIcon role="img" aria-label="Note," />}
-      >
+      <Tag color="blue" icon={<Icon name="info" isFilled alt="Note," />}>
         Tag
       </Tag>
-      <Tag
-        color="red"
-        icon={<ExclamationIcon role="img" aria-label="Error," />}
-      >
+      <Tag color="red" icon={<Icon name="error" isFilled alt="Error," />}>
         Tag
       </Tag>
       <Tag
         color="yellow"
-        icon={<CautionIcon role="img" aria-label="Warning," />}
+        icon={<Icon name="warning" isFilled alt="Warning," />}
       >
         Tag
       </Tag>

package/src/__future__/Tag/Tag/_docs/Tag.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { TagIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -26,7 +26,10 @@ const StickerSheetTemplate: StickerSheetStory = {
             <Tag color={color}>
               {color.charAt(0).toUpperCase() + color.slice(1)}
             </Tag>
-            <Tag icon={<TagIcon role="presentation" />} color={color}>
+            <Tag
+              icon={<Icon name="label" isPresentational isFilled />}
+              color={color}
+            >
               {color.charAt(0).toUpperCase() + color.slice(1)}
             </Tag>
           </StickerSheet.Row>

package/src/__future__/Tag/Tag/_docs/Tag.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { AcademyIcon, ActionOffIcon, AddIcon, TagIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { TagColorKeys } from "../types"
 import { Tag } from ".."
 
@@ -34,7 +34,11 @@ export const Color: StoryObj = {
   render: () => (
     <div className="flex gap-16">
       {TagColorKeys.map(color => (
-        <Tag color={color} icon={<TagIcon role="presentation" />} key={color}>
+        <Tag
+          color={color}
+          icon={<Icon name="label" isPresentational isFilled />}
+          key={color}
+        >
           {color}
         </Tag>
       ))}
@@ -47,14 +51,17 @@ export const Color: StoryObj = {
   },
 }
 
-export const Icon: StoryObj = {
+export const IconStory: StoryObj = {
+  name: "Icon",
   render: () => (
     <div className="flex gap-16">
-      <Tag icon={<AcademyIcon role="presentation" />}>AcademyIcon</Tag>
-      <Tag color="yellow" icon={<ActionOffIcon role="presentation" />}>
+      <Tag icon={<Icon name="school" isPresentational isFilled />}>
+        AcademyIcon
+      </Tag>
+      <Tag color="yellow" icon={<Icon name="flash_on" isPresentational />}>
         ActionOffIcon
       </Tag>
-      <Tag color="green" icon={<AddIcon role="presentation" />}>
+      <Tag color="green" icon={<Icon name="add" isPresentational />}>
         AddIcon
       </Tag>
     </div>

package/src/__future__/index.ts

@@ -1,3 +1,4 @@
+export * from "./Icon"
 export * from "./Select"
 export * from "./Tag"
 export * from "./Tabs"

package/src/__overlays__/Tooltip/v1/_docs/Tooltip.stickersheet.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { Decorator, Meta } from "@storybook/react"
 import isChromatic from "chromatic/isChromatic"
-import { MeatballsIcon } from "~components/Icon"
 import { IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -38,7 +38,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} position="above" text="Tooltip label">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -46,7 +46,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} position="below" text="Tooltip label">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -54,7 +54,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} position="left" text="Tooltip label">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -67,7 +67,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               >
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -90,7 +90,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="default">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -98,7 +98,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="informative">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -106,7 +106,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="positive">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -114,7 +114,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="highlight">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -122,7 +122,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="cautionary">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>

package/src/__overlays__/Tooltip/v1/_docs/Tooltip.stories.tsx

@@ -3,7 +3,6 @@ import { Meta, StoryObj } from "@storybook/react"
 import { ButtonGroup } from "~components/ButtonGroup"
 import { CheckboxField } from "~components/Checkbox"
 import { FilterButtonBase } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
-import { InformationIcon, RemoveLinkIcon, QuestionIcon } from "~components/Icon"
 import {
   TableContainer,
   TableHeader,
@@ -12,6 +11,7 @@ import {
 } from "~components/Table"
 import { Text } from "~components/Text"
 import { Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__"
 import { Tag } from "~components/__future__/Tag"
 import { Tooltip } from "../index"
 
@@ -106,7 +106,7 @@ export const OverflowScroll: Story = {
             }}
           >
             <Tooltip {...props} display="inline" text="Tooltip label">
-              <InformationIcon role="img" aria-label="Info" />
+              <Icon name="info" alt="Info" isFilled />
             </Tooltip>
           </div>
         </div>
@@ -159,12 +159,15 @@ export const ButtonsWithTooltip: Story = {
   render: args => (
     <>
       <Tooltip {...args} text="Contact customer support.">
-        <Button label="Help" icon={<QuestionIcon role="presentation" />} />
+        <Button
+          label="Help"
+          icon={<Icon name="help" isPresentational isFilled />}
+        />
       </Tooltip>
       <Tooltip {...args} text="Remove the link from current selection.">
         <IconButton
           label="Remove link"
-          icon={<RemoveLinkIcon role="presentation" />}
+          icon={<Icon name="link_off" isPresentational />}
         />
       </Tooltip>
     </>

package/src/__overlays__/Tooltip/v1/utils/isSemanticElement.spec.tsx

@@ -1,8 +1,9 @@
 import React from "react"
 import { vi } from "vitest"
-import { ArrowRightIcon } from "~components/Icon"
 import { Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__"
 import { isSemanticElement } from "./isSemanticElement"
+
 describe("isSemanticElement", () => {
   it("returns true if provided a native element with a semantic role", () => {
     expect(
@@ -48,15 +49,7 @@ describe("isSemanticElement", () => {
   })
 
   it("returns false if provided an element using a role 'presentation' or 'none'", () => {
-    expect(isSemanticElement(<ArrowRightIcon role="presentation" />)).toBe(
-      false
-    )
-    expect(
-      isSemanticElement(
-        <span role="none">
-          <ArrowRightIcon role="presentation" />
-        </span>
-      )
-    ).toBe(false)
+    expect(isSemanticElement(<Icon name="add" isPresentational />)).toBe(false)
+    expect(isSemanticElement(<span role="none">Hello</span>)).toBe(false)
   })
 })

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.docs.stories.tsx

@@ -2,11 +2,11 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { FieldMessage } from "~components/FieldMessage"
-import { AddIcon, QuestionIcon } from "~components/Icon"
 import { Input } from "~components/Input"
 import { Label } from "~components/Label"
 import { Text } from "~components/Text"
 import { Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { Focusable } from "~components/__overlays__/v3"
 import { Tooltip, TooltipTrigger } from "../index"
 import * as TestStories from "./Tooltip.spec.stories"
@@ -49,7 +49,7 @@ export const Primary: Story = {
     <TooltipTrigger>
       <IconButton
         label="Add something"
-        icon={<AddIcon role="presentation" />}
+        icon={<Icon name="add" isPresentational />}
         primary
         // Negate the aria description (added by RAC) as it should be the
         // same as the accessible name, therefore no need to duplicate it
@@ -86,12 +86,12 @@ export const DontFieldTooltip: Story = {
         <Focusable>
           <Label>
             Password{" "}
-            <span className="inline-flex align-middle">
-              <QuestionIcon
-                classNameOverride="w-[15px] m-auto"
-                role="presentation"
-              />
-            </span>
+            <Icon
+              name="help"
+              isPresentational
+              isFilled
+              className="text-paragraph"
+            />
           </Label>
         </Focusable>
         <Tooltip>Password must be at least 8 characters</Tooltip>
@@ -114,7 +114,7 @@ export const DoConcise: Story = {
       <TooltipTrigger>
         <IconButton
           label="Add topic"
-          icon={<AddIcon role="presentation" />}
+          icon={<Icon name="add" isPresentational />}
           primary
           // Negate the aria description (added by RAC) as it should be the
           // same as the accessible name, therefore no need to duplicate it
@@ -137,7 +137,7 @@ export const DontConcise: Story = {
       <TooltipTrigger>
         <IconButton
           label="Add something"
-          icon={<AddIcon role="presentation" />}
+          icon={<Icon name="add" isPresentational />}
           primary
           // Negate the aria description (added by RAC) as it should be the
           // same as the accessible name, therefore no need to duplicate it

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.spec.stories.tsx

@@ -2,10 +2,10 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { expect, userEvent, waitFor, within } from "@storybook/test"
 import isChromatic from "chromatic"
-import { AddIcon } from "~components/Icon"
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "~components/Tabs"
 import { Text } from "~components/Text"
 import { Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { Tag } from "~components/__future__/Tag"
 import { Focusable } from "~components/__overlays__/v3"
 import { Tooltip, TooltipTrigger } from "../index"
@@ -87,7 +87,7 @@ export const OnButtonWithDesc: Story = {
       <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
         <IconButton
           label="(TESTING) Add label"
-          icon={<AddIcon role="presentation" />}
+          icon={<Icon name="add" isPresentational />}
           primary
           aria-describedby="blah"
         />
@@ -105,7 +105,7 @@ export const OnIconButton: Story = {
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
       <IconButton
         label="Add something"
-        icon={<AddIcon role="presentation" />}
+        icon={<Icon name="add" isPresentational />}
         primary
         // Negate the aria description (added by RAC) as it should be the
         // same as the accessible name, therefore no need to duplicate it

package/codemods/utils/getTagName.spec.ts

@@ -1,24 +0,0 @@
-import { parseJsx } from "../__tests__/utils"
-import { getTagName } from "./getTagName"
-
-describe("getTagName", () => {
-  it("returns the import name if it matches the target specifier", () => {
-    const input = parseJsx('import { Well } from "@kaizen/components"')
-    const tagName = getTagName(input, "Well")
-    expect(tagName).toBe("Well")
-  })
-
-  it("returns the import alias if it matches the target specifier", () => {
-    const input = parseJsx(
-      'import { Well as KaizenWell } from "@kaizen/components"'
-    )
-    const tagName = getTagName(input, "Well")
-    expect(tagName).toBe("KaizenWell")
-  })
-
-  it("returns undefined if there is no match to the target specifier", () => {
-    const input = parseJsx('import { Well } from "@kaizen/well"')
-    const tagName = getTagName(input, "Well")
-    expect(tagName).toBe(undefined)
-  })
-})