@kaizen/components 2.3.7 → 2.5.0

package/src/Content/_docs/Content.stories.tsx

@@ -51,7 +51,7 @@ export const Example: Story = {
     </Container>
   ),
   parameters: {
-    chromatic: { disable: false },
+    chromatic: { disable: false, viewports: [1079, 1200] },
     docs: {
       canvas: {
         sourceState: 'shown',

package/src/Content/_variables.css

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

package/src/Divider/Divider.module.css

@@ -0,0 +1,41 @@
+@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.
+  */
+
+  :root {
+    --dt-content-border-color: rgb(var(--color-gray-600-rgb), 0.1);
+  }
+
+  .wrapper {
+    width: 100%;
+    border: 0;
+    margin: 0;
+    border-radius: var(--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,
+  .menuSeparator {
+    border-top: 1px solid var(--dt-content-border-color);
+  }
+
+  .canvas {
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+    border-color: var(--dt-content-border-color);
+  }
+
+  .reversed {
+    border-color: rgb(var(--color-white-rgb), 0.1);
+  }
+
+  .menuSeparator {
+    margin: 5px 0;
+  }
+}

package/src/Divider/Divider.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 './Divider.module.scss'
+import styles from './Divider.module.css'
 
 export type DividerProps = {
   variant: 'content' | 'canvas' | 'menuSeparator'

package/src/ErrorPage/ErrorPage.module.css

@@ -0,0 +1,5 @@
+@layer kz-components {
+  .paragraphPadding {
+    padding: var(--spacing-24) 0;
+  }
+}

package/src/ErrorPage/ErrorPage.tsx

@@ -7,7 +7,7 @@ import { BrandMomentError } from '~components/Illustration'
 import { Text } from '~components/Text'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { useErrorMessages, type ErrorStatuses } from './hooks'
-import styles from './ErrorPage.module.scss'
+import styles from './ErrorPage.module.css'
 
 const getMailToHref = (code: ErrorStatuses): string => {
   const supportEmail = 'support@cultureamp.com'

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/Illustration/Spot/Spot.tsx

@@ -26,6 +26,12 @@ const createSpotIllustration =
 /* prettier-ignore */ export const Positive = createSpotIllustration("moods-positive.svg")
 /* prettier-ignore */ export const Assertive = createSpotIllustration("moods-assertive.svg")
 
+/**
+ * Template Library / PCD
+ */
+/* prettier-ignore */ export const PCDSurvey = createSpotIllustration("template-library-pcq-survey-full.svg")
+/* prettier-ignore */ export const PCDPulseSurvey = createSpotIllustration("template-library-pcq-survey-pulse.svg")
+
 /**
  * Template Library / Engagement
  */

package/src/Illustration/Spot/_docs/Spot.stickersheet.stories.tsx

@@ -79,6 +79,8 @@ import {
   NewYork,
   Objective,
   OneOnOne,
+  PCDPulseSurvey,
+  PCDSurvey,
   PaperPen,
   PartialImport,
   PerformanceDiagnostics,
@@ -145,6 +147,17 @@ export default {
   },
 } satisfies Meta
 
+const performanceCultureDiagnosticSpots = [
+  {
+    Component: PCDSurvey,
+    name: 'PCDSurvey',
+  },
+  {
+    Component: PCDPulseSurvey,
+    name: 'PCDPulseSurvey',
+  },
+]
+
 const engagementSpots = [
   {
     Component: BenefitsSurvey,
@@ -706,6 +719,15 @@ const IllustrationExampleTile = ({
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <div className="grid gap-24">
+      <div>
+        <Heading variant="heading-3">Performance Culture Diagnostic</Heading>
+        <div className="flex flex-wrap ">
+          {performanceCultureDiagnosticSpots.map((props, i) => (
+            <IllustrationExampleTile key={`engagement-${i}`} {...props} />
+          ))}
+        </div>
+      </div>
+
       <div>
         <Heading variant="heading-3">Engagement</Heading>
         <div className="flex flex-wrap ">

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