From ed4e7b038d2c24566bdb7220745269d26f003dfb Mon Sep 17 00:00:00 2001 From: Rob Lascelles Date: Fri, 20 Dec 2019 12:24:51 +0000 Subject: [PATCH] =?UTF-8?q?v2.0.0=20=E2=80=93=20Allow=20any=20accordion=20?= =?UTF-8?q?item=20to=20be=20expanded=20by=20default=20(#22)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Allow any accordion item to be expanded by default * Allow any accordion item to be expanded by default - bump version etc. * Remove, now redundant, data-toggle-first-section-expanded attribute * Update CHANGELOG.md * Actually remove support for data-toggle-first-section-expanded attribute --- CHANGELOG.md | 11 +++++++++++ README.md | 4 ++-- package.json | 2 +- src/index.js | 6 +++--- test/__snapshots__/index.test.js.snap | 8 ++++---- test/index.test.js | 8 ++++---- 6 files changed, 25 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a34c77c..d90380d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,17 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). +v2.0.0 +------------------------------ +*December 20 2019* + +### Added +- Added possibility to configure which accordion section is expanded by default (`data-toggle-section-expanded` attribute) + +### Removed +- Removed possibility to configure whether only first accordion section is expanded by default (`data-toggle-first-section-expanded` attribute) + + v1.1.0 ------------------------------ *August 21, 2018* diff --git a/README.md b/README.md index 4c6ae06..491b1b8 100644 --- a/README.md +++ b/README.md @@ -97,10 +97,10 @@ In this instance you are then able to add `data-toggle-class` to the parent, as ``` -To expand first accordion section by default add `data-toggle-first-section-expanded` attribute to the parent element. +To expand accordion section by default add `data-toggle-section-expanded` attribute value to the parent element. ```html -
+
diff --git a/package.json b/package.json index 8d708d7..4b33bc6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@justeat/f-toggle", "description": "Fozzie vanilla JS toggle library.", - "version": "1.1.0", + "version": "2.0.0", "main": "dist/index.js", "files": [ "dist" diff --git a/src/index.js b/src/index.js index 7ebd269..14d1289 100644 --- a/src/index.js +++ b/src/index.js @@ -45,17 +45,17 @@ const onKeydown = (event, bindToggleBehaviour, accordion, accordionExclude) => { const setupToggle = () => { /** - * If accordion, display first section on initialisation based on "data-toggle-first-section-expanded" attribute presence + * If accordion, display first section on initialisation based on "data-toggle-section-expanded" attribute presence */ $('[data-toggle-accordion]') .forEach(accordion => { const toggleClass = accordion.getAttribute('data-toggle-class') || 'is-hidden'; - const isFirstSectionExpanded = accordion.hasAttribute('data-toggle-first-section-expanded'); + const sectionExpanded = accordion.getAttribute('data-toggle-section-expanded'); $('[data-toggle-name]', accordion) .filter(toggle => !toggle.hasAttribute('data-toggle-accordion-exclude')) - .slice(isFirstSectionExpanded ? 1 : 0) + .filter(toggle => sectionExpanded !== toggle.getAttribute('data-toggle-name')) .forEach(toggles(toggleClass).hide); }); diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap index b390591..ec56c6a 100644 --- a/test/__snapshots__/index.test.js.snap +++ b/test/__snapshots__/index.test.js.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`setupToggle accordion should display only the first item on initialisation 1`] = ` +exports[`setupToggle accordion should display only the expanded item on initialisation 1`] = ` " -
-
+
+
-
+
" diff --git a/test/index.test.js b/test/index.test.js index 2be4a44..02daebd 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -297,10 +297,10 @@ describe('setupToggle', () => { }); describe('accordion', () => { - it('should display only the first item on initialisation', () => { + it('should display only the expanded item on initialisation', () => { // Arrange TestUtils.setBodyHtml(` -
+
@@ -540,7 +540,7 @@ describe('setupToggle', () => { it('should not focus on the next section when pressing \'tab\' and the current section is visible', () => { // Arrange TestUtils.setBodyHtml(` -
+
@@ -600,7 +600,7 @@ describe('setupToggle', () => { it('should not focus on the previous section when pressing \'shift\' & \'tab\' and the previous section is visible', () => { // Arrange TestUtils.setBodyHtml(` -
+