@ons/design-system 59.0.0 → 60.0.0

package/components/header/_header.scss

@@ -12,15 +12,10 @@
     width: 100%;
   }
   &__grid-top {
-    height: 54px;
+    padding: 1rem 0;
 
     @include mq(xs) {
-      height: 46px;
-    }
-  }
-  &__grid-top-tall {
-    @include mq(xs) {
-      height: 76px;
+      padding: 0.75rem 0;
     }
   }
   &__main {
@@ -114,20 +109,29 @@
 
   &--neutral & {
     &__top {
-      background: var(--ons-color-header-masthead-dark);
+      background: var(--ons-color-header-masthead-neutral);
+    }
+
+    &__grid-top {
+      a {
+        color: var(--ons-color-service-links);
+        &:hover {
+          text-decoration: underline solid var(--ons-color-service-links) 3px;
+        }
+      }
     }
 
     &__main {
-      background: var(--ons-color-header-light);
+      background: var(--ons-color-header-neutral);
 
       &--border {
-        border-bottom: 3px solid var(--ons-color-header-light);
-        border-top: 3px solid var(--ons-color-header-light);
+        border-bottom: 3px solid var(--ons-color-header-neutral);
+        border-top: 3px solid var(--ons-color-header-neutral);
       }
     }
 
     &__title {
-      color: var(--ons-color-branded-text);
+      color: var(--ons-color-header-title);
       &-link {
         &:hover {
           text-decoration: underline solid var(--ons-color-branded-text) 2px;
@@ -143,6 +147,13 @@
   &__org-logo-link,
   &__title-logo-link {
     display: block;
+    font-size: 0;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &__org-logo-link {
     &:focus {
       .ons-svg-logo {
         fill: var(--ons-color-black) !important;
@@ -151,19 +162,6 @@
         }
       }
     }
-    &:hover {
-      font-size: 0;
-      text-decoration: none;
-    }
-  }
-
-  &__title-logo--large {
-    .ons-svg-logo {
-      @include mq(xxs, 399px) {
-        height: auto;
-        max-width: 160px;
-      }
-    }
   }
 
   &__org-logo--large {

package/components/header/_macro.njk

@@ -30,175 +30,168 @@
                 "html": params.phase.html
             }) }}
         {% endif %}
-        {% if params.noMasthead != true %}
-            <div class="ons-header__top">
-                <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
-                    <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo }}">
-                        <div class="ons-grid__col ons-col-auto">
-                            {%-if params.orgLogoHref %}
-                                <a class="ons-header__org-logo-link" href="{{ params.orgLogoHref }}">
-                            {% endif -%}
-                            <div class="ons-header__org-logo ons-header__org-logo--large">
-
+        <div class="ons-header__top">
+            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
+                <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{% if params.mastheadLogo.classes %} {{ params.mastheadLogo.classes }}{% endif %}">
+                    <div class="ons-grid__col ons-col-auto">
+                        {%-if params.mastheadLogoUrl %}
+                            <a class="ons-header__org-logo-link" href="{{ params.mastheadLogoUrl }}">
+                        {% endif -%}
+                        <div class="ons-header__org-logo ons-header__org-logo--large">
+                            {% if params.mastheadLogo.large %}
+                                {{ params.mastheadLogo.large | safe }}
+                            {% else %}
                                 {{
                                     onsIcon({
-                                        "iconType": params.orgLogo | default('ons-logo-' + currentLanguageISOCode),
-                                        "altText": params.orgLogoAlt | default('Office for National Statistics logo')
+                                        "iconType": 'ons-logo-' + currentLanguageISOCode,
+                                        "altText": 'Office for National Statistics logo'
                                     })
                                 }}
-                            </div>
-                            <div class="ons-header__org-logo ons-header__org-logo--small">
+                            {% endif %}
+                        </div>
+                        <div class="ons-header__org-logo ons-header__org-logo--small">
+                            {% if params.mastheadLogo.small or params.mastheadLogo.large %}
+                                {{ params.mastheadLogo.small | safe }}
+                            {% else %}
                                 {{
                                     onsIcon({
-                                        "iconType": params.orgMobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
-                                        "altText": params.orgLogoAlt | default('Office for National Statistics logo')
+                                        "iconType": 'ons-logo-stacked-' + currentLanguageISOCode,
+                                        "altText": 'Office for National Statistics logo'
                                     })
                                 }}
-                            </div>
-                            {% if params.orgLogoHref %}
-                                </a>
                             {% endif %}
                         </div>
