hy-general-list-item.tsx

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

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

  @Element() el: HTMLElement;

  render() {
    const classAttributes = ['hy-general-list-item', `hy-general-list-item--style-${this.listStyle}`].join(' ');
    const contentClassAttributes = ['hy-general-list-item__text-container'].join(' ');
    const imageClassAttributes = ['hy-general-list-item__image-container'].join(' ');

    const sidebarClass = this.hasSidebar ? 'common' : 'large';
    const titleClassAttributes = ['hy-general-list-item__title', `hy-general-list-item__title__${sidebarClass}`].join(
      ' '
    );
    const descriptionClassAttributes = [
      'hy-general-list-item__description',
      `hy-general-list-item__description__${sidebarClass}`,
    ].join(' ');

    const aspectRatioWidth = 16;
    const aspectRatioHeight = 10;
    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
    const aspectRatio = {
      '--aspectRatio': `${aspect}%` as 'aspectRatio',
    };

    return (
      <article class={classAttributes}>
        <a class="hy-general-list-item__link" href={this.url} target={this.target ? '_blank' : '_self'}>
          {this.type && (
            <div class="hy-general-list-item__type">
              <span class="hy-general-list-item__type__major">{this.label}</span>
              <span class="hy-general-list-item__type__sub">{this.subLabel}</span>
            </div>
          )}
          <figure class={imageClassAttributes} style={aspectRatio}>
            <img
              loading={this.disableLazy ? 'eager' : 'lazy'}
              alt={this.imageAlt}
              class="hy-general-list-item__image"
              src={this.imageUrl}
            />
          </figure>
          <div class={contentClassAttributes}>
            {(this.tag || this.date) && (
              <span class="hy-genenral-list-item__meta">
                {this.tag}
                <span class="hy-genenral-list-item__meta__date">| {this.date}</span>
              </span>
            )}
            <h3 class={titleClassAttributes}>{this.itemTitle}</h3>
            <p class={descriptionClassAttributes}>{this.description}</p>
          </div>
        </a>
      </article>
    );
  }
}