hy-large-process-flow-phase.tsx

export interface PhaseValue {
  heading: string;
  description: string;
  links: ProcessBoxLinkValue[];
}

export interface ProcessBoxLinkValue {
  label: string;
  url: string;
}

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

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

  @Watch('dataItems')
  arrayDataWatcher(newValue: PhaseValue[] | 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__phase-container'].join(' ');

    return (
      <div class={classAttributes}>
        {this._dataItems.map((x, index) => {
          var items;
          if (x.links && x.links.length > 0) {
            let linkItems = x.links;
            let linkItemsCount = x.links.length;
            items = linkItems.map((item, index) => {
              let classLinks = index == linkItemsCount - 1 ? 'phase-link last' : 'phase-link';
              return item ? (
                <hy-cta-link class={classLinks} link-content={item.label} sc-label={item.label} url={item.url} />
              ) : null;
            });
          }

          return [
            <div class="hy-large-process-flow__phase-container__phase">
              <div class="hy-large-process-flow__phase-container__phase__number">
                <h2 class="hy-large-process-flow__phase-container__phase__number__number">
                  <div class="hy-large-process-flow__phase-container__phase__number__title">{index + 1}</div>
                </h2>
              </div>
              <div class="hy-large-process-flow__phase-container__phase__content">
                <div class="hy-large-process-flow__phase-container__phase__content__heading">{x.heading}</div>
                <div class="hy-large-process-flow__phase-container__phase__content__description">{x.description}</div>
                <div class="hy-large-process-flow__phase-container__phase__content__links">{items}</div>
              </div>
            </div>,
          ];
        })}
      </div>
    );
  }
}