-                        {% if params.language or params.serviceLinks %}
-                            <div class="ons-header__links ons-grid__col ons-col-auto">
-                                {% if params.language %}
-                                    <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks else '' }}">
-                                        {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
-                                        {{ onsLanguageSelector(params.language) }}
-                                    </div>
-                                {% endif %}
-                                {% if params.serviceLinks %}
-                                    {% if params.serviceLinks.itemsList | length == 1 and params.language %}
-                                        {% set breakpoint = 'xs' %}
-                                        {% set controlVisibility = true %}
-                                    {% elif params.serviceLinks.itemsList | length > 1 %}
-                                        {% set breakpoint = 'm' %}
-                                        {% set controlVisibility = true %}
-                                    {% else %}
-                                        {% set controlVisibility = false %}
-                                    {% endif %}
-                                    <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
-                                        <nav class="ons-header-service-nav ons-header-service-nav--main {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
-                                            <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 %}
-                                                        {{
-                                                            onsIcon({
-                                                                "iconType": item.iconType
-                                                            })
-                                                        }}
-                                                    {% endif %}
-                                                    {% if item.url %}
-                                                        <a
-                                                            href="{{ item.url }}"
-                                                            class="ons-header-service-nav__link"
-                                                            {% if item.id %} id="{{ item.id }}"{% endif %}
-                                                        >{{ item.title }}</a>
-                                                    {% else %}
-                                                        {{ item.title }}
-                                                    {% endif %}
-                                                    </li>
-                                                {% endfor %}
-                                            </ul>
-                                        </nav>
-                                    </div>
-                                    {% if params.serviceLinks.itemsList | length > 1 or params.language %}
-                                        {% if params.variants == 'internal' or params.variants == 'neutral' %}
-                                            {% set buttonVariant = ["mobile", "text-link", "text-link-inverse"] %}
-                                        {% else %}
-                                            {% set buttonVariant = ["mobile", "text-link"] %}
-                                        {% endif %}
-                                        <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
-                                            {{ onsButton({
-                                                "text": params.serviceLinks.toggleServicesButton.text | default("Account"),
-                                                "classes": "ons-u-d-no ons-js-toggle-services",
-                                                "type": "button",
-                                                "variants": buttonVariant,
-                                                "attributes": {
-                                                    "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
-                                                    "aria-controls": params.serviceLinks.id,
-                                                    "aria-expanded": "false"
-                                                }
-                                            }) }}
-                                        </div>
-                                    {% endif %}
-                                {% endif %}
-                            </div>
+                        {% if params.mastheadLogoUrl %}
+                            </a>
                         {% endif %}
                     </div>
-                </div>
-                {% if params.serviceLinks %}
-                    <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
-                        <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 %}
-                                    {{
-                                        onsIcon({
-                                            "iconType": item.iconType
-                                        })
-                                    }}
-                                {% endif %}
-                                {% if item.url %}
-                                    <a
-                                        href="{{ item.url }}"
-                                        class="ons-header-service-nav__link"
-                                        {% if item.id %} id="{{ item.id }}"{% endif %}
-                                    >{{ item.title }}</a>
-                                {% else %}
-                                    {{ item.title }}
-                                {% endif %}
-                                </li>
-                            {% endfor %}
+                    {% if params.language or params.serviceLinks %}
+                        <div class="ons-header__links ons-grid__col ons-col-auto">
                             {% if params.language %}
