process-flow-box.tsx

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

@Component({
  tag: 'hy-process-flow-box',
  styleUrl: 'process-flow-box.scss',
  shadow: true,
})
export class ProcessFlowBox implements ComponentInterface {
  @Prop() variant: ProcessFlowBoxVariants = ProcessFlowBoxVariants.default;
  @Prop() boxNumber: string;
  @Prop() boxTitle: string;
  @Prop() boxDescription: string;
  @Prop() intermediateStepTitle: string = '';
  @Prop() stepState: ProcessFlowBoxStepStates = 'default';
  @Prop() numberTerm: string;
  render() {
    const classVariant = [this.variant, 'hy-process-flow-box'].join(' ');
    const classContentVariant = [this.variant, 'hy-process-flow-box__content'].join(' ');

    const classIsEven = parseInt(this.boxNumber) % 2 == 0 ? 'even' : 'odd';

    const classNumberVariant = [this.variant, 'hy-process-flow-box__number__container'].join(' ');
    const classStepVariant = [this.variant, this.stepState, classIsEven, 'hy-process-flow-box__step__container'].join(
      ' '
    );

    return (
      <Host>
        <div class={classVariant}>
          {this.intermediateStepTitle && (
            <div class={classStepVariant}>
              <svg class="desktop" width="210" height="60">
                <polygon points="0 0, 0 60, 190 60, 210 30, 190 0, 0 0" />
              </svg>
              <svg class="mobile" width="138" height="82">
                <polygon points="0 0, 69 15, 138 0, 138 50, 69 82, 0 50" />
              </svg>
              <h2 class="hy-process-flow-box__step">{this.intermediateStepTitle}</h2>
            </div>
          )}
          <div class={classNumberVariant}>
            <h2
              class="hy-process-flow-box__number"
              aria-label={`${this.numberTerm && this.numberTerm} ${this.boxNumber}`}
            >
              <div class="hy-process-flow-box__number-title">{this.boxNumber}</div>
            </h2>
          </div>
          <div class={classContentVariant}>
            <h3 class="hy-process-flow-box__title">{this.boxTitle}</h3>
            <div class="hy-process-flow-box__description">{this.boxDescription}</div>
          </div>
        </div>
        <hy-box mb="1.75, 1.75, 2, 2.5" />
      </Host>
    );
  }
}