@kaizen/components 1.54.1 → 1.54.3

package/locales/vi.json

@@ -9,10 +9,50 @@
     }],
     "variants_enabled" : true
   },
+  "date.validation.invalidDate" : {
+    "description" : "Error message when the user enters an invalid date and we do not know their input value",
+    "message" : "Ngày không hợp lệ"
+  },
+  "date.validation.invalidDateWithValue" : {
+    "description" : "Error message when the user enters an invalid date and we know their input value",
+    "message" : "{inputValue} là ngày không hợp lệ"
+  },
+  "date.validation.rangeEndBeforeRangeStart" : {
+    "description" : "Error message when the user tries to select an end date earlier than the start date",
+    "message" : "Không thể sớm hơn lựa chọn trong \"{startDateFieldLabel}\""
+  },
+  "date.validation.unavailableDate" : {
+    "description" : "Error message when the user tries to select a date that is unavailable",
+    "message" : "{inputValue} không khả dụng, hãy thử vào ngày khác"
+  },
   "dateInputDescription.inputFormat" : {
     "description" : "Label for the 'Input format' field",
     "message" : "Định dạng đầu vào"
   },
+  "datePicker.calendarLabelDescription" : {
+    "description" : "Label for the search input",
+    "message" : "Chọn ngày từ lịch cho:"
+  },
+  "filterBar.addFiltersMenu.buttonLabel" : {
+    "description" : "Menu button label to show additional available filter options",
+    "message" : "Thêm bộ lọc"
+  },
+  "filterBar.clearAllButton.ariaLabel" : {
+    "description" : "Button aria-label to clear all values within the filter bar",
+    "message" : "Xóa tất cả các bộ lọc"
+  },
+  "filterBar.clearAllButton.label" : {
+    "description" : "Button label to clear all values within the filter bar",
+    "message" : "Xóa tất cả"
+  },
+  "filterButton.removable.removeButtonLabel" : {
+    "description" : "Button label to remove a single filter from the filter bar",
+    "message" : "Xóa bộ lọc - {filterLabel}"
+  },
+  "filterDatePickerDateInputField.dateInputLabelFallback" : {
+    "description" : "Default label for date input field",
+    "message" : "Ngày"
+  },
   "filterDateRangePicker.dateFrom" : {
     "description" : "Label for the 'Date from' field",
     "message" : "Ngày từ"

package/locales/zh-TW.json

@@ -9,10 +9,50 @@
     }],
     "variants_enabled" : true
   },
+  "date.validation.invalidDate" : {
+    "description" : "Error message when the user enters an invalid date and we do not know their input value",
+    "message" : "日期無效"
+  },
+  "date.validation.invalidDateWithValue" : {
+    "description" : "Error message when the user enters an invalid date and we know their input value",
+    "message" : "{inputValue} 是無效日期"
+  },
+  "date.validation.rangeEndBeforeRangeStart" : {
+    "description" : "Error message when the user tries to select an end date earlier than the start date",
+    "message" : "不能早於「{startDateFieldLabel}」中的選擇"
+  },
+  "date.validation.unavailableDate" : {
+    "description" : "Error message when the user tries to select a date that is unavailable",
+    "message" : "{inputValue} 沒有空，請嘗試其他日期"
+  },
   "dateInputDescription.inputFormat" : {
     "description" : "Label for the 'Input format' field",
     "message" : "輸入格式"
   },
