DSO Component Library

# Accordion

WIP

- HTML
- View
- Context
- Assets
- Info
- Notes
- WCAG

`

    <div class="dso-accordion">
        <div class="dso-accordion-section">
            <div class="dso-section-handle">
                <a href="#">Woning</a>
            </div>
        </div>
        <div class="dso-accordion-section dso-success">
            <div class="dso-section-handle">
                <a href="#">Bouwwerkzaamheden</a>
            </div>
        </div>
        <div class="dso-accordion-section dso-warning dso-open">
            <div class="dso-section-handle">
                <a href="#">Plaats van het bouwwerk</a>
            </div>
            <div class="dso-section-body">
                <p>En dit is de inhoud van <strong>Plaats van het bouwwerk</strong></p>

            </div>
        </div>
        <div class="dso-accordion-section dso-info">
            <div class="dso-section-handle">
                <a href="#">Afmetingen van het bouwwerk</a>
            </div>
        </div>
        <div class="dso-accordion-section dso-danger">
            <div class="dso-section-handle">
                <a href="#">Extra werkzaamheden</a>
            </div>
        </div>
    </div>

`
`

    {{#accordion}}
      {{#each sections }}
        {{#accordionSection title }}
          <p>En dit is de inhoud van <strong>{{ title }}</strong></p>
        {{/accordionSection}}
      {{/each}}
    {{/accordion}}

`
`

    sections:
      - title: Woning
        id: panel1
      - title: Bouwwerkzaamheden
        id: panel2
        state: success
      - title: Plaats van het bouwwerk
        id: panel3
        state: warning
        open: true
      - title: Afmetingen van het bouwwerk
        id: panel4
        state: info
      - title: Extra werkzaamheden
        id: panel5
        state: danger

`
File:

- Content:
  `

      // Notes:
      // ------
      // * Each change to this file needs a restart of the fractal instance
      // * Exported methods are merged as helpers in fractal.js
      // ToDo: Multiple accordion's are impossible: The @id of each .accordion is fixed.

      module.exports = function (fractal) {
        const handlebars = fractal.components.engine().handlebars;

        return {
          accordion(options) {
            return `
              <div class="dso-accordion">
                ${options.fn(this)}
              </div>
            `.trim();
          },

          accordionSection(title, options) {
            var self = this;

            let html = (
              `<div class="dso-accordion-section${(self.state ? ' dso-' + self.state : '') + (self.open ? ' dso-open' : '') }">
                <div class="dso-section-handle">
                  <a href="#">${ title }</a>
                </div>`);

            if (self.open) {
              html += (
                `<div class="dso-section-body">
                  ${options.fn(self)}
                </div>`);
            }

            html += `</div>`;

            return html.trim();
          }
        };
      };

  `
- URL: /components/raw/accordion/accordion.js
- Filesystem Path: components\02-content\accordion\accordion.js
- Size: 1 KB

- Handle: @accordion
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\02-content\accordion\accordion.hbs

Een accordion (`.dso-accordion`) bestaat uit secties (`.dso-accordion-section`). Een sectie heeft een handle (`.dso-section-handle`) en body (`.dso-section-body`).

Een accordion section in de state “open” moet een `.dso-open` class op `.dso-accordion-section` krijgen. Dit zorgt voor oranje tekst en het “chevron-up”-icoon. Ook als het `.dso-accordion-section` element niet in het DOM staat, moet een open accordion altijd `.dso-open` krijgen.

Er zijn 4 modifiers: `.dso-succes`, `.dso-warning`, `.dso-info` en `.dso-danger` die op de `.dso-accordion-section` kunnen.

### WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

`<a href="#">Woning</a>`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

`<title>Default`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

`<a href="#">Woning</a>`