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() 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];
    if (contentDiv) {
      if (document.body.scrollWidth <= 480) {
        // mobile
        (contentDiv as HTMLElement).style.left = '0px';
        return;
      } else if (document.body.scrollWidth <= 960) {
        //tablet
        (contentDiv as HTMLElement).style.left = '0px';
        return;
      } else if (document.body.scrollWidth <= 1200) {
        //small desktop
        (contentDiv as HTMLElement).style.left = '0px';
        return;
      } else if (document.body.scrollWidth >= 1201) {
        const contentWrapper = document.querySelectorAll('div.hy-main-content-wrapper')[0];
        if (contentWrapper) {
          if (document.body.scrollWidth >= 1441) {
            var ml = window.getComputedStyle(contentWrapper).getPropertyValue('margin-left');

            if (ml !== '0px') {
              (contentDiv as HTMLElement).style.left = ml;
              return;
            } else {
              (contentDiv as HTMLElement).style.left = '32px';
              const hyHero = document.querySelectorAll('.hy-hero')[0];
              if (hyHero) {
                (hyHero as HTMLElement).style.marginLeft = '-32px';
                (hyHero as HTMLElement).style.marginRight = '-32px';
              }
              return;
            }
          } else {
            var pl = window.getComputedStyle(contentWrapper).getPropertyValue('padding-left');
            (contentDiv as HTMLElement).style.left = pl;
            return;
          }
        }
      }
    }
  }

  @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 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="hy-hero__content--container">
                  <div class="hy-hero__title__container">
                    <hy-heading
                      class="hy-hero__title"
                      heading={HeadingVarians.default}
                      section={HeadingSectionVariants.introduction}
                    >
                      {this.heading}
                    </hy-heading>
                  </div>
                  <div class="hy-hero__content--bottom">
                    {this.description && (
                      <div class="hy-hero__description__container">
                        <div class="hy-hero__description">{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="false"
                          variant={variant}
                        />
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Host>
    );
  }
}