-                                <div class="ons-u-d-no@xs">
+                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks else '' }}">
                                     {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                     {{ onsLanguageSelector(params.language) }}
                                 </div>
                             {% endif %}
-                        </ul>
-                    </nav>
-                {% endif %}
+                            {% if params.serviceLinks %}
+                                {% if params.serviceLinks.itemsList | length == 1 and params.language %}
+                                    {% set breakpoint = 'xs' %}
+                                    {% set controlVisibility = true %}
+                                {% elif params.serviceLinks.itemsList | length > 1 %}
+                                    {% set breakpoint = 'm' %}
+                                    {% set controlVisibility = true %}
+                                {% else %}
+                                    {% set controlVisibility = false %}
+                                {% endif %}
+                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
+                                    <nav class="ons-header-service-nav ons-header-service-nav--main {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
+                                        <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 %}
+                                                    {{
+                                                        onsIcon({
+                                                            "iconType": item.iconType
+                                                        })
+                                                    }}
+                                                {% endif %}
+                                                {% if item.url %}
+                                                    <a
+                                                        href="{{ item.url }}"
+                                                        class="ons-header-service-nav__link"
+                                                        {% if item.id %} id="{{ item.id }}"{% endif %}
+                                                    >{{ item.title }}</a>
+                                                {% else %}
+                                                    {{ item.title }}
+                                                {% endif %}
+                                                </li>
+                                            {% endfor %}
+                                        </ul>
+                                    </nav>
+                                </div>
+                                {% if params.serviceLinks.itemsList | length > 1 or params.language %}
+                                    {% if params.variants == 'internal' or params.variants == 'neutral' %}
+                                        {% set buttonVariant = ["mobile", "text-link", "text-link-inverse"] %}
+                                    {% else %}
+                                        {% set buttonVariant = ["mobile", "text-link"] %}
+                                    {% endif %}
+                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
+                                        {{ onsButton({
+                                            "text": params.serviceLinks.toggleServicesButton.text | default("Account"),
+                                            "classes": "ons-u-d-no ons-js-toggle-services",
+                                            "type": "button",
+                                            "variants": buttonVariant,
+                                            "attributes": {
+                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
+                                                "aria-controls": params.serviceLinks.id,
+                                                "aria-expanded": "false"
+                                            }
+                                        }) }}
+                                    </div>
+                                {% endif %}
+                            {% endif %}
+                        </div>
+                    {% endif %}
+                </div>
             </div>
-        {% endif %}
+            {% if params.serviceLinks %}
+                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
+                    <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 %}
+                                {{
+                                    onsIcon({
+                                        "iconType": item.iconType
+                                    })
+                                }}
+                            {% endif %}
+                            {% if item.url %}
+                                <a
+                                    href="{{ item.url }}"
+                                    class="ons-header-service-nav__link"
+                                    {% if item.id %} id="{{ item.id }}"{% endif %}
+                                >{{ item.title }}</a>
+                            {% else %}
+                                {{ item.title }}
+                            {% endif %}
+                            </li>
+                        {% endfor %}
+                        {% if params.language %}
+                            <div class="ons-u-d-no@xs">
+                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
+                                {{ onsLanguageSelector(params.language) }}
+                            </div>
+                        {% endif %}
+                    </ul>
+                </nav>
+            {% endif %}
+        </div>
         <div class="ons-header__main">
             <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                 <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                     <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
-                        {% if params.titleLogo and params.titleLogoAlt %}
-                            {% if params.titleLogoHref %}
-                                <a class="ons-header__title-logo-link" href="{{ params.titleLogoHref }}">
+                        {% if params.titleLogo.large %}
+                            {% if params.titleUrl %}
+                                <a class="ons-header__title-logo-link" href="{{ params.titleUrl }}">
                             {% endif %}
-                            <div class="ons-header__title-logo ons-header__title-logo--large {% if params.titleLogoClasses %} {{ params.titleLogoClasses }} {% endif %}{% if params.titleLogoMobile %}ons-u-d-no@xxs@s{% endif %}">
-                                {% from "components/icons/_macro.njk" import onsIcon %}
-                                {{
-                                    onsIcon({
-                                        "iconType": params.titleLogo,
-                                        "altText": params.titleLogoAlt
-                                    })
-                                }}
+                            <div class="ons-header__title-logo ons-header__title-logo--large {% if params.titleLogo.classes %} {{ params.titleLogo.classes }} {% endif %}{% if params.titleLogo.small %}ons-u-d-no@xxs@s{% endif %}">
+                                {{ params.titleLogo.large | safe }}
                             </div>
-                            {% if params.titleLogoMobile %}
-                                <div class="ons-header__title-logo ons-header__title-logo--mobile ons-u-d-no@s{% if params.titleLogoMobileClasses %} {{ params.titleLogoMobileClasses }}{% endif %}">
-                                    {% from "components/icons/_macro.njk" import onsIcon %}
-                                    {{
-                                        onsIcon({
-                                            "iconType": params.titleLogoMobile,
-                                            "altText": params.titleLogoAlt
-                                        })
-                                    }}
+                            {% if params.titleLogo.small %}
+                                <div class="ons-header__title-logo ons-header__title-logo--small ons-u-d-no@s{% if params.titleLogo.classes %} {{ params.titleLogo.classes }}{% endif %}">
+                                    {{ params.titleLogo.small | safe}}
                                 </div>
                             {% endif %}
