Changelog

This release does have updates that were made as part of the accessibility project but due to it stopping these elements are untested. So please don't change the njk files of these ones.

Design System 1.0.13

@uol-event-cards - Bugfix

Hotfix Clearing issue

Due to issues with the clearing webpage not displaying information in accordions correctly we put a hotfix into 1.0.9, we have now added this to 1.0.10, 1.0.11, 1.0.12 and 1.0.13.

Release 1.0.13 Summary

1.0.13 Part 1 - Skip links

"Skip links" is top level template work (HTML modifications) which will affect most if not all pages. We thought best to address this first, as all other branches use this modified structure.

Skip links, several components updated

In order to make sure the skip links goes to non repeating content, several components and changes have needed to modified. The following list are all modifications to existing components/patterns.

Although components have been listed below the 'skip link' functionality would need to be tested within a page, please see some examples below (Affected pages section).

Please note, within 'Patterns / Search results' section there are a number of patterns which are still in development (to be completed in future sprints). These include: 'With Content Area', 'Without Search Form and With Content Area', 'With Map' and 'With Map And Content Area'.

1.0.13 Part 2 - Faculty sites

@uol-cards - update

New video variant added to the cards which can be applied to any card by passing 'video': true in the config.

@uol-section-nav-related-content - new variant

@uol-publications-list - new component

New component used to display information about a users publications. Four variants showing several examples.

@uol-publications-items - new component

Component to house a number of Publication List components. Below example inserts this component into accordions at bottom of profile page.

@uol-example-search--publications - new variant

Search example page variant updated to include variant with instances of publications-list component in results

@uol-example-article - updated

Further work to update the article pattern with spacing improvements around how the Profile Supplement sits on the page.

Also News and events have been implemented at the bottom of an example News and Events article pages.

These can be seen in the 'Examples', in the 'Article' section called 'Article: with News Supplement' and 'Article: with Events Supplement'.

1.0.13 Part 3 - Student sites

@uol-navigation-cards - new component

New navigation cards component. The navigation card is a component that displays text but also acts as a large clickable link to another area. Variants include different numbers of cards, but also a variant which exhibits how the cards handle text limits. Text limits described in documentation notes, and on the cards themselves in the 'Different text limits' variant. Long descriptions where the description is more than six visual lines are terminated via an ellipsis.

@uol-image-pair - new component

New image pair component. Variants include default, one image (un-advised but if only one image included image fits to width of container) and variant with no caption. Also embedded in to CK editor (all possible content) example.

@uol-gallery - bugfix

Gallery modal bugfix. Zooming in browser window to 400% meant navigation controls were going off screen. Bug fix applied to ensure this is no longer the case.

@uol-form-input - update

Design system documentation change only. Documentation update to highlight linkage between form inputs and corresponding label for accessibility compliance.

@uol-form-pattern--search-with-single-typeahead - new variant

Added form pattern variant 'Search with single typeahead'. This uses our standard single typeahead component in a form (previous versions utilised simple text entry inputs). Note, as per previous implementations for the typeahead component, for un supported browsers (Firefox, IOS, Android) the default select component is used, hence typeahead functionality is not available on those platforms. CSS modified to accommodate for both of these.

@uol-pattern-search-results--with-map - new variant

@uol-example-article--buildings-and-rooms - new example page

@uol-footer-supplement - new component

Must be used at the bottom of the page above the footer pattern and can pass any material design icon that is present in the uol-icon component

@uol-multilink-results-item - new component

Based on existing people profile card component (@uol-people-profile-card), this component offers further functionality and modified laytout. Several variants with multiple configuration options available. The below example page shows all possible content which can be included.

Note, design requires different placement of content for different viewpoints. This wasn't efficiently possible in CSS, therefore Javascript utilised to move content around. One example of this is viewing the below variant, note the content from the lead sentence downwards shifts position at 768px breakpoint, and person position (red title) switches position at 600px viewpoint. With Javascript disabled, this content always stays underneath the image and title.

@uol-multilink-results-items - new component

Similar to the people profile card component, this component holds a number of results items.

@uol-form-pattern--radio-buttons-and-search - new variant

New variant added which accommodates a number of radio buttons on a form above the search input.

@uol-form-input--select-multiple-no-chips - new variant

