From 603cb9098f6f18130de5a4df1b384af77bd85d86 Mon Sep 17 00:00:00 2001
From: Ben Meyrick <bameyrick@gmail.com>
Date: Mon, 18 Feb 2019 15:16:12 +0000
Subject: [PATCH] Add ability to add custom classes and attributes to the
 details element (#190)

---
 src/components/details/_macro-options.md | 2 ++
 src/components/details/_template.njk     | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/details/_macro-options.md b/src/components/details/_macro-options.md
index 738f896ba6..565395e439 100644
--- a/src/components/details/_macro-options.md
+++ b/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            |
diff --git a/src/components/details/_template.njk b/src/components/details/_template.njk
index 6e6b14552e..a82894bb29 100644
--- a/src/components/details/_template.njk
+++ b/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 %}