@kaizen/components 2.3.7 → 2.4.0

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'

package/src/TimeField/TimeField.tsx

@@ -1,4 +1,4 @@
-import React, { useId } from 'react'
+import React, { useId, useMemo } from 'react'
 import { Time } from '@internationalized/date'
 import { useTimeField } from '@react-aria/datepicker'
 import { I18nProvider } from '@react-aria/i18n'
@@ -67,9 +67,15 @@ const TimeFieldComponent = ({
     onChange({ hour: timeValue.hour, minutes: timeValue.minute })
   }
 
+  const timeValue = useMemo(
+    () => (value ? new Time(value.hour, value.minutes) : null),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value?.hour, value?.minutes],
+  )
+
   const state = useTimeFieldState({
     ...restProps,
-    value: value ? new Time(value.hour, value.minutes) : null,
+    value: timeValue,
     onChange: handleOnChange,
     isDisabled,
     hideTimeZone: true,

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes, type ReactNode } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './VisuallyHidden.module.scss'
+import styles from './VisuallyHidden.module.css'
 
 export type VisuallyHiddenProps = {
   children: ReactNode

package/dist/cjs/src/Divider/Divider.module.scss.cjs

@@ -1,10 +0,0 @@
-'use strict';
-
-var styles = {
-  "wrapper": "Divider-module_wrapper__K5mht",
-  "content": "Divider-module_content__BhDyy",
-  "menuSeparator": "Divider-module_menuSeparator__kjXV5",
-  "canvas": "Divider-module_canvas__2eQT6",
-  "reversed": "Divider-module_reversed__puJw2"
-};
-module.exports = styles;

package/dist/cjs/src/ErrorPage/ErrorPage.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "paragraphPadding": "ErrorPage-module_paragraphPadding__-L-qy"
-};
-module.exports = styles;

package/dist/cjs/src/Tag/Tag.module.scss.cjs

@@ -1,30 +0,0 @@
-'use strict';
-
-var styles = {
-  "root": "Tag-module_root__uRhoc",
-  "profile": "Tag-module_profile__OoGsS",
-  "layoutContainer": "Tag-module_layoutContainer__pBLSz",
-  "validationIcon": "Tag-module_validationIcon__B-YLv",
-  "textContent": "Tag-module_textContent__q76X-",
-  "iconWrapper": "Tag-module_iconWrapper__aPrKH",
-  "dismissButton": "Tag-module_dismissButton__rHv7r",
-  "background": "Tag-module_background__LkzGB",
-  "truncate": "Tag-module_truncate__5w7HW",
-  "inline": "Tag-module_inline__pPM-d",
-  "medium": "Tag-module_medium__NkOrv",
-  "small": "Tag-module_small__-xyNk",
-  "default": "Tag-module_default__6PVke",
-  "sentimentPositive": "Tag-module_sentimentPositive__nbqE1",
-  "sentimentNeutral": "Tag-module_sentimentNeutral__8BtD8",
-  "sentimentNegative": "Tag-module_sentimentNegative__1J85t",
-  "sentimentNone": "Tag-module_sentimentNone__8BWjU",
-  "validationPositive": "Tag-module_validationPositive__vgFUE",
-  "validationInformative": "Tag-module_validationInformative__bnJ4A",
-  "validationNegative": "Tag-module_validationNegative__lZgIY",
-  "validationCautionary": "Tag-module_validationCautionary__ERS2t",
-  "statusLive": "Tag-module_statusLive__xG48w",
-  "statusAction": "Tag-module_statusAction__woL-O",
-  "statusClosed": "Tag-module_statusClosed__VhZP-",
-  "statusDraft": "Tag-module_statusDraft__9QZDv"
-};
-module.exports = styles;

package/dist/esm/src/Divider/Divider.module.scss.mjs

@@ -1,8 +0,0 @@
-var styles = {
-  "wrapper": "Divider-module_wrapper__K5mht",
-  "content": "Divider-module_content__BhDyy",
-  "menuSeparator": "Divider-module_menuSeparator__kjXV5",
-  "canvas": "Divider-module_canvas__2eQT6",
-  "reversed": "Divider-module_reversed__puJw2"
-};
-export { styles as default };

package/dist/esm/src/ErrorPage/ErrorPage.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "paragraphPadding": "ErrorPage-module_paragraphPadding__-L-qy"
-};
-export { styles as default };

