Add search button to header

__snapshots__/layout/_template.spec.js.snap

@@ -230,10 +230,14 @@ exports[`base page template matches the favicons block override snapshot 1`] = `
 
                         </div>
 
+
 
                 </div>
             </div>
 
+
+
+
 
         </div>
 
@@ -473,10 +477,14 @@ exports[`base page template matches the footer block override snapshot 1`] = `
 
                         </div>
 
+
 
                 </div>
             </div>
 
+
+
+
 
         </div>
 
@@ -848,6 +856,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
                         </div>
 
+
 
                 </div>
             </div>
@@ -890,6 +899,9 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
                 </nav>
 
+
+
+
 
         </div>
 
@@ -2005,10 +2017,14 @@ exports[`base page template matches the meta block override snapshot 1`] = `
 
                         </div>
 
+
 
                 </div>
             </div>
 
+
+
+
 
         </div>
 
@@ -2232,10 +2248,14 @@ exports[`base page template matches the social block override snapshot 1`] = `
 
                         </div>
 
+
 
                 </div>
             </div>
 
+
+
+
 
         </div>
 

src/components/button/_button.scss

@@ -35,6 +35,51 @@ $button-shadow-size: 3px;
         }
     }
 
+    &--header-search &,
+    &--header-search:focus &,
+    &--header-search:active &,
+    &--header-search.active &,
+    &--header-search:active:focus &,
+    &--header-search.active:focus & {
+        &__inner {
+            background: var(--ons-color-ocean-blue) !important;
+        }
+    }
+
+    &--header-search &,
+    &--header-search:active &,
+    &--header-search.active & {
+        &__inner {
+            padding: 0.75rem 1rem !important;
+            border: 2px solid var(--ons-color-ocean-blue);
+            border-radius: 0;
+            box-shadow: none;
+            .ons-icon {
+                fill: var(--ons-color-text-inverse) !important;
+                height: 28px;
+                width: 28px;
+            }
+        }
+    }
+
+    &--header-search:hover & {
+        &__inner {
+            background: var(--ons-color-night-blue) !important;
+        }
+    }
+
+    &--header-search:focus & {
+        &__inner {
+            box-shadow:
+                0 0 0 1px var(--ons-color-black),
+                0 0 0 4px var(--ons-color-focus) !important;
+            outline: 3px solid rgb(0 0 0 / 0%);
+            outline-offset: 1px;
+            z-index: 4;
+            border: 2px solid var(--ons-color-black);
+        }
+    }
+
     &__inner {
         background: var(--ons-color-button);
         border-radius: $input-radius;
@@ -556,7 +601,7 @@ $button-shadow-size: 3px;
     &--menu {
         align-items: center;
         display: flex;
-        padding: 1.5rem;
+        padding: 1rem;
         border-bottom: 4px solid rgb(0 0 0 / 0%);
         .ons-icon {
             transform: rotate(90deg);
@@ -575,11 +620,14 @@ $button-shadow-size: 3px;
                 margin-top: 0;
                 width: 1rem;
             }
+            .ons-btn__text {
+                height: 24px;
+            }
         }
     }
 
     &--menu:focus {
-        background-color: var(--ons-color-focus);
+        background-color: var(--ons-color-focus) !important;
         border-color: var(--ons-color-black);
     }
 
@@ -629,6 +677,113 @@ $button-shadow-size: 3px;
             }
         }
     }
+
+    &--search-icon,
+    &--close {
+        border-bottom: 4px solid transparent;
+        align-items: center;
+        display: flex;
+        padding: 1rem;
+    }
+
+    &--search-icon &,
+    &--close & {
+        &__inner {
+            background: rgb(0 0 0 / 0%);
+            box-shadow: none;
+            padding: 0;
+            .ons-icon {
+                @extend .ons-u-m-no;
+
+                fill: var(--ons-color-text-link);
+                height: 1.5rem;
+                width: 1.5rem;
+            }
+        }
+    }
+
+    &--search-icon:hover {
+        border-bottom: 4px solid rgb(0 0 0 / 0%);
+        border-color: var(--ons-color-text-link-hover);
+    }
+
+    &--search-icon:focus:hover:not(:active, .active) {
+        .ons-btn__inner {
+            background: none;
+            box-shadow: none;
+        }
+    }
+
+    &--close:focus:hover:not(:active, .active) {
+        .ons-btn__inner {
+            background: none;
+            box-shadow: none;
+        }
+    }
+
+    &--close:active,
+    &--close[aria-expanded='true'] {
+        @extend .ons-u-ml-no;
+
+        border-color: var(--ons-color-text-link-hover);
+        background-color: var(--ons-color-branded-tint);
+    }
+
+    &--search-icon:hover &,
+    &--search-icon:active &,
+    &--search-icon:active:focus &,
+    &--search-icon.active &,
+    &--search-icon.active:focus & {
+        &__inner {
+            background: none;
+            box-shadow: none;
+            color: var(--ons-color-text-link-hover);
+            .ons-icon {
+                fill: var(--ons-color-text-link-hover);
+            }
+        }
+    }
+
+    &--search-icon:focus {
+        background-color: var(--ons-color-focus);
+        border-color: var(--ons-color-text-link-focus);
+    }
+
+    &--search-icon:focus &,
+    &--close:focus & {
+        &__inner {
+            background: none;
+            box-shadow: none;
+            .ons-icon {
+                fill: var(--ons-color-text-link-focus);
+            }
+        }
+    }
+
+    &--close:focus {
+        background: var(--ons-color-focus);
+        border-color: var(--ons-color-black);
+    }
+
+    &--search-icon:active {
+        background-color: var(--ons-color-branded-tint);
+        border-color: var(--ons-color-text-link-hover);
+    }
+
+    &--close:hover &,
+    &--close:active &,
+    &--close.active &,
+    &--close.active:focus &,
+    &--close:active:focus & {
+        &__inner {
+            background: none !important;
+            box-shadow: none;
+            color: var(--ons-color-text-link-hover);
+            .ons-icon {
+                fill: var(--ons-color-text-link-hover);
+            }
+        }
+    }
 }
 
 .ons-search__btn {

src/components/button/_macro.njk

@@ -61,6 +61,10 @@
             {% set iconType = "loader" %}
             {% set iconPosition = "after" %}
             {% set variantClasses = " ons-btn--loader ons-js-loader ons-js-submit-btn" %}
+        {% elif 'search' in params.variants %}
+            {% set iconType = "search" %}
+        {% elif 'close' in params.variants %}
+            {% set iconType = "close" %}
         {% endif %}
     {% endif %}
     {% set tag = "a" if params.url else "button" %}

src/components/header/_header.scss

@@ -168,13 +168,13 @@
     }
 
     &__org-logo--large {
-        @include mq('2xs', 454px) {
+        @include mq('2xs', 460px) {
             display: none;
         }
     }
 
     &__org-logo--small {
-        @include mq(455px) {
+        @include mq(461px) {
             display: none;
         }
     }
@@ -278,6 +278,22 @@
         }
     }
 
+    &-nav-search {
+        background-color: var(--ons-color-branded-tint);
+        margin-bottom: 1rem;
+        @extend .ons-u-pt-2xl;
+        @extend .ons-u-pb-2xl;
+
+        width: 100%;
+        &__input {
+            border-bottom: 1px solid var(--ons-color-ocean-blue);
+            @extend .ons-u-mb-2xl;
+            @extend .ons-u-pb-2xl;
+
+            row-gap: 1rem;
+        }
+    }
+
     .ons-btn {
         top: 0 !important;
     }