SWE v4.4.0

Released on 23 Jan 2024
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 res...

SWE v4.3.0

Released on 31 Aug 2023
To apply the latest changes to your templates install or update to web-template-release@latest.

🟢 New

Footer - Cultural acknowledgement #1079

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

🔵 Improvements

Table - Option to remove zebra-stripes from rows #1028

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 #993

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 #980

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 #982, #997, #1006

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

Before	After

Cards - Fix to background colour of light-theme #983

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 horizontally align icons #978, #1082

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 #1078

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 #994

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

Before	After

Alert - A fix to remove the text underline on any button contained in the component #989

Detail: Within the alert component, button text was incorrectly showing an underline, it's now aligned with the global button style.
What was changed: CSS
Documentation: Alert, Button
Internal ticket reference: QOLDEV-450

SWE v4.2.3

Released on 17 August 2023

SWE 4.2.3 is a patch release to support a Funnelback Search upgrade from V15 to V16.

The patch updates Funnelback references throughout SWE templates:

• Collection name values have been changed, from qld-gov to qgov~sp-search
• Search form URL's and API endpoints have been changed, from https://find.search.qld.gov.au/ to https://discover.search.qld.gov.au/
• Javascript handling of search results has been updated to support minor restructures in Funnelback data
• SWE provides a console message on applications as a reminder to update legacy references (if required).

SWE v4.2.2

Released on 13 June 2023

SWE 4.2.2 is a patch release to fix some bugs introduced in the previous release.

• Improved cross browser support for link styling - accordions, page alerts and visited links
• Fix minor layout bugs for cards and carousel buttons
• Fix breadcrumb rendering for viewports less than 992px

SWE v4.2.1

Released on 31 May 2023

🔵 Improvements

Checkbox and Radio - Introduced a custom design across our supported browsers for visual consistency #734, #757, #762, #908, #911, #935

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...

SWE v4.1.0

Released on 2 Mar 2023

🔵 Improvements

Improvement: Hyperlinks - design and states

Detail: Over the next three single website experience (SWE) releases (4.1.0 - 4.3.0) we will be improving the look and behaviour of all hyperlink components, such as text links, buttons, navigation, breadcrumbs etc. across all of their states (default, hover, focus, active). View the full list of components and their updated designs on Figma. The hyperlinks improvement updates will span over multiple release tasks.

The result will be an improvement to accessibility for all affected components and will introduce consistency in behaviour and design for all SWE hyperlink components, now and in the future.

Documentation: Read more details about the hyperlink improvements research and rationale on the hyperlink improvement project design files on Figma.

Hyperlink improvement tasks as part of this release

• Hyperlinks - design and states at global level - see pull requests #506, #558, #560, #658, #659, #661, #723, #729, #744, #745, #746, #749, #750, #751, #752, #755, #756, #767, #772
  Detail: This task applies the updated hyperlink designs and behaviours at a global level, updating most components and states. Please note that these global changes will not seamlessly update all hyperlink components so further targeted work in following SWE releases will happen to ensure that the updated hyperlink designs and behaviours are completely applied to all SWE components.
  What was changed: CSS
  Documentation: Links
  Internal ticket reference: QOLDEV-28

• Hyperlinks - landing page widgets - see pull request #654
  Detail: Applying the hyperlink designs and behaviours at a global level will not update widgets on the qld.gov.au landing page such as 'have your say'. This task ensures that the updated hyperlink designs and behaviours are completely applied to widgets on the qld.gov.au landing page.
  What was changed: CSS
  Internal ticket reference: QOLDEV-38

• Hyperlinks - Aside component - Visited state for in-text links - see pull request #705
  Detail: Applying the hyperlink designs and behaviours at a global level will not update the visited state for in-text links within the aside component. This task ensures that the updated hyperlink designs and behaviours are completely applied to the aside component.
  What was changed: CSS
  Internal ticket reference: QOLDEV-40