A further form fields input variant. This variant uses our typeahead mutliselect, but doesn't show chips. Instead it shows the number of options selected. For one option this shows "1 option selected" (single option). For two or more options this shows "n option selected". For zero options this information field does not show.

The link below is for the stand alone component. The link below includes this behaviour in the 'Cheeses list' filter option.

@uol-pattern-search-results - new variants

Dynamic filter name options. Work added to make filter panel title reflect the type of filters within.

Additionally, added the folowing variants for with map, with new content area and without form (and a few combinations of these):

@uol-example-article--ckeditor-pattern - new variant

The CK editor page pattern is a new article example. This page aims to in corporate anything which editors can in principle add to an article page. In page user documentation is provided. Most elements on this page have been tested on previous article patterns. New additions specific to this release version are:

Design System 1.0.12

@uol-example-article - updated

Changes to article patterns styling, default article example content and creation of new example page (examples/article/ck-editor-pattern) which includes documentation and all components which can be used on an article page.

[1.0.11] - 2023-03-29

@uol-event-cards - Updated

@uol-article - updated

@uol-example-article - updated

Changes to the article patterns (above) incorporated in to full page examples. Specific to this build article profile pattern.

@uol-gallery - Updated

@uol-widget - Updated

@uol-widget-featured-content - Updated

The above components have been updated as part of the 'Featured content widget' work.

This includes two new variants one 'With Arrow Links', which allows for a series of arrow links to be passed to the 'Featured content component' through the config.

The other variant is the 'With video', this allows for a video to be added (passed through the config). This uses the gallery component.

The gallery component has had a small update to allow for a new style play button icon to be added to a video.

@uol-news-tiles - Updated

The news tiles have been updated, primarily to move the title down to the bottom of the tile and update some spacing.

[1.0.10] - 2023-03-06

@uol-banner - updated

Minor modification to banner component. Previously screen readers read the previous and next controls as "previous" and "next". These have now been replaced to say "Select previous banner item" and "Select next banner item".

@uol-article - updated

Addition of new component (article highlight) in to template. and template modified for different markup for different article types.

@uol-example-article - updated

@uol-article-highlight - new

New component added. This new component is embedded in to the article blog pattern and example referred to above.

@uol-rich-text-table - updated

Variant to rich text table added to accommodate optional HTML caption tag. As well as the uol-rich-text-table component, table with caption is added to the article news pattern and example.

[1.0.9] - 2023-02-03

@uol-typography-font-face - Updated

@uol-chips - Updated

@uol-detail-nav - Updated

Tidy up Javascript and make implementation of single page navigation more robust.

@uol-filters-panel - Updated

Change text of clear filters button and 'Filters' title for if single or plural.

uol-results-items - Updated

To allow for a highlighted piece of text (red) to be passed through to a results item. Also allow for a custom piece of data to be added, where the title and the content can be defined.

@uol-section-nav-related-content - Updated

'Safe' added to the content section in related links to stop the data from being escaped.

@uol-article - Updated

@uol-homepage-content - Updated

@uol-template-course - Updated

@uol-template-homepage - Updated

@uol-template-page - Updated

@uol-template-search - Updated

@uol-example-article - Updated

Removed 'Skip to content' work, this is just temporary and will be added back in a future release (likely the next). It was removed due conflicting with an exsisting bit of code.

@uol-postgraduate-research-opportunities-detail - New

A new template created for Postgraduate Research Opportunities. Includes the following variants:

@uol-postgraduate-research-opportunities-home - New

@uol-postgraduate-research-opportunities-search-results - New

[1.0.8] - 2022-12-16

@uol-undergraduate-one-page - New

Replaced multipage course details variants with single pattern. All content on the same page and JS enabled to show and hide content.

@uol-template-course - Updated

Updated the course template to accommodate articles, rankings and awards, page-nav and profiles on one page.

[1.0.7] - 2022-11-21

@uol-filters-panel - New

Component for the filters panel to be used as part of the search results. Only to be used on mobile and tablet view after the filters result button is clicked.

@uol-pattern-search-results - New

Pattern bringing together the components for the search results. Including the @uol-filters-panel, @uol-form-block, @uol-results-count, @uol-results-items and @uol-pagination

@uol-template-search - New

@uol-example-search-results - New

