site-search.tsx

import {Component, Prop, h} from '@stencil/core';

@Component({
  tag: 'hy-site-search',
  styleUrl: 'site-search.scss',
  shadow: true
})
export class SiteSearch {
  @Prop() menuIsOpen: boolean = false;
  @Prop() menuType?: string;
  @Prop() label: string;

  render() {
    let isMobile = this.menuType === 'mobile';
    const black = 'var(--brand-main-nearly-black)';
    const white = 'var(--grayscale-white)';

    return (
      <button
        aria-label={this.label}
        class={{
          'button--search': true,
          'is-open--menu': this.menuIsOpen
        }}
      >
        <hy-icon
          icon={'hy-icon-search'}
          size={isMobile ? 20 : 14}
          fill={isMobile ? (this.menuIsOpen ? black : white) : black}
        />
        {!isMobile ? <span class={'button--search__label'}>{this.label}</span> : ''}
      </button>
    );
  }
}