Skip to content

Commit

Permalink
Merge pull request #1386 from undp/develop
Browse files Browse the repository at this point in the history
Release 1.3.1
  • Loading branch information
Jura authored Sep 26, 2024
2 parents b5eeaf3 + f5b6b12 commit dce8fee
Show file tree
Hide file tree
Showing 6 changed files with 16 additions and 15 deletions.
2 changes: 1 addition & 1 deletion docs/js/accordion.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/js/all.min.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@undp/design-system",
"version": "1.3.0",
"version": "1.3.1",
"description": "UNDP Design System",
"homepage": "https://design.undp.org",
"main": "index.js",
Expand Down
10 changes: 5 additions & 5 deletions stories/Components/UIcomponents/Accordion/Accordion.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -128,10 +128,10 @@ export default {
<h4>States</h4>
<p>An accordion panel has two states: collapsed and expanded. The chevron icon at the end of the accordion title should indicate the accordion panel’s state. By default, all panels of an accordion should begin at the collapsed state. The following behavior modifiers are available:</p>
<ul>
<li><strong>Multi-expand</strong>. By default only one panel of the accordion can be open at a time. It can be changed by assigning data-multi-expand=”true” attribute to the accordion’s outermost element.</li>
<li><strong>Disabled</strong>: temporary removing expanding capability of the specific panel while preserving overall look and feel</li>
<li><strong>Active</strong>: while default state of all panels is “close” we can enable certain panels by assigning class .is-active to it</li>
<li><strong>Mobile Only</strong>: To shwo the Accordion on mobile device only we have to pass the attribute to the parent div eg: <code>&lt;div class="accordion" data-accordion="mobile"&gt;</code></li>
<li><strong>Multi-expand</strong>. By default only one panel of the accordion can be open at a time. It can be changed by assigning data-multi-expand=”true” attribute to the accordion’s outermost element. <code>&lt;div class="accordion" data-multi-expand="true"&gt;</code></li>
{/* <li><strong>Disabled</strong>: temporary removing expanding capability of the specific panel while preserving overall look and feel</li> */}
<li><strong>Active</strong>: while default state of all panels is “close” we can enable certain panels by assigning class .is-active to it: <code>&lt;li class="is-active"&gt;</code></li>
<li><strong>Mobile Only</strong>: To show the Accordion on mobile device only we have to pass the attribute to the parent div eg: <code>&lt;div class="accordion" data-accordion="mobile"&gt;</code></li>
</ul>
<h4>Interactions</h4>
<p>The entire accordion title and chevron is selectable. Users can click anywhere in the title area to expand or collapse the content, providing a large, easy to manipulate target.</p>
Expand Down Expand Up @@ -166,5 +166,5 @@ AccordionStory.argTypes = {
descriptionText: { table: { disable: true } },
};



11 changes: 6 additions & 5 deletions stories/assets/js/accordion.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ export function accordion(accordionSelector, accordionSiblingSelector, accordion
jQuery(currentElem).siblings(accordinSiblingElement).slideDown('fast').attr('aria-hidden', false);

// Close all other list items and panels.
jQuery(accordionListItem).not(jQuery(currentElem)).removeClass(accordionActiveElem).attr('aria-expanded', false);
jQuery(accordionListItem).not(jQuery(currentElem)).siblings(accordinSiblingElement).slideUp('fast')
.attr('aria-hidden', true);
if (!jQuery(accordionElement).data('multiExpand')) {
jQuery(accordionListItem).not(jQuery(currentElem)).removeClass(accordionActiveElem).attr('aria-expanded', false);
jQuery(accordionListItem).not(jQuery(currentElem)).siblings(accordinSiblingElement).slideUp('fast').attr('aria-hidden', true);
}
} else {
// Close active list item if open.
jQuery(currentElem).removeClass(accordionActiveElem).attr('aria-expanded', false);
Expand All @@ -30,7 +31,7 @@ export function accordion(accordionSelector, accordionSiblingSelector, accordion
if (hasMobileAttr) {
jQuery(accordionListItem).addClass('desktop-event-none').siblings(accordionSibling).addClass('desktop-visible');
}
jQuery(accordionListItem).click(function (e) {
jQuery(accordionListItem, element).click(function (e) {
e.preventDefault();

// Callback function for Accordion Trigger.
Expand All @@ -42,7 +43,7 @@ export function accordion(accordionSelector, accordionSiblingSelector, accordion
// Check if 'Enter' key is pressed.
if (keycode == 13) accordionTrigger(jQuery(this), accordionListItem, accordionSibling, accordionActiveClass);
});
});
}).find('.is-active button').first().trigger('click');
};

accordionClick(accordionElement, accordionPanel, accordionActiveElement);
Expand Down

0 comments on commit dce8fee

Please sign in to comment.