package/dist/esm/src/Tag/Tag.module.scss.mjs

@@ -1,28 +0,0 @@
-var styles = {
-  "root": "Tag-module_root__uRhoc",
-  "profile": "Tag-module_profile__OoGsS",
-  "layoutContainer": "Tag-module_layoutContainer__pBLSz",
-  "validationIcon": "Tag-module_validationIcon__B-YLv",
-  "textContent": "Tag-module_textContent__q76X-",
-  "iconWrapper": "Tag-module_iconWrapper__aPrKH",
-  "dismissButton": "Tag-module_dismissButton__rHv7r",
-  "background": "Tag-module_background__LkzGB",
-  "truncate": "Tag-module_truncate__5w7HW",
-  "inline": "Tag-module_inline__pPM-d",
-  "medium": "Tag-module_medium__NkOrv",
-  "small": "Tag-module_small__-xyNk",
-  "default": "Tag-module_default__6PVke",
-  "sentimentPositive": "Tag-module_sentimentPositive__nbqE1",
-  "sentimentNeutral": "Tag-module_sentimentNeutral__8BtD8",
-  "sentimentNegative": "Tag-module_sentimentNegative__1J85t",
-  "sentimentNone": "Tag-module_sentimentNone__8BWjU",
-  "validationPositive": "Tag-module_validationPositive__vgFUE",
-  "validationInformative": "Tag-module_validationInformative__bnJ4A",
-  "validationNegative": "Tag-module_validationNegative__lZgIY",
-  "validationCautionary": "Tag-module_validationCautionary__ERS2t",
-  "statusLive": "Tag-module_statusLive__xG48w",
-  "statusAction": "Tag-module_statusAction__woL-O",
-  "statusClosed": "Tag-module_statusClosed__VhZP-",
-  "statusDraft": "Tag-module_statusDraft__9QZDv"
-};
-export { styles as default };

package/dist/esm/src/VisuallyHidden/VisuallyHidden.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "srOnly": "VisuallyHidden-module_srOnly__tTjOK"
-};
-export { styles as default };

package/src/Content/Content.module.scss

@@ -1,17 +0,0 @@
-@import '~@kaizen/design-tokens/sass/layout';
-@import './variables';
-
-@layer kz-components {
-  .content {
-    max-width: $layout-content-max-width;
-    margin: 0 $layout-content-side-margin;
-    width: 100%;
-
-    // Setting a min-width: 0 will maintain the gutter margins when the inner contents has something wider than the page (e.g. scrollable table)
-    min-width: 0;
-
-    @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
-      margin: 0 $content-margin-width-on-medium-and-small;
-    }
-  }
-}

package/src/Content/_variables.scss

@@ -1,3 +0,0 @@
-// This replicates the layout max-width logic in
-// packages/components/TitleBlock/TitleBlock.module.scss
-$content-margin-width-on-medium-and-small: 12px;

package/src/Divider/Divider.module.scss

@@ -1,39 +0,0 @@
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
-
-@layer kz-components {
-  // Use different tokens with different opacities across the Zen and Heart themes, by assuming that when Zen is applied there won't be any CSS variables declared.
-
-  $dt-content-border-color: rgba($color-gray-600-rgb, 0.1);
-
-  .wrapper {
-    width: 100%;
-    border: 0;
-    margin: 0;
-    border-radius: $border-solid-border-radius;
-    // This is here to protect against a global style in a consumer.
-    // https://github.com/cultureamp/murmur/blob/master/app/assets/stylesheets/legacy/modules/_body.scss
-    visibility: visible;
-  }
-
-  .content {
-    border-top: 1px solid;
-    border-color: $dt-content-border-color;
-  }
-
-  .canvas {
-    border-top: 1px solid;
-    border-bottom: 1px solid;
-    border-color: rgba($color-gray-600-rgb, 0.1);
-  }
-
-  .reversed {
-    border-color: rgba($color-white-rgb, 0.1);
-  }
-
-  .menuSeparator {
-    @extend .content; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
-
-    margin: 5px 0;
-  }
-}

package/src/ErrorPage/ErrorPage.module.scss

@@ -1,7 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-
-@layer kz-components {
-  .paragraphPadding {
-    padding: $spacing-24 0;
-  }
-}