An example page for course search results, using the @uol-pattern-search-results and @uol-template-search

@uol-pagination - Updated

Pagination updated to not use Javascript to add the SVG icons to resolve issue CMS side.

@uol-form-block - New

A form component which is used as a container for putting together a form block. Can include images, lead text, rich text e.t.c

@uol-link-button - New

Similar to the uol-button component, this component allows a link (href) to be applied to a button. This button should be used sparingly, other options may be more applicable to linking to other pages. Styling has been applied for button combinations on pages such as coursefinder apply pages and icon support for buttons used on search filter pages.

@uol-logo-group - New

@uol-accordion - INC0617377

Fixed an issue with the accordion, when large tables were added this could result in some of the content being cut off for the user.

@uol-results-items - Updated

Allow config specific to course search such as UCAS code, duration and a-level offer

[1.0.6] - 2022-11-04

@uol-coursefinder-masters - New

The Course finder pages template for masters. A number of different variants have been included:

@uol-coursefinder-online - New

The Course finder pages template for online. A number of different variants have been included:

@uol-coursefinder-undergraduate - New

The Course finder pages template for undergraduate. A number of different variants have been included:

@uol-detail-nav - New

A variation on uol-section-nav to be used on course finder pages. The section-nav goes in to an accordion on small screen sizes, this component shows options at all times as integral for page navigation.

[1.0.5] - 2022-10-24

@uol-example-coursefinder - New

An Example page for the homepage for course search, featuring existing search form and new 4 cards wide variant

@uol-cards--4-cards-wide-container - New

A variant of the cards widget, displaying 4 cards on the same row on widescreen view

[1.0.4] - 2022-10-03

@uol-key-facts - New

This component is used to display a list of key facts. This block of facts communicates important facts for example about a course.

@uol-in-text-facts - New

Blocks showing facts and figures on a page. One or two can be displayed but no more than two. These facts have an optional link URL.

@uol-global-marketing-banner - New

The global marketing banner provides a means of communicating primary marketing messages e.g information on open days.

@uol-supplement-profile' - New

The profile supplement content type is used for displaying current or former students or staff’s accounts of their experiences at the University.

@uol-year-of-entry - New

The Year of Entry is to be displayed at the top of each course page. It includes an optional link which can take the user from the course page of the current academic year to the course page of the following year or vice versa.

@uol-in-text-cta - Update

Update to in text cta to make the component more prominent, ensuring calls to action stand out better.

[1.0.3] - 2022-09-21

@uol-widget - Updated

Implementation actions

Cookie control plugin - Updated

Updated version of the uol-cookie-control.js plugin that addresses Safari bug that caused the updated policy notification to fail.

Skip to main content links - Accessibility improvement

Updated a number of templates and components to improve accessibility when using the 'Skip to main content' links (ensuring the user is taken to the main content of the page).

Implementation actions

To implement this improvement, the following templates and components will need to be updated.

@uol-banner - Updated

Updated the banner template to support lazy loading of images for improved load times.

Implementation actions

[1.0.2] - 2022-09-12

@uol-chips - New

"Chips" component to display selected items in new @uol-form-input–multiselect–typeahead component (see below)

@uol-form-input - Updated

Implementation actions

Update @uol-form-input template and include latest Design System JavaScript and CSS. For usage see component notes.

Bugfix - Header search field placeholder opacity

Fixed placeholder text opacity for Firefox and partial opacity was causing colour contrast failure

Implementation actions

[1.0.1] - 2022-05-06

Cookie Control

Updated the Cookie Control plugin to address accessibility issues caused the previously fixed footer notification overlapping content. The cookie notifications now appear as inline elements at the top of the body.

Implementation actions

Update implementation to use the latest version of uol-cookie-control.js and latest CSS that can be found in the Assets zip.

[1.0.0] - 2022-04-25

@uol-site-footer - Updated

Footer updated to support Accreditation Logos using the pre-existing component @uol-accreditation-logos.

Implementation actions

Image usage guidance

The Design System now includes component specific guidance for authors and developers on the types, sizes and compression levels for images. If a component includes image guidance you can now find this under the Notes tab.

[0.2.24] - 2022-03-14

@uol-button - Updated

Implementation actions

Update all instances of @uol-button to use new configurable version and config data.

