link-box.tsx

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

@Component({
  tag: 'hy-link-box',
  styleUrl: 'link-box.scss',
  shadow: true
})
export class LinkBox implements ComponentInterface {
  @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;
  @Prop() imageUrl: string = null;
  @Prop() imageAlt: string = null;
  @Prop() textTitle?: string;
  @Prop() textDescription: string = null;
  @Prop() url?: string;
  @Prop() isExternal: boolean = false;

  render() {
    const classAttributes = ['hy-link-box', this.variant, this.imageUrl ? 'hy-link-box--with-image' : null].join(' ');

    const classTextContainer = ['hy-link-box__text-container', this.imageUrl ? 'hy-link-box--with-image' : null].join(
      ' '
    );
    const target = this.isExternal ? '_blank' : '_self';

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

    return [
      <article>
        <a class={classAttributes} href={this.url} target={target}>
          <div class="hy-link-box__image-container" style={aspectRatio}>
            {this.imageUrl && <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />}
          </div>
          <div class={classTextContainer}>
            <h3 class="hy-link-box__text-container__title">{this.textTitle}</h3>
            {this.textDescription && <div class="hy-link-box__text-container__description">{this.textDescription}</div>}
          </div>
        </a>
      </article>,
      <div class="hy-link-box__link">
        <hy-cta-link url={this.url} />
      </div>
    ];
  }
}