@kaizen/components 1.47.5 → 1.47.6

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%;
   }
 }
 

package/src/Input/Input/Input.module.scss

@@ -237,7 +237,6 @@ $input-with-icon-padding: calc(
     }
   }
 }
-/* stylelint-enable no-descending-specificity */
 
 ///////////////////////////////////////////////////
 // THEMES
@@ -357,3 +356,4 @@ $input-with-icon-padding: calc(
     }
   }
 }
+/* stylelint-enable no-descending-specificity */

package/src/Label/Label.module.scss

@@ -12,14 +12,7 @@ $label-start-margin: $spacing-xs;
   color: $dt-color-form-text-color;
   visibility: visible;
   width: 100%;
-  text-align: left; // fallback for IE and Edge
   text-align: start;
-
-  &[dir="rtl"],
-  [dir="rtl"] & {
-    text-align: right; // fallback for IE and Edge
-    text-align: start;
-  }
 }
 
 .reversed {
@@ -87,25 +80,11 @@ $label-start-margin: $spacing-xs;
   // apply padding when label is inline with form control
   .prependedLabel {
     order: -1; // place label before the control
-    margin-right: $label-start-margin;
-    margin-left: 0;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      margin-right: 0;
-      margin-left: $label-start-margin;
-    }
+    margin-inline-end: $label-start-margin;
   }
 
   .appendedLabel {
-    margin-right: 0;
-    margin-left: $label-start-margin;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      margin-right: $label-start-margin;
-      margin-left: 0;
-    }
+    margin-inline-start: $label-start-margin;
   }
 }
 

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

@@ -18,7 +18,7 @@
   flex-direction: column;
 
   @media (min-width: $layout-breakpoints-medium) {
-    padding: 0 $spacing-lg $spacing-lg $spacing-lg;
+    padding: 0 $spacing-lg $spacing-lg;
     flex-direction: row-reverse;
   }
 }

package/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss

@@ -46,6 +46,7 @@
   border-top-right-radius: 0;
 }
 
+/* stylelint-disable no-descending-specificity */
 .editorWrapper {
   position: relative;
   border: $border-solid-border-width $border-solid-border-style $color-gray-500;
@@ -62,7 +63,6 @@
     }
   }
 
-  /* stylelint-disable no-descending-specificity */
   &.error {
     &,
     .toolbar {