site-search.tsx

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

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

  @Watch('labels') labelsWatcher(data: ComponentLabels[] | string) {
    this._labels = typeof data === 'string' ? JSON.parse(data) : data;
  }

  componentWillRender() {
    this.labelsWatcher(this.labels);
  }

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