From 75c7901e5a69435777901d9f6f9cb81e17211bfa Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya
 <86783201+precious-onyenaucheya-ons@users.noreply.github.com>
Date: Thu, 25 Jul 2024 08:33:42 +0100
Subject: [PATCH] Standardise padding and margin utility classes (#3272)

* update padding

* update component

* approve test

* add important keyword to utility class

* update utility class

* update summary macro
---
 ...rch-with-character-check_0_document_0_desktop.png |  2 +-
 ...arch-with-character-check_0_document_1_tablet.png |  2 +-
 ...arch-with-character-check_0_document_2_mobile.png |  4 ++--
 ...put_example-input-search_0_document_0_desktop.png |  2 +-
 ...nput_example-input-search_0_document_1_tablet.png |  4 ++--
 ...nput_example-input-search_0_document_2_mobile.png |  4 ++--
 lib/render-example.js                                |  2 +-
 lib/render-page-list.js                              |  2 +-
 src/components/header/_macro.spec.js                 |  2 +-
 src/components/navigation/_macro.njk                 |  2 +-
 src/components/navigation/_macro.spec.js             |  2 +-
 src/components/summary/_macro.njk                    |  2 +-
 src/layout/_dsTemplate.njk                           |  2 +-
 src/scss/utilities/_index.scss                       |  2 +-
 src/scss/utilities/{_pad.scss => _padding.scss}      | 12 ++++++------
 15 files changed, 23 insertions(+), 23 deletions(-)
 rename src/scss/utilities/{_pad.scss => _padding.scss} (74%)

diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search-with-character-check_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search-with-character-check_0_document_0_desktop.png
index 97f5e61d79..27505d88d1 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search-with-character-check_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search-with-character-check_0_document_0_desktop.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8c14811f7afcf0c57d263e9a1626a74042b31b3bf34bf1194a5d96c810ea48d0
+oid sha256:d453e33695f34506439f64c9cebe2e2142effb5ddda549996ed377331a33e592
 size 13361
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search-with-character-check_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search-with-character-check_0_document_1_tablet.png
index 36c9715105..4defbeed0a 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search-with-character-check_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search-with-character-check_0_document_1_tablet.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f5291eb3cb73e92c6942ae1188f2a4bb5eabbda7c7216cea02e9c0ff51e76d49
+oid sha256:f39f586589d64cfd458882ce1a58585c18a0a487d07583635bbe8471e7e0f7ec
 size 8166
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search-with-character-check_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search-with-character-check_0_document_2_mobile.png
index a3a68fa862..29ca326c08 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search-with-character-check_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search-with-character-check_0_document_2_mobile.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5168f38992c94caafb94f6559b63545e74edf014262f5a093bbf34a725ff5165
-size 5171
+oid sha256:5271c3d07ab855b12da062e945cec1486a2c93c1ae6f569050e444cc92b1527a
+size 5172
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search_0_document_0_desktop.png
index ddb6d6339c..c01a5ede59 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search_0_document_0_desktop.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:efdfe5f8ab8f4db6e6236da4e07f7fb30e5e7b8b1cd331a6d93efebb4a85b116
+oid sha256:9028cc5e2ea00762a79d32dbcff8f4e2c589e9f95ba5839c7993f148897a8642
 size 13290
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search_0_document_1_tablet.png
index 5ffb5275c9..e4c3243191 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search_0_document_1_tablet.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:967b21213295cdcbb020d9c74be8acb253aed5abbe7a7102cc32046b580b878e
-size 8098
+oid sha256:c7ed9af4221c6b70b95da56b8a9863ccf0a611191b6736d1f97c4a8598216cc2
+size 8097
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search_0_document_2_mobile.png
index 01eab9f14f..ca591807c5 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_input_example-input-search_0_document_2_mobile.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:53250b89852b27fee1c43008d1bc6b53cd9aad5d1df59424675347f4b8df42b7
-size 5107
+oid sha256:af3cfb246dd984ca4e6c5932b85999ed52c18c278b283436d939e03118edca78
+size 5109
diff --git a/lib/render-example.js b/lib/render-example.js
index e09b655950..231e7ed853 100644
--- a/lib/render-example.js
+++ b/lib/render-example.js
@@ -16,7 +16,7 @@ export default function renderExample(templatePath, nunjucksEnvironment) {
                 {% extends 'layout/_template.njk' %}
 
                 {% block body %}
-                    <div class="ons-u-p-m">
+                    <div class="ons-u-p-l">
                         ${data.body}
                     </div>
                 {% endblock %}
diff --git a/lib/render-page-list.js b/lib/render-page-list.js
index 4e48b8bdea..87f2a3c660 100644
--- a/lib/render-page-list.js
+++ b/lib/render-page-list.js
@@ -7,7 +7,7 @@ export default function renderPageList(pages, title, pageSearch = '') {
                 <title>${title}</title>
                 <link rel="stylesheet" href="/css/main.css">
             </head>
-            <body class="ons-u-p-m">
+            <body class="ons-u-p-l">
                 <h1>${title}</h1>
                 ${pageSearch}
                 <ul class="ons-list ons-list--dashed ons-u-pb-l">
diff --git a/src/components/header/_macro.spec.js b/src/components/header/_macro.spec.js
index d6ab722f77..3144d5ae7e 100644
--- a/src/components/header/_macro.spec.js
+++ b/src/components/header/_macro.spec.js
@@ -924,7 +924,7 @@ describe('mode: with site search autosuggest', () => {
                 autocomplete: 'off',
                 classes: 'ons-input-search ons-input-search--icon',
                 label: {
-                    classes: 'ons-u-pl-m ons-label--white',
+                    classes: 'ons-u-pl-l ons-label--white',
                     id: 'ons-site-search-label',
                     text: 'label',
                 },
diff --git a/src/components/navigation/_macro.njk b/src/components/navigation/_macro.njk
index 57b74198f1..37b2c316b6 100644
--- a/src/components/navigation/_macro.njk
+++ b/src/components/navigation/_macro.njk
@@ -8,7 +8,7 @@
             {% if params.siteSearchAutosuggest %}
                 <div class="ons-navigation-search ons-js-navigation-search">
                     {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
-                    {% set autosuggestLabelClasses = "ons-u-pl-m" %}
+                    {% set autosuggestLabelClasses = "ons-u-pl-l" %}
                     {% if params.variants == "neutral" %}
                         {% set autosuggestClasses = autosuggestClasses + ' ons-input-search--dark' %}
                     {% else %}
diff --git a/src/components/navigation/_macro.spec.js b/src/components/navigation/_macro.spec.js
index d0187e037a..808bab23c5 100644
--- a/src/components/navigation/_macro.spec.js
+++ b/src/components/navigation/_macro.spec.js
@@ -138,7 +138,7 @@ describe('macro: navigation', () => {
                     classes: 'ons-input-search ons-input-search--icon',
                     label: {
                         id: 'ons-site-search-label',
-                        classes: 'ons-u-pl-m ons-label--white',
+                        classes: 'ons-u-pl-l ons-label--white',
                     },
                 },
             });
diff --git a/src/components/summary/_macro.njk b/src/components/summary/_macro.njk
index dbd7c0ad0d..3ad438ef3b 100644
--- a/src/components/summary/_macro.njk
+++ b/src/components/summary/_macro.njk
@@ -135,7 +135,7 @@
 
                     {% if group.summaryLink %}
                         <div
-                            class="ons-summary__link{{ ' ons-u-pt-s' if group.placeholderText or group.rows }}{{ ' ons-u-bt' if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' }}{{ ' ons-u-mb-xl' if not group.last }}"
+                            class="ons-summary__link{{ ' ons-u-pt-s' if params.variant != 'card' and (group.placeholderText or group.rows) }}{{ ' ons-u-bt' if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' }}{{ ' ons-u-mb-xl' if not group.last }}"
                         >
                             {% set link %}
                                 <a
diff --git a/src/layout/_dsTemplate.njk b/src/layout/_dsTemplate.njk
index 26ff20039b..1353923942 100644
--- a/src/layout/_dsTemplate.njk
+++ b/src/layout/_dsTemplate.njk
@@ -6,7 +6,7 @@
         "label": {
             "text": "Search",
             "id": "search-field-label",
-            "classes": "ons-u-pl-m"
+            "classes": "ons-u-pl-l"
         },
         "classes": "ons-input-search ons-input-search--icon ons-input-search--dark ons-u-mb-s",
         "accessiblePlaceholder": true,
diff --git a/src/scss/utilities/_index.scss b/src/scss/utilities/_index.scss
index a81e3ae66f..d0f2222c1c 100644
--- a/src/scss/utilities/_index.scss
+++ b/src/scss/utilities/_index.scss
@@ -5,7 +5,7 @@
 @import './grid';
 @import './highlight';
 @import './margin';
-@import './pad';
+@import './padding';
 @import './typography';
 @import './utilities';
 @import './visibility';
diff --git a/src/scss/utilities/_pad.scss b/src/scss/utilities/_padding.scss
similarity index 74%
rename from src/scss/utilities/_pad.scss
rename to src/scss/utilities/_padding.scss
index e64910a036..4ca210c023 100644
--- a/src/scss/utilities/_pad.scss
+++ b/src/scss/utilities/_padding.scss
@@ -1,11 +1,11 @@
-// e.g ons-u-pl-m
 $sizes: (
-    no: 0 !important,
-    xxs: 0.3rem,
+    no: 0,
+    xxs: 0.25rem,
     xs: 0.5rem,
     s: 1rem,
-    m: 2rem,
-    l: 3rem,
+    m: 1.5rem,
+    l: 2rem,
+    xl: 3rem,
 );
 
 $padding: (
@@ -19,7 +19,7 @@ $padding: (
 @each $key, $value in $sizes {
     @each $abbr, $dec in $padding {
         @include bp-suffix(ons-u-#{$abbr}-#{$key}, $create-between-breakpoints: true) {
-            #{$dec}: #{$value};
+            #{$dec}: #{$value} !important;
         }
     }
 }