hy-general-list-item.tsx

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

let keys = {
  enter: 'Enter',
};

@Component({
  tag: 'hy-general-list-item',
  styleUrl: 'hy-general-list-item.scss',
  shadow: true,
})
export class HyGeneralListItem {
  @Prop() itemTitle?: string;
  @Prop() description?: string;
  @Prop() label?: string;
  @Prop() url?: string;
  @Prop() type?: string;
  @Prop() imageUrl: string = null;
  @Prop() imageAlt: string = '';

  @Element() el: HTMLElement;

  @Listen('keydown')
  handleKeyDown(event) {
    const key = (event as KeyboardEvent).code;
    if (key == keys.enter) {
      let card = this.el;
      window.open(card.dataset.location, '_blank');
    }
  }

  render() {
    const classAttributes = ['hy-general-list-item'].join(' ');

    const contentClassAttributes = ['hy-general-list-item__text-container'].join(' ');

    const imageClassAttributes = ['hy-general-list-item__image-container'].join(' ');

    //const target = '_blank';
    //const ariaLabel = 'Link points outside the current website.';
    const aspectRatioWidth = 16;
    const aspectRatioHeight = 10;
    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
    const aspectRatio = {
      '--aspectRatio': `${aspect}%` as 'aspectRatio',
    };

    return [
      <div class={classAttributes} tabindex="0">
        <div class={imageClassAttributes} style={aspectRatio}>
          <img alt={this.imageAlt} class="hy-general-list-item--image" src={this.imageUrl} />
          <div class="hy-general-list-item--label">{this.label}</div>
        </div>
        <div class={contentClassAttributes}>
          <div class="hy-general-list-item--title">{this.itemTitle}</div>
          <div class="hy-general-list-item--description">{this.description}</div>
        </div>
      </div>,
    ];
  }
}