v15.1.0

New features ✨

• new Embed Aspect Ratio - the portrait variation displays media in an aspect ratio that fills the entire screen of a mobile device when in portrait mode #1075

<div class="embed embed--portrait">...</div>

• you can now highlight a Tag with .tags__item--active #1052

<div class="tags">
  <ul class="tags__list">
    <li class="tags__item tags__item--active">...</li>
  </ul>
</div>

• new Theme vars - Tags now change their colour depending on what Backgroud class its parent element uses #1081
  • --col-tags-bg
  • --col-tags-bg-active
  • --col-tags-bg-hover
  • --col-tags-text
  • --col-tags-text-hover
• new Theme mixins - handle different colour palettes #1061
  • theme-light
  • theme-dark
  • theme-alt
• new Background mixins - colour overrides to apply when using the .bg-x classes #1061
  • bg-secondary
  • bg-alt
  • bg-highlight
  • bg-accent

Bug fixes 🐛

• fixed an issue introduced in v15.0.0 where images in Staff Listing lost their square aspect ratio #1083
• fixed an issue where content inside .bg-secondary and .bg-accent failed to pass a11y #1061
• Headers now have left and right spacing when used with the Left-aligned Jump Nav #1084
• removed border from the alternate tabs colour Tabs variation #1071

Other changes

• Accordion markup has been uplifted to comply with ally standards. Please note the new markup, as well as the unique IDs that link the button and panel #1065 #1077

<ul class="accordion">
  <li class="accordion__item">
    <h3 class="accordion__item-heading">
      <button aria-controls="accordion-panel-1" aria-expanded="false" class="accordion__button" id="accordion-button-1">
        <span class="accordion__title">...</span>
      </button>
    </h3>
    <div aria-labelledby="accordion-button-1" role="region" id="accordion-panel-1" class="accordion__panel">...</div>
  </li>
</ul>

• tidied up Tags component #1078 #1081
• updated Jump Nav and Left-aligned Jump Nav #1082
  • title is now a paragraph using typography-level-5 and has a bottom border
  • gap between columns change on specific breakpoints
  • uses --sp-layout to control top and bottom container margin
• added hover state to Filtered Listings #1069
• removed border from Sidebar Tabs #1073
• Table rows now inherit the background colour of its parent element #1074
• Styled Table now changes the background color of even rows instead of odd #1074
• removed the need for bg-primary mixin in Enquiry #1061
• updated the following items to work with the alternate Background #1061
  • Citation
  • Grid
  • Tables
• migrated assets/shared/_theme.css to theme-light #1061
• renamed --col-listing-x variables to --col-listing-x-bg #1069
• assets/shared/component-manager.js now binds true to mounted components instead of using cuid #1076
• removed cuid package #1076

Documentation updates

• tided up Embed Aspect Ratio documentation #1075
• removed .zebra from Sortable Table #1074
• added new variables to Listing Colours #1069
• you can now preview four more Background colours #1061
  • the alternate background with ?preview=alternate-background
  • the secondary background with ?preview=secondary-background
  • the highlight background with ?preview=highlight-background
  • the accent background with ?preview=accent-background