accordion-container.tsx

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

@Component({
  tag: 'hy-accordion-container',
  styleUrl: 'accordion-container.scss',
  shadow: false,
})
export class AccordionContainer {
  @Prop() accordionid?: string;

  /*
  * data-allow-toggle
    Allow for each toggle to both open and close individually

  data-allow-multiple
    Allow for multiple accordion sections to be expanded at the same time.
    Assumes data-allow-toggle otherwise you would not be able to close any of the accordions
  */

  render() {
    const classAttributes = ['hy-accordion-container', 'js-hy-accordion'];
    const id = this.accordionid.toLowerCase().replace(/\W/g, '-');
    return (
      <Host>
        <div id={id} class={classAttributes.join(' ')} data-allow-multiple="true" data-allow-toggle="true">
          <slot></slot>
        </div>
        <hy-box mb="1.75, 1.75, 2, 2.5" />
      </Host>
    );
  }
}