@ons/design-system 72.1.2 → 72.2.1

package/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');
     });
 

package/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);

package/components/navigation/_macro.njk

@@ -32,7 +32,6 @@
                             "ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected,
                             "minChars": params.siteSearchAutosuggest.minChars,
                             "ariaMinChars": params.siteSearchAutosuggest.ariaMinChars,
-                            "ariaResultsLabel": params.siteSearchAutosuggest.ariaResultsLabel,
                             "ariaOneResult": params.siteSearchAutosuggest.ariaOneResult,
                             "ariaNResults": params.siteSearchAutosuggest.ariaNResults,
                             "ariaLimitedResults": params.siteSearchAutosuggest.ariaLimitedResults,

package/components/navigation/_macro.spec.js

@@ -75,7 +75,6 @@ const SITE_SEARCH_AUTOSUGGEST = {
         "Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.",
     ariaYouHaveSelected: 'You have selected',
     ariaMinChars: 'Enter 3 or more characters for results.',
-    ariaResultsLabel: 'Search results',
     ariaOneResult: 'There is one result available.',
     ariaNResults: 'There are {n} results available.',
     ariaLimitedResults: 'Results have been limited to 10 results. Type more characters to improve your search',

package/components/panel/_macro.njk

@@ -50,7 +50,7 @@
                 <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
             {% endif %}
 
-            {% if params.title %}
+            {% if params.title and (params.variant not in ['bare', 'warn', 'warn-branded', 'announcement'] ) %}
                 {% if params.variant == 'error' %}
                     {% set defaultTitleTag = "h" ~ 2 %}
                 {% else %}

package/components/panel/_macro.spec.js

@@ -32,7 +32,7 @@ describe('macro: panel', () => {
             expect(results).toHaveNoViolations();
         });
 
-        it('has correct class', () => {
+        it('has correct panel variant class', () => {
             const $ = cheerio.load(
                 renderComponent('panel', {
                     ...EXAMPLE_PANEL_BASIC,
@@ -173,6 +173,20 @@ describe('macro: panel', () => {
         });
     });
 
+    describe.each(['bare', 'warn', 'warn-branded', 'announcement'])('mode: %s', (panelVariant) => {
+        it('does not render a title when `title` is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('panel', {
+                    ...EXAMPLE_PANEL_BASIC,
+                    title: 'Panel title',
+                    variant: panelVariant,
+                }),
+            );
+
+            expect($('.ons-panel__title').length).toBe(0);
+        });
+    });
+
     describe.each([
         ['error', 'h2'],
         ['success', 'div'],