hy-introduction.tsx

import {Component, Element, Host, h, Prop} from '@stencil/core';
import {IntroductionBgColors, HeadingVarians, HeadingSectionVariants} from '../../utils/utils';

@Component({
  tag: 'hy-introduction',
  styleUrl: 'hy-introduction.scss',
  shadow: false,
})
export class HyIntroduction {
  @Prop() variant: IntroductionBgColors = null;
  @Prop() reversed: boolean = false;
  @Prop() textTitle?: string;
  @Prop() textDescription: string = null;
  @Prop() url?: string;
  @Prop() scLabel?: string;
  @Prop() urlTitle?: string;
  @Prop() imageUrl?: string;
  @Prop() isExternal: boolean = false;
  @Prop() headerstyle: string = 'common';
  @Element() el: HTMLElement;

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

  render() {
    const classAttributes = [
      'hy-introduction',
      `hy-introduction__${this.headerstyle}`,
      this.headerstyle,
      this.reversed && this.variant == null ? 'hy-introduction--reversed' : '',
      this.variant
        ? `hy-introduction--with-bg hy-introduction--with-bg__${this.variant}`
        : 'hy-introduction--without-bg',
    ].join(' ');

    const classTitle = ['hy-introduction__title', `hy-introduction__title__${this.headerstyle}`].join(' ');
    const classDescription = ['hy-introduction__description', `hy-introduction__description__${this.headerstyle}`].join(
      ' '
    );

    const contentWrapperClasses = [
      'hy-introduction__content',
      this.reversed && this.variant == null ? 'hy-introduction__content--reversed' : '',
      this.imageUrl ? 'hy-introduction__content--with-image' : 'hy-introduction__content--without-image',
    ].join(' ');

    const target = this.isExternal ? '_blank' : '_self';

    return (
      <Host>
        <hy-box pt="1.25, 1.25, 1.5, 2.5" />
        <div class={classAttributes}>
          <hy-main-content-wrapper>
            <div class="hy-introduction__outer-content">
              <div class={contentWrapperClasses}>
                <hy-heading
                  class={classTitle}
                  heading={HeadingVarians.h2}
                  section={HeadingSectionVariants.introduction}
                >
                  {this.textTitle}
                </hy-heading>
                <p class={classDescription}>{this.textDescription}</p>
                {this.url && (
                  <div class="hy-introduction__link__container">
                    <a class="hy-introduction__link" href={this.url} aria-label={this.scLabel} target={target}>
                      {this.urlTitle}
                      <span class="hy-introduction__link__icon">
                        <hy-icon icon={'hy-icon-arrow-right'} size={24} />
                      </span>
                    </a>
                  </div>
                )}
              </div>
              {this.imageUrl && (
                <div class="hy-introduction__image">
                  <hy-image image-url={this.imageUrl} aspectRatioWidth={7} aspectRatioHeight={5} />
                </div>
              )}
            </div>
          </hy-main-content-wrapper>
        </div>
        <hy-box mb="1.75, 1.75, 2, 2.5" />
      </Host>
    );
  }
}