@kaizen/components 2.3.7 → 2.5.0

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/Tag/Tag.module.css

@@ -0,0 +1,217 @@
+@layer kz-components {
+  .root {
+    --medium: calc(var(--spacing-md) * 1.25);
+    --small: var(--spacing-md);
+
+    margin-inline-end: calc(var(--spacing-md) * 0.5);
+    font-size: var(--typography-paragraph-small-font-size);
+    font-weight: var(--typography-paragraph-small-font-weight);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
+    color: var(--color-purple-800);
+    display: inline-block;
+    border: var(--border-borderless-border-width) var(--border-borderless-border-style)
+      var(--border-borderless-border-color);
+    border-radius: calc(var(--spacing-md) * 0.75);
+    padding: 0 calc(var(--spacing-md) * 0.4);
+    box-sizing: border-box;
+
+    &.profile {
+      padding-left: calc(var(--spacing-md) * 0.2);
+    }
+  }
+
+  .layoutContainer {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .validationIcon {
+    align-items: center;
+    display: flex;
+    color: var(--color-white);
+    margin-inline: calc(var(--spacing-md) * -0.15) var(--spacing-xs);
+  }
+
+  .profile {
+    margin-inline: calc(var(--spacing-md) * -0.15) var(--spacing-xs);
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .textContent {
+    margin-top: -1px;
+    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);
+    white-space: nowrap;
+  }
+
+  .iconWrapper {
+    --icon-size: 16;
+
+    position: relative;
+    height: 16px;
+    width: 16px;
+  }
+
+  .dismissButton {
+    /* Replace @include button-reset to reset button's style */
+    appearance: none;
+    background: transparent;
+    font: inherit;
+    margin: 0;
+    border: none;
+
+    /* Original style */
+    position: relative;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    padding: 0 var(--spacing-xs);
+    margin-inline: -0.225rem -0.6625rem;
+    color: rgb(var(--color-purple-800-rgb), 0.7);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-purple-800);
+    }
+
+    &:active {
+      color: var(--color-purple-800);
+    }
+
+    svg {
+      position: relative;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible .iconWrapper {
+      color: var(--color-purple-800);
+
+      &::after {
+        --focus-ring-offset: calc((var(--border-focus-ring-border-width)));
+
+        content: '';
+        position: absolute;
+        background: transparent;
+        border-radius: 50%;
+        border-width: var(--border-focus-ring-border-width);
+        border-style: var(--border-focus-ring-border-style);
+        border-color: var(--color-blue-500);
+        inset: calc(-1 * var(--focus-ring-offset));
+      }
+    }
+  }
+
+  .background {
+    /*
+    As our icons are only one-tone, this span places
+    a white background under the dismissible icon to
+    give the illusion of a background colour that is
+    different to the rest of the tag
+    */
+    position: absolute;
+    display: inline-block;
+    width: calc(var(--spacing-xs) + 0.125rem); /* optical adjustment */
+    height: calc(var(--spacing-xs) + 0.125rem); /* optical adjustment */
+    background-color: white;
+    left: 10px;
+    top: 10px;
+  }
+
+  .truncate {
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    white-space: nowrap;
+  }
+
+  .inline {
+    margin: 0;
+  }
+
+  .medium {
+    height: var(--medium);
+  }
+
+  .small {
+    height: var(--small);
+  }
+
+  .default {
+    background-color: var(--color-gray-300);
+  }
+
+  .sentimentPositive {
+    background-color: var(--color-green-100);
+  }
+
+  .sentimentNeutral {
+    background-color: var(--color-gray-300);
+  }
+
+  .sentimentNegative {
+    background-color: var(--color-red-100);
+  }
+
+  .sentimentNone {
+    background-color: var(--color-white);
+    border-color: var(--color-gray-300);
+  }
+
+  .validationPositive {
+    background-color: var(--color-green-100);
+
+    .validationIcon {
+      color: var(--color-green-500);
+    }
+  }
+
+  .validationInformative {
+    background-color: var(--color-blue-100);
+
+    .validationIcon {
+      color: var(--color-blue-500);
+    }
+  }
+
+  .validationNegative {
+    background-color: var(--color-red-100);
+
+    .validationIcon {
+      color: var(--color-red-500);
+    }
+  }
+
+  .validationCautionary {
+    background-color: var(--color-yellow-100);
+
+    .validationIcon {
+      color: var(--color-yellow-700);
+    }
+  }
+
+  .statusLive {
+    background-color: var(--color-green-100);
+    color: var(--color-purple-800);
+  }
+
+  .statusAction {
+    background-color: var(--color-orange-100);
+    color: var(--color-purple-800);
+  }
+
+  .statusClosed {
+    background-color: var(--color-red-100);
+  }
+
+  .statusDraft {
+    background-color: var(--color-blue-100);
+    color: var(--color-purple-800);
+  }
+}

package/src/Tag/Tag.tsx

@@ -4,7 +4,7 @@ import { Avatar, type AvatarProps } from '~components/Avatar'
 import { Icon } from '~components/Icon'
 import { LiveIcon } from './subcomponents/LiveIcon/LiveIcon'
 import { type TagVariants } from './types'
-import styles from './Tag.module.scss'
+import styles from './Tag.module.css'
 
 export type TagWithAvatarProps = Omit<DefaultTagProps, 'variant'> & {
   variant: 'profile'