Merge pull request #7025 from Sage/FE-6232

feat(typography): update line heights to align with DS
Sage · Oct 24, 2024 · e43ee70 · e43ee70
2 parents 7c0955e + 6a9c0a7
commit e43ee70
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 24 deletions.
diff --git a/src/components/typography/typography.pw.tsx b/src/components/typography/typography.pw.tsx
@@ -91,23 +91,27 @@ const getLineHeight = (variant: VariantTypes) => {
     case "h1-large":
       return "40px";
     case "h1":
-    case "segment-subheader":
-      return "31px";
+      return "30px";
     case "h2":
-      return "29px";
+      return "27.5px";
     case "h3":
+      return "25px";
+    case "h4":
+      return "22.5px";
+    case "h5":
+      return "20px";
     case "segment-header":
-      return "26px";
+      return "25px";
+    case "segment-header-small":
+      return "22.5px";
+    case "segment-subheader":
+      return "24px";
     case "big":
       return "24px";
-    case "h4":
-    case "segment-header-small":
-      return "23px";
     case "small":
     case "sub":
     case "sup":
       return "20px";
-    case "h5":
     case "segment-subheader-alt":
     case "p":
     case "span":

diff --git a/src/components/typography/typography.style.ts b/src/components/typography/typography.style.ts
@@ -59,23 +59,27 @@ const getLineHeight = (variant?: VariantTypes) => {
     case "h1-large":
       return "40px";
     case "h1":
-    case "segment-subheader":
-      return "31px";
+      return "30px";
     case "h2":
-      return "29px";
+      return "27.5px";
     case "h3":
+      return "25px";
+    case "h4":
+      return "22.5px";
+    case "h5":
+      return "20px";
     case "segment-header":
-      return "26px";
+      return "25px";
+    case "segment-header-small":
+      return "22.5px";
+    case "segment-subheader":
+      return "24px";
     case "big":
       return "24px";
-    case "h4":
-    case "segment-header-small":
-      return "23px";
     case "small":
     case "sub":
     case "sup":
       return "20px";
-    case "h5":
     case "segment-subheader-alt":
     case "p":
     case "span":

diff --git a/src/components/typography/typography.test.tsx b/src/components/typography/typography.test.tsx
@@ -34,7 +34,7 @@ test("should render with expected styles when variant is 'h1'", () => {
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "24px",
-    lineHeight: "31px",
+    lineHeight: "30px",
     fontWeight: "700",
     textTransform: "none",
     textDecoration: "none",
@@ -47,7 +47,7 @@ test("should render with expected styles when variant is 'h2'", () => {
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "22px",
-    lineHeight: "29px",
+    lineHeight: "27.5px",
     fontWeight: "500",
     textTransform: "none",
     textDecoration: "none",
@@ -60,7 +60,7 @@ test("should render with expected styles when variant is 'h3'", () => {
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "20px",
-    lineHeight: "26px",
+    lineHeight: "25px",
     fontWeight: "500",
     textTransform: "none",
     textDecoration: "none",
@@ -73,7 +73,7 @@ test("should render with expected styles when variant is 'h4'", () => {
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "18px",
-    lineHeight: "23px",
+    lineHeight: "22.5px",
     fontWeight: "400",
     textTransform: "none",
     textDecoration: "none",
@@ -86,7 +86,7 @@ test("should render with expected styles when variant is 'h5'", () => {
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "16px",
-    lineHeight: "21px",
+    lineHeight: "20px",
     fontWeight: "400",
     textTransform: "none",
     textDecoration: "none",
@@ -99,7 +99,7 @@ test("should render with expected styles when variant is 'segment-header'", () =
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "20px",
-    lineHeight: "26px",
+    lineHeight: "25px",
     fontWeight: "700",
     textTransform: "none",
     textDecoration: "none",
@@ -112,7 +112,7 @@ test("should render with expected styles when variant is 'segment-header-small'"
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "18px",
-    lineHeight: "23px",
+    lineHeight: "22.5px",
     fontWeight: "700",
     textTransform: "none",
     textDecoration: "none",
@@ -125,7 +125,7 @@ test("should render with expected styles when variant is 'segment-subheader'", (
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "16px",
-    lineHeight: "31px",
+    lineHeight: "24px",
     fontWeight: "500",
     textTransform: "none",
     textDecoration: "none",