@ons/design-system 70.0.17 → 72.0.1

package/components/access-code/_macro.njk

@@ -3,8 +3,8 @@
 
 {% macro onsAccessCode(params) %}
     {% set groupSize = params.groupSize | default(4) %}
-    {% set extraSpaces = (params.maxlength | default(16) / groupSize) - 1 %}
-    {% set maxlength = params.maxlength | default(16) + extraSpaces %}
+    {% set extraSpaces = (params.maxLength | default(16) / groupSize) - 1 %}
+    {% set maxLength = params.maxLength | default(16) + extraSpaces %}
 
     {% set content %}
         {{
@@ -12,10 +12,10 @@
                 "id": params.id,
                 "type": params.type,
                 "name": params.name,
-                "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-xs" if params.postTextboxLinkText else ""),
+                "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-2xs" if params.postTextboxLinkText else ""),
                 "label": params.label,
+                "maxLength": maxLength,
                 "attributes": {
-                    "maxlength": maxlength,
                     "data-group-size": groupSize,
                     "autocomplete": "off",
                     "autocapitalize": "characters"

package/components/access-code/_macro.spec.js

@@ -102,23 +102,23 @@ describe('FOR: Macro: Access-code', () => {
             });
         });
     });
-    describe('GIVEN: Params: maxlength & groupSize', () => {
+    describe('GIVEN: Params: maxLength & groupSize', () => {
         describe('WHEN: params are at default state', () => {
             const $ = cheerio.load(renderComponent('access-code'));
-            test('THEN: renders input with total maxlength of 19', () => {
+            test('THEN: renders input with total maxLength of 19', () => {
                 expect($('input').attr('maxlength')).toBe('19');
             });
             test('THEN: renders input with groupSize of 4', () => {
                 expect($('input').attr('data-group-size')).toBe('4');
             });
         });
-        describe('WHEN: maxlength param is provided', () => {
+        describe('WHEN: maxLength param is provided', () => {
             const $ = cheerio.load(
                 renderComponent('access-code', {
-                    maxlength: 8,
+                    maxLength: 8,
                 }),
             );
-            test('THEN: renders input with provided maxlength', () => {
+            test('THEN: renders input with provided maxLength', () => {
                 expect($('input').attr('maxlength')).toBe('9');
             });
         });
@@ -132,14 +132,14 @@ describe('FOR: Macro: Access-code', () => {
                 expect($('input').attr('data-group-size')).toBe('2');
             });
         });
-        describe('WHEN: maxlength and groupSize params are provided', () => {
+        describe('WHEN: maxLength and groupSize params are provided', () => {
             const $ = cheerio.load(
                 renderComponent('access-code', {
-                    maxlength: 6,
+                    maxLength: 6,
                     groupSize: 3,
                 }),
             );
-            test('THEN: renders input with provided maxlength accounting for provided groupSize', () => {
+            test('THEN: renders input with provided maxLength accounting for provided groupSize', () => {
                 expect($('input').attr('maxlength')).toBe('7');
             });
         });

package/components/access-code/example-access-code-error.njk

@@ -36,7 +36,7 @@ layout: ~
         }}
     {% endcall %}
 
-    <h1 class="ons-u-mt-l">Start study</h1>
+    <h1 class="ons-u-mt-2xl">Start study</h1>
 
     {{
         onsAccessCode({
@@ -59,7 +59,7 @@ layout: ~
     {{
         onsButton({
             "text": "Access study",
-            "classes": "ons-u-mb-xl"
+            "classes": "ons-u-mb-2xl ons-u-mt-s"
         })
     }}
 

package/components/access-code/example-access-code.njk

@@ -17,7 +17,7 @@ layout: ~
 %}
 
 {% block main %}
-    <h1 class="ons-u-mt-l">Start study</h1>
+    <h1 class="ons-u-mt-2xl">Start study</h1>
 
     {{
         onsAccessCode({
@@ -36,7 +36,7 @@ layout: ~
     {{
         onsButton({
             "text": "Access study",
-            "classes": "ons-u-mb-xl"
+            "classes": "ons-u-mb-2xl ons-u-mt-s"
         })
     }}
 

package/components/accordion/_macro.njk

@@ -32,7 +32,7 @@
                     "headingAttributes": item.headingAttributes,
                     "contentAttributes": item.contentAttributes,
                     "title": item.title,
-                    "titleTag": item.titleTag,
+                    "headingLevel": item.headingLevel,
                     "content": item.content,
                     "group": params.id,
                     "saveState": params.saveState,

package/components/accordion/_macro.spec.js

@@ -85,7 +85,7 @@ describe('FOR: Macro: Accordion', () => {
                     itemsList: [
                         {
                             title: 'Title for item 1',
-                            titleTag: 'h5',
+                            headingLevel: 5,
                             content: 'Content for item 1',
                         },
                     ],

package/components/address-input/_macro.njk

@@ -132,9 +132,9 @@
                                 "mutuallyExclusive": params.mutuallyExclusive
                             },
                             "externalInitialiser": true,
-                            "APIDomain": params.APIDomain,
-                            "APIDomainBearerToken": params.APIDomainBearerToken,
-                            "APIManualQueryParams": params.APIManualQueryParams,
+                            "apiDomain": params.apiDomain,
+                            "apiDomainBearerToken": params.apiDomainBearerToken,
+                            "apiManualQueryParams": params.apiManualQueryParams,
                             "allowMultiple": params.allowMultiple,
                             "mandatory": params.mandatory,
                             "instructions": params.instructions,
@@ -157,15 +157,15 @@
                             "errorTitle": params.errorTitle,
                             "errorMessageEnter": params.errorMessageEnter,
                             "errorMessageSelect": params.errorMessageSelect,
-                            "errorMessageAPI": params.errorMessageAPI,
-                            "errorMessageAPILinkText": params.errorMessageAPILinkText,
+                            "errorMessageApi": params.errorMessageApi,
+                            "errorMessageApiLinkText": params.errorMessageApiLinkText,
                             "options": params.options,
-                            "manualLink": params.manualLink,
+                            "manualLinkUrl": params.manualLinkUrl,
                             "manualLinkText": params.manualLinkText
                         })
                     }}
                     {% if params.manualLinkText %}
-                        <a href="{{ params.manualLink | default('#0') }}" class="ons-js-address-manual-btn ons-u-mt-s ons-u-dib"
+                        <a href="{{ params.manualLinkUrl }}" class="ons-js-address-manual-btn ons-u-mt-s ons-u-dib"
                             >{{ params.manualLinkText }}</a
                         >
                     {% endif %}

package/components/address-input/_macro.spec.js

@@ -312,9 +312,9 @@ describe('macro: address-input', () => {
                 error: '[params.error]',
                 name: '[params.name]',
                 mutuallyExclusive: '[params.mutuallyExclusive]',
-                APIDomain: '[params.APIDomain]',
-                APIDomainBearerToken: '[params.APIDomainBearerToken]',
-                APIManualQueryParams: '[params.APIManualQueryParams]',
+                apiDomain: '[params.apiDomain]',
+                apiDomainBearerToken: '[params.apiDomainBearerToken]',
+                apiManualQueryParams: '[params.apiManualQueryParams]',
                 allowMultiple: '[params.allowMultiple]',
                 mandatory: '[params.mandatory]',
                 instructions: '[params.instructions]',
@@ -338,10 +338,10 @@ describe('macro: address-input', () => {
                 errorTitle: '[params.errorTitle]',
                 errorMessageEnter: '[params.errorMessageEnter]',
                 errorMessageSelect: '[params.errorMessageSelect]',
-                errorMessageAPI: '[params.errorMessageAPI]',
-                errorMessageAPILinkText: '[params.errorMessageAPILinkText]',
+                errorMessageApi: '[params.errorMessageApi]',
+                errorMessageApiLinkText: '[params.errorMessageApiLinkText]',
                 options: '[params.options]',
-                manualLink: '[params.manualLink]',
+                manualLinkUrl: '[params.manualLinkUrl]',
                 manualLinkText: '[params.manualLinkText]',
             });
 
@@ -362,9 +362,9 @@ describe('macro: address-input', () => {
                     mutuallyExclusive: '[params.mutuallyExclusive]',
                 },
                 externalInitialiser: true,
-                APIDomain: '[params.APIDomain]',
-                APIDomainBearerToken: '[params.APIDomainBearerToken]',
-                APIManualQueryParams: '[params.APIManualQueryParams]',
+                apiDomain: '[params.apiDomain]',
+                apiDomainBearerToken: '[params.apiDomainBearerToken]',
+                apiManualQueryParams: '[params.apiManualQueryParams]',
                 allowMultiple: '[params.allowMultiple]',
                 mandatory: '[params.mandatory]',
                 instructions: '[params.instructions]',
@@ -387,18 +387,19 @@ describe('macro: address-input', () => {
                 errorTitle: '[params.errorTitle]',
                 errorMessageEnter: '[params.errorMessageEnter]',
                 errorMessageSelect: '[params.errorMessageSelect]',
-                errorMessageAPI: '[params.errorMessageAPI]',
-                errorMessageAPILinkText: '[params.errorMessageAPILinkText]',
+                errorMessageApi: '[params.errorMessageApi]',
+                errorMessageApiLinkText: '[params.errorMessageApiLinkText]',
                 options: '[params.options]',
-                manualLink: '[params.manualLink]',
+                manualLinkUrl: '[params.manualLinkUrl]',
                 manualLinkText: '[params.manualLinkText]',
             });
         });
 
-        it('renders manualLinkText` when provided with a default value for `manualLink`', () => {
+        it('renders manualLinkText` when provided with a default value for `manualLinkUrl`', () => {
             const $ = cheerio.load(
                 renderComponent('address-input', {
                     ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL,
+                    manualLinkUrl: '#0',
                     manualLinkText: 'Manually enter address',
                 }),
             );
@@ -407,11 +408,11 @@ describe('macro: address-input', () => {
             expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address');
         });
 
-        it('renders `manualLinkText` with `manualLink` when provided', () => {
+        it('renders `manualLinkText` with `manualLinkUrl` when provided', () => {
             const $ = cheerio.load(
                 renderComponent('address-input', {
                     ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL,
-                    manualLink: 'https://example.com/edit-address',
+                    manualLinkUrl: 'https://example.com/edit-address',
                     manualLinkText: 'Manually enter address',
                 }),
             );

package/components/address-input/autosuggest.address.error.js

@@ -32,7 +32,7 @@ export default class AddressError {
             const errorListElement = document.createElement('p');
             const errorLinkElement = document.createElement('a');
 
-            errorElement.className = 'ons-panel ons-panel--error ons-u-mb-m ons-js-autosuggest-error-panel';
+            errorElement.className = 'ons-panel ons-panel--error ons-u-mb-l ons-js-autosuggest-error-panel';
             errorElementHeader.className = 'ons-panel__header';
             errorElementTitle.className = 'ons-panel__title ons-u-fs-r--b';
             errorBodyElement.className = 'ons-panel__body';

package/components/address-input/autosuggest.address.js

@@ -57,10 +57,10 @@ export default class AutosuggestAddress {
         });
 
         // Set up AIMS api variables and auth
-        this.APIDomain = this.container.getAttribute('data-api-domain');
-        this.lookupURL = `${this.APIDomain}/addresses/eq?input=`;
-        this.lookupGroupURL = `${this.APIDomain}/addresses/eq/bucket?`;
-        this.retrieveURL = `${this.APIDomain}/addresses/eq/uprn/`;
+        this.apiDomain = this.container.getAttribute('data-api-domain');
+        this.lookupUrl = `${this.apiDomain}/addresses/eq?input=`;
+        this.lookupGroupUrl = `${this.apiDomain}/addresses/eq/bucket?`;
+        this.retrieveUrl = `${this.apiDomain}/addresses/eq/uprn/`;
 
         // Query string options
         this.manualQueryParams = this.container.getAttribute('data-query-params');
@@ -77,7 +77,7 @@ export default class AutosuggestAddress {
     }
 
     async checkAPIStatus() {
-        this.fetch = abortableFetch(this.lookupURL + 'cf142&limit=10', {
+        this.fetch = abortableFetch(this.lookupUrl + 'cf142&limit=10', {
             method: 'GET',
             headers: this.setAuthorization(this.authorizationToken),
         });
@@ -109,24 +109,24 @@ export default class AutosuggestAddress {
     }
 
     async findAddress(text, grouped) {
-        let queryURL, fullQueryURL;
+        let queryUrl, fullQueryUrl;
 
         if (this.manualQueryParams) {
             const manualQueryParams = this.container.getAttribute('data-query-params');
-            fullQueryURL = this.lookupURL + text + manualQueryParams;
+            fullQueryUrl = this.lookupUrl + text + manualQueryParams;
         } else {
             const fullPostcodeQuery = this.testFullPostcodeQuery(text);
             let limit = fullPostcodeQuery ? 100 : 10;
 
-            queryURL = grouped ? this.lookupGroupURL + this.groupQuery : this.lookupURL + text + '&limit=' + limit;
+            queryUrl = grouped ? this.lookupGroupUrl + this.groupQuery : this.lookupUrl + text + '&limit=' + limit;
 
-            fullQueryURL = this.generateURLParams(queryURL);
+            fullQueryUrl = this.generateUrlParams(queryUrl);
             if (fullPostcodeQuery && grouped !== false) {
-                fullQueryURL = fullQueryURL + '&groupfullpostcodes=combo';
+                fullQueryUrl = fullQueryUrl + '&groupfullpostcodes=combo';
             }
         }
 
-        this.fetch = abortableFetch(fullQueryURL, {
+        this.fetch = abortableFetch(fullQueryUrl, {
             method: 'GET',
             headers: this.setAuthorization(this.authorizationToken),
         });
@@ -248,11 +248,11 @@ export default class AutosuggestAddress {
     }
 
     async retrieveAddress(id, type = null) {
-        let retrieveUrl = this.retrieveURL + id;
+        let retrieveUrl = this.retrieveUrl + id;
 
-        const fullUPRNURL = this.generateURLParams(retrieveUrl, id, type);
+        const fullUprnUrl = this.generateUrlParams(retrieveUrl, id, type);
 
-        this.fetch = abortableFetch(fullUPRNURL, {
+        this.fetch = abortableFetch(fullUprnUrl, {
             method: 'GET',
             headers: this.setAuthorization(this.authorizationToken),
         });
@@ -315,8 +315,8 @@ export default class AutosuggestAddress {
         };
     }
 
-    generateURLParams(baseURL, uprn, type) {
-        let fullURL = baseURL,
+    generateUrlParams(baseUrl, uprn, type) {
+        let fullUrl = baseUrl,
             addressType;
 
         const classificationFilterParam = '&classificationfilter=',
@@ -336,37 +336,37 @@ export default class AutosuggestAddress {
 
         if (!uprn) {
             if (this.classificationFilter && this.classificationFilter !== 'residential') {
-                fullURL = fullURL + classificationFilterParam + this.classificationFilter;
+                fullUrl = fullUrl + classificationFilterParam + this.classificationFilter;
             }
 
             if (this.classificationFilter === 'workplace') {
                 if (this.regionCode === 'gb-eng') {
-                    fullURL = fullURL + eboostParam;
+                    fullUrl = fullUrl + eboostParam;
                 } else if (this.regionCode === 'gb-wls') {
-                    fullURL = fullURL + wboostParam;
+                    fullUrl = fullUrl + wboostParam;
                 }
             }
 
             if (this.regionCode === 'gb-nir') {
                 if (this.classificationFilter === 'educational') {
-                    fullURL = fullURL + nionlyParam;
+                    fullUrl = fullUrl + nionlyParam;
                 } else {
-                    fullURL = fullURL + niboostParam;
+                    fullUrl = fullUrl + niboostParam;
                 }
             }
 
             if (this.lang === 'cy') {
-                fullURL = fullURL + favourwelshParam;
+                fullUrl = fullUrl + favourwelshParam;
             }
         } else if (uprn) {
-            fullURL = baseURL + addresstypeParam + addressType;
+            fullUrl = baseUrl + addresstypeParam + addressType;
         }
 
         if (this.epoch === 'true') {
-            fullURL = fullURL + epochParam;
+            fullUrl = fullUrl + epochParam;
         }
 
-        return fullURL;
+        return fullUrl;
     }
 
     handleAPIError() {

package/components/address-input/autosuggest.address.spec.js

@@ -30,8 +30,8 @@ const EXAMPLE_ADDRESS_INPUT = {
     errorTitle: 'There is a problem with your answer',
     errorMessageEnter: 'Enter an address',
     errorMessageSelect: 'Select an address',
-    errorMessageAPI: 'Sorry, there is a problem loading addresses',
-    errorMessageAPILinkText: 'Enter address manually',
+    errorMessageApi: 'Sorry, there is a problem loading addresses',
+    errorMessageApiLinkText: 'Enter address manually',
     options: {
         regionCode: 'gb-eng',
         addressType: 'residential',
@@ -52,20 +52,21 @@ const EXAMPLE_ADDRESS_INPUT = {
         label: 'Postcode',
     },
     searchButton: 'Search for an address',
+    manualLinkUrl: '#0',
     manualLinkText: 'Manually enter address',
 };
 
 const EXAMPLE_ADDRESS_INPUT_WITH_API = {
     ...EXAMPLE_ADDRESS_INPUT,
-    APIDomain: '/fake/api',
-    APIDomainBearerToken: 'someToken',
+    apiDomain: '/fake/api',
+    apiDomainBearerToken: 'someToken',
     externalInitialiser: true,
 };
 
 const { setTimeout } = require('node:timers/promises');
 
 describe('script: address-input', () => {
-    const apiFaker = new PuppeteerEndpointFaker(EXAMPLE_ADDRESS_INPUT_WITH_API.APIDomain);
+    const apiFaker = new PuppeteerEndpointFaker(EXAMPLE_ADDRESS_INPUT_WITH_API.apiDomain);
 
     apiFaker.setOverrides(
         [

package/components/address-input/example-address-input-editable.njk

@@ -10,8 +10,8 @@
         },
         "isEditable": true,
         "mandatory": true,
-        "APIDomain": "https://mock-address-api.gcp.onsdigital.uk",
-        'APIDomainBearerToken': "some_token",
+        "apiDomain": "https://mock-address-api.gcp.onsdigital.uk",
+        'apiDomainBearerToken': "some_token",
         "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
         "ariaYouHaveSelected": "You have selected",
         "ariaMinChars": "Enter 3 or more characters for suggestions.",
@@ -30,8 +30,8 @@
         "errorTitle": "There is a problem with your answer",
         "errorMessageEnter": "Enter an address",
         "errorMessageSelect": "Select an address",
-        "errorMessageAPI": "Sorry, there is a problem loading addresses.",
-        "errorMessageAPILinkText": "Enter address manually",
+        "errorMessageApi": "Sorry, there is a problem loading addresses.",
+        "errorMessageApiLinkText": "Enter address manually",
         "options": {
             "regionCode": "gb-eng",
             "addressType": "residential"
@@ -49,6 +49,7 @@
             "label": "Postcode"
         },
         "searchButton": "Search for an address",
+        "manualLinkUrl": "#0",
         "manualLinkText": "Manually enter address"
     })
 }}

package/components/address-input/example-address-input.njk

@@ -12,8 +12,8 @@
         "mandatory": true,
         "externalInitialiser": true,
         "autocomplete": "off",
-        "APIDomain": "https://mock-address-api.gcp.onsdigital.uk",
-        'APIDomainBearerToken': "some_token",
+        "apiDomain": "https://mock-address-api.gcp.onsdigital.uk",
+        'apiDomainBearerToken': "some_token",
         "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
         "ariaYouHaveSelected": "You have selected",
         "ariaMinChars": "Enter 3 or more characters for suggestions.",
@@ -31,9 +31,8 @@
         "errorTitle": "There is a problem with your answer",
         "errorMessageEnter": "Enter an address",
         "errorMessageSelect": "Select an address",
-        "errorMessageAPI": "Sorry, there is a problem. We are working to fix it. Please try again later or",
-        "errorMessageAPILinkText": "contact us for more help",
-        "errorMessageAPILink": "#0",
+        "errorMessageApi": "Sorry, there is a problem. We are working to fix it. Please try again later or",
+        "errorMessageApiLinkText": "contact us for more help",
         "options": {
             "regionCode": "gb-eng",
             "addressType": "residential"

package/components/autosuggest/_autosuggest.scss

@@ -5,7 +5,7 @@
         border-radius: $input-radius;
         display: inline-block;
 
-        @include mq(xxs, s) {
+        @include mq('2xs', s) {
             width: 100%;
         }
     }
@@ -94,19 +94,19 @@
     &__panel.ons-panel--warn {
         background: none;
         border: 0;
-        margin: 0;
+        margin: 0 !important;
         .ons-panel__icon {
-            font-size: 21px;
-            line-height: 25px;
+            font-size: 1.3rem;
+            line-height: 1.5rem;
             margin-top: 0;
-            min-height: 24px;
-            min-width: 26px;
-            top: 17px;
+            min-height: 1.5rem;
+            min-width: 1.5rem;
+            top: 1rem;
         }
 
         .ons-panel__body {
             font-weight: $font-weight-bold;
-            padding: 0.8rem 0.8rem 0.8rem 2rem;
+            padding: 0.75rem 0.75rem 0.75rem 2rem;
         }
     }
 

package/components/autosuggest/_macro.njk

@@ -15,9 +15,9 @@
         data-results-title="{{ params.resultsTitle }}"
         data-no-results="{{ params.noResults }}"
         data-type-more="{{ params.typeMore }}"
-        {% if params.APIDomain %}data-api-domain="{{ params.APIDomain }}"{% endif %}
-        {% if params.APIDomainBearerToken %}data-authorization-token="{{ params.APIDomainBearerToken }}"{% endif %}
-        {% if params.APIManualQueryParams == true %}data-query-params=""{% endif %}
+        {% if params.apiDomain %}data-api-domain="{{ params.apiDomain }}"{% endif %}
+        {% if params.apiDomainBearerToken %}data-authorization-token="{{ params.apiDomainBearerToken }}"{% endif %}
+        {% if params.apiManualQueryParams == true %}data-query-params=""{% endif %}
         {% if params.allowMultiple == true %}data-allow-multiple="true"{% endif %}
         {% if params.autosuggestData %}data-autosuggest-data="{{ params.autosuggestData }}"{% endif %}
         {% if params.errorTitle %}data-error-title="{{ params.errorTitle }}"{% endif %}
@@ -26,8 +26,8 @@
         {% if params.ariaGroupedResults %}data-aria-grouped-results="{{ params.ariaGroupedResults }}"{% endif %}
         {% if params.groupCount %}data-group-count="{{ params.groupCount }}"{% endif %}
         {% if params.tooManyResults %}data-too-many-results="{{ params.tooManyResults }}"{% endif %}
-        {% if params.errorMessageAPI %}data-error-api="{{ params.errorMessageAPI }}"{% endif %}
-        {% if params.errorMessageAPILinkText %}data-error-api-link-text="{{ params.errorMessageAPILinkText }}"{% endif %}
+        {% if params.errorMessageApi %}data-error-api="{{ params.errorMessageApi }}"{% endif %}
+        {% if params.errorMessageApiLinkText %}data-error-api-link-text="{{ params.errorMessageApiLinkText }}"{% endif %}
         {% if params.language %}data-lang="{{ params.language }}"{% endif %}
         {% if params.options %}
             {% if params.options.oneYearAgo %}data-options-one-year-ago="true"{% endif %}

package/components/autosuggest/autosuggest.spec.js

@@ -597,7 +597,7 @@ describe('script: autosuggest', () => {
                         ...EXAMPLE_AUTOSUGGEST,
                         errorTitle: 'There is a problem with your answer',
                         errorMessage: 'Enter an address ',
-                        errorMessageAPI: 'Sorry, there is a problem.',
+                        errorMessageApi: 'Sorry, there is a problem.',
                     }),
                 );
 

package/components/back-to-top/_back-to-top.scss

@@ -1,12 +1,12 @@
 .ons-back-to-top {
     &__description {
-        margin-left: 0.2rem;
+        margin-left: 0.25rem;
     }
 
     &__enabled {
         background: none;
         width: fit-content;
-        padding: 0.5em 0;
+        padding: 0.5rem 0;
     }
 
     &__sticky {

package/components/back-to-top/example-full-page-back-to-top.njk

@@ -31,15 +31,15 @@ layout: ~
 %}
 
 {% block main %}
-    <h1 class="ons-u-fs-xxl">
-        <span class="ons-u-fs-m ons-u-db ons-u-mb-xs ons-u-lighter">Press releases</span>
+    <h1 class="ons-u-fs-2xl">
+        <span class="ons-u-fs-m ons-u-db ons-u-mb-2xs ons-u-lighter">Press releases</span>
         <span class="ons-u-vh">: </span>
-        <span class="ons-u-fs-xxl ons-u-db">ONS launches Integrated Data Service to boost government collaboration on data sharing</span>
+        <span class="ons-u-fs-2xl ons-u-db">ONS launches Integrated Data Service to boost government collaboration on data sharing</span>
     </h1>
 
     <div class="ons-grid">
         <div class="ons-grid__col ons-col-7@m">
-            <div class="ons-page__body ons-u-mt-m">
+            <div class="ons-page__body ons-u-mt-l">
                 <p>
                     In a groundbreaking move, the Office for National Statistics (ONS) has embarked on a transformative journey with the
                     introduction of the Integrated Data Service (IDS). This sophisticated, cloud-based platform is meticulously crafted to
@@ -106,7 +106,7 @@ layout: ~
                     appropriately and making sure it is put to use for the public good."
                 </p>
 
-                <div class="ons-u-mt-l ons-u-mt-xl@m">
+                <div class="ons-u-mt-xl ons-u-mt-3xl@m">
                     {{
                         onsContentPagination({
                             "ariaLabel": 'Article pagination',
@@ -179,7 +179,7 @@ layout: ~
                             "id": 'share-this-article',
                             "title": 'Share this article',
                             "iconPosition": 'before',
-                            "iconSize": 'xxl',
+                            "iconSize": '2xl',
                             "itemsList": [
                                 {
                                     "url": '#0',

package/components/breadcrumbs/_breadcrumbs.scss

@@ -22,7 +22,7 @@ $breadcrumb-chevron-height: 0.65rem;
 
         .ons-icon {
             height: $breadcrumb-chevron-height;
-            margin: 0 0.2rem;
+            margin: 0 0.25rem;
             vertical-align: middle;
             width: $breadcrumb-chevron-height;
         }