<div class="search-standalone js-search-standalone u-page-width-max-gutters">
    <h3 class="search-standalone__title">Search</h3>
    <form class="search-standalone-form">

        <input class="search-standalone-form__input js-search-standalone-input" type="text" placeholder="Begin typing...">
        <button class="search-standalone-form__button js-search-standalone-button" type="reset">
      <span class="u-visually-hidden">Clear</span>
      <svg class="icon icon--search">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

      <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </button>
    </form>
</div>
<div class="search-standalone js-search-standalone u-page-width-max-gutters">
  {{#if title}}<h3 class="search-standalone__title">{{title}}</h3>{{/if}}
  <form class="search-standalone-form">
    {{#if label}}{{> @label value=label}}{{/if}}
    <input class="search-standalone-form__input js-search-standalone-input" type="text" placeholder="{{placeholder}}"{{#if value}} value="{{value}}"{{/if}}>
    <button class="search-standalone-form__button js-search-standalone-button" type="reset">
      <span class="u-visually-hidden">Clear</span>
      {{render '@icons--search'}}
      {{render '@icons--close-large'}}
    </button>
  </form>
</div>
{
  "title": "Search",
  "placeholder": "Begin typing...",
  "label": null
}
  • Content:
    (function (window) {
      'use strict';
    
      const searchStandalone = document.querySelector('.js-search-standalone');
      const searchInput = document.querySelector('.js-search-standalone-input');
      const searchButton = document.querySelector('.js-search-standalone-button');
      const activeSearchClass = 'js-search-standalone--active';
    
      function handlePageLoad(e) {
        if (searchInput.value) {
          searchStandalone.classList.add(activeSearchClass);
        }
      }
    
      function handleSearchInputChange(e) {
        if (e.target.value) {
          searchStandalone.classList.add(activeSearchClass);
        }
        else {
          searchStandalone.classList.remove(activeSearchClass);
        }
      }
    
      function handleSearchButton(e) {
        if (searchStandalone && searchButton) {
          const searchForm = searchStandalone.querySelector('form');
          const searchIcon = searchButton.querySelector('.icon--search');
          const closeIcon = searchButton.querySelector('.icon--close-large');
    
          // If the search icon is visible, we submit the form on click.
          if (!isHidden(searchIcon) && searchInput.value) {
            searchForm.submit();
            e.preventDefault();
          }
          // If the close icon is visible, we reset the field on click.
          else if (!isHidden(closeIcon)) {
            // The reset button doesn't trigger an `input` event.
            searchStandalone.classList.remove(activeSearchClass);
            searchInput.setAttribute('value', '');
            searchInput.focus();
          }
        }
      }
    
      if (searchStandalone && searchInput && searchButton) {
        window.addEventListener('load', handlePageLoad);
        searchInput.addEventListener('input', handleSearchInputChange);
        searchButton.addEventListener('click', handleSearchButton);
      }
    
    })(this);
    
  • URL: /components/raw/search-standalone/search-standalone.js
  • Filesystem Path: src/components/01-elements/forms/search-standalone/search-standalone.js
  • Size: 1.7 KB
  • Content:
    .search-standalone {
      margin: 0 $gutter-width-half 40px;
    }
    
    .search-standalone__title {
      margin-bottom: 10px;
      color: $color-darkest;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 2.0rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        color: $color-dark;
        font-size: 2.7rem;
        letter-spacing: 3px;
        line-height: 4.0rem;
        text-transform: none;
      }
    }
    
    .search-standalone-form {
      position: relative;
    
      @include breakpoint($breakpoint-xl) {
        width: calc(50% - 10px);
      }
    }
    
    .search-standalone-form__input {
      width: 100%;
      min-height: 40px;
      padding: 0 20px;
      border: 1px solid $color-medium-dark;
      border-radius: 0;
      font-size: 1.4rem;
      letter-spacing: 1px;
      line-height: 3.8rem;
      box-sizing: border-box;
    
      &:focus {
        border: 1px solid $color-primary;
        outline: none;
      }
    
      @include breakpoint($breakpoint-md) {
        min-height: 50px;
        line-height: 4.8rem;
      }
    }
    
    .search-standalone-form__button {
      @include reset-button;
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      width: 40px;
      height: 40px;
      padding-right: 10px;
      pointer-events: none;
    
      .icon {
        position: relative;
        top: 2px;
        width: 15px;
        height: 15px;
      }
    
      .icon--search {
        .js-search-standalone--active & {
          display: none;
        }
      }
    
      .icon--close-large {
        display: none;
    
        .js-search-standalone--active & {
          display: inline-block;
        }
      }
    
      .js-search-standalone--active & {
        pointer-events: auto;
      }
    
      @include breakpoint($breakpoint-md) {
        width: 50px;
        height: 50px;
    
        .icon--search {
          width: 20px;
          height: 20px;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .icon--search {
          .js-search-standalone--active & {
            display: inline-block;
            fill: $color-primary;
          }
        }
    
        .icon--close-large {
          .js-search-standalone--active & {
            display: none;
          }
        }
      }
    }
    
  • URL: /components/raw/search-standalone/search-standalone.scss
  • Filesystem Path: src/components/01-elements/forms/search-standalone/search-standalone.scss
  • Size: 2 KB

There are no notes for this item.