@ons/design-system 67.2.0 → 69.0.0

package/components/document-list/example-document-list-downloads.njk

@@ -3,7 +3,7 @@
     "documents": [
         {
             "thumbnail": true,
-            "url": '#',            
+            "url": '#',
             "title": 'Including everyone in Census 2021',
             "metadata": {
                 "type": {
@@ -19,7 +19,7 @@
         },
         {
             "thumbnail": true,
-            "url": '#',            
+            "url": '#',
             "title": 'Community handbook for Census 2021',
             "metadata": {
                 "type": {
@@ -35,7 +35,7 @@
         },
         {
             "thumbnail": true,
-            "url": '#',            
+            "url": '#',
             "title": 'Census 2021 matters to everyone',
             "metadata": {
                 "type": {

package/components/document-list/example-document-list-search-result-featured.njk

@@ -12,7 +12,7 @@
                     "text": 'Topic'
                 }
             },
-            "description": '<p>Figures on <strong class="ons-highlight">crime</strong> levels and trends for England and Wales based primarily on two sets of statistics: the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) and police recorded crime data.</p>
+            "description": '<p>Figures on <mark>crime</mark> levels and trends for England and Wales based primarily on two sets of statistics: the <mark>Crime</mark> Survey for England and Wales (CSEW) and police recorded crime data.</p>
             <p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>'
         }
     ]

package/components/document-list/example-document-list-search-results.njk

@@ -12,7 +12,7 @@
                     "text": 'Topic'
                 }
             },
-            "description": '<p>Figures on <strong class="ons-highlight">crime</strong> levels and trends for England and Wales based primarily on two sets of statistics: the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) and police recorded <strong class="ons-highlight">crime</strong> data.</p>
+            "description": '<p>Figures on <mark>crime</mark> levels and trends for England and Wales based primarily on two sets of statistics: the <mark>Crime</mark> Survey for England and Wales (CSEW) and police recorded <mark>crime</mark> data.</p>
             <p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>'
         },
         {
@@ -29,7 +29,7 @@
                     "short": '18 February 2021'
                 }
             },
-            "description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) data.</p>'
+            "description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <mark>Crime</mark> Survey for England and Wales (CSEW) data.</p>'
         },
         {
             "url": '#0',
@@ -45,7 +45,7 @@
                     "short": '2 December 2019'
                 }
             },
