heading.tsx

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


@Component({
  tag: 'hy-heading',
  styleUrl: 'heading.scss',
  shadow: true
})
export class Heading {
  @Prop() heading: HeadingVarians = HeadingVarians.default;
  
  render() {
    const headingInVariants = this.heading in HeadingVarians;
    return (
      <Host>
        { headingInVariants
            ? <this.heading><slot /></this.heading>
            : <HeadingVarians.default><slot /></HeadingVarians.default> }
      </Host>
    );
  }
}