@kaizen/components 0.0.0-canary-01-13-tb-wrapping-20260113005905 → 0.0.0-canary-01-21-tb-20260121033853

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

@@ -284,7 +284,7 @@ var TitleBlock = function (_a) {
     sectionTitleAutomationId: sectionTitleAutomationId,
     sectionTitleDescription: sectionTitleDescription,
     sectionTitleDescriptionAutomationId: sectionTitleDescriptionAutomationId
-  }) : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId))), renderNavigationTabs(navigationTabs, collapseNavigationArea, title), (secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : secondaryOverflowMenuItems) && React__default.default.createElement(SecondaryActions.SecondaryActions, {
+  }) : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId))), !sectionTitle && !sectionTitleDescription && !renderSectionTitle && renderNavigationTabs(navigationTabs, collapseNavigationArea, title), (secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : secondaryOverflowMenuItems) && React__default.default.createElement(SecondaryActions.SecondaryActions, {
     secondaryActions: secondaryActions,
     secondaryOverflowMenuItems: secondaryOverflowMenuItems,
     reversed: utils.isReversed(variant)

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

@@ -25,9 +25,9 @@ var styles = {
   "subtitle": "TitleBlock-module_subtitle__AI9tj",
   "subtitleText": "TitleBlock-module_subtitleText__gpXET",
   "sectionTitleContainer": "TitleBlock-module_sectionTitleContainer__LrDPV",
+  "sectionTitle": "TitleBlock-module_sectionTitle__b8daw",
   "sectionTitleInner": "TitleBlock-module_sectionTitleInner__nJfOP",
   "sectionTitleOverride": "TitleBlock-module_sectionTitleOverride__XcD8g",
-  "sectionTitle": "TitleBlock-module_sectionTitle__b8daw",
   "sectionTitleDescription": "TitleBlock-module_sectionTitleDescription__wuVwm",
   "dark": "TitleBlock-module_dark__KJexf",
   "rowBelowSeparatorInnerContent": "TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w",

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

@@ -276,7 +276,7 @@ const TitleBlock = /*#__PURE__*/function () {
       sectionTitleAutomationId: sectionTitleAutomationId,
       sectionTitleDescription: sectionTitleDescription,
       sectionTitleDescriptionAutomationId: sectionTitleDescriptionAutomationId
-    }) : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId)))), renderNavigationTabs(navigationTabs, collapseNavigationArea, title), (secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : secondaryOverflowMenuItems) && (/*#__PURE__*/React.createElement(SecondaryActions, {
+    }) : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId)))), !sectionTitle && !sectionTitleDescription && !renderSectionTitle && renderNavigationTabs(navigationTabs, collapseNavigationArea, title), (secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : secondaryOverflowMenuItems) && (/*#__PURE__*/React.createElement(SecondaryActions, {
       secondaryActions: secondaryActions,
       secondaryOverflowMenuItems: secondaryOverflowMenuItems,
       reversed: isReversed(variant)

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

@@ -23,9 +23,9 @@ var styles = {
   "subtitle": "TitleBlock-module_subtitle__AI9tj",
   "subtitleText": "TitleBlock-module_subtitleText__gpXET",
   "sectionTitleContainer": "TitleBlock-module_sectionTitleContainer__LrDPV",
+  "sectionTitle": "TitleBlock-module_sectionTitle__b8daw",
   "sectionTitleInner": "TitleBlock-module_sectionTitleInner__nJfOP",
   "sectionTitleOverride": "TitleBlock-module_sectionTitleOverride__XcD8g",
-  "sectionTitle": "TitleBlock-module_sectionTitle__b8daw",
   "sectionTitleDescription": "TitleBlock-module_sectionTitleDescription__wuVwm",
   "dark": "TitleBlock-module_dark__KJexf",
   "rowBelowSeparatorInnerContent": "TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w",

package/dist/styles.css

@@ -9240,7 +9240,7 @@
     border-bottom: 0;
     border-top-left-radius: var(--border-borderless-border-radius);
     border-top-right-radius: var(--border-borderless-border-radius);
-    background: var(--color-white);
+    background: transparent;
     white-space: nowrap;
     text-decoration: none;
     padding: var(--spacing-md) var(--spacing-md);
@@ -9982,7 +9982,7 @@
   @container (max-width: 576px) {
     .MainActions-module_mainActionsContainer__pk-78 {
       justify-content: flex-start;
-      margin-left: 48px;
+      margin-inline-start: 48px;
     }
   }
   .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
@@ -9997,7 +9997,7 @@
     }
     .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
       display: flex;
-      margin-right: 8px;
+      margin-inline-end: 8px;
     }
   }
 }
@@ -10058,11 +10058,6 @@
     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: 0.063rem;
@@ -10090,7 +10085,7 @@
     border-bottom: 1px solid var(--color-gray-300, #eaeaec);
   }
   .TitleBlock-module_rowBelowSeparatorInner__3gNec {
-    padding: 0 20px 0 12px;
+    padding: 0 4px 0 12px;
   }
   @media (min-width: 1080px) {
     .TitleBlock-module_rowBelowSeparatorInner__3gNec {
@@ -10098,11 +10093,6 @@
       margin-inline: 24px;
     }
   }