-            "description": '<p>An overview of published data on disability and <strong class="ons-highlight">crime</strong> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>'
+            "description": '<p>An overview of published data on disability and <mark>crime</mark> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>'
         },
         {
             "url": '#0',

package/components/download-resources/download-resources.js

@@ -5,19 +5,19 @@ function Util() {}
   Class manipulation functions
 */
 
-Util.hasClass = function(el, className) {
+Util.hasClass = function (el, className) {
   if (el.classList) return el.classList.contains(className);
   else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
 };
 
-Util.addClass = function(el, className) {
+Util.addClass = function (el, className) {
   let classList = className.split(' ');
   if (el.classList) el.classList.add(classList[0]);
   else if (!Util.hasClass(el, classList[0])) el.className += ' ' + classList[0];
   if (classList.length > 1) Util.addClass(el, classList.slice(1).join(' '));
 };
 
-Util.removeClass = function(el, className) {
+Util.removeClass = function (el, className) {
   let classList = className.split(' ');
   if (el.classList) el.classList.remove(classList[0]);
   else if (Util.hasClass(el, classList[0])) {
@@ -27,12 +27,12 @@ Util.removeClass = function(el, className) {
   if (classList.length > 1) Util.removeClass(el, classList.slice(1).join(' '));
 };
 
-Util.toggleClass = function(el, className, bool) {
+Util.toggleClass = function (el, className, bool) {
   if (bool) Util.addClass(el, className);
   else Util.removeClass(el, className);
 };
 
-Util.setAttributes = function(el, attrs) {
+Util.setAttributes = function (el, attrs) {
   for (let key in attrs) {
     el.setAttribute(key, attrs[key]);
   }
@@ -42,7 +42,7 @@ Util.setAttributes = function(el, attrs) {
   DOM manipulation
 */
 
-Util.getChildrenByClassName = function(el, className) {
+Util.getChildrenByClassName = function (el, className) {
   let childrenByClass = [];
   for (let i = 0; i < el.children.length; i++) {
     if (Util.hasClass(el.children[i], className)) childrenByClass.push(el.children[i]);
@@ -50,7 +50,7 @@ Util.getChildrenByClassName = function(el, className) {
   return childrenByClass;
 };
 
-Util.is = function(elem, selector) {
+Util.is = function (elem, selector) {
   if (selector.nodeType) {
     return elem === selector;
   }
@@ -68,11 +68,11 @@ Util.is = function(elem, selector) {
 };
 
 // Animate height of an element
-Util.setHeight = function(start, to, element, duration, cb) {
+Util.setHeight = function (start, to, element, duration, cb) {
   let change = to - start,
     currentTime = null;
 
-  let animateHeight = function(timestamp) {
+  let animateHeight = function (timestamp) {
     if (!currentTime) currentTime = timestamp;
     let progress = timestamp - currentTime;
     let val = parseInt((progress / duration) * change + start);
@@ -90,14 +90,14 @@ Util.setHeight = function(start, to, element, duration, cb) {
 };
 
 // Smooth Scroll
-Util.scrollTo = function(final, duration, cb, scrollEl) {
+Util.scrollTo = function (final, duration, cb, scrollEl) {
   let element = scrollEl || window;
   let start = element.scrollTop || document.documentElement.scrollTop,
     currentTime = null;
 
   if (!scrollEl) start = window.scrollY || document.documentElement.scrollTop;
 
-  let animateScroll = function(timestamp) {
+  let animateScroll = function (timestamp) {
     if (!currentTime) currentTime = timestamp;
     let progress = timestamp - currentTime;
     if (progress > duration) progress = duration;
@@ -118,7 +118,7 @@ Util.scrollTo = function(final, duration, cb, scrollEl) {
 */
 
 // Move focus to an element
-Util.moveFocus = function(element) {
+Util.moveFocus = function (element) {
   if (!element) element = document.getElementsByTagName('body')[0];
   element.focus();
   if (document.activeElement !== element) {
@@ -128,15 +128,15 @@ Util.moveFocus = function(element) {
 };
 
 // Misc
-Util.getIndexInArray = function(array, el) {
+Util.getIndexInArray = function (array, el) {
   return Array.prototype.indexOf.call(array, el);
 };
 
-Util.cssSupports = function(property, value) {
+Util.cssSupports = function (property, value) {
   if ('CSS' in window) {
     return CSS.supports(property, value);
   } else {
-    let jsProperty = property.replace(/-([a-z])/g, function(g) {
+    let jsProperty = property.replace(/-([a-z])/g, function (g) {
       return g[1].toUpperCase();
     });
     return jsProperty in document.body.style;
@@ -146,7 +146,7 @@ Util.cssSupports = function(property, value) {
 // Merge a set of user options into plugin defaults
 // https://gomakethings.com/vanilla-javascript-version-of-jquery-extend/
 
-Util.extend = function() {
+Util.extend = function () {
   // Variables
   let extended = {};
   let deep = false;
@@ -160,7 +160,7 @@ Util.extend = function() {
   }
 
   // Merge the object into the extended object
-  let merge = function(obj) {
+  let merge = function (obj) {
     for (let prop in obj) {
       if (Object.prototype.hasOwnProperty.call(obj, prop)) {
         // If deep merge and property is an object, merge properties
@@ -183,7 +183,7 @@ Util.extend = function() {
 };
 
 // Check if Reduced Motion is enabled
-Util.osHasReducedMotion = function() {
+Util.osHasReducedMotion = function () {
   if (!window.matchMedia) return false;
   let matchMediaObj = window.matchMedia('(prefers-reduced-motion: reduce)');
   if (matchMediaObj) return matchMediaObj.matches;
@@ -191,7 +191,7 @@ Util.osHasReducedMotion = function() {
 };
 
 /*
-	Polyfills
+  Polyfills
 */
 
 // Closest() method
@@ -200,7 +200,7 @@ if (!Element.prototype.matches) {
 }
 
 if (!Element.prototype.closest) {
-  Element.prototype.closest = function(s) {
+  Element.prototype.closest = function (s) {
     let el = this;
     if (!document.documentElement.contains(el)) return null;
     do {
@@ -226,10 +226,10 @@ if (typeof window.CustomEvent !== 'function') {
 }
 
 /*
-	Animation curves
+  Animation curves
 */
 
-Math.easeInOutQuad = function(t, b, c, d) {
+Math.easeInOutQuad = function (t, b, c, d) {
   t /= d / 2;
   if (t < 1) return (c / 2) * t * t + b;
   t--;
@@ -238,8 +238,8 @@ Math.easeInOutQuad = function(t, b, c, d) {
 
 // FILTERS
 
-(function() {
-  let Filter = function(opts) {
+(function () {
+  let Filter = function (opts) {
     this.options = Util.extend(Filter.defaults, opts); // Used to store custom filter/sort functions
     this.element = this.options.element;
     this.elementId = this.element.getAttribute('id');
@@ -285,8 +285,8 @@ Math.easeInOutQuad = function(t, b, c, d) {
       filter.filterString[i] = ''; // Reset filtering
 
       // Get proper filter/sorting string based on selected controllers
-      (function(i) {
-        filter.controllers[i].addEventListener('change', function(event) {
+      (function (i) {
+        filter.controllers[i].addEventListener('change', function (event) {
           if (event.target.tagName.toLowerCase() == 'select') {
             // Select elements
             !event.target.getAttribute('data-filter')
@@ -310,7 +310,7 @@ Math.easeInOutQuad = function(t, b, c, d) {
           updateFilterArray(filter);
         });
 
-        filter.controllers[i].addEventListener('click', function(event) {
+        filter.controllers[i].addEventListener('click', function (event) {
           // Return if target is select/input elements
           let filterEl = event.target.closest('[data-filter]');
           let sortEl = event.target.closest('[data-sort]');
@@ -330,9 +330,9 @@ Math.easeInOutQuad = function(t, b, c, d) {
     }
 
     // Handle resize - update grid coordinates in filter.itemsGrid
-    window.addEventListener('resize', function() {
+    window.addEventListener('resize', function () {
       clearTimeout(filter.resizingId);
-      filter.resizingId = setTimeout(function() {
+      filter.resizingId = setTimeout(function () {
         createGridInfo(filter);
       }, 300);
     });
@@ -341,7 +341,7 @@ Math.easeInOutQuad = function(t, b, c, d) {
     checkInitialFiltering(filter);
 
     // Reset filtering results if filter selection was changed by an external control (e.g., form reset)
-    filter.element.addEventListener('update-filter-results', function() {
+    filter.element.addEventListener('update-filter-results', function () {
       // Reset filters first
       for (let i = 0; i < filter.controllers.length; i++) filter.filterString[i] = '';
       filter.sortingString = '';
@@ -478,7 +478,7 @@ Math.easeInOutQuad = function(t, b, c, d) {
         // Custom sort function -> user takes care of it
         filter.sortingList = filter.options[sortOptions[0]](filter.sortingList);
       } else {
-        filter.sortingList.sort(function(left, right) {
+        filter.sortingList.sort(function (left, right) {
           let leftVal = left[0].getAttribute('data-sort-' + sortOptions[0]),
             rightVal = right[0].getAttribute('data-sort-' + sortOptions[0]);
           if (sortOptions[2] == 'number') {
@@ -596,7 +596,7 @@ Math.easeInOutQuad = function(t, b, c, d) {
       }
     }
 
-    setTimeout(function() {
+    setTimeout(function () {
       for (let i = 0; i < filter.items.length; i++) {
         if (filter.filterList[i] && filter.items[i].getAttribute('data-scale') == 'on') {
           // Scale up item
@@ -635,7 +635,7 @@ Math.easeInOutQuad = function(t, b, c, d) {
     }, 50);
 
     // Wait for the end of transition of visible elements
-    setTimeout(function() {
+    setTimeout(function () {
       resetItems(filter);
     }, filter.options.duration + 100);
   }
@@ -688,12 +688,12 @@ Math.easeInOutQuad = function(t, b, c, d) {
     // Get offset first visible element
     for (let i = 0; i < filter.items.length; i++) {
       if (!Util.hasClass(filter.items[i], 'ons-u-hidden')) {
-        (itemStyle = window.getComputedStyle(filter.items[i])),
-          (itemWidth = parseFloat(itemStyle.getPropertyValue('width'))),
-          (itemHeight = parseFloat(itemStyle.getPropertyValue('height'))),
-          (marginX = parseFloat(itemStyle.getPropertyValue('margin-left')) + parseFloat(itemStyle.getPropertyValue('margin-right'))),
-          (marginY = parseFloat(itemStyle.getPropertyValue('margin-bottom')) + parseFloat(itemStyle.getPropertyValue('margin-top'))),
-          (colNumber = parseInt((containerWidth + marginX) / (itemWidth + marginX)));
+        itemStyle = window.getComputedStyle(filter.items[i]);
+        itemWidth = parseFloat(itemStyle.getPropertyValue('width'));
+        itemHeight = parseFloat(itemStyle.getPropertyValue('height'));
+        marginX = parseFloat(itemStyle.getPropertyValue('margin-left')) + parseFloat(itemStyle.getPropertyValue('margin-right'));
+        marginY = parseFloat(itemStyle.getPropertyValue('margin-bottom')) + parseFloat(itemStyle.getPropertyValue('margin-top'));
+        colNumber = parseInt((containerWidth + marginX) / (itemWidth + marginX));
         filter.itemsGrid[0] = [filter.items[i].offsetLeft, filter.items[i].offsetTop]; // Left, top
         break;
       }
@@ -774,14 +774,14 @@ Math.easeInOutQuad = function(t, b, c, d) {
 })();
 
 // ADVANCED FILTERS
-(function() {
+(function () {
   // The Adv Filter object is used to handle:
 
   // - number of results
   // - form reset
   // - filtering sections label (to show a preview of the option selected by the users)
 
-  let AdvFilter = function(element) {
+  let AdvFilter = function (element) {
     this.element = element;
     this.form = document.getElementsByClassName('ons-js-adv-filter__form');
     this.resultsList = this.element.getElementsByClassName('ons-js-adv-filter__gallery')[0];
@@ -794,15 +794,15 @@ Math.easeInOutQuad = function(t, b, c, d) {
   function initAdvFilter(filter) {
     if (filter.form.length > 0) {
       // Reset form
-      filter.form[0].addEventListener('reset', function() {
-        setTimeout(function() {
+      filter.form[0].addEventListener('reset', function () {
+        setTimeout(function () {
           resetFilters(filter);
           resetGallery(filter);
         });
       });
 
       // Update section labels on form change
-      filter.form[0].addEventListener('change', function(event) {
+      filter.form[0].addEventListener('change', function (event) {
         let section = event.target.closest('.ons-js-adv-filter__item');
         if (section) resetSelection(filter, section);
         else if (Util.is(event.target, '.ons-js-adv-filter__form')) {
@@ -815,7 +815,7 @@ Math.easeInOutQuad = function(t, b, c, d) {
 
     // Reset results count
     if (filter.resultsCount.length > 0) {
-      filter.resultsList.addEventListener('filter-selection-updated', function() {
+      filter.resultsList.addEventListener('filter-selection-updated', function () {
         updateResultsCount(filter);
       });
     }
@@ -960,7 +960,7 @@ Math.easeInOutQuad = function(t, b, c, d) {
   let advFilter = document.getElementsByClassName('ons-js-adv-filter');
   if (advFilter.length > 0) {
     for (let i = 0; i < advFilter.length; i++) {
-      (function(i) {
+      (function (i) {
         new AdvFilter(advFilter[i]);
       })(i);
     }
@@ -978,7 +978,7 @@ Math.easeInOutQuad = function(t, b, c, d) {
       element: gallery,
 
       // This is your gallery element
-      priceRange: function(items) {
+      priceRange: function (items) {
         // This is the price custom function
         let filteredArray = [],
           minVal = document.getElementById('slider-min-value').value,
@@ -989,7 +989,7 @@ Math.easeInOutQuad = function(t, b, c, d) {
         }
         return filteredArray;
       },
-      indexValue: function(items) {
+      indexValue: function (items) {
         // This is the index custom function
         let filteredArray = [],
           value = document.getElementById('index-value').value;
@@ -1004,7 +1004,7 @@ Math.easeInOutQuad = function(t, b, c, d) {
 })();
 
 // TOGGLE FILTERS
-(function() {
+(function () {
   let filters = document.getElementsByClassName('ons-js-adv-filter');
 
   if (filters.length > 0) {
@@ -1017,25 +1017,25 @@ Math.easeInOutQuad = function(t, b, c, d) {
     let page = document.getElementsByClassName('ons-page')[0];
 
     // Detect click on filters trigger
-    filtersTrigger.addEventListener('click', function(event) {
+    filtersTrigger.addEventListener('click', function (event) {
       event.preventDefault();
       toggleFilters(!Util.hasClass(filtersPanel, 'ons-adv-filter__panel--is-visible'));
     });
 
     // Detect click on update
-    filtersShow.addEventListener('click', function(event) {
+    filtersShow.addEventListener('click', function (event) {
       event.preventDefault();
       filtersTrigger.click();
     });
 
     // Detect click on close
-    filtersClose.addEventListener('click', function(event) {
+    filtersClose.addEventListener('click', function (event) {
       event.preventDefault();
       filtersTrigger.click();
     });
 
     // Listen for key events
-    window.addEventListener('keyup', function(event) {
+    window.addEventListener('keyup', function (event) {
       // Listen for ESC key
       if ((event.keyCode && event.keyCode == 27) || (event.key && event.key.toLowerCase() == 'escape')) {
         // Close filter panel on mobile if open
@@ -1048,7 +1048,7 @@ Math.easeInOutQuad = function(t, b, c, d) {
     // Listen for resize
     let resizingId = false;
 
-    window.addEventListener('resize', function() {
+    window.addEventListener('resize', function () {
       clearTimeout(resizingId);
       resizingId = setTimeout(doneResizing, 500);
     });

package/components/download-resources/download-resources.spec.js

@@ -4,6 +4,7 @@ import { renderComponent, renderTemplate, setTestPage } from '../../tests/helper
 
 const iPhoneX = KnownDevices['iPhone X'];
 
+/* eslint-disable indent */
 const EXAMPLE_PAGE = `
   <div class="ons-page">
     <div class="ons-js-adv-filter">
@@ -179,7 +180,8 @@ const EXAMPLE_PAGE = `
       </div>
     </div>
   </div>
-  `;
+`;
+/* eslint-enable indent */
 
 const RENDERED_EXAMPLE_PAGE = renderTemplate(EXAMPLE_PAGE);
 

package/components/error/_macro.njk

@@ -12,7 +12,7 @@
     {% endset %}
 
     {% call onsPanel({
-        "type": "error",
+        "variant": "error",
         "id": params.id
     }) %}
        {{ content | safe }}

package/components/error/_macro.spec.js

@@ -36,11 +36,7 @@ describe('macro: error', () => {
       ),
     );
 
-    expect(
-      $('.ons-panel__error')
-        .text()
-        .trim(),
-    ).toBe('Example error text.');
+    expect($('.ons-panel__error').text().trim()).toBe('Example error text.');
   });
 
   it('applies the provided `attributes` to the error content paragraph', () => {
@@ -76,7 +72,7 @@ describe('macro: error', () => {
       FAKE_NESTED_CONTENT,
     );
 
-    expect(panelSpy.occurrences[0].type).toBe('error');
+    expect(panelSpy.occurrences[0].variant).toBe('error');
     expect(panelSpy.occurrences[0].id).toBe('example-error');
   });
 

package/components/feedback/_macro.spec.js

@@ -70,21 +70,13 @@ describe('macro: feedback', () => {
       }),
     );
 
-    expect(
-      $(`${expectedTitleTag}.ons-feedback__heading`)
-        .text()
-        .trim(),
-    ).toBe('Feedback heading');
+    expect($(`${expectedTitleTag}.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
   });
 
   it('has a default `headingLevel` of 2', () => {
     const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect(
-      $(`h2.ons-feedback__heading`)
-        .text()
-        .trim(),
-    ).toBe('Feedback heading');
+    expect($(`h2.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
   });
 
   it('has additional heading style classes', () => {
@@ -97,11 +89,7 @@ describe('macro: feedback', () => {
   it('has a paragraph with the provided `content`', () => {
     const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect(
-      $('p')
-        .text()
-        .trim(),
-    ).toBe('Feedback content...');
+    expect($('p').text().trim()).toBe('Feedback content...');
   });
 
   it('has a link with the provided `url`', () => {
@@ -113,10 +101,6 @@ describe('macro: feedback', () => {
   it('has a link with the provided `linkText`', () => {
     const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect(
-      $('.ons-feedback__link')
-        .text()
-        .trim(),
-    ).toBe('Feedback link text');
+    expect($('.ons-feedback__link').text().trim()).toBe('Feedback link text');
   });
 });

package/components/field/_macro.spec.js

@@ -75,9 +75,7 @@ describe('macro: field', () => {
   it('calls with content', () => {
     const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC, 'Example content...'));
 
-    const content = $('.ons-field')
-      .html()
-      .trim();
+    const content = $('.ons-field').html().trim();
     expect(content).toEqual(expect.stringContaining('Example content...'));
   });
 

package/components/fieldset/_fieldset.scss

@@ -10,8 +10,7 @@
       margin: 0;
       padding: 0 0 1.5rem;
 
-      strong,
-      .ons-highlight {
+      strong {
         @extend .ons-highlight;
       }
     }

package/components/fieldset/_macro.spec.js

@@ -42,9 +42,7 @@ describe('macro: fieldset', () => {
   it('has the `description` text', () => {
     const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
 
-    const title = $('.ons-fieldset__description')
-      .html()
-      .trim();
+    const title = $('.ons-fieldset__description').html().trim();
     expect(title).toBe('A fieldset description');
   });
 
@@ -122,9 +120,7 @@ describe('macro: fieldset', () => {
   it('calls with content', () => {
     const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC, 'Example content...'));
 
-    const content = $('.ons-fieldset')
-      .html()
-      .trim();
+    const content = $('.ons-fieldset').html().trim();
     expect(content).toEqual(expect.stringContaining('Example content...'));
   });
 
@@ -179,9 +175,7 @@ describe('macro: fieldset', () => {
         }),
       );
 
-      const title = $('.ons-fieldset__legend-title')
-        .html()
-        .trim();
+      const title = $('.ons-fieldset__legend-title').html().trim();
       expect(title).toBe('Fieldset legend');
     });
 

package/components/footer/_footer.scss

@@ -30,6 +30,14 @@
     vertical-align: middle;
   }
 
+  &__poweredBy-link {
+    &:focus {
+      .ons-icon--logo {
+        @extend %a-focus;
+      }
+    }
+  }
+
   .ons-icon--logo,
   .ons-icon--logo__group {
     fill: var(--ons-color-black) !important;

package/components/footer/_macro.njk

@@ -36,10 +36,9 @@
             <div class="ons-footer__warning">
                 <div class="ons-container">
                     {% call onsPanel({
-                            "type": "warn",
-                            "classes": "ons-panel--warn--footer"
-                        })
-                    %}
+                        "variant": "warn",
+                        "classes": "ons-panel--warn--footer"
+                    }) %}
                         {{ params.footerWarning | safe }}
                     {% endcall %}
                 </div>
@@ -158,9 +157,11 @@
                             </div>
                         {% endif %}
                         {% if not params.poweredBy %}
-                            <div class="ons-footer__poweredby ons-u-mb-m">
-                                {{ onsLogo | safe }}
-                            </div>
+                            <a class="ons-footer__poweredBy-link" {% if lang == "cy" %}href="https://cy.ons.gov.uk/"{% else %}href="https://www.ons.gov.uk/"{% endif %}>
+                                <div class="ons-footer__poweredby-logo ons-u-mb-m">
+                                    {{ onsLogo | safe }}
+                                </div>
+                            </a>
                         {% endif %}
                     </div>
                     {% if params.crest %}