Extend Hero heading and description (#684)

primer · Aug 8, 2024 · e382a49 · e382a49
1 parent 30f717d
commit e382a49
Show file tree

Hide file tree

Showing 54 changed files with 10 additions and 2 deletions.
diff --git a/.changeset/loud-ties-reply.md b/.changeset/loud-ties-reply.md
@@ -0,0 +1,8 @@
+---
+'@primer/react-brand': minor
+---
+
+Extend `Hero.Heading` and `Heading.Description` length.
+
+> **Warning**
+> This change can lead to reduced contrast in certain situations. Please manually review all instances of the `Hero` - particularly those that use a background image - to ensure that minimum contrast requirements are met. 
diff --git a/packages/react/src/Hero/Hero.module.css b/packages/react/src/Hero/Hero.module.css
@@ -51,7 +51,7 @@
 
 .Hero-heading {
   margin: 0;
-  max-width: 18ch;
+  max-width: 924px;
 }
 
 .Hero-heading--fullWidth {
@@ -60,7 +60,7 @@
 
 .Hero-description {
   margin: var(--base-size-24) 0 0;
-  max-width: 50ch;
+  max-width: 600px;
 }
 
 .Hero-actions {

diff --git a/.../Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Centered-1-linux.png b/.../Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Centered-1-linux.png
diff --git a/...ero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Codespaces-1-linux.png b/...ero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Codespaces-1-linux.png
diff --git a/...o/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Default-1-linux.png b/...o/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Default-1-linux.png
diff --git a/...o/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Eyebrow-1-linux.png b/...o/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Eyebrow-1-linux.png
diff --git a/...sual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Eyebrow-Centered-1-linux.png b/...sual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Eyebrow-Centered-1-linux.png
diff --git a/...ro/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Issues-1-linux.png b/...ro/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Issues-1-linux.png
diff --git a/...pec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Custom-Classnames-1-linux.png b/...pec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Custom-Classnames-1-linux.png
diff --git a/...spec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Secondary-Action-1-linux.png b/...spec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Secondary-Action-1-linux.png
diff --git a/...ec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Trailing-Component-1-linux.png b/...ec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Trailing-Component-1-linux.png
diff --git a/...snapshots/Visual-Comparison-Hero-Hero-With-an-image-centered-bottom-1-linux.png b/...snapshots/Visual-Comparison-Hero-Hero-With-an-image-centered-bottom-1-linux.png
diff --git a/....ts-snapshots/Visual-Comparison-Hero-Hero-With-an-image-left-bottom-1-linux.png b/....ts-snapshots/Visual-Comparison-Hero-Hero-With-an-image-left-bottom-1-linux.png
diff --git a/...l.spec.ts-snapshots/Visual-Comparison-Hero-Hero-With-an-image-right-1-linux.png b/...l.spec.ts-snapshots/Visual-Comparison-Hero-Hero-With-an-image-right-1-linux.png
diff --git a/...-snapshots/Visual-Comparison-Hero-Hero-With-custom-icon-and-variant-1-linux.png b/...-snapshots/Visual-Comparison-Hero-Hero-With-custom-icon-and-variant-1-linux.png
diff --git a/...l.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Without-Description-1-linux.png b/...l.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Without-Description-1-linux.png
diff --git a/...le-viewport-test-for-Narrow-View-Centered-Hero-Narrow-View-Centered-1-linux.png b/...le-viewport-test-for-Narrow-View-Centered-Hero-Narrow-View-Centered-1-linux.png
diff --git a/...mparison-Hero-Mobile-viewport-test-for-Narrow-View-Hero-Narrow-View-1-linux.png b/...mparison-Hero-Mobile-viewport-test-for-Narrow-View-Hero-Narrow-View-1-linux.png
diff --git a/...ile-viewport-test-e12be-w-Example-Usage-SubNav-Narrow-Example-Usage-1-linux.png b/...ile-viewport-test-e12be-w-Example-Usage-SubNav-Narrow-Example-Usage-1-linux.png
diff --git a/...ual.spec.ts-snapshots/Visual-Comparison-SubNav-SubNav-Example-Usage-1-linux.png b/...ual.spec.ts-snapshots/Visual-Comparison-SubNav-SubNav-Example-Usage-1-linux.png
diff --git a/...isual.spec.ts-snapshots/Visual-Comparison-SubNav-SubNav-With-Shadow-1-linux.png b/...isual.spec.ts-snapshots/Visual-Comparison-SubNav-SubNav-With-Shadow-1-linux.png
diff --git a/...pshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Full-Width-1-linux.png b/...pshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Full-Width-1-linux.png
diff --git a/...hots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Longer-Title-1-linux.png b/...hots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Longer-Title-1-linux.png
diff --git a/...apshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-No-Search-1-linux.png b/...apshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-No-Search-1-linux.png
diff --git a/...-Comparison-SubdomainNavBar-SubdomainNavBar-No-overflow-menu-1-link-1-linux.png b/...-Comparison-SubdomainNavBar-SubdomainNavBar-No-overflow-menu-1-link-1-linux.png
diff --git a/...pshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Playground-1-linux.png b/...pshots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Playground-1-linux.png
diff --git a/...shots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Search-Open-1-linux.png b/...shots/Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Search-Open-1-linux.png
diff --git a/...l-Comparison-SubdomainNavBar-SubdomainNavBar-Search-Results-Visible-1-linux.png b/...l-Comparison-SubdomainNavBar-SubdomainNavBar-Search-Results-Visible-1-linux.png
diff --git a/.../Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Skip-To-Main-Tag-1-linux.png b/.../Visual-Comparison-SubdomainNavBar-SubdomainNavBar-Skip-To-Main-Tag-1-linux.png
diff --git a/...Comparison-SubdomainNavBar-SubdomainNavBar-Skip-To-Main-Tag-With-Id-1-linux.png b/...Comparison-SubdomainNavBar-SubdomainNavBar-Skip-To-Main-Tag-With-Id-1-linux.png
diff --git a/...al-Comparison-FeaturePreviewLevelOne-FeaturePreviewLevelOne-Default-1-linux.png b/...al-Comparison-FeaturePreviewLevelOne-FeaturePreviewLevelOne-Default-1-linux.png
diff --git a/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-1-variant-1-linux.png b/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-1-variant-1-linux.png
diff --git a/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-2-variant-1-linux.png b/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-2-variant-1-linux.png
diff --git a/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-3-variant-1-linux.png b/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-3-variant-1-linux.png
diff --git a/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-4-variant-1-linux.png b/...omparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-2-4-variant-1-linux.png
diff --git a/...al-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-Minimal-1-linux.png b/...al-Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-Minimal-1-linux.png
diff --git a/...Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-Playground-1-linux.png b/...Comparison-FeaturePreviewLevelTwo-FeaturePreviewLevelTwo-Playground-1-linux.png
diff --git a/...-Comparison-FeaturePreviewLevelZero-FeaturePreviewLevelZero-Level-0-1-linux.png b/...-Comparison-FeaturePreviewLevelZero-FeaturePreviewLevelZero-Level-0-1-linux.png
diff --git a/....spec.ts-snapshots/Visual-Comparison-CategoryPage-CategoryPage-Dark-1-linux.png b/....spec.ts-snapshots/Visual-Comparison-CategoryPage-CategoryPage-Dark-1-linux.png
diff --git a/...spec.ts-snapshots/Visual-Comparison-CategoryPage-CategoryPage-Light-1-linux.png b/...spec.ts-snapshots/Visual-Comparison-CategoryPage-CategoryPage-Light-1-linux.png
diff --git a/....spec.ts-snapshots/Visual-Comparison-Industry-Industry-Maximum-Dark-1-linux.png b/....spec.ts-snapshots/Visual-Comparison-Industry-Industry-Maximum-Dark-1-linux.png
diff --git a/...spec.ts-snapshots/Visual-Comparison-Industry-Industry-Maximum-Light-1-linux.png b/...spec.ts-snapshots/Visual-Comparison-Industry-Industry-Maximum-Light-1-linux.png
diff --git a/....spec.ts-snapshots/Visual-Comparison-Industry-Industry-Minimum-Dark-1-linux.png b/....spec.ts-snapshots/Visual-Comparison-Industry-Industry-Minimum-Dark-1-linux.png
diff --git a/...spec.ts-snapshots/Visual-Comparison-Industry-Industry-Minimum-Light-1-linux.png b/...spec.ts-snapshots/Visual-Comparison-Industry-Industry-Minimum-Light-1-linux.png
diff --git a/...e.visual.spec.ts-snapshots/Visual-Comparison-Size-Size-Maximum-Dark-1-linux.png b/...e.visual.spec.ts-snapshots/Visual-Comparison-Size-Size-Maximum-Dark-1-linux.png
diff --git a/....visual.spec.ts-snapshots/Visual-Comparison-Size-Size-Maximum-Light-1-linux.png b/....visual.spec.ts-snapshots/Visual-Comparison-Size-Size-Maximum-Light-1-linux.png
diff --git a/...e.visual.spec.ts-snapshots/Visual-Comparison-Size-Size-Minimum-Dark-1-linux.png b/...e.visual.spec.ts-snapshots/Visual-Comparison-Size-Size-Minimum-Dark-1-linux.png
diff --git a/....visual.spec.ts-snapshots/Visual-Comparison-Size-Size-Minimum-Light-1-linux.png b/....visual.spec.ts-snapshots/Visual-Comparison-Size-Size-Minimum-Light-1-linux.png
diff --git a/...al.spec.ts-snapshots/Visual-Comparison-UseCase-UseCase-Maximum-Dark-1-linux.png b/...al.spec.ts-snapshots/Visual-Comparison-UseCase-UseCase-Maximum-Dark-1-linux.png
diff --git a/...l.spec.ts-snapshots/Visual-Comparison-UseCase-UseCase-Maximum-Light-1-linux.png b/...l.spec.ts-snapshots/Visual-Comparison-UseCase-UseCase-Maximum-Light-1-linux.png
diff --git a/...al.spec.ts-snapshots/Visual-Comparison-UseCase-UseCase-Minimum-Dark-1-linux.png b/...al.spec.ts-snapshots/Visual-Comparison-UseCase-UseCase-Minimum-Dark-1-linux.png
diff --git a/...l.spec.ts-snapshots/Visual-Comparison-UseCase-UseCase-Minimum-Light-1-linux.png b/...l.spec.ts-snapshots/Visual-Comparison-UseCase-UseCase-Minimum-Light-1-linux.png
diff --git a/...napshots/Visual-Comparison-SolutionsOverview-SolutionsOverview-Dark-1-linux.png b/...napshots/Visual-Comparison-SolutionsOverview-SolutionsOverview-Dark-1-linux.png
diff --git a/...apshots/Visual-Comparison-SolutionsOverview-SolutionsOverview-Light-1-linux.png b/...apshots/Visual-Comparison-SolutionsOverview-SolutionsOverview-Light-1-linux.png