Problem/Motivation
The Newsletter Canvas page shipped by this recipe at content/canvas_page/10-newsletter.yml is close to the approved design but differs from it in five places. The design is the VBN Stylesheet frame 13131-6786 ("Get the Work Before It's Polished").
The page structure, hero copy, the WHAT YOU'LL GET section and its card text all match. What differs:
- Subscribe button colour. Built black; the design uses the brand tertiary indigo
#4f46e1(brand/tertiary). - The three subscription checkboxes are missing. The design places The Daily, Weekly Edit and The Right Up Alerts as checked checkboxes directly under the email field. The built page has none.
- Number badge colours. The design uses three distinct colours:
01indigo#4f46e1,02black,03mint#00f5d4. All three render mint on the built page. - Section label wording. The second ruled section reads RECENT STORIES; the design reads RECENT ISSUES.
- Second section content. The design lists the three newsletters themselves, each with a description: The Daily, The Weekly Edit, Last Call Alerts. The built page lists recent articles with publication dates.
Point 3 needs a theme change as well: vartheme_bs5_rightup's text-number-card component defines number_color with an enum of only bg-tertiary and bg-accent, so the design's black 02 badge cannot be expressed. A bg-dark option has to be added to that component before the recipe can use it.
Steps to reproduce
- Build a Drupal CMS site and install the RightUp site template:
ddev composer create-project drupal/cms ddev composer config minimum-stability dev ddev composer require drupal/rightup:1.0.x-dev ddev drush si -y ../recipes/rightup - Open
/newsletter. - Compare against the design frame
13131-6786.
Proposed resolution
- Add
bg-darkto thenumber_colorenum of thetext-number-cardcomponent invartheme_bs5_rightup, with ameta:enumlabel. - Update
content/canvas_page/10-newsletter.yml: Subscribe button to the tertiary variant; badges to indigo, dark and mint respectively; the ruled label to RECENT ISSUES; the three cards to the newsletters and their descriptions. - Add the three subscription checkboxes under the email field.
- Re-install from the recipe and compare the rendered page against the design frame.
Remaining tasks
- ✅ File an issue
- ❌ Addition/Change/Update/Fix
- ❌ Testing to ensure no regression
- ➖ Automated unit/functional testing coverage
- ➖ Developer Documentation support
- ➖ User Guide Documentation support
- ❌ UX/UI designer responsibilities
- ❌ Accessibility and Readability
- ❌ Reviewed by a human
- ❌ Code review by maintainers
- ❌ Full testing and approval
- ❌ Credit contributors
- ❌ Review with the product owner
- ❌ Update Release Notes
- ❌ Release
Release notes snippet
- feat: Bring the Newsletter page in line with the approved design: indigo Subscribe button, the three subscription checkboxes, distinct number badge colours, and the RECENT ISSUES section listing the newsletters themselves.
Issue fork rightup-3622967
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #4
rajab natshahReleased in rightup 1.0.0-alpha1.
Comment #6
rajab natshah