+  "datePicker.calendarLabelDescription" : {
+    "description" : "Label for the search input",
+    "message" : "從行事曆中選擇日期："
+  },
+  "filterBar.addFiltersMenu.buttonLabel" : {
+    "description" : "Menu button label to show additional available filter options",
+    "message" : "新增篩選條件"
+  },
+  "filterBar.clearAllButton.ariaLabel" : {
+    "description" : "Button aria-label to clear all values within the filter bar",
+    "message" : "清除所有篩選條件"
+  },
+  "filterBar.clearAllButton.label" : {
+    "description" : "Button label to clear all values within the filter bar",
+    "message" : "全部清除"
+  },
+  "filterButton.removable.removeButtonLabel" : {
+    "description" : "Button label to remove a single filter from the filter bar",
+    "message" : "移除篩選條件 - {filterLabel}"
+  },
+  "filterDatePickerDateInputField.dateInputLabelFallback" : {
+    "description" : "Default label for date input field",
+    "message" : "日期"
+  },
   "filterDateRangePicker.dateFrom" : {
     "description" : "Label for the 'Date from' field",
     "message" : "開始日期："
@@ -23,7 +63,7 @@
   },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
-    "message" : "Filter options by search query"
+    "message" : "依搜尋查詢篩選選項"
   },
   "filterMultiSelectSearchInput.placeholder" : {
     "description" : "Placeholder for the search input",
@@ -31,7 +71,7 @@
   },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
-    "message" : "Clear search"
+    "message" : "清除搜尋"
   },
   "kzErrorPage" : {
     "description" : "Label for contact button",

package/locales/zh.json

@@ -9,10 +9,50 @@
     }],
     "variants_enabled" : true
   },
+  "date.validation.invalidDate" : {
+    "description" : "Error message when the user enters an invalid date and we do not know their input value",
+    "message" : "日期无效"
+  },
+  "date.validation.invalidDateWithValue" : {
+    "description" : "Error message when the user enters an invalid date and we know their input value",
+    "message" : "{inputValue}为无效日期"
+  },
+  "date.validation.rangeEndBeforeRangeStart" : {
+    "description" : "Error message when the user tries to select an end date earlier than the start date",
+    "message" : "不能早于“{startDateFieldLabel}”中的选择"
+  },
+  "date.validation.unavailableDate" : {
+    "description" : "Error message when the user tries to select a date that is unavailable",
+    "message" : "{inputValue}不可用，请尝试其他日期"
+  },
   "dateInputDescription.inputFormat" : {
     "description" : "Label for the 'Input format' field",
     "message" : "输入格式"
   },
