Merge main into renovate/rollup

.github/workflows/chromatic-pr.yaml

@@ -57,7 +57,7 @@ jobs:
           onlyChanged: '!(main)'
           externals: |
             **/!(*.module).scss
-            packages/components/**/*.css
+            **/!(*.module).css
 
   update-branch-preview:
     runs-on: ubuntu-latest

docs/.storybook/preview.css

@@ -28,6 +28,11 @@ pre code {
     font-size: var(--typography-heading-1-font-size);
     line-height: var(--typography-heading-1-line-height);
     letter-spacing: var(--typography-heading-1-letter-spacing);
+    margin-bottom: var(--spacing-20);
+
+    > a {
+      float: unset;
+    }
   }
 
   :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)) {
@@ -38,6 +43,15 @@ pre code {
     letter-spacing: var(--typography-heading-2-letter-spacing);
     border-bottom: 0;
     text-decoration: none;
+    margin-top: var(--spacing-32);
+
+    &:first-of-type {
+      margin-top: var(--spacing-32);
+    }
+
+    > a {
+      float: unset;
+    }
   }
 
   :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)) {
@@ -46,6 +60,16 @@ pre code {
     font-size: var(--typography-heading-3-font-size);
     line-height: var(--typography-heading-3-line-height);
     letter-spacing: var(--typography-heading-3-letter-spacing);
+    margin-top: var(--spacing-24);
+    margin-bottom: var(--spacing-12);
+
+    &:first-of-type {
+      margin-top: var(--spacing-24);
+    }
+
+    > a {
+      float: unset;
+    }
   }
 
   :where(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)) {
@@ -54,6 +78,16 @@ pre code {
     font-size: var(--typography-heading-4-font-size);
     line-height: var(--typography-heading-4-line-height);
     letter-spacing: var(--typography-heading-4-letter-spacing);
+    margin-top: var(--spacing-24);
+    margin-bottom: var(--spacing-12);
+
+    &:first-of-type {
+      margin-top: var(--spacing-24);
+    }
+
+    > a {
+      float: unset;
+    }
   }
 
   :where(h5:not(.sb-anchor, .sb-unstyled, .sb-unstyled h5)) {
@@ -62,6 +96,15 @@ pre code {
     font-size: var(--typography-heading-5-font-size);
     line-height: var(--typography-heading-5-line-height);
     letter-spacing: var(--typography-heading-5-letter-spacing);
+    margin-top: var(--spacing-20);
+
+    &:first-of-type {
+      margin-top: var(--spacing-20);
+    }
+
+    > a {
+      float: unset;
+    }
   }
 
   :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) {

docs/components/ResourceLinks/ResourceLinks.tsx

@@ -43,7 +43,7 @@ export const ResourceLinks = ({
   <Unstyled>
     <ul
       {...attributes}
-      className={classNames('flex flex-wrap mt-16 mb-40 list-none m-0 p-0 gap-8', className)}
+      className={classNames('flex flex-wrap mt-24 mb-40 list-none m-0 p-0 gap-8', className)}
     >
       <ResourceLink href={sourceCode} text="Source Code" />
       {figma && <ResourceLink href={figma} text="Figma" />}

packages/components/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 1.70.3
+
+### Patch Changes
+
+- [#5430](https://github.com/cultureamp/kaizen-design-system/pull/5430) [`fbedd22`](https://github.com/cultureamp/kaizen-design-system/commit/fbedd223447aa569aa2de13482d896465494bf29) - FilterBar: Update localisation to follow guidelines
+
+## 1.70.2
+
+### Patch Changes
+
+- [#5425](https://github.com/cultureamp/kaizen-design-system/pull/5425) [`3c296b1`](https://github.com/cultureamp/kaizen-design-system/commit/3c296b1cea076d8ecbd92f4ebd61d002e797009e) - FilterBar: 'Add Filters' button label changed to 'Add filters' to follow guidelines
+
+## 1.70.1
+
+### Patch Changes
+
+- [#5423](https://github.com/cultureamp/kaizen-design-system/pull/5423) [`2fcf1cc`](https://github.com/cultureamp/kaizen-design-system/commit/2fcf1ccee78c0808630e19bafbd8330897277843) - Update inline notification icon colour to blue-500
+
 ## 1.70.0
 
 ### Minor Changes

packages/components/locales/en-GB.json

@@ -35,7 +35,7 @@
   },
   "filterBar.addFiltersMenu.buttonLabel" : {
     "description" : "Menu button label to show additional available filter options",
-    "message" : "Add Filters"
+    "message" : "Add filters"
   },
   "filterBar.clearAllButton.ariaLabel" : {
     "description" : "Button aria-label to clear all values within the filter bar",

packages/components/locales/en.json

@@ -36,7 +36,7 @@
   },
   "filterBar.addFiltersMenu.buttonLabel": {
     "description": "Menu button label to show additional available filter options",
-    "message": "Add Filters"
+    "message": "Add filters"
   },
   "filterBar.clearAllButton.ariaLabel": {
     "description": "Button aria-label to clear all values within the filter bar",

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.70.0",
+  "version": "1.70.3",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <[email protected]>",
   "homepage": "https://cultureamp.design",

packages/components/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)

packages/components/src/Filter/FilterBar/_docs/FilterBar.spec.stories.tsx

@@ -157,7 +157,7 @@ export const ClearAllFromRemovable: Story = {
 
     await step('removable filter is added with no value', async () => {
       await waitFor(() => {
-        userEvent.click(canvas.getByRole('button', { name: 'Add Filters' }))
+        userEvent.click(canvas.getByRole('button', { name: 'Add filters' }))
       })
 
       await waitFor(() => {
@@ -205,7 +205,7 @@ export const ClearAllRemovesItself: Story = {
     const canvas = within(canvasElement.parentElement!)
 
     await step('removable filter is added with no value', async () => {
-      await waitFor(() => userEvent.click(canvas.getByRole('button', { name: 'Add Filters' })))
+      await waitFor(() => userEvent.click(canvas.getByRole('button', { name: 'Add filters' })))
       await userEvent.click(canvas.getByRole('button', { name: 'Drank' }))
     })
 

packages/components/src/Filter/FilterBar/_docs/FilterBar.stories.tsx

@@ -791,10 +791,10 @@ export const UpdatesLabels: Story = {
     const canvas = within(canvasElement)
 
     await step('Initial render complete', async () => {
-      await waitFor(() => canvas.getByRole('button', { name: 'Add Filters' }))
+      await waitFor(() => canvas.getByRole('button', { name: 'Add filters' }))
     })
 
-    await userEvent.click(canvas.getByRole('button', { name: 'Add Filters' }))
+    await userEvent.click(canvas.getByRole('button', { name: 'Add filters' }))
 
     expect(canvas.queryByText('Custom Range')).not.toBeInTheDocument()
 

packages/components/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()
     })

packages/components/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',
   })
 

packages/components/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 {