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	496694c
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/673e29c4a63a2a0008d855f9
😎 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	496694c
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/673e29c4b7c058000817300a
😎 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	496694c
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/673e29c458839000083f50be
😎 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.29%. Comparing base (b53f566) to head (496694c).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #18034   +/-   ##
=======================================
  Coverage   82.29%   82.29%           
=======================================
  Files         404      404           
  Lines       14276    14276           
  Branches     4531     4581   +50     
=======================================
  Hits        11749    11749           
  Misses       2365     2365           
  Partials      162      162           

☔ 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