v1.8.0

What's new since v1.7.6

This release enhances form controls, grid, and layout with improved flexibility and consistency, adds support for reusable stories in Storybook, and includes Jest tests for components template and snapshot testing.

This release contains 🚨 breaking changes - refer to each component's changelog below.

BASE

Grid

• Rationalised grid classes and added tests. @AlexSkrypnyk (#223)(#224)
• Added support for a fluid grid and tests for grids offset. @AlexSkrypnyk (#229)
• Added responsive vertical spacing to Grid. @AlexSkrypnyk (#234)
• BC 🚨: Moved flex-related utilities into own utility component. @AlexSkrypnyk (#227)
  .ct-justify-content-start -> .ct-flex-justify-content-start
.ct-justify-content-center -> .ct-flex-justify-content-center
.ct-justify-content-end -> .ct-flex-justify-content-end
.ct-row-align-middle -> .ct-flex-row-align-middle

Icon

• [#149] Removed obsolete icons. @govindmaloo (#177)

Item Grid

• BC 🚨: [#178] Merged Item Grid into Grid. @AlexSkrypnyk (#180)

Item List

• Added a test for Item list. @AlexSkrypnyk

Layout

• Refactored Layout to support 5 different regions. @AlexSkrypnyk (#183)(#197)(#257)(#265)(#269)(#256)
• Fixed sidebar gap on Layout using masonry with JS fallback. @alan-cole (#276)
• Fixed column gaps to be larger when only a single sidebar is present. @alan-cole (#267)

Time/Datetime

• BC 🚨: Renamed time component to datetime. @AlexSkrypnyk (#260)(#258)

Scrollspy

• Added Scrollspy docs. @AlexSkrypnyk (#220)

Storybook

Storybook helpers have been updated to be more consistent and easier to use.
They also now have their own stories.

• [#124] [#125] [#127] Created/Updated centralised Storybook helpers. @joshua-salsadigital (#139)
• Added Storybook helpers for docs, knobs, and stories. @AlexSkrypnyk (#232)(#221)
• Added support for re-usable stories. @AlexSkrypnyk (#153)(#191)(#193)(#222)
• Reordered components in Storybook navigation. @AlexSkrypnyk (#238)(#290)
• [#15] Added patch for stuck knobs. @richardgaunt @AlexSkrypnyk (#249)(#255)
• [#30] Moved assets/videos to .storybook/static @joshua-salsadigital (#128)

ATOMS

Back To Top

• Updated Back to Top docs. @AlexSkrypnyk (#220)

Chip

• Updated Chip component color mapping. @govindmaloo (#176)

Form Control

All form controls have been fully refactored to be the basic building blocks for the new Molecules > Field component. This change introduces a new Molecules > Field component that replaces the Molecules > Form Element component.

Form Control > Button

• 🚨BC: Renamed is_raw_text to allow_html on Button for consistency with other components. @AlexSkrypnyk (#275)

Form Control > Checkbox

• Updated Checkbox styles to designs 1.8. @AlexSkrypnyk @joshua-salsadigital (#188)(#251)(#231)(#213)(#212)(#204)
• Updated Checkbox to use SVG mask. @AlexSkrypnyk (#203)
• Added is_checked knobs and removed is_required to Checkbox. @AlexSkrypnyk (#213)

Form Control > Field Description

• Added allow_html prop to Field description. @AlexSkrypnyk (#253)
• Fixed link styles in the field description. @AlexSkrypnyk (#252)

Form Control > Field Message

• Added allow_html prop to Field message. @AlexSkrypnyk (#253)
• Fixed link styles in the field message. @AlexSkrypnyk (#252)
• Fixed icon position in Field message. @AlexSkrypnyk
• Fixed colours on Field message. @AlexSkrypnyk (#218)

Form Control > Fieldset

• Updated Fieldset to use new Field. @AlexSkrypnyk (#214)(#254)
• Added support for a nested Fieldset. @AlexSkrypnyk (#239)
• Move to Atoms group. @AlexSkrypnyk

Form Control > Input

• 🚨BC: Refactored to use the new Field component. @AlexSkrypnyk (#247)
• Added support for browser-provided icon colour on Input. @AlexSkrypnyk (#272)

Form Control > Label

• [#273] Added allow_html to Label component. @AlexSkrypnyk (#274)

Form Control > Radio

• Updated Radio styles to designs 1.8. @AlexSkrypnyk @joshua-salsadigital (#189)(#251)(#231)(#213)
• Updated Radio colours and dimensions. @AlexSkrypnyk (#202)
• Added is_checked knobs and removed is_required to Checkbox and Radio. @AlexSkrypnyk (#213)

Form Control > Select

• Updated Select styles to designs 1.8. @AlexSkrypnyk (#186)
• Fixed minimal width of the Select control to accommodate for the icon. @AlexSkrypnyk

Form Control > Textarea

• Updated Textarea styles to designs 1.8. @AlexSkrypnyk

Form Control > Textfield

• Updated Textfield styles to designs 1.8. @AlexSkrypnyk

Paragraph

• Updated Paragraph to use random content generator. @AlexSkrypnyk (#242)

Table

• Fixed Table horizontally stacking content on mobile. @AlexSkrypnyk

MOLECULES

Accordion

• Updated Accordion to use a random generator. @AlexSkrypnyk (#242)

Field/Form element

This component is a centralised component (factory) for producing form controls
of different types using a consistent styling and API. It replaces the
Molecules > Form Element component.

• Added new Field component as a replacement for Form element. @AlexSkrypnyk @joshua-salsadigital (#182)(#250)(#247)(#211)(#205)(#288)(#233)(#190)

Field Group

• BC 🚨: Renamed to Atoms > Fieldset.

Form Element

• BC 🚨: Removed in favour of Molecules > Field.

List > Single Filter

• Fixed Single Filter announcing changes to content and a "down" key trigger for collapsible. @joshua-salsadigital (#118)
• Added reset button and disabling of the buttons if none of the Chips is selected in Single filter. @AlexSkrypnyk (#194)
• Fixed buttons growing in the Single filter. @AlexSkrypnyk (#199)

List > Group Filter

• Added tests for Group filter and fixed content sanitisation in slots. @AlexSkrypnyk (#284)
• Fixed Group Filter announcing changes to content and a "down" key trigger for collapsible. @joshua-salsadigital (#118)
• BC 🚨: Fixed event name on Group filter from data-ct-group-filter-filters to data-group-filter-filters. @AlexSkrypnyk (#187)

List > Pager/Pagination

• BC 🚨: Renamed pager to pagination in all components. @AlexSkrypnyk (#259)
• BC 🚨: Removed active_is_link prop. @AlexSkrypnyk (#289)
• Linked up to new Field component. @AlexSkrypnyk

List > Navigation Card

• BC 🚨: [#73] Updated Navigation card to change orientation to vertical in narrow columns of List. @AlexSkrypnyk (#174)(#175)
• Fixed Icon colour on Navigation card. @AlexSkrypnyk (#172)
• Fixed image as icon on Navigation card. @AlexSkrypnyk (#169)

Table of Contents

• [#154] Fixed TOC not appearing in Storybook. @AlexSkrypnyk (#162)

ORGANISMS

Alert

• BC 🚨: Fixed event name on Alert data-ct-alerts to data-alerts. @AlexSkrypnyk (#187)
• Fixed colours and icons on Alert. @AlexSkrypnyk (#218)
• [#152] Fixed Alert API storybook page. @AlexSkrypnyk (#168)
• Fixed icon position on Alert component. @AlexSkrypnyk

Banner

• [#155] Fixed missing Banner background in Storybook and added support for alt attribute. @AlexSkrypnyk (#164)
• Fixed Breadcrumb knobs in Banner. @AlexSkrypnyk
• Allow to set Content and Content below theme in Banner story. @AlexSkrypnyk (#170)

Campaign

• Updated Campaign styles to designs 1.8. @AlexSkrypnyk (#236)
• [#156] Updated Campaign to use square image within a container of equal widths. @AlexSkrypnyk (#166)

Footer

• Fixed styles in footer. @AlexSkrypnyk

Header

• Fixed Theme knob for Header and Footer stories. @AlexSkrypnyk

List

• Updated List card generation to use a larger set of random content. @AlexSkrypnyk
• Fixed vertical spacing on the List grid. @AlexSkrypnyk (#235)(#225)
• [#198] Fixed incorrectly sets URLs and dates on cards in List stories. @AlexSkrypnyk (#200)

Message

• Fixed colours and icons on Message. @AlexSkrypnyk (#218)

Navigation > Mobile Navigation

• [#69] Fixed TAB-out from the mobile menu is not working. @joshua-salsadigital (#112)

Navigation > Side Navigation

• Fixed Side Navigation is missing left stripe. @joshua-salsadigital (#208)
• Fixed Left stripe missing for child active items for both themes for side navigation component. @joshua-salsadigital (#216)

Social Links

• Fixed social icons links in the footer story. @AlexSkrypnyk (#151)
• Updated image-based Social links example icon to use an image. @AlexSkrypnyk (#290)

Security

• Fixed content sanitisation in modifier_class and attributes. @AlexSkrypnyk
• Fixed content sanitisation in slots. @AlexSkrypnyk (#284)

Other

• Updated deps to the latest versions. @AlexSkrypnyk (#241)
• [#160] Added NodeJS 22 build to CI. @AlexSkrypnyk (#161)
• Added Jest test harness. @AlexSkrypnyk (#209)
• Added Jest testing for Twig props of all components. Test run with autoescape: true allowing to test template with enhanced security sanitisation to address XSS vectors. @AlexSkrypnyk (#283)(#282)(#268)(#266)(#263)(#262)
• Added Jest snapshot testing for all components. @AlexSkrypnyk
• Added removal of whitespaces in content, modifier_class and attributes props in all components. @AlexSkrypnyk (#285)
• Added Twig linter to CI. @AlexSkrypnyk (#167)
• Added Welcome page to Storybook @AlexSkrypnyk (#195)(#270)
• Added About CivicTheme page to Storybook. @joshua-salsadigital @AlexSkrypnyk (#215)(#210)(#207)
• BC 🚨: Removed deprecated ct-highlight-stripe() mixin. @AlexSkrypnyk (#230)

Full Changelog: v1.7.6...v1.8.0

@AlexSkrypnyk, @alan-cole, @govindmaloo, @joshua-salsadigital, @renovate, @renovate[bot], @richardgaunt and Joshua Fernandes