adjacent-image-text.tsx

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

@Component({
  tag: 'hy-adjacent-image-text',
  styleUrl: 'adjacent-image-text.scss',
  shadow: false,
})
export class AdjacentImageText implements ComponentInterface {
  @Prop() imageUrl: string = null;
  @Prop() imageAlt: string = '';
  @Prop() textTitle?: string;
  @Prop() textDescription: string = null;

  @Prop() mainUrl?: string;
  @Prop() mainUrlTitle?: string;
  @Prop() mainUrlAriaLabel?: string;
  @Prop() mainUrlIsExternal: boolean = false;

  @Prop() mainUrl2?: string;
  @Prop() mainUrlTitle2?: string;
  @Prop() mainUrlAriaLabel2?: string;
  @Prop() mainUrlIsExternal2: boolean = false;

  render() {
    const classAttributes = ['hy-adjacent-image-text'].join(' ');
    const contentClassAttributes = [
      'hy-adjacent-image-text__text-container',
      'hy-adjacent-image-text__text-container--left',
    ].join(' ');

    const imageLeftClassAttributes = ['hy-adjacent-image-text__image-container'].join(' ');

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

    return (
      <Host>
        <div class={classAttributes}>
          <div class={imageLeftClassAttributes} style={aspectRatio}>
            <img alt={this.imageAlt} class="hy-image__image" src={this.imageUrl} />
          </div>
          <div class={contentClassAttributes}>
            <div class="hy-adjacent-image-text__text-container__info-wrapper">
              <div class="hy-adjacent-image-text__text-container__title">{this.textTitle}</div>
              <div class="hy-adjacent-image-text__text-container__description">{this.textDescription}</div>
            </div>
            <div class="hy-adjacent-image-text__text-container__links-wrapper">
              {this.mainUrl && (
                <div class="hy-adjacent-image-text__text-container__link">
                  <hy-cta-link
                    link-content={this.mainUrlTitle}
                    sc-label={this.mainUrlAriaLabel}
                    url={this.mainUrl}
                    is-external={this.mainUrlIsExternal}
                  />
                </div>
              )}
              {this.mainUrl2 && (
                <div class="hy-adjacent-image-text__text-container__link">
                  <hy-cta-link
                    link-content={this.mainUrlTitle2}
                    sc-label={this.mainUrlAriaLabel2}
                    url={this.mainUrl2}
                    is-external={this.mainUrlIsExternal2}
                  />
                </div>
              )}
            </div>
          </div>
        </div>
        <hy-box pb="4, 7, 8" />
      </Host>
    );
  }
}