@ons/design-system 72.4.0 → 72.6.0

package/components/header/header.spec.js

@@ -0,0 +1,128 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+import { EXAMPLE_HEADER_SEARCH_AND_MENU_LINKS } from './_test-examples';
+import { getNodeAttributes } from '../../tests/helpers/puppeteer';
+
+describe('script: header', () => {
+    beforeEach(async () => {
+        await setTestPage('/test', renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_AND_MENU_LINKS, variants: 'basic' }));
+    });
+
+    describe('when the search button is clicked', () => {
+        beforeEach(async () => {
+            await page.click('.ons-js-toggle-header-search');
+        });
+
+        it('then the search input form is visible and does not have the ons-u-d-no class', async () => {
+            await page.waitForSelector('.ons-header-nav-search');
+            const isSearchNavVisible = await page.$eval('.ons-header-nav-search', (el) => !el.classList.contains('ons-u-d-no'));
+            expect(isSearchNavVisible).toBe(true);
+        });
+
+        it('then the button switches to the close icon', async () => {
+            const hasCloseIcon = await page.$eval('.ons-js-toggle-header-search svg', (el) => el.classList.contains('ons-icon--close'));
+            expect(hasCloseIcon).toBe(true);
+        });
+
+        it('then the button has aria-expanded="true"', async () => {
+            const attributes = await getNodeAttributes(page, '.ons-js-toggle-header-search');
+            expect(attributes['aria-expanded']).toBe('true');
+        });
+
+        it('then the button has aria-hidden="false"', async () => {
+            const attributes = await getNodeAttributes(page, '.ons-js-header-search');
+            expect(attributes['aria-hidden']).toBe('false');
+        });
+
+        it('then the search field has full width', async () => {
+            await page.waitForSelector('.ons-header-nav-search__input .ons-input');
+            const isFullWidth = await page.$eval('.ons-header-nav-search__input .ons-input', (el) =>
+                el.classList.contains('ons-input--w-full'),
+            );
+            expect(isFullWidth).toBe(true);
+        });
+    });
+
+    describe('when the search button is not clicked', () => {
+        it('then the search form is hidden', async () => {
+            const isSearchNavHidden = await page.$eval('.ons-header-nav-search', (el) => el.classList.contains('ons-u-d-no'));
+            expect(isSearchNavHidden).toBe(true);
+        });
+
+        it('then the button displays the search icon', async () => {
+            const hasSearchIcon = await page.$eval('.ons-js-toggle-header-search svg', (el) => el.classList.contains('ons-icon--search'));
+            expect(hasSearchIcon).toBe(true);
+        });
+
+        it('then the button has aria-expanded="false"', async () => {
+            const attributes = await getNodeAttributes(page, '.ons-js-toggle-header-search');
+            expect(attributes['aria-expanded']).toBe('false');
+        });
+
+        it('then the button has aria-hidden="true"', async () => {
+            const attributes = await getNodeAttributes(page, '.ons-js-header-search');
+            expect(attributes['aria-hidden']).toBe('true');
+        });
+    });
+
+    describe('when the search button is clicked again (to close)', () => {
+        beforeEach(async () => {
+            await page.click('.ons-js-toggle-header-search'); // Open
+            await page.waitForSelector('.ons-header-nav-search');
+            await page.click('.ons-js-toggle-header-search'); // Close
+        });
+
+        it('then the search form is hidden', async () => {
+            const isSearchNavHidden = await page.$eval('.ons-header-nav-search', (el) => el.classList.contains('ons-u-d-no'));
+            expect(isSearchNavHidden).toBe(true);
+        });
+
+        it('then the button switches back to the search icon', async () => {
+            const hasSearchIcon = await page.$eval('.ons-js-toggle-header-search svg', (el) => el.classList.contains('ons-icon--search'));
+            expect(hasSearchIcon).toBe(true);
+        });
+
+        it('then the button has aria-expanded="false"', async () => {
+            const attributes = await getNodeAttributes(page, '.ons-js-toggle-header-search');
+            expect(attributes['aria-expanded']).toBe('false');
+        });
+    });
+
+    describe('when the menu button is clicked', () => {
+        beforeEach(async () => {
+            await page.click('.ons-btn--menu');
+        });
+
+        it('then the navigation menu is displayed', async () => {
+            await page.waitForSelector('.ons-header-nav-menu');
+            const isMenuNavVisible = await page.$eval('.ons-header-nav-menu', (el) => !el.classList.contains('ons-u-d-no'));
+            expect(isMenuNavVisible).toBe(true);
+        });
+
+        it('then the menu button is marked as expanded', async () => {
+            const menuButtonAriaExpanded = await page.$eval('.ons-btn--menu', (el) => el.getAttribute('aria-expanded'));
+            expect(menuButtonAriaExpanded).toBe('true');
+        });
+
+        it('then the navigation menu aria-hidden attribute is set to false', async () => {
+            const isAriaHiddenFalse = await page.$eval('.ons-header-nav-menu', (el) => el.getAttribute('aria-hidden') === 'false');
+            expect(isAriaHiddenFalse).toBe(true);
+        });
+    });
+
+    describe('when the menu button is not clicked', () => {
+        it('then the navigation menu is hidden', async () => {
+            const isMenuNavHidden = await page.$eval('.ons-header-nav-menu', (el) => el.classList.contains('ons-u-d-no'));
+            expect(isMenuNavHidden).toBe(true);
+        });
+
+        it('then the menu button is marked as not expanded', async () => {
+            const menuButtonAriaExpanded = await page.$eval('.ons-btn--menu', (el) => el.getAttribute('aria-expanded'));
+            expect(menuButtonAriaExpanded).toBe('false');
+        });
+
+        it('then the navigation menu aria-hidden attribute is set to true', async () => {
+            const isAriaHiddenTrue = await page.$eval('.ons-header-nav-menu', (el) => el.getAttribute('aria-hidden') === 'true');
+            expect(isAriaHiddenTrue).toBe(true);
+        });
+    });
+});

