@ons/design-system 72.3.0 → 72.5.0

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="-5 0 90 90"
             fill="none"
             title="ons-official-statistics-badge"
             focusable="false"
@@ -844,5 +844,38 @@
                 fill="#003C57"
             />
         </svg>
+    {%- elif params.iconType == "census-logo" -%}
+        <svg xmlns="http://www.w3.org/2000/svg" class="ons-icon--logo{{ iconClasses }}" width="152" height="16" viewBox="0 0 171 18">
+            <title id="{{ params.altTextId | default ('census-logo-alt') }}">{{ params.altText | default ('Census 2021 Logo') }}</title>
+            <path
+                d="M22.9246 6.96226H31.8567C31.0755 5.26415 29.3774 4.09245 27.3906 4.09245C25.4038 4.09245 23.7057 5.26415 22.9246 6.96226ZM27.3906 18C22.4321 18 18.3906 13.9585 18.3906 9C18.3906 4.04151 22.4321 0 27.3906 0C32.3491 0 36.3906 4.04151 36.3906 9C36.3906 10.1208 35.4736 11.0377 34.3529 11.0377H22.9246C23.7057 12.7358 25.4038 13.9076 27.3906 13.9076C28.5114 13.9076 29.4284 14.8245 29.4284 15.9453C29.4284 17.083 28.5114 18 27.3906 18Z"
+                fill="#902092"
+            />
+            <path
+                d="M54.2716 17.8811C53.1508 17.8811 52.2338 16.9642 52.2338 15.8434V9C52.2338 6.3 50.0263 4.09245 47.3263 4.09245C44.6263 4.09245 42.4187 6.3 42.4187 9V15.8434C42.4187 16.9642 41.5018 17.8811 40.381 17.8811C39.2602 17.8811 38.3433 16.9642 38.3433 15.8434V9C38.3433 4.04151 42.3848 0 47.3433 0C52.3018 0 56.3433 4.04151 56.3433 9V15.8434C56.3093 16.9642 55.3923 17.8811 54.2716 17.8811Z"
+                fill="#902092"
+            />
+            <path
+                d="M83.8359 17.8811C78.8774 17.8811 74.8359 13.8396 74.8359 8.88113V2.03774C74.8359 0.916981 75.7529 0 76.8737 0C78.0114 0 78.9114 0.916981 78.9114 2.03774V8.88113C78.9114 11.5811 81.119 13.7887 83.819 13.7887C86.519 13.7887 88.7265 11.5811 88.7265 8.88113V2.03774C88.7265 0.916981 89.6435 0 90.7642 0C91.885 0 92.802 0.916981 92.802 2.03774V8.88113C92.8359 13.8396 88.8114 17.8811 83.8359 17.8811Z"
+                fill="#902092"
+            />
+            <path
+                d="M66.9735 7.33596C64.0867 6.72464 62.932 6.46992 62.932 5.41709C62.932 4.36426 64.4093 3.7869 66.0395 3.7869C66.9056 3.7869 67.7207 3.99067 68.3999 4.26237C68.6716 4.36425 68.9433 4.44917 69.249 4.44917C70.3018 4.44917 71.1509 3.60011 71.1509 2.54728C71.1509 1.68124 70.5905 0.934071 69.8093 0.696335C68.7905 0.32275 67.4999 0.0170898 66.0395 0.0170898C61.3527 0.0170898 58.6697 2.68312 58.6697 5.36614C58.6697 8.60954 61.6244 10.0529 65.0207 10.7831C67.6188 11.3265 68.4169 11.5473 68.4169 12.668C68.4169 13.7209 66.9395 14.2133 65.1735 14.2133C63.5773 14.2133 62.3886 13.568 61.3357 13.0246C61.3188 13.0246 61.3357 13.0246 61.3357 13.0246C61.115 12.9397 60.8263 12.8548 60.5716 12.8548C59.5018 12.8548 58.6357 13.7209 58.6357 14.7907C58.6357 15.5548 59.0773 16.2171 59.7225 16.5227C61.0301 17.2699 62.898 18.0001 65.3263 18.0001C69.6905 18.0001 72.798 15.6567 72.798 12.719C72.781 9.1869 70.3697 8.06615 66.9735 7.33596Z"
+                fill="#902092"
+            />
+            <path
+                d="M103.245 7.33596C100.359 6.72464 99.2038 6.46992 99.2038 5.41709C99.2038 4.36426 100.681 3.7869 102.311 3.7869C103.177 3.7869 103.993 3.99067 104.672 4.26237C104.943 4.36425 105.215 4.44917 105.521 4.44917C106.574 4.44917 107.423 3.60011 107.423 2.54728C107.423 1.68124 106.862 0.968033 106.081 0.696335C105.062 0.32275 103.772 0.0170898 102.311 0.0170898C97.6246 0.0170898 94.9416 2.68312 94.9416 5.36614C94.9416 8.60954 97.8963 10.0529 101.293 10.7831C103.891 11.3265 104.689 11.5473 104.689 12.668C104.689 13.7209 103.211 14.2133 101.445 14.2133C99.8491 14.2133 98.6265 13.551 97.5567 13.0076C97.5397 12.9907 97.5567 13.0076 97.5567 13.0076C97.3359 12.9227 97.0812 12.8548 96.8265 12.8548C95.7567 12.8548 94.8906 13.7209 94.8906 14.7907C94.8906 15.5548 95.3491 16.2001 95.9774 16.5227C97.285 17.2699 99.1529 18.0001 101.581 18.0001C105.945 18.0001 109.053 15.6567 109.053 12.719C109.053 9.1869 106.642 8.06615 103.245 7.33596Z"
+                fill="#902092"
+            />
+            <path
+                d="M9.50928 18C4.55079 18 0.509277 13.9585 0.509277 9C0.509277 4.04151 4.55079 0 9.50928 0C11.9885 0 14.3829 1.05283 16.081 2.86981C16.8451 3.70189 16.8112 4.99246 15.9791 5.75661C15.147 6.52076 13.8564 6.48679 13.0923 5.65472C12.1583 4.63585 10.8678 4.09245 9.50928 4.09245C6.80928 4.09245 4.60173 6.3 4.60173 9C4.60173 11.7 6.80928 13.9076 9.50928 13.9076C10.8848 13.9076 12.1583 13.3472 13.0923 12.3283C13.8564 11.4962 15.147 11.4623 15.9791 12.2264C16.8112 12.9906 16.8451 14.2811 16.081 15.1132C14.3829 16.9472 11.9885 18 9.50928 18Z"
+                fill="#902092"
+            />
+            <path
+                opacity="0.7"
+                d="M114.113 16.1152V15.4529C114.113 11.9208 116.847 10.3585 119.428 9.08496C121.687 7.96421 123.708 7.11515 123.708 5.26421C123.708 3.48119 122.4 2.42836 120.21 2.42836C117.696 2.42836 116.491 3.97364 116.015 5.7227C116.015 5.80761 114.215 5.82459 114.215 4.39817C114.215 3.49817 114.742 2.42836 115.777 1.5793C116.813 0.730242 118.376 0.0849609 120.396 0.0849609C124.132 0.0849609 126.391 2.02081 126.391 5.21327C126.391 8.28685 123.945 9.50949 121.347 10.6982C119.089 11.7001 117.238 12.668 116.779 14.485C116.728 14.7227 116.677 14.9944 116.677 15.2491H125.389C126.289 15.2491 126.696 15.6227 126.696 16.3189V16.4718C126.696 17.185 126.306 17.5925 125.389 17.5925H115.811C114.606 17.5925 114.113 17.2019 114.113 16.1152ZM128.564 9.90005V8.151C128.564 3.19251 131.298 0.0849609 135.696 0.0849609C140.162 0.0849609 142.862 3.15854 142.862 8.11703V9.84911C142.862 14.8076 140.128 17.9491 135.696 17.9491C131.247 17.9491 128.564 14.8585 128.564 9.90005ZM140.145 9.98496V8.06609C140.145 4.44911 138.498 2.32647 135.713 2.32647C132.928 2.32647 131.332 4.39816 131.332 7.99817V9.93402C131.332 13.551 132.945 15.6057 135.713 15.6057C138.549 15.6397 140.145 13.585 140.145 9.98496ZM145.155 16.1152V15.4529C145.155 11.9208 147.889 10.3585 150.47 9.08496C152.728 7.96421 154.749 7.11515 154.749 5.26421C154.749 3.48119 153.442 2.42836 151.251 2.42836C148.738 2.42836 147.532 3.97364 147.057 5.7227C147.057 5.80761 145.257 5.82459 145.257 4.39817C145.257 3.49817 145.783 2.42836 146.819 1.5793C147.855 0.730242 149.417 0.0849609 151.438 0.0849609C155.174 0.0849609 157.432 2.02081 157.432 5.21327C157.432 8.28685 154.987 9.50949 152.389 10.6982C150.13 11.7001 148.279 12.668 147.821 14.485C147.77 14.7227 147.719 14.9944 147.719 15.2491H156.43C157.33 15.2491 157.738 15.6227 157.738 16.3189V16.4718C157.738 17.185 157.347 17.5925 156.43 17.5925H146.87C145.647 17.5925 145.155 17.2019 145.155 16.1152ZM161.202 16.5397V16.4038C161.202 15.6397 161.626 15.2831 162.442 15.2831H165.311V3.05666C164.276 3.87175 163.851 4.36421 163.342 4.75477C162.815 5.1793 162.391 5.33214 161.932 5.33214C161.032 5.33214 160.523 4.56798 160.523 3.66798L165.651 0.305714H166.585C167.349 0.305714 167.808 0.730245 167.808 1.54534L167.774 15.2831H170.083C170.898 15.2831 171.323 15.6227 171.323 16.4038V16.5397C171.323 17.2869 170.898 17.6095 170.083 17.6095H162.442C161.626 17.5925 161.202 17.2869 161.202 16.5397Z"
+                fill="#902092"
+            />
+        </svg>
     {%- endif -%}
 {% endmacro %}

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');
+        }
+    }
 }