heading.tsx

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


@Component({
  tag: 'hy-heading',
  styleUrl: 'heading.scss',
  shadow: true
})
export class Heading {
  @Prop() heading: HeadingVarians = HeadingVarians.default;
  @Prop() section: HeadingSectionVariants = HeadingSectionVariants.default;

  
  render() {
    const headingInVariants = this.heading in HeadingVarians;
    const classAttributes = ["hy-heading"];
    const sectionClassAttributes = [`hy-heading__${this.section}`].join(" ");
    return (
        <Host>
          { headingInVariants
            ? <div class="hy-heading__container"><this.heading class={classAttributes.join(" ")}><slot /></this.heading><span class={sectionClassAttributes}></span></div>
            : <div class="hy-heading__container"><HeadingVarians.default class={classAttributes.join(" ")}><slot /></HeadingVarians.default><span class={sectionClassAttributes}></span></div>
          }
        </Host>

    );
  }
}