package/components/hero/_hero.scss

@@ -1,4 +1,14 @@
 // Default
+@mixin panel-variant($name, $color, $color-bg) {
+    .ons-hero__panel {
+        &--#{$name} {
+            background: $color-bg;
+            border-color: $color !important;
+            outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+        }
+    }
+}
+
 .ons-hero {
     background-color: var(--ons-color-hero-bg);
     display: flex;
@@ -70,12 +80,10 @@
             }
         }
     }
-    &__badge {
-        @include mq(l) {
-            position: absolute;
-            right: 0;
-            top: 85px;
-        }
+
+    &__badge-link {
+        display: block;
+        width: fit-content;
     }
 
     &--topic {
@@ -95,7 +103,27 @@
     }
 
     &__content {
-        height: 100%;
+        @include mq(l) {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+        }
+    }
+
+    &__information {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 1rem;
+
+        & .ons-hero__panel {
+            padding: 0.5rem 1rem;
+            border-left: 5px solid transparent;
+            @extend .ons-u-fs-r--b;
+        }
+
+        & .ons-hero__link {
+            padding: 0.5rem 0;
+        }
     }
 
     &__pre-title {
@@ -434,3 +462,7 @@
         }
     }
 }
+
+@include panel-variant(ons-red, var(--ons-color-errors), var(--ons-color-errors-tint));
+@include panel-variant(ons-green, var(--ons-color-success), var(--ons-color-success-tint));
+@include panel-variant(ons-orange, var(--ons-color-pending), var(--ons-color-pending-tint));

package/components/hero/_macro.njk

@@ -37,27 +37,47 @@
                 {% if params.topic %}
                     <h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
                 {% endif %}
-                <div class="ons-hero__title-container">
-                    <header>
-                        <h1 class="ons-hero__title ons-u-fs-3xl">{{ params.title }}</h1>
-                        {% if params.subtitle %}
-                            <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
+
+                <div class="ons-hero__content">
+                    <div class="ons-hero__title-container">
+                        <header>
+                            <h1 class="ons-hero__title ons-u-fs-3xl">{{ params.title }}</h1>
+                            {% if params.subtitle %}
+                                <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
+                            {% endif %}
+                        </header>
+
+                        {% if params.text %}
+                            <p class="ons-hero__text">{{ params.text | safe }}</p>
                         {% endif %}
-                    </header>
-                    {% if params.text %}
-                        <p class="ons-hero__text">{{ params.text | safe }}</p>
-                    {% endif %}
-                </div>
-                {% if params.variants == "grey" %}
-                    {% if params.officialStatisticsBadge == true %}
+                    </div>
+
+                    {% if params.variants == "grey" and params.officialStatisticsBadge == true %}
                         <div class="ons-hero__badge ons-u-mb-s">
