Add ability to add custom classes and attributes to the details eleme…

…nt (#190)

src/components/details/_macro-options.md

@@ -4,3 +4,5 @@
 | title       | string | true     | The title for the details                                                              |
 | content     | string | true     | HTML content for the details                                                           |
 | buttonClose | string | false    | Text for the button when the details are open. If not specified button will not render |
+| classes     | string | false    | Classes to add to the details element                                                  |
+| attributes  | object | false    | HTML attributes (for example data attributes) to add to the details element            |

src/components/details/_template.njk

@@ -1,7 +1,7 @@
 
 {% from "components/button/_macro.njk" import onsButton %}
 
-<details id="{{ params.id }}" class="details js-collapsible{% if params.isAccordion %} details--accordion{% endif %}" open{%if params.buttonOpen %} data-btn-close="{{ params.buttonClose }}"{% endif %}{% if params.group %} data-group="{{ params.group }}"{% endif %}>
+<details id="{{ params.id }}" class="details js-collapsible{% if params.isAccordion %} details--accordion{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}" open{%if params.buttonOpen %} data-btn-close="{{ params.buttonClose }}"{% endif %}{% if params.group %} data-group="{{ params.group }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
     <summary class="details__summary js-collapsible-summary" data-ga="click" data-ga-category="{% if params.isAccordion %}accordion{% else %}definition{% endif %}" data-ga-action="Open panel" data-ga-label="{{ params.title }}">
         <h2 class="details__title u-fs-r--b">{{ params.title }}</h2>
         {% if params.buttonClose and params.buttonOpen and params.isAccordion %}