site-logo.tsx

import {Component, h, Host, Prop} from '@stencil/core';
import {ColorVariant, FooterVariant, SiteLogoSize} from '../../../utils/utils';

@Component({
  tag: 'hy-site-logo',
  styleUrl: 'site-logo.scss',
  shadow: false,
})
export class SiteLogo {
  @Prop() type: FooterVariant = FooterVariant.header;
  @Prop() color: ColorVariant = ColorVariant.black;
  @Prop() label?: string;
  @Prop() size: SiteLogoSize = SiteLogoSize.big;
  @Prop() url?: string;

  render() {
    const classAttributes = ['hy-site-logo', `hy-site-logo__${this.type}`].join(' ');
    return this.url ? (
      <Host class={classAttributes}>
        <a href={this.url}>
          <hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
          <span class={'hy-site-logo__label'} style={{color: this.color}}>
            {this.label}
          </span>
        </a>
      </Host>
    ) : this.label ? (
      <Host class={classAttributes}>
        <hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
        <span class={'hy-site-logo__label'} style={{color: this.color}}>
          {this.label}
        </span>
      </Host>
    ) : (
      ''
    );
  }
}