NCIOCPL / ncids

NCI Design System
10 stars 5 forks source link

Update Collection item titles to visually be h3s following the nci-heading-h3 display #1822

Open sarinapadilla opened 1 month ago

sarinapadilla commented 1 month ago

Issue description

Collection item headings/links (e.g., usa-collection__heading need to be updated to have the same styling as the nci-heading-h3 styling. This will update the font token from xl/24px to md/20px.

ESTIMATE TBD

What's the expected change?

What's the current functionality?

What's the updated acceptance criteria?

Additional details / screenshot

Screenshot 2024-08-20 at 1 01 52 PM

Technical notes

Our patch has

@@ -39,12 +44,17 @@ .usa-collection__body {

 .usa-collection__heading {
   @include typeset($theme-collection-header-typeset);
-  @include u-margin-bottom(0);
+  @include u-margin-bottom(1);
   @include u-margin-top(0);
+
+   > .usa-link {
+       @include typeset-h2;
+    @include u-line-height('heading', 4);
+   }
 }

We should be setting $theme-collection-header-typeset should be enough to control the link size, so we should remove the > .usa-link selector. Currently in the patch, the collection header is set to +$theme-collection-header-typeset: "heading", "lg", 3 !default; which is the incorrect size. It should be updated to +$theme-collection-header-typeset: "heading", "md", 3 !default;