UISeeds - Grid Component

[jaredcwhite]

QA Notes:

Evaluate the documentation: https://zeroheight.com/5e69dd4e1/p/76600d-grid/b/93a6d7 Storybook link: https://storybook-ui-seeds.netlify.app/?path=/story/layout-grid--grid-example

Reference:

• Draft documentation: https://www.notion.so/exygy/Grid-66b7a0dbbebf4f7ca775953fc21fd3d3
• Design Spec: https://www.figma.com/file/SsYt5YsgbmOPbwr5Qk2RKB/bloom-core-library?type=design&node-id=3381-11865&t=6WnJFqY45utGCVit-0

---

Copied over from bloom-housing/bloom#3339. @emilyjablonski:

Transfer the GridSection component from UIC to UISeeds (rename it to Grid!). (Audit Link) (Figma Docs Link)

• Needs V2 styles

---

• "Make sure the grid can be navigated using keyboard-only controls, with each column having a clear focus state." - content shouldn't be focusable, so I think we might need to remove this piece or reword it
• I'm not sure we need the tight spacing variant, it doesn't feel like a different enough variant for me and is overridable with CSS vars

[sarahlazarich]

@jaredcwhite who will QA this? can you please tag them?

[jaredcwhite]

@sarahlazarich Yeah I guess @slowbot can evaluate it from the design side. Otherwise may have to wait until next week.

[slowbot]

@jaredcwhite

1. Should we create a new tab for Usage Notes? I don't want these details to get lost
2. It's a small detail but can we match the grid cell styles in the Figma doc? The grey boxes and text seem to recede
3. Can we be specific in the docs about breakpoint the gap size shifts? Is this set by a variable?
4. Can we treat all code samples the same for the component? Can columns use generic styling?

[jaredcwhite]

There's something weird going on with the grid examples at the moment, will investigate…and yeah I can use the more obvious accent colors from Figma.