Skip to content

CSS Sprint E-2: component library finished - 450-copy card consolidation, jt-reviews-box restored, starter template#382

Merged
pftg merged 3 commits into
masterfrom
css-migration/e2-component-library
Jul 19, 2026
Merged

CSS Sprint E-2: component library finished - 450-copy card consolidation, jt-reviews-box restored, starter template#382
pftg merged 3 commits into
masterfrom
css-migration/e2-component-library

Conversation

@pftg

@pftg pftg commented Jul 19, 2026

Copy link
Copy Markdown
Member

What this is

Sprint E-2 from the groomed schedule — finishing the component library for the paved-path goal.

Shipped

  • Per-page card consolidation (450 rule-copies collapsed): within each page the card instances were ~97% identical. Four per-page cores (services-card ×6/33 rules, home-service-card ×6/20, about-value-card ×3/25, careers-value-card ×6/27), additive on the modules. A card now reads jt-info-card <page>-card <instance> — global core → page core → instance tweaks. Value-different tie scan clean on all four pages; only the 4 card-page bundle fingerprints changed; screenshots green.
  • jt-reviews-box slider design restored (decision per Paul's delegation): the intended testimonial arrow-nav + card refinements were silently purged (runtime pp-swiper/pp-review classes, no shield — same accident class as the skip-link). Greedy entries restore it; assets verified; static captures unchanged (the design lives in hover/multi-slide states) — full critical suite green with zero baseline changes.
  • Starter template: themes/beaver/layouts/page/starter-example.html.txt — the copy-me page shell (slice recipe, hero, three-tier card, shared partials), kept .txt so Hugo ignores it.
  • bin/qtest component maps: info-card/cta-banner/header-cta + the cta partial map to their consumer pages instead of escalating to --all.
  • Measured "not-a-component" verdicts documented: heroes (cross-page intersection: 1 trivial rule) and stat rows (intersection: 0 — structurally different builds) stay page-unique by design; recipes in new-page.md instead. No forced abstractions.

Verification

Full macOS system suite 65/119 zero failures, zero baseline changes; Linux bin/dtest-all EXIT=0; scoped gates per commit.

Next per the groomed schedule

Sprint E-3 (one CTA source): parametrize the cta partial, collapse the 6 inline template copies, fix the duplicate data-node attr.

🤖 Generated with Claude Code

https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V

Summary by CodeRabbit

  • Style

    • Standardized card layouts, spacing, typography, hover states, icons, and responsive behavior across homepage, services, careers, and about pages.
    • Improved testimonial slider styling so related components remain available after CSS optimization.
    • Refined page-specific card styling and visual consistency.
  • Documentation

    • Clarified reusable component guidance, page-specific design patterns, and card styling conventions.
    • Added a starter page template example with hero, card grid, testimonials, and CTA sections.
  • Tests

    • Expanded scoped screenshot coverage for card and CTA-related changes.

Paul Keen and others added 3 commits July 19, 2026 19:04
… collapsed

Within each page the card instances were ~97% identical to each other.
Four per-page core classes (services-card x6 33 rules, home-service-card
x6 20, about-value-card x3 25, careers-value-card x6 27), additive on
the modules; per-instance keeps stay under their own classes and win by
later position. Value-different tie scan: clean on all four pages.

Combined with E1's jt-info-card, a card instance now reads:
  jt-info-card <page>-card <instance-class>
(global core -> page core -> instance tweaks) - the cascade a new page
copies by example.

Gates: only the 4 card-page bundle fingerprints changed; scoped
screenshot gate green on all four.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V
…sion per delegation)

The intended slider design (arrow navigation with hover-arrow assets,
review-card refinements in 586.css) was silently purged in production -
pp-swiper/pp-review are runtime classes with no purge shield, the same
accident class as the skip-link incident. Greedy entries /^pp-swiper/ +
/^pp-review/ restore it deliberately.

Visual assessment: static captures unchanged (full critical suite 34/52
green, zero baseline changes) - the restored rules affect hover states
and multi-slide arrow nav, which screenshots do not exercise. Assets
verified present (hover-arrow-icon*.svg).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V
…omponent verdicts

- themes/beaver/layouts/page/starter-example.html.txt: copy-me page
  shell (slice recipe, hero, three-tier card, shared partials) - kept as
  .txt so Hugo ignores it; referenced from new-page.md.
- bin/qtest COMPONENT_CONSUMERS: info-card/cta-banner/header-cta + cta
  partial now map to their consumer pages instead of escalating to
  --all.
- new-page.md: measured verdicts - heroes and stat rows are deliberately
  NOT components (intersections 1 and 0); recipes documented instead.
  Card class tiers documented.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V
@coderabbitai

