@ons/design-system 70.0.7 → 70.0.9

package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js

@@ -3,129 +3,129 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 const SCREEN_READER_TIMEOUT_DELAY = 300;
 
 const EXAMPLE_MUTUALLY_EXCLUSIVE_TEXTAREA_PARAMS = {
-  id: 'feedback',
-  name: 'feedback',
-  width: '30',
-  legend: 'What do you think of this service?',
-  label: {
-    text: 'Enter your feedback',
-    description: 'For example describe any difficulties you experienced in the use of this service',
-  },
-  charCheckLimit: {
-    limit: 200,
-    charCountSingular: 'You have {x} character remaining',
-    charCountPlural: 'You have {x} characters remaining',
-  },
-  mutuallyExclusive: {
-    or: 'Or',
-    deselectMessage: 'Selecting this will clear your feedback',
-    deselectGroupAdjective: 'cleared',
-    deselectExclusiveOptionAdjective: 'deselected',
-    exclusiveOptions: [
-      {
-        id: 'feedback-exclusive-option',
-        name: 'no-feedback',
-        value: 'no-feedback',
-        label: {
-          text: 'I dont want to provide feedback',
-        },
-      },
-    ],
-  },
+    id: 'feedback',
+    name: 'feedback',
+    width: '30',
+    legend: 'What do you think of this service?',
+    label: {
+        text: 'Enter your feedback',
+        description: 'For example describe any difficulties you experienced in the use of this service',
+    },
+    charCheckLimit: {
+        limit: 200,
+        charCountSingular: 'You have {x} character remaining',
+        charCountPlural: 'You have {x} characters remaining',
+    },
+    mutuallyExclusive: {
+        or: 'Or',
+        deselectMessage: 'Selecting this will clear your feedback',
+        deselectGroupAdjective: 'cleared',
+        deselectExclusiveOptionAdjective: 'deselected',
+        exclusiveOptions: [
+            {
+                id: 'feedback-exclusive-option',
+                name: 'no-feedback',
+                value: 'no-feedback',
+                label: {
+                    text: 'I dont want to provide feedback',
+                },
+            },
+        ],
+    },
 };
 
 const FAKE_TEXTAREA_INPUT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
 
 describe('script: mutually-exclusive', () => {
-  describe('textarea', () => {
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('textarea', EXAMPLE_MUTUALLY_EXCLUSIVE_TEXTAREA_PARAMS));
-    });
-
-    describe('Given the user populated the textarea', () => {
-      beforeEach(async () => {
-        await page.type('#feedback', FAKE_TEXTAREA_INPUT);
-      });
-
-      describe('when the user clicks the mutually exclusive option', () => {
+    describe('textarea', () => {
         beforeEach(async () => {
-          await page.click('#feedback-exclusive-option');
-        });
-
-        it('then the mutually exclusive option should be checked', async () => {
-          const isChecked = await page.$eval('#feedback-exclusive-option', (node) => node.checked);
-          expect(isChecked).toBe(true);
+            await setTestPage('/test', renderComponent('textarea', EXAMPLE_MUTUALLY_EXCLUSIVE_TEXTAREA_PARAMS));
         });
 
-        it('then the textarea should be cleared', async () => {
-          const textareaValue = await page.$eval('#feedback', (node) => node.value);
-          expect(textareaValue).toBe('');
-        });
-
-        it('then the characters remaining readout should be reset', async () => {
-          const limitText = await page.$eval('#feedback-lim', (node) => node.textContent);
-          expect(limitText).toBe('You have 200 characters remaining');
-        });
-
-        it('then the aria alert should tell the user that the textarea has been cleared', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
-
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('Enter your feedback cleared.');
+        describe('Given the user populated the textarea', () => {
+            beforeEach(async () => {
+                await page.type('#feedback', FAKE_TEXTAREA_INPUT);
+            });
+
+            describe('when the user clicks the mutually exclusive option', () => {
+                beforeEach(async () => {
+                    await page.click('#feedback-exclusive-option');
+                });
+
+                it('then the mutually exclusive option should be checked', async () => {
+                    const isChecked = await page.$eval('#feedback-exclusive-option', (node) => node.checked);
+                    expect(isChecked).toBe(true);
+                });
+
+                it('then the textarea should be cleared', async () => {
+                    const textareaValue = await page.$eval('#feedback', (node) => node.value);
+                    expect(textareaValue).toBe('');
+                });
+
+                it('then the characters remaining readout should be reset', async () => {
+                    const limitText = await page.$eval('#feedback-lim', (node) => node.textContent);
+                    expect(limitText).toBe('You have 200 characters remaining');
+                });
+
+                it('then the aria alert should tell the user that the textarea has been cleared', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('Enter your feedback cleared.');
+                });
+            });
         });
-      });
-    });
 
-    describe('Given the user has checked the mutually exclusive exclusiveOption', () => {
-      beforeEach(async () => {
-        await page.click('#feedback-exclusive-option');
-      });
+        describe('Given the user has checked the mutually exclusive exclusiveOption', () => {
+            beforeEach(async () => {
+                await page.click('#feedback-exclusive-option');
+            });
 
-      describe('when the user populates the textarea', () => {
-        beforeEach(async () => {
-          await page.type('#feedback', FAKE_TEXTAREA_INPUT);
-        });
+            describe('when the user populates the textarea', () => {
+                beforeEach(async () => {
+                    await page.type('#feedback', FAKE_TEXTAREA_INPUT);
+                });
 
-        it('then the exclusive option should be unchecked', async () => {
-          const isChecked = await page.$eval('#feedback-exclusive-option', (node) => node.checked);
-          expect(isChecked).toBe(false);
-        });
+                it('then the exclusive option should be unchecked', async () => {
+                    const isChecked = await page.$eval('#feedback-exclusive-option', (node) => node.checked);
+                    expect(isChecked).toBe(false);
+                });
 
-        it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('I dont want to provide feedback deselected.');
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('I dont want to provide feedback deselected.');
+                });
+            });
         });
-      });
-    });
 
-    describe('Given the user has not populated the textarea or checked the exclusive option', () => {
-      describe('when the user populates the textarea', () => {
-        beforeEach(async () => {
-          await page.type('#feedback', FAKE_TEXTAREA_INPUT);
-        });
+        describe('Given the user has not populated the textarea or checked the exclusive option', () => {
+            describe('when the user populates the textarea', () => {
+                beforeEach(async () => {
+                    await page.type('#feedback', FAKE_TEXTAREA_INPUT);
+                });
 
-        it('then the aria alert shouldnt say anything', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                it('then the aria alert shouldnt say anything', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('');
-        });
-      });
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('');
+                });
+            });
 
-      describe('when the user clicks the mutually exclusive option', () => {
-        beforeEach(async () => {
-          await page.click('#feedback-exclusive-option');
-        });
+            describe('when the user clicks the mutually exclusive option', () => {
+                beforeEach(async () => {
+                    await page.click('#feedback-exclusive-option');
+                });
 
-        it('then the aria alert shouldnt say anything', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                it('then the aria alert shouldnt say anything', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('');
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('');
+                });
+            });
         });
-      });
     });
