Merge pull request #1729 from NYPL/DSD-1924/heading-line-height

DSD-1924: Heading component mobile line height

Author: bigfishdesign13

CHANGELOG.md

@@ -11,6 +11,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 ### Updates
 
 - Updates the `Pagination` component to handle 4 digit page counts.
+- Updates the `Heading` component to add `line-height` styles for mobile.
 
 ## 3.5.2 (January 16, 2025)
 

src/components/Heading/Heading.mdx

@@ -9,10 +9,10 @@ import { changelogData } from "./headingChangelogData";
 
 # Heading
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.0.4`    |
-| Latest            | `3.4.2`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.0.4`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 

src/components/Heading/headingChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Adds `line-height` styles for mobile."],
+  },
   {
     date: "2024-11-07",
     version: "3.4.2",

src/theme/components/heading.ts

@@ -71,7 +71,7 @@ export const headings = {
       },
       fontWeight: "heading.display1",
       letterSpacing: "0.0625rem",
-      lineHeight: "1.10",
+      lineHeight: { base: "1.15", md: "1.10" },
       width: "auto",
       a: { textUnderlineOffset: "7px" },
     },
@@ -84,7 +84,7 @@ export const headings = {
       },
       fontWeight: "heading.heading1",
       letterSpacing: "0.0625rem",
-      lineHeight: "1.15",
+      lineHeight: { base: "1.20", md: "1.15" },
       width: "auto",
       a: { textUnderlineOffset: "6px" },
     },
@@ -97,7 +97,7 @@ export const headings = {
       },
       fontWeight: "heading.heading2",
       letterSpacing: "0.0625rem",
-      lineHeight: "1.20",
+      lineHeight: { base: "1.25", md: "1.20" },
       width: "auto",
       a: { textUnderlineOffset: "5px" },
     },
@@ -110,7 +110,7 @@ export const headings = {
       },
       fontWeight: "heading.heading3",
       letterSpacing: "0",
-      lineHeight: "1.25",
+      lineHeight: { base: "1.30", md: "1.25" },
       width: "auto",
       a: { textUnderlineOffset: "4px" },
     },
@@ -123,7 +123,7 @@ export const headings = {
       },
       fontWeight: "heading.heading4",
       letterSpacing: "0",
-      lineHeight: "1.30",
+      lineHeight: { base: "1.35", md: "1.30" },
       width: "auto",
       a: { textUnderlineOffset: "3px" },
     },
@@ -136,7 +136,7 @@ export const headings = {
       },
       fontWeight: "heading.heading5",
       letterSpacing: "0",
-      lineHeight: "1.35",
+      lineHeight: { base: "1.40", md: "1.35" },
       width: "auto",
     },
   }),
@@ -148,7 +148,7 @@ export const headings = {
       },
       fontWeight: "heading.heading6",
       letterSpacing: "0",
-      lineHeight: "1.40",
+      lineHeight: { base: "1.45", md: "1.40" },
       width: "auto",
     },
   }),
@@ -160,7 +160,7 @@ export const headings = {
       },
       fontWeight: "heading.heading7",
       letterSpacing: "0",
-      lineHeight: "1.45",
+      lineHeight: { base: "1.50", md: "1.45" },
       width: "auto",
     },
   }),
@@ -172,7 +172,7 @@ export const headings = {
       },
       fontWeight: "heading.heading8",
       letterSpacing: "0",
-      lineHeight: "1.50",
+      lineHeight: "1.50", // The lineHeight value is the same for mobile and desktop because the fontSize value is the same for mobile and desktop.
       width: "auto",
     },
   }),