@kaizen/components 0.0.0-canary-02-18-UUXP-55-20251218012602 → 0.0.0-canary-01-new-bp-20251222095813

package/dist/cjs/src/TitleBlock/TitleBlock.cjs

@@ -116,12 +116,6 @@ var Breadcrumb = function (_a) {
       name: "arrow_back",
       isPresentational: true,
       shouldMirrorInRTL: true
-    })), React__default.default.createElement("div", {
-      className: TitleBlock_module.staticIcon
-    }, React__default.default.createElement(Icon.Icon, {
-      name: "arrow_back",
-      isPresentational: true,
-      shouldMirrorInRTL: true
     })), React__default.default.createElement("span", {
       className: TitleBlock_module.breadcrumbTextLink,
       "data-automation-id": textAutomationId,

package/dist/cjs/src/TitleBlock/TitleBlock.module.scss.cjs

@@ -53,7 +53,6 @@ var styles = {
   "slide-fade": "TitleBlock-module_slide-fade__o5TnP",
   "reverse-slide-fade": "TitleBlock-module_reverse-slide-fade__LZZ98",
   "breadcrumbText": "TitleBlock-module_breadcrumbText__vDi0k",
-  "circle": "TitleBlock-module_circle__68z-T",
-  "staticIcon": "TitleBlock-module_staticIcon__5jeBS"
+  "circle": "TitleBlock-module_circle__68z-T"
 };
 module.exports = styles;

package/dist/esm/src/TitleBlock/TitleBlock.mjs

@@ -107,12 +107,6 @@ var Breadcrumb = function (_a) {
       name: "arrow_back",
       isPresentational: true,
       shouldMirrorInRTL: true
-    })), /*#__PURE__*/React.createElement("div", {
-      className: styles.staticIcon
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "arrow_back",
-      isPresentational: true,
-      shouldMirrorInRTL: true
     })), /*#__PURE__*/React.createElement("span", {
       className: styles.breadcrumbTextLink,
       "data-automation-id": textAutomationId,

package/dist/esm/src/TitleBlock/TitleBlock.module.scss.mjs

@@ -51,7 +51,6 @@ var styles = {
   "slide-fade": "TitleBlock-module_slide-fade__o5TnP",
   "reverse-slide-fade": "TitleBlock-module_reverse-slide-fade__LZZ98",
   "breadcrumbText": "TitleBlock-module_breadcrumbText__vDi0k",
-  "circle": "TitleBlock-module_circle__68z-T",
-  "staticIcon": "TitleBlock-module_staticIcon__5jeBS"
+  "circle": "TitleBlock-module_circle__68z-T"
 };
 export { styles as default };

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: 1px;
+    margin-bottom: 0.063rem;
   }
   .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
-    margin-bottom: 1px;
+    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.083rem 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);
@@ -10270,10 +10284,9 @@
     margin-inline-end: var(--spacing-xs, 0.375rem);
     margin-inline-start: 0;
   }
-  @media (max-width: 1079px) {
+  @container (max-width: calc(1080px - 1px)) {
     .TitleBlock-module_hamburger__qe4R0 {
       display: flex;
-      align-items: center;
     }
   }
   .TitleBlock-module_subtitle__AI9tj {
@@ -10373,9 +10386,14 @@
   .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
     display: flex;
     width: 100%;
-    margin-top: -0.083rem;
+    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;
@@ -10429,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;
@@ -10456,7 +10476,7 @@
     .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
       display: block;
       position: absolute;
-      top: 3.667rem;
+      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));
@@ -10557,6 +10577,18 @@
     border-style: var(--border-focus-ring-border-style, solid);
     inset: calc(-2 * var(--border-focus-ring-border-width, 2px) - var(--border-focus-ring-border-width, 2px));
   }
+  @container (max-width: calc(1080px - 1px)) {
+    .TitleBlock-module_breadcrumb__lVNKz {
+      display: none;
+    }
+  }
+  @media (min-width: 1080px) {
+    @container (max-width: 704px) {
+      .TitleBlock-module_breadcrumb__lVNKz {
+        display: none;
+      }
+    }
+  }
   @media only screen {
     @container (max-width: 1644px) {
       .TitleBlock-module_breadcrumb__lVNKz {
@@ -10661,19 +10693,8 @@
     color: var(--color-blue-500, #0168b3);
     background-color: rgba(var(--color-blue-500-rgb, 1, 104, 179), 0.1);
   }
-  @media (max-width: 1079px) {
-    .TitleBlock-module_circle__68z-T {
-      display: none;
-    }
-  }
   /* stylelint-enable no-descending-specificity */
 }
-.TitleBlock-module_staticIcon__5jeBS {
-  display: none;
-  width: 20px;
-  height: 20px;
-}
-
 @keyframes TitleBlock-module_slide-fade__o5TnP {
   0% {
     display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-02-18-UUXP-55-20251218012602",
+  "version": "0.0.0-canary-01-new-bp-20251222095813",
   "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.083rem;
+  $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: 1px; // needed to correctly position the active tab label :after element
+    margin-bottom: $title-block-separator-height;
   }
 
   .adminVariant .titleRow {
     background-color: $color-white;
-    margin-bottom: 1px; // 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 {
@@ -249,9 +262,8 @@
 
     @include ca-margin($end: $spacing-xs);
 
-    @media (max-width: 1079px) {
+    @include title-block-medium-and-small {
       display: flex;
-      align-items: center;
     }
   }
 
@@ -361,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 {
@@ -426,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;
@@ -580,6 +598,14 @@
       }
     }
 
+    @include title-block-medium-and-small {
+      display: none;
+    }
+
+    @include title-block-media-above-1080-container-under-720 {
+      display: none;
+    }
+
     @media only screen {
       @container (max-width: #{$breadcrumb-breakpoint-width}) {
         position: relative;
@@ -711,20 +737,10 @@
       color: $color-blue-500;
       background-color: rgba($color-blue-500-rgb, 0.1);
     }
-
-    @media (max-width: 1079px) {
-      display: none;
-    }
   }
   /* stylelint-enable no-descending-specificity */
 }
 
-.staticIcon {
-  display: none;
-  width: 20px;
-  height: 20px;
-}
-
 @keyframes slide-fade {
   0% {
     display: none;

package/src/TitleBlock/TitleBlock.tsx

@@ -155,9 +155,6 @@ const Breadcrumb = ({
       <div className={styles.circle}>
         <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
       </div>
-      <div className={styles.staticIcon}>
-        <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
-      </div>
       <span
         className={styles.breadcrumbTextLink}
         data-automation-id={textAutomationId}

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,81 +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, 760, 360],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
 }
-
-export const WithNoSecondaryOverflow: Story = {
+export const WithTabNavigation: 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, 760, 360],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
-  args: {
-    title: 'Test no secondary overflow menu items',
-    secondaryOverflowMenuItems: undefined,
+  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, 760, 360],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: { title: 'A long title with over thirty characters' },
 }
@@ -180,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: [1365, 1366, 760, 360],
-    },
+    viewport: viewports,
+    chromatic: chromaticViewports,
   },
   args: {
     variant: 'light',
@@ -236,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',
@@ -271,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',

package/src/TitleBlock/_mixins.scss

@@ -41,3 +41,13 @@
     @content;
   }
 }
+
+// This emulates a scenario in which the the appchrome is in use and the CP is open
+@mixin title-block-media-above-1080-container-under-720 {
+  @media (min-width: 1080px) {
+    // diff of 15px undexplained in the container that wraps main/body
+    @container (max-width: 704px) {
+      @content;
+    }
+  }
+}