-  });
 });

package/components/navigation/_macro.njk

@@ -1,8 +1,10 @@
 {% macro onsNavigation(params) %}
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
-    <div class="ons-navigation-wrapper{% if params.variants == 'neutral' %} ons-navigation-wrapper--neutral{% endif %}">
-        <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
+    <div class="ons-navigation-wrapper{{ ' ons-navigation-wrapper--neutral' if params.variants == 'neutral' }}">
+        <div
+            class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}"
+        >
             {% if params.siteSearchAutosuggest %}
                 <div class="ons-navigation-search ons-js-navigation-search">
                     {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
@@ -12,43 +14,58 @@
                     {% else %}
                         {% set autosuggestLabelClasses = autosuggestLabelClasses + ' ons-label--white' %}
                     {% endif %}
-                    {{ onsAutosuggest({
-                        "id": "ons-site-search",
-                        "containerClasses": "ons-autosuggest--header",
-                        "input": {
-                            "classes": autosuggestClasses,
-                            "accessiblePlaceholder": true,
-                            "autocomplete": "off",
-                            "label": {
-                                "text": params.siteSearchAutosuggest.label,
-                                "id": "ons-site-search-label",
-                                "classes": autosuggestLabelClasses
-                            }
-                        },
-                        "instructions": params.siteSearchAutosuggest.instructions,
-                        "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,
-                        "moreResults": params.siteSearchAutosuggest.moreResults,
-                        "resultsTitle": params.siteSearchAutosuggest.resultsTitle,
-                        "autosuggestData": params.siteSearchAutosuggest.autosuggestData,
-                        "noResults": params.siteSearchAutosuggest.noResults,
-                        "typeMore": params.siteSearchAutosuggest.typeMore,
-                        "language": params.siteSearchAutosuggest.language
-                    }) }}
+                    {{
+                        onsAutosuggest({
+                            "id": "ons-site-search",
+                            "containerClasses": "ons-autosuggest--header",
+                            "input": {
+                                "classes": autosuggestClasses,
+                                "accessiblePlaceholder": true,
+                                "autocomplete": "off",
+                                "label": {
+                                    "text": params.siteSearchAutosuggest.label,
+                                    "id": "ons-site-search-label",
+                                    "classes": autosuggestLabelClasses
+                                }
+                            },
+                            "instructions": params.siteSearchAutosuggest.instructions,
+                            "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,
+                            "moreResults": params.siteSearchAutosuggest.moreResults,
+                            "resultsTitle": params.siteSearchAutosuggest.resultsTitle,
+                            "autosuggestData": params.siteSearchAutosuggest.autosuggestData,
+                            "noResults": params.siteSearchAutosuggest.noResults,
+                            "typeMore": params.siteSearchAutosuggest.typeMore,
+                            "language": params.siteSearchAutosuggest.language
+                        })
+                    }}
                 </div>
             {% endif %}
-            <nav class="ons-navigation ons-navigation--main ons-js-navigation" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
+            <nav
+                class="ons-navigation ons-navigation--main ons-js-navigation"
+                id="{{ params.navigation.id }}"
+                aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}"
+                data-analytics="header-navigation"
+            >
                 <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 %}>
