link-box-list.tsx

export interface LinkBox {
  heading: string;
  description: string;
  imageUrl: string;
  imageAlt: string;
  boxUrl: string;
  isExternal: boolean;
  ariaLabel: string;
}

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

@Component({
  tag: 'hy-link-box-list',
  styleUrl: 'link-box-list.scss',
  shadow: false,
})
export class LinkBoxList implements ComponentInterface {
  @Element() el: HTMLElement;
  @Prop() headerstyle: string = 'common';
  @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;

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

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

  componentDidLoad() {
    let hyMainDiv = this.el.closest('.hy-main');
    if (hyMainDiv) {
      if (!hyMainDiv.classList.contains('with-sidebar')) {
        this.headerstyle = 'large';
      }
    }
  }

  getBoxClassName(count) {
    let className = 'small';

    if (count % 3 == 0 || count == 5) {
      className = 'big';
    } else if (count % 4 == 0 || count == 7) {
      className = 'small';
    }

    return className;
  }

  render() {
    const classAttributes = [
      'hy-link-box-list',
      this.variant,
      `hy-link-box-list__${this.variant}`,
      `hy-link-box-list__${this.headerstyle}`,
    ].join(' ');

    /*
    - Logic:
    - 3 items: big
    - 4 items: small
    - 5 items: big
    - 6 items: big
    - 7 items: small
    - 8 items: small
    - 9 items: big
    * */
    const classItem = this.getBoxClassName(this._dataItems.length);
    const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`, classItem].join(' ');

    return (
      <Host>
        <div class={classAttributes}>
          {this._dataItems.map((x) => {
            return (
              <hy-link-box
                class={classItemAttributes}
                variant={this.variant}
                image-url={x.imageUrl}
                image-alt={x.imageAlt}
                text-title={x.heading}
                text-description={x.description}
                url={x.boxUrl}
                is-external={x.isExternal}
                sc-label={x.ariaLabel}
              />
            );
          })}
        </div>
        <hy-box mb="1.75, 1.75, 2, 2.5" />
      </Host>
    );
  }
}