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() isGroup: boolean = false;
  @Prop() label?: string;
  @Prop() size: SiteLogoSize = SiteLogoSize.big;
  @Prop() url?: string;

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