-                            {% if params.titleLogoHref %}
+                            {% if params.titleUrl %}
                                 </a>
                             {% endif %}
                         {% else %}
-                            {% if params.titleLogoHref %}
-                                <a class="ons-header__title-link" href="{{ params.titleLogoHref }}">
+                            {% if params.titleUrl %}
+                                <a class="ons-header__title-link" href="{{ params.titleUrl }}">
                             {% endif %}
                                 <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
-                            {% if params.titleLogoHref %}
+                            {% if params.titleUrl %}
                                 </a>
                             {% endif %}
                         {% endif %}
@@ -226,17 +219,9 @@
                             }) }}
                         </div>
                     {% endif %}
-                    {% if params.navigation %}
+                    {% if params.navigation or params.siteSearchAutosuggest %}
                         <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
-                            {% if params.noMasthead == true %}
-                                {% if params.language %}
-                                    <div class="ons-grid__col ons-col-auto ons-u-mt-xxs@xxs@l ons-u-mr-xs@xxs@s {% if params.navigation.siteSearchAutosuggest %}ons-header__lang-adjustment{% endif %}">
-                                        {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
-                                        {{ onsLanguageSelector(params.language) }}
-                                    </div>
-                                {% endif %}
-                            {% endif %}
-                            {% if params.navigation.siteSearchAutosuggest %}
+                            {% if params.siteSearchAutosuggest %}
                                 {% if params.variants == 'neutral' %}
                                     {% set buttonVariant = ["small", "ghost-dark"] %}
                                 {% else %}

package/components/header/_macro.spec.js

@@ -163,7 +163,7 @@ describe('macro: header', () => {
     });
 
     it('has the correct masthead logo link', () => {
-      const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, orgLogoHref: '#0' }));
+      const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, mastheadLogoUrl: '#0' }));
 
       expect($('.ons-header__org-logo-link').attr('href')).toBe('#0');
     });
@@ -177,13 +177,13 @@ describe('macro: header', () => {
       expect(iconsSpy.occurrences[0].iconType).toBe('ons-logo-en');
     });
 
-    it('has the provided masthead logo icon', () => {
+    it('has the default masthead mobile logo icon', () => {
       const faker = templateFaker();
       const iconsSpy = faker.spy('icons');
 
-      faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, orgLogo: 'another-logo' });
+      faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
 
-      expect(iconsSpy.occurrences[0].iconType).toBe('another-logo');
+      expect(iconsSpy.occurrences[1].iconType).toBe('ons-logo-stacked-en');
     });
 
     it('has the default masthead logo icon alt text', () => {
@@ -195,49 +195,44 @@ describe('macro: header', () => {
       expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics logo');
     });
 
-    it('has the provided masthead logo icon alt text', () => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
-
-      faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, orgLogoAlt: 'Custom alt text' });
-
-      expect(iconsSpy.occurrences[0].altText).toBe('Custom alt text');
-    });
-
-    it('has the default masthead mobile logo icon', () => {
+    it('has the default masthead mobile logo icon alt text', () => {
       const faker = templateFaker();
       const iconsSpy = faker.spy('icons');
 
       faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
 
-      expect(iconsSpy.occurrences[1].iconType).toBe('ons-logo-stacked-en');
+      expect(iconsSpy.occurrences[1].altText).toBe('Office for National Statistics logo');
     });
 
-    it('has the provided masthead mobile logo icon', () => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
-
-      faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, orgMobileLogo: 'another-mobile-logo' });
+    it('has the provided large masthead logo', () => {
+      const $ = cheerio.load(
+        renderComponent('header', { ...EXAMPLE_HEADER_BASIC, mastheadLogo: { large: '<img src="another-logo.svg">' } }),
+      );
 
-      expect(iconsSpy.occurrences[1].iconType).toBe('another-mobile-logo');
+      expect($('.ons-header__org-logo--large img').attr('src')).toBe('another-logo.svg');
     });
 
-    it('has the default masthead mobile logo icon alt text', () => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
-
-      faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
+    it('has the provided masthead logo custom classes', () => {
+      const $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_BASIC,
+          mastheadLogo: { large: '<img src="another-logo.svg">', classes: 'custom-class another-custom-class' },
+        }),
+      );
 
-      expect(iconsSpy.occurrences[1].altText).toBe('Office for National Statistics logo');
+      expect($('.ons-header__grid-top').hasClass('custom-class')).toBe(true);
+      expect($('.ons-header__grid-top').hasClass('another-custom-class')).toBe(true);
     });
 
