Skip to content

Commit b7071a2

Browse files
shayan-roshanshayan-roshan
authored
Merge pull request #696 from GSA/revert-695-accordion-js
Revert "Accordion js"
2 parents a74d51c + 88881ae commit b7071a2

3 files changed

Lines changed: 66 additions & 89 deletions

File tree

‎sam-styles/packages/components/accordion/accordion.stories.js‎

Lines changed: 56 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,70 @@
1+
//import BorderedAccordion from "./templates/bordered.html";
12
import MultiSelectableAccordion from "./templates/multiselectable.html";
2-
import BorderedAccordion from "./templates/bordered.html"
33

44
export default {
55
title: "Components/Accordion",
66
argTypes: {
7-
class: { control: 'text' },
8-
expanded: { control: 'boolean' }
7+
class: {type: "string"},
8+
expanded: {type: "boolean"},
99
},
10-
};
11-
export const Bordered = (args) => {
12-
const container = document.createElement('div');
13-
container.className = `usa-accordion ${args.class || 'usa-accordion--bordered'}`;
14-
container.innerHTML = BorderedAccordion;
10+
};
1511

16-
const accordionButtons = container.querySelectorAll('.usa-accordion__button');
17-
const accordionContents = container.querySelectorAll('.usa-accordion__content');
12+
const BorderedTemplate = (args) => {
13+
return `<div class="usa-accordion ${args.class}">
1814
19-
if (accordionButtons.length > 0 && accordionContents.length > 0) {
20-
accordionButtons[0].setAttribute('aria-expanded', 'true');
21-
accordionContents[0].style.display = 'block';
22-
}
15+
<h2 class="usa-accordion__heading">
16+
<button class="usa-accordion__button border-top-1px border-base-light " aria-expanded="false" aria-controls="b-a1">
17+
Accordion Button
18+
</button>
19+
</h2>
20+
<!--div id="b-a1" class="usa-accordion__content">
21+
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
22+
</div-->
2323
24-
for (let i = 1; i < accordionButtons.length; i++) {
25-
accordionButtons[i].setAttribute('aria-expanded', 'false');
26-
accordionContents[i].style.display = 'none';
27-
}
24+
<h2 class="usa-accordion__heading">
25+
<button class="usa-accordion__button " aria-expanded="true" aria-controls="b-a2">
26+
Accordion Button
27+
</button>
28+
</h2>
29+
<div id="b-a2" class="usa-accordion__content">
30+
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
31+
</div>
2832
29-
const script = document.createElement('script');
30-
script.type = 'module';
31-
script.textContent = `
32-
const initAccordion = () => {
33-
const accordionButtons = document.querySelectorAll('.usa-accordion__button');
34-
accordionButtons.forEach(button => {
35-
button.addEventListener('click', function() {
36-
const isExpanded = this.getAttribute('aria-expanded') === 'true';
37-
// Toggle the current section
38-
this.setAttribute('aria-expanded', !isExpanded);
39-
const contentPanelId = this.getAttribute('aria-controls');
40-
const contentPanel = document.getElementById(contentPanelId);
41-
contentPanel.style.display = isExpanded ? 'none' : 'block';
33+
<h2 class="usa-accordion__heading">
34+
<button class="usa-accordion__button " aria-expanded="false" aria-controls="b-a3">
35+
Accordion Button
36+
</button>
37+
</h2>
38+
<!--div id="b-a3" class="usa-accordion__content">
39+
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
40+
</div-->
4241
43-
// Collapse other sections
44-
accordionButtons.forEach(otherButton => {
45-
if (otherButton !== this) {
46-
otherButton.setAttribute('aria-expanded', 'false');
47-
const otherContentPanel = document.getElementById(otherButton.getAttribute('aria-controls'));
48-
otherContentPanel.style.display = 'none';
49-
}
50-
});
51-
});
52-
});
53-
};
54-
initAccordion();
55-
`;
42+
<h2 class="usa-accordion__heading">
43+
<button class="usa-accordion__button " aria-expanded="false" aria-controls="b-a4">
44+
Accordion Button
45+
</button>
46+
</h2>
47+
<!--div id="b-a4" class="usa-accordion__content">
48+
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
49+
</div-->
5650
57-
container.appendChild(script);
51+
<h2 class="usa-accordion__heading">
52+
<button class="usa-accordion__button " aria-expanded="false" aria-controls="b-a5">
53+
Accordion Button
54+
</button>
55+
</h2>
56+
<!--div id="b-a5" class="usa-accordion__content">
57+
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
58+
</div-->
5859
59-
return container;
60-
};
60+
</div>`;
61+
};
6162