@uol-form - Updated

@uol-people-profile-card - Updated

Added support for Actions and Messages. Actions are used to make a profile "interactive" and make use of the updated @uol-button component to render a button. Messages are displayed using the nuw @uol-status-message component.

@uol-status-message - New

Status messages are used as within the @uol-people-profile-card to display post-interaction messages.

@uol-index-table - Updated

CSS and JavaScript Bugfixes and enhancements

Button focus

Table sorting

[0.2.23] - 2022-02-10

@uol-header-local-masthead--subsite - New variant

Implementation actions

@uol-people-profile-card - New

Result card for people profiles. Used within the new @uol-people-profile-cards component

@uol-people-profile-cards - New

@uol-people-profile-search-results - New

@uol-accreditation-logos - New

@uol-widget-accreditation-logos - New

Extends standard @uol-widget to display accreditation logos using @uol-accreditation-logos

@uol-homepage-content - Updated

@uol-cards - Updated

Updated to address bug whereby a featured card layout could be rendered without the required image markup

@uol-form-input - Updated

Various CSS and JavaScript bugfixes and enhancements

[0.2.22] - 2022-01-27

@uol-form-input--datepicker - New variant

Implementation actions

@uol-form-input--file-upload - New variant

New input type of type="file" provides an enhanced file upload experience for users of modern browsers with a basic fallback for Internet Explorer 11.

Implementation actions

[0.2.21] - 2022-01-14

@uol-gallery - New

@uol-widget-gallery - New

[0.2.20] - 2021-12-09

@uol-arrow-link - New

Utility component to illustrate the linkArrow JavaScript module. The linkArrow module adds animated arrows to the end of links.

@uol-description-list - New

@uol-widget-description-list - New

New 'homepage' widget to present "Description lists". Uses @uol-description-list.

[0.2.19] - 2021-10-22

@uol-header-global-masthead - Updated

@uol-header-global-search - New

New separate component for global search to be included in @uol-header-global-masthead

@uol-header-local-masthead - New

New header component to support sites other than the main corporate site eg. faculties, wordpress etc.

@uol-list-featured - New

@uol-widget-list-featured - New

[0.2.18] - 2021-10-08

Site template

Updated the site template to remove auto linking of "telephone numbers" as it was causing dates to be converted to phone links in some browsers.

Implementation actions

@uol-form - Updated

@uol-form-input-container - Updated

@uol-input - Updated

@uol-form-input-error-msg - Updated

@uol-form-input-char-count - New

Provides a count mechanism for character count limited text areas. See updated @uol-form-input for implementation.

@uol-widget-form - New

@uol-staff-a-z - Updated

@uol-example-clearing - Updated

@uol-event-cards - New

@uol-widget-events - New

Extension of the @uol-widget component to present upcoming events on a homepage or landing page.

[0.2.17] - 2021-08-17

@uol-template-page, @uol-example-article, uol-example-staff-az - Updated

container now has addition attributes to better support "Skip links" for IE11

@uol-results-count - Updated

Updated to improve results count checking and handle zero results within the component rather that in parent patterns (see @uol-staff-a-z update below).

@uol-staff-a-z - Updated

Zero results now handled by updated @uol-results-count (see above)

[0.2.16] - 2021-07-06

@uol-search-form - Updated

Now uses standard uol-rich-text container to control styling on additional form text.

@uol-typography-pull-quote - Updated

Updated markup to remove semantics.

Implementation actions

Update any instances of the pull-quotes in content and update any editor authoring tools (eg: CKEditor, TinyMCE) that make use of @uol-typography-pull-quote markup.

@uol-page-heading - Updated

Moved @uol-in-page and concatenated the title and sub-heading to improve SEO and search results.

@uol-page-nav - New

Provides additional navigation for multi-page documents, blog posts, news items etc.

SVG accessibility improvements

Updated remaining SVGs to include focusable="false" aria-hidden="true"

While most of the SVGs are included in the assets either as files or within JavaScript and can be updated by using the latest assets, you will need to update the following components:

@uol-logo-uol
@uol-logo-uol-inline

@Uol-banner - Updated

Replace outer div with section with aria-label="Featured" to provide better page landmarks.

[0.2.15.1] Hotfix 1 - 2021-06-23

