v14.7.0

New features ✨

• we have added some new colour variations forTraditional Heritage (Blue) #867
  • --col-heritage-75 - 75%
  • --col-heritage-50 - 50%
  • --col-heritage-25 - 25%
• the following Icons have been added to the icon set #856
  • arrow-left
  • arrow-left-outline
  • arrow-right
  • arrow-right-outline
  • check-outline
  • check-special
  • clipboard
  • collapse
  • dropdown
  • edit-calendar
  • expand
  • eye
  • favourite
  • filter
  • handshake
  • microphone
  • newspaper
  • pause
  • pause-outline
  • play
  • play-outline
  • rest
  • sort-up
  • sort-down
  • start
  • warning
• the size of the Icon can now be defined by the data-size attribute #856
  • xs
  • sm
  • md
  • lg
  • xl
  • xxl

<span data-icon="..." data-size="xs">...</span>

• the size of the Icon label can now be defined by the data-label-size attribute #876
  • sm
  • md
  • lg

<span data-icon="..." data-label-size="lg">...</span>

• the Icon label can now be hidden by using the data-hide-label attribute #856

<span data-icon="..." data-hide-label="true">...</span>

• the Icon can expand to fill its container element by using the data-fill attribute #856

<span data-icon="..." data-fill="true">...</span>

• new icon css mixin. It accepts two properties: #856
  • icon - the name of the icon to use
  • size (optional) - it accepts the same sizes as the data-size attribute

/* Icon only */
@mixin icon chevron-right

/* Icon and size */
@mixin icon chevron-right, sm

• new icon css variables #856
  • --icon-size-xs
  • --icon-size-sm
  • --icon-size-md
  • --icon-size-lg
  • --icon-size-xl
  • --icon-size-xxl
  • --icon-width
  • --icon-aspect-ratio
  • --icon-gap
• installed svgo-loader to optimise and remove attributes from svg icons #856

Bug fixes 🐛

• icon labels in Article Footer are now hidden correctly #870
• fixed an issue where yarn --production needed to be set to false to install correct dependancies and to let webpack compile #872
• fixed an issue where all headers inherited extra padding when the .floating class was present, instead of only the first header #839
• pages containing the gen4 mega menu and the .floating class now have the correct padding set on the first header #839

Deprecation notice⚠️

• the following classes have been deprecated and will be removed in a later version:
  • Card Icons - #856
    • .card__image-icon
  • Icons - #856
    • .small - use data-size="md" instead
    • .large - use data-size="xxl" instead
    • .fill - use data-fill="true" instead
    • .icon--hide-label - use data-hide-label="true" instead
  • .video-thumb and .audio-thumb #877

Other changes

• updated Icons to the new VID #856
• updated Colour Palette #867 #877
  • --col-maroon-75 ➡️ rgb(150 90 120)
  • --col-maroon-50 ➡️ rgb(185 145 165)
  • --col-maroon-25 ➡️ rgb(220 200 210)
  • --col-green-dark-25 ➡️ rgb(202 208 198)
  • --col-outline-success ➡️ var(--col-green-dark-100)
• updated all components to use the new icons #856 #877
• updated raw uses of svg to <span data-icon="">...</span> #856
• updated assets/style-guide/icons/index.js to convert .small and .large ➡️ data-size and .icon--hide-label ➡️ data-hide-label #856
• updated assets/webpack.config.js to optimise svg files using svgo-loader #856
• ported over Header cms changes #839
• added in missing e2e tests for CMS pages #871

Documentation updates

• created CMS pages to document raw use of <svg> until the components have been updated in the cms #856
  • CMS Article
  • CMS Card Buttons
• created CMS Icons to document deprecated .small, .large, .fill, and .icon--hide-label classes #856
• updated Icons to show new data-size, data-label-size, data-hide-label, and data-fill attributes #856 #876
• created data-align-grid helper to vertically center align items in the grid #856

<div class="grid" data-align-grid="center"></div>