62-
export const Multiselectable = () => {
63-
const container = document.createElement('div');
64-
container.innerHTML = MultiSelectableAccordion;
65-
container.querySelectorAll('.usa-accordion__button').forEach((button, index) => {
66-
button.setAttribute('aria-expanded', index === 1 ? 'true' : 'false');
67-
});
68-
container.querySelectorAll('.usa-accordion__content').forEach((content, index) => {
69-
content.style.display = index === 1 ? 'block' : 'none';
70-
});
71-
72-
const script = document.createElement('script');
73-
script.type = 'module';
74-
script.textContent = `
75-
const initAccordion = () => {
76-
const accordionButtons = document.querySelectorAll('.usa-accordion__button');
77-
accordionButtons.forEach(button => {
78-
button.addEventListener('click', function() {
79-
const isExpanded = this.getAttribute('aria-expanded') === 'true';
80-
this.setAttribute('aria-expanded', !isExpanded);
81-
const contentPanelId = this.getAttribute('aria-controls');
82-
const contentPanel = document.getElementById(contentPanelId);
83-
contentPanel.style.display = isExpanded ? 'none' : 'block';
84-
});
85-
});
86-
};
87-
initAccordion();
88-
`;
89-
90-
container.appendChild(script);
91-
92-
return container;
93-
};
63+
export const Multiselectable = () => {
64+
return MultiSelectableAccordion;
65+
};
66+
67+
export const Bordered = BorderedTemplate.bind({});
68+
Bordered.args = {
69+
class: "usa-accordion--bordered",
70+
};

‎sam-styles/packages/components/accordion/templates/bordered.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ <h2 class="usa-accordion__heading">
55
Accordion Button
66
</button>
77
</h2>
8-
<div id="b-a1" class="usa-accordion__content">
8+
<!--div id="b-a1" class="usa-accordion__content">
99
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
10-
</div>
10+
</div-->
1111

1212
<h2 class="usa-accordion__heading">
1313
<button class="usa-accordion__button " aria-expanded="true" aria-controls="b-a2">
@@ -23,26 +23,26 @@ <h2 class="usa-accordion__heading">
2323
Accordion Button
2424
</button>
2525
</h2>
26-
<div id="b-a3" class="usa-accordion__content">
26+
<!--div id="b-a3" class="usa-accordion__content">
2727
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
28-
</div>
28+
</div-->
2929

3030
<h2 class="usa-accordion__heading">
3131
<button class="usa-accordion__button " aria-expanded="false" aria-controls="b-a4">
3232
Accordion Button
3333
</button>
3434
</h2>
35-
<div id="b-a4" class="usa-accordion__content">
35+
<!--div id="b-a4" class="usa-accordion__content">
3636
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
37-
</div>
37+
</div-->
3838

3939
<h2 class="usa-accordion__heading">
4040
<button class="usa-accordion__button " aria-expanded="false" aria-controls="b-a5">
4141
Accordion Button
4242
</button>
4343
</h2>
44-
<div id="b-a5" class="usa-accordion__content">
44+
<!--div id="b-a5" class="usa-accordion__content">
4545
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
46-
</div>
46+
</div-->
4747

4848
</div>

‎sam-styles/packages/components/accordion/templates/multiselectable.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ <h2 class="usa-accordion__heading">
55
Accordion Button
66
</button>
77
</h2>
8-
<div id="b-a1" class="usa-accordion__content">
8+
<!--div id="b-a1" class="usa-accordion__content">
99
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
10-
</div>
10+
</div-->
1111

1212
<h2 class="usa-accordion__heading">
1313
<button class="usa-accordion__button " aria-expanded="true" aria-controls="b-a2">

0 commit comments

Comments
 (0)