update grid breakpoints and migration guide

__snapshots__/layout/_template.spec.js.snap

@@ -753,7 +753,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
                         <div class="ons-header__links ons-grid__col ons-u-ml-auto">
 
-                                <div class="ons-grid__col ons-col-auto ons-u-mr-s ons-u-d-no@xxs@xs">
+                                <div class="ons-grid__col ons-col-auto ons-u-mr-s ons-u-d-no@2xs@xs">
 
 
 
@@ -774,7 +774,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
-                                <div class="ons-grid__col ons-col-auto ons-u-d-no@xxs@m">
+                                <div class="ons-grid__col ons-col-auto ons-u-d-no@2xs@m">
                                     <nav class="ons-header-service-nav ons-header-service-nav--main" aria-label="Services menu">
                                         <ul class="ons-header-service-nav__list">
 
@@ -926,7 +926,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
-    <button type="submit" class="ons-btn ons-u-d-no@xxs@l ons-btn--ghost-dark">
+    <button type="submit" class="ons-btn ons-u-d-no@2xs@l ons-btn--ghost-dark">
     <span class="ons-btn__inner"><span class="ons-btn__text">Save and sign out</span><svg class="ons-icon ons-u-ml-2xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" title="ons-icon-exit">
             <path d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z" transform="translate(-2 -2)"></path>
             <path d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z" transform="translate(-2 -2)"></path>
@@ -986,7 +986,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
     <div class="ons-navigation-wrapper ons-navigation-wrapper--neutral">
-        <div class="ons-container ons-container--gutterless@xxs@l">
+        <div class="ons-container ons-container--gutterless@2xs@l">
 
             <nav class="ons-navigation ons-navigation--main ons-js-navigation" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
                 <ul class="ons-navigation__list">
