chore: adjust Grid and HeadingGroup spacings and behavior

jaredcwhite commented 10 months ago

Issue Overview

This PR addresses feedback based on design QA and on uptake issues related to: https://github.com/bloom-housing/bloom/pull/3643

Several changes are involved (and we'll want to update zero height accordingly post-merge):

The previous "1+2" and "2+1" columns stuff didn't really make sense in light of how the grids were working in the Partners site. It makes more sense to specify that certain cells can span 2 or 3 of the grid columns. This includes utility classes for that purpose. (They're not done via props because multiple types of components can serve as grid cells.)
Medium-size screens (like tablets) should limit the total number of columns to two, so this was done on a cell-width basis in CSS.
Medium screen grids should show medium grid gap (and mobile is still small gap).
Small tweaks to heading group spacing for Partners use case is also included.

You can look at Grid and HeadingGroup stories, but it's probably hard to tell what's going on until this can be applied via the Grid uptake PR.

[ ] I have added QA notes to the issue with applicable URLs
[x] I have performed a self-review of my own code
[x] I have reviewed the changes in a desktop view
[x] I have reviewed the changes in a mobile view
[x] I have made corresponding changes to the documentation
[x] My changes generate no new warnings
[ ] I have added tests that prove my fix is effective or that my feature works
[ ] I have exported any new components
[x] My commit message(s) and PR title are polished in the conventional commit format, and any breaking changes are indicated in the message and are well-described

netlify[bot] commented 10 months ago

Name	Link
Latest commit	9ec5316163dd6f492e38b5ba65cf8372ece2cd63
Latest deploy log	https://app.netlify.com/sites/storybook-ui-seeds/deploys/652dbf5250ac510007aa1422
Deploy Preview	https://deploy-preview-65--storybook-ui-seeds.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.

github-actions[bot] commented 10 months ago

:tada: This PR is included in version 1.12.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: