@ons/design-system 55.0.0 → 55.1.0

package/components/browser-banner/_macro.njk

@@ -10,7 +10,7 @@
     {% endif %}
 
     <div class="ons-browser-banner">
-        <div class="ons-container{{ ' ons-container--wide' if params.wide is defined and params.wide }}">
+        <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
             <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">{{ bannerLeadingText }}</span><span class="ons-browser-banner__cta"> {{ bannerCTA | safe }}</span></p>
         </div>
     </div>

package/components/browser-banner/_macro.spec.js

@@ -49,6 +49,37 @@ describe('macro: browser-banner', () => {
 
     expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
   });
+
+  it('does not have `container--wide` class when `wide` is not set', () => {
+    const $ = cheerio.load(
+      renderComponent('browser-banner', {
+        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
+  });
+
+  it('has `container--full-width` class when `fullWidth` is true', () => {
+    const $ = cheerio.load(
+      renderComponent('browser-banner', {
+        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+        fullWidth: true,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
+  });
+
+  it('does not have `container--full-width` class when `fullWidth` is not set', () => {
+    const $ = cheerio.load(
+      renderComponent('browser-banner', {
+        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
+  });
 });
 
 describe('mode: Welsh language', () => {

package/components/footer/_macro.njk

@@ -82,7 +82,7 @@
         {% endif %}
 
         <div class="ons-footer__body{{ ' ' + params.classes if params.classes else '' }}" data-analytics="footer" {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>
-            <div class="ons-container{{ ' ons-container--wide' if params.wide }}">
+            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                 <div class="ons-grid">
                     {% if params.newTabWarning is defined and params.newTabWarning %}
                         <div class="ons-grid__col">

package/components/footer/_macro.spec.js

@@ -102,6 +102,24 @@ describe('macro: footer', () => {
     expect(hasClass).toBe(false);
   });
 
+  it('decorates container block with `fullWidth` modifier when the `fullWidth` parameter is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('footer', {
+        fullWidth: true,
+      }),
+    );
+
+    const hasClass = $('.ons-container').hasClass('ons-container--full-width');
+    expect(hasClass).toBe(true);
+  });
+
+  it('does not decorate container block with `fullWidth` modifier when the `fullWidth` parameter is not provided', () => {
+    const $ = cheerio.load(renderComponent('footer', {}));
+
+    const hasClass = $('.ons-container').hasClass('ons-container--full-width');
+    expect(hasClass).toBe(false);
+  });
+
   it('has additionally provided `attributes` on the `body` element', () => {
     const $ = cheerio.load(
       renderComponent('footer', {

package/components/header/_header.scss

@@ -101,11 +101,12 @@
       }
     }
     &__grid-top {
+      color: $color-text-inverse;
       min-height: 36px;
       a {
-        color: $color-white;
+        color: $color-text-inverse;
         &:hover {
-          text-decoration: underline solid $color-white 3px;
+          text-decoration: underline solid $color-text-inverse-link-hover 3px;
         }
       }
     }
@@ -208,6 +209,10 @@
       &:first-child {
         margin-left: 0;
       }
+      .ons-svg-icon {
+        clip-path: circle(9px at center);
+        margin-right: 0.5rem;
+      }
     }
 
     .ons-language-links {

package/components/header/_macro.njk

@@ -16,12 +16,19 @@
         {{
             onsBrowserBanner({
                 "lang": currentLanguageISOCode,
-                "wide": params.wide
+                "wide": params.wide,
+                "fullWidth": params.fullWidth
             })
         }}
         {% if params.phase is defined and params.phase %}
             {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
-            {{ onsPhaseBanner(params.phase) }}
+            {{ onsPhaseBanner({
+                "fullWidth": params.fullWidth,
+                "wide": params.wide,
+                "hideBadge": params.phase.hideBadge,
+                "badge": params.phase.badge,
+                "html": params.phase.html
+            }) }}
         {% endif %}
         {% if params.noMasthead != true %}
             <div class="ons-header__top">
@@ -75,11 +82,22 @@
                                             <ul class="ons-header-service-nav__list">
                                                 {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                     <li class="ons-header-service-nav__item">
+                                                    {% if item.iconType is defined and item.iconType %}
+                                                        {{
+                                                            onsIcon({
+                                                                "iconType": item.iconType
+                                                            })
+                                                        }}
+                                                    {% endif %}
+                                                    {% if item.url is defined and item.url %}
                                                         <a
                                                             href="{{ item.url }}"
                                                             class="ons-header-service-nav__link"
                                                             {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                         >{{ item.title }}</a>
+                                                    {% else %}
+                                                        {{ item.title }}
+                                                    {% endif %}
                                                     </li>
                                                 {% endfor %}
                                             </ul>
@@ -116,11 +134,22 @@
                         <ul class="ons-header-service-nav__list">
                             {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                 <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
+                                {% if item.iconType is defined and item.iconType %}
+                                    {{
+                                        onsIcon({
+                                            "iconType": item.iconType
+                                        })
+                                    }}
+                                {% endif %}
+                                {% if item.url is defined and item.url %}
                                     <a
                                         href="{{ item.url }}"
                                         class="ons-header-service-nav__link"
                                         {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                     >{{ item.title }}</a>
+                                {% else %}
+                                    {{ item.title }}
+                                {% endif %}
                                 </li>
                             {% endfor %}
                             {% if params.language is defined and params.language %}
@@ -178,7 +207,7 @@
                             <p class="ons-header__description">{{ params.description }}</p>
                         {% endif %}
                     </div>
-                    
+
                     {% if params.button is defined and params.button %}
                         {% if params.variants == 'neutral' %}
                             {% set buttonVariant = ["ghost", "ghost-dark"] %}

package/components/header/_macro.spec.js

@@ -20,6 +20,24 @@ const EXAMPLE_SERVICE_LINKS_CONFIG = {
   },
 };
 
+const EXAMPLE_HEADER_SERVICE_LIST_ITEMS = {
+  ...EXAMPLE_HEADER_BASIC,
+  serviceLinks: {
+    ...EXAMPLE_SERVICE_LINKS_CONFIG,
+    itemsList: [
+      {
+        title: 'Title 1',
+      },
+      {
+        title: 'Title 2',
+      },
+      {
+        title: 'Title 3',
+      },
+    ],
+  },
+};
+
 const EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE = {
   ...EXAMPLE_HEADER_BASIC,
   serviceLinks: {
@@ -338,12 +356,51 @@ describe('macro: header', () => {
       const faker = templateFaker();
       const phaseSpy = faker.spy('phase-banner');
 
-      faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, phase: { html: 'Example content with a <a href="#">link</a>' } });
+      faker.renderComponent('header', {
+        ...EXAMPLE_HEADER_BASIC,
+        phase: {
+          badge: 'Example',
+          html: 'Example content with a <a href="#">link</a>',
+        },
+      });
 
       expect(phaseSpy.occurrences).toContainEqual({
+        badge: 'Example',
         html: 'Example content with a <a href="#">link</a>',
       });
     });
+
+    it('renders the phase banner in the correct container if `wide`', () => {
+      const $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_BASIC,
+          wide: true,
+          phase: {
+            badge: 'Example',
+            html: 'Example content with a <a href="#">link</a>',
+          },
+        }),
+      );
+
+      const phaseContainer = $('.ons-phase-banner .ons-container');
+      expect($(phaseContainer).hasClass('ons-container--wide')).toBe(true);
+    });
+
+    it('renders the phase banner in the correct container if `fullWidth`', () => {
+      const $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_BASIC,
+          fullWidth: true,
+          phase: {
+            badge: 'Example',
+            html: 'Example content with a <a href="#">link</a>',
+          },
+        }),
+      );
+
+      const phaseContainer = $('.ons-phase-banner .ons-container');
+      expect($(phaseContainer).hasClass('ons-container--full-width')).toBe(true);
+    });
   });
 
   describe('mode: with service links', () => {
@@ -377,6 +434,13 @@ describe('macro: header', () => {
       expect($('.ons-header-service-nav--main').attr('aria-label')).toBe('Services menu');
     });
 
+    it('has the text for each list item', () => {
+      const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LIST_ITEMS));
+
+      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__item'), node => node.text().trim());
+      expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']);
+    });
+
     it('has the link text for each list item', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE));
 
@@ -467,6 +531,26 @@ describe('macro: header', () => {
 
       expect($('.ons-js-toggle-services').length).toBe(0);
     });
+
+    it('has the correct list item icon', () => {
+      const faker = templateFaker();
+      const iconsSpy = faker.spy('icons');
+
+      faker.renderComponent('header', {
+        ...EXAMPLE_HEADER_BASIC,
+        serviceLinks: {
+          ...EXAMPLE_SERVICE_LINKS_CONFIG,
+          itemsList: [
+            {
+              title: 'Title 1',
+              iconType: 'check',
+            },
+          ],
+        },
+      });
+
+      expect(iconsSpy.occurrences[2].iconType).toBe('check');
+    });
   });
 
   describe('mode: with language selector', () => {

package/components/navigation/_macro.njk

@@ -2,7 +2,7 @@
     {% 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.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}">
+        <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.navigation.siteSearchAutosuggest is defined and params.navigation.siteSearchAutosuggest and isPatternLib is defined and isPatternLib %}
                 <div class="ons-navigation-search ons-js-navigation-search">
                     {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}

package/components/panel/_macro.njk

@@ -31,7 +31,7 @@
             <div class="ons-container">
     {% endif %}
 
-        <div {% if params is defined and params and (params.type == 'error' or params.type == 'success') %}aria-labelledby="alert" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>
+        <div {% if (params.type == 'error' and params.title) or params.type == 'success' %}aria-labelledby="alert" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>
 
             {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
                 <span class="ons-panel__icon" aria-hidden="true">!</span>
@@ -59,16 +59,14 @@
                     {% endif %}
                     {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                     <div class="ons-panel__header">
-                        <{{ titleTag }} id="alert" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
+                        <{{ titleTag }} id="alert"{% if params.type %} data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                     </div>
                 {% else %}
                     {% if params.type is not defined or params.type == "branded" or params.type == "info" %}
                         <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
-                    {% else %}
-                        {% if params.type is defined and (params.type == "success" or params.type == "error") %}
-                            {% set defaultText = "Completed" if params.type == "success" else "Error" %}
-                            <span id="alert" class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span>
-                        {% endif %}
+                    {% elif params.type == 'error' or params.type == 'success' %} 
+                        {% set defaultText = "Completed" if params.type == "success" else "Error" %}
+                        <span{% if params.type == "success" %} id="alert"{% endif %} class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span>
                     {% endif %}
                 {% endif %}
 

package/components/phase-banner/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsPhaseBanner(params) %}
     <div class="ons-phase-banner">
-        <div class="ons-container{{ ' ons-container--wide' if params.wide }}">
+        <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
             <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-top ons-grid--no-wrap">
                 {% if not params.hideBadge %}
                 <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">

package/components/phase-banner/_macro.spec.js

@@ -70,4 +70,35 @@ describe('macro: phase-banner', () => {
 
     expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
   });
+
+  it('does not have `container--wide` class when `wide` is not set', () => {
+    const $ = cheerio.load(
+      renderComponent('phase-banner', {
+        ...EXAMPLE_PHASE_BANNER_MINIMAL,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
+  });
+
+  it('has `container--full-width` class when `fullWidth` is true', () => {
+    const $ = cheerio.load(
+      renderComponent('phase-banner', {
+        ...EXAMPLE_PHASE_BANNER_MINIMAL,
+        fullWidth: true,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
+  });
+
+  it('does not have `container--full-width` class when `fullWidth` is not set', () => {
+    const $ = cheerio.load(
+      renderComponent('phase-banner', {
+        ...EXAMPLE_PHASE_BANNER_MINIMAL,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
+  });
 });