@kaizen/components 1.40.6 → 1.41.1

package/locales/en.json

@@ -112,5 +112,9 @@
   "kzErrorPage.goToHome": {
     "description": "Home button label",
     "message": "Go to Home"
+  },
+  "splitButton.dropdownButton.label": {
+    "description": "Label for a dropdown menu holding additional actions",
+    "message": "Additional actions"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.40.6",
+  "version": "1.41.1",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -47,7 +47,7 @@
     "@react-stately/select": "^3.6.2",
     "@react-types/shared": "^3.22.1",
     "classnames": "^2.5.1",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.5.0",
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
     "prosemirror-commands": "^1.5.2",
@@ -80,8 +80,8 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
-    "@cultureamp/frontend-apis": "^9.4.1",
-    "@cultureamp/i18n-react-intl": "^2.5.2",
+    "@cultureamp/frontend-apis": "^9.4.2",
+    "@cultureamp/i18n-react-intl": "^2.5.3",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -90,31 +90,32 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react-dom": "^18.2.19",
+    "@types/react-dom": "^18.2.22",
     "@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",
     "react-intl": "^6.6.2",
-    "rollup": "^4.12.0",
+    "rollup": "^4.12.1",
     "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.71.1",
+    "sass": "^1.72.0",
     "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/tailwind": "1.2.5",
+    "@kaizen/design-tokens": "10.3.19"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.5.1",
+    "@cultureamp/i18n-react-intl": "^2.5.3",
     "react": "^18.2.0",
     "react-intl": "^6.6.2"
   },

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/SplitButton/subcomponents/DropdownButton/DropdownButton.spec.tsx

@@ -9,8 +9,8 @@ const DropdownButtonWrapper = (
 describe("<DropdownButton />", () => {
   it("renders icon with default aria-label", () => {
     render(<DropdownButtonWrapper />)
-    const button = screen.getByRole("button", { name: "Open menu" })
-    expect(button.getAttribute("aria-label")).toBe("Open menu")
+    const button = screen.getByRole("button", { name: "Additional actions" })
+    expect(button.getAttribute("aria-label")).toBe("Additional actions")
     expect(button.firstChild?.nodeName).toEqual("svg")
   })
 

package/src/SplitButton/subcomponents/DropdownButton/DropdownButton.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { useIntl } from "@cultureamp/i18n-react-intl"
 import classnames from "classnames"
 import { ChevronDownIcon } from "~components/Icon"
 import { BaseButton, BaseButtonProps } from "../BaseButton"
@@ -10,13 +11,23 @@ export const DropdownButton = ({
   classNameOverride,
   "aria-label": ariaLabel,
   ...restProps
-}: DropdownButtonProps): JSX.Element => (
-  <BaseButton
-    label={ariaLabel || "Open menu"}
-    icon={<ChevronDownIcon role="presentation" />}
-    classNameOverride={classnames(styles.dropdownButton, classNameOverride)}
-    {...restProps}
-  />
-)
+}: DropdownButtonProps): JSX.Element => {
+  const { formatMessage } = useIntl()
+  return (
+    <BaseButton
+      label={
+        ariaLabel ||
+        formatMessage({
+          id: "splitButton.dropdownButton.label",
+          defaultMessage: "Additional actions",
+          description: "Label for a dropdown menu holding additional actions",
+        })
+      }
+      icon={<ChevronDownIcon role="presentation" />}
+      classNameOverride={classnames(styles.dropdownButton, classNameOverride)}
+      {...restProps}
+    />
+  )
+}
 
 DropdownButton.displayName = "DropdownButton"

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

@@ -18,7 +18,7 @@ export const Header = ({
   ...restProps
 }: HeaderProps): JSX.Element => (
   <HeaderRoot {...restProps}>
-    <Branding alt="Cultureamp" />
+    <Branding alt="Culture Amp" />
     <Titles workflowName={workflowName} stepName={stepName} status={status} />
     <Actions headerActions={headerActions} />
   </HeaderRoot>

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"