package/src/Tag/Tag.module.scss

@@ -1,215 +0,0 @@
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '../../styles/utils/button-reset';
-
-@layer kz-components {
-  $medium: calc(#{$spacing-md} * 1.25);
-  $small: $spacing-md;
-
-  .root {
-    margin-inline-end: calc(#{$spacing-md} * 0.5);
-    font-size: $typography-paragraph-small-font-size;
-    font-weight: $typography-paragraph-small-font-weight;
-    letter-spacing: $typography-paragraph-small-letter-spacing;
-    color: $color-purple-800;
-    display: inline-block;
-    border: $border-borderless-border-width $border-borderless-border-style
-      $border-borderless-border-color;
-    border-radius: calc(#{$spacing-md} * 0.75);
-    padding: 0 calc(#{$spacing-md} * 0.4);
-    box-sizing: border-box;
-
-    &.profile {
-      padding-left: calc(#{$spacing-md} * 0.2);
-    }
-  }
-
-  .layoutContainer {
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
-
-  .validationIcon {
-    align-items: center;
-    display: flex;
-    color: $color-white;
-    margin-inline: calc(#{$spacing-md} * -0.15) $spacing-xs;
-  }
-
-  .profile {
-    margin-inline: calc(#{$spacing-md} * -0.15) $spacing-xs;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .textContent {
-    margin-top: -1px;
-    font-family: $typography-paragraph-small-font-family;
-    font-weight: $typography-paragraph-small-font-weight;
-    font-size: $typography-paragraph-small-font-size;
-    line-height: $typography-paragraph-small-line-height;
-    letter-spacing: $typography-paragraph-small-letter-spacing;
-    white-space: nowrap;
-  }
-
-  .iconWrapper {
-    --icon-size: 16;
-
-    position: relative;
-    height: 16px;
-    width: 16px;
-  }
-
-  .dismissButton {
-    @include button-reset;
-
-    position: relative;
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding: 0 $spacing-xs;
-    margin-inline: -0.225rem -0.6625rem;
-    color: rgba($color-purple-800-rgb, 0.7);
-    cursor: pointer;
-
-    &:hover {
-      color: $color-purple-800;
-    }
-
-    &:active {
-      color: $color-purple-800;
-    }
-
-    svg {
-      position: relative;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible .iconWrapper {
-      color: $color-purple-800;
-
-      &::after {
-        $focus-ring-offset: calc((#{$border-focus-ring-border-width}));
-
-        content: '';
-        position: absolute;
-        background: transparent;
-        border-radius: 50%;
-        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});
-      }
-    }
-  }
-
-  .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(#{$spacing-xs} + 0.125rem); // optical adjustment
-    height: calc(#{$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: $medium;
-  }
-
-  .small {
-    height: $small;
-  }
-
-  .default {
-    background-color: $color-gray-300;
-  }
-
-  .sentimentPositive {
-    background-color: $color-green-100;
-  }
-
-  .sentimentNeutral {
-    background-color: $color-gray-300;
-  }
-
-  .sentimentNegative {
-    background-color: $color-red-100;
-  }
-
-  .sentimentNone {
-    background-color: $color-white;
-    border-color: $color-gray-300;
-  }
-
-  .validationPositive {
-    background-color: $color-green-100;
-
-    .validationIcon {
-      color: $color-green-500;
-    }
-  }
-
-  .validationInformative {
-    background-color: $color-blue-100;
-
-    .validationIcon {
-      color: $color-blue-500;
-    }
-  }
-
-  .validationNegative {
-    background-color: $color-red-100;
-
-    .validationIcon {
-      color: $color-red-500;
-    }
-  }
-
-  .validationCautionary {
-    background-color: $color-yellow-100;
-
-    .validationIcon {
-      color: var(--color-yellow-700);
-    }
-  }
-
-  .statusLive {
-    background-color: $color-green-100;
-    color: $color-purple-800;
-  }
-
-  .statusAction {
-    background-color: $color-orange-100;
-    color: $color-purple-800;
-  }
-
-  .statusClosed {
-    background-color: $color-red-100;
-  }
-
-  .statusDraft {
-    background-color: $color-blue-100;
-    color: $color-purple-800;
-  }
-}