hy-key-figure-group.tsx

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

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

@Component({
  tag: 'hy-key-figure-group',
  styleUrl: 'hy-key-figure-group.scss',
  shadow: false,
})
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 (
        <Host>
          <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>
          <hy-box pb="1.5, 2.5, 2.5" />
        </Host>
      );
    } else {
      return (
        <Host>
          <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>
          <hy-box pb="3, 5, 6" />
        </Host>
      );
    }
  }
}