From 9fd62648359a933d406d0e2d361867ca0e8b3023 Mon Sep 17 00:00:00 2001 From: Cassandra Tam Date: Tue, 18 Jun 2024 11:23:03 +1000 Subject: [PATCH 1/3] feat(TitleBlockZen): update title font to match composable header --- .changeset/forty-games-battle.md | 5 ++ .../TitleBlockZen/TitleBlockZen.module.scss | 8 --- .../src/TitleBlockZen/TitleBlockZen.tsx | 2 +- .../_docs/TitleBlockZen.stories.tsx | 59 +++++++++++++++++++ 4 files changed, 65 insertions(+), 9 deletions(-) create mode 100644 .changeset/forty-games-battle.md diff --git a/.changeset/forty-games-battle.md b/.changeset/forty-games-battle.md new file mode 100644 index 00000000000..cd689092da4 --- /dev/null +++ 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 index 4e1ed15ec96..798e16e2bf3 100644 --- a/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss +++ b/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss @@ -172,16 +172,12 @@ $tab-container-height-medium-and-small-collapsed: 0; 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 +186,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 +194,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 index a3d1e235a8b..510e061a9fe 100644 --- a/packages/components/src/TitleBlockZen/TitleBlockZen.tsx +++ b/packages/components/src/TitleBlockZen/TitleBlockZen.tsx @@ -329,7 +329,7 @@ export const TitleBlockZen = ({
Date: Tue, 18 Jun 2024 11:32:53 +1000 Subject: [PATCH 2/3] test(TitleBlockZen): update default breakpoints to be closer to test case edge --- .../TitleBlockZen/_docs/TitleBlockZen.stories.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx b/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx index 1f4fe92b4f5..92fb362d781 100644 --- a/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx +++ b/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx @@ -104,7 +104,7 @@ export const Viewports: Story = { viewports: { default: { name: "Default", - styles: { width: "1800px", height: "800px" }, + styles: { width: "1645px", height: "800px" }, type: "desktop", }, breadcrumbBreakpoint: { @@ -127,7 +127,7 @@ export const Viewports: Story = { }, chromatic: { disable: false, - viewports: [1079, 1365, 1644, 1800], + viewports: [1079, 1365, 1644, 1645], }, }, } @@ -136,9 +136,9 @@ export const HasLongTitle: Story = { parameters: { viewport: { viewports: { - default: { - name: "Default", - styles: { width: "1800px", height: "800px" }, + aboveEqual1366: { + name: "Above or equal to 1366", + styles: { width: "1366px", height: "800px" }, type: "desktop", }, under1366: { @@ -151,7 +151,7 @@ export const HasLongTitle: Story = { }, chromatic: { disable: false, - viewports: [1365, 1800], + viewports: [1365, 1366], }, }, args: { title: "A long title with over thirty characters" }, From c36e5aef90a2357d36b7e9ed446beef11a3ecd72 Mon Sep 17 00:00:00 2001 From: Cassandra Tam Date: Thu, 20 Jun 2024 11:03:41 +1000 Subject: [PATCH 3/3] feat(TitleBlockZen): remove breadcrumb breakpoint title font scaling --- .../src/TitleBlockZen/TitleBlockZen.module.scss | 6 ------ .../TitleBlockZen/_docs/TitleBlockZen.stories.tsx | 13 ++++--------- 2 files changed, 4 insertions(+), 15 deletions(-) diff --git a/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss b/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss index 798e16e2bf3..23d06eca1a3 100644 --- a/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss +++ b/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss @@ -171,12 +171,6 @@ $tab-container-height-medium-and-small-collapsed: 0; .titleTextOverride.titleTextOverride { padding: 4px 0; - @media (max-width: $breadcrumb-breakpoint-width) { - 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-size: $typography-heading-2-font-size; line-height: $typography-heading-2-line-height; diff --git a/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx b/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx index 92fb362d781..0a994179903 100644 --- a/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx +++ b/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx @@ -103,13 +103,8 @@ export const Viewports: Story = { viewport: { viewports: { default: { - name: "Default", - styles: { width: "1645px", height: "800px" }, - type: "desktop", - }, - breadcrumbBreakpoint: { - name: "Breadcrumb breakpoint", - styles: { width: "1644px", height: "800px" }, + name: "Above or equal to 1366", + styles: { width: "1366px", height: "800px" }, type: "desktop", }, under1366: { @@ -127,7 +122,7 @@ export const Viewports: Story = { }, chromatic: { disable: false, - viewports: [1079, 1365, 1644, 1645], + viewports: [1079, 1365, 1366], }, }, } @@ -136,7 +131,7 @@ export const HasLongTitle: Story = { parameters: { viewport: { viewports: { - aboveEqual1366: { + default: { name: "Above or equal to 1366", styles: { width: "1366px", height: "800px" }, type: "desktop",