Skip to content

feat(webkit): [ENG-49885] add comparison and pricing page sections - #1150

Merged
guilherme-santana-azion merged 2 commits into
mainfrom
feat/ENG-49885-sections-compare
Nov 6, 2026
Merged

guilherme-santana-azion merged 2 commits into
mainfrom
feat/ENG-49885-sections-compare

Conversation

@isaque-bock-azion

Copy link
Copy Markdown
Contributor

Summary

  • comparison-table, compare-plans, compare-support-tiers and pricing-plans become @aziontech/webkit/sections/* components with spec, browser-mode test, component story and size budget.
  • Plans and support tiers stay two blocks because their row and closing models differ.
  • Local state: the plan or tier picked on small screens, and the billing period.

How to test

  1. PNPM_CONFIG_VERIFY_DEPS_BEFORE_RUN=false CI= pnpm --filter @aziontech/webkit exec vitest run src/components/sections → all pass in Chromium.
  2. pnpm storybook:dev, then open Templates/Marketing/…/ComparePlans at a phone width: the picker opens on the highlighted plan and switches the column. In PricingPlans, the period toggle switches prices.

Notes

  • Minor release of @aziontech/webkit. Stacked on feat(webkit): [ENG-49884] add social-proof page sections #1149 (ENG-49885).
  • Site JSON changes (the site must follow):
    • comparison-table: competitor is required.
    • compare-plans:
      • featureColumnLabel → columnLabel;
      • planPickerLabel → pickerAriaLabel;
      • footerLink → primaryAction;
      • anchor: 'comparison' is added;
      • values accept true as well as ✓.
    • compare-support-tiers:
      • pickerLabel → pickerAriaLabel;
      • sections[].link → sections[].action;
      • tiers[].action.kind is removed (the style follows highlighted);
      • includedLabel, excludedLabel and anchor: 'tiers' are added.
    • pricing-plans: anchor: 'plans' is added, and the per-plan action.kind is removed (the style follows highlighted).
  • The axe check of the definition popover is it.skip: PopoverTrigger puts aria-expanded on a span with no role, which is a defect in the popover component.

comparison-table, compare-plans, compare-support-tiers and
pricing-plans become @aziontech/webkit/sections/* components with spec,
browser-mode test, component story and size budget; their
Templates/Marketing stories render the component from the shared
_sections data modules.

Plans and support tiers stay two blocks because their row and closing
models differ. The plan or tier picked on small screens and the billing
period are local state. Picker and column labels move to the ariaLabel
vocabulary, closing links to primaryAction or a per-section action, and
anchor replaces the ids the templates hard-coded.
@isaque-bock-azion
isaque-bock-azion force-pushed the feat/ENG-49885-sections-compare branch from f388120 to 9eb1cf5 Compare November 6, 2026 14:22
…nd pricing sections

Generated in CI by run 42237415094 on 9eb1cf5. Adds the six visual modes of compare-plans, compare-support-tiers, comparison-table and pricing-plans, which the visual gate failed on with no snapshot written.
@guilherme-santana-azion
guilherme-santana-azion merged commit dab8d07 into main Nov 6, 2026
36 of 38 checks passed
@guilherme-santana-azion
guilherme-santana-azion deleted the feat/ENG-49885-sections-compare branch November 6, 2026 17:09
@github-actions github-actions Bot mentioned this pull request Nov 6, 2026
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.

3 participants