-  @container (max-width: calc(768px - 1px)) {
-    .TitleBlock-module_rowBelowSeparatorInner__3gNec {
-      height: 3.75rem;
-    }
-  }
   .TitleBlock-module_titleRowInnerContent__NhTHV {
     box-sizing: border-box;
     position: relative;
@@ -10154,7 +10144,7 @@
   }
   @container (max-width: 1365px) {
     .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_titleAndSubtitle__-kLSn {
-      transform: translateY(-0.3833em);
+      transform: translateY(-12px);
     }
   }
   .TitleBlock-module_titleAndSubtitleInner__TX8xw {
@@ -10201,7 +10191,10 @@
     font-size: var(--typography-heading-3-font-size, 1.375rem);
     line-height: var(--typography-heading-3-line-height, 1.875rem);
     letter-spacing: var(--typography-heading-3-letter-spacing, normal);
-    padding: 8px 0;
+    margin: 8px 0;
+  }
+  .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+    margin-bottom: 0;
   }
   @media (min-width: 1080px) and (max-width: 1095px) {
     @container (min-width: 1065px) {
@@ -10209,7 +10202,10 @@
         font-size: var(--typography-heading-2-font-size, 1.75rem);
         line-height: var(--typography-heading-2-line-height, 2.25rem);
         letter-spacing: var(--typography-heading-2-letter-spacing, normal);
-        padding: 2px 0;
+        margin: 2px 0;
+      }
+      .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+        margin-bottom: 0;
       }
     }
   }
@@ -10218,7 +10214,10 @@
       font-size: var(--typography-heading-2-font-size, 1.75rem);
       line-height: var(--typography-heading-2-line-height, 2.25rem);
       letter-spacing: var(--typography-heading-2-letter-spacing, normal);
-      padding: 2px 0;
+      margin: 2px 0;
+    }
+    .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+      margin-bottom: 0;
     }
   }
   @media (min-width: 1080px) and (max-width: 1095px) {
@@ -10227,7 +10226,10 @@
         font-size: var(--typography-heading-3-font-size, 1.375rem);
         line-height: var(--typography-heading-3-line-height, 1.875rem);
         letter-spacing: var(--typography-heading-3-letter-spacing, normal);
-        padding: 2px 0;
+        margin: 2px 0;
+      }
+      .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+        margin-bottom: 0;
       }
     }
   }
@@ -10236,11 +10238,15 @@
       font-size: var(--typography-heading-3-font-size, 1.375rem);
       line-height: var(--typography-heading-3-line-height, 1.875rem);
       letter-spacing: var(--typography-heading-3-letter-spacing, normal);
