@kaizen/components 0.0.0-canary-rollup-plugin-node-externals-v7-20240206233319 → 0.0.0-canary-remove-tailwind-from-kaio-20240305223928

package/locales/cy.json

@@ -27,11 +27,11 @@
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Problem wrth lwytho'r dudalen ar hyn o bryd. Ceisiwch eto neu ewch adref."
+    "message" : "Problem wrth lwytho'r dudalen ar hyn o bryd. Ceisiwch eto neu ewch adref."
   },
   "kzErrorPage.400.title" : {
     "description" : "Heading for page",
-    "message" : "Problem wrth lwytho'r dudalen"
+    "message" : "Problem wrth lwytho'r dudalen"
   },
   "kzErrorPage.401.message" : {
     "description" : "Call to action instructions for the user",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-rollup-plugin-node-externals-v7-20240206233319",
+  "version": "0.0.0-canary-remove-tailwind-from-kaio-20240305223928",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -26,33 +26,33 @@
     "styles.css"
   ],
   "dependencies": {
-    "@floating-ui/react-dom": "^2.0.5",
+    "@floating-ui/react-dom": "^2.0.8",
     "@headlessui/react": "<=1.5.0",
-    "@internationalized/date": "^3.5.1",
+    "@internationalized/date": "^3.5.2",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.9.1",
-    "@react-aria/datepicker": "^3.9.1",
-    "@react-aria/focus": "^3.16.0",
-    "@react-aria/i18n": "^3.10.0",
-    "@react-aria/listbox": "^3.11.3",
-    "@react-aria/menu": "^3.12.0",
-    "@react-aria/overlays": "^3.20.0",
-    "@react-aria/select": "^3.14.1",
-    "@react-aria/utils": "^3.23.0",
-    "@react-stately/collections": "^3.10.4",
-    "@react-stately/datepicker": "^3.9.1",
-    "@react-stately/list": "^3.10.2",
-    "@react-stately/menu": "^3.6.0",
-    "@react-stately/select": "^3.6.1",
-    "@react-types/shared": "^3.22.0",
+    "@react-aria/button": "^3.9.3",
+    "@react-aria/datepicker": "^3.9.3",
+    "@react-aria/focus": "^3.16.2",
+    "@react-aria/i18n": "^3.10.2",
+    "@react-aria/listbox": "^3.11.5",
+    "@react-aria/menu": "^3.13.1",
+    "@react-aria/overlays": "^3.21.1",
+    "@react-aria/select": "^3.14.3",
+    "@react-aria/utils": "^3.23.2",
+    "@react-stately/collections": "^3.10.5",
+    "@react-stately/datepicker": "^3.9.2",
+    "@react-stately/list": "^3.10.3",
+    "@react-stately/menu": "^3.6.1",
+    "@react-stately/select": "^3.6.2",
+    "@react-types/shared": "^3.22.1",
     "classnames": "^2.5.1",
-    "date-fns": "^3.0.6",
+    "date-fns": "^3.3.1",
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
     "prosemirror-commands": "^1.5.2",
     "prosemirror-history": "^1.3.2",
-    "prosemirror-inputrules": "^1.3.0",
+    "prosemirror-inputrules": "^1.4.0",
     "prosemirror-keymap": "^1.2.2",
     "prosemirror-model": "^1.19.4",
     "prosemirror-schema-basic": "^1.2.2",
@@ -60,10 +60,10 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.8.0",
     "prosemirror-utils": "^1.2.1-0",
-    "prosemirror-view": "^1.32.7",
+    "prosemirror-view": "^1.33.1",
     "react-animate-height": "^3.2.3",
     "react-day-picker": "^8.10.0",
-    "react-focus-lock": "^2.9.6",
+    "react-focus-lock": "^2.9.7",
     "react-focus-on": "^3.9.1",
     "react-media": "^1.10.0",
     "react-popper": "^2.3.0",
@@ -80,8 +80,8 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
-    "@cultureamp/frontend-apis": "^9.2.0",
-    "@cultureamp/i18n-react-intl": "^2.1.10",
+    "@cultureamp/frontend-apis": "^9.4.1",
+    "@cultureamp/i18n-react-intl": "^2.5.2",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -90,33 +90,33 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react-dom": "^18.2.18",
+    "@types/react-dom": "^18.2.19",
     "@types/react-textfit": "^1.1.4",
-    "@types/uuid": "^9.0.7",
+    "@types/uuid": "^9.0.8",
     "agadoo": "^3.0.0",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "babel-plugin-pure-static-props": "^0.2.0",
     "concat-cli": "^4.0.0",
-    "query-string": "^8.1.0",
-    "react-intl": "^6.6.0",
-    "rollup": "^4.9.5",
+    "query-string": "^9.0.0",
+    "react-intl": "^6.6.2",
+    "rollup": "^4.12.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-node-externals": "^7.0.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.69.7",
+    "sass": "^1.71.1",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.2.0",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.1.2",
     "ts-patch": "^3.1.2",
-    "typescript-transform-paths": "^3.4.6",
-    "@kaizen/design-tokens": "10.3.17",
-    "@kaizen/tailwind": "1.2.3"
+    "typescript-transform-paths": "^3.4.7",
+    "@kaizen/tailwind": "1.2.4",
+    "@kaizen/design-tokens": "10.3.18"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.1.10",
+    "@cultureamp/i18n-react-intl": "^2.5.1",
     "react": "^18.2.0",
-    "react-intl": "^6.6.0"
+    "react-intl": "^6.6.2"
   },
   "scripts": {
     "build": "pnpm clean && pnpm prepublishOnly",

package/src/BrandMoment/_docs/ExampleHeaders.scss

@@ -19,6 +19,7 @@
   flex: 0 0 50%;
   display: flex;
   justify-content: flex-end;
+  gap: $spacing-8;
 }
 
 .logoLink {

package/src/BrandMoment/_docs/ExampleHeaders.tsx

@@ -15,14 +15,12 @@ export const MinimalBasic = (): JSX.Element => (
       </a>
     </div>
     <div className={styles.headerRight}>
-      <div className="mr-8">
-        <Button
-          href="#"
-          label="Exit"
-          icon={<CloseIcon role="presentation" />}
-          secondary
-        />
-      </div>
+      <Button
+        href="#"
+        label="Exit"
+        icon={<CloseIcon role="presentation" />}
+        secondary
+      />
       <div className={styles.logoContainer}>
         <img src={assetUrl("brand/enso-default.svg")} alt="Culture Amp" />
       </div>

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.mdx

@@ -0,0 +1,35 @@
+import { Controls, Meta, Canvas } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
+import * as FilterMultiSelectStories from "./FilterMultiSelect.stories"
+
+<Meta of={FilterMultiSelectStories} />
+
+# Filter Bar
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FilterMultiSelect"
+  className="!mb-8"
+/>
+
+<KAIOInstallation exportNames="FilterMultiSelect" />
+
+## API
+
+<NoClipCanvas of={FilterMultiSelectStories.Playground} />
+<Controls of={FilterMultiSelectStories.Playground} />
+
+## Examples
+
+The FilterMultiSelect is a component relies heavily on consumer implemntation. It is recommended that you use the below as a starting point, and ensure you follow best a11y practices.
+
+### With sections
+
+<Canvas of={FilterMultiSelectStories.WithSections} />
+
+### With section headers
+
+<Canvas of={FilterMultiSelectStories.WithSectionHeaders} />
+
+### Async
+
+<Canvas of={FilterMultiSelectStories.Async} />

package/src/Illustration/Scene/_docs/Scene.mdx

@@ -14,6 +14,7 @@ import * as SceneStories from "./Scene.stories"
 
 
 <KAIOInstallation
+  exportNames="BrandMomentPositiveOutro"
 />
 
 ## Overview

package/src/Modal/GenericModal/GenericModal.tsx

@@ -1,4 +1,4 @@
-import React, { useId, useState } from "react"
+import React, { useEffect, useId, useState } from "react"
 import { createPortal } from "react-dom"
 import { Transition } from "@headlessui/react"
 import FocusLock from "react-focus-lock"
@@ -102,7 +102,7 @@ export const GenericModal = ({
     }
   }
 
-  const onAfterLeaveHandler = (): void => {
+  const cleanUpAfterClose = (): void => {
     document.documentElement.classList.remove(
       styles.unscrollable,
       styles.pseudoScrollbar
@@ -111,7 +111,13 @@ export const GenericModal = ({
     if (onEscapeKeyup) {
       document.removeEventListener("keyup", onEscapeKeyup)
     }
+  }
 
+  /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
+  useEffect(() => () => cleanUpAfterClose(), [])
+
+  const onAfterLeaveHandler = (): void => {
+    cleanUpAfterClose()
     propsOnAfterLeave?.()
   }
 

package/src/MultiSelect/_docs/MultiSelect.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, SbReleaseNotification} from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as MultiSelectStories from "./MultiSelect.stories"
 
 <Meta of={MultiSelectStories} />
@@ -12,8 +12,6 @@ import * as MultiSelectStories from "./MultiSelect.stories"
   className="!mb-8"
 />
 
-<SbReleaseNotification />
-
 <KAIOInstallation exportNames="MultiSelect" />
 
 ## Overview

package/src/Slider/Slider.module.scss

@@ -11,6 +11,10 @@
   margin-bottom: $spacing-sm;
 }
 
+.label {
+  margin-bottom: $spacing-4;
+}
+
 @media (min-width: $layout-breakpoints-medium) {
   .labelInline {
     &.wrapper {

package/src/Slider/Slider.tsx

@@ -42,7 +42,7 @@ export const Slider = ({
         )}
       >
         <div className={styles.labelWrapper}>
-          <div className="mb-4">
+          <div className={styles.label}>
             <Label
               htmlFor={id}
               labelText={labelText}

package/src/Tile/MultiActionTile/MultiActionTile.module.scss

@@ -1,3 +1,9 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
 .actions {
   display: flex;
 }
+
+.secondaryAction {
+  margin-inline-end: $spacing-8;
+}

package/src/Tile/MultiActionTile/MultiActionTile.tsx

@@ -18,7 +18,7 @@ const renderActions = (
 ): JSX.Element => (
   <div className={styles.actions}>
     {secondaryAction && (
-      <div className="mr-8">
+      <div className={styles.secondaryAction}>
         <Action action={secondaryAction} secondary />
       </div>
     )}

package/src/Tile/subcomponents/GenericTile/GenericTile.module.scss

@@ -37,6 +37,10 @@ $tilePaddingTop: $spacing-xl;
   }
 }
 
+.titleMeta {
+  padding-top: $spacing-4;
+}
+
 .face {
   position: absolute;
   background-color: $color-white;

package/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -57,7 +57,7 @@ export const GenericTile = ({
         {title}
       </Heading>
       {metadata && (
-        <div className="pt-4">
+        <div className={styles.titleMeta}>
           <Text variant="small" color="dark-reduced-opacity">
             {metadata}
           </Text>

package/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx

@@ -6,6 +6,7 @@ import {
   SuccessIcon,
 } from "~components/Icon"
 import { Text } from "~components/Text"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import styles from "./ProgressStepper.module.scss"
 
 export type ProgressStepperProps = {
@@ -93,10 +94,10 @@ export const ProgressStepper = ({
               aria-current={isCurrentStep}
             >
               <div className={styles.stepContent}>
-                <span className="sr-only">
+                <VisuallyHidden>
                   {/* will need to be translated */}
                   {accessibleName}
-                </span>
+                </VisuallyHidden>
                 <Text
                   classNameOverride={styles.stepName}
                   variant="small"

package/src/Workflow/subcomponents/Header/components/Titles/Titles.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import { Heading } from "~components/Heading"
 import { Tag, DefaultTagProps } from "~components/Tag"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./Titles.module.scss"
 
@@ -36,7 +37,7 @@ export const Titles = ({
         color="dark-reduced-opacity"
       >
         {workflowName}
-        <span className="sr-only">:</span>
+        <VisuallyHidden>:</VisuallyHidden>
       </Heading>
       <span>{stepName}</span>
     </Heading>

package/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx

@@ -6,6 +6,7 @@ import {
   SuccessIcon,
 } from "~components/Icon"
 import { Text } from "~components/Text"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import styles from "./ProgressStepper.module.scss"
 
 export type Step = {
@@ -104,10 +105,10 @@ export const ProgressStepper = ({
               aria-current={isCurrentStep}
             >
               <div className={styles.stepContent}>
-                <span className="sr-only">
+                <VisuallyHidden>
                   {/* will need to be translated */}
                   {accessibleName}
-                </span>
+                </VisuallyHidden>
                 <Text
                   classNameOverride={styles.stepName}
                   variant="small"

package/src/__future__/Workflow/subcomponents/Header/components/Titles/Titles.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import { Heading } from "~components/Heading"
 import { Tag, DefaultTagProps } from "~components/Tag"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./Titles.module.scss"
 
@@ -36,7 +37,7 @@ export const Titles = ({
         color="dark-reduced-opacity"
       >
         {workflowName}
-        <span className="sr-only">:</span>
+        <VisuallyHidden>:</VisuallyHidden>
       </Heading>
       <span>{stepName}</span>
     </Heading>