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() 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',
      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 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(' ');

    return (
      <Host>
        <div class={classAttributes}>
          <hy-main-content-wrapper>
            <div class="hy-introduction__outer-content">
              <div class={contentWrapperClasses}>
                <hy-heading
                  class="hy-introduction__title"
                  heading={HeadingVarians.h2}
                  section={HeadingSectionVariants.introduction}
                >
                  {this.textTitle}
                </hy-heading>
                <div class="hy-introduction__description">{this.textDescription}</div>
                {this.url && (
                  <div class="hy-introduction__link__container">
                    <a class="hy-introduction__link" href={this.url} aria-label={this.scLabel}>
                      {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 pb="3, 5, 6" />
      </Host>
    );
  }
}