@kaizen/components 2.4.0 → 2.5.1

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

@@ -0,0 +1,392 @@
+:root {
+  --border-width: var(--border-width-1);
+  --notification-vertical-padding: calc(var(--spacing-6) - var(--border-width));
+  --notification-fade-out: opacity 200ms ease;
+  --notification-collapse-height: margin-top 200ms ease, margin-bottom 200ms ease;
+  --notification-collapse-height-delayed: margin-top 200ms ease 200ms, margin-bottom 200ms ease;
+  --notification-pop-up: transform 200ms ease-out;
+  --notification-slide-right: transform 300ms ease-out;
+}
+
+@layer kz-components {
+  /* Replace @extend %ca-notification from _mixin.scss */
+  .notification {
+    display: flex;
+    box-sizing: border-box;
+    pointer-events: all;
+
+    &:focus {
+      outline-offset: 1px;
+      outline: 2px solid var(--color-blue-500);
+    }
+  }
+
+  /* Variants */
+  .inline,
+  .toast {
+    margin-bottom: var(--spacing-24);
+    border-width: var(--border-width);
+    border-style: solid;
+    border-radius: var(--border-solid-border-radius);
+  }
+
+  .inline {
+    width: auto;
+    min-height: 46px;
+    padding: var(--notification-vertical-padding) var(--spacing-12);
+    transition:
+      var(--notification-fade-out), var(--notification-pop-up), var(--notification-collapse-height);
+  }
+
+  .toast {
+    container-type: inline-size;
+    width: 25rem;
+    box-shadow: var(--shadow-small-box-shadow);
+    max-width: 100%;
+    padding: var(--notification-vertical-padding) 10px;
+    transition:
+      var(--notification-fade-out), var(--notification-slide-right),
+      var(--notification-collapse-height-delayed);
+    will-change: transform;
+  }
+
+  .global {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-width: 0;
+    border-radius: 0;
+    margin-bottom: 0;
+    padding-top: var(--spacing-16);
+    padding-bottom: var(--spacing-16);
+    padding-inline-start: var(--spacing-8);
+    transition: var(--notification-collapse-height);
+    position: relative;
+    z-index: 1030;
+  }
+
+  /* Types (colors) */
+  .success {
+    background: var(--color-green-100);
+    border-color: var(--color-green-500);
+    color: var(--color-purple-800);
+
+    --icon-color: var(--color-green-500);
+  }
+
+  .informative {
+    background: var(--color-blue-100);
+    border-color: var(--color-blue-500);
+    color: var(--color-purple-800);
+
+    --icon-color: var(--color-blue-500);
+  }
+
+  .cautionary,
+  .security {
+    background: var(--color-yellow-100);
+    border-color: var(--color-yellow-700);
+    color: var(--color-purple-800);
+
+    --icon-color: var(--color-yellow-700);
+  }
+
+  .warning {
+    background: var(--color-red-100);
+    border-color: var(--color-red-500);
+    color: var(--color-purple-800);
+
+    --icon-color: var(--color-red-500);
+  }
+
+  /* Hidden state */
+  .hidden {
+    opacity: 0;
+  }
+
+  .hidden.inline,
+  .hidden.global {
+    margin-bottom: 0;
+  }
+
+  .hidden.inline {
+    /*
+    When entering we use "ease-out", but when transitioning to hidden we want to use "ease-in".
+    We want it moving the fastest when it is the furthest off screen.
+    */
+    transition-timing-function: ease-in;
+    transform: translateY(-50%);
+  }
+
+  .hidden.toast {
+    /*
+    When entering we use "ease-out", but when transitioning to hidden we want to use "ease-in".
+    We want it moving the fastest when it is the furthest off screen.
+    */
+    transition-timing-function: ease-in;
+    transform: translateX(50%);
+  }
+
+  .hidden.global {
+    z-index: 1029;
+    opacity: 1;
+  }
+
+  /* Structure: .icon (from %ca-notification__icon) */
+  .icon {
+    align-items: flex-start;
+    box-sizing: content-box;
+    color: var(--icon-color);
+  }
+
+  .inline .icon,
+  .toast .icon {
+    width: 22px;
+    height: 22px;
+    font-size: 22px;
+    margin-top: var(--spacing-6);
+  }
+
+  .global .icon {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+  }
+
+  /* Structure: .textContainer from %ca-notification__text-container */
+  .textContainer {
+    box-sizing: content-box;
+    display: flex;
+    flex-flow: row wrap;
+    flex: 1 0 0;
+  }
+
+  .inline .textContainer,
+  .toast .textContainer {
+    margin-inline-start: var(--spacing-6);
+  }
+
+  .toast .textContainer {
+    max-width: calc(100% - var(--spacing-48));
+    overflow-wrap: break-word;
+    hyphens: auto;
+  }
+
+  .global .textContainer {
+    margin-inline-start: var(--spacing-8);
+  }
+
+  .inline .textContainer {
+    /*
+  Inline notifications often fade onto a white background.
+  Fading the higher-contrast text out at, as well as the whole container, makes for a smoother animation.  
+  */
+    transition: var(--notification-fade-out);
+  }
+
+  .forceMultiline {
+    flex-direction: column;
+  }
+
+  /* Structure: .title from %ca-notification__title */
+  .title {
+    position: relative;
+    font-family: var(--typography-heading-6-font-family);
+    font-weight: var(--typography-heading-6-font-weight);
+    font-size: var(--typography-heading-6-font-size);
+    line-height: var(--typography-heading-6-line-height);
+    letter-spacing: var(--typography-heading-6-letter-spacing);
+    margin: 0;
+    padding-right: 6px;
+
+    /* overriding Bootstrap style that changes h6s to text-transform: uppercase */
+    text-transform: none;
+    color: inherit;
+    top: 0.37em;
+  }
+
+  .notificationTitle {
+    top: 0.42em;
+    position: relative;
+    margin-inline-end: var(--spacing-6);
+    line-height: var(--typography-heading-6-line-height);
+  }
+
+  @container (max-width: 25rem) {
+    .notificationTitle {
+      width: 100%;
+    }
+  }
+
+  /* Structure: .text from %ca-notification__text */
+  .text {
+    position: relative;
+    font-family: var(--typography-paragraph-small-font-family);
+    font-weight: var(--typography-paragraph-small-font-weight);
+    font-size: var(--typography-paragraph-small-font-size);
+    line-height: var(--typography-paragraph-small-line-height);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
+    margin: 0;
+    color: inherit;
+
+    a[href]:not([data-rac]) {
+      border-bottom: var(--spacing-1) solid var(--color-blue-500);
+      text-decoration: none;
+      color: var(--color-blue-500);
+
+      &:hover {
+        text-decoration: none;
+        color: var(--color-blue-600);
+        border-bottom: var(--spacing-1) solid var(--color-blue-600);
+      }
+    }
+
+    strong {
+      font-weight: var(--typography-button-secondary-font-weight);
+    }
+
+    p {
+      font-weight: inherit;
+    }
+  }
+
+  .inline .text,
+  .toast .text {
+    position: relative;
+    font-family: var(--typography-paragraph-small-font-family);
+    font-weight: var(--typography-paragraph-small-font-weight);
+    font-size: var(--typography-paragraph-small-font-size);
+    line-height: var(--typography-paragraph-small-line-height);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
+
+    /*
+    When the title and text are on different lines this ensures the baselines of the first lines are exactly 1 grid unit apart.
+    When they are both on a single line it ensures both are 1 grid unit tall.
+    */
+    margin-top: var(--spacing-6);
+    flex: 0 1 auto;
+    padding-bottom: var(--spacing-12);
+    top: 0.21em;
+  }
+
+  .toast .text {
+    width: 100%;
+  }
+
+  .global .text {
+    position: static;
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  }
+
+  /* Structure: .cancel from %ca-notification__cancel */
+  .cancel {
+    cursor: pointer;
+    appearance: none;
+    transition: none;
+    transform: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    font: inherit;
+    color: var(--color-purple-800);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-solid-border-radius);
+
+    .icon {
+      opacity: 0.7;
+      transition: var(--animation-duration-fast) opacity;
+    }
+
+    &:disabled,
+    &.disabled {
+      .icon {
+        opacity: 0.3;
+      }
+    }
+
+    &:not(:disabled, .disabled) {
+      &:hover,
+      &:focus,
+      &.hover {
+        .icon {
+          opacity: 1;
+        }
+      }
+
+      &:active,
+      &.active {
+        .icon {
+          opacity: 1;
+        }
+      }
+    }
+
+    &:active {
+      transform: translateY(1px);
+    }
+
+    &:focus-visible {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: -4px;
+    }
+  }
+
+  .inline .cancel,
+  .toast .cancel {
+    width: var(--spacing-48);
+    height: var(--spacing-48);
+    margin-top: calc(-1 * var(--spacing-6));
+    margin-bottom: calc(-1 * var(--spacing-6));
+  }
+
+  .inline .cancel {
+    margin-inline-end: calc(-1 * var(--spacing-12));
+  }
+
+  .toast .cancel {
+    margin-inline-end: -10px;
+  }
+
+  .global .cancel {
+    width: var(--spacing-48);
+    height: var(--spacing-48);
+    margin-top: calc(-1 * var(--spacing-24));
+    margin-bottom: calc(-1 * var(--spacing-24));
+  }
+
+  /* Structure: .cancelLabel from %ca-notification__cancel__label */
+  .cancelLabel {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: rect(0 0 0 0);
+    border: 0;
+  }
+
+  /* Modifiers */
+  .noBottomMargin {
+    margin-bottom: 0;
+  }
+
+  .persistent {
+    transition: none;
+  }
+
+  /* This is only for inline notifications */
+  .subtle {
+    background: none;
+    border: none;
+    padding: 0;
+  }
+}

