@kaizen/components 2.3.1 → 2.3.3

package/src/TitleBlock/TitleBlock.module.scss

@@ -10,7 +10,9 @@
 @import './variables';
 
 @layer kz-components {
-  $title-block-margin-width-on-medium-and-small: 12px;
+  $title-block-spacing-default: 20px;
+  $title-block-spacing-above-1080: 24px;
+  $title-block-gap-default: 12px;
   $breadcrumb-circle-width: 48px;
   $breadcrumb-breakpoint-width: $layout-content-max-width + $layout-content-side-margin * 2 +
     $breadcrumb-circle-width * 2.25;
@@ -49,6 +51,7 @@
   }
 
   .titleRow {
+    box-sizing: border-box;
     display: flex;
     width: 100%;
     justify-content: center;
@@ -58,10 +61,6 @@
     display: flex;
     width: 100%;
     justify-content: center;
-
-    @include title-block-small {
-      height: $tab-container-height-small;
-    }
   }
 
   .lightVariant .titleRow {
@@ -75,15 +74,17 @@
   }
 
   %titleBlockInner {
+    box-sizing: border-box;
     max-width: $layout-content-max-width;
-    margin: 0 $layout-content-side-margin;
     display: flex;
     flex-direction: column;
     width: 100%;
     min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+    padding: 0 $title-block-spacing-default 0 0;
 
-    @include title-block-medium-and-small {
-      margin: 0 $title-block-margin-width-on-medium-and-small;
+    @include title-block-min-media-1080 {
+      padding: 0;
+      margin-inline: $title-block-spacing-above-1080;
     }
   }
 
@@ -93,26 +94,30 @@
 
   .lightVariant .titleRowInner {
     border-bottom: 1px solid $color-gray-300;
+  }
+
+  %rowBelowSeparatorInnerMarginOverride {
+    padding: 0 4px 0 12px;
 
-    @include title-block-xsmall {
-      padding-bottom: 12px;
+    @include title-block-min-media-1080 {
+      padding: 0;
+      margin-inline: $title-block-spacing-above-1080;
     }
   }
 
   .rowBelowSeparatorInner {
     @extend %titleBlockInner;
-
-    @include title-block-small {
-      height: $tab-container-height-small;
-    }
+    @extend %rowBelowSeparatorInnerMarginOverride;
   }
 
   .titleRowInnerContent {
+    box-sizing: border-box;
     position: relative;
     display: flex;
     width: 100%;
     align-items: center;
-    min-height: $ca-grid * 3.5;
+    gap: $title-block-gap-default;
+    padding-block: $title-block-spacing-default 19px;
     justify-content: space-between;
     border-bottom: $title-block-separator-height solid rgba($color-white-rgb, 0.1);
 
@@ -130,16 +135,24 @@
       border-bottom: none;
     }
 
-    @include title-block-xsmall {
+    @include title-block-under-576 {
       flex-wrap: wrap;
+      gap: 4px;
     }
   }
 
   .title {
-    display: flex;
     align-items: center;
     min-width: 0; // this is an important trick to prevent flexbox items from overflowing
 
+    // truncation
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+
     // Applying width 100% when the title is *not* long and is followed by a subtitle
     // causes misalignment of both.
     @include title-block-under-1366 {
@@ -155,7 +168,7 @@
 
     .hasSubtitle & {
       @include title-block-under-1366 {
-        transform: translateY(-0.3833em);
+        transform: translateY(-12px);
       }
     }
   }
@@ -204,34 +217,65 @@
   }
 
   .titleTextOverride.titleTextOverride {
-    padding: 4px 0;
+    font-size: $typography-heading-3-font-size;
+    line-height: $typography-heading-3-line-height;
+    letter-spacing: $typography-heading-3-letter-spacing;
+    margin: 8px 0;
 
-    @include title-block-under-1366 {
+    .hasSubtitle & {
+      margin-bottom: 0;
+    }
+
+    @include title-block-media-mixed-width {
       font-size: $typography-heading-2-font-size;
       line-height: $typography-heading-2-line-height;
       letter-spacing: $typography-heading-2-letter-spacing;
-      padding: 2px 0;
+      margin: 2px 0;
+
+      .hasSubtitle & {
+        margin-bottom: 0;
+      }
+    }
+
+    @include title-block-min-container-1080 {
+      font-size: $typography-heading-2-font-size;
+      line-height: $typography-heading-2-line-height;
+      letter-spacing: $typography-heading-2-letter-spacing;
+      margin: 2px 0;
+
+      .hasSubtitle & {
+        margin-bottom: 0;
+      }
     }
 
     .hasLongTitle & {
-      @include title-block-under-1366 {
+      @include title-block-media-mixed-width {
         font-size: $typography-heading-3-font-size;
         line-height: $typography-heading-3-line-height;
         letter-spacing: $typography-heading-3-letter-spacing;
-        padding: 2px 0;
+        margin: 2px 0;
+
+        .hasSubtitle & {
+          margin-bottom: 0;
+        }
       }
-    }
 
-    @include title-block-medium-and-small {
-      font-size: $typography-heading-3-font-size;
-      line-height: $typography-heading-3-line-height;
-      letter-spacing: $typography-heading-3-letter-spacing;
-      padding: 8px 0;
+      @container (min-width: #{$layout-breakpoints-large}) and (max-width: 1365px) {
+        font-size: $typography-heading-3-font-size;
+        line-height: $typography-heading-3-line-height;
+        letter-spacing: $typography-heading-3-letter-spacing;
+        margin: 2px 0;
+
+        .hasSubtitle & {
+          margin-bottom: 0;
+        }
+      }
     }
   }
 
   .avatar {
     display: none;
+    align-self: self-start;
     box-sizing: border-box;
     overflow: hidden;
     height: $ca-grid * 2;
@@ -243,10 +287,6 @@
       max-width: 100%;
     }
 
-    @container (min-width: #{$layout-breakpoints-large}) {
-      display: block;
-    }
-
     &.withBorder {
       border: 3px solid $color-white;
       border-radius: 50%;
@@ -255,15 +295,22 @@
     .hasLongTitle & {
       display: none;
     }
+
+    @include title-block-media-mixed-width {
+      display: block;
+    }
+
+    @include title-block-min-container-1080 {
+      display: block;
+    }
   }
 
   .hamburger {
-    display: none;
-
-    @include ca-margin($end: $spacing-xs);
+    display: flex;
+    align-self: self-start;
 
-    @include title-block-medium-and-small {
-      display: flex;
+    @include title-block-min-media-1080 {
+      display: none;
     }
   }
 
@@ -312,17 +359,32 @@
   .sectionTitleContainer {
     display: flex;
     align-items: center;
-    padding: calc(#{$ca-grid} * 3 / 4) 0;
+    padding-block: 9px;
+    padding-inline-end: 8px; // 20 take 12 result in 8 extra padding needed in section versus tabs UI
+
+    @include title-block-min-container-1080 {
+      padding-block: 17px;
+    }
+  }
+
+  .sectionTitle {
+    display: block;
   }
 
   .sectionTitleInner {
     display: flex;
     flex-direction: column;
+    row-gap: 4px;
+
+    @include title-block-min-container-1080 {
+      flex-direction: row;
+      align-items: center;
+      column-gap: $title-block-gap-default;
+    }
   }
 
   .sectionTitleOverride.sectionTitleOverride {
     white-space: nowrap;
-    margin-inline: 0 var(--spacing-24);
     font-family: $typography-heading-2-font-family;
     font-weight: $typography-heading-2-font-weight;
     font-size: $typography-heading-2-font-size;
@@ -346,10 +408,6 @@
     }
   }
 
-  .sectionTitle {
-    display: block;
-  }
-
   .sectionTitleDescription {
     color: $color-white;
     max-width: 780px;
@@ -359,10 +417,6 @@
     line-height: $typography-paragraph-small-line-height;
     letter-spacing: $typography-paragraph-small-letter-spacing;
 
-    .sectionTitle + & {
-      margin-top: var(--spacing-6);
-    }
-
     &.dark {
       color: rgba($color-purple-800-rgb, 0.7);
     }
@@ -373,10 +427,6 @@
     width: 100%;
     margin-top: -$title-block-separator-height;
     justify-content: space-between;
-
-    @include title-block-small {
-      height: $tab-container-height-small;
-    }
   }
 
   .titleAndAdjacent {
@@ -399,12 +449,16 @@
   }
 
   .tag {
-    display: flex;
+    display: none;
     align-items: center;
     margin-inline: var(--spacing-12) 0;
 
-    @include title-block-medium-and-small {
-      display: none;
+    @include title-block-media-mixed-width {
+      display: flex;
+    }
+
+    @include title-block-min-container-1080 {
+      display: flex;
     }
 
     + .pageSwitcherSelectNextToTitle {
@@ -529,11 +583,6 @@
   // but the variants prevent us from breaking this out.
   .secondaryActionsContainer {
     display: flex;
-    align-items: flex-start;
-    justify-content: flex-end;
-    padding: (calc(#{$ca-grid} / 2)) 0;
-
-    @include ca-margin($start: $ca-grid * 1.5);
 
     // To be removed eventually – the Dropdown does not
     // currently set its own color, and we want it
@@ -564,7 +613,6 @@
     @include button-reset;
 
     cursor: pointer;
-    display: flex;
     position: absolute;
     align-items: center;
     top: 50%;
@@ -573,7 +621,7 @@
 
     @include ca-position($start: calc(-#{$breadcrumb-circle-width} - #{$ca-grid}));
 
-    align-self: normal;
+    align-self: self-start;
 
     &:hover .breadcrumbTextLink {
       text-decoration: underline;
@@ -598,14 +646,24 @@
       }
     }
 
-    @media only screen {
-      @container (max-width: #{$breadcrumb-breakpoint-width}) {
-        position: relative;
-        transform: translateY(0);
-        margin-inline: 0 var(--spacing-12);
+    display: none;
 
-        @include ca-position($start: 0);
-      }
+    @include title-block-media-mixed-width {
+      display: flex;
+      position: relative;
+      transform: translateY(0);
+      margin-inline: 0 var(--spacing-12);
+
+      @include ca-position($start: 0);
+    }
+
+    @include title-block-min-container-1080 {
+      display: flex;
+      position: relative;
+      transform: translateY(0);
+      margin-inline: 0 var(--spacing-12);
+
+      @include ca-position($start: 0);
     }
   }
 
@@ -729,10 +787,6 @@
       color: $color-blue-500;
       background-color: rgba($color-blue-500-rgb, 0.1);
     }
-
-    @include title-block-medium-and-small {
-      display: none;
-    }
   }
   /* stylelint-enable no-descending-specificity */
 }

package/src/TitleBlock/TitleBlock.tsx

@@ -376,7 +376,10 @@ export const TitleBlock = ({
                   </div>
                 </div>
               )}
-              {renderNavigationTabs(navigationTabs, collapseNavigationArea, title)}
+              {!sectionTitle &&
+                !sectionTitleDescription &&
+                !renderSectionTitle &&
+                renderNavigationTabs(navigationTabs, collapseNavigationArea, title)}
               {(secondaryActions ?? secondaryOverflowMenuItems) && (
                 <SecondaryActions
                   secondaryActions={secondaryActions}

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, waitFor, within } from '@storybook/test'
+import { Heading } from 'react-aria-components'
 import { Icon } from '~components/Icon'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { StickerSheet } from '~storybook/components/StickerSheet'
@@ -253,18 +254,18 @@ export const StickerSheetVariants: Story = {
           ]}
         />
       </StickerSheet.Row>
-      <StickerSheet.Row header="Education (Purple background)">
+      <StickerSheet.Row header="Education (Blue background)">
         <TitleBlock
           variant="education"
           title="Education Variant"
-          subtitle="This is the education variant with purple background"
+          subtitle="This is the education variant with blue background"
           breadcrumb={{
             path: '#',
             text: 'Back to courses',
           }}
           navigationTabs={[
-            <NavigationTab key="1" text="Lessons" href="#" active />,
-            <NavigationTab key="2" text="Assignments" href="#" />,
+            <NavigationTab key="1" variant="education" text="Lessons" href="#" active />,
+            <NavigationTab key="2" variant="education" text="Assignments" href="#" />,
           ]}
         />
       </StickerSheet.Row>
@@ -301,6 +302,169 @@ export const StickerSheetVariants: Story = {
     </StickerSheet>
   ),
 }
+export const StickerSheetVariantsWithSection: Story = {
+  name: 'Sticker Sheet (Variants With Section)',
+  render: () => (
+    <StickerSheet title="TitleBlock Variants">
+      <StickerSheet.Row header="Default (Purple background)">
+        <TitleBlock
+          title="Default Variant"
+          subtitle="This is the default purple variant with white text"
+          sectionTitle="Section title"
+          sectionTitleDescription="Description of section can go here"
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Education (Blue background)">
+        <TitleBlock
+          variant="education"
+          title="Education Variant"
+          subtitle="This is the education variant with blue background"
+          sectionTitle="Section title"
+          sectionTitleDescription="Description of section can go here"
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Admin (White background)">
+        <TitleBlock
+          variant="admin"
+          title="Admin Variant"
+          subtitle="This is the admin variant with white background"
+          sectionTitle="Section title"
+          sectionTitleDescription="Description of section can go here"
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Light (White background)">
+        <TitleBlock
+          variant="light"
+          title="Light Variant"
+          subtitle="This is the light variant with clean white background"
+          sectionTitle="Section title"
+          sectionTitleDescription="Description of section can go here"
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+        />
+      </StickerSheet.Row>
+    </StickerSheet>
+  ),
+}
+export const StickerSheetVariantsWithSectionTitleOnly: Story = {
+  name: 'Sticker Sheet (Section Title Only)',
+  render: () => (
+    <StickerSheet title="TitleBlock Variants">
+      <StickerSheet.Row header="Default (Purple background)">
+        <TitleBlock
+          title="Default Variant"
+          subtitle="This is the default purple variant with white text"
+          sectionTitle="Section title"
+          sectionTitleDescription={undefined}
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+          secondaryActions={undefined}
+          secondaryOverflowMenuItems={undefined}
+          primaryAction={undefined}
+          defaultAction={undefined}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Education (Blue background)">
+        <TitleBlock
+          variant="education"
+          title="Education Variant"
+          subtitle="This is the education variant with blue background"
+          sectionTitle="Section title"
+          sectionTitleDescription={undefined}
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+          secondaryActions={undefined}
+          secondaryOverflowMenuItems={undefined}
+          primaryAction={undefined}
+          defaultAction={undefined}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Admin (White background)">
+        <TitleBlock
+          variant="admin"
+          title="Admin Variant"
+          subtitle="This is the admin variant with white background"
+          sectionTitle="Section title"
+          sectionTitleDescription={undefined}
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+          secondaryActions={undefined}
+          secondaryOverflowMenuItems={undefined}
+          primaryAction={undefined}
+          defaultAction={undefined}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Light (White background)">
+        <TitleBlock
+          variant="light"
+          title="Light Variant"
+          subtitle="This is the light variant with clean white background"
+          sectionTitle="Section title"
+          sectionTitleDescription={undefined}
+          navigationTabs={undefined}
+          surveyStatus={undefined}
+          secondaryActions={undefined}
+          secondaryOverflowMenuItems={undefined}
+          primaryAction={undefined}
+          defaultAction={undefined}
+        />
+      </StickerSheet.Row>
+    </StickerSheet>
+  ),
+}
+
+export const StickerSheetVariantsWithCollapseNavigationAreaWhenPossible: Story = {
+  name: 'Sticker Sheet (Variants WithCollapseNavigationAreaWhenPossible)',
+  render: () => (
+    <StickerSheet title="TitleBlock Variants">
+      <StickerSheet.Row header="Default">
+        <TitleBlock
+          title="Default Variant"
+          subtitle={undefined}
+          breadcrumb={undefined}
+          navigationTabs={undefined}
+          collapseNavigationAreaWhenPossible={true}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Education">
+        <TitleBlock
+          variant="education"
+          title="Education Variant"
+          subtitle={undefined}
+          breadcrumb={undefined}
+          navigationTabs={undefined}
+          collapseNavigationAreaWhenPossible={true}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Admin">
+        <TitleBlock
+          variant="admin"
+          title="Admin Variant"
+          subtitle={undefined}
+          breadcrumb={undefined}
+          navigationTabs={undefined}
+          collapseNavigationAreaWhenPossible={true}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Light">
+        <TitleBlock
+          variant="light"
+          title="Light Variant"
+          subtitle={undefined}
+          breadcrumb={undefined}
+          navigationTabs={undefined}
+          collapseNavigationAreaWhenPossible={true}
+        />
+      </StickerSheet.Row>
+    </StickerSheet>
+  ),
+}
 
 export const StickerSheetBreadcrumbs: Story = {
   name: 'Sticker Sheet (Breadcrumb)',
@@ -434,3 +598,73 @@ export const StickerSheetSurveyStatus: Story = {
     </StickerSheet>
   ),
 }
+
+export const WithSection: Story = {
+  parameters: {
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+  args: {
+    title: 'A extra long title with over thirty characters so it truncates in a mobile viewport',
+    sectionTitle: 'Section title',
+    sectionTitleDescription: 'Description of section can go here',
+    navigationTabs: undefined,
+    surveyStatus: undefined,
+  },
+}
+export const WithCustomSectionTitleOnly: Story = {
+  parameters: {
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+  args: {
+    title: 'Page title',
+    renderSectionTitle: () => (
+      <div>
+        <Heading className="m-0">Custom Section Title</Heading>
+      </div>
+    ),
+    navigationTabs: undefined,
+    surveyStatus: undefined,
+    secondaryActions: undefined,
+    secondaryOverflowMenuItems: undefined,
+    primaryAction: undefined,
+    defaultAction: undefined,
+  },
+}
+
+export const WithTitleCollapseNavigationAreaWhenPossible: Story = {
+  parameters: {
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+  args: {
+    title: 'Page title',
+    navigationTabs: undefined,
+    surveyStatus: undefined,
+    primaryAction: undefined,
+    defaultAction: undefined,
+    secondaryActions: undefined,
+    secondaryOverflowMenuItems: undefined,
+    breadcrumb: undefined,
+    avatar: undefined,
+    collapseNavigationAreaWhenPossible: true,
+  },
+}
+export const WithOnlySecondaryActions: Story = {
+  parameters: {
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+  args: {
+    title: 'Page title',
+    navigationTabs: undefined,
+    surveyStatus: undefined,
+    primaryAction: undefined,
+    defaultAction: undefined,
+    sectionTitle: undefined,
+    sectionTitleDescription: undefined,
+    breadcrumb: undefined,
+    avatar: undefined,
+  },
+}

package/src/TitleBlock/_mixins.scss

@@ -41,3 +41,32 @@
     @content;
   }
 }
+
+@mixin title-block-min-media-1080 {
+  @media (min-width: #{$layout-breakpoints-large}) {
+    @content;
+  }
+}
+
+@mixin title-block-min-container-1080 {
+  @container (min-width: #{$layout-breakpoints-large}) {
+    @content;
+  }
+}
+
+@mixin title-block-media-mixed-width {
+  // 1080
+  @media (min-width: #{$layout-breakpoints-large}) and (max-width: 1095px) {
+    // Note: There is a diff of 15px between the media and container query
+    @container (min-width: 1065px) {
+      @content;
+    }
+  }
+}
+
+// 576 is the specified breakpoint from design to wrap the primary actions
+@mixin title-block-under-576 {
+  @container (max-width: 576px) {
+    @content;
+  }
+}