Skip to content

Commit

Permalink
Tidy up untranslated content and formatting on accordion docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@owenatgov
owenatgov committed Mar 4, 2021
1 parent eac652b commit 50204e9
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 75 deletions.
14 changes: 11 additions & 3 deletions app/assets/javascripts/govuk_publishing_components/components/accordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
this.upChevonIconClass = 'gem-c-accordion-nav__chevron'
this.downChevonIconClass = 'gem-c-accordion-nav__chevron--down'

// component content pulled from translated data attributes
this.$module.actions = {}
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')

// Indicate that js has worked
this.$module.classList.add('gem-c-accordion--active')

Expand Down Expand Up @@ -117,7 +125,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
// Build additional copy for assistive technology
var srAdditionalCopy = document.createElement('span')
srAdditionalCopy.classList.add('govuk-visually-hidden')
srAdditionalCopy.innerHTML = ' this section'
srAdditionalCopy.innerHTML = this.$module.actions.thisSectionVisuallyHidden

// Build additional wrapper for toggle text, place icon after wrapped text.
var wrapperShowHideIcon = document.createElement('span')
Expand Down Expand Up @@ -178,7 +186,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
var icon = section.querySelector('.' + this.upChevonIconClass)
var showHideText = section.querySelector('.' + this.sectionShowHideTextClass)
var button = section.querySelector('.' + this.sectionButtonClass)
var newButtonText = expanded ? 'Hide' : 'Show'
var newButtonText = expanded ? this.$module.actions.hideText : this.$module.actions.showText

