diff --git a/app/components/govuk_component/accordion.html.erb b/app/components/govuk_component/accordion.html.erb index fc48e74c..6a04ed8c 100644 --- a/app/components/govuk_component/accordion.html.erb +++ b/app/components/govuk_component/accordion.html.erb @@ -3,7 +3,7 @@ <%= tag.div(id: section.id(suffix: 'section'), class: section.classes, **section.html_attributes) do %>

- <%= tag.span(section.title, id: section.id, class: "govuk-accordion__section-button") %> + <%= tag.span(section.title, id: section.id, class: "govuk-accordion__section-button", aria: { expanded: section.expanded? }) %>

<% if section.summary.present? %> <%= tag.div(section.summary, id: section.id(suffix: 'summary'), class: %w(govuk-accordion__section-summary govuk-body)) %> diff --git a/app/components/govuk_component/accordion.rb b/app/components/govuk_component/accordion.rb index 6c056a85..f89113c4 100644 --- a/app/components/govuk_component/accordion.rb +++ b/app/components/govuk_component/accordion.rb @@ -19,19 +19,26 @@ def default_classes end class Section < GovukComponent::Slot - attr_accessor :title, :summary + attr_accessor :title, :summary, :expanded - def initialize(title:, summary: nil, classes: [], html_attributes: {}) + alias_method :expanded?, :expanded + + def initialize(title:, summary: nil, expanded: false, classes: [], html_attributes: {}) super(classes: classes, html_attributes: html_attributes) self.title = title self.summary = summary + self.expanded = expanded end def id(suffix: nil) [title.parameterize, suffix].compact.join('-') end + def classes + super + (expanded? ? %w(govuk-accordion__section--expanded) : []) + end + private def default_classes diff --git a/docs/index.html b/docs/index.html index 58a1d114..474979b3 100644 --- a/docs/index.html +++ b/docs/index.html @@ -914,98 +914,6 @@ border-bottom: 1px solid #b1b4b6; } -/* line 12, node_modules/govuk-frontend/govuk/objects/_button-group.scss */ -.govuk-button-group { - margin-bottom: 5px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -@media (min-width: 40.0625em) { - /* line 12, node_modules/govuk-frontend/govuk/objects/_button-group.scss */ - .govuk-button-group { - margin-bottom: 15px; - } -} - -/* line 48, node_modules/govuk-frontend/govuk/objects/_button-group.scss */ -.govuk-button-group .govuk-link { - font-family: "GDS Transport", arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-size: 16px; - font-size: 1rem; - line-height: 1.1875; - display: inline-block; - max-width: 100%; - margin-top: 5px; - margin-bottom: 20px; - text-align: center; -} - -@media print { - /* line 48, node_modules/govuk-frontend/govuk/objects/_button-group.scss */ - .govuk-button-group .govuk-link { - font-family: sans-serif; - } -} - -@media (min-width: 40.0625em) { - /* line 48, node_modules/govuk-frontend/govuk/objects/_button-group.scss */ - .govuk-button-group .govuk-link { - font-size: 19px; - font-size: 1.1875rem; - line-height: 1; - } -} - -@media print { - /* line 48, node_modules/govuk-frontend/govuk/objects/_button-group.scss */ - .govuk-button-group .govuk-link { - font-size: 14pt; - line-height: 19px; - } -} - -/* line 61, node_modules/govuk-frontend/govuk/objects/_button-group.scss */ -.govuk-button-group .govuk-button { - margin-bottom: 17px; -} - -@media (min-width: 40.0625em) { - /* line 12, node_modules/govuk-frontend/govuk/objects/_button-group.scss */ - .govuk-button-group { - margin-right: -15px; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; - } - /* line 84, node_modules/govuk-frontend/govuk/objects/_button-group.scss */ - .govuk-button-group .govuk-button, -.govuk-button-group .govuk-link { - margin-right: 15px; - } - /* line 89, node_modules/govuk-frontend/govuk/objects/_button-group.scss */ - .govuk-button-group .govuk-link { - text-align: left; - } -} - /* line 4, node_modules/govuk-frontend/govuk/objects/_form-group.scss */ .govuk-form-group { margin-bottom: 20px; @@ -1943,8 +1851,6 @@ position: relative; width: 100%; margin-top: 0; - margin-right: 0; - margin-left: 0; margin-bottom: 22px; padding: 8px 10px 7px; border: 2px solid transparent; @@ -1996,36 +1902,36 @@ } } -/* line 55, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 53, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button:link, .govuk-button:visited, .govuk-button:active, .govuk-button:hover { color: #ffffff; text-decoration: none; } -/* line 64, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 62, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button::-moz-focus-inner { padding: 0; border: 0; } -/* line 69, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 67, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button:hover { background-color: #005a30; } -/* line 73, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 71, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button:active { top: 2px; } -/* line 82, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 80, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button:focus { border-color: #ffdd00; outline: 3px solid transparent; box-shadow: inset 0 0 0 1px #ffdd00; } -/* line 110, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 108, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button:focus:not(:active):not(:hover) { border-color: #ffdd00; color: #0b0c0c; @@ -2033,7 +1939,7 @@ box-shadow: 0 2px 0 #0b0c0c; } -/* line 122, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 120, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button:before { content: ""; display: block; @@ -2045,19 +1951,19 @@ background: transparent; } -/* line 146, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 144, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button:active:before { top: -4px; } -/* line 151, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 149, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--disabled, .govuk-button[disabled="disabled"], .govuk-button[disabled] { opacity: 0.5; } -/* line 156, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 154, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--disabled:hover, .govuk-button[disabled="disabled"]:hover, .govuk-button[disabled]:hover { @@ -2065,14 +1971,14 @@ cursor: default; } -/* line 161, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 159, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--disabled:focus, .govuk-button[disabled="disabled"]:focus, .govuk-button[disabled]:focus { outline: none; } -/* line 165, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 163, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--disabled:active, .govuk-button[disabled="disabled"]:active, .govuk-button[disabled]:active { @@ -2080,49 +1986,49 @@ box-shadow: 0 2px 0 #002d18; } -/* line 174, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 172, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--secondary { background-color: #f3f2f1; box-shadow: 0 2px 0 #929191; } -/* line 178, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 176, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--secondary, .govuk-button--secondary:link, .govuk-button--secondary:visited, .govuk-button--secondary:active, .govuk-button--secondary:hover { color: #0b0c0c; } -/* line 197, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 195, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--secondary:hover { background-color: #dbdad9; } -/* line 200, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 198, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--secondary[disabled]:hover { background-color: #f3f2f1; } -/* line 206, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 204, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--warning { background-color: #d4351c; box-shadow: 0 2px 0 #55150b; } -/* line 210, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 208, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--warning, .govuk-button--warning:link, .govuk-button--warning:visited, .govuk-button--warning:active, .govuk-button--warning:hover { color: #ffffff; } -/* line 229, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 227, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--warning:hover { background-color: #aa2a16; } -/* line 232, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 230, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--warning[disabled]:hover { background-color: #d4351c; } -/* line 238, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 236, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--start { font-weight: 700; font-size: 18px; @@ -2138,7 +2044,7 @@ } @media (min-width: 40.0625em) { - /* line 238, node_modules/govuk-frontend/govuk/components/button/_index.scss */ + /* line 236, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--start { font-size: 24px; font-size: 1.5rem; @@ -2147,14 +2053,14 @@ } @media print { - /* line 238, node_modules/govuk-frontend/govuk/components/button/_index.scss */ + /* line 236, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button--start { font-size: 18pt; line-height: 1; } } -/* line 256, node_modules/govuk-frontend/govuk/components/button/_index.scss */ +/* line 254, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button__start-icon { margin-left: 5px; vertical-align: middle; @@ -2165,7 +2071,7 @@ } @media (min-width: 48.0625em) { - /* line 256, node_modules/govuk-frontend/govuk/components/button/_index.scss */ + /* line 254, node_modules/govuk-frontend/govuk/components/button/_index.scss */ .govuk-button__start-icon { margin-left: 10px; } @@ -3007,95 +2913,15 @@ /* line 16, node_modules/govuk-frontend/govuk/components/character-count/_index.scss */ .govuk-character-count__message { - font-family: "GDS Transport", arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-font-feature-settings: "tnum" 1; - font-feature-settings: "tnum" 1; - font-weight: 400; margin-top: 0; margin-bottom: 0; } -@media print { - /* line 16, node_modules/govuk-frontend/govuk/components/character-count/_index.scss */ - .govuk-character-count__message { - font-family: sans-serif; - } -} - -@supports (font-variant-numeric: tabular-nums) { - /* line 16, node_modules/govuk-frontend/govuk/components/character-count/_index.scss */ - .govuk-character-count__message { - -webkit-font-feature-settings: normal; - font-feature-settings: normal; - font-variant-numeric: tabular-nums; - } -} - -/* line 22, node_modules/govuk-frontend/govuk/components/character-count/_index.scss */ +/* line 21, node_modules/govuk-frontend/govuk/components/character-count/_index.scss */ .govuk-character-count__message--disabled { visibility: hidden; } -/* line 6, node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss */ -.govuk-cookie-banner { - font-family: "GDS Transport", arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-size: 16px; - font-size: 1rem; - line-height: 1.25; - padding-top: 20px; - border-bottom: 10px solid transparent; - background-color: #f3f2f1; -} - -@media print { - /* line 6, node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss */ - .govuk-cookie-banner { - font-family: sans-serif; - } -} - -@media (min-width: 40.0625em) { - /* line 6, node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss */ - .govuk-cookie-banner { - font-size: 19px; - font-size: 1.1875rem; - line-height: 1.3157894737; - } -} - -@media print { - /* line 6, node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss */ - .govuk-cookie-banner { - font-size: 14pt; - line-height: 1.15; - } -} - -/* line 22, node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss */ -.govuk-cookie-banner[hidden] { - display: none; -} - -/* line 26, node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss */ -.govuk-cookie-banner__message { - margin-bottom: -10px; -} - -/* line 30, node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss */ -.govuk-cookie-banner__message[hidden] { - display: none; -} - -/* line 36, node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss */ -.govuk-cookie-banner__message:focus { - outline: none; -} - /* line 2, node_modules/govuk-frontend/govuk/components/summary-list/_index.scss */ .govuk-summary-list { font-family: "GDS Transport", arial, sans-serif; @@ -6230,149 +6056,6 @@ text-align: left; } -/* line 53, node_modules/govuk-frontend/govuk/components/table/_index.scss */ -.govuk-table__caption--xl { - font-family: "GDS Transport", arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 700; - font-size: 32px; - font-size: 2rem; - line-height: 1.09375; - margin-bottom: 15px; -} - -@media print { - /* line 53, node_modules/govuk-frontend/govuk/components/table/_index.scss */ - .govuk-table__caption--xl { - font-family: sans-serif; - } -} - -@media (min-width: 40.0625em) { - /* line 53, node_modules/govuk-frontend/govuk/components/table/_index.scss */ - .govuk-table__caption--xl { - font-size: 48px; - font-size: 3rem; - line-height: 1.0416666667; - } -} - -@media print { - /* line 53, node_modules/govuk-frontend/govuk/components/table/_index.scss */ - .govuk-table__caption--xl { - font-size: 32pt; - line-height: 1.15; - } -} - -/* line 58, node_modules/govuk-frontend/govuk/components/table/_index.scss */ -.govuk-table__caption--l { - font-family: "GDS Transport", arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 700; - font-size: 24px; - font-size: 1.5rem; - line-height: 1.0416666667; - margin-bottom: 15px; -} - -@media print { - /* line 58, node_modules/govuk-frontend/govuk/components/table/_index.scss */ - .govuk-table__caption--l { - font-family: sans-serif; - } -} - -@media (min-width: 40.0625em) { - /* line 58, node_modules/govuk-frontend/govuk/components/table/_index.scss */ - .govuk-table__caption--l { - font-size: 36px; - font-size: 2.25rem; - line-height: 1.1111111111; - } -} - -@media print { - /* line 58, node_modules/govuk-frontend/govuk/components/table/_index.scss */ - .govuk-table__caption--l { - font-size: 24pt; - line-height: 1.05; - } -} - -/* line 63, node_modules/govuk-frontend/govuk/components/table/_index.scss */ -.govuk-table__caption--m { - font-family: "GDS Transport", arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 700; - font-size: 18px; - font-size: 1.125rem; - line-height: 1.1111111111; - margin-bottom: 15px; -} - -@media print { - /* line 63, node_modules/govuk-frontend/govuk/components/table/_index.scss */ - .govuk-table__caption--m { - font-family: sans-serif; - } -} - -@media (min-width: 40.0625em) { - /* line 63, node_modules/govuk-frontend/govuk/components/table/_index.scss */ - .govuk-table__caption--m { - font-size: 24px; - font-size: 1.5rem; - line-height: 1.25; - } -} - -@media print { - /* line 63, node_modules/govuk-frontend/govuk/components/table/_index.scss */ - .govuk-table__caption--m { - font-size: 18pt; - line-height: 1.15; - } -} - -/* line 68, node_modules/govuk-frontend/govuk/components/table/_index.scss */ -.govuk-table__caption--s { - font-family: "GDS Transport", arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 700; - font-size: 16px; - font-size: 1rem; - line-height: 1.25; -} - -@media print { - /* line 68, node_modules/govuk-frontend/govuk/components/table/_index.scss */ - .govuk-table__caption--s { - font-family: sans-serif; - } -} - -@media (min-width: 40.0625em) { - /* line 68, node_modules/govuk-frontend/govuk/components/table/_index.scss */ - .govuk-table__caption--s { - font-size: 19px; - font-size: 1.1875rem; - line-height: 1.3157894737; - } -} - -@media print { - /* line 68, node_modules/govuk-frontend/govuk/components/table/_index.scss */ - .govuk-table__caption--s { - font-size: 14pt; - line-height: 1.15; - } -} - /* line 2, node_modules/govuk-frontend/govuk/components/warning-text/_index.scss */ .govuk-warning-text { position: relative; @@ -11711,10 +11394,10 @@

Accordion

Accordion

-
+

- Home electronics + Home electronics

Entertainment, communication and recreation
@@ -11722,7 +11405,7 @@

- Appliances +

Laundry, cookers and vacuum cleaners
@@ -11730,7 +11413,7 @@

- Toys +

@@ -11744,7 +11427,8 @@

render GovukComponent::Accordion.new(id: 'abc123') do |component|
   component.slot(:section,
     title: 'Home electronics',
-    summary: 'Entertainment, communication and recreation') do
+    summary: 'Entertainment, communication and recreation',
+    expanded: true) do
       tag.p(class: 'govuk-body') do
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       end
@@ -11781,21 +11465,21 @@ 

Accordion (using the helper)

- Section 1 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
+

- Section 2 + Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- Section 3 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

@@ -11809,7 +11493,7 @@

"Lorem ipsum dolor sit amet, consectetur adipiscing elit." end end - accordion.add_section(title: 'Section 2') do + accordion.add_section(title: 'Section 2', expanded: true) do tag.p(class: 'govuk-body') do "Lorem ipsum dolor sit amet, consectetur adipiscing elit." end @@ -11964,27 +11648,27 @@