heading.tsx

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

@Component({
  tag: 'hy-heading',
  styleUrls: {default: 'heading.scss', wide: 'heading-fw.scss'},
  scoped: true,
  shadow: false,
})
export class Heading {
  /**
   * @type {*}
   */
  @Prop() heading: HeadingVarians = HeadingVarians.default as any;
  /**
   * @type {*}
   */
  @Prop() section: HeadingSectionVariants = HeadingSectionVariants.default as any;
  @Prop() negative: boolean = false;
  @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 headingInVariants = this.heading in HeadingVarians;
    const classAttributes = ['hy-heading', this.negative ? 'negative' : '', `hy-heading__${this.section}`];

    const sectionClassAttributes = [`hy-heading__${this.section}--divider`].join(' ');

    const containerSectionClass = [
      'hy-heading__container',
      `hy-heading__container__${this.section}`,
      `hy-heading__container__${this.headerstyle}`,
    ].join(' ');

    return (
      <Host>
        {headingInVariants ? (
          <div class={containerSectionClass}>
            <this.heading class={classAttributes.join(' ')}>
              <slot />
            </this.heading>

            <span class={sectionClassAttributes}></span>
          </div>
        ) : (
          <div class={containerSectionClass}>
            <HeadingVarians.default class={classAttributes.join(' ')}>
              <slot />
            </HeadingVarians.default>

            <span class={sectionClassAttributes}></span>
          </div>
        )}
      </Host>
    );
  }
}