showHideText.innerHTML = newButtonText
button.setAttribute('aria-expanded', expanded)
Expand Down Expand Up @@ -218,7 +226,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
GemAccordion.prototype.updateOpenAllButton = function (expanded) {
var icon = this.openAllButton.querySelector('.' + this.upChevonIconClass)
var openAllCopy = this.openAllButton.querySelector('.' + this.openAllTextClass)
var newButtonText = expanded ? 'Hide all sections' : 'Show all sections'
var newButtonText = expanded ? this.$module.actions.hideAllText : this.$module.actions.showAllText
this.openAllButton.setAttribute('aria-expanded', expanded)
openAllCopy.innerHTML = newButtonText

Expand Down
5 changes: 5 additions & 0 deletions app/views/govuk_publishing_components/components/_accordion.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@
data_attributes ||= {}
data_attributes[:module] = 'gem-accordion'
data_attributes[:anchor_navigation] = anchor_navigation
data_attributes[:show_text] = t("components.accordion.show")
data_attributes[:hide_text] = t("components.accordion.hide")
data_attributes[:show_all_text] = t("components.accordion.show_all")
data_attributes[:hide_all_text] = t("components.accordion.hide_all")
data_attributes[:this_section_visually_hidden] = t("components.accordion.this_section_visually_hidden")
%>
<% if items.any? %>
<%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>
Expand Down
144 changes: 72 additions & 72 deletions app/views/govuk_publishing_components/components/docs/accordion.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,21 +40,21 @@ examples:
data:
items:
- heading:
text: "Writing well for the web"
text: Writing well for the web
content:
html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
html: <p class="govuk-body">This is the content for Writing well for the web.</p>
- heading:
text: "Writing well for specialists"
text: Writing well for specialists
content:
html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
- heading:
text: "Know your audience"
text: Know your audience
content:
html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
html: <p class="govuk-body">This is the content for Know your audience.</p>
- heading:
text: "How people read"
text: How people read
content:
html: "<p class='govuk-body'>This is the content for How people read.</p>"
html: <p class="govuk-body">This is the content for How people read.</p>
with_supplied_identification:
description: |
An `id` is optional as it's automatically generated, but it can be supplied if a specific `id` is required.
Expand All @@ -66,29 +66,29 @@ examples:
id: with-supplied-id-thats-unique-across-the-domain
items:
- heading:
text: "Writing well for the web"
text: Writing well for the web
content:
html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
html: <p class="govuk-body">This is the content for Writing well for the web.</p>
- heading:
text: "Writing well for specialists"
text: Writing well for specialists
content:
html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
- heading:
text: "Know your audience"
text: Know your audience
content:
html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
html: <p class="govuk-body">This is the content for Know your audience.</p>
- heading:
text: "How people read"
text: How people read
content:
html: "<p class='govuk-body'>This is the content for How people read.</p>"
html: <p class="govuk-body">This is the content for How people read.</p>
with_summary:
description: Adds a subheading below each section heading.
data:
items:
- heading:
text: "Understanding agile project management"
text: Understanding agile project management
summary:
text: "Introductions, methods, core features."
text: Introductions, methods, core features.
content:
html:
'<ul class="govuk-list">
Expand All @@ -103,9 +103,9 @@ examples:
</li>
</ul>'
- heading:
text: "Working with agile methods"
text: Working with agile methods
summary:
text: "Workspaces, tools and techniques, user stories, planning."
text: Workspaces, tools and techniques, user stories, planning.
content:
html:
'<ul class="govuk-list">
Expand All @@ -132,9 +132,9 @@ examples:
</li>
</ul>'
- heading:
text: "Governing agile services"
text: Governing agile services
summary:
text: "Principles, measuring progress, spending money."
text: Principles, measuring progress, spending money.
content:
html:
'<ul class="govuk-list">
Expand All @@ -158,9 +158,9 @@ examples:
</li>
</ul>'
- heading:
text: "Phases of an agile project"
text: Phases of an agile project
summary:
text: "Discovery, alpha, beta, live and retirement."
text: Discovery, alpha, beta, live and retirement.
content:
html:
'<ul class="govuk-list">
Expand Down Expand Up @@ -190,90 +190,90 @@ examples:
data:
data_attributes:
gtm: 'gtm-accordion'
ga: 'ga-accordion'
gtm: gtm-accordion
ga: ga-accordion
items:
- heading:
text: "Writing well for the web"
text: Writing well for the web
content:
html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
html: <p class="govuk-body">This is the content for Writing well for the web.</p>
data_attributes:
gtm: 'gtm-accordion-item-1'
gtm: gtm-accordion-item-1
- heading:
text: "Writing well for specialists"
text: Writing well for specialists
content:
html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
data_attributes:
gtm: 'gtm-accordion-item-2'
gtm: gtm-accordion-item-2
- heading:
text: "Know your audience"
text: Know your audience
content:
html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
html: <p class="govuk-body">This is the content for Know your audience.</p>
data_attributes:
gtm: 'gtm-accordion-item-3'
gtm: gtm-accordion-item-3
- heading:
text: "How people read"
text: How people read
content:
html: "<p class='govuk-body'>This is the content for How people read.</p>"
html: <p class="govuk-body">This is the content for How people read.</p>
data_attributes:
gtm: 'gtm-accordion-item-4'
gtm: gtm-accordion-item-4
different_heading_level:
description: This will alter the level of the heading, not the appearance of the heading.
data:
heading_level: 3
items:
- heading:
text: "Writing well for the web"
text: Writing well for the web
content:
html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
html: <p class="govuk-body">This is the content for Writing well for the web.</p>
- heading:
text: "Writing well for specialists"
text: Writing well for specialists
content:
html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
- heading:
text: "Know your audience"
text: Know your audience
content:
html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
html: <p class="govuk-body">This is the content for Know your audience.</p>
- heading:
text: "How people read"
text: How people read
content:
html: "<p class='govuk-body'>This is the content for How people read.</p>"
html: <p class="govuk-body">This is the content for How people read.</p>
with_margin_bottom:
description: |
The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 30px.
data:
margin_bottom: 0
items:
- heading:
text: "Writing well for the web"
text: Writing well for the web
content:
html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
html: <p class="govuk-body">This is the content for Writing well for the web.</p>
- heading:
text: "Writing well for specialists"
text: Writing well for specialists
content:
html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
with_section_open:
description: |
Adding `expanded: true` to the item will mean the section will default to being open, rather than closed. Once a user has opened or closed a section, the state of each section will be remembered - this can override a section's default.
data:
items:
- heading:
text: "Writing well for the web"
text: Writing well for the web
content:
html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
html: <p class="govuk-body">This is the content for Writing well for the web.</p>
expanded: true
- heading:
text: "Writing well for specialists"
text: Writing well for specialists
content:
html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
- heading:
text: "Know your audience"
text: Know your audience
content:
html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
html: <p class="govuk-body">This is the content for Know your audience.</p>
- heading:
text: "How people read"
text: How people read
content:
html: "<p class='govuk-body'>This is the content for How people read.</p>"
html: <p class="govuk-body">This is the content for How people read.</p>
with_the_anchor_link_navigation:
description: |
Some apps require custom ids per accordion section heading for linking between those specific sections, sometimes across multiple pages. An example of this is on manuals pages where multiple manuals will each include large sets of accordions and will reference between specific sections for ease of access to that content. [Live example](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#associations).
Expand All @@ -287,30 +287,30 @@ examples:
anchor_navigation: true
items:
- heading:
text: "Writing well for the web"
id: "writing-well-for-the-web"
text: Writing well for the web
id: writing-well-for-the-web
content:
html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
html: <p class="govuk-body">This is the content for Writing well for the web.</p>
- heading:
text: "Writing well for specialists"
text: Writing well for specialists
content:
html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
- heading:
text: "Know your audience"
text: Know your audience
content:
html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
html: <p class="govuk-body">This is the content for Know your audience.</p>
- heading:
text: "How people read"
text: How people read
content:
html: "<p class='govuk-body'>This is the content for How people read.</p>"
html: <p class="govuk-body">This is the content for How people read.</p>
condensed_layout:
description: |
This is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.
data:
condensed: true
items:
- heading:
text: "Understanding agile project management"
text: Understanding agile project management
content:
html:
'<ul class="govuk-list">
Expand All @@ -325,9 +325,9 @@ examples:
</li>
</ul>'
- heading:
text: "Working with agile methods"
text: Working with agile methods
summary:
text: "Workspaces, tools and techniques, user stories, planning."
text: Workspaces, tools and techniques, user stories, planning.
content:
html:
'<ul class="govuk-list">
Expand All @@ -354,7 +354,7 @@ examples:
</li>
</ul>'
- heading:
text: "Governing agile services"
text: Governing agile services
content:
html:
'<ul class="govuk-list">
Expand All @@ -378,7 +378,7 @@ examples:
</li>
</ul>'
- heading:
text: "Phases of an agile project"
text: Phases of an agile project
content:
html:
'<ul class="govuk-list">
Expand Down
10 changes: 10 additions & 0 deletions config/locales/en.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ en:
common:
translations: "Translations"
components:
accordion:
show: "Show"
hide: "Hide"
show_all: "Show all sections"
hide_all: "Hide all sections"
this_section_visually_hidden: " this section"
attachment:
opendocument_html: "This file is in an <a href='https://www.gov.uk/guidance/using-open-document-formats-odf-in-your-organisation' target=%{target} class='govuk-link'>OpenDocument</a> format"
request_format_text: "This file may not be suitable for users of assistive technology."
Expand Down Expand Up @@ -54,6 +60,10 @@ en:
what_wrong: "What went wrong?"
send_me_survey: "Send me the survey"
send: "Send"
layout_header:
top_level: "Top level"
nav_items_aria_label: "Show or hide Top Level Navigation"
menu: "Menu"
organisation_schema:
all_content_search_description: "Find all content from %{organisation}"
radio:
Expand Down

0 comments on commit 50204e9

Please sign in to comment.