Skip to content

Commit

Permalink
Fix accordion buttons (#403)
Browse files Browse the repository at this point in the history 
* Fix accordion buttons

* Fix failing test
  • Loading branch information
@bameyrick
bameyrick authored Jun 5, 2019
1 parent 49bdd90 commit b26f381
Show file tree
Hide file tree
Showing 6 changed files with 24 additions and 18 deletions.
1 change: 1 addition & 0 deletions src/components/accordion/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
}}
Expand Down
23 changes: 12 additions & 11 deletions src/components/button/_macro-options.md
View file
Original file line number Diff line number Diff line change
@@ -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 |
2 changes: 1 addition & 1 deletion src/components/button/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
>
<span class="btn__inner">{{- params.html | safe if params.html else params.text -}}</span>
<span class="btn__inner{% if params.innerClasses %} {{ params.innerClasses }}{% endif %}">{{- params.html | safe if params.html else params.text -}}</span>
</button>
{% endmacro %}
4 changes: 3 additions & 1 deletion src/components/details/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
>
Expand All @@ -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
})
}}
Expand All @@ -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
})
}}
Expand Down
7 changes: 4 additions & 3 deletions src/components/details/collapsible.group.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down Expand Up @@ -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);
}
}
Expand Down
5 changes: 3 additions & 2 deletions src/components/details/collapsible.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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;
}

Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit b26f381

Please sign in to comment.