@kaizen/components 1.47.5 → 1.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.47.5",
+  "version": "1.48.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -85,6 +85,7 @@
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^9.0.8",
     "autoprefixer": "^10.4.19",
+    "concat-cli": "^4.0.0",
     "query-string": "^9.0.0",
     "react-intl": "^6.6.8",
     "rollup": "^4.18.0",
@@ -94,8 +95,8 @@
     "ts-jest": "^29.1.3",
     "tslib": "^2.6.2",
     "tsx": "^4.11.0",
-    "@kaizen/package-bundler": "1.0.2",
-    "@kaizen/design-tokens": "10.4.1"
+    "@kaizen/design-tokens": "10.4.1",
+    "@kaizen/package-bundler": "1.1.0"
   },
   "devDependenciesComments": {
     "postcss": "Installed in root",
@@ -108,10 +109,12 @@
     "react-intl": "^6.6.8"
   },
   "scripts": {
-    "build": "pnpm package-bundler build-shared-ui && pnpm build:global-styles",
-    "build:global-styles": "postcss ./styles/global.css --output dist/styles.css",
     "clean": "rm -rf dist",
     "lint:ts": "tsc --noEmit",
+    "build": "pnpm package-bundler build-shared-ui && pnpm build:styles",
+    "build:global-styles": "postcss ./styles/global.css --output dist/global.css",
+    "build:combine-styles": "concat-cli -f ./dist/global.css ./dist/styles.css -o ./dist/styles.css && rm ./dist/global.css",
+    "build:styles": "pnpm build:global-styles && pnpm build:combine-styles",
     "test": "FORCE_COLOR=1 jest",
     "test:ci": "pnpm test -- --ci",
     "update-icons": "./src/Icon/bin/update-icons.sh",

package/src/AvatarGroup/AvatarGroup.module.scss

@@ -9,10 +9,6 @@ $avatar-lg: 4.5rem;
 
 @mixin overlap($size) {
   margin-inline-start: calc(#{$size} / -2);
-
-  [dir="rtl"] & {
-    margin-left: 0;
-  }
 }
 
 .AvatarGroup {
@@ -22,22 +18,6 @@ $avatar-lg: 4.5rem;
   padding: 0;
 }
 
-.AvatarGroupItem {
-  + .AvatarGroupItem {
-    .small & {
-      @include overlap($avatar-sm);
-    }
-
-    .medium & {
-      @include overlap($avatar-md);
-    }
-
-    .large & {
-      @include overlap($avatar-lg);
-    }
-  }
-}
-
 .AvatarCounter {
   align-items: center;
   background: $color-gray-300;
@@ -49,7 +29,17 @@ $avatar-lg: 4.5rem;
   justify-content: center;
   overflow: hidden;
 
-  .small & {
+  [dir="rtl"] & {
+    direction: ltr;
+  }
+}
+
+.small {
+  .AvatarGroupItem + .AvatarGroupItem {
+    @include overlap($avatar-sm);
+  }
+
+  .AvatarCounter {
     box-shadow: none;
     border: none;
     width: $avatar-sm;
@@ -59,8 +49,14 @@ $avatar-lg: 4.5rem;
     font-weight: $typography-heading-5-font-weight;
     letter-spacing: $typography-heading-5-letter-spacing;
   }
+}
+
+.medium {
+  .AvatarGroupItem + .AvatarGroupItem {
+    @include overlap($avatar-md);
+  }
 
-  .medium & {
+  .AvatarCounter {
     width: $avatar-md;
     height: $avatar-md;
     font-family: $typography-heading-5-font-family;
@@ -68,8 +64,14 @@ $avatar-lg: 4.5rem;
     font-weight: $typography-heading-5-font-weight;
     letter-spacing: $typography-heading-5-letter-spacing;
   }
+}
+
+.large {
+  .AvatarGroupItem + .AvatarGroupItem {
+    @include overlap($avatar-lg);
+  }
 
-  .large & {
+  .AvatarCounter {
     width: $avatar-lg;
     height: $avatar-lg;
     font-family: $typography-heading-3-font-family;
@@ -77,9 +79,4 @@ $avatar-lg: 4.5rem;
     font-weight: $typography-heading-3-font-weight;
     letter-spacing: $typography-heading-3-letter-spacing;
   }
-
-  [dir="rtl"] & {
-    margin-left: 0;
-    direction: ltr;
-  }
 }

package/src/ButtonGroup/ButtonGroup.module.scss

@@ -26,26 +26,26 @@ $focus-ring-offset-inner: calc(-1 * #{$focus-ring-offset});
       }
     }
 
-    &.firstChild {
-      @extend %firstChildBorders;
+    &:not(.firstChild) {
+      border-inline-start: 1px solid $color-blue-300;
+    }
 
+    &:not(.firstChild, .lastChild) {
       &:focus-visible {
         &::after {
-          @extend %firstChildBorders;
-
-          inset-inline-end: $focus-ring-offset-inner;
+          inset-inline: $focus-ring-offset-inner $focus-ring-offset-inner;
         }
       }
     }
 
-    &:not(.firstChild) {
-      border-inline-start: 1px solid $color-blue-300;
-    }
+    &.firstChild {
+      @extend %firstChildBorders;
 
-    &:not(.firstChild, .lastChild) {
       &:focus-visible {
         &::after {
-          inset-inline: $focus-ring-offset-inner $focus-ring-offset-inner;
+          @extend %firstChildBorders;
+
+          inset-inline-end: $focus-ring-offset-inner;
         }
       }
     }

package/src/Checkbox/Checkbox/Checkbox.module.scss

@@ -18,6 +18,10 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
   margin: 0;
 }
 
+.checkbox:disabled {
+  pointer-events: none;
+}
+
 .icon {
   height: $checkbox-size;
   width: $checkbox-size;
@@ -49,6 +53,10 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
   background-color: white;
   border-color: $dt-color-form-border-color;
 
+  .checkbox:hover + & {
+    border-color: $dt-color-form-border-color-hover;
+  }
+
   .checkbox:checked + &,
   .checkbox:indeterminate + & {
     background: $dt-color-checkbox-background-color-checked;
@@ -66,12 +74,8 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     border-color: $dt-color-form-border-color-hover;
   }
 
-  .checkbox:not([disabled]):hover + & {
-    border-color: $dt-color-form-border-color-hover;
-  }
-
-  .checkbox:checked:not([disabled]):hover + &,
-  .checkbox:indeterminate:not([disabled]):hover + & {
+  .checkbox:checked:hover + &,
+  .checkbox:indeterminate:hover + & {
     background: $dt-color-form-border-color-hover;
     border-color: $dt-color-form-border-color-hover;
   }
@@ -108,24 +112,20 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     background: rgba($color-white-rgb, 0.65);
   }
 
+  .checkbox:not([checked]):hover + &,
   .checkbox:not([checked]):focus + & {
     border-color: $color-white;
     background: rgba($color-white-rgb, 0.1);
   }
 
-  .checkbox:not([checked], [disabled]):hover + & {
-    border-color: $color-white;
-    background: rgba($color-white-rgb, 0.1);
-  }
-
   .checkbox:checked:focus + &,
   .checkbox:indeterminate:focus + & {
     background: $color-white;
     border-color: $color-white;
   }
 
-  .checkbox:indeterminate:not([disabled]):hover + &,
-  .checkbox:checked:not([disabled]):hover + & {
+  .checkbox:indeterminate:hover + &,
+  .checkbox:checked:hover + & {
     background: $color-white;
     border-color: $color-white;
   }

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
 import React from "react"
 import { Meta } from "@storybook/react"
 import {
@@ -16,7 +15,7 @@ export default {
       config: {
         rules: [
           {
-            // Built with no label on purpose, to be used within `RadioField` where label is present
+            // Built with no label on purpose, to be used within `CheckboxField` where label is present
             id: "label",
             enabled: false,
           },
@@ -26,69 +25,56 @@ export default {
   },
 } satisfies Meta
 
-const CheckboxExampleGroup = (props: CheckboxProps): JSX.Element => (
-  <div className="grid gap-8">
-    <Checkbox {...props} />
-    <Checkbox {...props} checkedStatus="on" />
-    <Checkbox {...props} checkedStatus="mixed" />
-  </div>
-)
-
 const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
-    /** @note: If you have multiple StickerSheets to display, you can add a `heading` */
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Default", "Hover", "Active", "Focus"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Enabled">
-          <CheckboxExampleGroup onCheck={() => {}} />
-          <CheckboxExampleGroup
-            onCheck={() => {}}
-            data-sb-pseudo-styles="hover"
-          />
-          <CheckboxExampleGroup
-            onCheck={() => {}}
-            data-sb-pseudo-styles="active"
-          />
-          <CheckboxExampleGroup
-            onCheck={() => {}}
-            data-sb-pseudo-styles="focus"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Disabled">
-          <CheckboxExampleGroup onCheck={() => {}} disabled />
-          <CheckboxExampleGroup
-            onCheck={() => {}}
-            disabled
-            data-sb-pseudo-styles="hover"
-          />
-          <CheckboxExampleGroup
-            onCheck={() => {}}
-            disabled
-            data-sb-pseudo-styles="active"
-          />
-          <CheckboxExampleGroup
-            onCheck={() => {}}
-            disabled
-            data-sb-pseudo-styles="focus"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Read Only">
-          <CheckboxExampleGroup />
-          <CheckboxExampleGroup data-sb-pseudo-styles="hover" />
-          <CheckboxExampleGroup data-sb-pseudo-styles="active" />
-          <CheckboxExampleGroup data-sb-pseudo-styles="focus" />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
-    </StickerSheet>
-  ),
+  render: ({ isReversed }) => {
+    const defaultProps = {
+      onCheck: () => undefined,
+      reversed: isReversed,
+    } satisfies Partial<CheckboxProps>
+
+    const rows = [
+      { title: "Off", checkedStatus: "off" },
+      { title: "On", checkedStatus: "on" },
+      { title: "Mixed", checkedStatus: "mixed" },
+    ] satisfies Array<{
+      title: string
+      checkedStatus: CheckboxProps["checkedStatus"]
+    }>
+
+    return (
+      <StickerSheet isReversed={isReversed}>
+        <StickerSheet.Header
+          headings={["Default", "Hover", "Focus", "Disabled"]}
+          hasVerticalHeadings
+        />
+        <StickerSheet.Body>
+          {rows.map(({ title, checkedStatus }) => (
+            <StickerSheet.Row key={title} rowTitle={title}>
+              <Checkbox {...defaultProps} checkedStatus={checkedStatus} />
+              <Checkbox
+                {...defaultProps}
+                checkedStatus={checkedStatus}
+                data-sb-pseudo-styles="hover"
+              />
+              <Checkbox
+                {...defaultProps}
+                checkedStatus={checkedStatus}
+                data-sb-pseudo-styles="focus"
+              />
+              <Checkbox
+                {...defaultProps}
+                checkedStatus={checkedStatus}
+                disabled
+              />
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
+      </StickerSheet>
+    )
+  },
   parameters: {
     pseudo: {
       hover: '[data-sb-pseudo-styles="hover"]',
-      active: '[data-sb-pseudo-styles="active"]',
       focus: '[data-sb-pseudo-styles="focus"]',
       focusVisible: '[data-sb-pseudo-styles="focus"]',
     },
@@ -104,19 +90,8 @@ export const StickerSheetReversed: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Reversed)",
   parameters: {
-    /** @note: Only required if template has parameters, otherwise this spread can be removed */
     ...StickerSheetTemplate.parameters,
     backgrounds: { default: "Purple 700" },
   },
   args: { isReversed: true },
 }
-
-export const StickerSheetRTL: StickerSheetStory = {
-  ...StickerSheetTemplate,
-  name: "Sticker Sheet (RTL)",
-  parameters: {
-    /** @note: Only required if template has parameters, otherwise this spread can be removed */
-    ...StickerSheetTemplate.parameters,
-    textDirection: "rtl",
-  },
-}

package/src/Checkbox/CheckboxField/CheckboxField.module.scss

@@ -3,12 +3,6 @@
 @import "~@kaizen/design-tokens/sass/typography";
 @import "../../../styles/utils/form-variables";
 
-// -----------------------------------------------
-// Checkbox Field
-// -----------------------------------------------
-///////////////////////////////////////////////////
-// LAYOUT
-///////////////////////////////////////////////////
 .container {
   position: relative;
   margin-bottom: $spacing-xs;
@@ -44,3 +38,9 @@
     }
   }
 }
+
+.label {
+  &:disabled {
+    pointer-events: none;
+  }
+}

package/src/Checkbox/CheckboxField/CheckboxField.tsx

@@ -51,6 +51,7 @@ export const CheckboxField = ({
         reversed={reversed}
         labelType="checkbox"
         disabled={disabled}
+        classNameOverride={styles.label}
       >
         <Checkbox
           id={`${id}-field-checkbox`}

package/src/Checkbox/CheckboxField/_docs/CheckboxField.stickersheet.stories.tsx

@@ -14,78 +14,63 @@ export default {
   },
 } satisfies Meta
 
-const CheckboxFieldGroupWrapper = (props: CheckboxFieldProps): JSX.Element => (
-  <div className="grid gap-8">
-    <CheckboxField {...props} />
-    <CheckboxField {...props} checkedStatus="on" />
-    <CheckboxField {...props} checkedStatus="mixed" />
-  </div>
-)
-
 const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
-    /** @note: If you have multiple StickerSheets to display, you can add a `heading` */
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Default", "Hover", "Active", "Focus"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Enabled">
-          <CheckboxFieldGroupWrapper
-            labelText="Checkbox"
-            reversed={isReversed}
-          />
-          <CheckboxFieldGroupWrapper
-            labelText="Hover"
-            reversed={isReversed}
-            data-sb-pseudo-styles="hover"
-          />
-          <CheckboxFieldGroupWrapper
-            labelText="Active"
-            reversed={isReversed}
-            data-sb-pseudo-styles="active"
-          />
-          <CheckboxFieldGroupWrapper
-            labelText="Focus"
-            reversed={isReversed}
-            data-sb-pseudo-styles="focus"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Disabled">
-          <CheckboxFieldGroupWrapper
-            labelText="Checkbox"
-            disabled
-            reversed={isReversed}
-          />
-          <CheckboxFieldGroupWrapper
-            labelText="Hover"
-            reversed={isReversed}
-            disabled
-            data-sb-pseudo-styles="hover"
-          />
-          <CheckboxFieldGroupWrapper
-            labelText="Active"
-            reversed={isReversed}
-            disabled
-            data-sb-pseudo-styles="active"
-          />
-          <CheckboxFieldGroupWrapper
-            labelText="Focus"
-            reversed={isReversed}
-            disabled
-            data-sb-pseudo-styles="focus"
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
-    </StickerSheet>
-  ),
-  /** @note: Only required if you have pseudo states, otherwise this can be removed */
+  render: ({ isReversed }) => {
+    const defaultProps = {
+      onCheck: () => undefined,
+      reversed: isReversed,
+    } satisfies Partial<CheckboxFieldProps>
+
+    const rows = [
+      { title: "Off", checkedStatus: "off" },
+      { title: "On", checkedStatus: "on" },
+      { title: "Mixed", checkedStatus: "mixed" },
+    ] satisfies Array<{
+      title: string
+      checkedStatus: CheckboxFieldProps["checkedStatus"]
+    }>
+
+    return (
+      <StickerSheet isReversed={isReversed}>
+        <StickerSheet.Header
+          headings={["Default", "Hover", "Focus", "Disabled"]}
+          hasVerticalHeadings
+        />
+        <StickerSheet.Body>
+          {rows.map(({ title, checkedStatus }) => (
+            <StickerSheet.Row key={title} rowTitle={title}>
+              <CheckboxField
+                {...defaultProps}
+                labelText="Checkbox"
+                checkedStatus={checkedStatus}
+              />
+              <CheckboxField
+                {...defaultProps}
+                labelText="Hover"
+                checkedStatus={checkedStatus}
+                data-sb-pseudo-styles="hover"
+              />
+              <CheckboxField
+                {...defaultProps}
+                labelText="Focus"
+                checkedStatus={checkedStatus}
+                data-sb-pseudo-styles="focus"
+              />
+              <CheckboxField
+                {...defaultProps}
+                labelText="Disabled"
+                checkedStatus={checkedStatus}
+                disabled
+              />
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
+      </StickerSheet>
+    )
+  },
   parameters: {
-    /** @todo: Remove any inapplicable pseudo states */
     pseudo: {
       hover: '[data-sb-pseudo-styles="hover"]',
-      active: '[data-sb-pseudo-styles="active"]',
       focus: '[data-sb-pseudo-styles="focus"]',
       focusVisible: '[data-sb-pseudo-styles="focus"]',
     },
@@ -101,7 +86,6 @@ export const StickerSheetReversed: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Reversed)",
   parameters: {
-    /** @note: Only required if template has parameters, otherwise this spread can be removed */
     ...StickerSheetTemplate.parameters,
     backgrounds: { default: "Purple 700" },
   },
@@ -112,7 +96,6 @@ export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",
   parameters: {
-    /** @note: Only required if template has parameters, otherwise this spread can be removed */
     ...StickerSheetTemplate.parameters,
     textDirection: "rtl",
   },

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

@@ -8,20 +8,17 @@
   box-shadow: none;
   color: $color-purple-800;
 
-  > div {
-    &:first-of-type {
-      background-color: $color-purple-100;
-      border-radius: $border-borderless-border-radius;
-
-      &:hover {
-        background-color: $color-purple-100;
-      }
-    }
+  &:hover {
+    border-color: $color-purple-500;
   }
 }
 
-.expertAdviceContainer:hover {
-  border-color: $color-purple-500;
+// Override Collapsible header
+.expertAdviceContainer > div {
+  &:first-of-type {
+    background-color: $color-purple-100;
+    border-radius: $border-borderless-border-radius;
+  }
 }
 
 .expertAdviceHeader {

package/src/Illustration/subcomponents/Base/Base.module.scss

@@ -9,42 +9,42 @@
 .figure {
   margin: 0;
   position: relative;
+}
 
-  // nested to get more specificity, beat out the generic button styles
-  .pausePlayButton {
-    opacity: 0%;
-    position: absolute;
-    right: 1rem;
-    bottom: 1rem;
-    /* stylelint-disable declaration-no-important */
-    background-color: $color-white !important;
-    border: 1px solid $color-gray-400;
-    transition: all $animation-duration-immediate;
-
-    @media (hover: none) and (pointer: coarse) {
-      opacity: 100%;
-    }
+// nested to get more specificity, beat out the generic button styles
+.figure .pausePlayButton {
+  opacity: 0%;
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  /* stylelint-disable declaration-no-important */
+  background-color: $color-white !important;
+  border: 1px solid $color-gray-400;
+  transition: all $animation-duration-immediate;
+
+  @media (hover: none) and (pointer: coarse) {
+    opacity: 100%;
+  }
 
-    svg {
-      color: $color-purple-800;
-      opacity: 70%;
-    }
+  svg {
+    color: $color-purple-800;
+    opacity: 70%;
+  }
 
-    &:hover,
-    &:focus {
-      opacity: 100%;
-      background-color: $color-gray-200 !important;
+  &:hover,
+  &:focus {
+    opacity: 100%;
+    background-color: $color-gray-200 !important;
 
-      svg {
-        opacity: 100%;
-      }
+    svg {
+      opacity: 100%;
     }
   }
+}
 
-  &:hover {
-    .pausePlayButton {
-      opacity: 100%;
-    }
+.figure:hover {
+  .pausePlayButton {
+    opacity: 100%;
   }
 }