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', `hy-hero__content--${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 || this.colorVariant == HeroColorVariant.fp_white) {
      variant = CtaLinkButtonVariants.onWhiteBkgd;
    }

    return (
      <Host>
        <div class={classAttributes}>
          <div class="hy-hero__container">
            <figure class="hy-hero__image-container" style={aspectRatio}>
              <img alt={this.scLabel} class="hy-image__image" src={this.image} />
            </figure>
            <div class="hy-hero__spacer-box"></div>
            <div class="hy-hero__content-container">
              <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>
                  <hy-heading
                    class="hy-hero__title hy-hero__title--overlay"
                    heading={HeadingVarians.default}
                    section={HeadingSectionVariants.introduction}
                  >
                    {this.heading}
                  </hy-heading>
                </div>
                {this.description && <p class={classDescription}>{this.description}</p>}
                {this.url && (
                  <div class="hy-hero__actions">
                    <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>
        <hy-box mb="2, 2, 2.5, 3.5" />
      </Host>
    );
  }
}