-                                {% if item.title %}{{ item.title }}
-                                {% elif item.text %}{{ item.text }}
+                        <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 %}
+                            >
+                                {% if item.title %}
+                                    {{ item.title }}
+                                {% elif item.text %}
+                                    {{ item.text }}
                                 {% endif %}
                             </a>
                         </li>
@@ -59,14 +76,30 @@
     </div>
     {% if params.navigation.subNavigation %}
         {% if not params.navigation.subNavigation.removeHorizontalSubNav %}
-            <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
-                <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
+            <nav
+                class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}"
+                id="{{ params.navigation.subNavigation.id }}"
+                aria-label="{{ params.navigation.subNavigation.ariaLabel | default('Section menu') }}"
+                data-analytics="header-section-navigation"
+            >
+                <div
+                    class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}"
+                >
                     <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 %}>
-                                    {% if item.title %}{{ item.title }}
-                                    {% elif item.text %}{{ item.text }}
+                            <li
+                                class="ons-navigation__item{{ ' ' + item.classes if item.classes else '' }}{{ ' 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 %}
+                                >
+                                    {% if item.title %}
+                                        {{ item.title }}
+                                    {% elif item.text %}
+                                        {{ item.text }}
                                     {% endif %}
                                 </a>
                             </li>
@@ -75,29 +108,52 @@
                 </div>
             </nav>
         {% endif %}
-        <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}">
-            {{ onsButton({
-                "text": params.navigation.currentPageTitle,
-                "classes": "ons-u-d-no ons-js-sub-navigation-button",
-                "type": "button",
-                "variants": ["mobile", "dropdown"],
-                "attributes": {
-                    "aria-label": "Toggle " + params.navigation.currentPageTitle + " menu" if params.navigation.currentPageTitle else "Toggle section menu",
-                    "aria-controls": params.navigation.subNavigation.id,
-                    "aria-expanded": "false"
-                }
-            }) }}
-            <nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-xs" id="{{ params.navigation.subNavigation.id }}--mobile" aria-hidden="true" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
-                <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}">
+        <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}">
+            {{
+                onsButton({
+                    "text": params.navigation.currentPageTitle,
+                    "classes": "ons-u-d-no ons-js-sub-navigation-button",
+                    "type": "button",
+                    "variants": ["mobile", "dropdown"],
+                    "attributes": {
+                        "aria-label": "Toggle " + params.navigation.currentPageTitle + " menu" if params.navigation.currentPageTitle else "Toggle section menu",
+                        "aria-controls": params.navigation.subNavigation.id,
+                        "aria-expanded": "false"
+                    }
+                })
+            }}
+            <nav
+                class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-xs"
+                id="{{ params.navigation.subNavigation.id }}--mobile"
+                aria-hidden="true"
+                aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}"
+                data-analytics="header-section-navigation"
+            >
+                <div
+                    class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}"
+                >
                     <ul class="ons-navigation__list ons-navigation__list--parent">
-                        <li class="ons-navigation__item{{ ' ons-navigation__item--active' if (params.navigation.subNavigation.overviewURL == params.navigation.subNavigation.currentPath)}}">
-                            <a class="ons-navigation__link" href="{{ params.navigation.subNavigation.overviewURL }}">{{ params.navigation.subNavigation.overviewText | default('Overview') }}</a>
+                        <li
+                            class="ons-navigation__item{{ ' ons-navigation__item--active' if (params.navigation.subNavigation.overviewURL == params.navigation.subNavigation.currentPath) }}"
+                        >
+                            <a class="ons-navigation__link" href="{{ params.navigation.subNavigation.overviewURL }}"
+                                >{{ params.navigation.subNavigation.overviewText | default('Overview') }}</a
+                            >
                         </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 %}>
-                                    {% if item.title %}{{ item.title }}
-                                    {% elif item.text %}{{ item.text }}
+                            <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 %}
+                                >
+                                    {% if item.title %}
+                                        {{ item.title }}
+                                    {% elif item.text %}
+                                        {{ item.text }}
                                     {% endif %}
                                 </a>
                                 {% if item.sections %}
@@ -105,12 +161,23 @@
                                         {% 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">
+                                        <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 %}>
-                                                        {% if child.title %}{{ child.title }}
-                                                        {% elif child.text %}{{ child.text }}
+                                                <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 %}
+                                                    >
+                                                        {% if child.title %}
+                                                            {{ child.title }}
+                                                        {% elif child.text %}
+                                                            {{ child.text }}
                                                         {% endif %}
                                                     </a>
                                                 </li>
@@ -125,5 +192,4 @@
             </nav>
         </div>
     {% endif %}
-
 {% endmacro %}