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;

  render() {
    const classAttributes = ["hy-cta-liftup-image-text"].join(" ");
    const contentClassAttributes = ["hy-cta-liftup-image-text__text-container"].join(" ");

    const imageLeft = !this.imageRight;

    return (
      <div class={classAttributes}>
        { imageLeft &&
          <div class="hy-cta-liftup-image-text__image-container">
            <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>
          <hy-cta-link-button link-content={this.mainUrlTitle}
                              aria-label={this.mainUrlAriaLabel}
                              url={this.mainUrl}
                              is-external={this.mainUrlIsExternal}
          />
          {this.standaloneUrl &&
            <hy-standalone-link
                link-content={this.standaloneUrlTitle}
                aria-label={this.standaloneUrlAriaLabel}
                url={this.standaloneUrl}
                is-external={this.standaloneUrlIsExternal}
            />
          }
        </div>
        { this.imageRight &&
          <div class="hy-cta-liftup-image-text__image-container">
            <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
          </div>
        }
      </div>
    );
  }

}