Skip to content

feat(webkit): add the quote-tabs marketing component - #1042

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

gabriel-lisboa-azion wants to merge 2 commits into
feature/marketing-componentsfrom
feat/marketing-quote-tabs

Conversation

@gabriel-lisboa-azion

Copy link
Copy Markdown
Contributor

Summary

  • Adds QuoteTabs (@aziontech/webkit/quote-tabs): a testimonial band browsed by client — the selected client's quotation featured in quote's highlight register, over a wall of logo-wall-style client cards that is the selector itself.
  • Props items and ariaLabel, the selected index through v-model (uncontrolled when unbound), an actions slot under the attribution. Arrow keys move the selection; the quotation enters from the side of the choice. 19 KB budget, initial chunk only.
  • It replaces the card-per-client role of client-kpi-quote (feat(webkit): add the client-kpi-quote marketing component #1000), whose figure-first claim now lives in quote's highlights.

How to test

  1. Storybook → Components/Marketing/QuoteTabs → Default → clicking a client card swaps the featured quotation, which slides in from the side of the card you chose.
  2. Focus the wall and press the arrow keys → the selection moves card to card and the quotation follows.
  3. Fallback → clients without a colour logo fall back to their registry mark, then to their name.
  4. npx vitest run src/components/marketing/quote-tabs/quote-tabs.test.ts from packages/webkit → 24 tests pass.

Notes

`autoPlay` (default on) moves to the next client every `autoPlayInterval` ms,
pausing under the pointer or keyboard focus, restarting on a selection and
never running under reduced motion. `showProgress` fills a hairline along the
panel's bottom edge while the timer runs. The budget moves 19 to 20.75 KB: the
entry measures 20,800 B gzipped.
@gabriel-lisboa-azion

Copy link
Copy Markdown
Contributor Author

Bundle budget: quote-tabs moves from 19 KB to 20.75 KB in 0938940. The autoplay timer, its pause and reduced-motion handling and the progress hairline take the initial chunk to 20,800 B gzipped (entryOnly), measured with check-size.mjs's own build on the integrated demo tree; 19 KB is 19,456 B.

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