@kaizen/components 2.3.7 → 2.4.0

package/dist/styles.css

@@ -559,7 +559,7 @@
   }
 }
 @layer kz-components {
-  .VisuallyHidden-module_srOnly__tTjOK {
+  .VisuallyHidden-module_srOnly__-f5sJ {
     clip-path: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;
@@ -568,6 +568,7 @@
     width: 1px;
   }
 }
+
 @layer kz-components {
   .LoadingSpinner-module_loadingSpinner__Zc2mJ {
     --loading-spinner-size: 48px;
@@ -2704,20 +2705,22 @@
   }
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .Content-module_content__ZeTRs {
-    max-width: 1392px;
-    margin: 0 72px;
+  .Content-module_content__DUKqQ {
+    max-width: var(--layout-content-max-width);
+    margin: 0 var(--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(1080px - 1px)) {
-    .Content-module_content__ZeTRs {
-      margin: 0 12px;
+
+    /* Currently unable to do media query equations so using a fixed value instead */
+    @media (width <= 1079px) {
+      margin: 0 var(--content-margin-width-on-medium-and-small);
     }
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -3620,33 +3623,48 @@
   }
   /* stylelint-enable no-descending-specificity */
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .Divider-module_wrapper__K5mht {
+  /* 
+  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);
+  }
+
+  .Divider-module_wrapper__AzvdU {
     width: 100%;
     border: 0;
     margin: 0;
-    border-radius: var(--border-solid-border-radius, 7px);
+    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;
   }
-  .Divider-module_content__BhDyy, .Divider-module_menuSeparator__kjXV5 {
-    border-top: 1px solid;
-    border-color: rgba(var(--color-gray-600-rgb, 82, 78, 86), 0.1);
+
+  .Divider-module_content__eq5aD,
+  .Divider-module_menuSeparator__FAvna {
+    border-top: 1px solid var(--dt-content-border-color);
   }
-  .Divider-module_canvas__2eQT6 {
+
+  .Divider-module_canvas__G87W- {
     border-top: 1px solid;
     border-bottom: 1px solid;
-    border-color: rgba(var(--color-gray-600-rgb, 82, 78, 86), 0.1);
+    border-color: var(--dt-content-border-color);
   }
-  .Divider-module_reversed__puJw2 {
-    border-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
+
+  .Divider-module_reversed__GuBmn {
+    border-color: rgb(var(--color-white-rgb), 0.1);
   }
-  .Divider-module_menuSeparator__kjXV5 {
-    /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
+
+  .Divider-module_menuSeparator__FAvna {
     margin: 5px 0;
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
@@ -3847,12 +3865,12 @@
   }
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .ErrorPage-module_paragraphPadding__-L-qy {
-    padding: var(--spacing-24, 1.5rem) 0;
+  .ErrorPage-module_paragraphPadding__PJzGg {
+    padding: var(--spacing-24) 0;
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
   .FieldGroup-module_group__74Z9M {
@@ -8483,179 +8501,224 @@
   }
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .Tag-module_root__uRhoc {
-    margin-inline-end: calc(var(--spacing-md, 1.5rem) * 0.5);
-    font-size: var(--typography-paragraph-small-font-size, 0.875rem);
-    font-weight: var(--typography-paragraph-small-font-weight, 400);
-    letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
-    color: var(--color-purple-800, #2f2438);
+  .Tag-module_root__sGbnM {
+    --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, 2px) var(--border-borderless-border-style, solid) var(--border-borderless-border-color, transparent);
-    border-radius: calc(var(--spacing-md, 1.5rem) * 0.75);
-    padding: 0 calc(var(--spacing-md, 1.5rem) * 0.4);
+    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;
+
+    &.Tag-module_profile__lpDJR {
+      padding-left: calc(var(--spacing-md) * 0.2);
+    }
   }
-  .Tag-module_root__uRhoc.Tag-module_profile__OoGsS {
-    padding-left: calc(var(--spacing-md, 1.5rem) * 0.2);
-  }
-  .Tag-module_layoutContainer__pBLSz {
+
+  .Tag-module_layoutContainer__cPxSs {
     height: 100%;
     display: flex;
     align-items: center;
   }
-  .Tag-module_validationIcon__B-YLv {
+
+  .Tag-module_validationIcon__i87BD {
     align-items: center;
     display: flex;
-    color: var(--color-white, #ffffff);
-    margin-inline: calc(var(--spacing-md, 1.5rem) * -0.15) var(--spacing-xs, 0.375rem);
+    color: var(--color-white);
+    margin-inline: calc(var(--spacing-md) * -0.15) var(--spacing-xs);
   }
-  .Tag-module_profile__OoGsS {
-    margin-inline: calc(var(--spacing-md, 1.5rem) * -0.15) var(--spacing-xs, 0.375rem);
+
+  .Tag-module_profile__lpDJR {
+    margin-inline: calc(var(--spacing-md) * -0.15) var(--spacing-xs);
     display: inline-flex;
     align-items: center;
   }
-  .Tag-module_textContent__q76X- {
+
+  .Tag-module_textContent__61iwm {
     margin-top: -1px;
-    font-family: var(--typography-paragraph-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-paragraph-small-font-weight, 400);
-    font-size: var(--typography-paragraph-small-font-size, 0.875rem);
-    line-height: var(--typography-paragraph-small-line-height, 1.125rem);
-    letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
+    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;
   }
-  .Tag-module_iconWrapper__aPrKH {
+
+  .Tag-module_iconWrapper__gXgCb {
     --icon-size: 16;
+
     position: relative;
     height: 16px;
     width: 16px;
   }
-  .Tag-module_dismissButton__rHv7r {
+
+  .Tag-module_dismissButton__MgLNJ {
+    /* Replace @include button-reset to reset button's style */
     appearance: none;
-    display: inline;
     background: transparent;
-    color: inherit;
     font: inherit;
     margin: 0;
-    padding: 0;
     border: none;
+
+    /* Original style */
     position: relative;
     display: flex;
     height: 100%;
     align-items: center;
-    padding: 0 var(--spacing-xs, 0.375rem);
+    padding: 0 var(--spacing-xs);
     margin-inline: -0.225rem -0.6625rem;
-    color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.7);
+    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 .Tag-module_iconWrapper__gXgCb {
+      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));
+      }
+    }
   }
-  .Tag-module_dismissButton__rHv7r:hover {
-    color: var(--color-purple-800, #2f2438);
-  }
-  .Tag-module_dismissButton__rHv7r:active {
-    color: var(--color-purple-800, #2f2438);
-  }
-  .Tag-module_dismissButton__rHv7r svg {
-    position: relative;
-  }
-  .Tag-module_dismissButton__rHv7r:focus {
-    outline: none;
-  }
-  .Tag-module_dismissButton__rHv7r:focus-visible .Tag-module_iconWrapper__aPrKH {
-    color: var(--color-purple-800, #2f2438);
-  }
-  .Tag-module_dismissButton__rHv7r:focus-visible .Tag-module_iconWrapper__aPrKH::after {
-    content: "";
-    position: absolute;
-    background: transparent;
-    border-radius: 50%;
-    border-width: var(--border-focus-ring-border-width, 2px);
-    border-style: var(--border-focus-ring-border-style, solid);
-    border-color: var(--color-blue-500, #0168b3);
-    inset: calc(-1 * calc((var(--border-focus-ring-border-width, 2px))));
-  }
-  .Tag-module_background__LkzGB {
+
+  .Tag-module_background__DaA0W {
+    /*
+    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.375rem) + 0.125rem);
-    height: calc(var(--spacing-xs, 0.375rem) + 0.125rem);
+    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;
   }
-  .Tag-module_truncate__5w7HW {
+
+  .Tag-module_truncate__5kX5V {
     text-overflow: ellipsis;
     overflow-x: hidden;
     white-space: nowrap;
   }
-  .Tag-module_inline__pPM-d {
+
+  .Tag-module_inline__QQfqi {
     margin: 0;
   }
-  .Tag-module_medium__NkOrv {
-    height: calc(var(--spacing-md, 1.5rem) * 1.25);
-  }
-  .Tag-module_small__-xyNk {
-    height: var(--spacing-md, 1.5rem);
-  }
-  .Tag-module_default__6PVke {
-    background-color: var(--color-gray-300, #eaeaec);
-  }
-  .Tag-module_sentimentPositive__nbqE1 {
-    background-color: var(--color-green-100, #e8f8f4);
-  }
-  .Tag-module_sentimentNeutral__8BtD8 {
-    background-color: var(--color-gray-300, #eaeaec);
+
+  .Tag-module_medium__PI53x {
+    height: var(--medium);
   }
-  .Tag-module_sentimentNegative__1J85t {
-    background-color: var(--color-red-100, #fdeaee);
+
+  .Tag-module_small__hcPrf {
+    height: var(--small);
   }
-  .Tag-module_sentimentNone__8BWjU {
-    background-color: var(--color-white, #ffffff);
-    border-color: var(--color-gray-300, #eaeaec);
+
+  .Tag-module_default__Wq9hK {
+    background-color: var(--color-gray-300);
   }
-  .Tag-module_validationPositive__vgFUE {
-    background-color: var(--color-green-100, #e8f8f4);
+
+  .Tag-module_sentimentPositive__M4lXI {
+    background-color: var(--color-green-100);
   }
-  .Tag-module_validationPositive__vgFUE .Tag-module_validationIcon__B-YLv {
-    color: var(--color-green-500, #3f9a86);
+
+  .Tag-module_sentimentNeutral__uxZ6y {
+    background-color: var(--color-gray-300);
   }
-  .Tag-module_validationInformative__bnJ4A {
-    background-color: var(--color-blue-100, #e6f6ff);
+
+  .Tag-module_sentimentNegative__JxDtU {
+    background-color: var(--color-red-100);
   }
-  .Tag-module_validationInformative__bnJ4A .Tag-module_validationIcon__B-YLv {
-    color: var(--color-blue-500, #0168b3);
+
+  .Tag-module_sentimentNone__vDXoz {
+    background-color: var(--color-white);
+    border-color: var(--color-gray-300);
   }
-  .Tag-module_validationNegative__lZgIY {
-    background-color: var(--color-red-100, #fdeaee);
+
+  .Tag-module_validationPositive__KXW2z {
+    background-color: var(--color-green-100);
+
+    .Tag-module_validationIcon__i87BD {
+      color: var(--color-green-500);
+    }
   }
-  .Tag-module_validationNegative__lZgIY .Tag-module_validationIcon__B-YLv {
-    color: var(--color-red-500, #c93b55);
+
+  .Tag-module_validationInformative__wJlj5 {
+    background-color: var(--color-blue-100);
+
+    .Tag-module_validationIcon__i87BD {
+      color: var(--color-blue-500);
+    }
   }
-  .Tag-module_validationCautionary__ERS2t {
-    background-color: var(--color-yellow-100, #fff9e4);
+
+  .Tag-module_validationNegative__CEuAp {
+    background-color: var(--color-red-100);
+
+    .Tag-module_validationIcon__i87BD {
+      color: var(--color-red-500);
+    }
   }
-  .Tag-module_validationCautionary__ERS2t .Tag-module_validationIcon__B-YLv {
-    color: var(--color-yellow-700);
+
+  .Tag-module_validationCautionary__ay3Dg {
+    background-color: var(--color-yellow-100);
+
+    .Tag-module_validationIcon__i87BD {
+      color: var(--color-yellow-700);
+    }
   }
-  .Tag-module_statusLive__xG48w {
-    background-color: var(--color-green-100, #e8f8f4);
-    color: var(--color-purple-800, #2f2438);
+
+  .Tag-module_statusLive__Ycm63 {
+    background-color: var(--color-green-100);
+    color: var(--color-purple-800);
   }
-  .Tag-module_statusAction__woL-O {
-    background-color: var(--color-orange-100, #fff0e8);
-    color: var(--color-purple-800, #2f2438);
+
+  .Tag-module_statusAction__Gdpew {
+    background-color: var(--color-orange-100);
+    color: var(--color-purple-800);
   }
-  .Tag-module_statusClosed__VhZP- {
-    background-color: var(--color-red-100, #fdeaee);
+
+  .Tag-module_statusClosed__9Ggv1 {
+    background-color: var(--color-red-100);
   }
-  .Tag-module_statusDraft__9QZDv {
-    background-color: var(--color-blue-100, #e6f6ff);
-    color: var(--color-purple-800, #2f2438);
+
+  .Tag-module_statusDraft__m3ksY {
+    background-color: var(--color-blue-100);
+    color: var(--color-purple-800);
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/

package/dist/types/Illustration/Spot/Spot.d.ts

@@ -10,6 +10,11 @@ export declare const Informative: ({ enableAspectRatio, ...restProps }: SpotProp
 export declare const Negative: ({ enableAspectRatio, ...restProps }: SpotProps) => JSX.Element;
 export declare const Positive: ({ enableAspectRatio, ...restProps }: SpotProps) => JSX.Element;
 export declare const Assertive: ({ enableAspectRatio, ...restProps }: SpotProps) => JSX.Element;
+/**
+ * Template Library / PCD
+ */
+export declare const PCDSurvey: ({ enableAspectRatio, ...restProps }: SpotProps) => JSX.Element;
+export declare const PCDPulseSurvey: ({ enableAspectRatio, ...restProps }: SpotProps) => JSX.Element;
 /**
  * Template Library / Engagement
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.3.7",
+  "version": "2.4.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Content/Content.module.css

@@ -0,0 +1,15 @@
+@layer kz-components {
+  .content {
+    max-width: var(--layout-content-max-width);
+    margin: 0 var(--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;
+
+    /* Currently unable to do media query equations so using a fixed value instead */
+    @media (width <= 1079px) {
+      margin: 0 var(--content-margin-width-on-medium-and-small);
+    }
+  }
+}

package/src/Content/Content.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 './Content.module.scss'
+import styles from './Content.module.css'
 
 export type ContentProps = {
   children?: React.ReactNode

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/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 ">