YALB-363: Design: Serif text in right column gets cut off | YALB-365: Design: Grand Hero Banner overlay header spacing | YALB-424: Removing primary-nav and grand hero results in missing fontawesome

[joetower]

YALB-363: Design: Serif text in right column gets cut off

YALB-365: Design: Grand Hero Banner overlay header spacing

YALB-424: Removing primary-nav and grand hero results in missing fontawesome

Description of work

• YSP-363: Adds overflow override to text component in second column so the serif along the left side doesn't get cut off.
• YSP-365: Adds conditional check for grand hero content so the markup for grand hero content doesn't render, causing the gap flex spacing to add more space when only the heading is present
• YSP-424: Adds fontawesome library in atomic.yml file and removes the attach statements from block templates

Testing Link(s)

• https://pr-601-yalesites-platform.pantheonsite.io/profile

Functional Review Steps

Testing: YALB-363: Design: Serif text in right column gets cut off

• Navigate to: https://pr-601-yalesites-platform.pantheonsite.io/profile
• Scroll to the bottom of the content on the page to the two-column layout
• Verify that the 'Y' serifs in Yale fully render and are not cut off by their parent text div
• Note: this issue was caused by overflow-x: auto on the text element. This was added to allow table elements to scroll when users are on smaller screen.

ysp-363-serifs.mp4

• Navigate to this page: https://pr-601-yalesites-platform.pantheonsite.io/table-page-test
• If you view the page at mobile/smaller resolutions, verify the table still allows you to scroll.
• I added some JS to wrap any table element in a wrapper div, which has the overflow-x: auto property so we don't have to set it on the text element and cause other issues.

ysp-363-serifs-table-wrapper.mp4

---

Testing: YALB-365: Design: Grand Hero Banner overlay header spacing

• Navigate to: https://pr-601-yalesites-platform.pantheonsite.io/profile
• Verify that the hero heading is the only content in the hero content area
• Note: This issue was caused by the content div element (grand-hero-banner__snippet) printing to the DOM even if no content was entered and the grand-hero-banner__content-inner element has a gap property set which added extra space in between the heading and the empty content div. I changed the wiring in Atomic to conditionally display the value if a value actually exists. With the empty content markup no longer printing, the heading does not have extra space. I also adjusted the bottom padding to match the top padding. Previously, the bottom padding was using a larger padding variable than the top.
• Inspect the heading and verify there is equal space around the heading and the content appears vertically centered within its background

ysp-365-hero.mp4

---

Testing: YALB-424: Removing primary-nav and grand hero results in missing fontawesome

• Navigate to: https://pr-601-yalesites-platform.pantheonsite.io
• Verify that fontawesome still loads on the page
• Note the code changes in Atomic: https://github.com/yalesites-org/atomic/pull/211/files
• The library is now loaded by default as part of the theme instead of loading in components based on use since we're using fontawesome globally.

ysp-424-fontawesome.mp4

---

Accessibility Review

• Verify the component meets Accessibility requirements

[netlify]

✅ Deploy Preview for dev-component-library-twig ready!

Name	Link
🔨 Latest commit	b38c4cb
🔍 Latest deploy log	https://app.netlify.com/sites/dev-component-library-twig/deploys/65fd8503be3f1e0008a36bab
😎 Deploy Preview	https://deploy-preview-341--dev-component-library-twig.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codechefmarc]

Tested all of these out and all looks good to me! I didn't technically test the font-awesome one (I can if you wish) but I didn't want to remove the main menu from the dev site to fully test it, but I understand what you did to load FA on all pages which makes sense.

[dblanken-yale]

There is unfortunately one more place to fix the sr-only, and that's in the JS creation in case we ever miss the twig generation:

component-library-twig/lib/ys_link/builders/sr_only_creator.js

Line 12 in cae66fa

classes = ['sr-only'],

Other than that, it all looks great! Due to such a trivial fix above, I'm still approving. Nicely done!

[joetower]

@dblanken-yale Ah, great catch, thank you!

I updated that class name.

[kara-franco]

Nice work! Passes a11y tests!

[github-actions]

🎉 This PR is included in version 1.40.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