@kaizen/components 1.42.7 → 1.43.0

package/dist/types/LikertScaleLegacy/LikertScaleLegacy.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Scale, ScaleItem } from "./types";
+import { Scale, ScaleItem, ColorSchema } from "./types";
 export type LikertScaleProps = {
     labelId: string;
     scale: Scale;
@@ -10,6 +10,7 @@ export type LikertScaleProps = {
     automationId?: string;
     "data-testid"?: string;
     reversed?: boolean;
+    colorSchema?: ColorSchema | "classical";
     validationMessage?: string;
     status?: "default" | "error";
     onSelect: (value: ScaleItem | null) => void;
@@ -18,4 +19,4 @@ export type LikertScaleProps = {
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060201/Likert+Scale Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-likertscalelegacy--docs Storybook}
  */
-export declare const LikertScaleLegacy: ({ scale, selectedItem, reversed, "data-testid": dataTestId, onSelect, validationMessage, status, labelId, }: LikertScaleProps) => JSX.Element;
+export declare const LikertScaleLegacy: ({ scale, selectedItem, reversed, colorSchema, "data-testid": dataTestId, onSelect, validationMessage, status, labelId, }: LikertScaleProps) => JSX.Element;

package/dist/types/LikertScaleLegacy/types.d.ts

@@ -3,4 +3,5 @@ export type ScaleItem = {
     value: ScaleValue;
     label: string;
 };
+export type ColorSchema = "classical" | "blue";
 export type Scale = ScaleItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.42.7",
+  "version": "1.43.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -108,8 +108,8 @@
     "ts-node": "^10.9.2",
     "ts-patch": "^3.1.2",
     "typescript-transform-paths": "^3.4.7",
-    "@kaizen/design-tokens": "10.3.20",
-    "@kaizen/tailwind": "1.2.6"
+    "@kaizen/tailwind": "1.2.6",
+    "@kaizen/design-tokens": "10.3.20"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.5",

package/src/LikertScaleLegacy/LikertScaleLegacy.module.scss

@@ -23,11 +23,17 @@ $block-height: 35px;
 $desktop-rater-width: 220px;
 $desktop-rater-height: 63px;
 
-$first: $color-yellow-300;
-$second: $color-yellow-400;
-$third: $color-orange-400;
-$fourth: $color-orange-500;
-$fifth: $color-red-500;
+$classical-first: $color-yellow-300;
+$classical-second: $color-yellow-400;
+$classical-third: $color-orange-400;
+$classical-fourth: $color-orange-500;
+$classical-fifth: $color-red-500;
+
+$blue-first: $color-blue-100;
+$blue-second: $color-blue-200;
+$blue-third: $color-blue-300;
+$blue-fourth: $color-blue-400;
+$blue-fifth: $color-blue-500;
 
 @mixin pop {
   -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1;
@@ -212,45 +218,88 @@ $fifth: $color-red-500;
     left: 100%;
   }
 
-  &.suggested,
-  &.selected {
+  &.suggested.classicalColorSchema,
+  &.selected.classicalColorSchema {
     .field1 {
-      background-color: $first;
+      background-color: $classical-first;
 
       &::after {
-        background-color: $first;
+        background-color: $classical-first;
       }
     }
 
     .field2 {
-      background-color: $second;
+      background-color: $classical-second;
 
       &::after {
-        background-color: $second;
+        background-color: $classical-second;
       }
     }
 
     .field3 {
-      background-color: $third;
+      background-color: $classical-third;
 
       &::after {
-        background-color: $third;
+        background-color: $classical-third;
       }
     }
 
     .field4 {
-      background-color: $fourth;
+      background-color: $classical-fourth;
 
       &::after {
-        background-color: $fourth;
+        background-color: $classical-fourth;
       }
     }
 
     .field5 {
-      background-color: $fifth;
+      background-color: $classical-fifth;
 
       &::after {
-        background-color: $fifth;
+        background-color: $classical-fifth;
+      }
+    }
+  }
+
+  &.suggested.blueColorSchema,
+  &.selected.blueColorSchema {
+    .field1 {
+      background-color: $blue-first;
+
+      &::after {
+        background-color: $blue-first;
+      }
+    }
+
+    .field2 {
+      background-color: $blue-second;
+
+      &::after {
+        background-color: $blue-second;
+      }
+    }
+
+    .field3 {
+      background-color: $blue-third;
+
+      &::after {
+        background-color: $blue-third;
+      }
+    }
+
+    .field4 {
+      background-color: $blue-fourth;
+
+      &::after {
+        background-color: $blue-fourth;
+      }
+    }
+
+    .field5 {
+      background-color: $blue-fifth;
+
+      &::after {
+        background-color: $blue-fifth;
       }
     }
   }

package/src/LikertScaleLegacy/LikertScaleLegacy.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames"
 import { FieldMessage } from "~components/FieldMessage"
 import { CheckIcon } from "~components/Icon"
 import { Text } from "~components/Text"
-import { ScaleValue, Scale, ScaleItem } from "./types"
+import { ScaleValue, Scale, ScaleItem, ColorSchema } from "./types"
 import determineSelectionFromKeyPress from "./utils/determineSelectionFromKeyPress"
 import styles from "./LikertScaleLegacy.module.scss"
 
@@ -22,6 +22,7 @@ export type LikertScaleProps = {
   automationId?: string
   "data-testid"?: string
   reversed?: boolean
+  colorSchema?: ColorSchema | "classical"
   validationMessage?: string
   status?: "default" | "error"
   onSelect: (value: ScaleItem | null) => void
@@ -39,6 +40,7 @@ export const LikertScaleLegacy = ({
   scale,
   selectedItem,
   reversed,
+  colorSchema = "classical",
   "data-testid": dataTestId,
   onSelect,
   validationMessage,
@@ -156,6 +158,9 @@ export const LikertScaleLegacy = ({
             <div
               className={classnames(
                 styles.likertItem,
+                colorSchema == "blue"
+                  ? styles.blueColorSchema
+                  : styles.classicalColorSchema,
                 styles[`likertItem${item.value}`],
                 isSelected && styles.selected,
                 isSuggested && styles.suggested,

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

@@ -43,7 +43,7 @@ const scale: Scale = [
 ]
 
 const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
+  render: ({ isReversed, colorSchema }) => (
     <StickerSheet isReversed={isReversed}>
       <StickerSheet.Body>
         <StickerSheet.Row rowTitle="Not rated">
@@ -53,6 +53,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[0]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Strongly disagree">
@@ -62,6 +63,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[1]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Disagree">
@@ -71,6 +73,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[2]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Neither agree or disagree">
@@ -80,6 +83,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[3]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Agree">
@@ -89,6 +93,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[4]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Strongly agree">
@@ -98,6 +103,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[5]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Validation">
@@ -107,6 +113,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[0]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
             validationMessage="Error message here"
             status="error"
           />
@@ -118,18 +125,33 @@ const StickerSheetTemplate: StickerSheetStory = {
 
 export const StickerSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Default)",
+  name: "Sticker Sheet (Default - Classical)",
 }
 
-export const StickerSheetReversed: StickerSheetStory = {
+export const StickerBlueSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Reversed)",
+  name: "Sticker Sheet (Blue)",
+  args: { colorSchema: "blue" },
+}
+
+export const StickerSheetClassicalReversed: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Classical Reversed)",
   parameters: {
     backgrounds: { default: "Purple 700" },
   },
   args: { isReversed: true },
 }
 
+export const StickerSheetBlueReversed: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Blue Reversed)",
+  parameters: {
+    backgrounds: { default: "Purple 700" },
+  },
+  args: { isReversed: true, colorSchema: "blue" },
+}
+
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",

package/src/LikertScaleLegacy/types.ts

@@ -5,4 +5,6 @@ export type ScaleItem = {
   label: string
 }
 
+export type ColorSchema = "classical" | "blue"
+
 export type Scale = ScaleItem[]