Search Box

<div class="search-box js-search-box">
    <form action="/">
        <label class="input__label flex flex--v-center" for="search-box">
            <input type="text" id="search-box" class="input input--text font-HNL3-s font-HNL2-m js-input"
            name="query" placeholder="Search for artworks, photos and more" autofocus=""
            /><span class="input__label-wrap line-height-1 margin-left-s2 input__label-wrap--hidden">search</span>
        </label>
        <div class="search-box__button-wrap absolute bg-green">
            <button class="search-box__button line-height-1 plain-button no-padding font-HNL3-s font-HNL2-m"><span class="visually-hidden">Search</span><span class="flex flex--v-center flex--h-center"><div class="icon icon--white" aria-hidden="true"><canvas class="icon__canvas" height="26" width="26"></canvas><svg class="icon__svg" role="img" aria-labelledby="icon-search-title"><title id="icon-search-title">Search</title><svg viewBox="0 0 26 26"><path class="icon__shape" d="M22.6 21.59l-6.25-6.25a7.53 7.53 0 1 0-1.41 1.41L21.19 23a1 1 0 0 0 1.41-1.41zM4.9 10.8a5.5 5.5 0 1 1 5.5 5.5 5.51 5.51 0 0 1-5.5-5.5z"></path></svg></svg></div></span>
            </button>
        </div>
    </form>
    <button class="search-box__clear absolute line-height-1 plain-button v-center no-padding js-clear" data-track-event="{&quot;category&quot;:&quot;component&quot;,&quot;action&quot;:&quot;clear-search:click&quot;,&quot;label&quot;:&quot;input-id:search-box&quot;}"
        type="button">
        <div class="icon " aria-hidden="true">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" role="img" aria-labelledby="icon-clear-title">
                <title id="icon-clear-title">Clear</title>
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M20.07 5.93a9.85 9.85 0 0 0-7-2.89 10 10 0 0 0-7.15 17 9.85 9.85 0 0 0 7 2.89 10 10 0 0 0 7.15-17zM18.6 18.6a8 8 0 0 1-5.68 2.4 7.84 7.84 0 0 1-5.58-2.31A8 8 0 0 1 13.08 5a7.84 7.84 0 0 1 5.58 2.31 8 8 0 0 1-.06 11.29z"></path>
                    <path class="icon__shape" d="M16.48 9.41a1 1 0 0 0-1.41 0l-2.12 2.12-2.13-2.12a1 1 0 0 0-1.41 1.41l2.12 2.12-2.12 2.13a1 1 0 1 0 1.41 1.41l2.12-2.12 2.12 2.12a1 1 0 1 0 1.41-1.41l-2.12-2.12 2.12-2.12a1 1 0 0 0 .01-1.42z"></path>
                </svg>
            </svg>
        </div>
    </button>
</div>
// @flow

import HTMLInput from '../HTMLInput/HTMLInput';
import Icon from '../Icon/Icon';
import {font} from '../../../utils/classnames';
import type {EventWithInputValue} from '../HTMLInput/HTMLInput';

type Props = {|
  action: string,
  id: string,
  name: string,
  query: string,
  autofocus: boolean,
  onSubmit?: (EventWithInputValue) => void,
  onChange?: (EventWithInputValue) => void
|}

const SearchBox = ({action, id, name, query, autofocus, onChange, onSubmit}: Props) => (
  <div className='search-box js-search-box'>
    <form action={action} onSubmit={onSubmit}>
      <HTMLInput
        id={id}
        type='text'
        name={name}
        label='search'
        defaultValue={query}
        placeholder='Search for artworks, photos and more'
        autofocus={autofocus}
        isLabelHidden={true}
        onChange={onChange} />
      <div className='search-box__button-wrap absolute bg-green'>
        <button className={`search-box__button line-height-1 plain-button no-padding ${font({s: 'HNL3', m: 'HNL2'})}`}>
          <span className='visually-hidden'>Search</span>
          <span className='flex flex--v-center flex--h-center'>
            <Icon name='search' title='Search' extraClasses='icon--white' />
          </span>
        </button>
      </div>
    </form>
    <button className='search-box__clear absolute line-height-1 plain-button v-center no-padding js-clear'
      data-track-event={`${JSON.stringify({
        category: 'component',
        action: 'clear-search:click',
        label: `input-id:${id}`
      })}`}
      type='button'>
      <Icon name='clear' title='Clear' />
    </button>
  </div>
);

export default SearchBox;
{
  "action": "/",
  "query": null,
  "name": "query",
  "id": "search-box",
  "autofocus": true
}

There are no notes for this item.