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>
    );
  }
}

/*
Paragraphs that have an option to include an H2-heading:
Harmonise the padding under the enabled H2-heading in all paragraphs.
Where exactly? Under paragraph or under the h2 title?

No sidebar navigation:
- Mobile 24 px = 1.5rem
- Tablet: 28 px = 1.75rem
- Screens 960-1200 px: 32 px = 2rem
- Screens wider than 1200 px: 40 px = 2.5rem

With sidebar navigation:
- Screens 1201-1600 px: 32 px = 2rem
- Screens wider than 1600 px: 40 px = 2.5rem
* */