hy-general-list-item.tsx

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

@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 = '';

  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 = 6;
    const aspectRatioHeight = 4;
    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-image__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>,
    ];
  }
}