Skip to content

feat(webkit): add the band-stack marketing component - #1036

Open
gabriel-lisboa-azion wants to merge 2 commits into
feature/marketing-componentsfrom
feat/marketing-band-stack
Open

gabriel-lisboa-azion wants to merge 2 commits into
feature/marketing-componentsfrom
feat/marketing-band-stack

Conversation

@gabriel-lisboa-azion

Copy link
Copy Markdown
Contributor

Summary

  • Adds BandStack (@aziontech/webkit/band-stack): a run of framed bands that share one hairline between neighbours; each direct child of the default slot is one band.
  • sticky pins each band under the site header from lg up, a step lower than the one before, so the run piles up as you scroll; flush drops the first band's top rule.
  • Ships with its spec, Components/Marketing/BandStack story, browser test, export and a size row (2.22 KB of 2.5 KB).

How to test

  1. pnpm --filter @aziontech/webkit exec vitest run src/components/marketing/band-stack → 9 tests pass.
  2. Storybook → Components/Marketing/BandStack at ≥ lg with sticky, scroll → each band pins a step below the previous one; earlier bands stay visible as ledges.
  3. Toggle flush → the first band's top rule disappears; neighbours never draw a double rule.

Notes

Each band keeps its top and bottom rules but no marks of its own. The stack
provides a context (band-stack/injection-key.ts) that tells a media-split band
to frame its copy and media cells as two frame-boxes, left and right, each with
its four registration marks, so both sides of every seam are ticked.
@gabriel-lisboa-azion

Copy link
Copy Markdown
Contributor Author

Lands together with #1008: 875c34d adds band-stack/injection-key.ts, and media-split (f7edec8 on #1008) imports it to frame its two cells inside a stack.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant