v7.0.0

Breaking changes 💥

• Features marked for deprecation in v6.0 have now been removed. This includes the following classes: listing, feature-listing, and some specific uses of navigation-block-listing. See full list in PR https://github.com/unimelb/unimelb-design-system/pull/875.
• Using an img element inside profile headers and people search results is now deprecated. This does not affect profile header min. https://github.com/unimelb/unimelb-design-system/pull/847 - Please use a div with a background image instead:

<div class="profile-header__photo" style="background-image: url(...);"></div>
<div class="person__photo" style="background-image: url(...);"></div>

• Class ticked-list can no longer be used on a parent of the list element; it must be used on the list element itself https://github.com/unimelb/unimelb-design-system/pull/878:

<!-- NO LONGER SUPPORTED -->
<div class="ticked-list"><ul> ... </ul></div>

<!-- CORRECT -->
<ul class="ticked-list">...</ul>

• Lists used inside steps lists and accordions must now be direct children of the root list items. See issue https://github.com/unimelb/unimelb-design-system/issues/810 for an example. This restriction allows for significant simplification of, and improvements to, the base list styles as mentioned in the Other changes section below.
• The two privacy links in the subtext of the enquiry component were broken or causing redirects. They have now been updated; please update them as well on your sites. https://github.com/unimelb/unimelb-design-system/pull/861
• The document structure no longer includes HTML5shiv for IE8 and lower. Please update your site's main layout file, as well as any stand-alone pages (e.g. 404 and 500 error pages). https://github.com/unimelb/unimelb-design-system/pull/856
• The design system no longer listens for Turbolinks events page:load and page:restore. Instead, you should listen for them and call the new API methods yourself:

document.addEventListener('page:load', window.uom.applyInjection);
document.addEventListener('page:load', window.uom.initAllComponents);
document.addEventListener('page:restore', window.uom.applyInjection);
document.addEventListener('page:restore', window.uom.initAllComponents);

