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 {
  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() {
    /*
    - Logic:
    - 3 items: big
    - 4 items: small
    - 5 items: big
    - 6 items: big
    * */
    const keyFiguresVariant = this._dataItems.length == 4 ? KeyHighlightVariants.small : KeyHighlightVariants.default;

    const classAttributes = [keyFiguresVariant, '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={keyFiguresVariant}
                    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={keyFiguresVariant}
                    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={keyFiguresVariant}
                  heading={x.heading}
                  description={x.description}
                />
              );
            })}
          </div>
        </div>
      );
    }
  }
}