Add grid and column to web components - proposal

[lee-chase]

Closes #17909

An initial attempt at producing grid and column web components.

NOTE: It is not feature complete, but is intended as a functional first pass.

NOTE 2: It is possible not to use a context but this means having to hand wire sub-grid mode.

NOTE 3: It may be possible to remove sub-grid in favour of hosting a child component in grid that establishes a context for contained grids.

Changelog

New

• Web components grid, sub grid, column and stories.

Testing / Reviewing

Constructed Default, Mixed Gutter Modes, Offset, Responsive and Sugbrid stories.

All stories except Mixed Gutter Modes have full-width, condensed and narrow as controls.

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	1b5f8f8
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/6740b03c6ea49a000894e224
😎 Deploy Preview	https://deploy-preview-18034--v11-carbon-web-components.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.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	1b5f8f8
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6740b03cdab90b00086a191f
😎 Deploy Preview	https://deploy-preview-18034--carbon-elements.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.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	1b5f8f8
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6740b03c323a900008a51ac4
😎 Deploy Preview	https://deploy-preview-18034--v11-carbon-react.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.

[lee-chase]

I think I over estimated what subgrid is and used a context to pass narrow and condensed down. Didn’t realise until I got to the mixed gutters story.

It may be possible to refactor away the sub-grid component, needs a bit more thought.

Note w.r.t. context. If not permitted then I am unsure how to detect parent grid.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 82.87%. Comparing base (626289a) to head (1b5f8f8).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #18034   +/-   ##
=======================================
  Coverage   82.87%   82.87%           
=======================================
  Files         404      404           
  Lines       14338    14338           
  Branches     4591     4641   +50     
=======================================
  Hits        11882    11882           
+ Misses       2296     2295    -1     
- Partials      160      161    +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

---

🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles