diff --git a/src/components/accordion/_macro.njk b/src/components/accordion/_macro.njk
index 42b5be6f30..6c3f3afe9f 100644
--- a/src/components/accordion/_macro.njk
+++ b/src/components/accordion/_macro.njk
@@ -16,6 +16,7 @@
"type": "button",
"text": params.allButton.open,
"classes": "btn--secondary btn--small js-collapsible-all u-wa--@xs u-mb-s u-d-no",
+ "innerClasses": "js-collapsible-all-inner",
"attributes": attributes
})
}}
diff --git a/src/components/button/_macro-options.md b/src/components/button/_macro-options.md
index 3ac6d977b8..6c9943d878 100644
--- a/src/components/button/_macro-options.md
+++ b/src/components/button/_macro-options.md
@@ -1,11 +1,12 @@
-| Name | Type | Required | Description |
-| ---------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------ |
-| text | string | true | If `html` is set, this is not required. Text for the button. If `html` is provided, the `text` argument will be ignored. |
-| html | string | true | If `text` is set, this is not required. HTML for the button. If `html` is provided, the `text` argument will be ignored. |
-| type | string | true | Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. |
-| name | string | true | Name for the `button` |
-| value | string | true | Value for the `button` |
-| id | string | false | ID for the `button` |
-| classes | string | false | Classes to add to the button component |
-| print | boolean | false | Sets button into print button mode and adds the relevant classes |
-| attributes | object | false | HTML attributes (for example data attributes) to add to the button component |
+| Name | Type | Required | Description |
+| ------------ | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------ |
+| text | string | true | If `html` is set, this is not required. Text for the button. If `html` is provided, the `text` argument will be ignored. |
+| html | string | true | If `text` is set, this is not required. HTML for the button. If `html` is provided, the `text` argument will be ignored. |
+| type | string | true | Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. |
+| name | string | true | Name for the `button` |
+| value | string | true | Value for the `button` |
+| id | string | false | ID for the `button` |
+| classes | string | false | Classes to add to the button component |
+| innerClasses | string | false | Classes to add to the inner button element |
+| print | boolean | false | Sets button into print button mode and adds the relevant classes |
+| attributes | object | false | HTML attributes (for example data attributes) to add to the button component |
diff --git a/src/components/button/_macro.njk b/src/components/button/_macro.njk
index d55cdabd63..f08dbfca2a 100644
--- a/src/components/button/_macro.njk
+++ b/src/components/button/_macro.njk
@@ -8,6 +8,6 @@
{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}
{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
>
- {{- params.html | safe if params.html else params.text -}}
+ {{- params.html | safe if params.html else params.text -}}
{% endmacro %}
diff --git a/src/components/details/_macro.njk b/src/components/details/_macro.njk
index 3ff3e6590a..48ce34e8b6 100644
--- a/src/components/details/_macro.njk
+++ b/src/components/details/_macro.njk
@@ -5,7 +5,7 @@
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.closeButton }}"{% endif %}
+ {% if params.button and params.button.close %} data-btn-close="{{ params.button.close }}"{% endif %}
{% if params.group %} data-group="{{ params.group }}"{% endif %}
{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
>
@@ -22,6 +22,7 @@
"type": "button",
"text": params.button.open,
"classes": "details__btn btn--secondary btn--small js-collapsible-button u-d-no u-d-no@xs@s",
+ "innerClasses": "js-collapsible-button-inner",
"attributes": params.button.attributes
})
}}
@@ -36,6 +37,7 @@
"type": "button",
"text": params.button.open or params.button.close,
"classes": "btn--small js-collapsible-button u-d-no " + (params.button.classes | default("btn--secondary")),
+ "innerClasses": "js-collapsible-button-inner",
"attributes": params.button.attributes
})
}}
diff --git a/src/components/details/collapsible.group.js b/src/components/details/collapsible.group.js
index 03e3c4ee73..e1b5cc4b28 100644
--- a/src/components/details/collapsible.group.js
+++ b/src/components/details/collapsible.group.js
@@ -3,11 +3,12 @@ export default class CollapsibleGroup {
this.openCollapsibles = 0;
this.button = button;
+ this.buttonInner = button.querySelector('.js-collapsible-all-inner');
this.group = button.getAttribute('data-group');
this.collapsibles = collapsibles.filter(collapsible => collapsible.group === this.group);
this.totalCollapsibles = this.collapsibles.length;
- this.buttonOpen = button.innerHTML.trim();
+ this.buttonOpen = this.buttonInner.innerHTML.trim();
this.closeButton = button.getAttribute('data-close-all');
this.collapsibles.forEach(collapsible => {
@@ -46,10 +47,10 @@ export default class CollapsibleGroup {
setButton() {
if (this.canClose()) {
- this.button.innerHTML = this.closeButton;
+ this.buttonInner.innerHTML = this.closeButton;
this.button.setAttribute('data-ga-label', this.buttonOpen);
} else {
- this.button.innerHTML = this.buttonOpen;
+ this.buttonInner.innerHTML = this.buttonOpen;
this.button.setAttribute('data-ga-label', this.closeButton);
}
}
diff --git a/src/components/details/collapsible.js b/src/components/details/collapsible.js
index a8d45adc4d..2bd5f9fddc 100644
--- a/src/components/details/collapsible.js
+++ b/src/components/details/collapsible.js
@@ -12,6 +12,7 @@ export class Collapsible {
this.summary = this.details.querySelector('.js-collapsible-summary');
this.content = this.details.querySelector('.js-collapsible-content');
this.button = this.details.querySelector('.js-collapsible-button');
+ this.buttonInner = this.details.querySelector('.js-collapsible-button-inner');
// Initialise
const contentId = this.content.getAttribute('id');
@@ -20,7 +21,7 @@ export class Collapsible {
this.button.addEventListener('click', this.toggle.bind(this));
this.button.setAttribute('aria-controls', contentId);
this.button.classList.remove('u-d-no');
- this.buttonOpen = this.button.innerHTML.trim();
+ this.buttonOpen = this.buttonInner.innerHTML.trim();
this.closeButton = this.details.getAttribute('data-btn-close') || this.buttonOpen;
}
@@ -65,7 +66,7 @@ export class Collapsible {
if (this.button) {
this.button.setAttribute('data-ga-action', `${action} panel`);
- this.button.innerHTML = open ? this.closeButton : this.buttonOpen;
+ this.buttonInner.innerHTML = open ? this.closeButton : this.buttonOpen;
}
if (this.onOpen && this.onClose) {