• Hyperlinks - Content pages - Visited state for in-text links - see pull requests #657, #675
  Detail: Applying the hyperlink designs and behaviours at a global level will not update the visited state for in-text links within the content page model. This task ensures that the updated hyperlink designs and behaviours are completely applied to the content page model.
  What was changed: CSS
  Internal ticket reference: QOLDEV-41

Improvement: Spacing between list items - see pull requests #679, #662, #655

Detail: Vertical spacing has been added between each item in a list. Adding spaces between list items visually separates each item from each other and not appear as a large paragraph. This update supports accessibility by improving content readability.
What was changed: CSS, HTML
Documentation: Lists
Internal ticket reference: QOLDEV-27

Before	After

Improvement: Increase line height for h3, h4, h5, h6 - see pull requests #750 and #806

Detail: To accommodate updated hyperlink styles and improve readability the default line-height of headings was increased to 1.3 (applying to h1 and h2), a line-height of 1.4 was specified for h3 and h4, and a line-height of 1.5 was specified for h5 and h6.
What was changed: CSS
Documentation: Headings
Internal ticket reference: QOLDEV-260

🟡 Fixes

Accessibility: Focus and active state for mobile version of topic index and franchise landing page do not meet contrast requirements - see pull request #721

Detail: On the mobile displays for the franchise landing page and topic index page models, contrast for the text on navigational components whilst in the focus and active states did not meet minimum accessibility requirements. This task addresses this issue, improving accessibility for mobile users navigating with accessibility support tools.
What was changed: CSS
Documentation: Franchise landing page, Topic index page
Internal ticket reference: QOLDEV-29

Before	After

Quick exit sticky banner disappears when scrolled halfway down page - see pull request #135

Detail: The purpose of the quick exit sticky banner is to help users exit sensitive content quickly. There was a bug with this banner where it would disappear when a user had scrolled part way down a page. This fix ensures that the quick exit sticky banner is visible at all times.
What was changed: CSS
Documentation: Quick exit
Internal ticket reference: QOLDEV-30

Hide global alert banner from displaying when the page is printed - see pull request #509

Detail: Used the '@media print' CSS rule to remove the global alert banner from the SWE print stylesheet.
What was changed: CSS
Internal ticket reference: QOLDEV-31

Video component - change use of <i> to <span> for CC icon - see pull request #544

Detail: This is more semantically correct and prevents the CC icon being flagged in accessibility checking tools. This change was initially introduced in v4.0.11 (#391).
What was changed: HTML, CSS
Documentation: Iconography
Internal ticket reference: QOLDEV-32

qg-forms-v2 heading sizes to match standard content heading sizes - see pull requests #613, #686

Detail: Previously all qg-forms-v2 form headings were the same size (20px). With this update headings size are now consistent with standard content heading sizes.
What was changed: CSS
Internal ticket reference: QOLDEV-33

Thanks to all who contributed to this release.

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 - The pink font colour used for code examples now has 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.

SWE 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, CSS
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, CSS
Ticket reference: QOL-8320

Improved form styles

Detail: Updated form styling as seen on Form.io forms is now available by adding the class .qg-forms-v2 to the <form> element. For radio buttons and checkboxes add the class qg-forms-v2__radio or qg-forms-v2__checkbox to the radio or checkbox container.
What was changed: HTML, CSS
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: CSS
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: CSS
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: CSS
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: CSS
Ticket reference: QOL-8616

Thanks to all who contributed to this release.

Full Changelog: 4.0.11...v4.0.12

SWE v4.0.11

Released on 3 Mar 2022

🟢 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, CSS, 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, CSS
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: It's semantically incorrect to use <i> tag for presentation/decorative elements. Also prevents icons from being flagged in accessibility checking tools.
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: CSS
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: CSS
Ticket reference: QOL-8322

Before	After

Thanks to all who contributed to this release.

Full Changelog: 4.0.10...4.0.11

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

Full Changelog: v4.0.9...4.0.10