site-search.tsx

import {Component, Prop, h} from '@stencil/core';
import {ComponentLabels} from '../site-header';

@Component({
  tag: 'hy-site-search',
  styleUrl: 'site-search.scss',
  shadow: true
})
export class SiteSearch {
  @Prop() isAlternative: boolean = false;
  @Prop() showLabel: boolean = false;
  @Prop() labels: ComponentLabels[];
  @Prop() size: number;
  @Prop() color: string;

  render() {
    return (
      <button
        aria-label={this.labels['open']}
        class={{
          'button--search': true,
          'is-open--menu': this.isAlternative
        }}
      >
        <hy-icon icon={'hy-icon-search'} size={this.size} fill={this.color} />
        {this.showLabel ? <span class={'button--search__label'}>{this.labels['label']}</span> : ''}
      </button>
    );
  }
}