hy-key-highlight-group.tsx

export interface KeyHighlightValue {
  heading: string;
  description: string;
}

import {Component, ComponentInterface, Watch, Prop, h} from '@stencil/core';
import {KeyHighlightVariants} from '../../utils/utils';

@Component({
  tag: 'hy-key-highlight-group',
  styleUrl: 'hy-key-highlight-group.scss',
  shadow: true
})
export class HyKeyHighlightGroup implements ComponentInterface {
  @Prop() variant: KeyHighlightVariants = KeyHighlightVariants.default;

  private _dataItems: KeyHighlightValue[];
  @Prop() dataItems: KeyHighlightValue[] | string;

  @Watch('dataItems')
  arrayDataWatcher(newValue: KeyHighlightValue[] | string) {
    if (typeof newValue === 'string') {
      this._dataItems = JSON.parse(newValue);
    } else {
      this._dataItems = newValue;
    }
  }
  componentWillLoad() {
    this.arrayDataWatcher(this.dataItems);
  }

  render() {
    const classAttributes = [this.variant, 'hy-key-highlight-group'].join(' ');

    return (
      <div class={classAttributes}>
        {this._dataItems.map((x) => {
          return <hy-key-highlight variant={this.variant} heading={x.heading} description={x.description} />;
        })}
      </div>
    );
  }
}