@kaizen/components 2.4.0 → 2.5.1

package/src/Heading/Heading.module.css

@@ -0,0 +1,111 @@
+@layer reset {
+  .heading {
+    margin: 0;
+  }
+}
+
+@layer kz-components {
+  .display-0 {
+    font-family: var(--typography-display-0-font-family);
+    font-weight: var(--typography-display-0-font-weight);
+    font-size: var(--typography-display-0-font-size);
+    line-height: var(--typography-display-0-line-height);
+    letter-spacing: var(--typography-display-0-letter-spacing);
+  }
+
+  .composable-header-title {
+    font-family: var(--typography-display-0-font-family); /* Tiempos */
+    font-weight: 500; /* Medium */
+    font-size: var(--typography-heading-1-font-size);
+    line-height: var(--typography-heading-1-line-height);
+    letter-spacing: var(--typography-heading-1-letter-spacing);
+  }
+
+  .heading-1 {
+    font-family: var(--typography-heading-1-font-family);
+    font-weight: var(--typography-heading-1-font-weight);
+    font-size: var(--typography-heading-1-font-size);
+    line-height: var(--typography-heading-1-line-height);
+    letter-spacing: var(--typography-heading-1-letter-spacing);
+  }
+
+  .heading-2 {
+    font-family: var(--typography-heading-2-font-family);
+    font-weight: var(--typography-heading-2-font-weight);
+    font-size: var(--typography-heading-2-font-size);
+    line-height: var(--typography-heading-2-line-height);
+    letter-spacing: var(--typography-heading-2-letter-spacing);
+  }
+
+  .heading-3 {
+    font-family: var(--typography-heading-3-font-family);
+    font-weight: var(--typography-heading-3-font-weight);
+    font-size: var(--typography-heading-3-font-size);
+    line-height: var(--typography-heading-3-line-height);
+    letter-spacing: var(--typography-heading-3-letter-spacing);
+  }
+
+  .heading-4 {
+    font-family: var(--typography-heading-4-font-family);
+    font-weight: var(--typography-heading-4-font-weight);
+    font-size: var(--typography-heading-4-font-size);
+    line-height: var(--typography-heading-4-line-height);
+    letter-spacing: var(--typography-heading-4-letter-spacing);
+  }
+
+  .heading-5 {
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    font-size: var(--typography-heading-5-font-size);
+    line-height: var(--typography-heading-5-line-height);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+
+  .heading-6 {
+    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);
+  }
+
+  .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 {
+    &.small {
+      color: var(--color-green-600);
+    }
+
+    &.large {
+      color: var(--color-green-500);
+    }
+  }
+
+  .negative {
+    &.small {
+      color: var(--color-red-600);
+    }
+
+    &.large {
+      color: var(--color-red-500);
+    }
+  }
+}

package/src/Heading/Heading.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 './Heading.module.scss'
+import styles from './Heading.module.css'
 
 const VARIANTS_24PX_OR_GREATER = ['display-0', 'heading-1', 'heading-2']
 

package/src/Label/Label.module.css

