feat: #3622967 Bring the Newsletter page badges and section label in line with the design

Rajab Natshahrequested to merge
issue/rightup-3622967:3622967-newsletter-design into 1.0.x

Issue: https://www.drupal.org/i/3622967

Two of the five design differences are fixed here, both pure page content:

  • Number badge 01 is bg-tertiary (indigo), as the design shows. 03 stays bg-accent (mint).
  • The second ruled section reads Recent Issues, matching the design, instead of Recent Stories.

What was tried and withdrawn, and why

The first revision of this MR also made the Subscribe button indigo and added the three subscription checkboxes, through a simpleConfigUpdate action on the newsletter_subscribe webform. That was wrong and has been removed.

The same webform is placed twice on a RightUp site: on the Newsletter page, over the mint hero, and on the home page, inside an indigo CTA section. Styling the webform styles both. Measured on a fresh install:

Placement Background Subscribe button Checkbox labels
/newsletter mint #e2fcf5 visible 14.40:1, passes
home page CTA indigo #4f46e1 1.00:1, invisible 2.44:1, fails

The pipeline caught it: 🧪 functional: [15-quality] failed with color-contrast on label[for="edit-newsletters-daily|weekly|alerts"] in the home page accessibility scenarios. No single colour passes on both backgrounds, so this cannot be fixed at the webform level.

The button colour and the checkboxes need styling scoped to the Newsletter page rather than applied to a webform that every placement shares. That is follow-up work, most likely in vartheme_bs5_rightup.

Still not in this MR

  • Badge 02 is not black. number_color on text-number-card allows only bg-tertiary and bg-accent, and Canvas validates component props on import, so bg-dark has to be added to that component first.
  • The Recent Issues section still renders the news-latest view rather than the three newsletters the design lists.

AI-Generated: Yes

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Developer Documentation
  • User Guide Documentation
  • Reviewed by human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release
Edited by Rajab Natshah

Merge request reports