@ons/design-system 65.0.0 → 65.1.0

package/components/list/_macro.njk

@@ -20,13 +20,20 @@
     {% else %}
         {% set listEl = 'ul' %}
     {% endif %}
-        <{{listEl}} {% if params.id %}id="{{ params.id }}"{% endif %} class="ons-list{% if listEl == 'p' %} ons-list--p{% endif %}{% if params.classes %} {{ params.classes -}}{% endif %}{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% endif %}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
-            {%- for item in params.itemsList  -%}
-                {% if listLength > 1 or listEl == 'ul' %}
+    <{{ listEl }} {% if params.id %}id="{{ params.id }}"{% endif %} class="ons-list{% if listEl == 'p' %} ons-list--p{% endif %}{% if params.classes %} {{ params.classes -}}{% endif %}{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% endif %}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
+        {%- for item in params.itemsList  -%}
+            {% set sublistClasses = item.listClasses if item.listClasses else '' %}
+            {% set sublistParams = {
+                'variants': variants,
+                'itemsList': item.itemsList,
+                'classes': sublistClasses
+            } %}
+            {% if listLength > 1 or listEl == 'ul' %}
                 <li class="ons-list__item{% if item.listClasses %} {{ item.listClasses }}{% endif %}"{% if item.current %} aria-current="true"{% endif %}>
-                {% endif %}
-                    {% set itemText = item.text %}
-                    {% set itemIconType = item.iconType if item.iconType else iconType %}
+            {% endif %}
+                {% set itemText = item.text %}
+                    {% if item.text %}
+                    {% set itemIconType = item.iconType if item.iconType else iconType %} {% endif %}
 
                     {# For Craft support we also support title and navigation title #}
                     {% if item.navigationTitle %}
@@ -84,9 +91,14 @@
                             }}
                         {%- endif -%} </span>
                     {%- endif -%}
