feat(TitleBlockZen): update title font to match composable header (#4772

) * feat(TitleBlockZen): update title font to match composable header * test(TitleBlockZen): update default breakpoints to be closer to test case edge * feat(TitleBlockZen): remove breadcrumb breakpoint title font scaling
cultureamp · Jun 21, 2024 · 9dac69a · 9dac69a
1 parent 74800f9
commit 9dac69a
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 15 deletions.
diff --git a/.changeset/forty-games-battle.md b/.changeset/forty-games-battle.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": minor
+---
+
+Update TitleBlockZen title font to match composable header.
diff --git a/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss b/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss
@@ -171,17 +171,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
 .titleTextOverride.titleTextOverride {
   padding: 4px 0;
 
-  @media (max-width: $breadcrumb-breakpoint-width) {
-    font-family: $typography-heading-2-font-family;
-    font-weight: $typography-heading-2-font-weight;
-    font-size: $typography-heading-2-font-size;
-    line-height: $typography-heading-2-line-height;
-    letter-spacing: $typography-heading-2-letter-spacing;
-  }
-
   @include title-block-under-1366 {
-    font-family: $typography-heading-2-font-family;
-    font-weight: $typography-heading-2-font-weight;
     font-size: $typography-heading-2-font-size;
     line-height: $typography-heading-2-line-height;
     letter-spacing: $typography-heading-2-letter-spacing;
@@ -190,8 +180,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
 
   .hasLongTitle & {
     @include title-block-under-1366 {
-      font-family: $typography-heading-3-font-family;
-      font-weight: $typography-heading-3-font-weight;
       font-size: $typography-heading-3-font-size;
       line-height: $typography-heading-3-line-height;
       letter-spacing: $typography-heading-3-letter-spacing;
@@ -200,8 +188,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
   }
 
   @include title-block-medium-and-small {
-    font-family: $typography-heading-4-font-family;
-    font-weight: $typography-heading-4-font-weight;
     font-size: $typography-heading-4-font-size;
     line-height: $typography-heading-4-line-height;
     letter-spacing: $typography-heading-4-letter-spacing;

diff --git a/packages/components/src/TitleBlockZen/TitleBlockZen.tsx b/packages/components/src/TitleBlockZen/TitleBlockZen.tsx
@@ -329,7 +329,7 @@ export const TitleBlockZen = ({
                       <div className={styles.titleAndSubtitleInner}>
                         <div className={styles.title}>
                           <Heading
-                            variant="heading-1"
+                            variant="composable-header-title"
                             color={isReversed(variant) ? "white" : "dark"}
                             classNameOverride={styles.titleTextOverride}
                             data-automation-id={titleAutomationId}

diff --git a/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx b/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx
@@ -98,6 +98,60 @@ export const Playground: Story = {
   },
 }
 
+export const Viewports: 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",
+        },
+        mediumSmall: {
+          name: "Medium and small",
+          styles: { width: "1079px", height: "800px" },
+          type: "desktop",
+        },
+      },
+      defaultViewport: "default",
+    },
+    chromatic: {
+      disable: false,
+      viewports: [1079, 1365, 1366],
+    },
+  },
+}
+
+export const HasLongTitle: 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: { title: "A long title with over thirty characters" },
+}
+
 export const StickerSheetDefault: Story = {
   parameters: {
     docs: {