@kaizen/components 2.3.6 → 2.4.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/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/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/TitleBlock/TitleBlock.module.scss

@@ -16,7 +16,7 @@
   $breadcrumb-circle-width: 48px;
   $breadcrumb-breakpoint-width: $layout-content-max-width + $layout-content-side-margin * 2 +
     $breadcrumb-circle-width * 2.25;
-  $title-block-separator-height: 0.063rem;
+  $title-block-separator-height: 0.0625rem;
   $tab-container-height-default: $ca-grid * 3;
   $tab-container-height-small: $ca-grid * 2.5;
   $tab-container-height-default-collapsed: 0;
@@ -65,12 +65,10 @@
 
   .lightVariant .titleRow {
     background-color: $color-white;
-    margin-bottom: $title-block-separator-height;
   }
 
   .adminVariant .titleRow {
     background-color: $color-white;
-    margin-bottom: $title-block-separator-height;
   }
 
   %titleBlockInner {
@@ -93,7 +91,7 @@
   }
 
   .lightVariant .titleRowInner {
-    border-bottom: 1px solid $color-gray-300;
+    box-shadow: inset 0 calc(-1 * $title-block-separator-height) 0 0 $color-gray-300;
   }
 
   %rowBelowSeparatorInnerMarginOverride {
@@ -112,27 +110,33 @@
 
   .titleRowInnerContent {
     box-sizing: border-box;
+    min-height: 88px;
     position: relative;
     display: flex;
     width: 100%;
     align-items: center;
     gap: $title-block-gap-default;
-    padding-block: $title-block-spacing-default 19px;
+    padding-block: $title-block-spacing-default;
     justify-content: space-between;
-    border-bottom: $title-block-separator-height solid rgba($color-white-rgb, 0.1);
+    box-shadow: inset 0 calc(-1 * $title-block-separator-height) 0 0 rgba($color-white-rgb, 0.1);
 
     .educationVariant & {
-      border-bottom-color: rgba($color-purple-700-rgb, 0.2);
+      box-shadow: inset 0 calc(-1 * $title-block-separator-height) 0 0
+        rgba($color-purple-700-rgb, 0.2);
     }
 
     .lightVariant &,
     .adminVariant &,
     .collapseNavigationArea & {
-      border-bottom-color: transparent;
+      box-shadow: none;
     }
 
     @include title-block-medium-and-small {
-      border-bottom: none;
+      box-shadow: none;
+
+      .educationVariant & {
+        box-shadow: none;
+      }
     }
 
     @include title-block-under-576 {
@@ -425,7 +429,6 @@
   .rowBelowSeparatorInnerContent {
     display: flex;
     width: 100%;
-    margin-top: -$title-block-separator-height;
     justify-content: space-between;
   }
 
@@ -496,7 +499,6 @@
   .navigationTabScrollerContainer {
     .hasNavigationTabs & {
       @include title-block-small {
-        margin-top: $title-block-separator-height;
         height: $tab-container-height-small;
         display: block;
         overflow-x: scroll;
@@ -529,7 +531,7 @@
     @include title-block-small {
       display: block;
       position: absolute;
-      top: $tab-container-height-small - $title-block-separator-height;
+      top: $tab-container-height-small;
       width: $tab-container-height-small;
       height: $tab-container-height-small;
       background: linear-gradient(0deg, $color-purple-600, rgba($color-purple-600-rgb, 0));

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

@@ -1,4 +0,0 @@
-var styles = {
-  "container": "Container-module_container__jSUGk"
-};
-export { styles as default };

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;
-  }
-}