@uol-section-nav - Updated

Added aria-current attribute support to current page in section navigation.

Implementation actions

Update template to include {% if item.current %}aria-current="page"{% endif %} on anchors.

Ensure the section navigation data includes an item with 'current': true where appropriate.

@uol-nav-list-group - Updated

Added aria-current attribute support to current page in footer navigation.

Implementation actions

Update template to include {% if link.current %}aria-current="page"{% endif %} on anchors.

Ensure the footer navigation data includes an item with 'current': true where appropriate.

@uol-header-local-navigation - Updated

Added aria-current attribute support to current page in navigation.

Implementation actions

Update template to include {% if item.current %}aria-current="page"{% endif %} on anchors.

Ensure the navigation data includes an item with 'current': true where appropriate.

[0.2.15] - 2021-06-17

Accessibility improvements and bug fixes. Update to latest assets to apply improvements and fixes.

@uol-header-local-navigation - CSS update

Improve navigation dropdown contrast against dark backgrounds

@uol-typography-pull-quote - Update

Fixed conflict between aside tag and presentation role. Now uses non-semantic div with aria-hidden="true"

Implementation actions

Update any hardcoded or database instances on the pull quote. If you have implemented any WYSIWYG plugins you will also need to update the markup these deliver.

@uol-section-nav - Bugfix

Section nav loses focus on keyboard parent item interaction.

[0.2.14] - 2021-06-11

CSS and JavaScript bug fixes

No template changes. Update to latest assets to apply fixes.

[0.2.13] - 2021-05-28

@uol-cookie-control - New

Cookie controls using the uol-cookie-control JavaScript plugin. The component provides example implementations and basic site specific CSS.

@uol-in-text-cta - New

New component to render "Call to action" blocks. Can used within a standard rich text area or within the new @uol-widget-ctas widget (see below).

NB: Ensure you set the correct heading level appropriate to the context.

@uol-widget-ctas - New

New widget pattern to render one or more @uol-in-text-cta instances.

@uol-widget - Updated

The widget head container .uol-widget__head now only renders if widget_title, widget_lead or widget_link are true. While we still recommend that most widgets should have mandatory titles, the @uol-widget-ctas pattern did not require the title.

NB: if you use @uol-widget-ctas without a title ensure you set the correct heading level appropriate to the context.

@uol-widget-content - New

New widget pattern to render a rich text area.

@uol-homepage-content - Updated

Updates to the home page content to support the new and updated widgets in this release.

@uol-template-homepage - Updated

In order to maintain the correct heading structure for the homepages the widgets output is now preceded by a visually hidden H1 tag.

NB: Ensure you pass an appropriate page_title string to each homepage.

@uol-cards - Updated

Added option for card group to force image layout with placeholder where images aren't present using boolean 'image_layout': true,. If not set the no-image layout will be use even if images are available for individual cards.

Added time information to support News and Events widget (see below).

NB: If your date string is not a standard date format you should replace the time tag with a span of the same class making sure you do not include the datetime attribute.

@uol-widget-news-events - New

New widget pattern to support the display of news and events cards.

@uol-news-events-search-list - New

Pattern for news and events index and search results pages

@uol-results-count' - New

Results count or news and events search results pages.

@uol-results-items - New

Card style component for news and events on news and events index and search results pages.

@uol-pagination - Updated

Pagination output is now conditional on there being more that one page. Removed invalid type="button" attribute from anchors.

@uol-facts-figures - New

Component to output between 1-6 "Facts and Figures" blocks.

@uol-widget-facts-figures - New

New widget pattern to display @uol-facts-figures component in a homepage context.

@uol-skip-link - New

This component provides a visually hidden 'skip link' to the header of every full page on the site that can be accessed by keyboard and screen reader users.

@uol-header-global-masthead - Updated

Global masthead updated to include the new @uol-skip-link component.

@uol-form-input - Updated

Replacing input wrapper div with span to ensure valid HTML.

@uol-form-search - Updated

Added support for additional content to be appended after the search form.

[0.2.12] - 2021-05-17

@uol-accordion - Updated

Added support for index tables in accordions

@uol-cards - New

Cards display

@uol-widget-cards - New

@uol-cards extension of the @uol-widget

Improved font support for languages not supported by our Freight font implementation