@@ -0,0 +1,97 @@
+@layer kz-components {
+  :root {
+    --label-start-margin: var(--spacing-xs);
+    --dt-color-form-text-color: var(--color-purple-800);
+  }
+
+  .label {
+    --icon-vertical-align: text-bottom;
+  }
+
+  .label,
+  :global(.ideal-sans) .label {
+    /* override Murmur global styles :( */
+    opacity: inherit;
+    color: var(--dt-color-form-text-color);
+    visibility: visible;
+    width: 100%;
+    text-align: start;
+  }
+
+  .reversed {
+    color: var(--color-white);
+
+    a {
+      color: var(--color-white);
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .disabled {
+    opacity: 0.3;
+  }
+
+  /* ///////////////////////////////////////////////////
+  ////  LABEL TYPES
+  //////////////////////////////////////////////////// */
+
+  /* This is to override bootstrap styles. Remove when appropriate */
+  .text,
+  :global(.ideal-sans) .text {
+    font-family: var(--typography-heading-6-font-family);
+    font-size: var(--typography-heading-6-font-size);
+    line-height: var(--typography-heading-6-line-height);
+    letter-spacing: var(--typography-heading-6-letter-spacing);
+    font-weight: var(--typography-heading-6-font-weight);
+  }
+
+  .checkboxOrRadio,
+  .checkbox,
+  .radio,
+  :global(.ideal-sans) .checkboxOrRadio {
+    display: flex;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    font-weight: var(--typography-paragraph-body-font-weight);
+  }
+
+  .toggle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    font-weight: var(--typography-paragraph-body-font-weight);
+  }
+
+  .checkbox,
+  .radio,
+  .toggle {
+    /* apply padding when label is inline with form control */
+    .prependedLabel {
+      order: -1; /* place label before the control */
+      margin-inline-end: var(--label-start-margin);
+    }
+
+    .appendedLabel {
+      margin-inline-start: var(--label-start-margin);
+    }
+  }
+
+  .prominent {
+    font-family: var(--typography-heading-4-font-family);
+    font-weight: var(--typography-heading-4-font-weight);
+    font-size: var(--typography-heading-4-font-size);
+    line-height: var(--typography-heading-4-line-height);
+    letter-spacing: var(--typography-heading-4-letter-spacing);
+    display: block;
+    margin-bottom: var(--spacing-xs);
+  }
+}

package/src/Label/Label.tsx

@@ -1,7 +1,7 @@
 import React, { type LabelHTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Label.module.scss'
+import styles from './Label.module.css'
 
 type LabelType = 'text' | 'checkbox' | 'toggle' | 'radio'
 

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { type Meta } from '@storybook/react'
+import { Link } from '~components/Link'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { Label, type LabelProps } from '../index'
 import { BlockLabelTypes, InlineLabelTypes } from '../types'
@@ -35,12 +36,14 @@ const InlineControl = ({ labelText, ...props }: WrapperProps): JSX.Element => (
     labelText={
       <span data-sb-a11y-color-contrast-disable={props['data-sb-a11y-color-contrast-disable']}>
         {labelText}{' '}
-        <a
+        <Link
           href="/"
+          isInline={true}
+          {...(props.reversed ? { variant: 'white' } : {})}
           data-sb-a11y-color-contrast-disable={props['data-sb-a11y-color-contrast-disable']}
         >
           a
-        </a>
+        </Link>
       </span>
     }
   >
@@ -55,12 +58,14 @@ const BlockControl = ({ labelText, ...props }: WrapperProps): JSX.Element => (
       labelText={
         <span data-sb-a11y-color-contrast-disable={props['data-sb-a11y-color-contrast-disable']}>
           {labelText}{' '}
-          <a
+          <Link
             href="/"
+            isInline={true}
+            {...(props.reversed ? { variant: 'white' } : {})}
             data-sb-a11y-color-contrast-disable={props['data-sb-a11y-color-contrast-disable']}
           >
             anchor
-          </a>
+          </Link>
         </span>
       }
     />

package/src/LabelledMessage/{LabelledMessage.module.scss → LabelledMessage.module.css}

@@ -1,5 +1,3 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-
 @layer kz-components {
   .labelledMessage {
     display: inline-flex;
@@ -7,6 +5,6 @@
   }
 
   .labelSeparator {
-    margin-inline-end: $spacing-6;
+    margin-inline-end: var(--spacing-6);
   }
 }

package/src/LabelledMessage/LabelledMessage.tsx

@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './LabelledMessage.module.scss'
+import styles from './LabelledMessage.module.css'
 
 export type LabelledMessageProps = {
   label: string | React.ReactElement

package/src/Notification/InlineNotification/InlineNotification.tsx

@@ -6,7 +6,7 @@ import {
   GenericNotification,
   type GenericNotificationVariant,
 } from '../subcomponents/GenericNotification'
-import styles from '../subcomponents/GenericNotification/GenericNotification.module.scss'
+import styles from '../subcomponents/GenericNotification/GenericNotification.module.css'
 
 export type InlineNotificationBase = {
   children?: React.ReactNode

package/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx

@@ -7,7 +7,7 @@ import { InlineNotification, type InlineNotificationProps } from '../InlineNotif
 export default {
   title: 'Components/Notifications/InlineNotification',
   parameters: {
-    chromatic: { disable: false },
+    chromatic: { disable: false, viewports: [767, 1079, 1200] },
     controls: { disable: true },
     a11y: {
       // Fade-in animation has colour contrast issues.

package/src/Notification/ToastNotification/ToastNotificationsList/{ToastNotificationsList.module.scss → ToastNotificationsList.module.css}

@@ -1,6 +1,3 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/layout';
-
 @layer kz-components {
   .toastNotificationsList {
     display: flex;
@@ -8,21 +5,22 @@
     align-items: flex-end;
     overflow: hidden;
     padding-bottom: 0;
-    padding-top: 160px + 12px;
+    padding-top: 172px;
     position: fixed;
-    right: $spacing-md;
+    right: var(--spacing-md);
     top: 0;
     bottom: 0;
     z-index: 1100;
     max-width: 100%;
     pointer-events: none;
 
-    @media (max-width: ($layout-breakpoints-large - 1px)) {
+    /* Media queries can’t perform this calculation yet. Update when CSS supports it.  */
+    @media (width <= 1079px) {
       padding-top: 108px;
     }
 
-    @media (max-width: ($layout-breakpoints-medium - 1px)) {
-      left: $spacing-md;
+    @media (width <= 767px) {
+      left: var(--spacing-md);
     }
   }
 }

package/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useToastNotificationContext } from '../context/ToastNotificationContext'
 import { ToastNotificationsMap } from './subcomponents/ToastNotificationsMap'
-import styles from './ToastNotificationsList.module.scss'
+import styles from './ToastNotificationsList.module.css'
 
 const toastNotificationListId = 'toast-notifications-list'
 

package/src/Notification/subcomponents/CancelButton/CancelButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Icon } from '~components/Icon'
-import styles from '../GenericNotification/GenericNotification.module.scss'
+import styles from '../GenericNotification/GenericNotification.module.css'
 
 type CancelButtonProps = {
   onClick: (e: React.MouseEvent<HTMLButtonElement>) => void