grid-item.tsx

import { Component, Host, Prop, h } from '@stencil/core';
import {
  GridColumns,
  GridColumnsSm,
  GridColumnsLg,
  GridAlignVariants
} from '../../utils/utils';

@Component({
  tag: 'hy-grid-item',
  styleUrl: 'grid-item.scss',
  shadow: false
})
export class GridItem {
  @Prop() columns: GridColumns = GridColumns.default;
  @Prop() columnssm: GridColumnsSm = GridColumnsSm.default;
  @Prop() columnslg: GridColumnsLg = GridColumnsLg.default;
  @Prop() contentalign: GridAlignVariants = GridAlignVariants.default;

  render() {
    const classAttributes = [
      "hy-grid-item",
      `hy-grid__col-${this.columnssm}-sm`,
      `hy-grid__col-${this.columns}`,
      `hy-grid__col-${this.columnslg}-lg`,
      `hy-grid-align__${this.contentalign}`,
    ];

      return (
      <Host
        class={classAttributes.join(" ")}
      >
        <slot />
      </Host>
    );
  }

}