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.

Changelog

New

• Web components grid, column, column-hang and stories.

Testing / Reviewing

All stories to match React storybook

[netlify[bot]]

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

Name	Link
🔨 Latest commit	24c26bd017a03ecf8f5ea43bb1bb8e836563f2cb
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/685bfff92aae540007fb3f14
😎 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 project configuration.

[netlify[bot]]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	b6e61c5793d47d21d5b4a72ce67b74539ec8aa83
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/68544f2904866f00086e5c2f
😎 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 project configuration.

[netlify[bot]]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	24c26bd017a03ecf8f5ea43bb1bb8e836563f2cb
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/685bfff9251c5000080cd273
😎 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 project 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[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 84.72%. Comparing base (43703bf) to head (24c26bd). Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #18034   +/-   ##
=======================================
  Coverage   84.72%   84.72%           
=======================================
  Files         371      371           
  Lines       14735    14735           
  Branches     4858     4809   -49     
=======================================
  Hits        12484    12484           
  Misses       2102     2102           
  Partials      149      149           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.