@kaizen/components 1.66.1 → 1.67.0

package/dist/types/__future__/Icon/Icon.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from "react";
+import { StringSuggestions } from "../../types/StringSuggestions";
+import { IconNames } from "./types";
+type PresentationalIcon = {
+    isPresentational: true;
+    alt?: never;
+};
+type MeaningfulIcon = {
+    isPresentational?: false;
+    alt: string;
+};
+type BaseIconProps = {
+    isFilled?: boolean;
+} & HTMLAttributes<HTMLSpanElement> & (PresentationalIcon | MeaningfulIcon);
+export type IconProps = BaseIconProps & {
+    /** Options available at https://fonts.google.com/icons */
+    name: StringSuggestions<IconNames>;
+    shouldMirrorInRTL?: boolean;
+};
+export declare const Icon: ({ name, shouldMirrorInRTL, ...restProps }: IconProps) => JSX.Element;
+export {};

package/dist/types/__future__/Icon/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const handledRtlIcons: {
+    checklist: "checklist_rtl";
+    format_list_numbered: "format_list_numbered_rtl";
+};
+export declare const iconDefaultSet: ("add" | "add_a_photo" | "add_comment" | "add_link" | "arrow_back" | "arrow_downward" | "arrow_drop_down" | "arrow_drop_up" | "arrow_forward" | "arrow_upward" | "assignment" | "assignment_add" | "assignment_ind" | "assignment_returned" | "assignment_turned_in" | "backup" | "bar_chart" | "bookmark" | "brush" | "build" | "cached" | "cancel" | "chat_apps_script" | "chat_error" | "chat_paste_go" | "check" | "check_circle" | "chevron_left" | "chevron_right" | "close" | "close_fullscreen" | "cloud_download" | "comment_bank" | "content_copy" | "dashboard" | "date_range" | "delete" | "domain" | "draft" | "drag_indicator" | "edit" | "error" | "event" | "favorite" | "find_in_page" | "flag" | "flash_on" | "format_bold" | "format_indent_decrease" | "format_indent_increase" | "format_italic" | "format_list_bulleted" | "format_list_numbered" | "format_underlined" | "forum" | "forward" | "front_hand" | "grade" | "group" | "groups" | "help" | "history" | "home" | "horizontal_rule" | "info" | "key" | "keyboard_arrow_down" | "keyboard_arrow_up" | "keyboard_tab" | "keyboard_tab_rtl" | "label" | "lan" | "lightbulb" | "link_off" | "list" | "local_fire_department" | "lock" | "logout" | "mail" | "manage_accounts" | "menu" | "mms" | "more_horiz" | "more_vert" | "north_east" | "note_alt" | "notifications_active" | "open_in_full" | "open_in_new" | "pause" | "percent" | "person" | "person_add" | "person_cancel" | "person_check" | "play_circle" | "playlist_add_check" | "potted_plant" | "power" | "power_settings_new" | "print" | "privacy_tip" | "psychology_alt" | "radio_button_checked" | "radio_button_unchecked" | "rate_review" | "redo" | "reduce_capacity" | "refresh" | "remove" | "reviews" | "schedule" | "school" | "search" | "send" | "sensors" | "sentiment_dissatisfied" | "sentiment_neutral" | "sentiment_satisfied" | "sentiment_very_satisfied" | "settings" | "sms" | "south_east" | "star" | "support" | "thumb_down" | "thumb_up" | "today" | "translate" | "tune" | "undo" | "user_attributes" | "visibility" | "visibility_off" | "warning" | "zoom_in" | "zoom_out" | "auto_awesome")[];

package/dist/types/__future__/Icon/index.d.ts

@@ -0,0 +1 @@
+export * from "./Icon";

package/dist/types/__future__/Icon/types.d.ts

@@ -0,0 +1,4 @@
+import iconsMetadata from "./material-symbols-metadata.json";
+type MaterialIconNames = keyof typeof iconsMetadata;
+export type IconNames = MaterialIconNames | "auto_awesome";
+export {};

