cta-liftup-image-text.tsx

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

@Component({
  tag: 'hy-cta-liftup-image-text',
  styleUrl: 'cta-liftup-image-text.scss',
  shadow: true
})
export class CtaLiftupImageText implements ComponentInterface {
  @Prop() imageRight: boolean = false;
  @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() standaloneUrl?: string;
  @Prop() standaloneUrlTitle?: string;
  @Prop() standaloneUrlAriaLabel?: string;
  @Prop() standaloneUrlIsExternal: boolean = false;
  @Prop() standaloneUrl2?: string;
  @Prop() standaloneUrlTitle2?: string;
  @Prop() standaloneUrlAriaLabel2?: string;
  @Prop() standaloneUrlIsExternal2: boolean = false;

  render() {
    const classAttributes = [
      'hy-cta-liftup-image-text',
      this.imageRight ? 'hy-cta-liftup-image-text--right-image' : null
    ].join(' ');
    const contentClassAttributes = [
      'hy-cta-liftup-image-text__text-container',
      this.imageRight
        ? 'hy-cta-liftup-image-text__text-container--left'
        : 'hy-cta-liftup-image-text__text-container--right'
    ].join(' ');
    const imageRightClassAttributes = [
      'hy-cta-liftup-image-text__image-container',
      'hy-cta-liftup-image-text__image-container--right'
    ].join(' ');
    const imageLeftClassAttributes = ['hy-cta-liftup-image-text__image-container'].join(' ');

    const imageLeft = !this.imageRight;
    const aspectRatioWidth = 4;
    const aspectRatioHeight = 3;

    return (
      <div class={classAttributes}>
        {imageLeft && (
          <div class={imageLeftClassAttributes}>
            <hy-image
              image-url={this.imageUrl}
              image-alt={this.imageAlt}
              aspect-ratio-width={aspectRatioWidth}
              aspect-ratio-height={aspectRatioHeight}
              caption=""
            ></hy-image>
          </div>
        )}
        <div class={contentClassAttributes}>
          <div class="hy-cta-liftup-image-text__text-container__title">{this.textTitle}</div>
          <div class="hy-cta-liftup-image-text__text-container__description">{this.textDescription}</div>
          {this.mainUrl && (
            <div class="hy-cta-liftup-image-text__text-container__link">
              <hy-cta-link-button
                link-content={this.mainUrlTitle}
                sc-label={this.mainUrlAriaLabel}
                url={this.mainUrl}
                is-external={this.mainUrlIsExternal}
              />
            </div>
          )}
          {this.standaloneUrl && (
            <div class="hy-cta-liftup-image-text__text-container__standalonelink">
              <hy-standalone-link
                link-content={this.standaloneUrlTitle}
                sc-label={this.standaloneUrlAriaLabel}
                url={this.standaloneUrl}
                is-external={this.standaloneUrlIsExternal}
              />
            </div>
          )}
          {this.standaloneUrl2 && (
            <div class="hy-cta-liftup-image-text__text-container__standalonelink">
              <hy-standalone-link
                link-content={this.standaloneUrlTitle2}
                sc-label={this.standaloneUrlAriaLabel2}
                url={this.standaloneUrl2}
                is-external={this.standaloneUrlIsExternal2}
              />
            </div>
          )}
        </div>
        {this.imageRight && (
          <div class={imageRightClassAttributes}>
            <hy-image
              image-url={this.imageUrl}
              image-alt={this.imageAlt}
              aspect-ratio-width={aspectRatioWidth}
              aspect-ratio-height={aspectRatioHeight}
              caption=""
            ></hy-image>
          </div>
        )}
      </div>
    );
  }
}