hy-key-figure-group.tsx

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

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

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

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

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

  getBoxClassName(count) {
    let className = 'box';

    if (count % 3 == 0) {
      className = 'box-3';
    } else if (count % 4 == 0) {
      className = 'box-4';
    } else if (count % 5 == 0) {
      className = 'box-5';
    }

    return className;
  }

  render() {
    const classAttributes = [this.variant, 'hy-key-figure-group-container'].join(' ');
    const classRowAttributes = ['hy-key-figure-group'].join(' ');
    const classRowCenteredAttributes = ['hy-key-figure-group', 'hy-key-figure-group-centered'].join(' ');

    if (this._dataItems.length % 5 == 0) {
      return [
        <div class={classAttributes}>
          <div class={classRowAttributes}>
            {this._dataItems.map((x, index) => {
              if (index < 3) {
                return (
                  <hy-key-figure class="box-3" variant={this.variant} heading={x.heading} description={x.description} />
                );
              }
            })}
          </div>
          <div class={classRowCenteredAttributes}>
            {this._dataItems.map((x, index) => {
              if (index >= 3) {
                return (
                  <hy-key-figure class="box-2" variant={this.variant} heading={x.heading} description={x.description} />
                );
              }
            })}
          </div>
        </div>
      ];
    } else {
      return (
        <div class={classAttributes}>
          <div class={classRowAttributes}>
            {this._dataItems.map((x) => {
              return (
                <hy-key-figure
                  class={this.getBoxClassName(this._dataItems.length)}
                  variant={this.variant}
                  heading={x.heading}
                  description={x.description}
                />
              );
            })}
          </div>
        </div>
      );
    }
  }
}