Merge branch 'enhancement/164/new-hero-variant-topic-grey-with-bubble…

…s' of https://github.com/ONSdigital/design-system into enhancement/164/new-hero-variant-topic-grey-with-bubbles
ONSdigital · Jan 30, 2025 · d0f2479 · d0f2479
2 parents ddfcaa8 + eeba10b
commit d0f2479
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 28 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -0,0 +1 @@
+* @ONSdigital/design-team-devs
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -28,8 +28,9 @@ $button-shadow-size: 3px;
 
     &--search {
         .ons-icon {
-            @include mq(s, l) {
-                margin-right: 0.5rem;
+            margin: 0.125rem 0.5rem 0.125rem 0;
+            @include mq(xs, s) {
+                margin-right: 0;
             }
         }
     }

diff --git a/src/components/hero/_macro.spec.js b/src/components/hero/_macro.spec.js
@@ -93,7 +93,7 @@ describe('macro: hero', () => {
         expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
     });
 
-    it('renders circles when variant is `pale blue bubbles`', () => {
+    it('renders circles when variant is `pale blue`', () => {
         const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'pale-blue' }));
         expect($('.ons-hero--pale-blue .ons-hero__circles').length).toBe(1);
     });

diff --git a/src/components/message-list/_macro-options.md b/src/components/message-list/_macro-options.md
@@ -3,10 +3,11 @@
 | ariaLabel         | string           | false    | The `aria-label` attribute for the message list element. Defaults to “Message List”.                                         |
 | unreadText        | string           | true     | Text label for each unread message suffix displayed in brackets, for example, “New”                                          |
 | ariaLabelMetaData | string           | false    | The `aria-label` attribute for each message metadata information. Defaults to “Message metadata”.                            |
-| ariaLabelMsg      | string           | false    | The `aria-label` attribute for each message body preview. Defaults to “Message text”.                                        |
+| ariaLabelMsg      | string           | false    | (DEPRECATED) The `aria-label` attribute for each message body preview. Defaults to “Message text”.                           |
 | fromLabel         | string           | true     | The visually hidden screen reader “From” prefix for each message metadata information                                        |
 | dateLabel         | string           | true     | The visually hidden screen reader “Sent” prefix for each message metadata information                                        |
 | hiddenReadLabel   | string           | true     | The visually hidden screen reader “Read the message” prefix for each visually hidden link to the message conversation thread |