• The following JavaScript APIs have changed (see Other changes and https://github.com/unimelb/unimelb-design-system/pull/856 for more info):
• window.UOMloadInjection ➡️ window.uom.applyInjection
• window.UOMloadComponents ➡️ window.uom.initAllComponents
• window.UOMbind & window.UOMbindIcons ➡️ window.uom.initComponent
• window.cssesc ➡️ window.uom.vendor.cssesc
• window.loadScript & window.loadStylesheeet ➡️ window.uom.utils.loadScript & window.uom.utils.loadStylesheeet

Deprecation notices ⚠️

The following features are marked for deprecation and will be removed in the next major version of the design system, v8.0:

• Inset and full-width figures: classes inset-left, inset-right and full-width (only when used on a figure element, except inside .half) ➡️ use the new figure component instead https://github.com/unimelb/unimelb-design-system/pull/888
• Video and SoundCloud embeds: classes video, video--21-9, soundcloud and soundcloud-cover ➡️ use the new embed and figure components instead https://github.com/unimelb/unimelb-design-system/pull/882 https://github.com/unimelb/unimelb-design-system/pull/888
• Diamond staff listing: classes diamond-mask and staff-listing-detailed--diamond (since v6.0) ➡️ use the normal detailed staff listing instead https://github.com/unimelb/unimelb-design-system/pull/884
• Inset timeline: not supported by new figure component (timelines are too wide to be inset on tablet devices) https://github.com/unimelb/unimelb-design-system/pull/888

New features ✨

• Figure component to streamline the use of images and other self-contained units of content (videos, tables, etc.) on design system pages. The component provides a clean, consistent, and versatile markup solution that covers many scenarios from inset tables to full-width video embeds. https://github.com/unimelb/unimelb-design-system/pull/888
• Embed component to deal with third-party embeds, notably from YouTube, Vimeo and SoundCloud (previously documented on the now defunct Media page). In most cases, embeds should be used inside the new figure component. https://github.com/unimelb/unimelb-design-system/pull/882 https://github.com/unimelb/unimelb-design-system/pull/888
• Sub-links in search results https://github.com/unimelb/unimelb-design-system/pull/874
• Disabled styles for text input fields (with attribute disabled) https://github.com/unimelb/unimelb-design-system/pull/877
• Event ribbons to highlight, for instance, booked out events https://github.com/unimelb/unimelb-design-system/pull/889

Bug fixes 🐛

• Bottom-margin missing on images in simple listings when used inside section https://github.com/unimelb/unimelb-design-system/pull/864
• Lead paragraph missing padding when jumpnav is active https://github.com/unimelb/unimelb-design-system/pull/876
• Lists missing bottom padding when used inside steps list https://github.com/unimelb/unimelb-design-system/pull/878
• Long caption breaks inset figures https://github.com/unimelb/unimelb-design-system/pull/888
• Use span instead of div when injecting icon labels. Icons are most often used like so: <span data-icon="...">, and a div inside a span is not valid HTML. https://github.com/unimelb/unimelb-design-system/pull/860
• Injected footer contains broken links and links that lead to redirects https://github.com/unimelb/unimelb-design-system/pull/861
• Jumpnav not recalculating page height when opening/closing accordion https://github.com/unimelb/unimelb-design-system/pull/891
• Filtered listing asides disappear below listings on mobile https://github.com/unimelb/unimelb-design-system/pull/898

Other changes

• Replace unimelb logo in header, footer and global nav with new version from brand architecture project. This shaves about 80 kB off every design system page. https://github.com/unimelb/unimelb-design-system/pull/892
• Simplify and improve base list styles. All lists, whether nested or used inside accordions and steps lists, should now have clean and consistent spacing styles. See PR https://github.com/unimelb/unimelb-design-system/pull/878 for a few before/after screenshots.
• Make 3-column and 2-column simple text listings wider and increase font size of all simple listings https://github.com/unimelb/unimelb-design-system/pull/893
• Tweak ligherblue colour to meet accessibility contrast requirement https://github.com/unimelb/unimelb-design-system/pull/853
• Use strong elements instead of headings in global nav to reduce the amount of information spoken to screen reader users https://github.com/unimelb/unimelb-design-system/pull/854
• Use a simple img element for the unimelb SVG logo, improve the alt text for accessibility, and remove the PNG fallback https://github.com/unimelb/unimelb-design-system/pull/859
• Improve accuracy of scrolling thresholds when jumpnav and global header transition between static and fixed positioning. Also, improve performance of their scroll and resize handlers with lodash debounce and throttle utilities. https://github.com/unimelb/unimelb-design-system/pull/891
• Switch from Sass to PostCSS and use cssnext plugin https://github.com/unimelb/unimelb-design-system/pull/866
• Switch from npm to yarn. See PR https://github.com/unimelb/unimelb-design-system/pull/867 for some example commands.
• Upgrade to webpack 2 and improve config https://github.com/unimelb/unimelb-design-system/pull/868 https://github.com/unimelb/unimelb-design-system/pull/880
• Thoroughly document all design system workflows from development to deployment, including the use of GitHub milestones and the drafting of release notes https://github.com/unimelb/unimelb-design-system/pull/855
• Remove designer/content editor pages from web.unimelb and simplify homepage https://github.com/unimelb/unimelb-design-system/pull/883
• Switch to babel-preset-env (babel-preset-es2015 is deprecated) https://github.com/unimelb/unimelb-design-system/pull/870
• Combine the injection and components webpack targets into a single uom target to avoid having to concatenate them later on with a Rake task https://github.com/unimelb/unimelb-design-system/pull/856
• Move all components (including injection components) to the root of the assets folder and remove duplicated code (e.g. modals, icons, etc.) https://github.com/unimelb/unimelb-design-system/pull/856
• Clean up and reorganise utility modules (e.g. smoothScrollTo, loadScript, etc.) Also, use lightweight third-party libraries rather than custom code when possible. https://github.com/unimelb/unimelb-design-system/pull/856 https://github.com/unimelb/unimelb-design-system/pull/869
• Remove debranded target and refactor entry file of remaining targets with ES6 https://github.com/unimelb/unimelb-design-system/pull/856
• Make es6 extension optional and add aliases to Webpack config to make importing/requiring files easier https://github.com/unimelb/unimelb-design-system/pull/856
• Initialise CreateNameSpace module only once as part of the injection, instead of three times https://github.com/unimelb/unimelb-design-system/pull/856
• Refactor component initialisation code (#856):
  • Create ComponentManager module with methods to register and initialise components.
  • Let each component declare:
    • its label (i.e. name) - e.g. Accordion.label = 'Accordion',
    • the selector to use to find occurrences of the component on the page - e.g. IconHelper.selector = '[data-icon]',
    • any JS and CSS dependencies it relies on that need to be loaded asynchronously - e.g. PhotoSwipe and Isotope for the gallery.
  • Allow passing props to a component via the data-props attribute, which accepts the string representation of a JSON object - e.g. data-props="{"propName": "propValue"}".
• Expose a well-structured API to the global object, namely: window.uom (not repeated below for conciseness). https://github.com/unimelb/unimelb-design-system/pull/856 https://github.com/unimelb/unimelb-design-system/pull/869 https://github.com/unimelb/unimelb-design-system/pull/873 https://github.com/unimelb/unimelb-design-system/pull/891 https://github.com/unimelb/unimelb-design-system/pull/897 - This API includes:
  • two arrays of registered components (not instances): components and injectionComponents,
  • the actual instances of those components on the page: instances and injectionInstances (more info below and in https://github.com/unimelb/unimelb-design-system/pull/873),
  • the new component manager's methods: initComponent, initAllComponents, registerComponents, registerInjectionComponents and applyInjection,
  • utility functions: utils (e.g. utils.smoothScrollTo),
  • third-party libraries: vendor -- at the moment cssesc, and WebFont, and
  • a global event bus, based on the super-event-emitter library, that components can use to communicate with one another.
• Store component instances by ID and expose them through the API: window.uom.instances. Each instance's ID is randomly generated and set as the value of the data-bound-<label> attribute in the DOM, where <label> is the component's label in lower case. So to access a component instance, find its root element in the DOM, get its ID from the data-bound-<label> attribute, and use this ID to retrieve the instance: window.uom.instances[id]. https://github.com/unimelb/unimelb-design-system/pull/873
• Store injection component instances by label (since each component has only one instance) and expose them through the API - e.g. window.uom.injectionInstances.InjectHeader https://github.com/unimelb/unimelb-design-system/pull/897