@kaizen/components 2.0.7 → 2.1.0

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 },
   )