+| bodyLabel         | string           | false    | (NEW) The visually hidden screen reader "body" prefix for message body                                                       |
 | messages          | `Array<Message>` | true     | Settings for each [message item](#message)                                                                                   |
 
 ## Message

diff --git a/src/components/message-list/_macro.njk b/src/components/message-list/_macro.njk
@@ -15,10 +15,17 @@
                     <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--date ons-u-fs-s">
                         {{ message.dateText }}
                     </dd>
+                    <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--body ons-u-vh">
+                        {% if params.ariaLabelMsg and not params.bodyLabel %}
+                            {{ params.ariaLabelMsg | default("Message text") }}:
+                        {% else %}
+                            {{ params.bodyLabel | default("Message text") }}:
+                        {% endif %}
+                    </dt>
+                    <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--body ons-u-fs-r ons-u-mt-s">
+                        {{ message.body | safe }}
+                    </dd>
                 </dl>
-                <div class="ons-message-item__body" aria-label="{{ params.ariaLabelMsg | default("Message text") }}">
-                    {{ message.body | safe }}
-                </div>
                 <div class="ons-message-item__link ons-u-vh">
                     <a href="{{ message.subject.url }}">{{ params.hiddenReadLabel }}: {{ message.subject.text }}</a>
                 </div>

diff --git a/src/components/message-list/_macro.spec.js b/src/components/message-list/_macro.spec.js
@@ -10,6 +10,7 @@ const EXAMPLE_MESSAGE_LIST_MINIMAL = {
     fromLabel: 'From',
     dateLabel: 'Date',
     hiddenReadLabel: 'Read the message',
+    bodyLabel: 'Body',
     messages: [
         {
             id: 'message1',
@@ -39,7 +40,47 @@ const EXAMPLE_MESSAGE_LIST = {
     ...EXAMPLE_MESSAGE_LIST_MINIMAL,
     ariaLabel: 'Message list for ONS Business Surveys',
     ariaLabelMetaData: 'Message information',
-    ariaLabelMsg: 'Message preview',
+};
+
+const EXAMPLE_MESSAGE_LIST_WITH_DEPRECATED_ARIALABELMSG_PARAM = {
+    unreadText: 'New',
+    fromLabel: 'From',
+    dateLabel: 'Date',
+    hiddenReadLabel: 'Read the message',
+    ariaLabelMsg: 'Aria Label Msg Preview',
+    messages: [
+        {
+            id: 'message1',
+            unread: true,
+            subject: {
+                url: 'https://example.com/message/1',
+                text: 'Example message subject',
+            },
+            fromText: 'Example Sender 1',
+            dateText: 'Tue 4 Jul 2020 at 7:47',
+            body: 'An example message.',
+        },
+    ],
+};
+
+const EXAMPLE_MESSAGE_LIST_WIHTOUT_BODYLABEL_PARAM = {
+    unreadText: 'New',
+    fromLabel: 'From',
+    dateLabel: 'Date',
+    hiddenReadLabel: 'Read the message',
+    messages: [
+        {
+            id: 'message1',
+            unread: true,
+            subject: {
+                url: 'https://example.com/message/1',
+                text: 'Example message subject',
+            },
+            fromText: 'Example Sender 1',
+            dateText: 'Tue 4 Jul 2020 at 7:47',
+            body: 'An example message.',
+        },
+    ],
 };
 
 describe('macro: message-list', () => {
@@ -74,18 +115,6 @@ describe('macro: message-list', () => {
         expect($('.ons-message-item__metadata:first').attr('aria-label')).toBe('Message information');
     });
 
-    it('has `aria-label` attribute on `.ons-message-item__body` with the correct default value', () => {
-        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
-
-        expect($('.ons-message-item__body:first').attr('aria-label')).toBe('Message text');
-    });
-
-    it('has `aria-label` attribute on `.ons-message-item__body` using the provided value', () => {
-        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
-
-        expect($('.ons-message-item__body:first').attr('aria-label')).toBe('Message preview');
-    });
-
     it('has `unreadText` for unread messages', () => {
         const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
 
@@ -110,6 +139,35 @@ describe('macro: message-list', () => {
         expect($('.ons-message-item__link:first').text()).toContain('Read the message: ');
     });
 
+    it('has visually hidden label `bodyLabel` when only `bodyLabel` is provided`', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
+
+        expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Body:');
+    });
+
+    it('has visually hidden label `bodyLabel` when both `bodyLabel` and `ariaLabelMsg` are provided`', () => {
+        const $ = cheerio.load(
+            renderComponent('message-list', {
+                ...EXAMPLE_MESSAGE_LIST_MINIMAL,
+                ariaLabelMsg: 'Aria Label Msg Preview',
+            }),
+        );
+
+        expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Body:');
+    });
+
+    it('has visually hidden deprecated label `ariaLabelMsg` when only `ariaLabelMsg` is provided', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_WITH_DEPRECATED_ARIALABELMSG_PARAM));
+
+        expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Aria Label Msg Preview:');
+    });
+
+    it('has the defualt text for visually hidden label `bodyLabel` when both `bodyLabel` and `ariaLabelMsg` are not provided', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_WIHTOUT_BODYLABEL_PARAM));
+
+        expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Message text:');
+    });
+
     it('has message as expected', () => {
         const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
 
@@ -119,7 +177,7 @@ describe('macro: message-list', () => {
         expect($message2.find('.ons-message-item__subject').attr('id')).toBe('message2');
         expect($message2.find('.ons-message-item__metadata-value--from').text().trim()).toBe('Example Sender 2');
         expect($message2.find('.ons-message-item__metadata-value--date').text().trim()).toBe('Mon 1 Oct 2019 at 9:52');
-        expect($message2.find('.ons-message-item__body').text().trim()).toBe('Another example message.');
+        expect($message2.find('.ons-message-item__metadata-value--body').text().trim()).toBe('Another example message.');
         expect($message2.find('.ons-message-item__link a').attr('href')).toBe('https://example.com/message/2');
     });
 

diff --git a/src/components/message-list/_message-list.scss b/src/components/message-list/_message-list.scss
@@ -5,7 +5,7 @@
 .ons-message-item {
     list-style: none;
     margin-bottom: 2rem;
-    padding-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
 
     &:not(:last-child) {
         border-bottom: 1px solid var(--ons-color-borders);

diff --git a/src/patterns/send-and-reply-to-messages/example-message-list.njk b/src/patterns/send-and-reply-to-messages/example-message-list.njk
@@ -8,7 +8,6 @@
         "dateLabel": "Sent",
         "hiddenReadLabel": "Read the message",
         "ariaLabelMetaData": "Message information",
-        "ariaLabelMsg": "Message preview",
         "messages": [
             {
                 "id": "message-list-example-1",

diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
@@ -1,7 +1,7 @@
 html {
     @include font-smoothing;
 
-    font-size: $base;
+    font-size: calc((100% / 16) * strip-unit($base));
 }
 
 body {

diff --git a/src/scss/helpers/_mq.scss b/src/scss/helpers/_mq.scss
@@ -57,7 +57,7 @@
 /// @return {Number} - Unitless number
 @function strip-unit($number) {
     @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
-        @return $number / ($number * 0 + 1);
+        @return math.div($number, ($number * 0 + 1));
     }
 
     @return $number;

diff --git a/yarn.lock b/yarn.lock
@@ -8822,9 +8822,9 @@ nan@^2.12.1:
   integrity sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==
 
 nanoid@^3.3.7:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
-  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
 
 nanomatch@^1.2.9:
   version "1.2.13"