link-box.tsx

import {Component, ComponentInterface, Element, 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;
  @Prop() scLabel?: string;
  @Prop() headerstyle: string = 'common';
  @Element() el: HTMLElement;

  componentDidLoad() {
    let hyMainDiv = this.el.closest('.hy-main');
    if (hyMainDiv) {
      if (!hyMainDiv.classList.contains('with-sidebar')) {
        this.headerstyle = 'large';
      }
    }
  }

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

    const classLinkAttributes = ['hy-link-box__link', this.headerstyle].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 = 16;
    const aspectRatioHeight = 10;
    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
    const aspectRatio = {
      '--aspectRatio': `${aspect}%` as 'aspectRatio',
    };

    return [
      <article>
        <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>
          {this.imageUrl && (
            <div class="hy-link-box__image-container" style={aspectRatio}>
              <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={classLinkAttributes} aria-hidden="true">
        <hy-icon icon={'hy-icon-arrow-right'} size={48} />
      </div>,
    ];
  }
}