cta-liftup-image-text.tsx

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

@Component({
  tag: 'hy-cta-liftup-image-text',
  styleUrl: 'cta-liftup-image-text.scss',
  shadow: true
})
export class CtaLiftupImageText 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-cta-liftup-image-text'].join(' ');
    const contentClassAttributes = [
      'hy-cta-liftup-image-text__text-container',
      'hy-cta-liftup-image-text__text-container--left'
    ].join(' ');

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

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

    return (
      <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-cta-liftup-image-text__text-container__info-wrapper">
            <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>
          </div>
          <div class="hy-cta-liftup-image-text__text-container__links-wrapper">
            {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}
                  variant={linkVariant}
                />
              </div>
            )}
            {this.mainUrl2 && (
              <div class="hy-cta-liftup-image-text__text-container__link">
                <hy-cta-link-button
                  link-content={this.mainUrlTitle2}
                  sc-label={this.mainUrlAriaLabel2}
                  url={this.mainUrl2}
                  is-external={this.mainUrlIsExternal2}
                  variant={linkVariant}
                />
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }
}