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.

New features ✨

  • Set up linter to improve quality of css files in codebase #408
    • Installed stylelint and eslint-config-prettier
    • Set up stylelint configuration in .stylelintrc
    • Set up lint:css command in package.json to run stylelint. To run manually use yarn lint:css
  • Changed lint script to lint:js. To run manually use yarn lint:js #408
  • lint-staged runs stylelint on every git commit -m to ensure all staged files pass the rules defined in .stylelintrc. If any fail it stops the commit from proceeding and informs the user to fix the issues before trying again #408
  • Unit tests now cover smooth-scroll-to.js, load-script.js, load-stylesheet.js, fancy-select.js, and local-nav.js #401 #402 #400 #409

Deprecation notices ⚠️

  • Timetable component has been removed and no longer works. If you were using it on your website you can now remove any references to it #399
  • The following classes marked for deprecation in v11.1.0 has been removed #399
    • Global - .noborder, .invisible, .hide-text, .youtube5container, .youtube5placeholder, .contrib, .quarter, .margin-rule, .tilt-before, .tilt-after, .with-tilt-sibling, .showie
    • Accordion - .accordion__noanim
    • Button - .button-fill
    • Enquiry - .enquiry-form__thanks
    • Filtered listings - .filtered-listing-item--green, .filtered-listing-item--bronze, .filtered-listing-item--silver, .filtered-listing-item--blue, .filtered-listing-item--yellow
    • Form - .align-checkbox, .newsletter-box
    • Header - .bottom-align-inverted, .no-filter, .filter-blue, .filter-green, .filter-yellow, .filter-head, .stage, .fixed-bg, .embed-video-button, .video-loop
    • Listings - .listing--crop-height
    • Nav - .col-3, .sitemap-trigger
    • Search - .search-autocomplete
    • Timeline - .has-accordion
    • Typography - .timetable, .main-title, .line

Other changes

  • Simplified the In-page Navigation jumpnav while retaining the same appearance and backwards compatability #385
    • uses position:sticky and some js to position the nav element
    • updated to use semantic html to pass accessibility tests
    • no overflow of navigation element in edge cases due to structure
    • removed unnecessary code and clashing css
  • Updated Checklist unit tests #405
  • Secreased bundle size by approximately 20% by removing unused polyfills and properly importing lodash utilities #407
  • webpack now uses uglify-es-webpack-plugin to minify js #385