@kaizen/components 1.70.0 → 1.70.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.70.0",
+  "version": "1.70.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Filter/FilterBar/FilterBar.spec.tsx

@@ -196,7 +196,7 @@ describe('<FilterBar />', () => {
 
       expect(queryByText('Topping')).not.toBeInTheDocument()
 
-      const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+      const addFiltersButton = getByRole('button', { name: 'Add filters' })
       await user.click(addFiltersButton)
 
       const list = getByRole('list')
@@ -228,7 +228,7 @@ describe('<FilterBar />', () => {
       )
       await waitForI18nContent()
 
-      const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+      const addFiltersButton = getByRole('button', { name: 'Add filters' })
       await user.click(addFiltersButton)
 
       const list = getByRole('list')
@@ -255,7 +255,7 @@ describe('<FilterBar />', () => {
         expect(filterButton).not.toBeInTheDocument()
       })
 
-      const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+      const addFiltersButton = getByRole('button', { name: 'Add filters' })
       await user.click(addFiltersButton)
 
       const list = getByRole('list')
@@ -282,7 +282,7 @@ describe('<FilterBar />', () => {
       )
       await waitForI18nContent()
 
-      const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+      const addFiltersButton = getByRole('button', { name: 'Add filters' })
       await user.click(addFiltersButton)
 
       const menuOptionIceLevel = getByRole('button', { name: 'Ice Level' })
@@ -314,7 +314,7 @@ describe('<FilterBar />', () => {
       )
       await waitForI18nContent()
 
-      const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+      const addFiltersButton = getByRole('button', { name: 'Add filters' })
       await user.click(addFiltersButton)
 
       const menuOptionIceLevel = getByRole('button', { name: 'Ice Level' })
@@ -327,7 +327,7 @@ describe('<FilterBar />', () => {
       const { getByRole } = render(<FilterBarWrapper<ValuesRemovable> filters={filtersRemovable} />)
       await waitForI18nContent()
 
-      const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+      const addFiltersButton = getByRole('button', { name: 'Add filters' })
       await user.click(addFiltersButton)
 
       const menuOptionOthers = getByRole('button', { name: 'Others' })
@@ -353,7 +353,7 @@ describe('<FilterBar />', () => {
         expect(filterButton).not.toBeInTheDocument()
       })
 
-      expect(getByRole('button', { name: 'Add Filters' })).toHaveFocus()
+      expect(getByRole('button', { name: 'Add filters' })).toHaveFocus()
     })
   })
 
@@ -363,7 +363,7 @@ describe('<FilterBar />', () => {
         const { queryByRole, getByRole } = render(<FilterBarWrapper filters={filtersDependent} />)
         await waitForI18nContent()
         expect(queryByRole('button', { name: 'Topping' })).not.toBeInTheDocument()
-        expect(getByRole('button', { name: 'Add Filters' })).toBeDisabled()
+        expect(getByRole('button', { name: 'Add filters' })).toBeDisabled()
       })
 
       it('clears the value if the filter is not usable', async () => {
@@ -426,7 +426,7 @@ describe('<FilterBar />', () => {
         )
         await waitForI18nContent()
 
-        const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+        const addFiltersButton = getByRole('button', { name: 'Add filters' })
         expect(addFiltersButton).toBeDisabled()
 
         const flavourButton = getByRole('button', { name: 'Flavour' })
@@ -612,7 +612,7 @@ describe('<FilterBar />', () => {
         expect(queryByRole('button', { name: 'Sugar' })).not.toBeInTheDocument()
         expect(queryByRole('button', { name: 'Ice' })).not.toBeInTheDocument()
 
-        const addFiltersButton = getByRole('button', { name: 'Add Filters' })
+        const addFiltersButton = getByRole('button', { name: 'Add filters' })
         expect(addFiltersButton).toBeDisabled()
 
         await user.click(coffeeButton)

package/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.spec.tsx

@@ -48,9 +48,9 @@ describe('<AddFiltersMenu />', () => {
     render(<AddFiltersMenuWrapper filters={filters} />)
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Add Filters' })).toBeVisible()
+      expect(screen.getByRole('button', { name: 'Add filters' })).toBeVisible()
     })
-    const addFiltersButton = screen.getByRole('button', { name: 'Add Filters' })
+    const addFiltersButton = screen.getByRole('button', { name: 'Add filters' })
     await user.click(addFiltersButton)
 
     await waitFor(() => {
@@ -74,7 +74,7 @@ describe('<AddFiltersMenu />', () => {
 
     await waitFor(() => {
       const addFiltersButton = screen.getByRole('button', {
-        name: 'Add Filters',
+        name: 'Add filters',
       })
       expect(addFiltersButton).toBeDisabled()
     })

package/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx

@@ -11,7 +11,7 @@ export const AddFiltersMenu = (): JSX.Element => {
 
   const menuButtonLabel = formatMessage({
     id: 'filterBar.addFiltersMenu.buttonLabel',
-    defaultMessage: 'Add Filters',
+    defaultMessage: 'Add filters',
     description: 'Menu button label to show additional available filter options',
   })
 

package/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss

@@ -121,10 +121,10 @@
 
 .informative {
   background: $color-blue-100;
-  border-color: var(--color-blue-400);
+  border-color: var(--color-blue-500);
   color: $color-purple-800;
 
-  --icon-color: var(--color-blue-400);
+  --icon-color: var(--color-blue-500);
 }
 
 .cautionary {

package/src/Tag/_docs/Tag.mdx

@@ -17,7 +17,7 @@ import * as TagStories from './Tag.stories'
 <Unstyled>
   <InlineNotification type="cautionary" persistent>
     {`This version of the Tag will soon be deprecated and will be removed in the next major release.
-    Import Tag from "@kaizen/components/future" for the latest version and veiw our migration guide in the Future folder`}
+    Import Tag from "@kaizen/components/future" for the latest version and view our migration guide in the Future folder`}
   </InlineNotification>
 </Unstyled>
 

package/src/__rc__/Menu/_docs/{Menu.mdx → Menu--usage-guidelines.mdx}

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks'
-import { ResourceLinks, Installation, DosAndDonts, DoOrDont } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybook/components'
 import * as MenuDocsStories from './Menu.docs.stories'
 import * as MenuStories from './Menu.stories'
 
@@ -16,9 +16,10 @@ Updated July 6, 2024
   apiSpecification="/?path=/docs/actions-menu-v3-api-specification--docs"
 />
 
-<Installation
-  installCommand="pnpm add @kaizen/components"
-  importStatement='import { MenuTrigger, Menu, MenuItem, MenuPopover, MenuSection, MenuHeader } from "@kaizen/components/v3/actions"'
+<KAIOInstallation
+  exportNames={['Menu', 'MenuTrigger', 'MenuItem', 'MenuPopover', 'MenuSection', 'MenuHeader']}
+  family="actions"
+  version="3"
 />
 
 ## Overview
@@ -55,12 +56,12 @@ A menu displays a list of actions in a popover, toggled opened with a button.
 - Menu items may be organised into sections, with a heading for each section.
 - The menu trigger button, which may be any variation of a button.
 
-  ### When to use
+### When to use
 
 - When you have a group of related actions for a page or item on the page.
 - The actions either: - Cause an action on the page (e.g. delete), or - Navigate somewhere
 
-  ### When not to use
+### When not to use
 
 - When you want to persist a user selection.
   - Use a Select/Multi-Select or Combobox/Multi-Combobox component instead.
@@ -69,6 +70,8 @@ A menu displays a list of actions in a popover, toggled opened with a button.
   - It's recommended that you avoid this because of the complexity it adds for accessibility.
 - Inside a navigation bar - Different DOM elements and behaviour is required for a dropdown menu in a navigation bar.
 
+### Specs
+
 #### Do use a menu for an overflow of actions
 
 Menus work well as an overflow for a list of actions on a page or section. Try to avoid using menus for a single action, favouring an inline button/link instead.

package/src/__rc__/Tooltip/_docs/Tooltip.mdx

@@ -87,7 +87,7 @@ Tooltips should never stop a user (or be a gate) from completing a task or perfo
 
 #### Do be concise
 
-Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don’t use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform.
+Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don't use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform.
 
 <DosAndDonts>
   <DoOrDont story={TooltipStories.DoConcise} />
@@ -107,7 +107,7 @@ Good tooltips contain concise and helpful information, keep it short. If you nee
 ### Trigger
 
 - A tooltip trigger needs to be discoverable:
-  - E.g. something like an icon to suggest there’s a tooltip.
+  - E.g. something like an icon to suggest there&apos;s a tooltip.
   - Avoid triggering tooltips from text that excludes a visual indicator (e.g. underline)
 - A tooltip should be shown and accessible on hover, click or on focus events.