-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update to follow conventions of GOVUK Frontend 4.0 Remove custom CSS for condensed layout, this is not in use on GOVK and goes against Design system Guidance. Additionally the accessibility impact has not been reviewed in depth. - Maintain existing GemAccoridon features of manuals-frontend that allow a user to navigation through this section. [1] - Layering on features on-top of Design System Accoridon - Remove condensed layout, CSS and testing [1] #1937
- Loading branch information
Chris Yoong
committed
Jan 24, 2022
1 parent
e26b0ef
commit 534623a
Showing
6 changed files
with
117 additions
and
154 deletions.
There are no files selected for viewing
82 changes: 81 additions & 1 deletion
82
app/assets/javascripts/govuk_publishing_components/components/accordion.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,85 @@ | ||
| /* global nodeListForEach */ | ||
| // = require ../vendor/polyfills/common.js | ||
| // This component relies on JavaScript from GOV.UK Frontend | ||
| // = require govuk/components/accordion/accordion.js | ||
| window.GOVUK = window.GOVUK || {} | ||
| window.GOVUK.Modules = window.GOVUK.Modules || {} | ||
| window.GOVUK.Modules.Accordion = window.GOVUKFrontend | ||
| window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion; | ||
|
|
||
| (function (Modules) { | ||
| function GemAccordion ($module) { | ||
| this.$module = $module | ||
| this.sectionClass = 'govuk-accordion__section' | ||
| this.sectionHeaderClass = 'govuk-accordion__section-header' | ||
| this.sectionInnerContent = 'govuk-accordion__section-content' | ||
|
|
||
| // Translated component content and language attribute pulled from data attributes | ||
| this.$module.actions = {} | ||
| this.$module.actions.locale = this.$module.getAttribute('data-locale') | ||
| this.$module.actions.showText = this.$module.getAttribute('data-show-text') | ||
| this.$module.actions.hideText = this.$module.getAttribute('data-hide-text') | ||
| this.$module.actions.showAllText = this.$module.getAttribute('data-show-all-text') | ||
| this.$module.actions.hideAllText = this.$module.getAttribute('data-hide-all-text') | ||
| this.$module.actions.thisSectionVisuallyHidden = this.$module.getAttribute('data-this-section-visually-hidden') | ||
| } | ||
|
|
||
| GemAccordion.prototype.init = function () { | ||
| // Indicate that JavaScript has worked | ||
| this.$module.classList.add('gem-c-accordion--active') | ||
|
|
||
| // Feature flag for anchor tag navigation used on manuals | ||
| if (this.$module.getAttribute('data-anchor-navigation') === 'true') { | ||
| this.openByAnchorOnLoad() | ||
| this.addEventListenersForAnchors() | ||
| } | ||
| } | ||
|
|
||
| // Navigate to and open accordions with anchored content on page load if a hash is present | ||
| GemAccordion.prototype.openByAnchorOnLoad = function () { | ||
| var splitHash = window.location.hash.split('#')[1] | ||
|
|
||
| if (window.location.hash && document.getElementById(splitHash)) { | ||
| this.openForAnchor(splitHash) | ||
| } | ||
| } | ||
|
|
||
| // Add event listeners for links to open accordion sections when navigated to using said anchor links on the page | ||
| // Adding an event listener to all anchor link a tags in an accordion is risky but we circumvent this risk partially by only being a layer of accordion behaviour instead of any sort of change to link behaviour | ||
| GemAccordion.prototype.addEventListenersForAnchors = function () { | ||
| var links = this.$module.querySelectorAll('.' + this.sectionInnerContent + ' a[href*="#"]') | ||
| nodeListForEach(links, function (link) { | ||
| if (link.pathname === window.location.pathname) { | ||
| link.addEventListener('click', this.openForAnchor.bind(this, link.hash.split('#')[1])) | ||
| } | ||
|
|
||
| }.bind(this)) | ||
| } | ||
|
|
||
| // Find the parent accordion section for the given id and open it | ||
| GemAccordion.prototype.openForAnchor = function (hash) { | ||
| var target = document.getElementById(hash) | ||
| var $section = this.getContainingSection(target) | ||
| var $header = $section.querySelector('.' + this.sectionHeaderClass) | ||
| // Pass the selected section to "Accordion.prototype.onSectionToggle" to open | ||
| $header.click() | ||
| } | ||
|
|
||
| // Loop through the given id's ancestors until the parent section class is found | ||
| GemAccordion.prototype.getContainingSection = function (target) { | ||
| while (!target.classList.contains(this.sectionClass)) { | ||
| target = target.parentElement | ||
| } | ||
| return target | ||
| } | ||
|
|
||
| GemAccordion.prototype.filterLocale = function (key) { | ||
| if (this.$module.actions.locale && this.$module.actions.locale.indexOf('{') !== -1) { | ||
| var locales = JSON.parse(this.$module.actions.locale) | ||
| return locales[key] | ||
| } else if (this.$module.actions.locale) { | ||
| return this.$module.actions.locale | ||
| } | ||
| } | ||
|
|
||
| Modules.GemAccordion = GemAccordion | ||
| })(window.GOVUK.Modules) |
25 changes: 1 addition & 24 deletions
25
app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,2 @@ | ||
| @import "mixins/prefixed-transform"; | ||
| @import "govuk/components/accordion/accordion"; | ||
|
|
||
| .gem-c-accordion { | ||
| .govuk-accordion__section-heading { | ||
| // this is a temporary addition to fix the line height when it | ||
| // is being overridden by styles from govuk-template in collections | ||
| @include govuk-media-query($until: desktop) { | ||
| @include govuk-font(24, $weight: bold, $line-height: 1.6); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .govuk-accordion--condensed { | ||
| .govuk-accordion__section-button { | ||
| @include govuk-media-query($from: tablet) { | ||
| @include govuk-font($size: 19, $weight: bold); | ||
| } | ||
| } | ||
|
|
||
| .govuk-accordion__section-summary { | ||
| @include govuk-media-query($from: tablet) { | ||
| @include govuk-font($size: 16); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters