hy-hero.tsx

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

@Component({
  tag: 'hy-hero',
  styleUrl: 'hy-hero.scss',
  shadow: false,
})
export class HyHero {
  @Element() el: HTMLElement;
  @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;
  @Prop() image: string;
  @Prop() heading: string;
  @Prop() description: string;
  @Prop() url: string;
  @Prop() urlTitle: string;
  @Prop() scLabel?: string;
  @Prop() isExternal: boolean = false;
  @Prop() headerstyle: string = 'common';

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

    this.setContentDivPosition();
  }

  setContentDivPosition() {
    const contentDiv = document.querySelectorAll('.hy-hero__content--container')[0] as HTMLElement;
    if (!contentDiv) return;

    if (document.body.scrollWidth <= 1200) {
      contentDiv.style.left = '0';
    }
    if (document.body.scrollWidth >= 1201) {
      const contentWrapper = document.querySelectorAll('div.hy-main-content-wrapper')[0] as HTMLElement;
      if (!contentWrapper) return;

      if (document.body.scrollWidth >= 1441) {
        const marginLeft = parseInt(window.getComputedStyle(contentWrapper).getPropertyValue('margin-left'));
        if (marginLeft > 32) {
          contentDiv.style.left = `${marginLeft}px`;
        } else if (marginLeft > 0) {
          contentDiv.style.left = '32px';
        } else if (marginLeft == 0) {
          contentDiv.style.left = '0px';
        }
      } else {
        contentDiv.style.left = window.getComputedStyle(contentWrapper).getPropertyValue('padding-left');
      }
    }
  }

  @Listen('resize', {target: 'window'})
  resizeEventListener(event) {
    if (!event) return;

    this.setContentDivPosition();
  }

  render() {
    const classAttributes = ['hy-hero', `hy-hero__${this.headerstyle}`, `hy-hero--${this.colorVariant}`].join(' ');
    const classDescription = ['hy-hero__description', `hy-hero__description__${this.headerstyle}`].join(' ');
    const classContentContainer = [
      'hy-hero__content--container',
      `hy-hero__content--container__${this.headerstyle}`,
    ].join(' ');

    const aspectRatioWidth = 8;
    const aspectRatioHeight = 5;
    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
    const aspectRatio = {
      '--aspectRatio': `${aspect}%` as 'aspectRatio',
    };

    var variant = CtaLinkButtonVariants.onBlueBkgd;

    if (this.colorVariant == HeroColorVariant.black) {
      variant = CtaLinkButtonVariants.onBlackBkgd;
    } else if (this.colorVariant == HeroColorVariant.white) {
      variant = CtaLinkButtonVariants.onTransparentBkgd;
    }

    return (
      <Host>
        <div class={classAttributes}>
          <div>
            <div class="hy-hero__desktop-container">
              <div class="hy-hero__image-container" style={aspectRatio}>
                <img alt={this.scLabel} class="hy-image__image" src={this.image} />
              </div>
              <div class="hy-hero__content"></div>
              <div class="hy-hero__content-wrap-helper">
                <div class={classContentContainer}>
                  <div class="hy-hero__title__container">
                    <hy-heading
                      class="hy-hero__title"
                      heading={HeadingVarians.default}
                      section={HeadingSectionVariants.introduction}
                    >
                      {this.heading}
                    </hy-heading>
                    <div class="hy-hero__title__overlay--container">
                      <hy-heading
                        class="hy-hero__title__overlay"
                        heading={HeadingVarians.default}
                        section={HeadingSectionVariants.introduction}
                      >
                        {this.heading}
                      </hy-heading>
                    </div>
                  </div>
                  <div class="hy-hero__content--bottom">
                    {this.description && (
                      <div class="hy-hero__description__container">
                        <div class={classDescription}>{this.description}</div>
                      </div>
                    )}
                    {this.url && (
                      <div class="hy-hero__cta-link__container">
                        <hy-cta-button
                          link-content={this.urlTitle}
                          sc-label={this.scLabel}
                          url={this.url}
                          is-external={this.isExternal}
                          variant={variant}
                        />
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <hy-box mb="2, 2, 2.5, 3.5" />
      </Host>
    );
  }
}