@kaizen/components 2.4.0 → 3.0.0

package/src/GuidanceBlock/_docs/GuidanceBlock.stories.tsx

@@ -39,9 +39,6 @@ const meta = {
     illustration: <Informative alt="" />,
   },
   argTypes: {
-    actions: {
-      control: false,
-    },
     illustrationType: {
       description:
         'Sets the how the width and aspect ratio will respond to the Illustration passed in.',
@@ -138,42 +135,6 @@ export const Playground: Story = {
   },
 }
 
-export const Actions: Story = {
-  args: {
-    content: <ContentComponent />,
-    actions: {
-      primary: {
-        label: 'Label',
-        onClick: () => alert('tada: 🎉'),
-      },
-      secondary: {
-        label: 'Label',
-        href: '#',
-      },
-    },
-  },
-}
-
-export const Tooltip: Story = {
-  args: {
-    content: <ContentComponent />,
-    actions: {
-      primary: {
-        label: 'Label',
-        onClick: () => alert('tada: 🎉'),
-        tooltip: {
-          text: 'Opens in a new tab',
-          mood: 'cautionary',
-        },
-      },
-      secondary: {
-        label: 'Label',
-        href: '#',
-      },
-    },
-  },
-}
-
 export const CustomContent: Story = {
   args: {
     content: <ContentComponent />,
@@ -214,57 +175,6 @@ export const Variants: Story = {
   },
 }
 
-export const ActionsVsActionsSlot: Story = {
-  args: {
-    layout: 'default',
-    illustration: <Informative alt="" />,
-    content: <ContentComponent />,
-    actions: {
-      dismiss: {
-        onClick: () => {
-          alert('Dismissed')
-        },
-      },
-      primary: {
-        label: 'Label',
-        onClick: () => alert('tada: 🎉'),
-      },
-      secondary: {
-        label: 'Label',
-        href: '#',
-      },
-    },
-    secondaryDismiss: true,
-  },
-  render: (args) => (
-    <div className="flex flex-col gap-16">
-      <GuidanceBlock
-        layout="default"
-        illustration={<Informative alt="" />}
-        content={<ContentComponent />}
-        actions={args.actions}
-        secondaryDismiss
-      />
-      <GuidanceBlock
-        layout="default"
-        illustration={<Informative alt="" />}
-        content={<ContentComponent />}
-        secondaryDismiss={true}
-        actionsSlot={
-          <>
-            <Button size="large" onPress={() => alert('tada: 🎉')} slot="primary">
-              Label
-            </Button>
-            <Button variant="tertiary" size="large" onPress={() => alert('tada: 🎉')}>
-              Label
-            </Button>
-          </>
-        }
-      />
-    </div>
-  ),
-}
-
 export const ActionsSlot: Story = {
   args: {
     layout: 'default',

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/Input/Input/Input.module.scss

@@ -8,7 +8,6 @@
   $input-height: 48px;
   $input-base-padding-horizontal: $spacing-sm;
   $input-icon-size: 1.25rem; // 20px
-  $input-placeholder-opacity: 0.5;
   $input-disabled-background: $color-gray-300;
   $input-disabled-opacity: 0.3;
   $input-disabled-border-alpha: 50%;
@@ -45,29 +44,17 @@
     width: 100%;
     margin-bottom: 2px;
 
-    @include form-input-placeholder {
-      opacity: 100%;
-    }
-
     &:focus:not([disabled]),
     &:hover:focus:not([disabled]) {
       outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
         var(--color-blue-500);
       outline-offset: 1px;
-
-      @include form-input-placeholder {
-        opacity: 0%;
-      }
     }
 
     &.disabled {
       &:not(.reversed) {
         background: $input-disabled-background;
       }
-
-      @include form-input-placeholder {
-        color: rgba($color-purple-800-rgb, $input-disabled-opacity);
-      }
     }
   }
 
@@ -204,11 +191,6 @@
     display: flex;
     align-items: center;
 
-    @include form-input-placeholder {
-      color: $color-purple-800;
-      opacity: $input-placeholder-opacity;
-    }
-
     @include form-input-focus-state {
       background-color: $color-gray-200;
     }
@@ -221,10 +203,6 @@
       background-color: $color-white;
       border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
       color: rgba($color-purple-800-rgb, $input-disabled-opacity);
-
-      @include form-input-placeholder {
-        opacity: $input-disabled-opacity;
-      }
     }
 
     &:not(.error, .caution) {
@@ -261,11 +239,6 @@
     background: transparent;
     color: $color-white;
 
-    @include form-input-placeholder {
-      color: $color-white;
-      opacity: $input-placeholder-opacity;
-    }
-
     @include form-input-focus-state {
       background: rgba($color-white-rgb, 0.1);
     }
@@ -289,10 +262,6 @@
     &.disabled {
       background: transparent;
       color: rgba($color-white-rgb, $input-disabled-opacity);
-
-      @include form-input-placeholder {
-        opacity: $input-disabled-opacity;
-      }
     }
 
     &.error {

package/src/Input/Input/Input.tsx

@@ -14,12 +14,7 @@ export type InputProps = {
   endIconAdornment?: React.ReactNode
   reversed?: boolean
   type?: InputType
-  /**
-   * @deprecated Use of placeholder text goes against our a11y standards.
-   * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
-   */
-  placeholder?: string
-} & OverrideClassName<InputHTMLAttributes<HTMLInputElement>>
+} & OverrideClassName<Omit<InputHTMLAttributes<HTMLInputElement>, 'placeholder'>>
 
 export const Input = ({
   inputRef,

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/LinkButton/LinkButton.tsx

@@ -25,13 +25,11 @@ export const LinkButton = forwardRef(
       isFullWidth = false,
       isDisabled,
       className,
-      isReversed,
       ...otherProps
     }: LinkButtonProps,
     ref: React.ForwardedRef<HTMLAnchorElement>,
   ) => {
-    const shouldUseReverse = useReversedColors()
-    const isReversedVariant = isReversed ?? shouldUseReverse
+    const isReversedVariant = useReversedColors()
 
     return (
       <RACLink

package/src/LinkButton/_docs/LinkButton--api-specification.mdx

@@ -39,7 +39,6 @@ The following example and table showcases the essential props that enable the co
     'variant',
     'icon',
     'iconPosition',
-    'isReversed',
     'isFullWidth',
     'isDisabled',
   ]}

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -102,7 +102,12 @@ export const ConfirmationModal = ({
   const footerActions: ButtonProps[] = []
 
   if (onConfirm) {
-    const confirmAction = { label: confirmLabel, onClick: onConfirm }
+    const confirmAction = {
+      label: confirmLabel,
+      onClick: onConfirm,
+      destructive: variant === 'warning',
+      primary: variant !== 'warning',
+    }
     const workingProps = confirmWorking
       ? {
           working: true,
@@ -154,11 +159,7 @@ export const ConfirmationModal = ({
             <ModalAccessibleDescription>{children}</ModalAccessibleDescription>
           </div>
         </ModalBody>
-        <ModalFooter
-          actions={footerActions}
-          appearance={variant == 'warning' ? 'destructive' : 'primary'}
-          unpadded={unpadded}
-        />
+        <ModalFooter actions={footerActions} unpadded={unpadded} />
       </div>
     </GenericModal>
   )

package/src/Modal/ContextModal/ContextModal.tsx

@@ -133,7 +133,6 @@ export const ContextModal = ({
         <ModalFooter
           variant={image ? 'context' : undefined}
           actions={footerActions}
-          appearance="primary"
           unpadded={unpadded}
         />
       </div>

package/src/Modal/GenericModal/GenericModal.tsx

@@ -5,7 +5,6 @@ import classnames from 'classnames'
 import { FocusOn } from 'react-focus-on'
 import { useIsClientReady } from '../../utils/useIsClientReady'
 
-import { warn } from '../util/console'
 import { ModalContext } from './context/ModalContext'
 import styles from './GenericModal.module.scss'
 
@@ -63,9 +62,9 @@ export const GenericModal = ({
     // Ensure that consumers have provided an element that labels the modal
     // to meet ARIA accessibility guidelines.
     if (!document.getElementById(labelledByID)) {
-      warn(
-        `When using the Modal component, you must provide a label for the modal.
-        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.`,
+      // eslint-disable-next-line no-console
+      console.warn(
+        'When using the Modal component, you must provide a label for the modal. Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.',
       )
     }
   }

package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.tsx

@@ -18,10 +18,6 @@ export type ModalFooterProps = {
   'variant'?: ActionsVariantProps
   'unpadded'?: boolean
   'actions': ButtonProps[]
-  /**
-   * @deprecated we are no longer supporting different appearances for ModalFooter, instead there will only be a single default appearance set by the Button.
-   */
-  'appearance'?: 'primary' | 'destructive'
   'data-testid'?: string
   'alignStart'?: boolean
 } & HTMLAttributes<HTMLDivElement>
@@ -29,7 +25,6 @@ export type ModalFooterProps = {
 export const ModalFooter = ({
   unpadded,
   actions,
-  appearance = 'primary',
   alignStart,
   variant,
   ...props
@@ -51,9 +46,8 @@ export const ModalFooter = ({
           <div className={styles.actionButton} key={index}>
             <Button
               type="button"
-              primary={index === 0 && appearance === 'primary'}
-              destructive={index === 0 && appearance === 'destructive'}
-              secondary={index > 0}
+              primary={index === 0 && !action.destructive && !action.secondary}
+              secondary={index > 0 && !action.destructive && !action.primary}
               fullWidth={queries.isSmall}
               {...action}
             />

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'