Release v4.0.0 · citizensadvice/design-system

_v4.0.0

Breaking changes

💥 Remove related content styles from the design system (NP-1152)
🗣️ Callouts: New badge and modifier classes
- Modifier classes use BEM style, e.g. cads-callout--adviser vs. cads-callout-adviser
- Variants now use new cads-badge element for labels
🔗 Pagination links: Now have flex layout, fixes spacing between each item. All pagination list items require a cads-paging__item class.

New

📛 Badges: New cads-badge element used in callouts and targeted content
🍞 Breadcrumbs: New layout - chevrons at the front for increased legibility, layout bugs fixed (NP-1425)
🗣️ Callouts: Support callouts within callouts
⚽️ Footer: Update copyright year in footer (NP-1338)
📋 Footer Feedback: add a class to allow selection of footer feedback link
🔗 Header: Links in the header now accept a current_site boolean in the link object to render a span instead of a link
🔗 Links: added external link styling. Links within cads-prose are styled automatically (NP-1382)
🌎 Navigation: Header links are now added to the 'More' dropdown and no-js support (NP-1235)
🎯 Targeted content: New adviser specific variant

Bugfixes

🥾 Footer: Correct spelling of policy research
🌎 Navigation: Fix visited link colour in global nav
⬜ Tables: Give tables an explicit white background to allow them to be used against darker backgrounds
🌎: Navigation: Padding, spacing and mobile design improvements (NP-1026)
🎯 Targeted content: Design updates to targeted content button styles
🤕 Header: Search reveal button now has correct focus highlight. (NP-1330)
🏈 Footer: Use the grid to control footer alignment. (NP-1318)

Docs