Languages not supported by our default Freight implementation will render using the default system font

@uol-header-local-navigation - Updated

Added aria-label="Site navigation" to nav

@uol-section-nav - Updated

Added aria-label="Section navigation" to nav

@uol-section-nav-related-content - New

New component to support section based related content

@uol-side-nav-container - New

New placeholder component to support JavaScript relocated content while maintaining semantics and landmarks

@uol-article - Updated

Now includes @uol-side-nav-container

@uol-example-article - Updated

Now includes @uol-section-nav-related-content

@uol-footer-contact - Updated

Changed to a tag around the organisation name to improve semantics.

@uol-icon-twitter - Updated

Fix error in fill hex value

[0.2.11] - 2021-05-06

Updated main template

The main site template has been updated to accommodate the full width header and footer.

Contact the frontend team for a copy of the updated template.

@uol-pagination - New

Provides navigation between pages of results. Used in Staff A-Z - see below.

@uol-banner - New

Provides a banner for use on homepages with a slider when more than one banner item is present

@uol-section-nav - New

Section navigation. NB. the location of the section navigation in the dom will be changed using JavaScript depending on viewport and page content.

@uol-header-local-navigation - Updated

Local navigation has been updated to accommodate the new @uol-section-nav

@uol-header-global-masthead - Updated

The Global Masthead has been updated to accommodate the new @uol-section-nav

@uol-article - Updated

Minor markup update to accommodate the new @uol-section-nav

@uol-site-footer - Updated

Footer markup updated to support full width footer

@uol-example-article - Updated

Includes new variants for each article type with section navigation where needed.

@uol-homepage-content - New

Do not implement Initial homepage content mock-up for testing purposes.

@uol-page-home - New

Do not implement Initial homepage mock-up for testing purposes.

Social media Icons - Updated

Updated SVG social media icons for improved IE11 support:

@uol-icon-facebook

@uol-icon-instagram

@uol-icon-linkedin

@uol-icon-medium

@uol-icon-twitter

@uol-icon-weibo

@uol-icon-youtube

@uol-logo-uol - Updated

Updated SVG logo for improved IE11 support

@uol-section-nav-ctas - New

New Section CTAs component

@uol-button - Updated

Additional variable for Type to support full range of options:

button

submit

reset

@uol-form-input-container - New

Outer wrapper for form fields

@uol-form-input - New

Standard form input initially supporting types:

text

search

additional types support will follow.

@uol-search-form - New

Search form for use with Staff A-Z

@uol-highlight-block - New

Presentational component for use on Staff A-Z

@uol-index-table

Added support for search results count for use on Staff A-Z

@uol-staff-a-z - New

Pattern for Staff A-Z search and results

@uol-example-article - Updated

Minor update to Article example to add support for Section CTAs

[0.2.10] - 2021-04-19

@uol-tiles and @uol-widget-tiles - Updated

Minor changes to template and more substantial changes to the CSS.

Implementation actions

Update any instances of @uol-tiles and @uol-widget-tiles and included updated CSS and JS

@uol-index-table - New

Tables for use on index pages

@uol-header-global-quicklinks - New

Quicklinks sub-component for @uol-header. Provided University links for inclusion in the global header section.

[0.2.9] - 2021-04-09

@uol-button - New

Provides a standard button component. Includes support icon buttons and icon-only buttons using Material Design Icons

Typography - Updated

Updated Typography to improve relative type sizes

@uol-breadcrumbs - New

Provides breadcrumb style navigation for use on sub pages

[0.2.8] - 2021-03-26

@uol-header-local-navigation - New

Provides the top level local navigation with support for one level of sub menu.

@uol-header - Updated

Updated to include the new @uol-header-local-navigation component and and outer container.

Implementation actions

Update any instances of @uol-header to reflect the new view.

[0.2.7] - 2021-03-12

@uol-header and @uol-header-global - New

Initial masthead work includes the @uol-header as a container for @uol-header-global. @uol-header-global currently contains the University of Leeds logo and the global search form.

Implementation assets zip

The Design System now includes a linked zip file containing the assets needed for implementation. You will find the link on the home page

Refactored Modernizr

The browser feature detection script Modernizr has been refactored to incorporate it into the start and build processes. This will allow for easier updates and configuration changes in future.

