Skip to content

Commit

Permalink
Merge pull request #696 from GSA/revert-695-accordion-js
Browse files Browse the repository at this point in the history
Revert "Accordion js"
shayan-roshan authored Jan 31, 2024
2 parents a74d51c + 88881ae commit b7071a2
Showing 3 changed files with 66 additions and 89 deletions.
135 changes: 56 additions & 79 deletions sam-styles/packages/components/accordion/accordion.stories.js
Original file line number Diff line number Diff line change
@@ -1,93 +1,70 @@
//import BorderedAccordion from "./templates/bordered.html";
import MultiSelectableAccordion from "./templates/multiselectable.html";
import BorderedAccordion from "./templates/bordered.html"

export default {
title: "Components/Accordion",
argTypes: {
class: { control: 'text' },
expanded: { control: 'boolean' }
class: {type: "string"},
expanded: {type: "boolean"},
},
};
export const Bordered = (args) => {
const container = document.createElement('div');
container.className = `usa-accordion ${args.class || 'usa-accordion--bordered'}`;
container.innerHTML = BorderedAccordion;
};

const accordionButtons = container.querySelectorAll('.usa-accordion__button');
const accordionContents = container.querySelectorAll('.usa-accordion__content');
const BorderedTemplate = (args) => {
return `<div class="usa-accordion ${args.class}">
if (accordionButtons.length > 0 && accordionContents.length > 0) {
accordionButtons[0].setAttribute('aria-expanded', 'true');
accordionContents[0].style.display = 'block';
}
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button border-top-1px border-base-light " aria-expanded="false" aria-controls="b-a1">
Accordion Button
</button>
</h2>
<!--div id="b-a1" class="usa-accordion__content">
<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>
</div-->
for (let i = 1; i < accordionButtons.length; i++) {
accordionButtons[i].setAttribute('aria-expanded', 'false');
accordionContents[i].style.display = 'none';
}
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button " aria-expanded="true" aria-controls="b-a2">
Accordion Button
</button>
</h2>
<div id="b-a2" class="usa-accordion__content">
<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>
</div>
const script = document.createElement('script');
script.type = 'module';
script.textContent = `
const initAccordion = () => {
const accordionButtons = document.querySelectorAll('.usa-accordion__button');
accordionButtons.forEach(button => {
button.addEventListener('click', function() {
const isExpanded = this.getAttribute('aria-expanded') === 'true';
// Toggle the current section
this.setAttribute('aria-expanded', !isExpanded);
const contentPanelId = this.getAttribute('aria-controls');
const contentPanel = document.getElementById(contentPanelId);
contentPanel.style.display = isExpanded ? 'none' : 'block';
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button " aria-expanded="false" aria-controls="b-a3">
Accordion Button
</button>
</h2>
<!--div id="b-a3" class="usa-accordion__content">
<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>
</div-->
// Collapse other sections
accordionButtons.forEach(otherButton => {
if (otherButton !== this) {
otherButton.setAttribute('aria-expanded', 'false');
const otherContentPanel = document.getElementById(otherButton.getAttribute('aria-controls'));
otherContentPanel.style.display = 'none';
}
});
});
});
};
initAccordion();
`;
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button " aria-expanded="false" aria-controls="b-a4">
Accordion Button
</button>
</h2>
<!--div id="b-a4" class="usa-accordion__content">
<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>
</div-->
container.appendChild(script);
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button " aria-expanded="false" aria-controls="b-a5">
Accordion Button
</button>
</h2>
<!--div id="b-a5" class="usa-accordion__content">
<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>
</div-->
return container;
};
</div>`;
};

export const Multiselectable = () => {
const container = document.createElement('div');
container.innerHTML = MultiSelectableAccordion;
container.querySelectorAll('.usa-accordion__button').forEach((button, index) => {
button.setAttribute('aria-expanded', index === 1 ? 'true' : 'false');
});
container.querySelectorAll('.usa-accordion__content').forEach((content, index) => {
content.style.display = index === 1 ? 'block' : 'none';
});

const script = document.createElement('script');
script.type = 'module';
script.textContent = `
const initAccordion = () => {
const accordionButtons = document.querySelectorAll('.usa-accordion__button');
accordionButtons.forEach(button => {
button.addEventListener('click', function() {
const isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
const contentPanelId = this.getAttribute('aria-controls');
const contentPanel = document.getElementById(contentPanelId);
contentPanel.style.display = isExpanded ? 'none' : 'block';
});
});
};
initAccordion();
`;

container.appendChild(script);

return container;
};
export const Multiselectable = () => {
return MultiSelectableAccordion;
};

export const Bordered = BorderedTemplate.bind({});
Bordered.args = {
class: "usa-accordion--bordered",
};
16 changes: 8 additions & 8 deletions sam-styles/packages/components/accordion/templates/bordered.html
Original file line number Diff line number Diff line change
@@ -5,9 +5,9 @@ <h2 class="usa-accordion__heading">
Accordion Button
</button>
</h2>
<div id="b-a1" class="usa-accordion__content">
<!--div id="b-a1" class="usa-accordion__content">
<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>
</div>
</div-->

<h2 class="usa-accordion__heading">
<button class="usa-accordion__button " aria-expanded="true" aria-controls="b-a2">
@@ -23,26 +23,26 @@ <h2 class="usa-accordion__heading">
Accordion Button
</button>
</h2>
<div id="b-a3" class="usa-accordion__content">
<!--div id="b-a3" class="usa-accordion__content">
<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>
</div>
</div-->

<h2 class="usa-accordion__heading">
<button class="usa-accordion__button " aria-expanded="false" aria-controls="b-a4">
Accordion Button
</button>
</h2>
<div id="b-a4" class="usa-accordion__content">
<!--div id="b-a4" class="usa-accordion__content">
<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>
</div>
</div-->

<h2 class="usa-accordion__heading">
<button class="usa-accordion__button " aria-expanded="false" aria-controls="b-a5">
Accordion Button
</button>
</h2>
<div id="b-a5" class="usa-accordion__content">
<!--div id="b-a5" class="usa-accordion__content">
<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>
</div>
</div-->

</div>
Original file line number Diff line number Diff line change
@@ -5,9 +5,9 @@ <h2 class="usa-accordion__heading">
Accordion Button
</button>
</h2>
<div id="b-a1" class="usa-accordion__content">
<!--div id="b-a1" class="usa-accordion__content">
<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>
</div>
</div-->

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

0 comments on commit b7071a2

Please sign in to comment.