coderabbitai Bot commented Jul 19, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

Shared page-card classes and CSS are consolidated for homepage, services, about, and careers pages. PurgeCSS and qtest mappings are updated, documentation defines card conventions, and a non-live Hugo starter template is added.

Changes

Shared card styling and starter layout

Layer / File(s) Summary
Shared card classes and page styles
docs/workflows/new-page.md, themes/beaver/layouts/..., themes/beaver/assets/css/pages/*
Page templates add shared card classes, while homepage, services, about, and careers styles consolidate responsive visibility, alignment, typography, hover, spacing, image sizing, and radii rules.
Build and screenshot-test asset mapping
postcss.config.js, bin/qtest, themes/beaver/assets/css/pages/homepage.css, themes/beaver/assets/css/pages/careers.css
PurgeCSS preserves swiper and review selectors, qtest maps card and CTA assets to page keys, and obsolete stylesheet fragments are removed.
Starter page template
themes/beaver/layouts/page/starter-example.html.txt
A non-live Hugo example defines CSS processing, a hero, a card placeholder, and shared testimonials and CTA partials.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant HugoTemplate
  participant CSSProcessor
  participant SharedPartials
  HugoTemplate->>CSSProcessor: pass starter CSS resources with bundleName starter
  HugoTemplate->>SharedPartials: render testimonials and CTA partials
Loading

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title is clearly related to the main changes: card consolidation, restored testimonial styling, and the starter template.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch css-migration/e2-component-library

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@pftg
pftg merged commit 7c485ad into master Jul 19, 2026
3 checks passed
@pftg
pftg deleted the css-migration/e2-component-library branch July 19, 2026 17:42

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@themes/beaver/assets/css/pages/services.css`:
- Around line 3070-3075: Replace the invalid bare px border-radius declarations
with a valid numeric value, such as 0, in the shared card selectors for
services.css (3070-3075), homepage.css (7565-7570), and careers.css (3665-3670),
covering all four corner declarations at each site.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: af74fccd-3172-432e-ad71-63f299040656

📥 Commits

Reviewing files that changed from the base of the PR and between edf499f and 9834754.

📒 Files selected for processing (12)
  • bin/qtest
  • docs/workflows/new-page.md
  • postcss.config.js
  • themes/beaver/assets/css/pages/about-us.css
  • themes/beaver/assets/css/pages/careers.css
  • themes/beaver/assets/css/pages/homepage.css
  • themes/beaver/assets/css/pages/services.css
  • themes/beaver/layouts/home.html
  • themes/beaver/layouts/page/about.html
  • themes/beaver/layouts/page/careers.html
  • themes/beaver/layouts/page/services.html
  • themes/beaver/layouts/page/starter-example.html.txt

Comment on lines +3070 to +3075
.services-card .pp-infobox-icon-inner span.pp-icon, .services-card .pp-infobox-image img {
border-top-left-radius: px;
border-top-right-radius: px;
border-bottom-left-radius: px;
border-bottom-right-radius: px;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Invalid border-*-radius: px; value duplicated into 3 of the 4 new shared card cores.

All three sites set icon/image corner radii to a bare px with no number, which is invalid CSS and gets dropped by every parser — a template placeholder that never got its numeric value. It's currently harmless (zero visual diff, since the value was already broken before consolidation), but the consolidation work has now copied it into the shared "page card core" blocks, exactly what the docs tell future page authors to copy when adding a new page's card.

  • themes/beaver/assets/css/pages/services.css#L3070-L3075: replace the four px-only declarations on .services-card .pp-infobox-icon-inner span.pp-icon, .services-card .pp-infobox-image img with a real value (e.g. border-radius: 0;).
  • themes/beaver/assets/css/pages/homepage.css#L7565-L7570: same fix on .home-service-card .pp-infobox-icon-inner span.pp-icon, .home-service-card .pp-infobox-image img.
  • themes/beaver/assets/css/pages/careers.css#L3665-L3670: same fix on .careers-value-card .pp-infobox-icon-inner span.pp-icon, .careers-value-card .pp-infobox-image img.
📍 Affects 3 files
  • themes/beaver/assets/css/pages/services.css#L3070-L3075 (this comment)
  • themes/beaver/assets/css/pages/homepage.css#L7565-L7570
  • themes/beaver/assets/css/pages/careers.css#L3665-L3670
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@themes/beaver/assets/css/pages/services.css` around lines 3070 - 3075,
Replace the invalid bare px border-radius declarations with a valid numeric
value, such as 0, in the shared card selectors for services.css (3070-3075),
homepage.css (7565-7570), and careers.css (3665-3670), covering all four corner
declarations at each site.

Source: Linters/SAST tools

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant