@kaizen/components 1.56.1 → 1.57.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.56.1",
+  "version": "1.57.1",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -100,8 +100,8 @@
     "ts-jest": "^29.2.3",
     "tslib": "^2.6.3",
     "tsx": "^4.16.2",
-    "@kaizen/design-tokens": "10.5.0",
-    "@kaizen/package-bundler": "1.1.3"
+    "@kaizen/package-bundler": "1.1.3",
+    "@kaizen/design-tokens": "10.5.1"
   },
   "devDependenciesComments": {
     "postcss": "Installed in root",

package/src/Card/Card.module.scss

@@ -4,32 +4,43 @@
 
 .wrapper {
   color: $color-purple-800;
-  background-color: $color-white;
+  border: var(--border-width-1) solid;
   border-radius: $border-borderless-border-radius;
   box-shadow: $shadow-small-box-shadow;
 }
 
+.default {
+  border-color: var(--color-gray-500);
+  background-color: var(--color-white);
+}
+
 .informative {
+  border-color: var(--color-blue-400);
   background-color: $color-blue-100;
 }
 
 .positive {
+  border-color: var(--color-green-500);
   background-color: $color-green-100;
 }
 
 .cautionary {
+  border-color: var(--color-yellow-700);
   background-color: $color-yellow-100;
 }
 
 .destructive {
+  border-color: var(--color-red-500);
   background-color: $color-red-100;
 }
 
 .assertive {
+  border-color: var(--color-orange-600);
   background-color: $color-orange-100;
 }
 
 .highlight {
+  border-color: var(--color-purple-400);
   background-color: $color-purple-100;
 }
 

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

@@ -63,13 +63,6 @@ export const StickerSheetDefault: StickerSheetStory = {
   name: "Sticker Sheet (Default)",
 }
 
-export const StickerSheetReversed: StickerSheetStory = {
-  ...StickerSheetTemplate,
-  name: "Sticker Sheet (Reversed)",
-  parameters: { backgrounds: { default: "Purple 700" } },
-  args: { isReversed: true },
-}
-
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",

package/src/Collapsible/Collapsible/Collapsible.module.scss

@@ -5,59 +5,48 @@
 @import "~@kaizen/design-tokens/sass/animation";
 
 $heading-active-color: $color-gray-200;
-$border-color: rgba($color-gray-600-rgb, 0.2);
+$divider-color: rgba($color-gray-600-rgb, 0.2);
+$container-border-width: var(--border-width-1);
+
+// We need a full border radius on this container element, then have classes
+// beneath to toggle nested borders off and on for different use cases.
+.container {
+  background-color: $color-white;
+  box-shadow: $shadow-small-box-shadow;
+  border: $container-border-width var(--border-solid-border-style)
+    var(--color-gray-500);
+  border-radius: $border-borderless-border-radius;
+}
 
 .header {
   display: flex;
   align-items: center;
-  text-align: left;
+  text-align: start;
   background-color: $color-white;
   border: none;
+  border-radius: var(--border-borderless-border-radius);
   transition: background-color $animation-duration-rapid;
-  padding: $spacing-sm $spacing-sm $spacing-sm $spacing-md;
+  padding-block: calc(var(--spacing-12) - #{$container-border-width});
+  padding-inline: var(--spacing-24) var(--spacing-12);
 
   &:hover {
     background-color: $heading-active-color;
   }
 
-  [dir="rtl"] & {
-    text-align: right;
-    padding-left: $spacing-sm;
-    padding-right: $spacing-md;
-  }
-
   // Round the bottom corners of the header so when the container is open, the
   // header background is not rounded on the corners and flush with the content beneath.
-  .open {
+  &.open {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
 }
 
-// We need a full border radius on this container element, then have classes
-// beneath to toggle nested borders off and on for different use cases.
-.container {
-  background-color: $color-white;
-  box-shadow: $shadow-small-box-shadow;
-  border-radius: $border-borderless-border-radius;
-}
-
-.single {
-  .header {
-    border-radius: $border-borderless-border-radius;
-  }
-}
-
 .separated {
   & + .separated {
     margin-top: calc(#{$spacing-md} * 0.3);
     margin-right: 0;
     margin-left: 0;
   }
-
-  .header {
-    border-radius: $border-borderless-border-radius;
-  }
 }
 
 // When a collapsible group is rendered, we need the first group to have a rounded
@@ -65,17 +54,24 @@ $border-color: rgba($color-gray-600-rgb, 0.2);
 // is open we remove the rounded edge as the content sits beneath and needs to be straight.
 .groupItem {
   & + .groupItem {
-    border-top: 1px $border-solid-border-style $border-color;
+    border-top: 1px $border-solid-border-style $divider-color;
+  }
+
+  .header {
+    border-radius: 0;
+    padding-block: var(--spacing-12);
   }
 
   &:first-of-type > .header {
     border-top-left-radius: $border-borderless-border-radius;
     border-top-right-radius: $border-borderless-border-radius;
+    padding-block-start: calc(var(--spacing-12) - #{$container-border-width});
   }
 
   &:last-of-type > .header:not(.open) {
     border-bottom-left-radius: $border-borderless-border-radius;
     border-bottom-right-radius: $border-borderless-border-radius;
+    padding-block-end: calc(var(--spacing-12) - #{$container-border-width});
   }
 }
 
@@ -93,7 +89,7 @@ $border-color: rgba($color-gray-600-rgb, 0.2);
 }
 
 .clearVariant {
-  border-bottom: 1px $border-solid-border-style $border-color;
+  border-bottom: 1px $border-solid-border-style $divider-color;
 }
 
 .sticky {
@@ -103,7 +99,7 @@ $border-color: rgba($color-gray-600-rgb, 0.2);
 }
 
 .section {
-  padding: $spacing-md;
+  padding: var(--spacing-24);
 }
 
 .noPadding {

package/src/Collapsible/Collapsible/Collapsible.tsx

@@ -46,7 +46,7 @@ export const Collapsible = ({
   sticky,
   noSectionPadding,
   onToggle,
-  variant,
+  variant = "default",
   lazyLoad,
   controlled,
   classNameOverride,
@@ -81,9 +81,7 @@ export const Collapsible = ({
         classNameOverride,
         isContainer && styles.container,
         group && !separated && styles.groupItem,
-        separated && styles.separated,
-        isOpen && styles.open,
-        !group && styles.single
+        separated && styles.separated
       )}
       data-testid={`collapsible-container-${id}`}
       {...restProps} // `title` is missing because it is used for the header; requires breaking change to fix

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

@@ -33,9 +33,12 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <StickerSheet>
       <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Default">
+        <StickerSheet.Row rowTitle="Open">
           <CollapsibleWrapped title="Collapsible" />
         </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Closed">
+          <CollapsibleWrapped title="Closed" open={false} />
+        </StickerSheet.Row>
         <StickerSheet.Row rowTitle="noSectionPadding">
           <CollapsibleWrapped title="No Padding" noSectionPadding />
         </StickerSheet.Row>

package/src/Collapsible/CollapsibleGroup/CollapsibleGroup.module.scss

@@ -6,5 +6,7 @@
 .container {
   background-color: white;
   box-shadow: $shadow-small-box-shadow;
+  border: var(--border-width-1) var(--border-solid-border-style)
+    var(--color-gray-500);
   border-radius: $border-borderless-border-radius;
 }

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

@@ -46,9 +46,16 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
       <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="default">
+        <StickerSheet.Row rowTitle="Open">
           <CollapsibleGroupWrapped />
         </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Closed">
+          <CollapsibleGroup>
+            <CollapsibleWrapped open={false} />
+            <CollapsibleWrapped open={false} />
+            <CollapsibleWrapped open={false} />
+          </CollapsibleGroup>
+        </StickerSheet.Row>
         <StickerSheet.Row rowTitle="noSectionPadding">
           <CollapsibleGroupWrapped noSectionPadding />
         </StickerSheet.Row>

package/src/Collapsible/ExpertAdviceCollapsible/ExpertAdviceCollapsible.module.scss

@@ -4,7 +4,8 @@
 
 .expertAdviceContainer {
   background-color: $color-purple-100;
-  border: 2px $border-solid-border-style $color-purple-300;
+  border: var(--border-width-1) var(--border-solid-border-style)
+    var(--color-purple-400);
   box-shadow: none;
   color: $color-purple-800;
 

package/src/EmptyState/EmptyState.module.scss

@@ -4,20 +4,21 @@
 @import "./mixins";
 
 .container {
+  --border-width: var(--border-width-1);
+
   display: flex;
   justify-content: space-around;
   width: 100%;
-  padding: 2% $spacing-md;
+  padding: calc(2% - var(--border-width))
+    calc(var(--spacing-24) - var(--border-width));
   color: $color-purple-800;
-  border: $border-solid-border-width $border-solid-border-style
-    $border-borderless-border-color-id;
+  border: var(--border-width) var(--border-solid-border-style);
   border-radius: $border-solid-border-radius;
 
   @include small {
     flex-direction: column;
     align-items: center;
-    padding-top: $spacing-md;
-    padding-bottom: $spacing-md;
+    padding-block: calc(var(--spacing-24) - var(--border-width));
   }
 
   &.straightCorners {
@@ -38,26 +39,27 @@
       padding-bottom: $spacing-md;
     }
   }
+}
 
-  &.positive {
-    background-color: $color-green-100;
-  }
-
-  &.negative {
-    background-color: $color-red-100;
-  }
+.positive {
+  border-color: var(--color-green-500);
+  background-color: $color-green-100;
+}
 
-  &.action {
-    background-color: $color-orange-100;
-  }
+.negative,
+.action {
+  border-color: var(--color-red-500);
+  background-color: $color-red-100;
+}
 
-  &.neutral {
-    background-color: $color-purple-100;
-  }
+.neutral {
+  border-color: var(--color-purple-400);
+  background-color: $color-purple-100;
+}
 
-  &.informative {
-    background-color: $color-blue-100;
-  }
+.informative {
+  border-color: var(--color-blue-400);
+  background-color: $color-blue-100;
 }
 
 .illustrationSide,

package/src/EmptyState/EmptyState.tsx

@@ -3,7 +3,6 @@ import classnames from "classnames"
 import { HeadingProps, Heading } from "~components/Heading"
 import {
   AnimatedSceneProps,
-  EmptyStatesAction,
   EmptyStatesInformative,
   EmptyStatesNegative,
   EmptyStatesNeutral,
@@ -21,7 +20,7 @@ const ILLUSTRATIONS: Record<
   neutral: EmptyStatesNeutral,
   negative: EmptyStatesNegative,
   informative: EmptyStatesInformative,
-  action: EmptyStatesAction,
+  action: EmptyStatesNegative,
 }
 
 type IllustrationType =

package/src/FieldMessage/FieldMessage.module.scss

@@ -65,7 +65,7 @@ $form-text-color-label-reversed: rgba($color-white-rgb, 0.8);
   }
 
   .caution & {
-    color: $color-yellow-500;
+    color: var(--color-yellow-700);
   }
 
   .reversed & {

package/src/GuidanceBlock/GuidanceBlock.module.scss

@@ -33,16 +33,16 @@ $scene-illustration-size: 300px;
 }
 
 .banner {
+  --border-width: var(--border-width-1);
+
   display: flex;
   flex-direction: column;
   gap: $spacing-sm;
-  background: $color-white;
   min-width: 320px;
   max-width: $layout-breakpoints-large;
-  border: $border-borderless-border-width $border-borderless-border-style
-    $border-borderless-border-color;
+  border: var(--border-width) var(--border-solid-border-style);
   border-radius: $border-solid-border-radius;
-  padding: $bannerPadding;
+  padding: calc(#{$bannerPadding} - var(--border-width));
   box-shadow: $shadow-small-box-shadow;
   position: relative;
   top: -1px;
@@ -214,27 +214,34 @@ $scene-illustration-size: 300px;
   color: $color-purple-800;
 }
 
+.default {
+  border-color: var(--color-gray-500);
+  background: var(--color-white);
+}
+
 .positive {
+  border-color: var(--color-green-500);
   background: $color-green-100;
 }
 
-.negative {
+.negative,
+.assertive {
+  border-color: var(--color-red-500);
   background: $color-red-100;
 }
 
 .informative {
+  border-color: var(--color-blue-400);
   background: $color-blue-100;
 }
 
 .cautionary {
+  border-color: var(--color-yellow-700);
   background: $color-yellow-100;
 }
 
-.assertive {
-  background: $color-orange-100;
-}
-
 .prominent {
+  border-color: var(--color-purple-400);
   background: $color-purple-100;
 }
 

package/src/Modal/ConfirmationModal/ConfirmationModal.module.scss

@@ -46,35 +46,24 @@ $dt-assertive-header-background: $color-orange-100;
 .positiveHeader {
   background-color: $dt-positive-header-background;
 
-  .spotIcon,
-  .svgIcon > svg {
+  .spotIcon {
     color: $color-green-500;
   }
 }
 
-.assertiveHeader {
-  background-color: $dt-assertive-header-background;
-
-  .spotIcon,
-  .svgIcon > svg {
-    color: $color-orange-500;
-  }
-}
-
 .informativeHeader {
   background-color: $dt-informative-header-background;
 
-  .spotIcon,
-  .svgIcon > svg {
+  .spotIcon {
     color: $color-blue-500;
   }
 }
 
-.negativeHeader {
+.negativeHeader,
+.assertiveHeader {
   background-color: $dt-negative-header-background;
 
-  .spotIcon,
-  .svgIcon > svg {
+  .spotIcon {
     color: $color-red-500;
   }
 }
@@ -82,9 +71,8 @@ $dt-assertive-header-background: $color-orange-100;
 .cautionaryHeader {
   background-color: $dt-cautionary-header-background;
 
-  .spotIcon,
-  .svgIcon > svg {
-    color: $color-yellow-500;
+  .spotIcon {
+    color: var(--color-yellow-700);
   }
 }
 
@@ -105,8 +93,7 @@ $dt-assertive-header-background: $color-orange-100;
     }
   }
 
-  .spotIcon,
-  .svgIcon > svg {
+  .spotIcon {
     width: 30px;
     height: 30px;
 
@@ -138,8 +125,7 @@ $dt-assertive-header-background: $color-orange-100;
       }
     }
 
-    .spotIcon,
-    .svgIcon > svg {
+    .spotIcon {
       width: 155px;
       height: 155px;
       margin: 0 auto;

package/src/Modal/GenericModal/GenericModal.module.scss

@@ -54,6 +54,20 @@
   @include ca-media-tablet-and-up {
     width: 100%;
   }
+
+  // wrap the modal container with a focus ring when the title has focus
+  // don't copy this over on the rebuild
+  // rather than putting the focus on the title, put it on the role=dialog element itself
+  &:has(:global([class*="modalLabel"]):focus-visible)::after {
+    content: "";
+    position: absolute;
+    background: transparent;
+    border-radius: $border-focus-ring-border-radius;
+    border-width: $border-focus-ring-border-width;
+    border-style: $border-focus-ring-border-style;
+    border-color: $color-blue-300;
+    inset: -4px;
+  }
 }
 
 // WAITING FOR TEXTFIELD

package/src/Modal/GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.module.scss

@@ -12,8 +12,6 @@ $ca-breakpoint-small-mobile: 375px;
 }
 
 .modalLabel {
-  position: relative;
-
   // TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
   h2 {
     @media (max-width: $layout-breakpoints-medium) {
@@ -35,17 +33,4 @@ $ca-breakpoint-small-mobile: 375px;
   &:focus {
     outline: none;
   }
-
-  &:focus-visible::after {
-    $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-
-    content: "";
-    position: absolute;
-    background: transparent;
-    border-radius: $border-focus-ring-border-radius;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $color-blue-500;
-    inset: calc(-1 * #{$focus-ring-offset});
-  }
 }

package/src/Notification/GlobalNotification/_docs/GlobalNotification.mdx

@@ -2,7 +2,7 @@ import { Canvas, Controls, Meta, Description} from "@storybook/blocks"
 import { KAIOInstallation, ResourceLinks } from "~storybook/components"
 import * as GlobalNotificationExamples from "./GlobalNotification.stories"
 
-<Meta title="Components/Notifications/Global Notification" />
+<Meta of={GlobalNotificationExamples} />
 
 # GlobalNotification
 

package/src/Notification/GlobalNotification/_docs/GlobalNotification.stickersheet.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from "../GlobalNotification"
 
 export default {
-  title: "Components/Notifications/Global Notification",
+  title: "Components/Notifications/GlobalNotification",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
@@ -85,7 +85,7 @@ const VARIANTS_PROPS: Array<{
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
-      <StickerSheet heading="Button" isReversed={isReversed}>
+      <StickerSheet heading="GlobalNotification" isReversed={isReversed}>
         <StickerSheet.Body>
           {VARIANTS_PROPS.map(({ title, props }) => (
             <StickerSheet.Row key={title} rowTitle={title}>

package/src/Notification/GlobalNotification/_docs/GlobalNotification.stories.tsx

@@ -11,7 +11,7 @@ const DEFAULT_PROPS: Partial<GlobalNotificationProps> = {
 }
 
 const meta = {
-  title: "Components/Notifications/Global Notification",
+  title: "Components/Notifications/GlobalNotification",
   component: GlobalNotification,
 
   args: {

package/src/Notification/InlineNotification/_docs/InlineNotification.mdx

@@ -2,9 +2,9 @@ import { Canvas, Controls, Meta, Description} from "@storybook/blocks"
 import { KAIOInstallation, ResourceLinks } from "~storybook/components"
 import * as InlineNotificationExamples from "./InlineNotification.stories"
 
-<Meta title="Components/Notifications/Inline Notification" />
+<Meta of={InlineNotificationExamples} />
 
-# Inline Notification
+# InlineNotification
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Notification/InlineNotification"

package/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from "../InlineNotification"
 
 export default {
-  title: "Components/Notifications/Inline Notification",
+  title: "Components/Notifications/InlineNotification",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
@@ -160,7 +160,7 @@ const VARIANTS_PROPS: Array<{
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
-      <StickerSheet heading="Button" isReversed={isReversed}>
+      <StickerSheet heading="InlineNotification" isReversed={isReversed}>
         <StickerSheet.Body>
           {VARIANTS_PROPS.map(({ title, props }) => (
             <StickerSheet.Row key={title} rowTitle={title}>

package/src/Notification/InlineNotification/_docs/InlineNotification.stories.tsx

@@ -16,7 +16,7 @@ const DEFAULT_PROPS: Partial<InlineNotificationProps> = {
 }
 
 const meta = {
-  title: "Components/Notifications/Inline Notification",
+  title: "Components/Notifications/InlineNotification",
   component: InlineNotification,
   args: {
     ...DEFAULT_PROPS,

package/src/Notification/ToastNotification/_docs/ToastNotification.mdx

@@ -2,9 +2,9 @@ import { Canvas, Controls, Meta } from "@storybook/blocks"
 import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
 import * as ToastNotificationStories from "./ToastNotification.stories"
 
-<Meta title="Components/Notifications/ToastNotification" />
+<Meta of={ToastNotificationStories} />
 
-# Toast Notification
+# ToastNotification
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Notification/ToastNotification"

package/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss

@@ -33,15 +33,15 @@
   align-items: center;
   justify-content: center;
 
-  &:focus {
+  &:focus,
+  &:focus-visible {
     outline: none;
   }
 
   &:focus-visible::after {
-    content: "";
-
-    $focus-ring-offset: 6px;
+    $focus-ring-offset: var(--spacing-2);
 
+    content: "";
     pointer-events: none;
     position: absolute;
     background: transparent;