SWE v4.4.0

To apply the latest changes to your templates install or update to web-template-release@latest.

🟢 New

Tag - New component #1346 #1268 #1258

Details: The tags have 6 colour variations and scale to match the size of the immediate parent element, e.g. inside headings.
What was changed: HTML, CSS
Documentation: Tags and Card with tags
Internal ticket reference: QOLDEV-637

Table - New searchable and sortable table with pagination #1154 #1168 #1194 #1221 #1326

Details: Was previously only available on qld.gov.au via the CMS. Have transferred and is now baked into the SWE codebase.
What was changed: CSS, JS
Documentation: Tables
Internal ticket reference: QOLDEV-569

🔵 Improvements

Topic index page template #1317 #1337

Details: 7 improvements were made, as listed below.
Documentation: Topic index page
What was changed: HTML, CSS
Internal ticket reference: QOLDEV-668

Improvement 1: Section navigation - updated the style of the active item to prevent dead-end clicks on the item.

Before	After

Improvement 2: Asides - Updated colour of headings to be the same as paragraphs, and not links.​ Changed heading size to H3 for improved hierarchy.

Before	After

Improvement 3: Increased the width of the main content columns to improve scan/readability of the content. With an aside the main content column is now one column, without an aside it is two columns (992px and above).

Improvement 4: Thumbnail images are optional (applied at a page level). If used they should be a clear visual signal that facilitates quick, intuitive navigation and helps users find what they're looking for effortlessly. ​We heard from the community, it’s not always easy or applicable to find an image that does this effectively and an image may instead be an unnecessary and distracting decoration.

Before	After

Before	After

Improvement 5: Under index items, publishers now have an option to display short descriptions only (applied at a page level). By default, a list of links to child pages is displayed, along with a short description for pages without child pages. Only deviate from the default if it improves the user experience of your page/content.

Short description only	A mix of short descriptions and links list

Improvement 6: Removed 'share this page' icons and CC copyright. On mobile we found that their placement was inadvertently suggesting to users that they had reached the end of the page, causing the content below to be missed. There was also next to no engagement with them.

Improvement 7: On mobile, index items now use the card component. ​We found the previous alternating and repetitive contrast/pattern caused some visual discomfort and strain.

Before	After

Franchise landing page template

Details: Due to having similar UI patterns as the topic index page, improvements 2, 3, 6 and 7 above were also applied to the Franchise landing page template. The only difference being improvement 3 where the main content area has changed from 3 columns to 2 columns (at 992px and above), to improve scan/readability.
Documentation: Franchise landing page
What was changed: HTML, CSS

Social media icon - Twitter is now 'X' #1280 #1315 #1324

Detail: The icon has been replaced with new 'X' logo in 'share this page', the footer and asides.
What was changed: HTML, CSS
Internal ticket reference: QOLDEV-546

Quick exit - Help text now mentions the option of using the 'ESC' key #1257

What was changed: HTML, CSS
Documentation: Quick exit
Internal ticket reference: QOLDEV-635

Before	After

Forms - Radio and Checkbox - Added styles for disabled state #1220

What was changed: CSS
Internal ticket reference: QOLDEV-622

🟡 Fixes

Accordion - Removed unnecessary space #1143

Details: Was occurring at ~485px and below, on accordions with multi-line heading text.
What was changed: CSS
Documentation: Accordion
Internal ticket reference: QOLDEV-533

Before	After

Global search - Fix to alignment of icons and button in the suggestion dropdown #1142 #1195 #1239

What was changed: CSS
Internal ticket reference: QOLDEV-580

Before	After

Quick exit - Fixed z-index conflict with accordions #1155

What was changed: CSS
Internal ticket reference: QOLDEV-591

Before	After

Quick exit - Was disappearing from the viewport when scrolling a long page #1169

What was changed: JS
Internal ticket reference: QOLDEV-602

Table - Fix to top border of striped table #1144 #1150

