v15.0.0

Before you upgrade, please take note of any breaking changes and deprecation notices which may affect your site. View the Upgrade Guide to see examples of how to address breaking changes.

Breaking changes 💥

While significant effort has been made to minimize breaking changes, it’s possible that some could still impact your site.

Typography margins and padding have had a major overhaul. #956 #997
- any custom css that sets a margin or padding should be reviewed and updated accordingly
- any elements that have lost their top / bottom margins can be fixed by adding .content-block to the parent element
All Components, Style Guide, and Layouts have had a major overhaul to their container widths #939 #1011
- any custom markup on your site should be reviewed and updated accordingly
- any content that hugs to the left side of the browser window can be fixed by:
  - adding .content-block to the parent element
  - or, in some cases on older pages, update the markup so that it’s a direct child of [role="main"]
Tabs now have no padding on its inner content by default - use the class .tab--content if you'd like to add some #956

<div class="tabbed-nav">
  <div class="full-width">
    <nav role="tablist">...</nav>
  </div>
  <div class="tab tab--content" id="..." role="tabpanel">...</div>
</div>

Theme colour frame has been renamed to accent #1059
- --col-bg-frame ➡️ --col-bg-accent
- --col-bg-frame-50 ➡️ --col-bg-accent-50
- --col-bg-frame-75 ➡️ --col-bg-accent-75
- --col-outline-frame ➡️ --col-outline-accent
- --col-outline-frame-50 ➡️ --col-outline-accent-50
- --col-outline-frame-75 ➡️ --col-outline-accent-75
Typography vars have been renamed to --fm-level-x #923
- --text-gap-level-0 ➡️ --fm-level-0
- --text-gap-level-1 ➡️ --fm-level-1
- --text-gap-level-2 ➡️ --fm-level-2
- --text-gap-level-3 ➡️ --fm-level-3
- --text-gap-level-4 ➡️ --fm-level-4
- --text-gap-level-5 ➡️ --fm-level-5
- --text-gap-level-6 ➡️ --fm-level-6
- --text-gap-level-7 ➡️ --fm-level-7
updated nodejs to v20.11.1 #1007

New features ✨

four new Background colours #1058
- .bg-secondary
- .bg-highlight
- .bg-accent
- .bg-light
Pathfinder - this replaces the deprecated Pathfinder component #963 #998 #1008 #1032 #1064
seven new Form inputs are available for use by using the following input types #1026
- Colour Picker - color
- Date - date
- File Upload - file
- Month - month
- Range - range
- Tel - tel
- Time - time

<input id="" type="date" name="" />

Block Listing titles should now use an h2 or h3 element instead of strong #972

<a class="block-container" href="#">
  <div class="top-unit">
    <h3>...</h3>
  </div>
</a>

you can now limit the width of text elements inside components by wrapping them inside <div class="text-wrapper"> #1010

<div class="text-wrapper">
  <h1>...</h1>
  <ul>...</ul>
  <p>...</p>
</div>

typography mixins now allow custom margins to be set using --fm #1063

@mixin typography-level-4 {
  --fm: 0;
}

components can now be built using vue and exported as native web components - please refer to docs/new_component_guide.md for a guide on how to build them #863 #942
- they are exported as part of th uom.js bundle
- uom-components.js bundle can be used on non-gen3 sites
new spacing variables to ensure consistent spacing is used througout the codebase #956 #967 #968 #997
- --sp-1 - 0.5rem
- --sp-2 - 1rem
- --sp-3 - 1.5rem
- --sp-4 - 2rem
- --sp-5 - 2.5rem
- --sp-6 - 3rem
- --sp-7 - 3.5rem
- --sp-8 - 4rem
- --sp-9 - 4.5rem
- --sp-10 - 5rem
- --sp-layout - consistent spacing between sections of content and components
new Theme colours #1026 #1056 #1058 #1060
- --col-bg-primary-25
- --col-bg-primary-50
- --col-bg-primary-75
- --col-bg-alt-25
- --col-bg-hightlight-25
- --col-bg-accent-25
- --col-outline-alt-25
- --col-outline-hightlight-25
- --col-outline-accent-25
- --col-form-input-bg-hover
- --col-form-input-checked-hover
new --w-text variable - it limits the maximum width of text elements #1010
new css mixins:
- inset-width, inset-left, and inset-right - reduces css duplication #1010
- bg-padding - it applies inline padding to elements when the left-aligned Jump Navigation is used #981

