hy-hero.tsx

import {Component, Host, h, Prop, Element} from '@stencil/core';
import {HeroColorVariant} from '../../utils/utils';
import {HeadingVarians, HeadingSectionVariants} 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;

  render() {
    const classAttributes = ['hy-hero', `hy-hero--${this.colorVariant}`].join(' ');

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

    return (
      <Host>
        <div class={classAttributes}>
          <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">
            <hy-main-content-wrapper>
              <div class="hy-hero__content--container">
                <hy-heading
                  class="hy-hero__title"
                  heading={HeadingVarians.default}
                  section={HeadingSectionVariants.introduction}
                >
                  {this.heading}
                </hy-heading>
                <div class="hy-hero__content--bottom">
                  {this.description && <div class="hy-hero__description">{this.description}</div>}
                  {this.url && (
                    <div class="hy-hero__cta-link__container">
                      <a href={this.url} class="hy-hero__cta-link" aria-label={this.scLabel}>
                        {this.urlTitle}
                        <span class="hy-hero__cta-link__icon">
                          <hy-icon icon={'hy-icon-arrow-right'} size={26} />
                        </span>
                      </a>
                    </div>
                  )}
                </div>
              </div>
            </hy-main-content-wrapper>
          </div>
        </div>
      </Host>
    );
  }
}

/*
<h1 class="hy-hero__title">{this.heading}</h1>
*/