What was changed: CSS
Internal ticket reference: QOLDEV-592

Before	After

Table - Bootstrap class 'table-sm' is now compatible with SWE #1218

What was changed: CSS
Internal ticket reference: QOLDEV-620

Search results - Fix to focus border of...

SWE v4.3.0

Released on 31 Aug 2023

🟢 New

Footer - Cultural acknowledgement

What was changed: HTML, CSS
Documentation: Footer
Internal ticket reference: QOLDEV-470

🔵 Improvements

Table - Option to remove zebra-stripes from rows

Detail: Apply the class 'qg-table-no-stripes' to the table element to remove the background colour on alternate table rows.
What was changed: HTML, CSS
Documentation: Table
Internal ticket reference: QOLDEV-73

Stripes	No stripes

Cards - Border above call-to-action button removed

Detail: Border removed to reduce the space between the text content and the call-to-actions. The UI aesthetics has improved.
What was changed: HTML, CSS
Documentation: Cards
Internal ticket reference: QOLDEV-458

Before	After

Images - Full-width option for ‘figure’ images

Detail: Apply the class 'max-width-none' to the figure element to display the figure at full-width.
What was changed: HTML, CSS
Documentation: Images
Internal ticket reference: QOLDEV-74

🟡 Fixes

Banner - Fix to link colour in banner blurb

What was changed: HTML, CSS
Documentation: Banner
Internal ticket reference: QOLDEV-352

Before	After

Cards - Fix to background colour of light-theme

Detail: The background colour of light cards content area changed from transparent to white.
What was changed: HTML, CSS
Documentation: Cards
Internal ticket reference: QOLDEV-398

Before	After

Home page template - Card styling fixed between viewport 525 and 576px

Detail: Ensures images match width of their corresponding label.
What was changed: HTML, CSS
Internal ticket reference: QOLDEV-466

Before	After

Social media - Fix to vertically align icons

What was changed: HTML, CSS
Documentation: Links
Internal ticket reference: QOLDEV-425

Before	After

Global search - Fix to alignment of CTA button on the suggestion dropdown

What was changed: HTML, CSS
Internal ticket reference: QOLDEV-451

Before	After

Search results page - Fix to search input to avoid overlap of icon and text

What was changed: HTML, CSS
Internal ticket reference: QOLDEV-462

Before	After

SWE v4.2.1

Released on 31 May 2023

🔵 Improvements

Checkbox and Radio - Introduced a custom design across our supported browsers for visual consistency

Detail: Both were previously using browser defaults. Applies only to forms using the qg-forms-v2 class.
What was changed: CSS
Documentation: Forms
Internal ticket reference: QOLDEV-62

Before	After

Cards - Clickable - Improve focus and active states #764, #864

Detail: Wrap entire clickable card with updated focus/active outline style and remove from the enclosed 'a' tag.
What was changed: CSS
Documentation: Cards
Internal ticket reference: QOLDEV-226

Before	After

Lists - Reduce spacing above unordered and ordered lists #685, #885

Detail: The current spacing had slightly too much visual separation from the preceding text, which may disrupt the flow and continuity of the content. Request via Editorial Community of Practice.
What was changed: CSS
Documentation: Lists
Internal ticket reference: QOLDEV-55

Before	After

Banner - Increase contrast of blurb background with text #837

Detail: To achieve a better visual contrast and to meet WCAG 2.1 AAA level compliance we've increased the background opacity of the blurb to 0.65 which gives good results across most images. This also applies to the banner found at the top of the aggregation page template.
What was changed: CSS
Documentation: Banner
Internal ticket reference: QOLDEV-164

Before	After

Topic index page and Franchise landing page - Mobile view (767px and below) - Adjustment to hover, focus and active states #725, #884

Detail: Underline and full-width background colour change added to hover, focus and active states, full-width outline applied to focus and active states.
What was changed: CSS
Documentation: Topic index page, Franchise landing page
Internal ticket reference: QOLDEV-206

