@ons/design-system 70.0.17 → 72.0.0

package/components/footer/example-footer-with-multiple-logos.njk

@@ -0,0 +1,172 @@
+---
+'fullWidth': true
+---
+
+{% from "components/footer/_macro.njk" import onsFooter %}
+{{
+    onsFooter({
+        "cols": [
+            {
+                "title": 'Business surveys',
+                "itemsList": [
+                    {
+                        "text": 'About our surveys',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Lists of all surveys',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Respondent Charter',
+                        "url": '#0'
+                    }
+                ]
+            },
+            {
+                "title": 'About ONS',
+                "itemsList": [
+                    {
+                        "text": 'What we do',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Transparency and governance',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Contact us',
+                        "url": '#0'
+                    }
+                ]
+            },
+            {
+                "title": 'Statistics',
+                "itemsList": [
+                    {
+                        "text": 'UK Statistics Authority',
+                        "external": true,
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Release calendar',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'News',
+                        "url": '#0'
+                    }
+                ]
+            }
+        ],
+        "legal": [
+            {
+                "itemsList": [
+                    {
+                        "text": 'Cookies',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Accessibility statement',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Privacy and data protection',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Terms and conditions',
+                        "url": '#0'
+                    }
+                ]
+            }
+        ],
+        "footerLogo": {
+            "logos": {
+                "logo2": {
+                    "logoImage": '<svg xmlns:xlink="http://www.w3.org/1999/xlink" class="ons-icon--logo ons-icon--logo--nisra" xmlns="http://www.w3.org/2000/svg" width="170" height="56" viewBox="0 1 170 54" aria-labelledby="footer-logo-alt"><title id="footer-logo-alt">NISRA - Northern Ireland Statistics and Research Agency</title><g class="ons-icon--logo__group" fill="#222222"><path d="M0,39.3c2.7,4.7,6.1,8.1,10.8,10.8c4.6,2.7,9.7,4,14.7,4c7,0,13.8-2.5,19.2-7.1c0.3-0.3,0.6-0.5,0.9-0.8 c2.1-2,3.9-4.2,5.5-6.9l-15.2-8.8l-1.2-0.7l-8.6-4.9l-0.6-0.4L25,24.8L6.4,35.6l-1.1,0.6L0,39.3L0,39.3z" fill="#222222"></path></g><g class="ons-icon--logo__group" fill="#222222"><path d="M36.4,7.2c-0.4-0.1-0.8-0.3-1.2-0.4c-2.9-0.9-5.9-1.4-9.1-1.4v18.1l9.1,5.3l1.2,0.7l15.2,8.8l1,0.6l-0.6,1 c-1.5,2.6-3.3,4.9-5.4,6.9l5,2.9c2.7-4.7,3.9-9.3,3.9-14.7C55.6,22.2,47.6,11.4,36.4,7.2L36.4,7.2z" fill="#222222"></path></g><g class="ons-icon--logo__group" fill="#222222"><path d="M6.2,34.4L25,23.5V4.2h1.2c3.1,0,6.2,0.5,9.1,1.4V0c-5.4,0-10,1.2-14.7,4C9.5,10.3,4.2,22.6,6.2,34.4z" fill="#222222"></path></g><g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#222222"><path d="M94.5,48.4l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5s0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1 c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2 c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C95.6,49,95.2,48.5,94.5,48.4z M91.2,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4 c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H91.2z M88.3,47.7c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C88.1,48.2,88.2,48,88.3,47.7z M148.6,49.6l-1.1-3h-1.1l1.6,4.3l0.1,0.3c0,0.1-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.1-1,0.1v0.8h0.6c0.4,0,0.9-0.1,1.2-1l1.8-5.2
+                        h-0.8L148.6,49.6z M100.4,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
+                        c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H100.4z M97.5,47.7c0.2-0.3,0.5-0.4,0.8-0.4
+                        c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C97.3,48.2,97.4,48,97.5,47.7z M144.4,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
+                        c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
+                        c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C143.6,47.9,143.8,47.4,144.4,47.4z M67.1,48.2L67.1,48.2c-0.1-0.6-0.1-0.9-0.6-1.3
+                        c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l1,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
+                        c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V48.2z M64.8,50.5
+                        c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8s0.6-0.1,1.2-0.1v0.4H66C66,49.7,65.8,50.5,64.8,50.5z M76.2,47.2
+                        c-0.3-0.7-0.8-0.8-1.2-0.8c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v0.9h1V45h-1V47.2z M76.1,49.3
+                        c0,0.7-0.5,1.2-1,1.2c-0.9,0-0.9-1.2-0.9-1.5c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8V49.3z M70.5,46.6
+                        c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1v-2.1c0-1.6,0.8-1.6,1-1.6c0.2,0,0.7,0,0.7,1.1v2.7h1v-2.7C72,48,72,46.6,70.5,46.6z
+                        M105.3,48.2c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7
+                        c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1
+                        c0-0.2-0.1-0.5-0.1-0.9V48.2z M103,50.5c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
+                        C104.2,49.7,104,50.5,103,50.5z M86.1,46.9c0-0.6-0.2-1-0.6-1.3C85.2,45.2,84.8,45,84,45h-2.7v6.2h1.1v-2.5H84l1,2.5h1.1L85,48.5
+                        C85.3,48.4,86.1,48,86.1,46.9z M83.8,47.8h-1.4v-1.9h1.5c0.8,0,1.1,0.4,1.1,0.9C85,47.6,84.4,47.8,83.8,47.8z M130.8,46
+                        c-0.2,0.1-0.4,0.4-0.4,0.7c-0.3,0-0.5-0.1-0.9-0.1c-1.6,0-1.9,0.9-1.9,1.4c0,0.6,0.4,0.9,0.6,1c-0.2,0.1-0.7,0.4-0.7,1
+                        c0,0.3,0.2,0.5,0.4,0.7c-0.3,0.2-0.7,0.4-0.7,0.9c0,1,1,1.2,2.2,1.2c1.9,0,2.4-0.9,2.4-1.5c0-0.6-0.4-1.2-1.6-1.2H129
+                        c-0.6,0-0.7-0.3-0.7-0.5c0-0.3,0.2-0.4,0.3-0.4c0.3,0.1,0.5,0.1,0.9,0.1c1.1,0,1.9-0.6,1.9-1.4c0-0.5-0.3-0.8-0.5-1
+                        c0.1-0.3,0.3-0.4,0.7-0.4h0.3v-0.7h-0.4C131.2,45.8,131,45.9,130.8,46z M128.4,50.9c0.3,0.1,0.8,0.1,1.1,0.1h0.7
+                        c0.3,0,0.7,0.1,0.7,0.5c0,0.5-0.7,0.6-1.2,0.6c-0.2,0-0.5,0-0.9-0.1c-0.3-0.1-0.6-0.4-0.6-0.7C128.2,51.2,128.3,51.1,128.4,50.9z
+                        M130,48.5c-0.1,0.1-0.4,0.2-0.6,0.2c-0.6,0-0.8-0.4-0.8-0.7s0.2-0.8,0.9-0.8s0.8,0.4,0.8,0.7C130.3,48.1,130.3,48.3,130,48.5z
+                        M136.5,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
+                        c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H136.5z M133.3,48.4c0-0.2,0.1-0.4,0.2-0.7
+                        c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H133.3z M111.6,47.4c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
+                        c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
+                        c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C110.8,47.9,111,47.4,111.6,47.4z M139.7,46.6c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9v4.6h1.1
+                        v-2.1c0-1.6,0.8-1.6,1-1.6s0.7,0,0.7,1.1v2.7h1v-2.7C141.2,48,141.2,46.6,139.7,46.6z M116.4,46.5c-0.9,0-1.2,0.7-1.3,1V45h-1v6.2
+                        h1V49c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1v2.8h1v-2.9C117.8,47,117.4,46.5,116.4,46.5z M123.4,45
+                        l-2.1,6.2h1l0.5-1.5h2.4l0.5,1.5h1.2l-2.1-6.2H123.4z M123.1,48.8L124,46l0.9,2.8H123.1z M107.5,47.6v-1.1h-0.9v4.7h1v-1.9
+                        c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1C107.9,46.4,107.6,47.3,107.5,47.6z M163.7,38.2c0.4,0,0.8,0.2,0.8,0.9l0.9-0.1
+                        c-0.1-0.4-0.3-1.6-1.8-1.6c-1.3,0-2,1.1-2,2.4c0,1,0.5,2.4,1.9,2.4c1.5,0,1.8-1.3,1.9-1.7l-0.9-0.2c-0.1,0.5-0.4,0.9-0.9,0.9
+                        c-0.9,0-0.9-1.2-0.9-1.4s0-0.6,0.1-0.9C162.9,38.7,163.1,38.2,163.7,38.2z M159.5,42h1v-4.6h-1V42z M139.1,41.8
+                        c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2h-0.6
+                        v0.8h0.6v2.4C138.8,41.2,138.8,41.5,139.1,41.8z M67.1,40.2c-0.2-0.4-0.4-0.7-0.4-0.7l-2.2-3.6h-1.2V42h0.9v-4.6
+                        c0.1,0.1,0.3,0.6,0.3,0.7l2.4,3.9h1v-6.2h-0.8V40.2z M157.6,40.5v-2.2h0.9v-0.8h-0.9v-1.3l-0.8,0.1l-0.1,1.2H156v0.8h0.6v2.4
+                        c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.3C157.8,41.2,157.6,41.1,157.6,40.5z M91,37.4V42h1v-1.8
+                        c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H91z M129.1,42v-6.2h-1V38c-0.3-0.7-0.8-0.8-1.2-0.8
+                        c-1.4,0-1.8,1.5-1.8,2.4c0,0.5,0.1,2.4,1.7,2.4c0.9,0,1.2-0.7,1.3-1v1H129.1z M127.1,41.3c-0.9,0-0.9-1.2-0.9-1.5
+                        c0-0.4,0-1.6,1-1.6c0.2,0,0.5,0.1,0.7,0.3c0.2,0.3,0.2,0.4,0.2,0.8v0.8C128.1,40.8,127.6,41.3,127.1,41.3z M103.3,42v-6.2h-1.1V42
+                        H103.3z M111.8,39.9c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
+                        c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H111.8z M108.6,39.2c0-0.2,0.1-0.4,0.2-0.7
+                        c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7H108.6z M74.2,37.4V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4
+                        c0.3-0.4,0.7-0.4,1-0.4v-1.1c-1,0-1.3,0.9-1.4,1.2v-1.1H74.2z M159.5,36.9h1v-1.1h-1V36.9z M149.8,42h1v-4.6h-1V42z M146.9,40.7
+                        c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4c0.2,0,0.5,0,0.7-0.1v-0.9h-0.4c-0.5,0-0.7-0.1-0.7-0.7v-2.2h0.9v-0.8h-0.9v-1.3
+                        l-0.8,0.1l-0.1,1.2h-0.6v0.8h0.6V40.7z M71.1,37.3c-1.4,0-2.1,1.1-2.1,2.3c0,1,0.6,2.4,2.1,2.4c1.1,0.1,2.1-0.7,2.1-2.3
+                        C73.2,38.5,72.5,37.3,71.1,37.3z M71.1,41.3c-1,0-1-1.3-1-1.5c0-0.7,0.2-1.5,1-1.5c0.8-0.1,1,0.6,1,1.4
+                        C72.1,40.2,72,41.3,71.1,41.3z M144.3,41.1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39h0c0-0.6,0-0.9-0.5-1.3
+                        c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3c-1,0-3.1,0-3.1,1.6
+                        c0,0.7,0.5,1.4,1.5,1.4C143.9,42.1,144.2,41.4,144.3,41.1z M142.4,40.6c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1
+                        c0,0.4-0.2,1.2-1.2,1.2C142.5,41.3,142.4,40.8,142.4,40.6z M112.8,42h1v-6.2h-1V42z M136,38.4l-1-0.3c-0.3-0.1-0.9-0.3-0.9-0.7
+                        c0-0.3,0.2-0.8,1.1-0.8s1.1,0.5,1.1,0.7l1.1-0.3c-0.1-0.2-0.1-0.5-0.5-0.8c-0.5-0.4-1.1-0.5-1.7-0.5c-1.2,0-2.2,0.7-2.2,1.8
+                        c0,0.8,0.4,1.4,1.3,1.6l1.4,0.4c0.3,0.1,0.8,0.2,0.8,0.8c0,0.3-0.2,0.8-1.2,0.8c-0.2,0-0.5,0-0.8-0.1c-0.6-0.2-0.7-0.6-0.7-0.8
+                        l-1.2,0.3c0.1,0.3,0.2,0.7,0.6,1c0.5,0.4,1.2,0.6,1.9,0.6c1.4,0,2.5-0.7,2.5-1.9C137.6,38.9,136.5,38.6,136,38.4z M118.9,39
+                        c0-0.6,0-0.9-0.5-1.3c-0.3-0.3-0.9-0.3-1.4-0.3c-0.9,0-1.9,0.3-2.1,1.3l0.9,0.1c0-0.2,0.2-0.7,1.1-0.7c0.5,0,1,0.1,1,0.7v0.3
+                        c-1,0-3.1,0-3.1,1.6c0,0.7,0.5,1.4,1.5,1.4c1.1,0,1.4-0.7,1.5-1c0,0.4,0,0.6,0.2,0.9h1c0-0.2-0.1-0.5-0.1-0.9V39z M116.7,41.3
+                        c-0.7,0-0.8-0.5-0.8-0.7c0-0.6,0.5-0.7,0.7-0.8c0.2-0.1,0.6-0.1,1.2-0.1v0.4h0.1C117.9,40.5,117.7,41.3,116.7,41.3z M122.2,38.3
+                        c0.2,0,0.7,0,0.7,1.1V42h1v-2.7c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1C121.2,38.3,122,38.3,122.2,38.3z
+                        M107,37.3c-1,0-1.3,0.9-1.4,1.2v-1.1h-0.9V42h1v-1.8c0-0.7,0.2-1.2,0.3-1.4c0.3-0.4,0.7-0.4,1-0.4V37.3z M149.8,36.9h1v-1.1h-1
+                        V36.9z M79,40.5v-2.2h0.9v-0.8H79v-1.3l-0.8,0.1L78,37.4h-0.6v0.8H78v2.4c0,0.5,0,0.8,0.3,1.1c0.2,0.2,0.6,0.4,1,0.4
+                        c0.2,0,0.5,0,0.7-0.1v-0.8h-0.3C79.2,41.2,79,41.1,79,40.5z M154.4,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5
+                        c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2
+                        c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5
+                        C155.5,39.9,155.1,39.4,154.4,39.3z M81.9,39.8c0-0.5,0-0.8,0.2-1.2c0.1-0.3,0.5-0.5,0.8-0.5c0.7,0,0.7,0.7,0.7,1.1V42h1v-2.9
+                        c0-1.3-0.4-1.8-1.4-1.8c-0.9,0-1.2,0.7-1.3,1v-2.4h-1V42h1V39.8z M89.8,40.8l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7
+                        c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1h3.1c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4
+                        C88.7,42.2,89.5,41.8,89.8,40.8z M87,38.5c0.2-0.3,0.5-0.4,0.8-0.4c0.3,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2
+                        C86.8,39,86.9,38.8,87,38.5z M168.5,39.3l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5c0-0.3,0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2
+                        c-0.3-0.9-1.2-1.1-1.8-1.1c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6
+                        c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C169.6,39.9,169.2,39.4,168.5,39.3z M97,39.4V42h1v-2.7
+                        c0-0.6,0-2-1.5-2c-0.9,0-1.2,0.8-1.4,1.1v-1.1h-0.9V42h1.1v-2.1c0-1.6,0.8-1.6,1-1.6C96.5,38.3,97,38.3,97,39.4z M151.6,24.8H162
+                        l2.2,6.5h5.2l-9.1-27.2h-6l-9,27.2h4.2L151.6,24.8z M156.8,8.8l4,12.1h-8L156.8,8.8z M108,27.7c-0.9,0-2-0.1-3.4-0.5
+                        c-2.4-0.8-2.9-2.5-3.2-3.5l-4.7,1c0.4,1.3,0.9,2.9,2.7,4.4c2.2,1.8,5.1,2.6,8.4,2.6c6.2,0,10.8-3.1,10.8-8.5c0-5.8-4.7-7.1-7-7.7
+                        l-4.6-1.1c-1.4-0.4-3.8-1.1-3.8-3.3c0-1.4,0.9-3.4,4.7-3.4c3.9,0,4.7,2.2,5,3.1l4.6-1.2c-0.2-0.9-0.7-2.2-2.3-3.5
+                        c-2.1-1.7-4.8-2.4-7.5-2.4c-5.5,0-9.6,3-9.6,8.1c0,3.5,1.9,6.2,5.9,7.3l6.1,1.5c1.2,0.3,3.3,1,3.3,3.5
+                        C113.4,25.3,112.5,27.7,108,27.7z M127.3,20.1h6.9l4.2,11.2h5.2v-0.1l-4.8-12c1.4-0.6,4.9-2.1,4.9-7.2c0-2.8-1.1-4.6-2.4-5.9
+                        c-1.7-1.5-3.7-2.1-7.1-2.1h-11.8v27.2h4.9V20.1z M127.3,8h6.5c3.5,0,4.8,2,4.8,4c0,3.4-2.8,4.2-5.2,4.2h-6.1V8z M66.9,10.9
+                        c0.2,0.5,1.2,2.6,1.5,3L79,31.2h4.5V4.1h-3.9v19.2c-0.9-1.8-1.6-3-1.7-3.2l-9.5-16H63v27.2h3.9V10.9z M93.9,4.1H89v27.2h4.9V4.1z" fill="#222222"></path></g></svg>',
+                "logoUrl": "#"
+                }
+            }
+        },
+        "oglLink": true
+    })
+}}