-                {% if listLength > 1 or listEl == 'ul' %}
-                </li>
+                {% if item.itemsList %}
+                    {# Handle nested lists with recursive call for sub layer #}
+                    {{ onsList(sublistParams) }}
                 {% endif %}
-            {%- endfor -%}
-        </{{listEl}}>
+            {% if listLength > 1 or listEl == 'ul' %}
+                </li>
+            {% endif %}
+        {%- endfor -%}
+    </{{ listEl }}>
+
 {% endmacro %}

package/components/list/_macro.spec.js

@@ -21,6 +21,13 @@ const EXAMPLE_ITEM_NAVIGATION_TITLE = {
   title: 'Long article title',
   navigationTitle: 'Nav friendly title',
 };
+const EXAMPLE_NESTED_LIST_TEXT_ITEMS = {
+  itemsList: [
+    { text: 'First item' },
+    { text: 'Second item' },
+    { text: 'Third item', itemsList: [{ text: 'First item' }, { text: 'Second item' }] },
+  ],
+};
 
 describe('macro: list', () => {
   describe('list element', () => {
@@ -615,4 +622,39 @@ describe('macro: list', () => {
       expect($('#first + .ons-list__suffix').length).toBe(1);
     });
   });
+
+  describe('nested list element', () => {
+    it('has provided variant style class when one variant is provided', () => {
+      const $ = cheerio.load(
+        renderComponent('list', {
+          ...EXAMPLE_NESTED_LIST_TEXT_ITEMS,
+          variants: 'dashed',
+        }),
+      );
+
+      expect($('.ons-list--dashed').length).toBe(2);
+    });
+
+    it('has provided variant style classes when multiple variants are provided', () => {
+      const $ = cheerio.load(
+        renderComponent('list', {
+          ...EXAMPLE_NESTED_LIST_TEXT_ITEMS,
+          variants: ['dashed', 'inline'],
+        }),
+      );
+
+      expect($('.ons-list').hasClass('ons-list--dashed')).toBe(true);
+      expect($('.ons-list').hasClass('ons-list--inline')).toBe(true);
+    });
+
+    it('has the expected quantity of <li> elements when a <ol> element is specified', () => {
+      const $ = cheerio.load(
+        renderComponent('list', {
+          ...EXAMPLE_NESTED_LIST_TEXT_ITEMS,
+        }),
+      );
+
+      expect($('.ons-list li').length).toBe(5);
+    });
+  });
 });

package/components/navigation/_macro.njk

@@ -14,7 +14,7 @@
                     {% endif %}
                     {{ onsAutosuggest({
                         "id": "ons-site-search",
-                        "containerClasses": "ons-autosuggest-input--header",
+                        "containerClasses": "ons-autosuggest--header",
                         "classes": autosuggestClasses,
                         "label": {
                             "text": params.siteSearchAutosuggest.label,
@@ -42,7 +42,7 @@
                 <ul class="ons-navigation__list">
                     {% for item in params.navigation.itemsList %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
-                           <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{{ item.title }}</a>
+                           <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
                         </li>
                     {% endfor %}
                 </ul>
@@ -55,7 +55,7 @@
                 <ul class="ons-navigation__list ons-navigation__list">
                     {% for item in params.navigation.subNavigation.itemsList %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
-                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
                         </li>
                     {% endfor %}
                 </ul>
@@ -68,7 +68,7 @@
                 "type": "button",
                 "variants": ["mobile", "dropdown"],
                 "attributes": {
-                    "aria-label": "Toggle section navigation",
+                    "aria-label": "Toggle " + params.navigation.currentPageTitle + " menu" if params.navigation.currentPageTitle else "Toggle section menu",
                     "aria-controls": params.navigation.subNavigation.id,
                     "aria-expanded": "false"
                 }
@@ -81,14 +81,14 @@
                         </li>
                         {% for item in params.navigation.subNavigation.itemsList %}
                             <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
-                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>{{ item.title }}</a>
+                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
                                 {% if item.sections %}
                                     {% for section in item.sections %}
                                         {% if section.sectionTitle %}<h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>{% endif %}
                                         <ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs">
                                             {% for child in section.children %}
                                                 <li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and child.url in params.navigation.currentPath) }}">
-                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>
+                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>{% if child.title %}{{ child.title }}{% elif child.text %}{{ child.text }}{% endif %}</a>
                                                 </li>
                                             {% endfor %}
                                         </ul>

package/components/navigation/_macro.spec.js

@@ -10,7 +10,7 @@ const PARAMS = {
   id: 'main-nav',
   ariaLabel: 'Main menu',
   currentPath: ['#1', '/sub-item-1', '/sub-item-2/child-item-1'],
-  currentPageTitle: 'Main nav item 2',
+  currentPageTitle: 'main nav item 2',
   itemsList: [
     {
       title: 'Main nav item 1',
@@ -130,7 +130,7 @@ describe('macro: navigation', () => {
         accessiblePlaceholder: true,
         autocomplete: 'off',
         id: 'ons-site-search',
-        containerClasses: 'ons-autosuggest-input--header',
+        containerClasses: 'ons-autosuggest--header',
         classes: 'ons-input-search ons-input-search--icon',
         label: {
           text: 'Search the design system',
@@ -210,12 +210,12 @@ describe('macro: navigation', () => {
       faker.renderComponent('navigation', { navigation: PARAMS });
 
       expect(buttonSpy.occurrences).toContainEqual({
-        text: 'Main nav item 2',
+        text: 'main nav item 2',
         classes: 'ons-u-d-no ons-js-sub-navigation-button',
         variants: ['mobile', 'dropdown'],
         type: 'button',
         attributes: {
-          'aria-label': 'Toggle section navigation',
+          'aria-label': 'Toggle main nav item 2 menu',
           'aria-controls': 'sub-nav',
           'aria-expanded': 'false',
         },

package/components/pagination/_macro.njk

@@ -1,4 +1,5 @@
 {% macro onsPagination(params) %}
+    {% from "components/icon/_macro.njk" import onsIcon %}
     {% set currentPageIndex = params.currentPageNumber|int %}
     {% set totalPages = params.pages | length|int %}
     {% set position = "Page " ~ currentPageIndex ~ " of " ~ totalPages %}
@@ -13,7 +14,14 @@
             {% if currentPageIndex != 1 %}
                 {% set prevPageIndex = currentPageIndex - 2 %}
                 <li class="ons-pagination__item ons-pagination__item--previous">
-                    <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">{{ params.previous | default("Previous") }}</a>
+                    <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link ons-pagination__link--no-underline" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">
+                        {{ onsIcon({
+                            "iconType": 'arrow-previous',
+                            "classes": 'ons-u-mr-xs',
+                            "iconSize": 'm'
+                        }) }}
+                        <span class="ons-pagination__link-text">{{ params.previous | default("Previous") }}</span>
+                    </a>
                 </li>
             {% endif %}
             {% if currentPageIndex > 2 %}
@@ -60,7 +68,14 @@
             {% endif %}
             {% if totalPages > 1 and totalPages != currentPageIndex %}
                 <li class="ons-pagination__item ons-pagination__item--next">
-                    <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">{{ params.next | default("Next") }}</a>
+                    <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link ons-pagination__link--no-underline" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">
+                        <span class="ons-pagination__link-text">{{ params.next | default("Next") }}</span>
+                        {{ onsIcon({
+                            "iconType": 'arrow-next',
+                            "classes": 'ons-u-ml-xs',
+                            "iconSize": 'm'
+                        }) }}
+                    </a>
                 </li>
             {% endif %}
         </ul>

package/components/pagination/_pagination.scss

@@ -39,12 +39,26 @@ $pagination-item-width: 2.5rem;
     min-width: $pagination-item-width;
   }
 
+  &__link--no-underline {
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
   &__link {
     border-radius: 3px;
     box-shadow: none;
     display: block;
     padding: $pagination-item-padding;
 
+    &-text {
+      @extend .ons-u-fs-r--b;
+
+      display: inline-block;
+      vertical-align: middle;
+    }
+
     &:focus {
       border-radius: 0;
     }

package/components/question/example-question-interviewer-note.njk

@@ -25,7 +25,7 @@ layout: ~
 {% block main %}
     {% call onsQuestion({
         "title": "<mark class=\"ons-instruction\">Interviewer note:</mark>Who to interview",
-        "instruction": "<p>Only interview a person who was usually living at the property on <em>Sunday 21 March 2021</em>.</p><p>If none of those house members are available, you must save and sign out and return to the address to interview one of them at a later date.</p>",
+        "instruction": "<p>Only interview a person who was usually living at the property on <strong>Sunday 21 March 2021</strong>.</p><p>If none of those house members are available, you must save and sign out and return to the address to interview one of them at a later date.</p>",
         "submitButton": {
             "variants": "timer",
             "text": "Continue"

package/components/radios/example-radios-with-clear-button-expanded.njk

@@ -0,0 +1,98 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+{% from "components/button/_macro.njk" import onsButton %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{% call onsQuestion({
+    "title": "What is your religion?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsPanel({
+            "body": '<p>This question is <strong>voluntary</strong></p>',
+            "classes": 'ons-u-mb-m'
+        })
+    }}
+    <form onsubmit="return false;">
+        {{
+            onsRadios({
+                "dontWrap": true,
+                "name": "religion",
+                "clearRadios": {
+                    "text": "Clear selection",
+                    "name": "clear-radios",
+                    "ariaClearText": "You can clear your answer using the clear selection button after the radio inputs",
+                    "ariaClearedText": "You have cleared your answer"
+                },
+                "radios": [
+                    {
+                        "id": "none",
+                        "label": {
+                            "text": "No religion"
+                        },
+                        "value": "none"
+                    },
+                    {
+                        "id": "christian",
+                        "label": {
+                            "text": "Christian",
+                            "description": "Including Church of England, Catholic, Protestant and all other Christian denominations"
+                        },
+                        "value": "christian"
+                    },
+                    {
+                        "id": "buddhist",
+                        "label": {
+                            "text": "Buddhist"
+                        },
+                        "value": "buddhist"
+                    },
+                    {
+                        "id": "hindu",
+                        "label": {
+                            "text": "Hindu"
+                        },
+                        "value": "hindu"
+                    },
+                    {
+                        "id": "jewish",
+                        "label": {
+                            "text": "Jewish"
+                        },
+                        "value": "jewish"
+                    },
+                    {
+                        "id": "muslim",
+                        "label": {
+                            "text": "Muslim"
+                        },
+                        "value": "muslim"
+                    },
+                    {
+                        "id": "sikh",
+                        "label": {
+                            "text": "Sikh"
+                        },
+                        "value": "sikh"
+                    },
+                    {
+                        "id": "other-radio",
+                        "label": {
+                            "text": "Any other religion"
+                        },
+                        "value": "other",
+                        "checked": true,
+                        "other": {
+                            "otherType": "input",
+                            "id": "other-textbox",
+                            "name": "other-answer",
+                            "label": {
+                                "text": "Enter your religion"
+                            }
+                        }
+                    }
+                ]
+            })
+        }}
+    </form>
+{% endcall %}

package/components/radios/example-radios-with-revealed-checkboxes-expanded.njk

@@ -0,0 +1,70 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+
+{{
+    onsRadios({
+        "legend": "How would you like us to contact you?",
+        "name": "contact",
+        "borderless": true,
+        "radios": [
+            {
+                "id": "post",
+                "label": {
+                    "text": "By post"
+                },
+                "value": "post"
+            },
+            {
+                "id": "email",
+                "label": {
+                    "text": "By email"
+                },
+                "value": "email"
+            },
+            {
+                "id": "phone",
+                "label": {
+                    "text": "By phone"
+                },
+                "value": "phone",
+                "checked": true,
+                "other": {
+                    "otherType": "checkboxes",
+                    "selectAllChildren": true,
+                    "id": "phone-time",
+                    "name": "phone-time",
+                    "legend": "Select preferred times of day",
+                    "checkboxes": [
+                        {
+                            "value": "anytime",
+                            "id": "anytime",
+                            "label": {
+                                "text": "Anytime of day"
+                            }
+                        },
+                        {
+                            "value": "morning",
+                            "id": "morning",
+                            "label": {
+                                "text": "Morning"
+                            }
+                        },
+                        {
+                            "value": "afternoon",
+                            "id": "afternoon",
+                            "label": {
+                                "text": "Afternoon"
+                            }
+                        },
+                        {
+                            "value": "evening",
+                            "id": "evening",
+                            "label": {
+                                "text": "Evening"
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    })
+}}

package/components/radios/example-radios-with-revealed-radios-expanded.njk

@@ -0,0 +1,69 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+
+{{
+    onsRadios({
+        "legend": "How would you like us to contact you?",
+        "name": "contact",
+        "borderless": true,
+        "radios": [
+            {
+                "id": "post",
+                "label": {
+                    "text": "By post"
+                },
+                "value": "post"
+            },
+            {
+                "id": "email",
+                "label": {
+                    "text": "By email"
+                },
+                "value": "email"
+            },
+            {
+                "id": "phone",
+                "label": {
+                    "text": "By phone"
+                },
+                "value": "phone",
+                "checked": true,
+                "other": {
+                    "otherType": "radios",
+                    "id": "phone-time",
+                    "name": "phone-time",
+                    "legend": "Choose preferred time of day",
+                    "radios": [
+                        {
+                            "value": "anytime",
+                            "id": "anytime",
+                            "label": {
+                                "text": "Anytime of day"
+                            }
+                        },
+                        {
+                            "value": "morning",
+                            "id": "morning",
+                            "label": {
+                                "text": "Morning"
+                            }
+                        },
+                        {
+                            "value": "afternoon",
+                            "id": "afternoon",
+                            "label": {
+                                "text": "Afternoon"
+                            }
+                        },
+                        {
+                            "value": "evening",
+                            "id": "evening",
+                            "label": {
+                                "text": "Evening"
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    })
+}}

package/components/radios/example-radios-with-revealed-select-expanded.njk

@@ -0,0 +1,70 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/radios/_macro.njk" import onsRadios %}
+
+{% call onsQuestion({
+    "title": "How would you like us to contact you?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsRadios({
+            "dontWrap": true,
+            "name": "contact",
+            "radios": [
+                {
+                    "id": "post",
+                    "label": {
+                        "text": "By post"
+                    },
+                    "value": "post"
+                },
+                {
+                    "id": "email",
+                    "label": {
+                        "text": "By email"
+                    },
+                    "value": "email"
+                },
+                {
+                    "id": "phone",
+                    "label": {
+                        "text": "By phone"
+                    },
+                    "value": "phone",
+                    "checked": true,
+                    "other": {
+                        "otherType": "select",
+                        "id": "phone-time",
+                        "name": "phone-time",
+                        "label": {
+                            "text": "Choose preferred time of day"
+                        },
+                        "options": [
+                            {
+                                "value": "",
+                                "text": "Select an option",
+                                "disabled": true,
+                                "selected": true
+                            },
+                            {
+                                "value": "anytime",
+                                "text": "Any time of day"
+                            },
+                            {
+                                "value": "morning",
+                                "text": "Morning"
+                            },
+                            {
+                                "value": "afternoon",
+                                "text": "Afternoon"
+                            },
+                            {
+                                "value": "evening",
+                                "text": "Evening"
+                            }
+                        ]
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/radios/example-radios-with-revealed-text-input-expanded.njk

@@ -0,0 +1,81 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "How do you usually travel to work?",
+    "classes": "ons-u-mt-no",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsRadios({
+            "dontWrap": true,
+            "name": "travel",
+            "radios": [
+                {
+                    "id": "home",
+                    "label": {
+                        "text": "Work mainly from home"
+                    },
+                    "value": "home"
+                },
+                {
+                    "id": "car",
+                    "label": {
+                        "text": "Car or van"
+                    },
+                    "value": "car"
+                },
+                {
+                    "id": "underground",
+                    "label": {
+                        "text": "Underground, metro, light rail or tram"
+                    },
+                    "value": "underground"
+                },
+                {
+                    "id": "train",
+                    "label": {
+                        "text": "Train"
+                    },
+                    "value": "train"
+                },
+                {
+                    "id": "bus",
+                    "label": {
+                        "text": "Bus, minibus or coach"
+                    },
+                    "value": "bus"
+                },
+                {
+                    "id": "bicycle",
+                    "label": {
+                        "text": "Bicycle"
+                    },
+                    "value": "bicycle"
+                },
+                {
+                    "id": "walk",
+                    "label": {
+                        "text": "Walk"
+                    },
+                    "value": "walk"
+                },
+                {
+                    "id": "other-radio",
+                    "label": {
+                        "text": "Other"
+                    },
+                    "value": "other",
+                    "checked": true,
+                    "other": {
+                        "id": "other-textbox",
+                        "name": "other-answer",
+                        "label": {
+                            "text": "Enter how you travel"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}