Problem/Motivation

Three components are needed to render the RightUp design's page banners and section labels, and none of them can currently do it:

  • section-dividers does not exist. It is the ruled section label that opens a listing, and it appears in every design frame probed so far: the featured block, the podcast block, both related lists, the newsletter "what you'll get" band and all three listing views. Its absence is also why the author page's heading outline jumps from h1 straight to the h3 card titles with no intermediate heading.
  • media-banner covers one banner shape, and the design needs nine. The design has distinct banners for article-node (697), landing-page (959), podcast-node (486), podcast-episode (480), author-page (452), basic-page (210), search-page (264), newsletter (423) and the mobile podcast episode (718). The component's height prop offers only ribbon and large.
  • horizontal-text-icon-card hardcodes its trailing element. The icon is an inline SVG in a wrapper that renders unconditionally, so the component cannot express the design's other three trailing-edge treatments. Reading what the design hides rather than only what it draws shows four names are one component: horizontal-text-card (nothing trailing), featured-secondary-card (a 16:9 image), horizontal-text-image-card (an image) and horizontal-text-icon-card (a 48x48 action icon), all sharing taxonomy plus title plus optional body and details, with the design marking the optional parts as hidden layers.

Steps to reproduce

  1. Install the RightUp site template and open any listing page. There is no ruled section label above the cards.
  2. Place media-banner and try to reproduce any banner other than the ribbon or large height. There is no prop for it.
  3. Try to render a horizontal card with an image instead of the play icon. The icon renders regardless.

Proposed resolution

Add section-dividers, and extend the two existing components rather than creating near-duplicates:

  • section-dividers (new): the label plus a rule that flex-grows to fill, an optional trailing control pair, a heading level prop defaulting to 2 so it supplies the page's intermediate heading, and a light and dark mode. The label is a 14px uppercase eyebrow bound to the theme's small type token rather than to a heading token, because that is what the design does.
  • media-banner: 8 props added and 2 changed, plus a banner_actions slot, so all nine banner shapes are expressible from one component.
  • horizontal-text-icon-card: an end_variant prop, a media_position prop and a media slot, so the trailing edge can be the icon, an image or nothing. The default stays the icon, so every existing placement renders exactly as before.

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

User interface changes

  • A ruled section label becomes available above listings, supplying the intermediate heading the page outline currently lacks.
  • Page banners can take the nine shapes the design specifies rather than two.
  • Horizontal cards can carry an image or nothing at the trailing edge instead of always an icon.

API changes

  • media-banner: 8 new props, 2 changed props and a new banner_actions slot.
  • horizontal-text-icon-card: new end_variant and media_position props and a media slot. Defaults preserve current rendering.
  • section-dividers: a new component.

Data model changes

  • The recipe consequences differ per component and are not interchangeable.
  • media-banner: its Canvas component config is shipped by drupal/rightup, so adding props moves its version and the shipped config must be re-exported. This is the only one of the three that stales anything.
  • horizontal-text-icon-card: no recipe config is shipped for it, so nothing goes stale.
  • section-dividers: no recipe config exists, and none can be created until the component exists on the canonical branch. Its config must be created afterwards, not re-exported.

Release notes snippet

  • Added the section-dividers component, extended media-banner to cover all nine banner shapes in the design, and made the horizontal card's trailing element configurable.
Command icon 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

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Status: Active » Closed (won't fix)

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.