feat: #3616335 Add a title_size prop to the Dated Vertical Card and stop double padding
Fixes #3616335.
Problem/Motivation
1. The card was padded twice. The SCSS carried this comment:
// 32px block / 24px inline padding — overrides the p-4/p-3 utility applied
// in the twig, which is 24px uniform.
padding: #{$spacer * 2} #{$spacer * 1.5};It could not override anything: the rule targets .card-dated-vertical, while p-3 sits on .card-body, a child. Both applied — 96px of vertical padding where the design asks 64px, and a 144px card instead of ~110px.
2. The title's size could not be set without changing its heading level. heading_level drove both tag and typography, so a template wanting the design's 18px title had to declare h5 — skipping h3/h4 and tripping Editoria11y. The theme's own heading component already separates level from text_size; this component lacked the equivalent.
Three values also disagreed with the design: day 28px (design 26px), month 12px (design 16px), icon circle 48px (design 40px).
Proposed resolution
- New
title_sizeprop mirroringheading'stext_size— same enum, empty by default so the title keeps matching its heading level. Applied as a class array merged with|merge, per AGENTS.md §4. .card-bodytakesp-0whenpaddedis off, so the component's own padding is the only padding.padded: truestill opts intop-4.- Day
$spacer * 1.625, month$spacer, icon circle$spacer * 2.5— all through$spacer, no px, and the px references removed from the comments.
A template can now keep heading_level: h3 for the outline and set title_size: h5 for the design's 18px.
Note for reviewers
Adding a prop mints a new component version (1b941df5cf10c438 → 8ae1a0c2f309e5b8), so config that uses title_size must move its component_version pin forward. The previous version is retained, so existing content keeps rendering — verified against pages that still pin the old hash (/, /events, /news all 200, zero render errors).
An empty string must not be added to the prop's enum, or Canvas silently drops the prop (SDC reports it, Canvas does not). default: '' with '' absent from the enum is the working pattern, matching heading's text_size.
Testing
- Measured against the Figma design tokens (
Desktop/Heading/H5 = 18px / lh 1.4): title renders 18px / 25.2px with the tag stillH3. - Day 26px, month 16px, icon 40px, card-body padding 0, card height 110px — all matching the design.
gitlab-ci-local:build,eslint,stylelint,cspell— 4/4 PASS. Thebuildjob produced no CSS churn beyond the committed file, so the committed CSS matches what CI generates.- CSS rebuilt with
yarn components:build, as AGENTS.md requires.
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