hy-shortcuts.tsx

export interface ShortcutLinkValue {
  heading: string;
  url: string;
  isExternal: boolean;
  ariaLabel: string;
}

import {Component, ComponentInterface, h, Host, Prop, Watch} from '@stencil/core';
import {HeadingVarians} from '../../utils/utils';

@Component({
  tag: 'hy-shortcuts',
  styleUrl: 'hy-shortcuts.scss',
  shadow: false,
})
export class HyShortcuts implements ComponentInterface {
  private _dataItems: ShortcutLinkValue[];
  @Prop() dataItems: ShortcutLinkValue[] | string;
  @Prop() listHeading: string = '';

  @Watch('dataItems')
  arrayDataWatcher(newValue: ShortcutLinkValue[] | string) {
    if (typeof newValue === 'string') {
      this._dataItems = JSON.parse(newValue);
    } else {
      this._dataItems = newValue;
    }
  }
  componentWillLoad() {
    this.arrayDataWatcher(this.dataItems);
  }

  render() {
    const classAttributes = ['hy-shortcuts'].join(' ');
    const textClassAttributes = ['text'].join(' ');
    const iconClassAttributes = ['link-icon'].join(' ');

    let classItem = ['shortcut-link-wrapper', this._dataItems.length % 4 == 0 ? 'box-4' : 'box-3'].join(' ');

    return (
      <Host>
        <div class={classAttributes}>
          {this.listHeading.length > 0 && (
            <hy-heading class="list-title" heading={HeadingVarians.h2}>
              {this.listHeading}
            </hy-heading>
          )}
          <div class="shortcut-link-container">
            {this._dataItems.map((x, index) => {
              let isFirstLine = '';
              if (this._dataItems.length % 4 == 0) {
                isFirstLine = index == 0 || index == 1 ? 'first' : '';
              } else {
                isFirstLine = index == 0 ? 'first' : '';
              }
              let classLinkWrapper = classItem.concat(' ', isFirstLine);
              let target = x.isExternal ? '_blank' : '_self';

              return (
                <div class={classLinkWrapper}>
                  <a aria-label={x.ariaLabel} class="shortcut-link" href={x.url} target={target}>
                    <span class={textClassAttributes}>{x.heading}</span>
                    <span class={iconClassAttributes}>
                      <hy-icon icon={'hy-icon-arrow-right'} size={28} />
                    </span>
                  </a>
                </div>
              );
            })}
          </div>
        </div>
        <hy-box pb="6, 6, 7.5" />
      </Host>
    );
  }
}