heading.tsx

import {Component, Element, h, Host, Prop} from '@stencil/core';
import {HeadingSectionVariants, HeadingVarians} 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;
  @Prop() isSearch: boolean = false;
  /**
   * @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 isHeadingH2 = this.heading == HeadingVarians.h2;
    const classAttributes = [
      'hy-heading',
      this.negative ? 'negative' : '',
      this.isSearch ? 'hy-heading__search' : '',
      this.isSearch ? `hy-heading__search__${this.headerstyle}` : '',
      `hy-heading__${this.section}`,
      `hy-heading__${this.headerstyle}`,
      `hy-heading__${this.section}__${this.headerstyle}`,
    ];

    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}>
              {isHeadingH2 && (
                <div>
                  <hy-box pt="1.25, 1.25, 1.5, 2.5" />
                </div>
              )}
              <this.heading class={classAttributes.join(' ')}>
                <slot />
              </this.heading>

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

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