@kaizen/components 0.0.0-canary-test-cherry-picked-updates-20250702235156 → 0.0.0-canary-ssr-generic-modal-1-20250709023540

package/src/LikertScaleLegacy/LikertScaleLegacy.module.scss

@@ -2,363 +2,365 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-/* stylelint-disable no-descending-specificity */
-@mixin respond-to($media) {
-  @if $media == print {
-    @media only print {
-      @content;
-    }
-  } @else if $media == iphone {
-    @media only screen and (max-width: 767px) {
-      @content;
-    }
-  } @else if $media == ipad {
-    @media only screen and (max-width: 959px) {
-      @content;
+@layer kz-components {
+  /* stylelint-disable no-descending-specificity */
+  @mixin respond-to($media) {
+    @if $media == print {
+      @media only print {
+        @content;
+      }
+    } @else if $media == iphone {
+      @media only screen and (max-width: 767px) {
+        @content;
+      }
+    } @else if $media == ipad {
+      @media only screen and (max-width: 959px) {
+        @content;
+      }
     }
   }
-}
 
-$block-height: 35px;
-$desktop-rater-width: 220px;
-$desktop-rater-height: 63px;
+  $block-height: 35px;
+  $desktop-rater-width: 220px;
+  $desktop-rater-height: 63px;
 
-$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;
+  $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;
+  $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;
-}
-
-@mixin fill($height) {
-  &:first-child .likertItemFill,
-  &:first-child .likertItemFill::after {
-    border-start-start-radius: $height;
-    border-end-start-radius: $height;
+  @mixin pop {
+    -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1;
   }
 
-  &:last-child .likertItemFill,
-  &:last-child .likertItemFill::after {
-    border-start-end-radius: $height;
-    border-end-end-radius: $height;
-  }
-}
+  @mixin fill($height) {
+    &:first-child .likertItemFill,
+    &:first-child .likertItemFill::after {
+      border-start-start-radius: $height;
+      border-end-start-radius: $height;
+    }
 
-@keyframes pop {
-  0% {
-    opacity: 50%;
-    -webkit-transform: scale(1);
+    &:last-child .likertItemFill,
+    &:last-child .likertItemFill::after {
+      border-start-end-radius: $height;
+      border-end-end-radius: $height;
+    }
   }
 
-  100% {
-    opacity: 0%;
-    -webkit-transform: scale(1.78);
-  }
-}
+  .container {
+    width: $desktop-rater-width;
+    position: relative;
+    box-sizing: border-box;
 
-.container {
-  width: $desktop-rater-width;
-  position: relative;
-  box-sizing: border-box;
+    @include respond-to(iphone) {
+      width: 258px;
+      position: static;
+    }
 
-  @include respond-to(iphone) {
-    width: 258px;
-    position: static;
-  }
+    &.rated .likertItem.unselected .likertItemFill {
+      transition: background 0.1s;
+    }
 
-  &.rated .likertItem.unselected .likertItemFill {
-    transition: background 0.1s;
-  }
+    &.reversed.rated .likertItem.unselected .likertItemFill {
+      background-color: transparent;
+      border-color: rgba($color-white-rgb, 0.65);
+    }
 
-  &.reversed.rated .likertItem.unselected .likertItemFill {
-    background-color: transparent;
-    border-color: rgba($color-white-rgb, 0.65);
-  }
+    :where(.likertItem4, .likertItem5) .check {
+      color: white;
+    }
 
-  :where(.likertItem4, .likertItem5) .check {
-    color: white;
+    :is(.likertItem4.suggested, .likertItem5.suggested) .check {
+      color: white;
+    }
   }
 
-  :is(.likertItem4.suggested, .likertItem5.suggested) .check {
-    color: white;
+  .likertItem:focus,
+  .likertItemFill:focus {
+    outline: none;
   }
-}
 
-.likertItem:focus,
-.likertItemFill:focus {
-  outline: none;
-}
-
-.likertItem:focus-visible .likertItemFill {
-  outline-offset: 1px;
-  outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
-}
+  .likertItem:focus-visible .likertItemFill {
+    outline-offset: 1px;
+    outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
+  }
 
-.reversed .likertItem:focus-visible .likertItemFill {
-  outline-color: $color-blue-300;
-}
+  .reversed .likertItem:focus-visible .likertItemFill {
+    outline-color: $color-blue-300;
+  }
 
-.itemContainer {
-  width: 100%;
-  white-space: nowrap;
-  display: inline-block;
-  height: $block-height + 2px;
-  font-size: 0;
-}
+  .itemContainer {
+    width: 100%;
+    white-space: nowrap;
+    display: inline-block;
+    height: $block-height + 2px;
+    font-size: 0;
+  }
 
-.legend {
-  text-align: center;
-  position: absolute;
-  top: calc(-1 * #{$spacing-md});
-  left: 0;
-  right: 0;
+  .legend {
+    text-align: center;
+    position: absolute;
+    top: calc(-1 * #{$spacing-md});
+    left: 0;
+    right: 0;
 
-  @include respond-to(iphone) {
-    position: initial;
-    top: 0;
+    @include respond-to(iphone) {
+      position: initial;
+      top: 0;
+    }
   }
-}
-
-.likertItem {
-  margin-inline: 2px;
-  font-size: 1px;
-  line-height: 1;
-  padding: 0;
-  overflow-x: visible;
-  display: inline-block;
-  width: 18.5%; // 5 columns
-  position: relative;
 
-  @include fill($block-height);
+  .likertItem {
+    margin-inline: 2px;
+    font-size: 1px;
+    line-height: 1;
+    padding: 0;
+    overflow-x: visible;
+    display: inline-block;
+    width: 18.5%; // 5 columns
+    position: relative;
 
-  &:first-child {
-    margin-inline-start: 0;
-  }
+    @include fill($block-height);
 
-  &:last-child {
-    margin-inline-end: 0;
-  }
+    &:first-child {
+      margin-inline-start: 0;
+    }
 
-  // Hack to bridge the gaps between items so mouse always hovers on something
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 100%;
-    width: 2px;
-    height: 100%;
-  }
+    &:last-child {
+      margin-inline-end: 0;
+    }
 
-  &::after {
-    right: auto;
-    left: 100%;
-  }
+    // Hack to bridge the gaps between items so mouse always hovers on something
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 100%;
+      width: 2px;
+      height: 100%;
+    }
 
-  &.suggested.classicalColorSchema,
-  &.selected.classicalColorSchema {
-    .field1 {
-      background-color: $classical-first;
+    &::after {
+      right: auto;
+      left: 100%;
+    }
 
-      &::after {
+    &.suggested.classicalColorSchema,
+    &.selected.classicalColorSchema {
+      .field1 {
         background-color: $classical-first;
-      }
-    }
 
-    .field2 {
-      background-color: $classical-second;
+        &::after {
+          background-color: $classical-first;
+        }
+      }
 
-      &::after {
+      .field2 {
         background-color: $classical-second;
-      }
-    }
 
-    .field3 {
-      background-color: $classical-third;
+        &::after {
+          background-color: $classical-second;
+        }
+      }
 
-      &::after {
+      .field3 {
         background-color: $classical-third;
-      }
-    }
 
-    .field4 {
-      background-color: $classical-fourth;
+        &::after {
+          background-color: $classical-third;
+        }
+      }
 
-      &::after {
+      .field4 {
         background-color: $classical-fourth;
-      }
-    }
 
-    .field5 {
-      background-color: $classical-fifth;
+        &::after {
+          background-color: $classical-fourth;
+        }
+      }
 
-      &::after {
+      .field5 {
         background-color: $classical-fifth;
+
+        &::after {
+          background-color: $classical-fifth;
+        }
       }
     }
-  }
-
-  &.suggested.blueColorSchema,
-  &.selected.blueColorSchema {
-    .field1 {
-      background-color: $blue-first;
 
-      &::after {
+    &.suggested.blueColorSchema,
+    &.selected.blueColorSchema {
+      .field1 {
         background-color: $blue-first;
-      }
-    }
 
-    .field2 {
-      background-color: $blue-second;
+        &::after {
+          background-color: $blue-first;
+        }
+      }
 
-      &::after {
+      .field2 {
         background-color: $blue-second;
-      }
-    }
 
-    .field3 {
-      background-color: $blue-third;
+        &::after {
+          background-color: $blue-second;
+        }
+      }
 
-      &::after {
+      .field3 {
         background-color: $blue-third;
-      }
-    }
 
-    .field4 {
-      background-color: $blue-fourth;
+        &::after {
+          background-color: $blue-third;
+        }
+      }
 
-      &::after {
+      .field4 {
         background-color: $blue-fourth;
-      }
-    }
 
-    .field5 {
-      background-color: $blue-fifth;
+        &::after {
+          background-color: $blue-fourth;
+        }
+      }
 
-      &::after {
+      .field5 {
         background-color: $blue-fifth;
+
+        &::after {
+          background-color: $blue-fifth;
+        }
       }
     }
   }
-}
-
-.likertItemFill {
-  transition:
-    background 0.1s,
-    border-color 0.1s;
-  height: $block-height;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
 
-  &:hover {
+  .likertItemFill {
     transition:
-      background 0s,
-      border-color 0s;
-  }
+      background 0.1s,
+      border-color 0.1s;
+    height: $block-height;
+    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
 
-  &::after {
-    content: ' ';
-    display: block;
-    height: 100%;
-    width: 100%;
-    pointer-events: none;
-  }
+    &:hover {
+      transition:
+        background 0s,
+        border-color 0s;
+    }
+
+    &::after {
+      content: ' ';
+      display: block;
+      height: 100%;
+      width: 100%;
+      pointer-events: none;
+    }
 
-  &.pop::after {
-    @include pop;
+    &.pop::after {
+      @include pop;
+    }
   }
-}
 
-.reversed .likertItemFill {
-  border-color: rgba($color-white-rgb, 0.65);
-}
+  .reversed .likertItemFill {
+    border-color: rgba($color-white-rgb, 0.65);
+  }
 
-.check {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: -10px 0 0 -10px;
-  color: black;
+  .check {
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -10px 0 0 -10px;
+    color: black;
 
-  .likertItem1 & {
-    margin-left: -9px;
+    .likertItem1 & {
+      margin-left: -9px;
 
-    [dir='rtl'] & {
-      margin-left: -11px;
+      [dir='rtl'] & {
+        margin-left: -11px;
+      }
     }
-  }
 
-  .likertItem5 & {
-    margin-left: -12px;
+    .likertItem5 & {
+      margin-left: -12px;
 
-    [dir='rtl'] & {
-      margin-left: -9px;
+      [dir='rtl'] & {
+        margin-left: -9px;
+      }
     }
   }
-}
-
-.hovered :where(.likertItem4, .likertItem5) .check {
-  color: black;
-}
-
-.hovered.reversed .itemContainer > :not(.suggested.likertItem) .check {
-  color: white;
-}
 
-@media only screen and (max-width: 767px) {
-  $block-height: 48px;
-
-  .container {
-    min-width: 258px;
+  .hovered :where(.likertItem4, .likertItem5) .check {
+    color: black;
   }
 
-  .itemContainer {
-    height: $block-height + 2px;
+  .hovered.reversed .itemContainer > :not(.suggested.likertItem) .check {
+    color: white;
   }
 
-  .likertItem {
-    @include fill($block-height);
-  }
+  @media only screen and (max-width: 767px) {
+    $block-height: 48px;
 
-  .likertItemFill {
-    height: $block-height;
-  }
-}
+    .container {
+      min-width: 258px;
+    }
 
-@media print {
-  .legend {
-    display: none;
+    .itemContainer {
+      height: $block-height + 2px;
+    }
+
+    .likertItem {
+      @include fill($block-height);
+    }
+
+    .likertItemFill {
+      height: $block-height;
+    }
   }
 
-  .container {
-    top: 1em;
-    right: 2em;
-    width: 150px;
+  @media print {
+    .legend {
+      display: none;
+    }
 
-    .likertItem {
-      .likertItemFill {
-        height: 25px;
-        background: white;
-        border: 1px solid #d7d8d8;
-      }
+    .container {
+      top: 1em;
+      right: 2em;
+      width: 150px;
 
-      &:first-child,
-      &:last-child {
+      .likertItem {
         .likertItemFill {
+          height: 25px;
           background: white;
-          border-width: 2px;
+          border: 1px solid #d7d8d8;
+        }
+
+        &:first-child,
+        &:last-child {
+          .likertItemFill {
+            background: white;
+            border-width: 2px;
+          }
         }
       }
     }
   }
+  /* stylelint-enable no-descending-specificity */
+}
+
+@keyframes pop {
+  0% {
+    opacity: 50%;
+    -webkit-transform: scale(1);
+  }
+
+  100% {
+    opacity: 0%;
+    -webkit-transform: scale(1.78);
+  }
 }
-/* stylelint-enable no-descending-specificity */

package/src/LikertScaleLegacy/LikertScaleLegacy.tsx

@@ -37,6 +37,9 @@ const SelectedItemIcon = (): JSX.Element => (
 )
 
 /**
+ * @deprecated This component will be renamed to LikertScale in v2.
+ * Start importing as LikertScale instead.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060201/Likert+Scale Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-likertscalelegacy--docs Storybook}
  */

package/src/LikertScaleLegacy/_docs/LikertScaleLegacy.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, RenameNotice } from '~storybook/components'
 import * as LikertScaleLegacyStories from './LikertScaleLegacy.stories'
 
 <Meta of={LikertScaleLegacyStories} />
@@ -10,9 +10,10 @@ import * as LikertScaleLegacyStories from './LikertScaleLegacy.stories'
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/LikertScaleLegacy"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A39905&t=P1w10jr2cpPuaayw-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060201/Likert+Scale"
-
 />
 
+<RenameNotice />
+
 <KAIOInstallation exportNames="LikertScaleLegacy" />
 
 ## Overview

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

@@ -5,7 +5,7 @@ import { LikertScaleLegacy, type LikertScaleProps } from '../index'
 import { type Scale } from '../types'
 
 export default {
-  title: 'Components/LikertScaleLegacy',
+  title: 'Components/LikertScaleLegacy (deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

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

@@ -33,7 +33,7 @@ const scale: Scale = [
 ]
 
 const meta = {
-  title: 'Components/LikertScaleLegacy',
+  title: 'Components/LikertScaleLegacy (deprecated)',
   component: LikertScaleLegacy,
   args: {
     scale,