@kaizen/components 1.57.1 → 1.58.0

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

@@ -4,15 +4,18 @@ 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 } from "~components/Notification/types"
+import {
+  NotificationType,
+  NotificationVariant,
+} from "~components/Notification/types"
 
-export type NotificationIconProps = {
+export type NotificationIconTypeProps = {
   type: NotificationType
 }
 
-export const NotificationIcon = ({
+export const NotificationIconType = ({
   type,
-}: NotificationIconProps): JSX.Element => {
+}: NotificationIconTypeProps): JSX.Element => {
   switch (type) {
     case "positive":
       return <SuccessIcon role="presentation" inheritSize />
@@ -29,4 +32,27 @@ export const NotificationIcon = ({
   }
 }
 
-NotificationIcon.displayName = "NotificationIcon"
+NotificationIconType.displayName = "NotificationIconType"
+
+export type NotificationIconVariantProps = {
+  variant: NotificationVariant
+}
+
+export const NotificationIconVariant = ({
+  variant,
+}: NotificationIconVariantProps): JSX.Element => {
+  switch (variant) {
+    case "success":
+      return <SuccessIcon role="presentation" inheritSize />
+    case "warning":
+      return <ExclamationIcon role="presentation" inheritSize />
+    case "cautionary":
+      return <CautionIcon role="presentation" inheritSize />
+    case "informative":
+      return <InformationIcon role="presentation" inheritSize />
+    case "security":
+      return <SecurityTipIcon role="presentation" inheritSize />
+  }
+}
+
+NotificationIconVariant.displayName = "NotificationIconVariant"

package/src/Notification/types.ts

@@ -1,6 +1,13 @@
 export type NotificationType =
-  | "positive"
-  | "informative"
   | "cautionary"
+  | "informative"
   | "negative"
+  | "positive"
+  | "security"
+
+export type NotificationVariant =
+  | "cautionary"
+  | "informative"
+  | "success"
   | "security"
+  | "warning"

package/src/ProgressBar/ProgressBar.module.scss

@@ -3,10 +3,6 @@
 
 $height: 10px;
 
-@mixin animation-background($color) {
-  background: linear-gradient(90deg, transparent, #{$color} 75%, transparent);
-}
-
 .subtext {
   color: $color-purple-800;
   padding-top: $spacing-6;
@@ -39,43 +35,59 @@ $height: 10px;
   border-radius: $height;
   overflow: hidden;
   transition: transform 200ms ease;
+  background-color: var(--progressbar-background-color);
 }
 
+// ------------------------------
+// Moods
+// @deprecated use colors instead
+// ------------------------------
 .positive {
-  composes: progress;
-  background: $color-green-400;
-
-  &::after {
-    @include animation-background($color-green-300);
-  }
+  --progressbar-background-color: var(--color-green-400);
 }
 
 .informative {
-  composes: progress;
-  background: $color-blue-400;
-
-  &::after {
-    @include animation-background($color-blue-300);
-  }
+  --progressbar-background-color: var(--color-blue-400);
 }
 
 .cautionary {
-  composes: progress;
-  background: $color-yellow-400;
-
-  &::after {
-    @include animation-background($color-yellow-300);
-  }
+  --progressbar-background-color: var(--color-yellow-400);
 }
 
 .negative {
-  composes: progress;
-  background: $color-red-400;
+  --progressbar-background-color: var(--color-red-400);
+}
+
+// End deprecated styles
+
+// ------------------------------
+// Colors
+// ------------------------------
+.blue {
+  --progressbar-background-color: var(--color-blue-400);
+}
+
+.green {
+  --progressbar-background-color: var(--color-green-400);
+}
+
+.red {
+  --progressbar-background-color: var(--color-red-400);
+}
+
+.yellow {
+  --progressbar-background-color: var(--color-yellow-400);
 }
 
 .isAnimating {
   &::after {
-    opacity: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-white) 75%,
+      transparent
+    );
+    opacity: 25%;
     content: "";
     position: absolute;
     top: 0;

package/src/ProgressBar/ProgressBar.tsx

@@ -6,20 +6,43 @@ import { Label } from "./subcomponents/Label"
 import { calculatePercentage } from "./utils/calculatePercentage"
 import styles from "./ProgressBar.module.scss"
 
-export type ProgressBarProps = {
+export type ProgressBarMood = {
+  /**
+   * @deprecated Use `color` prop instead
+   */
+  mood: "positive" | "informative" | "negative" | "cautionary"
+  color?: never
+}
+
+export type ProgressBarColor = {
+  /**
+   * @deprecated Use `color` prop instead
+   */
+  mood?: never
+  /**
+   * If transitioning from `mood`:
+   * - `cautionary` -> `yellow`
+   * - `informative` -> `blue`
+   * - `negative` -> `red`
+   * - `positive` -> `green`
+   */
+  color: "blue" | "green" | "red" | "yellow"
+}
+
+export type ProgressBarBaseProps = {
   /** A value that represents completed progress */
   value: number
   /** A value that sets the maximum progress that can be achieved */
   max: number
   /** Adds an animated state to indicate loading progress */
   isAnimating: boolean
-  mood: Mood
   subtext?: string
   label?: string
   isReversed: boolean
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "color">>
 
-type Mood = "positive" | "informative" | "negative" | "cautionary"
+export type ProgressBarProps = ProgressBarBaseProps &
+  (ProgressBarMood | ProgressBarColor)
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896891/Progress+Bar Guidance} |
@@ -30,6 +53,7 @@ export const ProgressBar = ({
   max,
   isAnimating,
   mood,
+  color,
   subtext,
   label,
   classNameOverride,
@@ -50,7 +74,8 @@ export const ProgressBar = ({
       <div className={styles.progressBackground}>
         <div
           className={classnames(
-            styles[mood],
+            styles.progress,
+            color ? styles[color] : styles[mood],
             isAnimating && styles.isAnimating
           )}
           style={{ transform: `translateX(-${100 - percentage}%` }}

package/src/ProgressBar/_docs/ProgressBar.mdx

@@ -1,6 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
 import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as ProgressBarStickersheetStories from "./ProgressBar.stickersheet.stories"
 import * as ProgressBarStories from "./ProgressBar.stories"
 
 <Meta of={ProgressBarStories} />
@@ -31,9 +30,9 @@ Adds an animated state that indicates system processes, such as downloading, upl
 
 <Canvas of={ProgressBarStories.IsAnimating} />
 
-### Moods
+### Colors
 
-<Canvas of={ProgressBarStickersheetStories.StickerSheetDefault} />
+<Canvas of={ProgressBarStories.Colors} />
 
 ### Value and max
 

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

@@ -1,10 +1,11 @@
 import React from "react"
 import { Meta } from "@storybook/react"
+import isChromatic from "chromatic"
 import {
   StickerSheet,
   StickerSheetStory,
 } from "~storybook/components/StickerSheet"
-import { ProgressBar } from "../index"
+import { ProgressBar, ProgressBarProps } from "../index"
 
 export default {
   title: "Components/ProgressBar",
@@ -25,57 +26,100 @@ export default {
   },
 } satisfies Meta
 
+const isNotChromatic = !isChromatic()
+
+const moods = [
+  {
+    title: "Positive",
+    props: { mood: "positive" },
+  },
+  {
+    title: "Informative",
+    props: { mood: "informative" },
+  },
+  {
+    title: "Negative",
+    props: { mood: "negative" },
+  },
+  {
+    title: "Cautionary",
+    props: { mood: "cautionary" },
+  },
+] satisfies Array<{ title: string; props: Partial<ProgressBarProps> }>
+
+const colors = [
+  {
+    title: "Blue",
+    props: { color: "blue" },
+  },
+  {
+    title: "Green",
+    props: { color: "green" },
+  },
+  {
+    title: "Red",
+    props: { color: "red" },
+  },
+  {
+    title: "Yellow",
+    props: { color: "yellow" },
+  },
+  {
+    title: "Green (Animated)",
+    props: { color: "green", isAnimating: isNotChromatic },
+  },
+] satisfies Array<{ title: string; props: Partial<ProgressBarProps> }>
+
 const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed = false }) => (
-    <StickerSheet className="w-full" isReversed={isReversed}>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Positive" rowTitleWidth="100px">
-          <ProgressBar
-            value={25}
-            max={100}
-            mood="positive"
-            isAnimating={false}
-            label="25%"
-            subtext="Subtext"
-            isReversed={isReversed}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Informative">
-          <ProgressBar
-            value={25}
-            max={100}
-            mood="informative"
-            isAnimating={false}
-            label="25%"
-            subtext="Subtext"
-            isReversed={isReversed}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Negative">
-          <ProgressBar
-            value={25}
-            max={100}
-            mood="negative"
-            isAnimating={false}
-            label="25%"
-            subtext="Subtext"
-            isReversed={isReversed}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Cautionary">
-          <ProgressBar
-            value={25}
-            max={100}
-            mood="cautionary"
-            isAnimating={false}
-            label="25%"
-            subtext="Subtext"
-            isReversed={isReversed}
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
-    </StickerSheet>
-  ),
+  render: ({ isReversed = false }) => {
+    const defaultProps = {
+      label: "25%",
+      value: 25,
+      max: 100,
+      isAnimating: false,
+      isReversed,
+      subtext: "Subtext",
+    }
+
+    return (
+      <>
+        <StickerSheet
+          className="w-full"
+          heading="ProgressBar"
+          isReversed={isReversed}
+        >
+          <StickerSheet.Body>
+            {colors.map(({ title, props }) => (
+              <StickerSheet.Row
+                key={title}
+                rowTitle={title}
+                rowTitleWidth="100px"
+              >
+                <ProgressBar {...defaultProps} {...props} />
+              </StickerSheet.Row>
+            ))}
+          </StickerSheet.Body>
+        </StickerSheet>
+        <StickerSheet
+          className="w-full"
+          heading="ProgressBar Moods (deprecated)"
+          isReversed={isReversed}
+        >
+          <StickerSheet.Body>
+            {moods.map(({ title, props }) => (
+              <StickerSheet.Row
+                key={title}
+                rowTitle={title}
+                rowTitleWidth="100px"
+              >
+                <ProgressBar {...defaultProps} {...props} />
+              </StickerSheet.Row>
+            ))}
+          </StickerSheet.Body>
+        </StickerSheet>
+      </>
+    )
+  },
 }
 
 export const StickerSheetDefault: StickerSheetStory = {

package/src/ProgressBar/_docs/ProgressBar.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { ProgressBar } from "../index"
+import { ProgressBar, ProgressBarProps } from "../index"
 
 const meta = {
   title: "Components/ProgressBar",
@@ -8,26 +8,28 @@ const meta = {
   args: {
     value: 25,
     max: 100,
-    mood: "positive",
+    color: "green",
     isAnimating: false,
     label: "25%",
     isReversed: false,
   },
-} satisfies Meta<typeof ProgressBar>
-
-const a11yExclusions = {
-  a11y: {
-    config: {
-      rules: [
-        {
-          // `label` is an optional prop so this has no accessible title by default. For now consumers can pass in `aria-labelledby` or `aria-label`, which can provide an accessible title.
-          id: "aria-progressbar-name",
-          enabled: false,
-        },
-      ],
+  argTypes: {
+    mood: { control: false },
+  },
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {
+            // `label` is an optional prop so this has no accessible by default. consumers can pass in `aria-labelledby` or `aria-label` which can provide an accessible description pending a refactor.
+            id: "aria-progressbar-name",
+            enabled: false,
+          },
+        ],
+      },
     },
   },
-}
+} satisfies Meta<typeof ProgressBar>
 
 export default meta
 
@@ -40,22 +42,55 @@ export const Playground: Story = {
         sourceState: "shown",
       },
     },
-    ...a11yExclusions,
   },
 }
 
+const colors = [
+  {
+    title: "Blue",
+    props: { color: "blue" },
+  },
+  {
+    title: "Green",
+    props: { color: "green" },
+  },
+  {
+    title: "Red",
+    props: { color: "red" },
+  },
+  {
+    title: "Yellow",
+    props: { color: "yellow" },
+  },
+] satisfies Array<{ title: string; props: Partial<ProgressBarProps> }>
+
+export const Colors: Story = {
+  render: () => (
+    <div className="flex flex-col gap-16">
+      {colors.map(({ title, props }) => (
+        <ProgressBar
+          key={title}
+          {...props}
+          value={3}
+          max={5}
+          label={title}
+          isAnimating={false}
+          isReversed={false}
+        />
+      ))}
+    </div>
+  ),
+}
+
 export const IsAnimating: Story = {
   args: { isAnimating: true },
-  parameters: {
-    ...a11yExclusions,
-  },
 }
 
 export const ValueAndMax: Story = {
   render: () => (
     <div className="flex flex-col gap-16">
       <ProgressBar
-        mood="positive"
+        color="green"
         value={3}
         max={5}
         label="3/5"
@@ -63,7 +98,7 @@ export const ValueAndMax: Story = {
         isReversed={false}
       />
       <ProgressBar
-        mood="positive"
+        color="green"
         value={60}
         max={100}
         label="60%"
@@ -72,15 +107,11 @@ export const ValueAndMax: Story = {
       />
     </div>
   ),
-  parameters: {
-    ...a11yExclusions,
-  },
 }
 
 export const Reversed: Story = {
   parameters: {
     backgrounds: { default: "Purple 700" },
-    ...a11yExclusions,
   },
   args: { isReversed: true },
 }

package/src/Tile/InformationTile/_docs/InformationTile.mdx

@@ -24,8 +24,9 @@ A visually interesting item in a list consisting of a card, visual, title, metad
 
 ## API
 
-### Moods
-<Canvas of={InformationTileStories.Moods} />
+### Variants
+
+<Canvas of={InformationTileStories.Variants} />
 
 ### Information
 <Canvas of={InformationTileStories.Information} />

package/src/Tile/InformationTile/_docs/InformationTile.stickersheet.stories.tsx

@@ -4,8 +4,7 @@ import {
   StickerSheet,
   StickerSheetStory,
 } from "~storybook/components/StickerSheet"
-import { moodsList } from "../../subcomponents/GenericTile/types"
-import { InformationTile } from "../index"
+import { InformationTile, InformationTileProps } from "../index"
 
 export default {
   title: "Components/Tiles/InformationTile",
@@ -16,26 +15,65 @@ export default {
 } satisfies Meta
 
 const StickerSheetTemplate: StickerSheetStory = {
-  render: () => (
-    <StickerSheet>
-      <StickerSheet.Body>
-        {(["default", ...moodsList] as const).map(mood => (
-          <StickerSheet.Row key={mood} rowTitle={mood}>
-            <InformationTile
-              mood={mood === "default" ? undefined : mood}
-              title="Title"
-              metadata="Side A"
-              information="Side B"
-              footer={<>Footer</>}
-            />
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
-    </StickerSheet>
-  ),
+  render: () => {
+    const defaultProps = {
+      title: "Title",
+      metadata: "Side A",
+      information: "Side B",
+      footer: <>Footer</>,
+    } satisfies InformationTileProps
+
+    const variants = ["default", "expert-advice"] satisfies Array<
+      InformationTileProps["variant"]
+    >
+
+    const moods = [
+      "positive",
+      "informative",
+      "cautionary",
+      "assertive",
+      "negative",
+      "prominent",
+    ] satisfies Array<InformationTileProps["mood"]>
+
+    return (
+      <>
+        <StickerSheet heading="InformationTile">
+          <StickerSheet.Body>
+            {variants.map(variant => (
+              <StickerSheet.Row key={variant} rowTitle={variant}>
+                <InformationTile {...defaultProps} variant={variant} />
+              </StickerSheet.Row>
+            ))}
+          </StickerSheet.Body>
+        </StickerSheet>
+
+        <StickerSheet heading="Mood (deprecated)">
+          <StickerSheet.Body>
+            <>
+              <StickerSheet.Row rowTitle="default">
+                <InformationTile {...defaultProps} />
+              </StickerSheet.Row>
+              {moods.map(mood => (
+                <StickerSheet.Row key={mood} rowTitle={mood}>
+                  <InformationTile {...defaultProps} mood={mood} />
+                </StickerSheet.Row>
+              ))}
+            </>
+          </StickerSheet.Body>
+        </StickerSheet>
+      </>
+    )
+  },
 }
 
 export const StickerSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Default)",
 }
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (RTL)",
+  parameters: { textDirection: "rtl" },
+}