@kaizen/components 1.40.4 → 1.40.6

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": "1.40.4",
+  "version": "1.40.6",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -63,8 +63,8 @@
     "prosemirror-view": "^1.33.1",
     "react-animate-height": "^3.2.3",
     "react-day-picker": "^8.10.0",
-    "react-focus-lock": "^2.9.7",
-    "react-focus-on": "^3.9.1",
+    "react-focus-lock": "^2.11.2",
+    "react-focus-on": "^3.9.2",
     "react-media": "^1.10.0",
     "react-popper": "^2.3.0",
     "react-select": "^5.8.0",
@@ -80,8 +80,8 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
-    "@cultureamp/frontend-apis": "^9.4.0",
-    "@cultureamp/i18n-react-intl": "^2.5.1",
+    "@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",
@@ -97,7 +97,7 @@
     "autoprefixer": "^10.4.17",
     "babel-plugin-pure-static-props": "^0.2.0",
     "concat-cli": "^4.0.0",
-    "query-string": "^8.2.0",
+    "query-string": "^9.0.0",
     "react-intl": "^6.6.2",
     "rollup": "^4.12.0",
     "rollup-plugin-dts": "^6.1.0",

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

@@ -268,6 +268,7 @@ export const DatePicker = ({
   return (
     <FocusOn
       scrollLock={false}
+      returnFocus={false}
       onDeactivation={handleReturnFocus}
       onClickOutside={(): void => setIsOpen(false)}
       onEscapeKey={(): void => setIsOpen(false)}

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