@kaizen/components 1.40.5 → 1.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.40.5",
+  "version": "1.41.0",
   "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",
@@ -94,7 +94,7 @@
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^9.0.8",
     "agadoo": "^3.0.0",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.18",
     "babel-plugin-pure-static-props": "^0.2.0",
     "concat-cli": "^4.0.0",
     "query-string": "^9.0.0",
@@ -108,10 +108,11 @@
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.2.0",
     "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
     "ts-patch": "^3.1.2",
     "typescript-transform-paths": "^3.4.7",
-    "@kaizen/design-tokens": "10.3.18",
-    "@kaizen/tailwind": "1.2.4"
+    "@kaizen/design-tokens": "10.3.19",
+    "@kaizen/tailwind": "1.2.5"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.1",

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/Icon/ThumbsDownIcon.tsx

@@ -5,6 +5,7 @@ import React, { useId } from "react"
 import { SVG } from "~components/Icon/subcomponents/SVG"
 import type { IconProps } from "~components/Icon/types"
 
+/** @deprecated Use `<ThumbsDownIconOn/>` or `<ThumbsDownIconOff/>` */
 export const ThumbsDownIcon = (props: IconProps): JSX.Element => {
   const uniqueId = useId()
   const svgContent = (
@@ -12,7 +13,7 @@ export const ThumbsDownIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M5.91 3.183c-.566 0-1.05.341-1.254.832L2.597 8.821c-.061.156-.095.32-.095.497v1.364c0 .75.613 1.363 1.363 1.363h4.301L7.52 15.16l-.02.218c0 .28.115.539.3.723l.722.716 4.492-4.493c.245-.245.395-.586.395-.96V4.546c0-.75-.613-1.364-1.363-1.364zm8.862 8.18h2.726v-8.18h-2.726z"
+          d="M5.91 3.183c-.566 0-1.05.341-1.254.832L2.597 8.821q-.093.233-.095.497v1.364c0 .75.613 1.363 1.363 1.363h4.301L7.52 15.16l-.02.218c0 .28.115.539.3.723l.722.716 4.492-4.493c.245-.245.395-.586.395-.96V4.546c0-.75-.613-1.364-1.363-1.364zm8.862 8.18h2.726v-8.18h-2.726z"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/ThumbsDownOffIcon.tsx

@@ -0,0 +1,18 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+import React from "react"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
+
+export const ThumbsDownOffIcon = (props: IconProps): JSX.Element => {
+  const svgContent = (
+    <>
+      <path
+        fill="currentColor"
+        d="M5.224 3.253h8.766v10L8.461 18.75l-.705-.705a1 1 0 0 1-.215-.344 1.1 1.1 0 0 1-.086-.403v-.211l.885-3.834H2.756q-.594 0-1.05-.456t-.456-1.05V10.4q0-.13.034-.28a3 3 0 0 1 .075-.281l2.388-5.635q.18-.4.6-.676a1.6 1.6 0 0 1 .877-.276m7.516 1.25H5.224a.4.4 0 0 0-.18.048.3.3 0 0 0-.14.16L2.5 10.337v1.41a.25.25 0 0 0 .072.185.25.25 0 0 0 .184.072H9.92L8.875 16.57l3.865-3.849zm1.25 8.75v-1.25h2.677v-7.5H13.99v-1.25h3.927v10z"
+      />
+    </>
+  )
+  return <SVG {...props}>{svgContent}</SVG>
+}

package/src/Icon/ThumbsDownOnIcon.tsx

@@ -0,0 +1,18 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+import React from "react"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
+
+export const ThumbsDownOnIcon = (props: IconProps): JSX.Element => {
+  const svgContent = (
+    <>
+      <path
+        fill="currentColor"
+        d="M5.224 3.253h8.253v10L7.95 18.75l-.705-.705a1 1 0 0 1-.216-.344 1.1 1.1 0 0 1-.086-.403v-.211l.885-3.834h-5.07q-.595 0-1.051-.456t-.456-1.05V10.4a1.6 1.6 0 0 1 .109-.561l2.388-5.635q.18-.4.6-.676a1.6 1.6 0 0 1 .877-.276m9.503 10v-10h3.19v10z"
+      />
+    </>
+  )
+  return <SVG {...props}>{svgContent}</SVG>
+}

package/src/Icon/ThumbsUpIcon.tsx

@@ -5,6 +5,7 @@ import React, { useId } from "react"
 import { SVG } from "~components/Icon/subcomponents/SVG"
 import type { IconProps } from "~components/Icon/types"
 
+/** @deprecated Use `<ThumbsUpIconOn/>` or `<ThumbsUpIconOff/>` */
 export const ThumbsUpIcon = (props: IconProps): JSX.Element => {
   const uniqueId = useId()
   const svgContent = (
@@ -12,7 +13,7 @@ export const ThumbsUpIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M5.228 16.817v-8.18H2.502v8.18zm10.907-8.862h-4.301l.647-3.115.02-.218c0-.28-.115-.539-.3-.723l-.722-.716-4.485 4.493a1.333 1.333 0 0 0-.402.96v6.817c0 .75.613 1.364 1.363 1.364h6.135c.566 0 1.05-.341 1.254-.832l2.059-4.806c.061-.156.095-.32.095-.497V9.318c0-.75-.613-1.363-1.363-1.363"
+          d="M5.228 16.817v-8.18H2.502v8.18zm10.907-8.862h-4.301l.647-3.115.02-.218c0-.28-.115-.539-.3-.723l-.722-.716-4.485 4.493a1.33 1.33 0 0 0-.402.96v6.817c0 .75.613 1.364 1.363 1.364h6.135c.566 0 1.05-.341 1.254-.832l2.059-4.806q.093-.233.095-.497V9.318c0-.75-.613-1.363-1.363-1.363"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/ThumbsUpOffIcon.tsx

@@ -0,0 +1,18 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+import React from "react"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
+
+export const ThumbsUpOffIcon = (props: IconProps): JSX.Element => {
+  const svgContent = (
+    <>
+      <path
+        fill="currentColor"
+        d="M14.776 17.083H6.01v-10l5.529-5.496.705.705q.13.129.215.344.086.213.086.403v.211l-.885 3.833h5.584q.594 0 1.05.456t.456 1.05v1.347q0 .13-.034.28-.033.15-.075.28l-2.388 5.635q-.18.401-.6.677a1.6 1.6 0 0 1-.877.275m-7.516-1.25h7.516a.4.4 0 0 0 .18-.048.3.3 0 0 0 .14-.16L17.5 10V8.59a.25.25 0 0 0-.072-.184.25.25 0 0 0-.184-.073H10.08l1.045-4.567-3.865 3.85zm-1.25-8.75v1.25H3.333v7.5H6.01v1.25H2.083v-10z"
+      />
+    </>
+  )
+  return <SVG {...props}>{svgContent}</SVG>
+}

package/src/Icon/ThumbsUpOnIcon.tsx

@@ -0,0 +1,18 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+import React from "react"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
+
+export const ThumbsUpOnIcon = (props: IconProps): JSX.Element => {
+  const svgContent = (
+    <>
+      <path
+        fill="currentColor"
+        d="M14.776 17.083H6.522v-10l5.53-5.496.704.705q.13.129.216.344.086.213.086.403v.211l-.885 3.833h5.07q.595 0 1.051.456t.456 1.05v1.347a1.6 1.6 0 0 1-.109.56l-2.388 5.635q-.18.401-.6.677a1.6 1.6 0 0 1-.877.275m-9.504-10v10H2.083v-10z"
+      />
+    </>
+  )
+  return <SVG {...props}>{svgContent}</SVG>
+}

package/src/Icon/_docs/Icon.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import * as ICONS from "~components/Icon"
-import { SearchField } from "~components/SearchField"
+import { Text } from "~components/Text"
 import { Tag } from "~components/__future__/Tag"
 import { AddIcon } from "../index"
 import styles from "./icon.stories.scss"
@@ -63,12 +63,17 @@ const ReferenceButton = ({
     <li key={iconName}>
       <button type="button" className={styles.button} onClick={handleCopy}>
         {copied ? (
-          <Tag color="green" classNameOverride={styles.tag}>
-            Copied!
-          </Tag>
+          <span className={styles.copiedTag}>
+            <Tag color="green" classNameOverride={styles.tag}>
+              Copied!
+            </Tag>
+          </span>
         ) : (
           <>
-            {icon} {iconName}
+            <span className={styles.icon}>{icon}</span>
+            <Text variant="small" tag="span">
+              {iconName}
+            </Text>
           </>
         )}
       </button>
@@ -76,39 +81,28 @@ const ReferenceButton = ({
   )
 }
 
-export const Reference: Story = {
-  render: () => {
-    const [searchTerm, setSearchTerm] = useState<string>("")
+/**
+ * Deprecated icons will still exist in as a React component but have been removed from the assets folder
+ * This will remove them from the documentation but give us time to remove them in the next major
+ */
+const deprecatedList: string[] = ["ThumbsUpIcon", "ThumbsDownIcon"]
 
-    return (
-      <div className="flex flex-col gap-16">
-        <SearchField
-          labelText="Find icon by name"
-          onChange={event => {
-            setSearchTerm(event.target.value)
-          }}
-        />
-        <ul className={styles.grid}>
-          {Object.keys(ICONS)
-            .filter(iconName => {
-              const term = new RegExp(searchTerm, "i")
-              return iconName.match(term)
+export const Reference: Story = {
+  render: () => (
+    <div className="flex flex-col gap-16">
+      <ul className={styles.grid}>
+        {Object.keys(ICONS)
+          .filter(iconName => !deprecatedList.includes(iconName))
+          .map(iconName => {
+            const icon = ICONS[iconName as keyof typeof ICONS]({
+              role: "presentation",
             })
-            .map(iconName => {
-              const icon = ICONS[iconName as keyof typeof ICONS]({
-                role: "presentation",
-              })
 
-              return (
-                <ReferenceButton
-                  key={iconName}
-                  icon={icon}
-                  iconName={iconName}
-                />
-              )
-            })}
-        </ul>
-      </div>
-    )
-  },
+            return (
+              <ReferenceButton key={iconName} icon={icon} iconName={iconName} />
+            )
+          })}
+      </ul>
+    </div>
+  ),
 }

package/src/Icon/_docs/icon.stories.scss

@@ -2,8 +2,8 @@
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  grid-template-rows: repeat(6, 1fr);
+  grid-template-columns: repeat(6, 150px);
+  grid-template-rows: min-content;
   grid-gap: var(--spacing-8);
   margin: 0;
   padding: 0;
@@ -13,14 +13,13 @@
 .button {
   @include button-reset;
 
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: var(--spacing-16);
-  padding: var(--spacing-8);
-  width: 150px;
-  height: 100px;
+  gap: var(--spacing-8);
+  padding: var(--spacing-16);
+  width: 100%;
+  height: 100%;
   background-color: var(--color-gray-100);
   border-radius: var(--border-solid-border-radius);
   word-break: break-all;
@@ -31,6 +30,14 @@
   }
 }
 
+.copiedTag {
+  margin: auto;
+}
+
+.icon {
+  margin-bottom: var(--spacing-8);
+}
+
 .tag {
   border: 1px solid var(--color-green-500);
 }

package/src/Icon/index.ts

@@ -217,7 +217,11 @@ export * from "./TemplateWhiteIcon"
 export * from "./TextAnalyticsIcon"
 export * from "./TextAnalyticsWhiteIcon"
 export * from "./ThumbsDownIcon"
+export * from "./ThumbsDownOffIcon"
+export * from "./ThumbsDownOnIcon"
 export * from "./ThumbsUpIcon"
+export * from "./ThumbsUpOffIcon"
+export * from "./ThumbsUpOnIcon"
 export * from "./TimeIcon"
 export * from "./TimeWhiteIcon"
 export * from "./TranslationIcon"

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>

package/src/index.ts

@@ -57,6 +57,7 @@ export * from "./TimeField"
 export * from "./TitleBlockZen"
 export * from "./ToggleSwitch"
 export * from "./Tooltip"
+export * from "./utils"
 export * from "./VisuallyHidden"
 export * from "./Well"
 export * from "./Workflow"

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+// Not all utils are exported because most are intended for internal use only
+export * from "./useMediaQueries"