adjacent-image-text.tsx

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

@Component({
  tag: 'hy-adjacent-image-text',
  styleUrl: 'adjacent-image-text.scss',
  shadow: false,
})
export class AdjacentImageText implements ComponentInterface {
  @Element() el: HTMLElement;
  @Prop() headerstyle: string = 'default';
  @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;

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

  render() {
    const classAttributes = ['hy-adjacent-image-text', `hy-adjacent-image-text__${this.headerstyle}`].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 = 6;
    const aspectRatioHeight = 4;
    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>
              <p
                class={`hy-adjacent-image-text__text-container__description hy-adjacent-image-text__text-container__description__${this.headerstyle}`}
              >
                {this.textDescription}
              </p>
            </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 mb="1.75, 1.75, 2, 2.5" />
      </Host>
    );
  }
}