package/src/Notification/subcomponents/GenericNotification/GenericNotification.tsx

@@ -7,7 +7,7 @@ import { isRefObject } from '~components/utils/isRefObject'
 import { CancelButton } from '../CancelButton'
 import { NotificationHeading } from '../NotificationHeading'
 import { NotificationIconVariant } from '../NotificationIcon'
-import styles from './GenericNotification.module.scss'
+import styles from './GenericNotification.module.css'
 
 type GenericNotificationBase = {
   style: 'global' | 'inline' | 'toast'

package/src/Notification/subcomponents/NotificationHeading/NotificationHeading.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Heading, type HeadingProps } from '~components/Heading'
-import styles from '../GenericNotification/GenericNotification.module.scss'
+import styles from '../GenericNotification/GenericNotification.module.css'
 
 type NotificationHeadingProps = {
   titleProp?: HeadingProps['children']

package/src/Select/Select.tsx

@@ -1,11 +1,13 @@
 import React, { useId, useState } from 'react'
 import classnames from 'classnames'
+import { useButton } from 'react-aria'
 import ReactSelect, {
   components,
   type NoticeProps,
   type Props as ReactSelectProps,
 } from 'react-select'
 import Async, { type AsyncProps as ReactAsyncSelectProps } from 'react-select/async'
+import { ClearButton } from '~components/ClearButton'
 import { FieldMessage } from '~components/FieldMessage'
 import { Icon } from '~components/Icon'
 import { Label } from '~components/Label'
@@ -140,7 +142,7 @@ export const AsyncSelect = React.forwardRef(
         MultiValue,
         IndicatorsContainer,
         ValueContainer,
-        ClearIndicator: undefined,
+        ClearIndicator,
         IndicatorSeparator: null,
         LoadingMessage,
       }}