Before	After

Buttons - Style changes to hover, focus and active states #667, #669, #674, #715, #855, #876, #680, #860, #699, #861, #877

Detail: Underline added to hover, focus and active states and outline added to focus and active states.
What was changed: CSS
Documentation: Buttons
Internal ticket reference: QOLDEV-34, QOLDEV-35, QOLDEV-37

Before	After

Links - Styles updated in the accordion (#763, #770, #785, #788, #808), alert / page alert / global alert (#681, #789), quick exit (#682, #863, #889, #898) and document download (#765) components.

What was changed: CSS
Documentation: Accordion, Alert, Page alert, Global alert, Quick exit, Document download, Links
Internal ticket reference: QOLDEV-45, QOLDEV-46, QOLDEV-222, QOLDEV-223

Links - Catch-all for when links are incorrectly wrapped in 'u' tag #769

Detail: On browsers that support the :has pseudo-selector, use it to transfer the text decoration from the 'u' tag to the enclosed 'a' tag, allowing the underline to use the standard styling rules. On browsers that can't, exclude standard underline styling inside a 'u' tag to prevent a double underline appearing.
What was changed: CSS
Internal ticket reference: QOLDEV-221

Footer - Set paragraph line-height to meet WCAG minimum requirements of at least 1.5 times the font size #840

What was changed: CSS
Internal ticket reference: QOLDEV-307

Print - Underline added, and focus and active styles improved #846

What was changed: CSS
Documentation: Print
Internal ticket reference: QOLDEV-321

Header - Accessibility - Improvements to landmarks #850

Detail: Added role=”banner” to the head tag. Updated aria-label=”main navigation” to aria-label=”main” as screen reader would say 'main navigation navigation'. Added aria-label=”top” to the nav tag. Removed role='navigation' from Skip to main.
What was changed: HTML
Internal ticket reference: QOLDEV-328

🟡 Fixes

Aggregation page template - Fix to banner link focus and active states #674

Detail: Links in top banner were turning black on focus. Now link colour will remain white and new outline style will be applied.
What was changed: CSS
Internal ticket reference: QOLDEV-44

Footer - Applied 'click-to-call' on all phone numbers at all screen sizes #942

Detail: Phone number was only linked on mobile view (767px and below) and coded in a way that repeated the number twice in Google search results, confusing users.
What was changed: HTML, CSS
Internal ticket reference: QOLDEV-408

Footer - Correct hierarchy of headings #878

Detail: Hidden H2 added to provide semantic order of headings in the footer.
What was changed: HTML
Internal ticket reference: QOLDEV-63

Buttons - Fix appearance of blue primary button when used inside forms with class of qg-forms-v2 #701

Detail: Was appearing as secondary (outline) button instead of the default primary button.
What was changed: CSS
Documentation: Buttons
Internal ticket reference: QOLDEV-76

Section navigation - Re-instated grey background on hover, fixed alignment of focus outline, fixed focus styles for current page nav item ...

SWE v4.0.13

Released on 24 Aug 2022

🟢 New

Loading spinner component
Detail: A CSS-only loading spinner component for content areas and buttons.
What was changed: HTML, CSS
Documentation: Loading spinner, Button with a loading spinner
Internal ticket reference: QOL-7591

🔵 Improvements

Header with a minimised global search field
Detail: For pages with multiple search fields, there's an option to minimise the global search field.
What was changed: HTML, CSS, JS
Documentation: Header with a minimised global search field
Internal ticket reference: QOL-8459

Default	Minimised

Breadcrumbs on desktop will fill the full width of the content area, before wrapping to another line
Detail: Removed the max-width and the transition animation as it requires a width, and isn't needed.
What was changed: HTML, CSS
Internal ticket reference: QOL-8647

Multi select (Form.io) design and user experience improvements
Detail: Increased font-size, more accessible use of colour, added focus styles.
What was changed: HTML, CSS, JS
Internal ticket reference: QOL-8843

Before	After

🟡 Fixes

Promotional banner - Left align the buttons used within
What was changed: CSS
Internal ticket reference: QOL-8766

Cards - Left and right padding added at medium breakpoint and lower (≥768px)
What was changed: CSS
Internal ticket reference: QOL-9076

Before	After

Typography - Changed the pink colour used for code text to have a WCAG AA compliant contrast ratio of 4.72:1
What was changed: CSS
Internal ticket reference: QOL-9154

Aside - Ensure images are responsive and don't overflow
What was changed: CSS
Internal ticket reference: QOL-8822

Deprecation notice

Images component
It's recommended to stop using the classes qg-cut-in/qg-cut-in-alt and figure-credits, and replace existing instances with qg-fig and figure-cc respectively.

Thanks to all who contributed to this release.

v4.0.12

Released on 28 Apr 2022

🟢 New

Video embed component
Detail: This component can be used to embed videos into your content from sources like YouTube and Vimeo.
What was changed: HTML, styles
Ticket reference: QOL-8600

🔵 Improvements

Bottom margin added to alert component when used on aggregation page template
Detail: By default an alert appearing on aggregation page now has a 2em bottom margin.
What was changed: HTML, styles
Ticket reference: QOL-8320

Improved form styles
Detail: Updated form styling as seen on Form.io forms is now available by using the class .qg-forms-v2. The class needs to be added to the parent element e.g. <form class="qg-forms-v2"></form>. For radio buttons and checkboxes, add classes qg-forms-v2__radio and qg-forms-v2__checkbox to the radio or checkbox container.
What was changed: HTML, styles
Ticket reference: QOL-8391

Old (v1)	New (v2)

Less padding in promotional banner component when viewed on smaller screens
Detail: Used a media query to prevent the unnecessary padding.
What was changed: Styles
Ticket reference: QOL-8615

Documentation for Google reCAPTCHA added to the forms component
Detail: Forms documentation now includes Google reCAPTCHA example and implementation guidance.
What was changed: HTML, scripts
Ticket reference: QOL-8398

Documentation added for promotional banner component
Detail: Documentation now includes a promotional banner component example and implementation guidance.
What was changed: HTML, scripts
Ticket reference: QOL-8676

🟡 Fixes

Fix alignment of icon and paragraph in alert component when used as a full-width page alert
Detail: Top margin of content inside alert component was set to 0.
What was changed: Styles
Ticket reference: QOL-8630

Before	After

Fix expand icon size in image component when sitting in an aside
Detail: Expand icon was filling full width of parent container, has now been fixed.
What was changed: Styles
Ticket reference: QOL-8674

Before	After

Fix alignment of second column in the promotional banner component
Detail: Buttons in this second column will now left align precisely.
What was changed: Styles
Ticket reference: QOL-8616

Thanks to all who contributed to this release.

Full Changelog: qld-gov-au/qg-web-template@4.0.11...v4.0.12

v4.0.11

🟢 New

View images at larger size, in full screen
Detail: A ‘view larger image’ option is now available for images to display them in a full screen lightbox.
What was changed: Scripts, styles, HTML
Ticket reference: QOL-8396

Print page content feature
Detail: A 'print' link for users to quickly and easily print single or multiple pages of content.
What was changed: Scripts, styles
Ticket reference: QOL-7980

🔵 Improvements

Documentation for tables component
Detail: The tables component now has improved implementation documentation.
What was changed: HTML
Ticket reference: QOL-7774

Update Facebook feed to the latest embed script
Detail: The official way to include a Facebook feed changed, so updated accordingly in the SWE.
What was changed: Scripts
Ticket reference: QOL-8448

Update Font Awesome to use <span> instead of <i>
Detail: This ensures compliance with WCAG 2.0 (level AA).
What was changed: HTML, styles
Ticket reference: QOL-8453

Add disabled state to radio buttons and checkboxes
Detail: Disabled state for existing form elements is now visually indicated/obvious.
What was changed: Styles
Ticket reference: QOL-7764

🟡 Fixes

Enable anchor/direct link to open an accordion panel via title and id attribute
Detail: Fixed and added a function to open an accordion panel with both a title and an id.
What was changed: Scripts
Ticket reference: DC-26939

Fix broken link in referencing AGLS metadata terms
Detail: Replaced http://www.agls.gov.au/agls/terms/ with https://agls.gov.au/documents/aglsterms/.
What was changed: HTML
Ticket reference: QOL-8446

Prevent telephone number links from wrapping across lines
Detail: Used white-space css property to stop all telephone number links wrapping.
What was changed: Styles
Ticket reference: QOL-8322

Before	After

Thanks to all who contributed to this release.

v4.0.10

Description of change	Images	Styles	Scripts	Includes	Template
[QOL-7345] Mobile breadcrumb fix - On mobile, a [Previous page] breadcrumb that has a long character length is not breaking to the next line, extending the horizontal scroll of the page. Breadcrumb overflow (at a word level) should break onto the next line.	-	Yes	-	-	-
[QOL-7413] Twitter feed should be fixed height and scrollable - Update the Twitter feed so that it is scrollable (and behaves the same way as the Facebook feed).	-	-	-	-	Yes
[QOL-7755] Update jQuery in SWE - Updated to 3.6.0	-	-	Yes	-	-
[QOL-8019] Global search field border radius - On the global search field, the top-right and bottom-right radius is 0px instead of 4px.	-	Yes	-	-	-
[QOL-7763] Aggregation pages Mobile banner bg colour to be white	-	Yes	-	-	-
[QOL-7954] Create version specific header styles and footer script templates - Added templates to lock in the scripts and styles versions instead of 'latest'	-	-	Yes	-	Yes

v4.0.9

Description of change	Images	Styles	Scripts	Includes	Template
[QOL-7852] Search results page model updates	-	Yes	Yes	-	-
[QOL-8182] Search page model - remove links from related search tags (change in Matrix REST resource)	-	-	-	-	-
[QOL-8183] Fix footer contact details spacing issue in 'No location template'.	-	-	-	-	Yes
[QOL-8077] Fix extra apostrophe displayed within quotes (change in Matrix REST resource)	-	-	-	-	-
[QOL-7763] New Promotional banner component to Aggregation page	-	Yes	-	-	Yes
[QOL-7657, QOL-7654, QOL-7661, QOL-7651, QOL-7650] Service finder page updates to use SWE page model	-	Yes	Yes	-	Yes

v4.0.8

Description of change	Images	Styles	Scripts	Includes	Template
DC-23194 Recaptcha Bug Fix: Recaptcha V2 invalid key error fix	-	-	Yes	-	-

v4.0.7

Description of change	Images	Styles	Scripts	Includes	Template
QOL-7757 Section navigation: The removal of interactivity from an already selected menu item	-	Yes	-	-	-
QOL-7852 Accordion component: Accessibility and style improvements to the Accordion component. Doco: https://qld-gov-au.github.io/web-template-release/components/accordion.html	-	Yes	-	-	-
DC-19850 Accordion component: Improved Google Analytics tracking for Accordion component	-	-	Yes	-	-
QOL-7771 Contact Us (in the footer): A minor update to the layout to visually group labels and phone numbers.	-	Yes	-	-	Yes
QOL-7082 A new Inpage nav component added to the SWE library, which can be used to help users scan a page and navigate to different sections of a page. Doco: https://qld-gov-au.github.io/web-template-release/components/inpage-nav.html	-	Yes	-	-	Yes
QOL-7763 Recaptcha should not be enabled on all pages until a form requests it	-	-	Yes	-	-
QOL-7417 Global search (featured results): Colour contract improvements on hyperlinks	-	Yes	-	-	-
QOL-7490 Alerts component: Additional spacing between Alerts	-	Yes	-	-	-