-                            {{-
-                                onsIcon({
-                                    "iconType": 'official-statistics'
-                                })
-                            -}}
+                            {% if params.officialStatisticsBadgeUrl %}
+                                <a
+                                    href="{{ params.officialStatisticsBadgeUrl }}"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    class="ons-hero__badge-link"
+                                >
+                                    {{-
+                                        onsIcon({
+                                            "iconType": 'official-statistics'
+                                        })
+                                    -}}
+                                </a>
+                            {% else %}
+                                {{-
+                                    onsIcon({
+                                        "iconType": 'official-statistics'
+                                    })
+                                -}}
+                            {% endif %}
                         </div>
                     {% endif %}
+                </div>
+                {% if params.variants == "grey" %}
                     {% if params.censusLogo == true %}
                         <div class="ons-hero__census-logo">
                             {{-
@@ -67,6 +87,16 @@
                             -}}
                         </div>
                     {% endif %}
+                    {% if params.informationPanel %}
+                        <div class="ons-hero__information ons-u-mt-s">
+                            <div class="ons-hero__panel ons-hero__panel--{{ params.informationPanel.panelType }}">
+                                {{- params.informationPanel.panelText -}}
+                            </div>
+                            <div class="ons-hero__link">
+                                <a href="{{ params.informationPanel.panelLink.url }}">{{ params.informationPanel.panelLink.text }}</a>
+                            </div>
+                        </div>
+                    {% endif %}
                 {% endif %}
 
                 {% if params.button %}

package/components/hero/_macro.spec.js

@@ -112,6 +112,22 @@ describe('macro: hero', () => {
         expect($('.ons-hero__badge svg title').text().trim()).toBe('Offical Statistics Badge');
     });
 
+    it('outputs the statistics badge as a link when officialStatisticsBadgeUrl is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                ...EXAMPLE_HERO,
+                variants: 'grey',
+                officialStatisticsBadge: true,
+                officialStatisticsBadgeUrl: 'https://example.com/badge',
+            }),
+        );
+
+        expect($('.ons-hero__badge-link').length).toBe(1);
+        expect($('.ons-hero__badge-link').attr('href')).toBe('https://example.com/badge');
+        expect($('.ons-hero__badge-link').attr('target')).toBe('_blank');
+        expect($('.ons-hero__badge-link').attr('rel')).toBe('noopener noreferrer');
+    });
+
     it('outputs the Census 2021 Logo when censusLogo is set to true and variants is set to "grey"', () => {
         const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'grey', censusLogo: true }));
 
@@ -136,6 +152,84 @@ describe('macro: hero', () => {
         expect($('.ons-hero--grey').length).toBe(1);
     });
 
