@kaizen/components 2.3.2 → 2.3.3

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/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/styles.css

@@ -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;
@@ -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;
@@ -10338,14 +10328,21 @@
   .TitleBlock-module_sectionTitleContainer__LrDPV {
     display: flex;
     align-items: center;
+    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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

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 {
@@ -112,10 +108,6 @@
   .rowBelowSeparatorInner {
     @extend %titleBlockInner;
     @extend %rowBelowSeparatorInnerMarginOverride;
-
-    @include title-block-small {
-      height: $tab-container-height-small;
-    }
   }
 
   .titleRowInnerContent {
@@ -367,7 +359,12 @@
   .sectionTitleContainer {
     display: flex;
     align-items: center;
+    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 {
@@ -377,6 +374,7 @@
   .sectionTitleInner {
     display: flex;
     flex-direction: column;
+    row-gap: 4px;
 
     @include title-block-min-container-1080 {
       flex-direction: row;

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)',
@@ -442,10 +606,65 @@ export const WithSection: Story = {
   },
   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="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,
+  },
+}