@kaizen/components 2.3.0 → 2.3.1

package/dist/styles.css

@@ -10093,19 +10093,28 @@
       display: none;
     }
   }
-  .TitleBlock-module_titleRow__Ifqiu,
+  .TitleBlock-module_titleRow__Ifqiu {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
   .TitleBlock-module_rowBelowSeparator__H4E63 {
     display: flex;
     width: 100%;
     justify-content: center;
   }
+  @container (max-width: calc(768px - 1px)) {
+    .TitleBlock-module_rowBelowSeparator__H4E63 {
+      height: 3.75rem;
+    }
+  }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
-    margin-bottom: 3px;
+    margin-bottom: 0.063rem;
   }
   .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
-    margin-bottom: 3px;
+    margin-bottom: 0.063rem;
   }
   .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
     max-width: 1392px;
@@ -10128,6 +10137,11 @@
       padding-bottom: 12px;
     }
   }
+  @container (max-width: calc(768px - 1px)) {
+    .TitleBlock-module_rowBelowSeparatorInner__3gNec {
+      height: 3.75rem;
+    }
+  }
   .TitleBlock-module_titleRowInnerContent__NhTHV {
     position: relative;
     display: flex;
@@ -10135,7 +10149,7 @@
     align-items: center;
     min-height: 5.25rem;
     justify-content: space-between;
-    border-bottom: 0.1875rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
+    border-bottom: 0.063rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
   }
   .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_titleRowInnerContent__NhTHV {
     border-bottom-color: rgba(var(--color-purple-700-rgb, 74, 35, 77), 0.2);
@@ -10372,9 +10386,14 @@
   .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
     display: flex;
     width: 100%;
-    margin-top: -0.1875rem;
+    margin-top: -0.063rem;
     justify-content: space-between;
   }