@@ -1037,8 +1037,8 @@ exports[`base page template matches the full configuration snapshot 1`] = `
     </div>
 
 
-            <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l" id="sub-nav" aria-label="Section menu" data-analytics="header-section-navigation">
-                <div class="ons-container ons-container--gutterless@xxs@l">
+            <nav class="ons-navigation ons-navigation--sub ons-u-d-no@2xs@l" id="sub-nav" aria-label="Section menu" data-analytics="header-section-navigation">
+                <div class="ons-container ons-container--gutterless@2xs@l">
                     <ul class="ons-navigation__list ons-navigation__list">
 
                             <li class="ons-navigation__item">
@@ -1111,7 +1111,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
     </button>
 
             <nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-2xs" id="sub-nav--mobile" aria-hidden="true" aria-label="Section menu" data-analytics="header-section-navigation">
-                <div class="ons-container ons-container--gutterless@xxs@l">
+                <div class="ons-container ons-container--gutterless@2xs@l">
                     <ul class="ons-navigation__list ons-navigation__list--parent">
                         <li class="ons-navigation__item">
                             <a class="ons-navigation__link" href="#0">Overview</a>
@@ -1447,7 +1447,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
                             </div>
 
                             <!-- Full footer columns -->
-                            <div class="ons-grid__col ons-col-4@m ons-u-mt-l@xxs@m">
+                            <div class="ons-grid__col ons-col-4@m ons-u-mt-l@2xs@m">
 
                                     <h2 class="ons-footer__heading ons-u-fs-r--b">About ONS</h2>
 
@@ -1516,7 +1516,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
                             </div>
 
                             <!-- Full footer columns -->
-                            <div class="ons-grid__col ons-col-4@m ons-u-mt-l@xxs@m">
+                            <div class="ons-grid__col ons-col-4@m ons-u-mt-l@2xs@m">
 
                                     <h2 class="ons-footer__heading ons-u-fs-r--b">Statistics</h2>
 

migration_guides/70.x.x-to-71.0.0-migration-guide.md

@@ -61,11 +61,12 @@ This section will list the changes that will impact more than one component
 
         </details>
 
-### **_Update to icon sizes naming standard_**
+### **_Update to Icon Sizes Naming Standard_**
 
 [**Link to PR**](https://github.com/ONSdigital/design-system/pull/3285)
 
 -   **Description of change:** Icon sizes have been updated with the new naming standard. This change replaces the old naming convention (e.g., xxxl, xxl) with a numerical system (e.g., 3xl, 2xl), similar to the one used for spacing and other components.
+
 -   **Reason for change:** This update standardizes how sizes are referenced across the system
 
     This will be a breaking change and will require the renaming of some parameters:
@@ -108,11 +109,12 @@ This section will list the changes that will impact more than one component
 
         </details>
 
-### **_Update to font sizes naming standard_**
+### **_Update to Font Sizes Naming Standard_**
 
 [**Link to PR**](https://github.com/ONSdigital/design-system/pull/3285)
 
 -   **Description of change:** Font size classes have been updated to reflect the new naming conventions in the Design System. This update replaces the old naming convention (e.g., xxxl, xxl) with a numerical system (e.g., 3xl, 2xl), similar to the one used for spacing and other components.
+
 -   **Reason for change:** This update standardizes how sizes are referenced across the system
 
 -   **Components impacted:**
@@ -159,6 +161,52 @@ This section will list the changes that will impact more than one component
 
         </details>
 
+### **_Update to Grid Breakpoint Naming Standard_**
+
+[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3285)
+
+-   **Description of change:** The grid breakpoint naming convention has been updated to a more consistent numerical system. The old breakpoint names like xxs and xxl have been replaced with 2xs, 2xl, and so on, to better align with the numeric sizing system.
+
+-   **Reason for change:** The new naming convention standardizes how breakpoints are referenced across the design system.
+
+-   **Components impacted:**
+
+    Any component or layout that references grid breakpoints using the previous naming conventions will need to be updated
+
+-   **Migration steps:**
+
+    1. Locate all instances of grid breakpoints in your codebase.
+    2. Replace old breakpoint names with the new corresponding names:
+
+    -   <details>
+        <summary><b>Click for example:</b></summary>
+
+        ```
+        // OLD Breakpoints
+        $breakpoints: [
+            xxs: 300px,
+            xs: 400px,
+            s: 500px,
+            m: 740px,
+            l: 980px,
+            xl: 1300px,
+            xxl: 1600px,
+        ];
+
+        // NEW Breakpoints
+        $breakpoints: [
+            2xs: 300px,
+            xs: 400px,
+            s: 500px,
+            m: 740px,
+            l: 980px,
+            xl: 1300px,
+            2xl: 1600px,
+        ];
+        ```
+
+        </details>
+
 ### **_Standardisation of setting heading level across components_**
 
 [**Link to PR**](https://github.com/ONSdigital/design-system/pull/3111)

src/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%;
         }
     }

src/components/button/_macro.njk

@@ -105,7 +105,7 @@
                     "iconType": iconType
                 })
             -}}
-            <span class="ons-btn__text ons-u-vh@xxs@s">{{- params.html | safe if params.html else params.text -}}</span>
+            <span class="ons-btn__text ons-u-vh@2xs@s">{{- params.html | safe if params.html else params.text -}}</span>
         {%- else -%}
             <span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
         {%- endif -%}

src/components/cookies-banner/_cookies-banner.scss

@@ -13,7 +13,7 @@
         p {
             margin: 0 0 0.5rem;
 
-            @include mq(xxs, s) {
+            @include mq('2xs', s) {
                 font-size: 0.875rem;
                 line-height: 1.25rem;
             }

src/components/footer/_macro.njk

@@ -82,7 +82,7 @@
                     {% if params.cols %}
                         {% for col in params.cols %}
                             <!-- Full footer columns -->
-                            <div class="ons-grid__col ons-col-4@m{{ ' ons-u-mt-l@xxs@m' if loop.index > 1 }}">
+                            <div class="ons-grid__col ons-col-4@m{{ ' ons-u-mt-l@2xs@m' if loop.index > 1 }}">
                                 {% if col.title %}
                                     <h2 class="ons-footer__heading ons-u-fs-r--b">{{ col.title }}</h2>
                                 {% endif %}
@@ -196,7 +196,7 @@
                     </div>
                     {% if params.crest %}
                         <!-- Crest -->
-                        <div class="ons-grid__col ons-footer__crest ons-u-mb-l@xxs@l">
+                        <div class="ons-grid__col ons-footer__crest ons-u-mb-l@2xs@l">
                             {{-
                                 onsIcon({
                                     "iconType": 'crest'

src/components/header/_header.scss

@@ -31,7 +31,7 @@
     }
     &__title {
         @extend .ons-u-fs-r--b;
-        @extend .ons-u-fs-xl\@xxs;
+        @extend .ons-u-fs-xl\@2xs;
 
         color: var(--ons-color-white);
 
@@ -168,7 +168,7 @@
     }
 
     &__org-logo--large {
-        @include mq(xxs, 454px) {
+        @include mq('2xs', 454px) {
             display: none;
         }
     }

src/components/header/_macro.njk

@@ -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 '' }}"
@@ -228,7 +228,7 @@
 
                             {% 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,7 +293,7 @@
                                 {% 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",

src/components/header/_macro.spec.js

@@ -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);
             });
         });
     });

src/components/hero/_hero.scss

@@ -32,7 +32,7 @@
     &__pre-title {
         margin-bottom: 0.5rem;
 
-        @include mq(xxs, m) {
+        @include mq('2xs', m) {
             max-width: 145px;
         }
     }

src/components/language-selector/_macro.njk

@@ -2,15 +2,15 @@
     {% set alternativeLanguages = params.languages | rejectattr("current") %}
     {% set languageNumber = params.languages | length %}
 
-    <ul class="ons-language-links{{ ' ons-u-d-no@xxs@m' if languageNumber and languageNumber != 2 }}">
+    <ul class="ons-language-links{{ ' ons-u-d-no@2xs@m' if languageNumber and languageNumber != 2 }}">
         {% for language in alternativeLanguages %}
             <li class="ons-language-links__item">
                 <a
                     href="{{ language.url }}"
                     lang="{{ language.isoCode }}"
                     {% if language.attributes %}{% for attribute, value in (language.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
                     >{% if language.abbrText %}
-                        <span class="ons-u-d-no@s">{{ language.abbrText }}</span><span class="ons-u-d-no@xxs@s">{{- language.text -}}</span>
+                        <span class="ons-u-d-no@s">{{ language.abbrText }}</span><span class="ons-u-d-no@2xs@s">{{- language.text -}}</span>
                     {% else %}
                         {{- language.text -}}
                     {% endif %}</a

src/components/language-selector/_macro.spec.js

@@ -96,7 +96,7 @@ describe('macro: language-selector', () => {
         it('does not have a visibility class applied', () => {
             const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
 
-            expect($('.ons-language-links').hasClass('ons-u-d-no@xxs@m')).toBe(false);
+            expect($('.ons-language-links').hasClass('ons-u-d-no@2xs@m')).toBe(false);
         });
 
         it('has the `abbrText` rendered', () => {
@@ -131,7 +131,7 @@ describe('macro: language-selector', () => {
         it('has the visibility class applied', () => {
             const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
 
-            expect($('.ons-language-links').hasClass('ons-u-d-no@xxs@m')).toBe(true);
+            expect($('.ons-language-links').hasClass('ons-u-d-no@2xs@m')).toBe(true);
         });
     });
 });