@@ -235,8 +237,8 @@ const Input: typeof components.Input = (props) => (
 const ValueContainer: typeof components.ValueContainer = (props) => (
   <components.ValueContainer {...props} className={styles.valueContainer} />
 )
-const ClearIndicator: typeof components.ClearIndicator = (props) => (
-  <components.ClearIndicator {...props} className={styles.clearIndicator}>
-    <Icon name="cancel" isPresentational isFilled />
-  </components.ClearIndicator>
-)
+const ClearIndicator: typeof components.ClearIndicator = (props) => {
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const { buttonProps } = useButton({ ...props, onClick: props.clearValue }, buttonRef)
+  return <ClearButton {...buttonProps} classNameOverride={styles.clearIndicator} />
+}

package/src/Text/Text.module.css

@@ -0,0 +1,71 @@
+@layer kz-components {
+  .text {
+    --icon-vertical-align: text-bottom;
+
+    margin: 0;
+
+    strong {
+      font-weight: var(--typography-paragraph-bold-font-weight);
+    }
+  }
+
+  .intro-lede {
+    font-family: var(--typography-paragraph-intro-lede-font-family);
+    font-weight: var(--typography-paragraph-intro-lede-font-weight);
+    font-size: var(--typography-paragraph-intro-lede-font-size);
+    line-height: var(--typography-paragraph-intro-lede-line-height);
+    letter-spacing: var(--typography-paragraph-intro-lede-letter-spacing);
+  }
+
+  .body {
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  }
+
+  .small {
+    font-family: var(--typography-paragraph-small-font-family);
+    font-weight: var(--typography-paragraph-small-font-weight);
+    font-size: var(--typography-paragraph-small-font-size);
+    line-height: var(--typography-paragraph-small-line-height);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
+  }
+
+  .extra-small {
+    font-family: var(--typography-paragraph-extra-small-font-family);
+    font-weight: var(--typography-paragraph-extra-small-font-weight);
+    font-size: var(--typography-paragraph-extra-small-font-size);
+    line-height: var(--typography-paragraph-extra-small-line-height);
+    letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
+  }
+
+  .dark {
+    color: var(--color-purple-800);
+    opacity: 1;
+  }
+
+  .dark-reduced-opacity {
+    color: var(--color-purple-800);
+    opacity: 0.7;
+  }
+
+  .white {
+    color: var(--color-white);
+    opacity: 1;
+  }
+
+  .white-reduced-opacity {
+    color: var(--color-white);
+    opacity: 0.8;
+  }
+
+  .positive {
+    color: var(--color-green-600);
+  }
+
+  .negative {
+    color: var(--color-red-600);
+  }
+}

package/src/Text/Text.tsx

@@ -1,7 +1,7 @@
 import { createElement, type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Text.module.scss'
+import styles from './Text.module.css'
 
 export type TextVariants = 'intro-lede' | 'body' | 'small' | 'extra-small'
 

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.css

@@ -0,0 +1,141 @@
+@layer kz-components {
+  :root {
+    --animation-timing: var(--animation-duration-immediate) var(--animation-easing-function-linear);
+    --focus-ring-offset: 1px;
+  }
+
+  .checkbox {
+    /* Reset checkbox */
+    opacity: 0;
+    position: absolute;
+
+    :global(.ideal-sans) & {
+      /* This is to override bootstrap styles. Remove when appropriate */
+      position: absolute;
+    }
+  }
+
+  .track {
+    position: relative;
+    background-color: var(--color-gray-500);
+    border: var(--border-borderless-border-width) var(--border-borderless-border-style)
+      var(--border-borderless-border-color);
+    border-radius: var(--spacing-md);
+    box-sizing: content-box;
+    width: calc((var(--spacing-md) * 1.05) * 2);
+    height: calc(var(--spacing-md) * 1.25);
+    padding: 0 calc(var(--spacing-md) * 0.15);
+    display: flex;
+    align-items: center;
+    transition: background-color var(--animation-timing);
+
+    /* TODO: Fix */
+    /* stylelint-disable no-descending-specificity */
+    .checkbox:not(.disabled):focus + &,
+    .checkbox:not(.disabled):hover:focus + & {
+      border-color: transparent;
+      outline: 2px solid var(--color-blue-500);
+      outline-offset: var(--focus-ring-offset);
+      background-color: var(--color-gray-600);
+    }
+
+    .checkbox:not(.disabled) + &:hover,
+    label:hover .checkbox:not(.disabled) + & {
+      background-color: var(--color-gray-600);
+    }
+
+    /* stylelint-enable no-descending-specificity */
+  }
+
+  .thumb {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-white);
+    border: var(--border-borderless-border-width) var(--border-borderless-border-style)
+      var(--border-borderless-border-color);
+    border-radius: var(--spacing-md);
+    transition:
+      left var(--animation-timing),
+      right var(--animation-timing);
+    cursor: default;
+  }
+
+  .checkIcon {
+    color: var(--color-green-500);
+    opacity: 0;
+    transition-duration: var(--animation-duration-rapid);
+  }
+
+  /* stylelint-disable no-descending-specificity */
+  .on {
+    .checkbox + .track {
+      border-color: var(--border-borderless-border-color);
+      background-color: var(--color-green-500);
+    }
+
+    .checkbox:focus + .track {
+      border-color: transparent;
+      background-color: var(--color-green-600);
+    }
+
+    .thumb {
+      position: relative;
+      right: auto;
+      inset-inline-start: calc(var(--spacing-md) * 1.1);
+    }
+
+    .checkIcon {
+      opacity: 1;
+      transition-delay: var(--animation-duration-immediate);
+      transition-duration: var(--animation-duration-fast);
+    }
+
+    .checkbox:not(.disabled) + .track:hover,
+    label:hover & .checkbox:not(.disabled) + .track {
+      background-color: var(--color-green-600);
+    }
+  }
+
+  .off {
+    .thumb {
+      position: relative;
+      right: auto;
+      inset-inline-start: calc(var(--spacing-md) * -0.05);
+    }
+  }
+
+  .reversed {
+    .checkbox:focus + .track,
+    .checkbox:hover:focus + .track {
+      outline-color: var(--color-blue-300);
+    }
+
+    &.off {
+      .track {
+        background-color: rgb(var(--color-white-rgb), 0.2);
+      }
+
+      .checkbox:focus + .track,
+      .checkbox:hover:focus + .track {
+        background-color: rgb(var(--color-white-rgb), 0.65);
+      }
+
+      .checkbox:not(.disabled) + .track:hover,
+      label:hover & .checkbox:not(.disabled) + .track {
+        background-color: rgb(var(--color-white-rgb), 0.65);
+      }
+    }
+  }
+
+  /* When the ToggleSwitch is used as part of the ToggleSwitchField, the disabled state opacity is set on the Label component */
+  label .disabled.track {
+    opacity: 1;
+  }
+
+  .disabled.track {
+    opacity: 0.3;
+  }
+
+  /* stylelint-enable no-descending-specificity */
+}

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx

@@ -2,7 +2,7 @@ import React, { type InputHTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { Icon } from '~components/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './ToggleSwitch.module.scss'
+import styles from './ToggleSwitch.module.css'
 
 export type ToggledStatus = 'on' | 'off'
 

package/src/ToggleSwitch/ToggleSwitchField/{ToggleSwitchField.module.scss → ToggleSwitchField.module.css}

@@ -1,5 +1,3 @@
-@import '~@kaizen/design-tokens/sass/typography';
-
 @layer kz-components {
   .container {
     display: flex;
@@ -12,6 +10,6 @@
   }
 
   .on label {
-    font-weight: $typography-paragraph-bold-font-weight;
+    font-weight: var(--typography-paragraph-bold-font-weight);
   }
 }

package/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.tsx

@@ -7,7 +7,7 @@ import {
   type ToggleSwitchProps,
   type ToggledStatus,
 } from '../ToggleSwitch/ToggleSwitch'
-import styles from './ToggleSwitchField.module.scss'
+import styles from './ToggleSwitchField.module.css'
 
 export type ToggleSwitchFieldProps = {
   labelText: React.ReactNode