KZN-2527/progressbar-rename-mood-to-color

.changeset/flat-dryers-smash.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": minor
+---
+
+- ProgressBar: deprecated `mood` in favour of `color`

packages/components/codemods/README.md

@@ -26,5 +26,6 @@ Example:
 - `migrateInlineNotificationTypeToVariant`: Transforms `InlineNotification`'s `type` prop to the new `variant` prop.
 - `migrateInformationTileMoodToVariant`: Migrates `InformationTile` component prop from `mood` to `variant`.
 - `migrateMultiActionTileMoodToVariant`: Migrates `MultiActionTile` component prop from `mood` to `variant`.
+- `migrateProgressBarMoodToColor`: Migrates `ProgressBar` component prop from `mood` to `color`
 - `migrateToastNotificationTypeToVariant`: Transforms `ToastNotification`'s `type` prop to the new `variant` prop.
 - `migrateWellVariantToColor`: Migrates `Well` component prop from `variant` to `color`.

packages/components/codemods/migrateProgressBarMoodToColor/index.ts

@@ -0,0 +1,21 @@
+import { transformComponentsInDir } from "../utils"
+import { transformProgressBarMoodToColor } from "./transformProgressBarMoodToColor"
+
+const migrateProgressBarMoodToColor = (): void => {
+  // eslint-disable-next-line no-console
+  console.log(
+    " ~(-_- ~) Running ProgressBar mood to color transformer (~ -_-)~"
+  )
+  const targetDir = process.argv[2]
+  if (!targetDir) {
+    process.exit(1)
+  }
+
+  transformComponentsInDir(
+    targetDir,
+    transformProgressBarMoodToColor,
+    "ProgressBar"
+  )
+}
+
+migrateProgressBarMoodToColor()

packages/components/codemods/migrateProgressBarMoodToColor/transformProgressBarMoodToColor.spec.ts

@@ -0,0 +1,54 @@
+import { parseJsx } from "../__tests__/utils"
+import { transformSource, printAst, TransformConfig } from "../utils"
+import { transformProgressBarMoodToColor } from "./transformProgressBarMoodToColor"
+
+const transformProgressBar = (
+  sourceFile: TransformConfig["sourceFile"]
+): string =>
+  transformSource({
+    sourceFile,
+    astTransformer: transformProgressBarMoodToColor,
+    tagName: "ProgressBar",
+  })
+
+describe("transformProgressBarMoodToColor()", () => {
+  it('replaces mood="cautionary" with color="yellow"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar mood="cautionary" />'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar color="yellow" />'
+    )
+    expect(transformProgressBar(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="informative" with color="blue', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar mood="informative" />'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar color="blue" />'
+    )
+    expect(transformProgressBar(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="negative" with color="red"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar mood="negative" />'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar color="red" />'
+    )
+    expect(transformProgressBar(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="positive" with color="green"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar mood="positive" />'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar color="green" />'
+    )
+    expect(transformProgressBar(inputAst)).toEqual(printAst(outputAst))
+  })
+})

packages/components/codemods/migrateProgressBarMoodToColor/transformProgressBarMoodToColor.ts

@@ -0,0 +1,26 @@
+import type { ProgressBarProps } from "~components/ProgressBar"
+import { migrateStringProp } from "../utils"
+
+const OLD_PROP_NAME = "mood"
+const NEW_PROP_NAME = "color"
+
+const getNewVariantValue = (
+  oldValue: Exclude<ProgressBarProps[typeof OLD_PROP_NAME], undefined>
+): Exclude<ProgressBarProps[typeof NEW_PROP_NAME], undefined> => {
+  switch (oldValue) {
+    case "cautionary":
+      return "yellow"
+    case "informative":
+      return "blue"
+    case "negative":
+      return "red"
+    case "positive":
+      return "green"
+  }
+}
+
+export const transformProgressBarMoodToColor = migrateStringProp(
+  OLD_PROP_NAME,
+  NEW_PROP_NAME,
+  getNewVariantValue
+)

packages/components/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;

packages/components/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}%` }}

packages/components/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