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"].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",
          "hy-cta-liftup-image-text__image-container--left"].join(" ");

    const imageLeft = !this.imageRight;

    return (
      <div class={classAttributes}>
        { imageLeft &&
          <div class={imageLeftClassAttributes}>
            <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
          </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}
                                    aria-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}
                    aria-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}
                    aria-label={this.standaloneUrlAriaLabel2}
                    url={this.standaloneUrl2}
                    is-external={this.standaloneUrlIsExternal2}
                />
            </div>
          }
        </div>
        { this.imageRight &&
          <div class={imageRightClassAttributes}>
            <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
          </div>
        }
      </div>
    );
  }

}