package/components/footer/example-footer.njk

@@ -81,6 +81,6 @@
                 ]
             }
         ],
-        "OGLLink": true
+        "oglLink": true
     })
 }}

package/components/header/_header.scss

@@ -16,12 +16,12 @@
         row-gap: 0.5rem;
 
         @include mq(xs) {
-            padding: 0.75rem 0;
+            padding: 0.875rem 0;
         }
     }
     &__main {
         background: var(--ons-color-header);
-        padding: 0.56rem 0;
+        padding: 0.5rem 0;
 
         &--border {
             border-bottom: 3px solid var(--ons-color-header);
@@ -31,13 +31,13 @@
     }
     &__title {
         @extend .ons-u-fs-r--b;
-        @extend .ons-u-fs-xl\@xxs;
+        @extend .ons-u-fs-xl\@2xs;
 
         color: var(--ons-color-white);
 
         @include mq(m) {
             margin-bottom: 1rem;
-            margin-top: 0.8rem;
+            margin-top: 1rem;
         }
 
         &-link {
@@ -61,7 +61,7 @@
         margin: 0;
 
         @include mq(m) {
-            margin: 0 0 1.1rem;
+            margin: 0 0 1rem;
         }
     }
     // Modifier - variants
@@ -69,7 +69,7 @@
         .ons-header {
             &__title {
                 @extend .ons-u-fs-m;
-                @extend .ons-u-fs-xxl\@m;
+                @extend .ons-u-fs-2xl\@m;
 
                 margin-bottom: 0;
             }
@@ -151,7 +151,6 @@
     &__org-logo-link,
     &__title-logo-link {
         display: block;
-        font-size: 0;
         &:hover {
             text-decoration: none;
         }
@@ -169,7 +168,7 @@
     }
 
     &__org-logo--large {
-        @include mq(xxs, 454px) {
+        @include mq('2xs', 454px) {
             display: none;
         }
     }
@@ -236,12 +235,6 @@
             }
         }
     }
-    &__lang-adjustment {
-        @include mq(l) {
-            margin-right: 21rem;
-            margin-top: -5px !important;
-        }
-    }
 
     .ons-btn {
         top: 0 !important;

package/components/header/_macro.njk

@@ -6,11 +6,11 @@
     {% set titleTag = "h1" if params.titleAsH1 else "div" %}
     {% set openingTag = "<" + titleTag %}
     {% set closingTag = "</" + titleTag + ">" %}
-    {% set currentLanguageISOCode = "en" %}
+    {% set currentLanguageIsoCode = "en" %}
 
     {% if params.language and params.language.languages %}
         {% set currentLanguage = params.language.languages | selectattr("current") | first %}
-        {% set currentLanguageISOCode = currentLanguage.ISOCode %}
+        {% set currentLanguageIsoCode = currentLanguage.isoCode %}
     {% endif %}
 
     <header
@@ -19,7 +19,7 @@
     >
         {{
             onsBrowserBanner({
-                "lang": currentLanguageISOCode,
+                "lang": currentLanguageIsoCode,
                 "wide": params.wide,
                 "fullWidth": params.fullWidth
             })
@@ -39,7 +39,7 @@
         <div class="ons-header__top">
             <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                 <div
-                    class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center{{ ' '+ params.mastheadLogo.classes if params.mastheadLogo.classes }}{{ ' ons-grid--no-wrap ons-grid--gutterless' if not params.mastheadLogo.multipleLogos }}"
+                    class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center{{ ' '+ params.mastheadLogo.classes if params.mastheadLogo.classes }}{{ ' ons-grid-flex--no-wrap ons-grid--gutterless' if not params.mastheadLogo.multipleLogos }}"
                 >
                     <div class="ons-grid__col ons-col-auto">
                         {%- if not params.mastheadLogo.multipleLogos -%}
@@ -51,7 +51,7 @@
                                     {% else %}
                                         {{-
                                             onsIcon({
-                                                "iconType": 'ons-logo-' + currentLanguageISOCode,
+                                                "iconType": 'ons-logo-' + currentLanguageIsoCode,
                                                 "altText": 'Office for National Statistics homepage'
                                             })
                                         -}}
@@ -65,7 +65,7 @@
                                     {% else %}
                                         {{-
                                             onsIcon({
-                                                "iconType": 'ons-logo-stacked-' + currentLanguageISOCode,
+                                                "iconType": 'ons-logo-stacked-' + currentLanguageIsoCode,
                                                 "altText": 'Office for National Statistics logo'
                                             })
                                         -}}
@@ -83,19 +83,19 @@
                                 {% set logos = [params.mastheadLogo.multipleLogos.logo1, params.mastheadLogo.multipleLogos.logo2, params.mastheadLogo.multipleLogos.logo3] %}
                                 {% for logo in logos %}
                                     {% set mastheadLogo %}
-                                        {% if logo.logoImage != "ONS Logo" %}
-                                            {{ logo.logoImage | safe }}
+                                        {% if logo.image != "ONS Logo" %}
+                                            {{ logo.image | safe }}
                                         {% else %}
                                             {{-
                                                 onsIcon({
-                                                    "iconType": 'ons-logo-stacked-' + currentLanguageISOCode,
+                                                    "iconType": 'ons-logo-stacked-' + currentLanguageIsoCode,
                                                     "altText": 'Office for National Statistics logo'
                                                 })
                                             -}}
                                         {% endif %}
                                     {% endset %}
-                                    {% if logo.logoURL %}
-                                        <a class="ons-header__org-logo-link" href="{{ logo.logoURL }}">{{ mastheadLogo | safe }}</a>
+                                    {% if logo.url %}
+                                        <a class="ons-header__org-logo-link" href="{{ logo.url }}">{{ mastheadLogo | safe }}</a>
                                     {% else %}
                                         {{ mastheadLogo | safe }}
                                     {% endif %}
@@ -106,7 +106,7 @@
                     {% if params.language or params.serviceLinks %}
                         <div class="ons-header__links ons-grid__col ons-u-ml-auto">
                             {% if params.language %}
-                                <div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks }}">
+                                <div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@2xs@xs' if params.serviceLinks }}">
                                     {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                     {{ onsLanguageSelector(params.language) }}
                                 </div>
@@ -122,7 +122,7 @@
                                     {% set controlVisibility = false %}
                                 {% endif %}
                                 <div
-                                    class="ons-grid__col ons-col-auto{% if controlVisibility == true %}{{ ' ' }}ons-u-d-no@xxs@{{ breakpoint }}{% endif %}"
+                                    class="ons-grid__col ons-col-auto{% if controlVisibility == true %}{{ ' ' }}ons-u-d-no@2xs@{{ breakpoint }}{% endif %}"
                                 >
                                     <nav
                                         class="ons-header-service-nav ons-header-service-nav--main{{ ' ' + params.serviceLinks.classes if params.serviceLinks.classes else '' }}"
@@ -221,14 +221,14 @@
         <div class="ons-header__main">
             <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                 <div
-                    class="ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-grid--gutterless' if not params.button }}"
+                    class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap{{ ' ons-grid--gutterless' if not params.button }}"
                 >
                     <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                         {% if params.titleLogo.large %}
 
                             {% set title %}
                                 <div
-                                    class="ons-header__title-logo ons-header__title-logo--large{{ ' ' + params.titleLogo.classes if params.titleLogo.classes else '' }}{{ ' ons-u-d-no@xxs@s' if params.titleLogo.small }}"
+                                    class="ons-header__title-logo ons-header__title-logo--large{{ ' ' + params.titleLogo.classes if params.titleLogo.classes else '' }}{{ ' ons-u-d-no@2xs@s' if params.titleLogo.small }}"
                                 >
                                     {{ params.titleLogo.large | safe }}
                                 </div>
@@ -274,7 +274,7 @@
                             {{
                                 onsButton({
                                     "text": params.button.text,
-                                    "classes": "ons-u-d-no@xxs@l" if params.navigation else "ons-u-d-no@xxs@m",
+                                    "classes": "ons-u-d-no@2xs@l" if params.navigation else "ons-u-d-no@2xs@m",
                                     "variants": buttonVariant,
                                     "name": params.button.name,
                                     "attributes": params.button.attributes,
@@ -293,11 +293,11 @@
                                 {% else %}
                                     {% set buttonVariant = ["small", "ghost"] %}
                                 {% endif %}
-                                <span class="ons-grid ons-u-d-no@xxs@xs ons-u-ml-no ons-u-d-no@l">
+                                <span class="ons-grid ons-u-d-no@2xs@xs ons-u-ml-no ons-u-d-no@l">
                                     {{
                                         onsButton({
                                             "text": "Search",
-                                            "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
+                                            "classes": "ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search",
                                             "variants": buttonVariant,
                                             "iconType": "search",
                                             "iconPosition": "only",
@@ -315,7 +315,7 @@
                                 {{
                                     onsButton({
                                         "text": params.navigation.toggleNavigationButton.text,
-                                        "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
+                                        "classes": "ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
                                         "variants": buttonVariant,
                                         "attributes": {
                                             "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,

package/components/header/_macro.spec.js

@@ -140,7 +140,7 @@ describe('FOR: Macro: Header', () => {
         });
     });
     describe('GIVEN: Params: multipleLogos', () => {
-        describe('WHEN: logoImage parameter is set to "ONS Logo"', () => {
+        describe('WHEN: image parameter is set to "ONS Logo"', () => {
             const faker = templateFaker();
             const iconsSpy = faker.spy('icon');
 
@@ -149,7 +149,7 @@ describe('FOR: Macro: Header', () => {
                 mastheadLogo: {
                     multipleLogos: {
                         logo1: {
-                            logoImage: 'ONS Logo',
+                            image: 'ONS Logo',
                         },
                     },
                 },
@@ -158,15 +158,15 @@ describe('FOR: Macro: Header', () => {
                 expect(iconsSpy.occurrences[0].iconType).toBe('ons-logo-stacked-en');
             });
         });
-        describe('WHEN: logoURL parameter is set ', () => {
+        describe('WHEN: url parameter is set ', () => {
             const $ = cheerio.load(
                 renderComponent('header', {
                     ...EXAMPLE_HEADER_BASIC,
                     mastheadLogo: {
                         multipleLogos: {
                             logo1: {
-                                logoImage: '<img src="a-logo.svg">',
-                                logoURL: '#0',
+                                image: '<img src="a-logo.svg">',
+                                url: '#0',
                             },
                         },
                     },
@@ -183,13 +183,13 @@ describe('FOR: Macro: Header', () => {
                     mastheadLogo: {
                         multipleLogos: {
                             logo1: {
-                                logoImage: '<img src="a-logo.svg">',
+                                image: '<img src="a-logo.svg">',
                             },
                             logo2: {
-                                logoImage: '<img src="a-second-logo.svg">',
+                                image: '<img src="a-second-logo.svg">',
                             },
                             logo3: {
-                                logoImage: '<img src="a-third-logo.svg">',
+                                image: '<img src="a-third-logo.svg">',
                             },
                         },
                     },
@@ -209,7 +209,7 @@ describe('FOR: Macro: Header', () => {
                         large: '<img src="big-logo.svg">',
                         multipleLogos: {
                             logo1: {
-                                logoImage: '<img src="a-logo.svg">',
+                                image: '<img src="a-logo.svg">',
                             },
                         },
                     },
@@ -329,7 +329,7 @@ describe('FOR: Macro: Header', () => {
             test('THEN: renders button with provided parameters', () => {
                 expect(buttonSpy.occurrences).toContainEqual({
                     text: 'Save and sign out',
-                    classes: 'ons-u-d-no@xxs@m',
+                    classes: 'ons-u-d-no@2xs@m',
                     variants: 'ghost',
                     name: 'button-name',
                     attributes: {
@@ -407,7 +407,7 @@ describe('FOR: Macro: Header', () => {
             faker.renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE);
 
             test('THEN: renders with correct display class on large screen', () => {
-                expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@xxs@m')).toBe(true);
+                expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@2xs@m')).toBe(true);
             });
             test('THEN: renders button on small screen', () => {
                 expect(buttonSpy.occurrences).toContainEqual({
@@ -426,8 +426,8 @@ describe('FOR: Macro: Header', () => {
         describe('WHEN: one item is provided to the itemsList parameter', () => {
             const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_SINGLE));
             test('THEN: renders without multiple link display class on large screen', () => {
-                expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@xxs@m')).toBe(false);
-                expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@xxs@xs')).toBe(false);
+                expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@2xs@m')).toBe(false);
+                expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@2xs@xs')).toBe(false);
             });
             test('THEN: does not render button on small screen', () => {
                 expect($('.ons-js-toggle-services').length).toBe(0);
@@ -515,7 +515,7 @@ describe('FOR: Macro: Header', () => {
                 }),
             );
             test('THEN: renders with correct display class', () => {
-                expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@xxs@xs')).toBe(true);
+                expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@2xs@xs')).toBe(true);
             });
         });
     });
@@ -574,7 +574,7 @@ describe('FOR: Macro: Header', () => {
             test('THEN: renders button to toggle menu on small screen', () => {
                 expect(buttonSpy.occurrences[0]).toEqual({
                     text: 'Menu',
-                    classes: 'ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l',
+                    classes: 'ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l',
                     variants: ['mobile', 'ghost'],
                     attributes: {
                         'aria-label': 'Toggle main menu',
@@ -647,7 +647,7 @@ describe('FOR: Macro: Header', () => {
             test('THEN: renders button to toggle search on small screen', () => {
                 expect(buttonSpy.occurrences[0]).toEqual({
                     text: 'Search',
-                    classes: 'ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search',
+                    classes: 'ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search',
                     variants: ['small', 'ghost'],
                     iconType: 'search',
                     iconPosition: 'only',
@@ -722,7 +722,7 @@ describe('FOR: Macro: Header', () => {
                         autocomplete: 'off',
                         classes: 'ons-input-search ons-input-search--icon',
                         label: {
-                            classes: 'ons-u-pl-l ons-label--white',
+                            classes: 'ons-u-pl-xl ons-label--white',
                             id: 'ons-site-search-label',
                             text: 'label',
                         },

package/components/header/example-header-external-for-surveys.njk

@@ -18,13 +18,13 @@
             "languages": [
                 {
                     "url": '#0',
-                    "ISOCode": 'en',
+                    "isoCode": 'en',
                     "text": 'English',
                     "current": true
                 },
                 {
                     "url": '#0',
-                    "ISOCode": 'cy',
+                    "isoCode": 'cy',
                     "text": 'Cymraeg',
                     "current": false
                 }

package/components/header/example-header-external-welsh.njk

@@ -13,13 +13,13 @@ fullWidth: true
             "languages": [
                 {
                     "url": '#0',
-                    "ISOCode": 'en',
+                    "isoCode": 'en',
                     "text": 'English',
                     "current": false
                 },
                 {
                     "url": '#0',
-                    "ISOCode": 'cy',
+                    "isoCode": 'cy',
                     "text": 'Cymraeg',
                     "current": true
                 }

package/components/header/example-header-external-with-sub-navigation-removed.njk

@@ -42,7 +42,7 @@
             },
             "subNavigation": {
                 "id": 'sub-nav',
-                "overviewURL": '#design-system',
+                "overviewUrl": '#design-system',
                 "overviewText": 'Overview',
                 "ariaLabel": 'Section menu',
                 "currentPath": '#access-codes',

package/components/header/example-header-external-with-sub-navigation.njk

@@ -42,7 +42,7 @@
             },
             "subNavigation": {
                 "id": 'sub-nav',
-                "overviewURL": '#design-system',
+                "overviewUrl": '#design-system',
                 "overviewText": 'Overview',
                 "ariaLabel": 'Section menu',
                 "currentPath": '#access-codes',