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