[POC] DSD-1851: Updates `Template` to be more responsive using grid

[oliviawongnyc]

Fixes JIRA ticket DSD-1851

This PR does the following:

• Uses one grid rather than two to make a fully responsive template, including responsive gaps, padding, and sidebar
• Uses the outlineOffset property to make the focus ring visible even with overflow: hidden turned on
• This is merely a POC to help support the work of the new Template TAD and is not expected to be merged

How has this been tested?

• In Storybook
• Plans to create an RC to test in Turbine and other apps

Accessibility concerns or updates

• None that I can think of.

Accessibility Checklist

• [ ] Checked Storybook's "Accessibility" tab for color contrast and other issues.
• [ ] The feature works with keyboard inputs including tabbing back and forward and pressing space, enter, arrow, and esc keys.
• [ ] For hidden text or when aria-live is used, a screenreader was used to verify the text is read.
• [ ] For features that involve UI updates and focusing on DOM refs, focus management was reviewed.
• [ ] The feature works when the page is zoomed in to 200% and 400%.

Open Questions

-

Checklist:

• [ ] I have updated the Storybook documentation and changelog accordingly.
• [ ] I have added relevant accessibility documentation for this pull request.
• [ ] All new and existing tests passed.

Front End Review:

• [ ] Review the Vercel preview deployment once it is ready.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nypl-design-system	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 24, 2024 3:25pm

[github-actions[bot]]

Your pull request is missing a changelog—was that intentional?

[oliviawongnyc]

Just some notes. It's not a perfect pixel-to-pixel update but as a POC it's coming along nicely.

@EdwinGuzman, pixel perfect compared to what? Marty's PR or what we have now? It shouldn't be pixel perfect compared to what we have now given it includes a responsive sidebar, padding, and gaps.

[EdwinGuzman]

pixel perfect compared to what?

To what we have now. There are some changes but I think this difference is crucial -- the alignment of the content:

In prod, the "Content Top" and "Content Primary" align with the Hero. I think it's necessary for alignment but not something to fix right now since the main concern is the underlying foundation.

[oliviawongnyc]

pixel perfect compared to what?

To what we have now. There are some changes but I think this difference is crucial -- the alignment of the content:

In prod, the "Content Top" and "Content Primary" align with the Hero. I think it's necessary for alignment but not something to fix right now since the main concern is the underlying foundation.

@EdwinGuzman ahhh, got it. But this may actually concern the underlying foundation. This problem occurs because Hero is now outside of the grid so I'll have to think about that.