-    it('has the provided masthead mobile logo icon alt text', () => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
-
-      faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, orgLogoAlt: 'Custom alt text' });
+    it('has the provided small masthead logo', () => {
+      const $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_BASIC,
+          mastheadLogo: { large: 'another-logo.svg', small: '<img src="another-logo-small.svg">' },
+        }),
+      );
 
-      expect(iconsSpy.occurrences[1].altText).toBe('Custom alt text');
+      expect($('.ons-header__org-logo--small img').attr('src')).toBe('another-logo-small.svg');
     });
 
     it('displays the `title` text', () => {
@@ -259,59 +254,38 @@ describe('macro: header', () => {
     });
 
     it('has the correct `title` link', () => {
-      const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, titleLogoHref: '#0' }));
+      const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, titleUrl: '#0' }));
 
       expect($('.ons-header__title-link').attr('href')).toBe('#0');
     });
 
-    it('has the provided title logo icon', () => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
-
-      faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, titleLogo: 'custom-title-logo', titleLogoAlt: 'custom logo alt' });
+    it('has the provided large title logo', () => {
+      const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, titleLogo: { large: '<img src="another-logo.svg">' } }));
 
-      expect(iconsSpy.occurrences[2].iconType).toBe('custom-title-logo');
+      expect($('.ons-header__title-logo--large img').attr('src')).toBe('another-logo.svg');
     });
 
-    it('has the provided title logo classes', () => {
+    it('has the provided title logo custom classes', () => {
       const $ = cheerio.load(
         renderComponent('header', {
           ...EXAMPLE_HEADER_BASIC,
-          titleLogo: 'custom-title-logo',
-          titleLogoClasses: 'custom-class',
-          titleLogoAlt: 'custom logo alt',
+          titleLogo: { large: 'another-logo.svg', classes: 'custom-class another-custom-class' },
         }),
       );
 
       expect($('.ons-header__title-logo--large').hasClass('custom-class')).toBe(true);
+      expect($('.ons-header__title-logo--large').hasClass('another-custom-class')).toBe(true);
     });
 
-    it('has the provided title logo mobile icon', () => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
-
-      faker.renderComponent('header', {
-        ...EXAMPLE_HEADER_BASIC,
-        titleLogo: 'custom-title-logo',
-        titleLogoMobile: 'custom-title-mobile-logo',
-        titleLogoAlt: 'custom logo alt',
-      });
-
-      expect(iconsSpy.occurrences[3].iconType).toBe('custom-title-mobile-logo');
-    });
-
-    it('has the provided title logo mobile classes', () => {
+    it('has the provided small title logo', () => {
       const $ = cheerio.load(
         renderComponent('header', {
           ...EXAMPLE_HEADER_BASIC,
-          titleLogo: 'custom-title-logo',
-          titleLogoMobile: 'custom-title-mobile-logo',
-          titleLogoMobileClasses: 'custom-mobile-class',
-          titleLogoAlt: 'custom logo alt',
+          titleLogo: { large: '<img src="another-logo.svg">', small: '<img src="another-logo-small.svg">' },
         }),
       );
 
-      expect($('.ons-header__title-logo--mobile').hasClass('custom-mobile-class')).toBe(true);
+      expect($('.ons-header__title-logo--small img').attr('src')).toBe('another-logo-small.svg');
     });
 
     it('displays the `description` text', () => {
@@ -653,8 +627,8 @@ describe('macro: header', () => {
             text: 'Menu',
             ariaLabel: 'Toggle main menu',
           },
-          siteSearchAutosuggest: {},
         },
+        siteSearchAutosuggest: {},
       });
 
       expect(buttonSpy.occurrences[0]).toEqual({
@@ -671,12 +645,4 @@ describe('macro: header', () => {
       });
     });
   });
-
-  describe('mode: without masthead', () => {
-    it('does not render the masthead', () => {
-      const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, ...EXAMPLE_HEADER_LANGUAGE_CONFIG, noMasthead: true }));
-
-      expect($('.ons-header__top').length).toBe(0);
-    });
-  });
 });

package/components/hero/_hero.scss

@@ -6,6 +6,10 @@
   padding: 0;
   position: relative;
 
+  &--dark {
+    background-color: var(--ons-color-hero-bg-dark);
+  }
+
   &__container {
     align-items: center;
     display: flex;