+  "datePicker.calendarLabelDescription" : {
+    "description" : "Label for the search input",
+    "message" : "从日历中选择日期："
+  },
+  "filterBar.addFiltersMenu.buttonLabel" : {
+    "description" : "Menu button label to show additional available filter options",
+    "message" : "添加筛选条件"
+  },
+  "filterBar.clearAllButton.ariaLabel" : {
+    "description" : "Button aria-label to clear all values within the filter bar",
+    "message" : "清除所有筛选条件"
+  },
+  "filterBar.clearAllButton.label" : {
+    "description" : "Button label to clear all values within the filter bar",
+    "message" : "全部清除"
+  },
+  "filterButton.removable.removeButtonLabel" : {
+    "description" : "Button label to remove a single filter from the filter bar",
+    "message" : "删除筛选条件 - {filterLabel}"
+  },
+  "filterDatePickerDateInputField.dateInputLabelFallback" : {
+    "description" : "Default label for date input field",
+    "message" : "日期"
+  },
   "filterDateRangePicker.dateFrom" : {
     "description" : "Label for the 'Date from' field",
     "message" : "起始日期"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.54.1",
+  "version": "1.54.3",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -100,7 +100,7 @@
     "ts-jest": "^29.1.4",
     "tslib": "^2.6.3",
     "tsx": "^4.15.1",
-    "@kaizen/design-tokens": "10.4.2",
+    "@kaizen/design-tokens": "10.5.0",
     "@kaizen/package-bundler": "1.1.2"
   },
   "devDependenciesComments": {

package/src/Brand/Brand.tsx

@@ -1,29 +1,68 @@
-import React, { HTMLAttributes } from "react"
+import React, { HTMLAttributes, SVGAttributes } from "react"
 import { assetUrl } from "@kaizen/hosted-assets"
 import { OverrideClassName } from "~types/OverrideClassName"
+import { BrandCollectiveIntelligence } from "./BrandCollectiveIntelligence"
 import styles from "./Brand.module.scss"
 
-export type BrandProps = {
-  variant:
-    | "logo-horizontal"
-    | "logo-vertical"
-    | "enso"
-    | "collective-intelligence"
+type MeaningfulSVG = { role: "img"; "aria-label": string; alt?: never }
+type DecorativeSVG = { role: "presentation"; "aria-label"?: never; alt?: never }
+export type BrandSVGProps = OverrideClassName<SVGAttributes<SVGElement>> &
+  (MeaningfulSVG | DecorativeSVG)
+
+type SVGBackwardsCompatible = { role?: never; alt: string }
+type SVGProps = OverrideClassName<SVGAttributes<SVGElement>> &
+  (MeaningfulSVG | DecorativeSVG | SVGBackwardsCompatible)
+type VariantSVG = {
+  variant: "collective-intelligence"
+} & SVGProps
+
+type PictureProps = OverrideClassName<HTMLAttributes<HTMLElement>> & {
   alt: string
+}
+type VariantPicture = {
+  variant: "logo-horizontal" | "logo-vertical" | "enso"
+} & PictureProps
+
+export type BrandProps = {
   reversed?: boolean
-} & OverrideClassName<HTMLAttributes<HTMLElement>>
+} & (VariantSVG | VariantPicture)
+
+const isSVG = (
+  variant: VariantSVG["variant"] | VariantPicture["variant"],
+  restProps: SVGProps | PictureProps
+): restProps is SVGProps => variant === "collective-intelligence"
 
 export const Brand = ({
-  variant,
-  alt,
   reversed = false,
-  classNameOverride,
+  variant,
   ...restProps
 }: BrandProps): JSX.Element => {
+  if (isSVG(variant, restProps)) {
+    const { role, alt, "aria-label": ariaLabel, ...props } = restProps
+
+    if (role === "presentation") {
+      return <BrandCollectiveIntelligence role={role} {...props} />
+    }
+    if (role === "img") {
+      return (
+        <BrandCollectiveIntelligence
+          role={role}
+          aria-label={ariaLabel}
+          {...props}
+        />
+      )
+    }
+
+    return (
+      <BrandCollectiveIntelligence role="img" aria-label={alt} {...props} />
+    )
+  }
+
+  const { alt, classNameOverride } = restProps
   const brandTheme = reversed ? "-reversed" : "-default"
 
   return (
-    <picture className={classNameOverride} {...restProps}>
+    <picture className={classNameOverride} {...(restProps as PictureProps)}>
       <source
         srcSet={assetUrl(`brand/${variant}-reversed.svg`)}
         media="(forced-colors: active) and (prefers-color-scheme: dark)"

package/src/Brand/BrandCollectiveIntelligence/BrandCollectiveIntelligence.tsx

@@ -0,0 +1,60 @@
+import React from "react"
+import { BrandSVGProps } from "../Brand"
+
+export type BrandCollectiveIntelligenceProps = BrandSVGProps
+
+export const BrandCollectiveIntelligence = ({
+  role,
+  classNameOverride,
+  ...restProps
+}: BrandCollectiveIntelligenceProps): JSX.Element => {
+  const props = {
+    role,
+    "aria-hidden": role === "presentation" ? true : undefined,
+    className: classNameOverride,
+    ...restProps,
+  }
+
+  return (
+    <svg width="56" height="56" viewBox="0 0 56 56" fill="none" {...props}>
+      <path
+        fill="#5F3361"
+        fillRule="evenodd"
+        d="M27.849 55.029c-1.607 0-3.15-.502-4.34-1.41l-2.94-2.235c-1.025-.78-3.201-1.658-4.479-1.802l-3.68-.423c-3.155-.363-5.847-2.995-6.262-6.12l-.484-3.646c-.169-1.267-1.086-3.418-1.888-4.422l-2.3-2.882c-1.94-2.429-1.972-6.263-.07-8.726l2.25-2.92c.784-1.015 1.667-3.178 1.815-4.452l.425-3.653c.365-3.131 3.013-5.804 6.16-6.22l3.674-.48c1.277-.169 3.44-1.08 4.445-1.874l2.906-2.288C24.289.524 25.868 0 27.521 0c1.61 0 3.15.5 4.343 1.406l2.939 2.24c1.024.777 3.201 1.655 4.479 1.799l3.68.423c3.155.363 5.846 2.995 6.261 6.12l.484 3.646c.17 1.267 1.088 3.418 1.888 4.422l2.301 2.88c1.97 2.475 2.001 6.225.073 8.727l-2.255 2.92c-.783 1.016-1.664 3.18-1.814 4.451l-.425 3.655c-.365 3.131-3.013 5.806-6.158 6.22l-3.671.482c-1.28.167-3.441 1.079-4.453 1.874L32.29 53.55c-1.21.952-2.785 1.477-4.44 1.477h-.001Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#5F3361"
+        fillRule="evenodd"
+        d="m51.622 24.726-2.301-2.882c-1.13-1.416-2.25-4.042-2.49-5.834l-.484-3.647c-.238-1.791-1.911-3.428-3.72-3.634l-3.678-.422c-1.808-.209-4.467-1.277-5.912-2.378l-2.94-2.238c-1.443-1.1-3.792-1.08-5.216.043L21.978 6.02c-1.425 1.122-4.067 2.234-5.87 2.472l-3.672.48c-1.805.238-3.451 1.9-3.661 3.697l-.425 3.654c-.209 1.795-1.286 4.438-2.393 5.872l-2.252 2.92c-1.107 1.435-1.089 3.767.042 5.183l2.3 2.882c1.131 1.417 2.252 4.042 2.49 5.834l.484 3.646c.238 1.792 1.911 3.429 3.72 3.636l3.68.423c1.808.206 4.467 1.275 5.911 2.376l2.94 2.238c1.443 1.1 3.791 1.082 5.216-.043l2.903-2.285c1.426-1.123 4.068-2.235 5.873-2.471l3.671-.483c1.804-.236 3.45-1.9 3.658-3.694l.425-3.655c.21-1.796 1.286-4.439 2.394-5.872l2.252-2.92c1.106-1.434 1.088-3.768-.042-5.184Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#FFCA4D"
+        fillRule="evenodd"
+        d="M16.105 8.491c1.804-.236 4.446-1.35 5.873-2.472l2.903-2.286c1.425-1.122 3.773-1.142 5.217-.041l2.939 2.238c1.444 1.099 4.105 2.17 5.912 2.377l3.678.422c1.808.207 3.482 1.842 3.72 3.634l.485 3.648c.238 1.792 1.359 4.416 2.488 5.834l2.302 2.88c1.13 1.418 1.15 3.75.042 5.184l-2.252 2.92c-1.108 1.435-2.184 4.078-2.394 5.874l-.425 3.654c-.209 1.795-1.856 3.457-3.658 3.694l-3.672.482c-1.804.236-4.447 1.35-5.872 2.473l-2.902 2.285c-1.425 1.123-3.776 1.142-5.218.041l-2.94-2.238c-1.444-1.099-4.103-2.168-5.911-2.375l-3.679-.424c-1.806-.206-3.481-1.842-3.72-3.634l-.485-3.648c-.239-1.792-1.357-4.416-2.49-5.832l-2.298-2.883c-1.132-1.417-1.15-3.749-.045-5.183l2.255-2.919c1.107-1.434 2.184-4.078 2.391-5.874l.425-3.654c.21-1.796 1.858-3.458 3.661-3.694l3.67-.483Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#FFCA4D"
+        fillRule="evenodd"
+        d="M16.105 8.491c1.804-.236 4.446-1.35 5.873-2.472l2.903-2.286c1.425-1.122 3.773-1.142 5.217-.041l2.939 2.238c1.444 1.099 4.105 2.17 5.912 2.377l3.678.422c1.808.207 3.482 1.842 3.72 3.634l.485 3.648c.238 1.792 1.359 4.416 2.488 5.834l2.302 2.88c1.13 1.418 1.15 3.75.042 5.184l-2.252 2.92c-1.108 1.435-2.184 4.078-2.394 5.874l-.425 3.654c-.209 1.795-1.856 3.457-3.658 3.694l-3.672.482c-1.804.236-4.447 1.35-5.872 2.473l-2.902 2.285c-1.425 1.123-3.776 1.142-5.218.041l-2.94-2.238c-1.444-1.099-4.103-2.168-5.911-2.375l-3.679-.424c-1.806-.206-3.481-1.842-3.72-3.634l-.485-3.648c-.239-1.792-1.357-4.416-2.49-5.832l-2.298-2.883c-1.132-1.417-1.15-3.749-.045-5.183l2.255-2.919c1.107-1.434 2.184-4.078 2.391-5.874l.425-3.654c.21-1.796 1.858-3.458 3.661-3.694l3.67-.483Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#4A234D"
+        fillRule="evenodd"
+        d="M39.24 38.774c-1.214 1.212-3.587 1.325-6.513.307-.832-.29-1.68-.658-2.536-1.099a35.787 35.787 0 0 0 4.461-3.794 35.747 35.747 0 0 0 3.768-4.414c1.932 3.709 2.58 7.242.82 9Zm-16.317.307c-2.926 1.017-5.3.907-6.513-.307-1.214-1.212-1.326-3.585-.307-6.51.289-.829.66-1.678 1.098-2.532a36.016 36.016 0 0 0 3.797 4.457 35.986 35.986 0 0 0 4.46 3.793c-.855.44-1.703.81-2.535 1.1Zm-6.82-16.612c-1.02-2.924-.907-5.297.307-6.51.664-.662 1.673-.997 2.932-.997 1.041 0 2.256.228 3.581.692.832.288 1.68.657 2.534 1.096a36.243 36.243 0 0 0-4.46 3.795 36.008 36.008 0 0 0-3.796 4.456c-.439-.853-.81-1.701-1.098-2.532Zm20.9 4.898a32.31 32.31 0 0 1-4.116 5.06 32.716 32.716 0 0 1-5.062 4.163 32.72 32.72 0 0 1-5.064-4.163 32.75 32.75 0 0 1-4.166-5.06 32.778 32.778 0 0 1 4.166-5.061 32.79 32.79 0 0 1 5.064-4.163c1.73 1.142 3.447 2.548 5.062 4.163a32.335 32.335 0 0 1 4.115 5.061Zm-4.276-11.713c1.326-.464 2.538-.692 3.58-.692 1.26 0 2.27.335 2.934.997 1.759 1.758 1.111 5.29-.821 9a35.851 35.851 0 0 0-3.768-4.414 36.04 36.04 0 0 0-4.46-3.795c.855-.44 1.703-.808 2.535-1.096Zm8.277-1.457c-1.946-1.942-5.176-2.26-9.097-.898-1.338.467-2.711 1.114-4.082 1.913-1.371-.8-2.744-1.446-4.082-1.913-3.921-1.363-7.152-1.044-9.097.899-1.944 1.942-2.263 5.172-.898 9.09.466 1.338 1.113 2.71 1.913 4.08-.8 1.37-1.447 2.741-1.913 4.079-1.365 3.918-1.046 7.146.898 9.09 1.151 1.148 2.752 1.73 4.68 1.73 1.33 0 2.816-.278 4.417-.833 1.338-.466 2.71-1.112 4.082-1.912 1.371.8 2.744 1.446 4.082 1.912 1.6.556 3.087.834 4.416.834 1.93 0 3.53-.583 4.68-1.732 2.686-2.683 2.11-7.802-1.019-13.169 3.13-5.366 3.705-10.488 1.02-13.17Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#5F3361"
+        fillRule="evenodd"
+        d="M32 26.95c-.078.03-.127.217-.116.37.038.5.082 1.068-.285 1.935-.174.412-.487.843-.907 1.243-.529.505-.971.618-1.084.618-.04 0-.064-.013-.071-.039-.003-.008-.01-.034.023-.059l.094-.067c.224-.16.285-.202.525-.412.383-.33.93-1.13 1.017-1.387.107-.312.2-.785.166-1.134-.021-.22-.068-.29-.078-.295-.039.006-.122.12-.171.31-.045.17-.106.371-.164.563-.162.537-.326.733-.486.923l-.098.12c-.281.365-.645.563-.731.563-.038 0-.05-.026-.054-.035-.013-.035.016-.068.061-.108.116-.097.51-.465.685-1.086.029-.105 0-.215-.02-.225 0 0-.037.01-.095.153-.122.3-.143.33-.336.61-.24.35-.674.7-.879.799-.323.152-.673.23-1.041.23-.219 0-.451-.027-.684-.08-.524-.123-1.142-.639-1.18-.679a3.352 3.352 0 0 1-.455-.576c-.288-.511-.411-1.007-.366-1.472.047-.48.14-.854.47-1.235.321-.377.61-.63 1.12-.808.254-.089.574-.14.898-.14.454 0 .86.099 1.116.264.444.29.603.441.998.834.178.177.457.284.738.284.212 0 .415-.056.606-.169.381-.224.599-.514.648-.862.106-.752-.589-1.491-.596-1.498a6.458 6.458 0 0 0-.477-.453c-.001-.185-.21-.33-.21-.33a4.134 4.134 0 0 0-2.681-.787 6.647 6.647 0 0 0-1.505.214c-1.228.28-2.2.968-2.899 2.05-.493.577-.677 1.465-.73 2.188-.06.782.246 1.954.413 2.111a.58.58 0 0 0 .313.169c.094.203.197.413.24.474l.095.137c.197.286.401.583.674.82.451.387.854.601 1.4.839.54.236.956.336 1.484.354.186.009.315.012.43.012.421 0 .724-.045 1.16-.164a5.244 5.244 0 0 0 1.336-.59c.17-.107.695-.577.876-.787a4.16 4.16 0 0 0 .706-1.215c.389-1.109.309-1.715.255-2.121-.033-.258-.098-.373-.148-.373Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+BrandCollectiveIntelligence.displayName = "Brand.CollectiveIntelligence"

package/src/Brand/BrandCollectiveIntelligence/index.ts

@@ -0,0 +1 @@
+export * from "./BrandCollectiveIntelligence"

package/src/Brand/_docs/Brand.stickersheet.stories.tsx

@@ -36,13 +36,11 @@ const StickerSheetTemplate: StickerSheetStory = {
           <Brand alt="Culture Amp" variant="enso" reversed={isReversed} />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Collective Intelligence">
-          <div style={{ width: "200px" }}>
-            <Brand
-              alt="Collective Intelligence"
-              variant="collective-intelligence"
-              reversed={isReversed}
-            />
-          </div>
+          <Brand
+            alt="Collective Intelligence"
+            variant="collective-intelligence"
+            reversed={isReversed}
+          />
         </StickerSheet.Row>
       </StickerSheet.Body>
     </StickerSheet>

package/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.stories.tsx

@@ -6,7 +6,6 @@ import { ExpertAdviceCollapsible } from "../index"
 const meta = {
   title: "Components/Collapsibles/ExpertAdviceCollapsible",
   component: ExpertAdviceCollapsible,
-  parameters: { chromatic: { disable: false } },
   args: {
     title: "Expert advice collapsible",
     children: (