Implementation actions

Update to latest version of /assets/scripts/modernizr-custom.js

[0.2.6] - 2021-02-26

@uol-article - Updated

Update to article pattern to provide support for Person Insight variant.

@uol-rich-text-table - New

Rich text tables support. Includes horizontal scrolling for wide tables and cell stacking for small screens.

[0.2.5] - 2021-01-29

@uol-article - Updated

Updated pattern for articles. Additional support for profiles

@uol-accordion - New

Reworked version of the 0.1.x accordions. This version drops the outer grouping for multiple accordions and allows the heading tag to be configured.

@uol-profile-image - New

Required for the @uol-article profile variant

@uol-cms-container - New

Required for the @uol-article profile variant. Somewhat duplicates the @uol-article-content component so these two items may be combined in a future release.

@uol-widget-tiles - Updated

Additional variants. No change to template, CSS or JS

[0.2.4] - 2021-01-15

@uol-article - New

New pattern for articles. Currently supports types of Default, News and Event.

[0.2.3] - 2020-12-11

@uol-widget - New

This is a wrapper component for our standard home and landing page widgets. The new @uol-widget component replaces the version previously available in 0.1 and looks significantly different. While much of the markup remains the same, there have been small changes taht will require implementation.

@uol-widget-tiles - New

This component extends the new @uol-widget (described above) to provide a "tiled" interface for highlighted content on home and landing pages.

@uol-widget-news-tiles - New

This component extends the new @uol-widget (described above) to provide a "tiled" interface for high profile news on home and landing pages.

[0.2.2] - 2020-11-27

0.2.1 provides the first proper components of the 0.2.x version. This releases focuses on the site footer and it's dependencies.

@uol-site-footer - New

A new componentised footer intended to meet the needs of Corporate, Faculty and all other UoL branded sites.

Key features

Configurable contact and address component @uol-footer-contact that will allow each site to display their site-specific information in an accessible format and using the Schema.org RDFa properts to improve machine indexing by search engines.

Configurable "site information" links menu @uol-footer-site-information, to allow standard or custom links for privacy, legal and accessibility information.

Reworked main footer navigation @uol-nav-list-group, providing improved semantic output and readability.

SVG logos for the University and social media providers.

[0.2.1] - 2020-11-13

Includes the following foundation elements

Breakpoints

Columns

Typography

[0.2.0] - 2020-11-13

0.2.0 marks a significant refactor to incorporate new foundational elements. All previous components have been removed/hidden. Future iterations will reintroduce the previous components with new foundations. This first 0.2.x iteration includes

Colours

Spacing

As these aspects are not components but rather global values they are represented in the documentation section.

[0.1.5] - 2020-10-05

@uol-gallery and @uol-widget-gallery - New

The @uol-gallery component and @uol-widget-gallery pattern are included in this release. They provides gallery layouts for collections of images or videos. Image galleries may be displayed with or without a modal view. For image galleries the modal can be used to display larger, un-cropped versions of the images along with additional information. Video galleries display an image placeholder for the video (image sourced via YouTube URL based on ID), the video player is only loaded when the modal is opened.

Implementation actions

See Components -> Gallery for the data model and markup.

[0.1.4] - 2020-09-08

@uol-card and @uol-widget-cards - Updated

The @uol-card component is updated to support a wider range of content types including specifics for Events. The visual design has also been updated. To simplify widget implementation the functionality of @uol-widget-news-events and @uol-widget-news has been incorporated into @uol-widget-cards.

Implementation actions

Update any implementations of @uol-card and @uol-widget-cards to match new markup.

@uol-widget-events - Removed

The parrern @uol-widget-events has been removed and the functionality incorporated into @uol-widget-cards

Implementation actions

Remove any implementations of @uol-widget-events and use @uol-widget-cards in its place

@uol-widget-news-events - Removed

The unimplemented prototype @uol-widget-news-events has been removed and the expected functionality incorporated into @uol-widget-cards

@uol-widget-news - Removed

The unimplemented prototype @uol-widget-news has been removed and the expected functionality incorporated into @uol-widget-cards

@uol-widget-blog - Removed

The unimplemented prototype @uol-widget-blog has been removed and the expected functionality incorporated into @uol-widget-cards

