hy-large-process-flow.tsx

export interface ProcessFlowValue {
  phaseTitle: string;
  boxes: string;
}

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

@Component({
  tag: 'hy-large-process-flow',
  styleUrl: 'hy-large-process-flow.scss',
  shadow: true,
})
export class HyLargeProcessFlow implements ComponentInterface {
  private _dataItems: ProcessFlowValue[];
  @Prop() dataItems: ProcessFlowValue[] | string;

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

  render() {
    const classAttributes = ['hy-large-process-flow'].join(' ');

    return (
      <div class={classAttributes}>
        {this._dataItems.map((x, index) => {
          let phases = JSON.stringify(x.boxes);
          const headingClasses =
            index !== 0 ? 'hy-large-process-flow__multi-phase-title' : 'hy-large-process-flow__first-phase';

          return [
            <hy-heading class={headingClasses} heading={HeadingVarians.h3}>
              {x.phaseTitle}
            </hy-heading>,
            <hy-large-process-flow-phase data-items={phases} />,
          ];
        })}
      </div>
    );
  }
}