@ons/design-system 65.0.0 → 65.2.0

package/components/header/_macro.njk

@@ -102,9 +102,9 @@
                                                         href="{{ item.url }}"
                                                         class="ons-header-service-nav__link"
                                                         {% if item.id %} id="{{ item.id }}"{% endif %}
-                                                    >{{ item.title }}</a>
+                                                    >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
                                                 {% else %}
-                                                    {{ item.title }}
+                                                    {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
                                                 {% endif %}
                                                 </li>
                                             {% endfor %}
@@ -153,9 +153,9 @@
                                     href="{{ item.url }}"
                                     class="ons-header-service-nav__link"
                                     {% if item.id %} id="{{ item.id }}"{% endif %}
-                                >{{ item.title }}</a>
+                                >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
                             {% else %}
-                                {{ item.title }}
+                                {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
                             {% endif %}
                             </li>
                         {% endfor %}

package/components/header/example-header-external-with-navigation.njk

@@ -13,23 +13,23 @@
             "currentPath": '#home',
             "itemsList": [
                 {
-                    "title": 'Home',
+                    "text": 'Home',
                     "url": '#home'
                 },
                 {
-                    "title": 'Guidance',
+                    "text": 'Guidance',
                     "url": '#0'
                 },
                 {
-                    "title": 'Foundations',
+                    "text": 'Foundations',
                     "url": '#0'
                 },
                 {
-                    "title": 'Components',
+                    "text": 'Components',
                     "url": '#0'
                 },
                 {
-                    "title": 'Patterns',
+                    "text": 'Patterns',
                     "url": '#0'
                 }
             ],

package/components/header/example-header-external-with-service-links.njk

@@ -18,15 +18,15 @@
             },
             "itemsList": [
                 {
-                    "title": "Help",
+                    "text": "Help",
                     "url": "#0"
                 },
                 {
-                    "title": "My Account",
+                    "text": "My Account",
                     "url": "#0"
                 },
                 {
-                    "title": "Sign out",
+                    "text": "Sign out",
                     "url": "#0"
                 }
             ]

package/components/header/example-header-external-with-sub-navigation.njk

@@ -15,29 +15,29 @@
             "currentPageTitle": 'Design system',
             "itemsList": [
                 {
-                    "title": 'Service standard',
+                    "text": 'Service standard',
                     "url": '#0'
                 },
                 {
-                    "title": 'Design system',
+                    "text": 'Design system',
                     "url": '#design-system'
                 },
                 {
-                    "title": 'Accessibility',
+                    "text": 'Accessibility',
                     "url": '#0'
                 },
                 {
-                    "title": 'Brand guidelines',
+                    "text": 'Brand guidelines',
                     "url": '#0'
                 },
                 {
-                    "title": 'Content style guide',
+                    "text": 'Content style guide',
                     "url": '#0'
                 }
             ],
             "toggleNavigationButton": {
                 "text": 'Menu',
-                "ariaLabel": 'Toggle main menu'
+                "ariaLabel": 'Toggle menu'
             },
             "subNavigation": {
                 "id": 'sub-nav',
@@ -46,19 +46,19 @@
                 "ariaLabel": 'Section menu',
                 "itemsList": [
                     {
-                        "title": 'Guidance',
+                        "text": 'Guidance',
                         "url": '#0'
                     },
                     {
-                        "title": 'Foundations',
+                        "text": 'Foundations',
                         "url": '#0'
                     },
                     {
-                        "title": 'Components',
+                        "text": 'Components',
                         "url": '#0'
                     },
                     {
-                        "title": 'Patterns',
+                        "text": 'Patterns',
                         "url": '#patterns',
                         "sections": [
                             {

package/components/header/example-header-internal.njk

@@ -19,11 +19,11 @@
             },
             "itemsList": [
                 {
-                    "title": "Jacky Turner",
+                    "text": "Jacky Turner",
                     "iconType": 'person'
                 },
                 {
-                    "title": "Sign out",
+                    "text": "Sign out",
                     "url": "#0"
                 }
             ]

package/components/header/example-header-neutral-for-multicoloured-logo.njk

@@ -18,15 +18,15 @@
             },
             "itemsList": [
                 {
-                    "title": "Help",
+                    "text": "Help",
                     "url": "#0"
                 },
                 {
-                    "title": "My Account",
+                    "text": "My Account",
                     "url": "#0"
                 },
                 {
-                    "title": "Sign out",
+                    "text": "Sign out",
                     "url": "#0"
                 }
             ]
@@ -38,15 +38,15 @@
             "currentPageTitle": 'Design system',
             "itemsList": [
                 {
-                    "title": 'Menu item 1',
+                    "text": 'Menu item 1',
                     "url": '#0'
                 },
                 {
-                    "title": 'Menu item 2',
+                    "text": 'Menu item 2',
                     "url": '#menu-item-2'
                 },
                 {
-                    "title": 'Menu item 3',
+                    "text": 'Menu item 3',
                     "url": '#0'
                 }
             ],

package/components/helpers/_grid.scss

@@ -0,0 +1,6 @@
+.ons-pl-grid-col {
+  background: var(--ons-color-grey-5);
+  font-size: 0.8rem;
+  margin: 0 0 1rem;
+  padding: 1rem;
+}

package/components/helpers/grid.njk

@@ -0,0 +1,19 @@
+{% macro patternLibExampleGrid(params) %}
+  {% if params.container -%}
+    <div class="ons-container">
+  {% endif -%}
+
+  <div class="ons-grid">
+      {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
+          {% for i in range(0, item.repeat | default(1)  ) -%}
+              <div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
+                  <div class="ons-pl-grid-col">{{ item.col }} col</div>
+              </div>
+          {%- endfor %}
+      {%- endfor %}
+  </div>
+
+  {% if params.container -%}
+    </div>
+  {% endif -%}
+{% endmacro %}

package/components/input/_input-type.scss

@@ -57,13 +57,10 @@
     @extend %ons-input-focus;
 
     border-radius: $input-radius;
-    bottom: 0;
+    inset: 0;
     content: '';
     display: block;
-    left: 0;
     position: absolute;
-    right: 0;
-    top: 0;
   }
 
   &:not(&--prefix) & {
@@ -100,16 +97,13 @@
 
   & + .ons-input-type__type::after {
     border-radius: $input-radius;
-    bottom: 0;
+    inset: 0;
 
     // Style input + prefix/suffix for errors
     box-shadow: 0 0 0 1px var(--ons-color-errors);
     content: '';
     display: block;
-    left: 0;
     outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
     position: absolute;
-    right: 0;
-    top: 0;
   }
 }

package/components/input/_input.scss

@@ -1,5 +1,6 @@
 %ons-input-focus {
-  box-shadow: 0 0 0 $input-border-width var(--ons-color-input-border), 0 0 0 4px var(--ons-color-focus);
+  box-shadow: 0 0 0 $input-border-width var(--ons-color-input-border),
+    0 0 0 4px var(--ons-color-focus);
 
   // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   outline: 3px solid transparent;
@@ -31,7 +32,7 @@
   @include mq(s) {
     &--text,
     &--select {
-      &:not(.ons-input--block):not([class*='input--w-']) {
+      &:not(.ons-input--block, [class*='input--w-']) {
         width: $input-width;
       }
     }
@@ -131,7 +132,7 @@
 }
 
 .ons-input--ghost {
-  border: 2px solid rgba(255, 255, 255, 0.6);
+  border: 2px solid rgb(255 255 255 / 60%);
   &:focus {
     border: 2px solid var(--ons-color-input-border);
   }

package/components/list/_list.scss

@@ -1,10 +1,13 @@
 .ons-list {
-  margin: 0 0 1rem;
+  margin: 0;
   padding: 0 0 0 1.5rem;
 
   &__item {
+    &:first-child {
+      margin-top: 0.5rem;
+    }
     &:last-child {
-      margin-bottom: 0;
+      margin-bottom: -0.5;
     }
   }
 

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/modal/_modal.scss

@@ -1,4 +1,4 @@
-$backdrop-colour: rgba(0, 0, 0, 0.8);
+$backdrop-colour: rgb(0 0 0 / 80%);
 
 .ons-modal {
   border: none;
@@ -13,7 +13,7 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
   position: fixed;
   top: 0;
 
-  @media screen and (min-width: 600px) {
+  @media screen and (width >= 600px) {
     margin-left: auto;
     margin-right: auto;
     max-width: 500px;
@@ -21,12 +21,9 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
 
   &-ie11 & {
     background: var(--ons-color-white);
-    bottom: 0;
+    inset: 50% 0 0;
     height: 350px;
-    left: 0;
     position: fixed;
-    right: 0;
-    top: 50%;
     transform: translate(0, -50%);
   }
 

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/navigation/navigation.js

@@ -44,11 +44,15 @@ export default class NavigationToggle {
     this.navigation.classList.add(this.hideClass);
   }
 
+  isHidden(el) {
+    return el.offsetParent === null;
+  }
+
   setAria() {
-    const viewportDetails = GetViewportDetails();
+    const isToggleHidden = this.isHidden(this.toggle);
     const hasAria = this.navigation.hasAttribute(attrHidden);
 
-    if (viewportDetails.width < 980) {
+    if (!isToggleHidden) {
       if (!hasAria) {
         this.closeNav();
       }

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/phase-banner/example-phase-banner-alpha.njk

@@ -2,9 +2,20 @@
 "fullWidth": true
 ---
 {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+{% from "components/external-link/_macro.njk" import onsExternalLink %}
+
+{% set feedbackLink %}
+    {{
+        onsExternalLink({
+            "url": "#0",
+            "linkText": "give feedback"
+        })
+    }}
+{% endset %}
+
 {{
     onsPhaseBanner({
-        "badge": 'Alpha',
-        "html": 'This is a new service. To help us improve it, <a href="#0">give feedback</a>'
+        "badge": "Alpha",
+        "html": "This is a new service. To help us improve it, " + feedbackLink
     })
 }}

package/components/phase-banner/example-phase-banner-beta.njk

@@ -2,8 +2,19 @@
 "fullWidth": true
 ---
 {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+{% from "components/external-link/_macro.njk" import onsExternalLink %}
+
+{% set feedbackLink %}
+    {{
+        onsExternalLink({
+            "url": "#0",
+            "linkText": "give feedback"
+        })
+    }}
+{% endset %}
+
 {{
     onsPhaseBanner({
-        "html": 'This is a new service. To help us improve it, <a href="#0">give feedback</a>'
-    })
+        "html": "This is a new service. To help us improve it, " + feedbackLink
+  })
 }}