Accordion component

CHANGELOG.md

@@ -14,11 +14,15 @@
 
 🆕 New features:
 
-- Pull Request Title goes here
+- Accordion component 🎉
 
-  Description goes here (optional)
+  Contributed by @frankieroberto, as well as @injms, @hannalaakso, @joelanman and others.
 
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
+  The accordion component lets users show and hide sections of related content on a page.
+
+  For more information see [guidance](https://design-system.service.gov.uk/components/accordion/).
+
+  ([PR #958](https://github.com/alphagov/govuk-frontend/pull/958))
 
 - Add desktop specific grid column widths
 

src/all.js

@@ -1,4 +1,5 @@
 import { nodeListForEach } from './common'
+import Accordion from './components/accordion/accordion'
 import Button from './components/button/button'
 import Details from './components/details/details'
 import CharacterCount from './components/character-count/character-count'
@@ -12,6 +13,12 @@ function initAll () {
   // Find all buttons with [role=button] on the document to enhance.
   new Button(document).init()
 
+  // Find all global accordion components to enhance.
+  var $accordions = document.querySelectorAll('[data-module="accordion"]')
+  nodeListForEach($accordions, function ($accordion) {
+    new Accordion($accordion).init()
+  })
+
   // Find all global details elements to enhance.
   var $details = document.querySelectorAll('details')
   nodeListForEach($details, function ($detail) {

src/components/_all.scss

@@ -1,3 +1,4 @@
+@import "accordion/accordion";
 @import "back-link/back-link";
 @import "breadcrumbs/breadcrumbs";
 @import "button/button";

src/components/accordion/README.md

@@ -0,0 +1,17 @@
+# Accordion
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the details component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/accordion).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+`id` option given to instances of the component must be **unique** across the domain of your service (as the expanded state of individual instances of the component persists across page loads using [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)).
+
+See [options table](https://design-system.service.gov.uk/components/accordion/#options-example-default) for details.

src/components/accordion/_accordion.scss

@@ -0,0 +1,173 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+
+@include govuk-exports("govuk/component/accordion") {
+
+  .govuk-accordion {
+    @include govuk-responsive-margin(6, "bottom");
+    // Border at the bottom of the whole accordion
+    border-bottom: 1px solid $govuk-border-colour;
+  }
+
+  // Borders between accordion sections
+  .govuk-accordion__section {
+    border-top: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-accordion__section-header {
+    padding-bottom: govuk-spacing(3);
+  }
+
+  .govuk-accordion__section-heading {
+    margin-top: 0; // Override browser default
+    margin-bottom: 0; // Override browser default
+  }
+
+  // Buttons within the sections don’t need default styling
+  .govuk-accordion__section-button {
+    @include govuk-font($size: 24, $weight: bold);
+    margin-bottom: 0;
+    padding-top: govuk-spacing(3);
+  }
+
+  .govuk-accordion__section-summary {
+    margin-top: govuk-spacing(2);
+    margin-bottom: 0;
+  }
+
+  // JavaScript enabled
+  .js-enabled {
+
+    // Hide the body of collapsed sections
+    .govuk-accordion__section-content {
+      display: none;
+      @include govuk-responsive-padding(3, "top");
+      @include govuk-responsive-padding(3, "bottom");
+    }
+
+    // Remove the bottom margin from the last item inside the content
+    .govuk-accordion__section-content > :last-child {
+      margin-bottom: 0;
+    }
+
+    // Show the body of expanded sections
+    .govuk-accordion__section--expanded .govuk-accordion__section-content {
+      display: block;
+    }
+
+    // This is styled to look like a link not a button
+    .govuk-accordion__open-all {
+      @include govuk-font($size: 16);
+      @include govuk-link-common;
+      display: inline;
+      border-width: 0;
+      color: $govuk-link-colour;
+      background: none;
+      cursor: pointer;
+
+      &:focus {
+        background: none;
+      }
+    }
+
+    // Section headers have a pointer cursor as an additional affordance
+    .govuk-accordion__section-header {
+      position: relative;
+      // Safe area on the right to avoid clashing with icon
+      padding-right: 40px;
+      cursor: pointer;
+    }
+
+    // Section headers have a grey background on hover as an additional affodance
+    .govuk-accordion__section-header:hover {
+      background-color: govuk-colour("grey-4");
+    }
+
+    // Setting focus styles on header so that summary that is not part of the button is included in focus
+    .govuk-accordion__section-header--focused {
+      // These replicate @mixin govuk-focusable (the mixin can't be used as the header doesn't get the focus)
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: 0;
+    }
+
+    // Buttons within the headers don’t need default styling
+    .govuk-accordion__section-button {
+      @include govuk-link-common;
+      width: 100%;
+      margin-top: 0;
+      margin-bottom: 0;
+      margin-left: 0;
+      padding-top: govuk-spacing(3);
+      padding-bottom: 0;
+      padding-left: 0;
+      border-width: 0;
+      // Headings in section headers have link colours as an additional affodance
+      color: $govuk-link-colour;
+      background: none;
+      text-align: left;
+      cursor: pointer;
+
+      &:focus {
+        outline: none;
+        background: none;
+      }
+    }
+
+    // Extend the touch area of the button to span the section header
+    .govuk-accordion__section-button:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    .govuk-accordion__controls {
+      text-align: right;
+    }
+
+    // Display an icon to the right of each header to indicate open/closed status,
+    // and as an additional affordance.
+    .govuk-accordion__icon {
+      position: absolute;
+      top: 50%;
+      right: 15px;
+      width: 16px;
+      height: 16px;
+      margin-top: -8px;
+    }
+
+    .govuk-accordion__icon:after,
+    .govuk-accordion__icon:before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: 25%;
+      height: 25%;
+      margin: auto;
+      border: 2px solid transparent;
+      background-color: govuk-colour("black");
+    }
+
+    .govuk-accordion__icon:before {
+      width: 100%;
+    }
+
+    .govuk-accordion__icon:after {
+      height: 100%;
+    }
+
+    // Vertical bar should be hidden when section is open, to display a '-' icon
+    .govuk-accordion__section--expanded .govuk-accordion__icon:after {
+      content: " ";
+      display: none;
+    }
+  }
+}