-      padding: 2px 0;
+      margin: 2px 0;
+    }
+    .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+      margin-bottom: 0;
     }
   }
   .TitleBlock-module_avatar__mEjJ8 {
     display: none;
+    align-self: self-start;
     box-sizing: border-box;
     overflow: hidden;
     height: 3rem;
@@ -10322,15 +10328,32 @@
   .TitleBlock-module_sectionTitleContainer__LrDPV {
     display: flex;
     align-items: center;
-    padding: calc(1.5rem * 3 / 4) 0;
+    padding-block: 9px;
+    padding-inline-end: 8px;
+  }
+  @container (min-width: 1080px) {
+    .TitleBlock-module_sectionTitleContainer__LrDPV {
+      padding-block: 17px;
+    }
+  }
+  .TitleBlock-module_sectionTitle__b8daw {
+    display: block;
   }
   .TitleBlock-module_sectionTitleInner__nJfOP {
     display: flex;
     flex-direction: column;
+    row-gap: 4px;
+  }
+  @container (min-width: 1080px) {
+    .TitleBlock-module_sectionTitleInner__nJfOP {
+      flex-direction: row;
+      align-items: center;
+      column-gap: 12px;
+      row-gap: none;
+    }
   }
   .TitleBlock-module_sectionTitleOverride__XcD8g.TitleBlock-module_sectionTitleOverride__XcD8g {
     white-space: nowrap;
-    margin-inline: 0 var(--spacing-24);
     font-family: var(--typography-heading-2-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
     font-weight: var(--typography-heading-2-font-weight, 600);
     font-size: var(--typography-heading-2-font-size, 1.75rem);
@@ -10355,9 +10378,6 @@
       letter-spacing: var(--typography-heading-4-letter-spacing, normal);
     }
   }
-  .TitleBlock-module_sectionTitle__b8daw {
-    display: block;
-  }
   .TitleBlock-module_sectionTitleDescription__wuVwm {
     color: var(--color-white, #ffffff);
     max-width: 780px;
@@ -10367,9 +10387,6 @@
     line-height: var(--typography-paragraph-small-line-height, 1.125rem);
     letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
   }
-  .TitleBlock-module_sectionTitle__b8daw + .TitleBlock-module_sectionTitleDescription__wuVwm {
-    margin-top: var(--spacing-6);
-  }
   .TitleBlock-module_sectionTitleDescription__wuVwm.TitleBlock-module_dark__KJexf {
     color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.7);
   }
@@ -10379,11 +10396,6 @@
     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;
@@ -10517,11 +10529,6 @@
   }
   .TitleBlock-module_secondaryActionsContainer__-4q0l {
     display: flex;
-    align-items: flex-start;
-    justify-content: flex-end;
-    padding: calc(1.5rem / 2) 0;
-    margin-inline-end: 0;
-    margin-inline-start: 2.25rem;
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_secondaryActionsContainer__-4q0l {
     color: var(--color-blue-500, #0168b3);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-01-13-tb-wrapping-20260113005905",
+  "version": "0.0.0-canary-01-21-tb-20260121033853",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Tabs/subcomponents/Tab/Tab.module.css

@@ -6,7 +6,7 @@
     border-bottom: 0;
     border-top-left-radius: var(--border-borderless-border-radius);
     border-top-right-radius: var(--border-borderless-border-radius);
-    background: var(--color-white);
+    background: transparent;
     white-space: nowrap;
     text-decoration: none;
     padding: var(--spacing-md) var(--spacing-md);

package/src/TitleBlock/TitleBlock.module.scss

@@ -61,10 +61,6 @@
     display: flex;
     width: 100%;
     justify-content: center;
-
-    @include title-block-small {
-      height: $tab-container-height-small;
-    }
   }
 
   .lightVariant .titleRow {
@@ -101,7 +97,7 @@
   }
 
   %rowBelowSeparatorInnerMarginOverride {
-    padding: 0 $title-block-spacing-default 0 12px;
+    padding: 0 4px 0 12px;
 
     @include title-block-min-media-1080 {
       padding: 0;
@@ -112,10 +108,6 @@
   .rowBelowSeparatorInner {
     @extend %titleBlockInner;
     @extend %rowBelowSeparatorInnerMarginOverride;
-
-    @include title-block-small {
-      height: $tab-container-height-small;
-    }
   }
 
   .titleRowInnerContent {
@@ -153,11 +145,6 @@
     align-items: center;
     min-width: 0; // this is an important trick to prevent flexbox items from overflowing
 
-    // Applying width 100% when the title is *not* long and is followed by a subtitle
-    // causes misalignment of both.
-    @include title-block-under-1366 {
-      width: 100%;
-    }
     // truncation
     overflow: hidden;
     text-overflow: ellipsis;
@@ -165,6 +152,12 @@
     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 {
+      width: 100%;
+    }
   }
 
   .titleAndSubtitle {
@@ -175,7 +168,7 @@
 
     .hasSubtitle & {
       @include title-block-under-1366 {
-        transform: translateY(-0.3833em);
+        transform: translateY(-12px);
       }
     }
   }
@@ -227,20 +220,32 @@
     font-size: $typography-heading-3-font-size;
     line-height: $typography-heading-3-line-height;
     letter-spacing: $typography-heading-3-letter-spacing;
-    padding: 8px 0;
+    margin: 8px 0;
+
+    .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;
-      padding: 2px 0;
+      margin: 2px 0;
+
+      .hasSubtitle & {
+        margin-bottom: 0;
+      }
     }
 
     .hasLongTitle & {
@@ -248,20 +253,29 @@
         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;
+        }
       }
 
       @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;
-        padding: 2px 0;
+        margin: 2px 0;
+
+        .hasSubtitle & {
+          margin-bottom: 0;
+        }
       }
     }
   }
 
   .avatar {
     display: none;
+    align-self: self-start;
     box-sizing: border-box;
     overflow: hidden;
     height: $ca-grid * 2;
@@ -294,7 +308,6 @@
   .hamburger {
     display: flex;
     align-self: self-start;
-    // @include ca-margin($end: $spacing-xs);
 
     @include title-block-min-media-1080 {
       display: none;
@@ -346,17 +359,33 @@
   .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;
+      row-gap: none;
+    }
   }
 
   .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;
@@ -380,10 +409,6 @@
     }
   }
 
-  .sectionTitle {
-    display: block;
-  }
-
   .sectionTitleDescription {
     color: $color-white;
     max-width: 780px;
@@ -393,10 +418,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);
     }
@@ -407,10 +428,6 @@
     width: 100%;
     margin-top: -$title-block-separator-height;
     justify-content: space-between;
-
-    @include title-block-small {
-      height: $tab-container-height-small;
-    }
   }
 
   .titleAndAdjacent {
@@ -478,6 +495,7 @@
   }
 
   .navigationTabScrollerContainer {
+    // display: none;
     .hasNavigationTabs & {
       @include title-block-small {
         margin-top: $title-block-separator-height;
@@ -567,11 +585,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

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,57 @@ 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',
+    variant: 'light',
+    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="p-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,
+  },
+}

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

@@ -13,7 +13,7 @@
     @include title-block-under-576 {
       justify-content: flex-start;
       // offset: hamburger menu button is 48px wide
-      margin-left: 48px;
+      margin-inline-start: 48px;
     }
 
     .defaultActionButtonMinimized {
@@ -29,7 +29,7 @@
 
       .defaultActionButtonMinimized {
         display: flex;
-        margin-right: 8px;
+        margin-inline-end: 8px;
       }
     }
   }