From fb6762f49caafb73d11285f954c18dcf73d328cf Mon Sep 17 00:00:00 2001
From: Will Seabrook <will.seabrook@sage.com>
Date: Thu, 17 Oct 2024 14:54:04 +0100
Subject: [PATCH] feat(typography): update line heights to align with DS

fix #6335
---
 src/components/typography/typography.pw.tsx   | 20 +++++++++++--------
 src/components/typography/typography.style.ts | 20 +++++++++++--------
 src/components/typography/typography.test.tsx | 16 +++++++--------
 3 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/components/typography/typography.pw.tsx b/src/components/typography/typography.pw.tsx
index 3c4c48f446..87fec4ef57 100644
--- 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
index 84a4452add..d28751be94 100644
--- 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
index 9bd15b0d0e..76a8804219 100644
--- 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",