feat: #3621523 Add section-dividers and extend media-banner and horizontal-text-icon-card

Rajab Natshahrequested to merge
issue/vartheme_bs5_rightup-3621523:3621523-section-dividers-and-banner-variants into 1.0.x

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

Adds section-dividers and extends media-banner and horizontal-text-icon-card so the RightUp design's banners and section labels can be rendered. Three components, one body of Figma-implementation work, each small in isolation.

What each part does

section-dividers (new, 7 files). The ruled section label that opens a listing: a 14px uppercase label, a 1px rule in the tertiary brand colour that flex-grows to fill, an optional trailing control pair, a level prop defaulting to 2, and light and dark modes. It appears in every design frame probed so far, which makes it the highest-frequency missing piece in the set. It also supplies the intermediate heading the author page outline currently lacks.

The label binds to the theme's small type token rather than to a heading token, which is deliberate: the design's 14px uppercase style is a section eyebrow, not a heading step.

media-banner: 8 props added, 2 changed, plus a banner_actions slot, so all nine banner shapes in the design are expressible from one component instead of the two its height prop allowed.

horizontal-text-icon-card: end_variant and media_position props and a media slot. The icon was an inline SVG in a wrapper that rendered unconditionally, so the component could not express the design's other trailing-edge treatments. The default stays the icon, so every existing placement renders exactly as before.

The consolidation behind that last one is worth stating: four names in the design 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 share taxonomy plus title plus optional body and details, and the design marks the optional parts as hidden layers rather than drawing separate components. Reading what the design hides rather than only what it draws is what turned four candidate components into one extension.

Recipe consequences differ per component

This is the part that needs deliberate attention, because the three are not interchangeable:

component recipe config consequence
media-banner shipped by drupal/rightup props move its version, so the shipped config must be re-exported. The only one of the three that stales anything.
horizontal-text-icon-card not shipped nothing goes stale.
section-dividers does not exist config must be created afterwards, and cannot be until the component exists on the canonical branch.

Dependency, and it is a hard one

media-banner will not compile without !8 (merged). Its SCSS uses $font-family-serif for the caption and $font-size-md for its size, and neither variable exists on 1.0.x at 331128e4. Both arrive with the typography change on #3620731. So !8 (merged) must land with or before this MR, or yarn components:build fails on an undefined variable.

Verification

yarn theme:build and yarn components:build both exit 0 with zero Sass errors, against a tree that also carries !8 (merged)'s variables. yarn lint:components reports 0 errors across 141 manifests, which matters here because two of these components independently shipped an empty examples entry during development, and that is precisely what makes Canvas refuse a component outright: it does not appear, cannot be placed, and its status flips to false with no validation error anywhere. That lint gate arrives with !8 (merged).

section-dividers.css and media-banner.css are compiled output, not hand edits.

Not verified in a browser. section-dividers has no Canvas config yet and media-banner is status: false on the verification site, so neither is placeable and neither could be rendered on a page. Their manifests validate and their CSS compiles; their rendered appearance is unproven and will need checking once the recipe side can place them.

Authorship

The component work in this MR was authored by two focused component builders working in their own directories; this MR carries it to review. webpack.config.components.js is included because it registers the new component's stylesheet, without which section-dividers.scss never compiles.

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

Merge request reports