@kaizen/components 2.0.7 → 2.1.1

package/src/TitleBlock/TitleBlock.module.scss

@@ -53,6 +53,7 @@
 
   .adminVariant .titleRow {
     background-color: $color-white;
+    margin-bottom: 3px; // needed to correctly position the active tab label :after element
   }
 
   %titleBlockInner {
@@ -207,7 +208,7 @@
       max-width: 100%;
     }
 
-    @media (min-width: $layout-breakpoints-large) {
+    @container (min-width: #{$layout-breakpoints-large}) {
       display: block;
     }
 
@@ -535,12 +536,14 @@
       }
     }
 
-    @media only screen and (max-width: $breadcrumb-breakpoint-width) {
-      position: relative;
-      transform: translateY(0);
-      margin-inline: 0 var(--spacing-12);
+    @media only screen {
+      @container (max-width: #{$breadcrumb-breakpoint-width}) {
+        position: relative;
+        transform: translateY(0);
+        margin-inline: 0 var(--spacing-12);
 
-      @include ca-position($start: 0);
+        @include ca-position($start: 0);
+      }
     }
 
     @include title-block-medium-and-small {
@@ -580,8 +583,10 @@
       @include ca-position($start: $ca-grid);
     }
 
-    @media only screen and (min-width: $breadcrumb-breakpoint-width) {
-      @include ca-position($start: calc(#{$breadcrumb-circle-width} - #{$ca-grid}));
+    @media only screen {
+      @container (min-width: #{$breadcrumb-breakpoint-width}) {
+        @include ca-position($start: calc(#{$breadcrumb-circle-width} - #{$ca-grid}));
+      }
     }
 
     &:hover,

package/src/TitleBlock/_docs/{TitkeBlock--usage-guidelines.mdx → TitleBlock--usage-guidelines.mdx}

@@ -4,7 +4,7 @@ import * as TitleBlockStories from './TitleBlock.stories'
 
 <Meta title="Components/TitleBlock/Usage Guidelines" />
 
-# SingleSelect
+# TitleBlock
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/TitleBlock"
@@ -34,3 +34,11 @@ A consistent pattern to allow users to navigate and complete tasks easily.
 ### Long titles
 
 <Canvas of={TitleBlockStories.HasLongTitle} />
+
+### Admin Variant
+
+<Canvas of={TitleBlockStories.AdminVariant} />
+
+### Education Variant
+
+<Canvas of={TitleBlockStories.EducationVariant} />

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

@@ -31,6 +31,7 @@ const meta = {
   component: TitleBlock,
   parameters: {
     chromatic: { disable: false },
+    layout: 'fullscreen',
   },
   args: {
     title: 'Page title',
@@ -145,6 +146,76 @@ export const HasLongTitle: Story = {
   args: { title: 'A long title with over thirty characters' },
 }
 
+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],
+    },
+  },
+  args: {
+    variant: 'admin',
+    navigationTabs: [
+      <NavigationTab key="1" variant="admin" text="Label" href="#" active />,
+      <NavigationTab key="2" variant="admin" text="Label" href="#" />,
+      <NavigationTab key="3" variant="admin" text="Label" href="#" />,
+      <NavigationTab key="4" variant="admin" text="Label" href="#" />,
+      <NavigationTab key="5" variant="admin" text="Label" href="#" />,
+      <NavigationTab key="6" variant="admin" text="Label" href="#" />,
+    ],
+  },
+}
+
+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],
+    },
+  },
+  args: {
+    variant: 'education',
+    navigationTabs: [
+      <NavigationTab key="1" variant="education" text="Label" href="#" active />,
+      <NavigationTab key="2" variant="education" text="Label" href="#" />,
+      <NavigationTab key="3" variant="education" text="Label" href="#" />,
+      <NavigationTab key="4" variant="education" text="Label" href="#" />,
+      <NavigationTab key="5" variant="education" text="Label" href="#" />,
+      <NavigationTab key="6" variant="education" text="Label" href="#" />,
+    ],
+  },
+}
+
 export const StickerSheetBreadcrumbs: Story = {
   name: 'Sticker Sheet (Breadcrumb)',
   parameters: {

package/src/TitleBlock/_mixins.scss

@@ -1,37 +1,37 @@
 @import '~@kaizen/design-tokens/sass/layout';
 
 @mixin title-block-under-1645 {
-  @media (max-width: 1644px) {
+  @container (max-width: 1644px) {
     @content;
   }
 }
 
 @mixin title-block-under-1440 {
-  @media (max-width: 1439px) {
+  @container (max-width: 1439px) {
     @content;
   }
 }
 
 @mixin title-block-under-1366 {
-  @media (max-width: 1365px) {
+  @container (max-width: 1365px) {
     @content;
   }
 }
 
 @mixin title-block-medium-and-small {
-  @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
+  @container (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
     @content;
   }
 }
 
 @mixin title-block-under-1024 {
-  @media (max-width: 1023px) {
+  @container (max-width: 1023px) {
     @content;
   }
 }
 
 @mixin title-block-small {
-  @media (max-width: $layout-breakpoints-medium - 1px) {
+  @container (max-width: calc(#{$layout-breakpoints-medium} - 1px)) {
     @content;
   }
 }

package/src/TitleBlock/subcomponents/NavigationTabs.module.scss

@@ -125,7 +125,6 @@
 
       &::before {
         background-color: $color-blue-500;
-        top: 3px;
 
         @include title-block-medium-and-small {
           top: auto;

package/src/__alpha__/SingleSelect/_docs/SingleSelect.spec.stories.tsx

@@ -87,7 +87,7 @@ export const XButtonClearsSelection: Story = {
     await userEvent.click(options[0])
 
     const clearButton = await screen.findByRole('button', {
-      name: 'Clear Choose a coffee selection',
+      name: 'Clear selection: Choose a coffee',
     })
     await waitFor(() => expect(clearButton).toBeVisible())
     await userEvent.click(clearButton)

package/src/__alpha__/SingleSelect/subcomponents/ComboBoxTrigger/ComboBoxTrigger.tsx

@@ -19,9 +19,10 @@ const ClearButton = ({ clearButtonRef, inputRef }: ClearButtonProps): JSX.Elemen
 
   const clearButtonAlt = formatMessage(
     {
-      id: 'singleSelect.clearButtonAlt',
-      defaultMessage: 'Clear {field} selection',
-      description: 'Alt text for the clear selection button',
+      id: 'singleSelect.clearButtonAlt_v2',
+      defaultMessage: 'Clear selection: {field}',
+      description:
+        'Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.',
     },
     { field: fieldLabel },
   )