fix: #3612317 Match news/article/full-page components and exposed filters to the design

Fixes #3612317: https://www.drupal.org/project/vartheme_bs5_educare/issues/3612317

Aligns several components with the design:

  • atoms/image: exposes a rounded prop (a Bootstrap border-radius utility class: none / rounded / rounded-0rounded-4 / rounded-pill, default none) applied per-instance in the twig - the corner treatment is set by the caller (the Educare recipe), not forced by the component.
  • atoms/rich-text: this SDC had no styling at all - adds prose typography for long-form body content (paragraph rhythm, an in-body H2/H3 heading scale distinct from the page H1, and a 3-level nested list marker treatment driven by the theme's accent token). Root class is .rich-text-block, deliberately not .rich-text - that literal class is already used by atoms/text.
  • organisms/card-hero: exposes the equivalent corner_style prop (same Bootstrap radius utility enum, default rounded-0), matching the atoms/image / card-impressed pattern for consistency (not currently used in shipped content).
  • organisms/card-impressed: sharp corners on the card image, plus a .card-impressed block class fix.
  • molecules/breadcrumb: 12px SemiBold text in the theme's subtle-text token, no underline (was 16px / --bs-dark / underlined).
  • molecules/share: fully circular buttons on a cream surface (--bs-secondary-bg-subtle) with 16px icons (was small-radius rounded squares on a grey background with 24px icons).
  • scss/base/vartheme.base.scss: brings the News/Programs .views-exposed-form.bef-exposed-form styling to the same token treatment already used on Events (label color, input/select color, border-radius, uppercase Apply/Reset button text) - News/Programs previously had different/hardcoded values.
  • webpack.config.components.js: registers the new image.scss, rich-text.scss and card-hero.scss entries so they compile.

All .css files are rebuilt via yarn components:build from the corresponding .scss - not hand-edited; verified with a clean rebuild producing byte-identical output.

AI-Generated: Yes

Checkpoints

  • File an issue about this project
  • Addition/Change/Update/Fix to this project
  • Testing to ensure no regression
  • Automated unit/functional testing coverage
  • Developer Documentation support on feature change/addition
  • User Guide Documentation support on feature change/addition
  • 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
Edited by Rajab Natshah

Merge request reports

Loading