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	ce0950c
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/6732556e31eb6700087d645e
😎 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	ce0950c
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6732556eb6616c000871eeab
😎 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	ce0950c
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6732556ea4df5a000853d732
😎 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 81.84%. Comparing base (1a48fe3) to head (ce0950c).
Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #18034      +/-   ##
==========================================
+ Coverage   81.81%   81.84%   +0.02%     
==========================================
  Files         404      404              
  Lines       14097    14095       -2     
  Branches     4414     4364      -50     
==========================================
+ Hits        11534    11536       +2     
+ Misses       2401     2397       -4     
  Partials      162      162              

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