package/dist/types/__future__/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.66.1",
+  "version": "1.67.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -119,7 +119,7 @@
     "svgo": "^3.3.2",
     "tslib": "^2.7.0",
     "tsx": "^4.19.1",
-    "@kaizen/design-tokens": "10.7.0",
+    "@kaizen/design-tokens": "10.8.0",
     "@kaizen/package-bundler": "1.1.7"
   },
   "peerDependencies": {

package/src/Avatar/Avatar.module.scss

@@ -106,28 +106,26 @@ $avatar-xxl: 7.75rem;
 
 .fallbackIcon {
   color: rgba($color-purple-800-rgb, 0.7);
-  width: 28px;
+  font-size: var(--avatar-fallback-icon-size);
 
   .xxlarge & {
-    width: 75px;
+    --avatar-fallback-icon-size: calc(#{$avatar-xxl} * 0.8);
   }
 
   .xlarge & {
-    width: 60px;
+    --avatar-fallback-icon-size: calc(#{$avatar-xl} * 0.8);
   }
 
   .large & {
-    width: 35px;
+    --avatar-fallback-icon-size: calc(#{$avatar-lg} * 0.7);
   }
 
   .medium & {
-    width: 25px;
-    margin-bottom: -1px;
+    --avatar-fallback-icon-size: calc(#{$avatar-md} * 0.7);
   }
 
   .small & {
-    width: 10px;
-    margin-bottom: -1px;
+    --avatar-fallback-icon-size: calc(#{$avatar-sm} * 0.7);
   }
 }
 

package/src/Avatar/Avatar.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, HTMLAttributes } from "react"
 import classnames from "classnames"
 import { Textfit } from "react-textfit"
-import { UserIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Avatar.module.scss"
 
@@ -76,12 +76,21 @@ const getMaxFontSizePixels: (size: AvatarSizes) => number = size => {
   return 22
 }
 
-const fallbackIcon = (alt: string): JSX.Element => {
+const FallbackIcon = ({ alt }: { alt: string }): JSX.Element => {
   if (alt) {
-    return <UserIcon inheritSize role="img" aria-label={alt} />
+    return (
+      <Icon name="person" alt={alt} isFilled className={styles.fallbackIcon} />
+    )
   }
 
-  return <UserIcon inheritSize role="presentation" />
+  return (
+    <Icon
+      name="person"
+      isPresentational
+      isFilled
+      className={styles.fallbackIcon}
+    />
+  )
 }
 
 const renderInitials = (
@@ -95,7 +104,7 @@ const renderInitials = (
   const renderFallback = disableInitials || initials === ""
 
   return renderFallback ? (
-    <span className={styles.fallbackIcon}>{fallbackIcon(alt)}</span>
+    <FallbackIcon alt={alt} />
   ) : (
     <abbr
       className={classnames(styles.initials, isLongName && styles.longName)}

package/src/BrandMoment/_docs/BrandMoment.stories.tsx

@@ -2,11 +2,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
-import {
-  ArrowRightIcon,
-  EmailIcon,
-  FeedbackClassifyIcon,
-} from "~components/Icon"
 import {
   BrandMomentCaptureIntro,
   BrandMomentPositiveOutro,
@@ -14,6 +9,7 @@ import {
   AnimatedSceneProps,
 } from "~components/Illustration"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { BrandMoment } from "../index"
 import {
   MinimalBasic,
@@ -65,7 +61,7 @@ export const Informative: Story = {
     primaryAction: {
       label: "Get started",
       href: "#",
-      icon: <ArrowRightIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     },
   },
@@ -98,12 +94,12 @@ export const Success: Story = {
     primaryAction: {
       label: "Go to Home",
       href: "#",
-      icon: <ArrowRightIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     },
     secondaryAction: {
       label: "Rate this survey",
-      icon: <FeedbackClassifyIcon role="presentation" />,
+      icon: <Icon name="reviews" isPresentational isFilled />,
     },
   },
 }
@@ -132,12 +128,12 @@ export const Warning: Story = {
     primaryAction: {
       label: "Go to Home",
       href: "#",
-      icon: <ArrowRightIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     },
     secondaryAction: {
       label: "Contact support",
-      icon: <EmailIcon role="presentation" />,
+      icon: <Icon name="mail" isPresentational isFilled />,
     },
   },
 }

package/src/BrandMoment/_docs/ExampleHeaders.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { CloseIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { assetUrl } from "~components/utils/hostedAssets"
 import styles from "./ExampleHeaders.module.scss"
 
@@ -18,7 +18,7 @@ export const MinimalBasic = (): JSX.Element => (
       <Button
         href="#"
         label="Exit"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         secondary
       />
       <div className={styles.logoContainer}>

package/src/Calendar/CalendarRange/CalendarRange.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react"
 import { enAU } from "date-fns/locale"
 import { DayPicker, DayPickerRangeProps } from "react-day-picker"
-import { ArrowBackwardIcon, ArrowForwardIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { baseCalendarClassNames } from "../baseCalendarClassNames"
 import { isInvalidDate } from "../utils"
@@ -55,8 +55,12 @@ export const CalendarRange = ({
         defaultMonth={selectedMonth}
         classNames={classNames}
         components={{
-          IconRight: () => <ArrowForwardIcon role="presentation" />,
-          IconLeft: () => <ArrowBackwardIcon role="presentation" />,
+          IconRight: () => (
+            <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+          ),
+          IconLeft: () => (
+            <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+          ),
         }}
         numberOfMonths={2}
         locale={locale}

package/src/Calendar/CalendarSingle/CalendarSingle.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react"
 import { enAU } from "date-fns/locale"
 import { DayPicker, DayPickerSingleProps } from "react-day-picker"
-import { ArrowBackwardIcon, ArrowForwardIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { baseCalendarClassNames } from "../baseCalendarClassNames"
 import { isInvalidDate, isValidWeekStartsOn } from "../utils"
@@ -53,8 +53,12 @@ export const CalendarSingle = ({
         }
         classNames={classNames}
         components={{
-          IconRight: () => <ArrowForwardIcon role="presentation" />,
-          IconLeft: () => <ArrowBackwardIcon role="presentation" />,
+          IconRight: () => (
+            <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+          ),
+          IconLeft: () => (
+            <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+          ),
         }}
         locale={locale}
         {...restProps}

package/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx

@@ -7,7 +7,7 @@ import {
   Matcher,
   DayPickerRangeProps,
 } from "react-day-picker"
-import { ArrowBackwardIcon, ArrowForwardIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { baseCalendarClassNames } from "../baseCalendarClassNames"
 import { DayOfWeek } from "../enums"
 import { isInvalidDate, isValidWeekStartsOn } from "../utils"
@@ -62,8 +62,12 @@ export const LegacyCalendarRange = ({
         onDayClick={onDayChange}
         classNames={classNames}
         components={{
-          IconRight: () => <ArrowForwardIcon role="presentation" />,
-          IconLeft: () => <ArrowBackwardIcon role="presentation" />,
+          IconRight: () => (
+            <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+          ),
+          IconLeft: () => (
+            <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+          ),
         }}
         locale={locale}
       />

package/src/Calendar/baseCalendarClassNames.module.scss

@@ -99,10 +99,6 @@ $rdp-cell-size: 40px;
     background-color: $color-blue-100;
     color: $color-blue-500;
   }
-
-  [dir="rtl"] & {
-    transform: scale(-1, 1);
-  }
 }
 
 .table {

package/src/Checkbox/Checkbox/Checkbox.module.scss

@@ -4,7 +4,6 @@
 @import "../../../styles/utils/form-variables";
 
 $checkbox-size: 24px;
-$icon-size: 24px;
 $focus-ring-offset: 2px;
 
 $dt-color-checkbox-background-color-checked: $color-gray-500;
@@ -23,14 +22,7 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
 }
 
 .icon {
-  height: $checkbox-size;
-  width: $checkbox-size;
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  // .icon is inside .box so .box's border-box rule means
-  // .icon sits to the right of .box's left-side border
-  left: calc(-1 * #{$border-solid-border-width});
   color: $color-white;
 }
 

package/src/Checkbox/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React, { 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"
 
@@ -22,13 +22,11 @@ const renderCheckOrMixedIcon = (
   if (status === "off") return
 
   return (
-    <span className={classnames(styles.icon, reversed && styles.reversed)}>
-      {status === "on" ? (
-        <CheckIcon role="presentation" inheritSize />
-      ) : (
-        <MinusIcon role="presentation" inheritSize />
-      )}
-    </span>
+    <Icon
+      name={status === "on" ? "check" : "remove"}
+      isPresentational
+      className={classnames(styles.icon, reversed && styles.reversed)}
+    />
   )
 }
 

package/src/ClearButton/ClearButton.tsx

@@ -1,6 +1,6 @@
 import React, { ButtonHTMLAttributes } from "react"
 import classnames from "classnames"
-import { ClearIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./ClearButton.module.scss"
 
@@ -23,7 +23,7 @@ export const ClearButton = ({
     )}
     {...restProps}
   >
-    <ClearIcon role="presentation" />
+    <Icon name="cancel" isPresentational isFilled />
   </button>
 )
 

package/src/Collapsible/Collapsible/Collapsible.tsx

@@ -2,8 +2,8 @@ import React, { HTMLAttributes, useId, useState } from "react"
 import classnames from "classnames"
 import AnimateHeight from "react-animate-height"
 import { Heading } from "~components/Heading"
-import { ChevronUpIcon, ChevronDownIcon } from "~components/Icon"
 import { IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { Sticky } from "../types"
 import styles from "./Collapsible.module.scss"
@@ -117,11 +117,10 @@ export const Collapsible = ({
           <IconButton
             label={title}
             icon={
-              isOpen ? (
-                <ChevronUpIcon role="presentation" />
-              ) : (
-                <ChevronDownIcon role="presentation" />
-              )
+              <Icon
+                name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+                isPresentational
+              />
             }
             type="button"
             aria-expanded={isOpen}

package/src/Collapsible/Collapsible/_docs/Collapsible.stories.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { Heading } from "~components/Heading"
-import { AddIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { Collapsible } from "../index"
 
 const meta = {
@@ -76,7 +76,7 @@ export const CustomHeader: Story = {
       renderHeader={title => (
         <Heading variant="heading-4" tag="span">
           <span className="flex gap-8 items-center">
-            <AddIcon role="presentation" /> {title}
+            <Icon name="potted_plant" isPresentational /> {title}
           </span>
         </Heading>
       )}

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss

@@ -9,8 +9,8 @@ $input-disabled-opacity: 0.3;
 .iconButton {
   @include button-reset;
 
-  display: inherit;
-  padding: 0.25rem $spacing-xs;
+  display: flex;
+  padding: var(--spacing-6);
   border: $border-solid-border-width $border-solid-border-style transparent;
   border-radius: $border-solid-border-radius;
   position: relative;
@@ -35,11 +35,6 @@ $input-disabled-opacity: 0.3;
     background-color: $color-blue-100;
     color: $color-blue-500;
   }
-
-  svg {
-    position: relative;
-    top: 2px;
-  }
 }
 
 .calendarActive {

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import classnames from "classnames"
-import { DateStartIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { isRefObject } from "~components/utils/isRefObject"
 import { DateInput, DateInputProps } from "../DateInput"
 import styles from "./DateInputWithIconButton.module.scss"
@@ -39,7 +39,7 @@ export const DateInputWithIconButton = React.forwardRef<
         disabled && styles.disabled
       )}
     >
-      <DateStartIcon role="presentation" />
+      <Icon name="today" isPresentational isFilled />
     </button>
   )
 

package/src/DateRangePicker/DateRangePicker.tsx

@@ -13,9 +13,9 @@ import {
   LegacyCalendarRange,
   LegacyCalendarRangeProps,
 } from "~components/Calendar/LegacyCalendarRange"
-import { DateStartIcon } from "~components/Icon"
 import { Label } from "~components/Label"
 import { VisuallyHidden } from "~components/VisuallyHidden"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./DateRangePicker.module.scss"
 
 export type DateRangePickerProps = {
@@ -168,7 +168,7 @@ export const DateRangePicker = ({
           {...inputProps}
         >
           <div className={styles.startIconAdornment}>
-            <DateStartIcon role="presentation" />
+            <Icon name="today" isPresentational isFilled />
           </div>
           <span className={styles.value}>
             {selectedDateRange?.from ? value : undefined}

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

@@ -1,8 +1,8 @@
 import React from "react"
 import { Meta } from "@storybook/react"
 import isChromatic from "chromatic"
-import { ChevronRightIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -85,7 +85,13 @@ const StickerSheetTemplate: StickerSheetStory = {
                 >
                   <Button
                     label="Label"
-                    icon={<ChevronRightIcon role="presentation" />}
+                    icon={
+                      <Icon
+                        name="chevron_right"
+                        isPresentational
+                        shouldMirrorInRTL
+                      />
+                    }
                     iconPosition="end"
                   />
                 </EmptyStateWrapper>

package/src/EmptyState/_docs/EmptyState.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { ChevronRightIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { EmptyState } from "../index"
 
 const meta = {
@@ -17,7 +17,9 @@ const meta = {
         "Button (chevron right)": (
           <Button
             label="Label"
-            icon={<ChevronRightIcon role="presentation" />}
+            icon={
+              <Icon name="chevron_right" isPresentational shouldMirrorInRTL />
+            }
             iconPosition="end"
           />
         ),

package/src/ErrorPage/ErrorPage.tsx

@@ -2,9 +2,9 @@ import React, { HTMLAttributes } from "react"
 import { FormattedMessage, useIntl } from "@cultureamp/i18n-react-intl"
 import classNames from "classnames"
 import { BrandMoment } from "~components/BrandMoment"
-import { ArrowRightIcon, EmailIcon } from "~components/Icon"
 import { BrandMomentError } from "~components/Illustration"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { ErrorStatuses, useErrorMessages } from "./hooks"
 import styles from "./ErrorPage.module.scss"
@@ -67,7 +67,9 @@ export const ErrorPage = ({
         variant="warning"
         primaryAction={{
           ...actions.primary,
-          icon: <ArrowRightIcon role="presentation" />,
+          icon: (
+            <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+          ),
           iconPosition: "end",
           label: formatMessage({
             id: "kzErrorPage.goToHome",
@@ -77,7 +79,7 @@ export const ErrorPage = ({
         }}
         secondaryAction={{
           ...actions.secondary,
-          icon: <EmailIcon role="presentation" />,
+          icon: <Icon name="mail" isPresentational isFilled />,
           label: formatMessage({
             id: "kzErrorPage",
             defaultMessage: "Contact support",

package/src/FieldMessage/FieldMessage.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { CautionWhiteIcon, ExclamationWhiteIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./FieldMessage.module.scss"
 
@@ -45,19 +45,11 @@ export const FieldMessage = ({
     >
       {(status === "error" || status === "caution") && (
         <span className={styles.warningIcon}>
-          {status === "error" ? (
-            <ExclamationWhiteIcon
-              role="img"
-              inheritSize={false}
-              aria-label={`${status} message`}
-            />
-          ) : (
-            <CautionWhiteIcon
-              role="img"
-              inheritSize={false}
-              aria-label={`${status} message`}
-            />
-          )}
+          <Icon
+            name={status === "error" ? "error" : "warning"}
+            isFilled
+            alt={`${status} message`}
+          />
         </span>
       )}
       <div className={styles.message}>