+  @container (max-width: calc(768px - 1px)) {
+    .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
+      height: 3.75rem;
+    }
+  }
   .TitleBlock-module_titleAndAdjacent__Q7W-m {
     display: flex;
     min-width: 0;
@@ -10428,6 +10447,8 @@
   }
   @container (max-width: calc(768px - 1px)) {
     .TitleBlock-module_hasNavigationTabs__v09jL .TitleBlock-module_navigationTabScrollerContainer__o234q {
+      margin-top: 0.063rem;
+      height: 3.75rem;
       display: block;
       overflow-x: scroll;
       scrollbar-width: none;
@@ -10455,7 +10476,7 @@
     .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
       display: block;
       position: absolute;
-      top: 3.5625rem;
+      top: 3.687rem;
       width: 3.75rem;
       height: 3.75rem;
       background: linear-gradient(0deg, var(--color-purple-600, #5f3361), rgba(var(--color-purple-600-rgb, 95, 51, 97), 0));

package/package.json

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

package/src/TitleBlock/TitleBlock.module.scss

@@ -14,7 +14,7 @@
   $breadcrumb-circle-width: 48px;
   $breadcrumb-breakpoint-width: $layout-content-max-width + $layout-content-side-margin * 2 +
     $breadcrumb-circle-width * 2.25;
-  $title-block-separator-height: 0.1875rem;
+  $title-block-separator-height: 0.063rem;
   $tab-container-height-default: $ca-grid * 3;
   $tab-container-height-small: $ca-grid * 2.5;
   $tab-container-height-default-collapsed: 0;
@@ -48,21 +48,30 @@
     }
   }
 
-  .titleRow,
+  .titleRow {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
+
   .rowBelowSeparator {
     display: flex;
     width: 100%;
     justify-content: center;
+
+    @include title-block-small {
+      height: $tab-container-height-small;
+    }
   }
 
   .lightVariant .titleRow {
     background-color: $color-white;
-    margin-bottom: 3px; // needed to correctly position the active tab label :after element
+    margin-bottom: $title-block-separator-height;
   }
 
   .adminVariant .titleRow {
     background-color: $color-white;
-    margin-bottom: 3px; // needed to correctly position the active tab label :after element
+    margin-bottom: $title-block-separator-height;
   }
 
   %titleBlockInner {
@@ -92,6 +101,10 @@
 
   .rowBelowSeparatorInner {
     @extend %titleBlockInner;
+
+    @include title-block-small {
+      height: $tab-container-height-small;
+    }
   }
 
   .titleRowInnerContent {
@@ -360,6 +373,10 @@
     width: 100%;
     margin-top: -$title-block-separator-height;
     justify-content: space-between;
+
+    @include title-block-small {
+      height: $tab-container-height-small;
+    }
   }
 
   .titleAndAdjacent {
@@ -425,6 +442,8 @@
   .navigationTabScrollerContainer {
     .hasNavigationTabs & {
       @include title-block-small {
+        margin-top: $title-block-separator-height;
+        height: $tab-container-height-small;
         display: block;
         overflow-x: scroll;
         scrollbar-width: none;

package/src/TitleBlock/_docs/TitleBlock.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
+import { expect, waitFor, within } from '@storybook/test'
 import { Icon } from '~components/Icon'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { StickerSheet } from '~storybook/components/StickerSheet'
@@ -26,6 +27,47 @@ const SECONDARY_ACTIONS = [
   },
 ]
 
+const viewports = {
+  viewports: {
+    default: {
+      name: 'desktop (above or equal to 1366)',
+      styles: { width: '1366px', height: '800px' },
+      type: 'desktop',
+    },
+    desktopSm: {
+      name: 'desktop-sm (1024 - 1365)',
+      styles: { width: '1365px', height: '800px' },
+      type: 'desktop',
+    },
+    tablet: {
+      name: 'tablet (672 - 1023)',
+      styles: { width: '1023px', height: '800px' },
+      type: 'desktop',
+    },
+    mobileResponsive: {
+      name: 'mobile-responsive (512 - 671)',
+      styles: { width: '671px', height: '800px' },
+      type: 'desktop',
+    },
+    mobile: {
+      name: 'mobile (361 - 512)',
+      styles: { width: '511px', height: '800px' },
+      type: 'desktop',
+    },
+    mobileXs: {
+      name: 'mobile (under 360)',
+      styles: { width: '360px', height: '800px' },
+      type: 'desktop',
+    },
+  },
+  defaultViewport: 'default',
+}
+
+const chromaticViewports = {
+  disable: false,
+  viewports: [1366, 1365, 1079, 360, 320],
+}
+
 const meta = {
   title: 'Components/TitleBlock',
   component: TitleBlock,
@@ -94,54 +136,41 @@ export const Playground: Story = {
 
 export const Viewports: Story = {
   parameters: {
-    viewport: {
-      viewports: {
-        default: {
-          name: 'Above or equal to 1366',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        under1366: {
-          name: 'Under 1366',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-        mediumSmall: {
-          name: 'Medium and small',
-          styles: { width: '1079px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1079, 1365, 1366, 360, 320],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+}
+export const WithTabNavigation: Story = {
+  parameters: {
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+
+    const TabNavigation = await canvas.findByRole('navigation', {
+      name: 'Page title',
+    })
+
+    await step('Navigation Tab is present', async () => {
+      await waitFor(() => expect(TabNavigation).toBeInTheDocument())
+    })
+
+    await step('Navigation is focusable', async () => {
+      const NavigationList = canvas.getByRole('list')
+      const listItems = within(NavigationList).getAllByRole('listitem')
+
+      const thirdNavigationLink = within(listItems[2]).getByRole('link')
+      thirdNavigationLink.focus()
+      expect(thirdNavigationLink).toHaveFocus()
+    })
   },
 }
 
 export const HasLongTitle: Story = {
   parameters: {
-    viewport: {
-      viewports: {
-        default: {
-          name: 'Above or equal to 1366',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        under1366: {
-          name: 'Under 1366',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1365, 1366],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: { title: 'A long title with over thirty characters' },
 }
@@ -153,45 +182,8 @@ export const LightVariant: Story = {
         sourceState: 'shown',
       },
     },
-    viewport: {
-      viewports: {
-        default: {
-          name: 'desktop (above or equal to 1366)',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        desktopSm: {
-          name: 'desktop-sm (1024 - 1365)',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-        tablet: {
-          name: 'tablet (672 - 1023)',
-          styles: { width: '1023px', height: '800px' },
-          type: 'desktop',
-        },
-        mobileResponsive: {
-          name: 'mobile-responsive (512 - 671)',
-          styles: { width: '671px', height: '800px' },
-          type: 'desktop',
-        },
-        mobile: {
-          name: 'mobile (361 - 512)',
-          styles: { width: '511px', height: '800px' },
-          type: 'desktop',
-        },
-        mobileXs: {
-          name: 'mobile (under 360)',
-          styles: { width: '360px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1079, 1365, 1366, 360, 320],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: {
     variant: 'light',
@@ -209,25 +201,8 @@ export const LightVariant: Story = {
 
 export const AdminVariant: Story = {
   parameters: {
-    viewport: {
-      viewports: {
-        default: {
-          name: 'Above or equal to 1366',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        under1366: {
-          name: 'Under 1366',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1365, 1366],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: {
     variant: 'admin',
@@ -244,25 +219,8 @@ export const AdminVariant: Story = {
 
 export const EducationVariant: Story = {
   parameters: {
-    viewport: {
-      viewports: {
-        default: {
-          name: 'Above or equal to 1366',
-          styles: { width: '1366px', height: '800px' },
-          type: 'desktop',
-        },
-        under1366: {
-          name: 'Under 1366',
-          styles: { width: '1365px', height: '800px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'default',
-    },
-    chromatic: {
-      disable: false,
-      viewports: [1365, 1366],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: {
     variant: 'education',