Bug fixes 🐛

fixed an issue where the text inside the Enquiry button was inheriting the underline on :hover #956
Left-aligned In-page navigation now vertically aligns the content to the top of the container #956
Blockquote now accounts for instances of nested <p> elements and sets the correct font properties #1022
fixed Double block listing layout on mobile viewport #1036
fixed an issue where the .box class was resetting the padding of nested components #956
removed small white space below <img> by using vertical-align: bottom; #966
swapped import order of figure and embedded-media so the correct styles are applied #995
Filtered Listings now allows dynamic height for each item #964
Selects now have a max-width of 25rem to match other form elements #939
removed min-height from [role='main'] #956
Jump Navigation works with new page width and all content types #939 #981 #982 #985

Deprecation notice⚠️

Other changes

updated Accordion and Forms to the new VID #1026 #1043
updated css breakpoints #939
- --bp-x-wide ➡️ 1280px
- --bp-xx-wide ➡️ 1440px
updated container widths #939
- --w-mid ➡️ 67.5rem
- --w-lge ➡️ 77.5rem
updated --page-gutter to 1rem that increases to 2rem on desktop breakpoint #939 #962
updated typography margins #923 #992
- --fm-level-2 - 1.5rem ➡️ 1.25rem
- --fm-level-3 - 0.625rem ➡️ 1.25rem
- --fm-level-4 - 0.5rem ➡️ 1.125rem
- --fm-level-5 - 0.375rem ➡️ 1rem
- --fm-level-6 - 0 ➡️ 0.75rem
- --fm-level-7 - 0 ➡️ 0.5rem
updated Theme variables
- --col-text-invalid ➡️ --col-red-dark-75 #1026
- --col-bg-disabled ➡️ --col-grey-light-50 #1026
- --col-form-input-text ➡️ --col-text-secondary #1026
- --col-form-input-text-disabled ➡️ --col-grey-dark-75 #1026
- --col-outline-alt from --col-grey-light-25 ➡️ --col-grey-light-100 #1060
- --col-outline-highlight from --col-sage-light-25 ➡️ --col-sage-light-100 #1060
- --col-outline-accent from --col-blue-dark-25 ➡️ --col-blue-dark-100 #1060
- --col-bg-alt from --col-grey-light-25 ➡️ --col-grey-light-100 #1058
- --col-bg-highlight from --col-sage-light-25 ➡️ --col-sage-light-100 #1058
- --col-bg-accent from --col-blue-dark-25 ➡️ --col-blue-dark-100 #1058
Flash Message now requires its content to be nested inside <div class="flash__inner"><div> #1020

Before:

<div class="flash flash--info">
    <p>...</p>
  </div>

After:

<div class="flash flash--info">
  <div class="flash__inner">
      <p>...</p>
  </div>
</div>

Documentation updates

tidied up Homepage and added link to cms #1049
updated docs/new_component_guide.md on how to use web components #863 #942
improved Icon grid layouts #939
migrated Titles back to the Style Guide #956
Facts Variable Columns now displays properly on mobile viewport #997
migrated all Example pages to their own Layout sections #1049
- updated relevant documentation pages to point to new urls
- mirgrated e2e tests to e2e/tests/layouts/
- added redirect rules in netlify.toml
updated layout-page-header.html to use layout-breadcrumbs to dynamically generate the breadcrumbs in the Page Header #1049
removed examples from Page Header hamburger menu #1049
updated documentation:
- Flash Messages - #1020
- Forms - #1026
- Titles - #956
created Usage on a non-gen3 website detailing how to use web components on non-gen3 sites #863 #942
created Page Header with Sidebar and Jumpnav layout - #939
created CMS pages:
- Blockquote - #1022
- Block Listing - #956
- Filtered Listing - #964
- Pathfinders - #963
- People- #939
- Text Boxes - #956
- Titles - #1010
created Form stories - Colour Picker, Date, File Upload, Month, Range, Tel, Time #1026
updated CMS Content Block stories #956
removed the following stories:
- Gallery - small and medium #939
- Timeline - full width #939
- Tables - wide #939
- Listings - simple text listing #939
- Embedded Media - wide #939
- Figure - wide and confined #939
- CMS titles - subtitle #924
- Forms - clear and alt select #1026
- CMS Sections - legacy from #1010
removed CMS helpers page #956