hy-footer-base.tsx

export interface FooterBaseLinks {
  label: string;
  url: string;
  isActive?: boolean;
  mainlink?: boolean;
  items: Array<FooterBaseLinks>;
}

export interface FooterBaseSome {
  label: string;
  url: string;
  type: string;
}

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

@Component({
  tag: 'hy-footer-base',
  styleUrl: 'hy-footer-base.scss',
  shadow: false,
})
export class HyFooterBase implements ComponentInterface {
  /**
   * Link item color
   */
  @Prop() color: FooterLinkItemColor = FooterLinkItemColor.white;
  /**
   * Logo url
   */
  @Prop() logoUrl?: string;
  /**
   * Logo label
   */
  @Prop() logoLabel?: string;
  /**
   * Logo size
   */
  @Prop() size: SiteLogoSize = SiteLogoSize.big;
  /**
   * Label for some links
   */
  @Prop() someLabel?: string;
  /**
   * Copyright text
   */
  @Prop() copyrightText: string;

  private _dataFooterBaseLinks: FooterBaseLinks[];
  private _dataFooterBaseSome: FooterBaseSome[];
  /**
   * Footer links to be displayed
   */
  @Prop() dataFooterBaseLinks: FooterBaseLinks[] | string;
  /**
   * Footer some links
   */
  @Prop() dataFooterBaseSome: FooterBaseSome[] | string;

  @Watch('dataFooterBaseLinks') dataFooterBaseLinksWatcher(data: FooterBaseLinks[] | string) {
    this._dataFooterBaseLinks = typeof data === 'string' ? JSON.parse(data) : data;
  }

  @Watch('dataFooterBaseSome') dataFooterBaseSomeWatcher(data: FooterBaseSome[] | string) {
    this._dataFooterBaseSome = typeof data === 'string' ? JSON.parse(data) : data;
  }
  componentWillLoad() {
    this.dataFooterBaseLinksWatcher(this.dataFooterBaseLinks);
    this.dataFooterBaseSomeWatcher(this.dataFooterBaseSome);
  }

  render() {
    const logoColor = ColorVariant.white;
    const classAttributes = ['hy-footer-base--content-container'].join(' ');
    const links = this._dataFooterBaseLinks as Array<FooterBaseLinks>;
    const some = this._dataFooterBaseSome as Array<FooterBaseSome>;

    return (
      <Host class={classAttributes}>
        <div class="hy-footer-base">
          <div class="hy-footer-base__left">
            <div class="hy-footer-base__logo">
              <hy-site-logo
                type={FooterVariant.footer}
                size={56}
                color={logoColor}
                url={this.logoUrl}
                label={this.logoLabel}
              />
            </div>
            <div class="hy-footer-base__content">
              <slot name="content"></slot>
            </div>
            <div class="hy-footer-base__some">
              <span class="hy-footer-base__some__label">{this.someLabel}</span>
              <div class="hy-footer-base__some__items">
                {some &&
                  some.map((s) => {
                    return (
                      <a
                        aria-label={s.label}
                        href={s.url}
                        class={`hy-footer-base__some__item`}
                        title={s.label}
                        target="_blank"
                      >
                        <hy-icon icon={`hy-icon-some-${s.type}`} size={36} />
                      </a>
                    );
                  })}
              </div>
            </div>
          </div>
          <div class="hy-footer-base__right">
            {links &&
              links.map((link) => {
                return (
                  <hy-footer-link-item
                    label={link.label}
                    url={link.url}
                    color={FooterLinkItemColor.white}
                  ></hy-footer-link-item>
                );
              })}
            {this.copyrightText && <span class="hy-footer-base__copy">{this.copyrightText}</span>}
          </div>
        </div>
      </Host>
    );
  }
}