@uol-search-results-news and @uol-form-search-news - New

The @uol-search-results-news pattern provides the standard news index page layout. At present it requires a bespoke search form @uol-form-search-news. We plan to remove this in future once the standard search from has been upgraded to support the requirements of news.

@uol-search-results-item - Updated

Results item markup has been updated to use an H2 instead of the previous H1 tag. This should improve document structure for screen reader users.

Implementation actions

Update any implementations of @uol-search-results-item to match new markup.

[0.1.3] - 2020-08-10

@uol-gallery and @uol-widget-gallery - New (Testing)

The @uol-gallery component and @uol-widget-gallery pattern are included in this release. They provides gallery layouts for collections of images or videos. Image galleries may be displayed with or without a modal view. For image galleries the modal can be used to display larger, un-cropped versions of the images along with additional information. Video galleries display an image placeholder for the video (image sourced via YouTube URL based on ID), the video player is only loaded when the modal is opened.

Implementation actions

NB: There are a number of outstanding accessibility bugs which should be addressed in release 0.1.5. The bug-fixes are unlikely to require any change to implementation markup. The fixes will most likely be delivered via updated JavaScript and CSS.

@uol-table - Bugfix

Fix bugs with inconsistent table sorting arrows

#13570

#13718

#13279

Implementation actions

Update to latest JS and CSS

@uol-breadcrumb - Updated

Aria label added to breadcrumb component to improve accessibility.

Implementation actions

Update any implementations of @uol-breadcrumb to match new markup.

[0.1.2] - 2020-07-27

@uol-table - New

Provides a standard structure for data tables. The component provides

"table stacking" for smaller screens

Column sorting

This component is suitable for use on index pages to display data from a search or category selection. It can also be used in content areas where there is proper template control is in place.

At present the component only provides support for tables with column scoped table headings within the thead of the table. Sorting and "table stacking" will not work where a table heading has row scope or where mult-level th are used in the thead.

Known Bugs

Bug 13570 When tables are sorted by more than one column the arrow indicators are inconsistent and may point in the wrong direction.

[0.1.1] - 2020-07-13

New colour palette

We are now using a new set of colours. There are no implementation actions required other that including the latest CSS and JS. You will however see mostly minor changes to the colours used in components.

@uol-breadcrumb - Updated

New markup for @uol-breadcrumb.

Implementation actions

Update any implementations of @uol-breadcrumb to match new markup.

@uol-in-page-nav - Updated

Description

Replace jQuery with ES6. Includes IE polyfills to allow future ES6 work.

Removes requirement for hardcoded nav toggle button as it is now provided using progressive enhancement. Non-breaking but implementations should remove hardcoded button.

Improves support for non-js browsers.

Enhance accessibility using aria-expanded and hidden attributes

Implementation actions

Update @uol-in-page-nav or equivalent to remove the toggle button

@uol-pagination-numbered - Updated

All output is now conditional on pagination data being present

Implementation actions

Update @uol-pagination-numbered or equivalent to add conditional output control

@uol-announcements - New

Implementation of feature 11422 - Information announcement.

Provides an announcements component to allow site visitors to see updates on important information.

Requires addition of the @uol-announcement component immediatly after the tag in the site outer template

{% render '@uol-announcement' %}

In addition the remaining site content should be wrapped in a div with the class of "site-outer"

@uol-facts-figures - New

Implementation of feature 9197 - Facts and figures widget.

Provides a way to present key facts and figures. Includes @uol-widget-facts-figures for use on landing pages.

@uol-accordion - New

Implementation of feature 12126 - Content accordions

Provides a method of hiding and showing content via a heading toggle button.

[0.1.0] - 2020-05-31

Initial release provides components necessary for the Wellbeing Safety & Health website.

Design System 1.0.14.2

Document page with section navigation layout issue

Course page example related courses page fix

Design System 1.0.14.1

Update to course page template following layout error:

Adding featured image to document template:

Addition to enable Funnelback integration with typeahead search

Design System 1.0.14

Publication date: 07 June 2024

Online courses blog search results page - new example

Linked list - updated css, add to ckEditor

Search results items update

In text icons - new component

New hero banner component

Search form patterns - new variants

Social media icons update

Header local navigation - new variant added

Article examples update

Article highlight