feat(page-grid): upgraded component

[ArtBlue]

Fixes #1901

• This PR contains CSS changes
• This PR does not contain CSS changes

Description

1. Upgraded page grid with new breakpoints to match header
2. Changed breakpoint naming to match DS and header
3. Simplified responsive flows by removing min breakpoint and moving more logic into css properties.
4. Added Responsive Methodoligies section in docs with details on general approach.
5. Created new Page Grid Templates page with side-by-side comparisons of various templates that all react live to page grid changes for simultaneous dev checking of various scenarios.
6. Major cleanup and refactoring.

Notes

I did not move to L4 of media queries since it's still in tech preview version in Safari, but that is one of the last major browsers still outstanding for full support.

Major Changes (some potentially breaking)

1. Page width styles were moved from page-grid (inner element) to page-grid-container. This makes page-grid responsibly solely for the grid while page-grid-container handles the width.
2. Multiple css properties were renamed for simplification:

• --page-grid-gutter-width-small and --page-grid-gutter-width-large were simplified into a single property, --page-grid-outside-margins removing the size distinctions and allowing the sizing to be determined through media queries instead.

• --page-grid-col-width-small and --page-grid-col-width-large were simplified into a single property of --page-grid-column-widths removing the size distinctions and allowing the sizing to be determined through media queries instead.

Additionally, many more css properties were created/exposed to allow for better flexibility allowing teams to override various items as their needs require it. The full list of css properties available are as follows:

CSS Property	Description
--page-grid-number-cols	The number of columns - default 8 or 16.
--page-grid-column-gaps	The gaps between columns AKA horizontal gutters.
--page-grid-row-gaps	The gaps between rows AKA vertical gutters.
--page-grid-outside-margins	The outer left/right spacing around the grid container.
--page-grid-column-widths	The column widths that are typically calculated using the column widths and column gaps.
--page-grid-max-width	The maximum width the page is allowed to expand before stopping (exclusive of outside margins)

Though at times, various use cases may call for it, developer should be very careful overriding these as it can have detrimental effects.

Screenshots

Checklist

• I verify the build is in a non-broken state
• I verify all changes are within scope of the linked issue

• I regenerated all CSS files under dist folder
• I tested the UI in all supported browsers
• I did a visual regression check of the components impacted by doing a Percy build and approved the build
• I tested the UI in dark mode and RTL mode
• I added/updated/removed Storybook coverage as appropriate

[ianmcburnie]

Any breaking changes that should be called out?

[ArtBlue]

Any breaking changes that should be called out?

There are major changes, but I'm not sure any of them would be breaking. That said, it's a good idea to call those out anyway. I'll add those to the PR and we should include them in the release notes as well.

[ianmcburnie]

Layout of those Featured Posts elements looks off in Firefox:

Also seeing a horizontal scroll bar being triggered on main nav region. I think we can leave as is for now, as it's outside the scope of page grid itself. But at some point it would be good to come back and address this, or we simply document it and say we leave those things up to the page developers.

[ianmcburnie]

Looks like our own website's header section needs some re-adjustment after the changes:

[ArtBlue]

Oh, good catch! Let me take a look.

[ArtBlue]

@ianmcburnie , I fixed the issues. I left the menu as is but added a general message at the top for developers. If you'd like to rephrase it, let me know.

[agliga]

LGTM overall. I'm fine approving but one comment about leftover files

[agliga]

Hmm this shouldn't be changing. I've seen this section removed again (Luke added it back in one of my PRs). I think you might need to rebuild with new node modules.

[ArtBlue]

Hmm this shouldn't be changing. I've seen this section removed again (Luke added it back in one of my PRs). I think you might need to rebuild with new node modules.

I rebased from 16.0.0, cleaned and did an npm i and ...I don't see any diffs. Is it possible support for the property got good enough that the vendor prefixes are no longer needed? I see those vendor prefixes exist in the .less file also. Maybe the autoprefixer is removing them intentionally?

[agliga]

So this happened to me as well. But when my PR for icons was up, those were reverted.
8edf506

So we need to pick a way and stick with it and make sure it doesn't get reverted.

[ArtBlue]

Maybe your PR for icons branch did not have the latest node-modules? idk. I'm fine either way. If there is a way to revert it without any manual intervention, I'm all ears. For now, I've tried numerous "system" things to get it to the state you want, and nothing's worked.

[ianmcburnie]

This typically happens if on different versions of less-plugin-autoprefix

[agliga]

Not sure what is happening here, but it seems like something is out of sync. I see a lot of icon changes here.

[ArtBlue]

Not sure what is happening here, but it seems like something is out of sync. I see a lot of icon changes here.

Let me rebase again. Something wonky is definitely going on.

[ianmcburnie]

Nice work @ArtBlue !