process.tsx

export interface ProcessFlowBoxValue {
  heading: string;
  description: string;
  step: string;
}

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

@Component({
  tag: 'hy-process',
  styleUrl: 'process.scss',
  shadow: true,
})
export class Process implements ComponentInterface {
  @Prop() variant: ProcessFlowBoxVariants = ProcessFlowBoxVariants.default;

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

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

  render() {
    const itemsPerRow = (this.variant == "small") ? 4 : 3;
    const classAttributes = [this.variant, "hy-process"].join(" ");
    const classItem = "box";
    var stepState;

    return (
      <div class={classAttributes}>
        {this._dataItems.map((x, index) =>
        {
            (index % itemsPerRow == 0) ? stepState="first" :
              stepState="default";
            return <hy-process-flow-box class={classItem}
              variant={this.variant}
              box-number={index + 1}
              box-title={x.heading}
              box-description={x.description}
              intermediate-step-title={x.step}
              step-state={stepState}
            />
        }
        )}
      </div>
    );
  }
}