+    describe('when `informationPanel` is provided and the variant is set to `grey`', () => {
+        describe('and `panelText` and `panelLink` are provided', () => {
+            it('renders the information panel with correct text and link`', () => {
+                const $ = cheerio.load(
+                    renderComponent('hero', {
+                        ...EXAMPLE_HERO,
+                        variants: 'grey',
+                        informationPanel: {
+                            panelText: 'Some panel text',
+                            panelType: 'ons-green',
+                            panelLink: {
+                                text: 'Some link text',
+                                url: '#0',
+                            },
+                        },
+                    }),
+                );
+
+                expect($('.ons-hero__information').length).toBe(1);
+                expect($('.ons-hero__panel').length).toBe(1);
+                expect($('.ons-hero__panel').text().trim()).toBe('Some panel text');
+                expect($('.ons-hero__link > a').text().trim()).toBe('Some link text');
+                expect($('.ons-hero__link > a').attr('href')).toBe('#0');
+            });
+        });
+
+        describe('and `panelType` is set to `ons-green`', () => {
+            it('renders the green information panel`', () => {
+                const $ = cheerio.load(
+                    renderComponent('hero', {
+                        ...EXAMPLE_HERO,
+                        variants: 'grey',
+                        informationPanel: {
+                            panelText: 'Some panel text',
+                            panelType: 'ons-green',
+                        },
+                    }),
+                );
+
+                expect($('.ons-hero__panel').hasClass('ons-hero__panel--ons-green')).toBe(true);
+            });
+        });
+
+        describe('and `panelType` is set to `ons-red`', () => {
+            it('renders the red information panel`', () => {
+                const $ = cheerio.load(
+                    renderComponent('hero', {
+                        ...EXAMPLE_HERO,
+                        variants: 'grey',
+                        informationPanel: {
+                            panelText: 'Some panel text',
+                            panelType: 'ons-red',
+                        },
+                    }),
+                );
+
+                expect($('.ons-hero__panel').hasClass('ons-hero__panel--ons-red')).toBe(true);
+            });
+        });
+
+        describe('and `panelType` is set to `ons-orange`', () => {
+            it('renders the orange information panel`', () => {
+                const $ = cheerio.load(
+                    renderComponent('hero', {
+                        ...EXAMPLE_HERO,
+                        variants: 'grey',
+                        informationPanel: {
+                            panelText: 'Some panel text',
+                            panelType: 'ons-orange',
+                        },
+                    }),
+                );
+
+                expect($('.ons-hero__panel').hasClass('ons-hero__panel--ons-orange')).toBe(true);
+            });
+        });
+    });
+
     it('outputs the correct breadcrumbs', () => {
         const $ = cheerio.load(
             renderComponent('hero', {

package/components/hero/example-hero-grey.njk

@@ -8,6 +8,15 @@
         "variants": 'grey',
         "detailsColumns": '12',
         "officialStatisticsBadge": true,
+        "officialStatisticsBadgeUrl": 'https://uksa.statisticsauthority.gov.uk/about-the-authority/uk-statistical-system/types-of-official-statistics/',
+        "informationPanel":{
+            "panelText": 'Latest release',
+            "panelType": 'ons-green',
+            "panelLink": {
+                "text": 'View previous releases',
+                "url": '#0'
+            }
+        },
         "topic": 'Statistical article',
         "title": 'Retail sales rise amid summer discounts and sporting events, according to a first estimate',
         "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id mattis ligula, nec sollicitudin arcu. Donec non tristique tellus. Donec eget malesuada lorem.',

package/components/icon/_macro.njk

@@ -203,7 +203,7 @@
         </svg>
     {%- elif params.iconType == "search" -%}
         <svg
-            class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}"
+            class="{% if params.iconSize %}ons-icon ons-icon--search ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}"
             viewBox="0 0 12 12"
             xmlns="http://www.w3.org/2000/svg"
             aria-hidden="true"
@@ -345,8 +345,8 @@
         <svg
             class="ons-icon--logo{{ iconClasses }}"
             xmlns="http://www.w3.org/2000/svg"
-            width="208"
-            height="20"
+            width="250"
+            height="24"
             viewBox="33 2 552 60"
             aria-labelledby="{{ params.altTextId | default ('ons-logo-en-alt') }}"
             role="img"
@@ -442,8 +442,8 @@
         <svg
             class="ons-icon--logo{{ iconClasses }}"
             xmlns="http://www.w3.org/2000/svg"
-            width="218"
-            height="20"
+            width="262"
+            height="24"
             viewBox="15 2 620 60"
             aria-labelledby="{{ params.altTextId | default ('ons-logo-cy-alt') }}"
             role="img"
@@ -701,9 +701,9 @@
     {%- elif params.iconType == "official-statistics" -%}
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="77"
-            height="93"
-            viewBox="0 0 77 93"
+            width="75"
+            height="90"
+            viewBox="-6 0 90 90"
             fill="none"
             title="ons-official-statistics-badge"
             focusable="false"

package/components/input/_input.scss

@@ -86,6 +86,16 @@
     margin-top: 0.25rem;
 }
 
+.ons-input--header-search {
+    border-radius: 0;
+    height: 56px;
+    border: 2px solid var(--ons-color-ocean-blue);
+
+    &:focus {
+        border: 2px solid var(--ons-color-input-border);
+    }
+}
+
 .ons-input--select {
     appearance: none;
     background: var(--ons-color-input-bg)
@@ -149,6 +159,11 @@
     height: 2.5rem;
 }
 
+.ons-input__button--header-search {
+    gap: 0;
+    height: 100%;
+}
+
 .ons-input-search {
     @extend .ons-input--block;
     @extend .ons-input--ghost;

package/components/input/_macro.njk

@@ -25,7 +25,7 @@
         <input
             type="{{ type }}"
             id="{{ params.id }}"
-            class="ons-input ons-input--text ons-input-type__input{{ ' ons-input--error' if params.error }}{{ ' ons-search__input' if params.searchButton }}{{ ' ' + params.classes if params.classes else '' }}{% if params.width %}{{ ' ' }}ons-input{% if params.type == 'number' or params.type == 'tel' %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
+            class="ons-input ons-input--text ons-input-type__input{{ ' ons-input--error' if params.error }}{{ ' ons-search__input' if params.searchButton }}{{ ' ons-input--header-search' if params.searchButton.variant == 'header' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.width %}{{ ' ' }}ons-input{% if params.type == 'number' or params.type == 'tel' %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
             {% if params.prefix and params.prefix.id and not params.prefix.title %}aria-labelledby="{{ params.prefix.id }}"{% elif params.suffix and params.suffix.id and not params.suffix.title %}aria-labelledby="{{ params.suffix.id }}"{% endif %}
             {% if params.prefix and params.prefix.id %}
                 aria-labelledby="{{ params.id }} {{ params.prefix.id }}"
@@ -110,7 +110,7 @@
             {% endif %}
         {% elif params.searchButton %}
             <span
-                class="ons-grid-flex ons-grid-flex--vertical-top ons-input_search-button{{ ' ons-input--with-text-description' if params.label.description }}"
+                class="ons-grid-flex ons-grid-flex--vertical-top ons-input_search-button{{ ' ons-input__button--header-search' if params.searchButton.variant == 'header' }}{{ ' ons-input--with-text-description' if params.label.description }}"
             >
                 {% if params.accessiblePlaceholder %}
                     {{
@@ -142,7 +142,7 @@
                         "html": buttonLabel,
                         "text": params.searchButton.text,
                         "id": params.searchButton.id,
-                        "variants": 'small',
+                        "variants": 'header-search' if params.searchButton.variant == 'header' else 'small',
                         "classes": 'ons-search__btn' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
                         "attributes": params.searchButton.attributes,
                         "iconType": params.searchButton.iconType,

package/components/navigation/navigation.dom.js

@@ -13,6 +13,11 @@ domready(async () => {
     const toggleServicesBtn = document.querySelector('.ons-js-toggle-services');
     const servicesEl = document.querySelector('.ons-js-services-mobile-nav');
     const servicesHideClass = 'ons-u-d-no';
+    const toggleHeaderSearchBtn = document.querySelector('.ons-js-toggle-header-search');
+    const headerSearchHideClass = 'ons-u-d-no';
+    const headerSearchEl = document.querySelector('.ons-js-header-search');
+    const menuEl = document.querySelector('.ons-js-nav-menu');
+    const toggleHeaderMenuBtn = document.querySelector('.ons-js-toggle-nav-menu');
 
     if (toggleNavigationBtn) {
         const NavigationToggle = (await import('./navigation')).default;
@@ -31,6 +36,18 @@ domready(async () => {
         new searchToggle(toggleSearchBtn, searchEl, searchHideClass).registerEvents();
     }
 
+    if (toggleHeaderSearchBtn) {
+        const searchToggle = (await import('./navigation')).default;
+
+        new searchToggle(toggleHeaderSearchBtn, headerSearchEl, headerSearchHideClass).registerEvents();
+    }
+
+    if (toggleHeaderMenuBtn) {
+        const searchToggle = (await import('./navigation')).default;
+
+        new searchToggle(toggleHeaderMenuBtn, menuEl, headerSearchHideClass).registerEvents();
+    }
+
     if (toggleServicesBtn) {
         const servicesToggle = (await import('./navigation')).default;
 

package/components/navigation/navigation.js

@@ -8,6 +8,7 @@ export default class NavigationToggle {
         this.toggle = toggle;
         this.navigation = navigation;
         this.hideClass = hideClass;
+
         this.toggle.classList.remove('ons-u-d-no');
         this.setAria();
         onViewportChange(this.setAria.bind(this));
@@ -25,7 +26,6 @@ export default class NavigationToggle {
     openNav() {
         const input = [...this.navigation.getElementsByTagName('INPUT')][0];
 
-        this.toggle.setAttribute(attrExpanded, 'true');
         this.toggle.classList.add('active');
         this.navigation.setAttribute(attrHidden, 'false');
         this.navigation.classList.remove(this.hideClass);
@@ -33,13 +33,57 @@ export default class NavigationToggle {
         if (input) {
             input.focus();
         }
+
+        const searchToggleBtn = document.querySelector('.ons-js-toggle-header-search');
+        if (this.toggle === searchToggleBtn) {
+            this.updateSearchIcon(true, this.toggle);
+        }
+
+        this.toggle.setAttribute(attrExpanded, 'true');
+
+        this.toggleMenuAndSearch();
     }
 
     closeNav() {
-        this.toggle.setAttribute(attrExpanded, 'false');
         this.toggle.classList.remove('active');
         this.navigation.setAttribute(attrHidden, 'true');
         this.navigation.classList.add(this.hideClass);
+
+        const searchToggleBtn = document.querySelector('.ons-js-toggle-header-search');
+        if (this.toggle === searchToggleBtn) {
+            this.updateSearchIcon(false, this.toggle);
+        }
+
+        this.toggle.setAttribute(attrExpanded, 'false');
+    }
+
+    updateSearchIcon(isOpen, toggle) {
+        const searchIconSVG = `
+            <span class="ons-btn__inner">
+                <svg class="ons-icon ons-icon--search ons-u-mr-2xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" role="img" title="ons-icon-search">
+                    <path d="M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z"></path>
+                </svg>
+                <span class="ons-btn__text"></span>
+            </span>`;
+
+        const closeIconSVG = `
+            <span class="ons-btn__inner">
+                <svg class="ons-icon ons-icon--close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" fill="currentColor" role="img" title="ons-icon-close">
+                    <path d="M12 0C5.4 0 0 5.4 0 12C0 18.6 5.4 24 12 24C18.6 24 24 18.6 24 12C24 5.4 18.6 0 12 0ZM17.3143 15.5143C17.6571 15.8571 17.6571 16.3714 17.3143 16.7143L16.7143 17.3143C16.3714 17.6571 15.8571 17.6571 15.5143 17.3143L12 13.8L8.48571 17.3143C8.14286 17.6571 7.62857 17.6571 7.28571 17.3143L6.68571 16.7143C6.34286 16.3714 6.34286 15.8571 6.68571 15.5143L10.2 12L6.68571 8.48571C6.34286 8.14286 6.34286 7.62857 6.68571 7.28571L7.28571 6.68571C7.62857 6.34286 8.14286 6.34286 8.48571 6.68571L12 10.2L15.5143 6.68571C15.8571 6.34286 16.3714 6.34286 16.7143 6.68571L17.3143 7.28571C17.6571 7.62857 17.6571 8.14286 17.3143 8.48571L13.8 12L17.3143 15.5143Z"/>
+                </svg>
+                <span class="ons-btn__text"></span>
+            </span>`;
+
+        if (isOpen) {
+            toggle.classList.add('ons-btn--close');
+            this.toggle.classList.remove('ons-btn--search-icon');
+            this.toggle.innerHTML = closeIconSVG;
+        }
+        if (!isOpen) {
+            toggle.classList.remove('ons-btn--close');
+            toggle.classList.add('ons-btn--search-icon');
+            toggle.innerHTML = searchIconSVG;
+        }
     }
 
     isHidden(el) {
@@ -64,4 +108,30 @@ export default class NavigationToggle {
             }
         }
     }
+
+    toggleMenuAndSearch() {
+        const menuBtn = document.querySelector('.ons-js-toggle-nav-menu');
+        const menuEl = document.querySelector('.ons-js-nav-menu');
+        const searchToggle = document.querySelector('.ons-js-toggle-header-search');
+        const searchBtn = document.querySelector('.ons-btn--search');
+        const searchEl = document.querySelector('.ons-js-header-search');
+
+        const isMenuOpen = menuBtn.getAttribute('aria-expanded') === 'true';
+        const isSearchOpen = searchBtn.getAttribute('aria-expanded') === 'true';
+
+        if (isMenuOpen && this.toggle == menuBtn) {
+            this.updateSearchIcon(false, searchToggle);
+            searchBtn.setAttribute('aria-expanded', 'false');
+            searchEl.setAttribute('aria-hidden', 'true');
+            searchEl.classList.add('ons-u-d-no');
+            searchToggle.classList.remove('active');
+        }
+
+        if (isSearchOpen && this.toggle == searchToggle) {
+            menuBtn.setAttribute('aria-expanded', 'false');
+            menuEl.setAttribute('aria-hidden', 'true');
+            menuEl.classList.add('ons-u-d-no');
+            menuBtn.classList.remove('active');
+        }
+    }
 }

package/components/pagination/_pagination.scss

@@ -7,7 +7,6 @@ $pagination-item-width: 2.5rem;
     }
 
     &__items {
-        margin: 0 $pagination-item-padding * -1;
         padding: 0;
     }
 
@@ -17,6 +16,7 @@ $pagination-item-width: 2.5rem;
 
         &--previous,
         &--next {
+            margin: 0 $pagination-item-padding * -1;
             display: inline-block;
         }
 
@@ -25,6 +25,12 @@ $pagination-item-width: 2.5rem;
                 display: inline-block;
             }
         }
+
+        @include mq('2xs', m) {
+            &--previous ~ &--next {
+                margin: 0;
+            }
+        }
     }
 
     &__item,