Skip to content

Commit

Permalink
Update to new Design
Browse files Browse the repository at this point in the history 
Build additional wrappers for:
- Screen reader pause,
- Hidden "this section" > Show[ this section]
- Wrapper for entire elements called toggle text
- Open all button
  • Loading branch information
Chris Yoong committed Jul 19, 2021
1 parent 3be38f4 commit 8a1e48e
Show file tree
Hide file tree
Showing 2 changed files with 201 additions and 148 deletions.
256 changes: 149 additions & 107 deletions src/govuk/components/accordion/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
@include govuk-exports("govuk/component/accordion") {
$govuk-accordion-base-colour: govuk-colour("black");
$govuk-accordion-hover-colour: govuk-colour("light-grey", $legacy: "grey-3");
$govuk-accordion-icon-focus-colour: govuk-colour("yellow");
$govuk-accordion-border-width: 3px;
$govuk-accordion-bottom-border-width: 1px;
$govuk-header-link-underline-thickness: 3px;

.govuk-accordion {
@include govuk-responsive-margin(6, "bottom");
Expand All @@ -10,24 +15,10 @@
padding-top: govuk-spacing(3);
}

.govuk-accordion__section-header {
padding-top: govuk-spacing(3);
padding-bottom: govuk-spacing(3);
}

.govuk-accordion__section-heading {
// Override browser defaults to ensure consistent element height
// Font size is set in .govuk-accordion__section-button
@include govuk-font(24);

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);
display: inline-block;
display: block;
margin-bottom: 0;
padding-top: govuk-spacing(3);
}
Expand All @@ -44,49 +35,78 @@

// JavaScript enabled
.js-enabled {
// Border at the bottom of the whole accordion
.govuk-accordion {
// Border at the bottom of the whole accordion
border-bottom: 1px solid $govuk-border-colour;
border-bottom: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
}

// Borders between accordion sections
.govuk-accordion__section {
padding-top: 0;
}

// Hide the body of collapsed sections
.govuk-accordion__section-content {
display: none;
@include govuk-responsive-padding(3, "top");
@include govuk-responsive-padding(3, "bottom");
}

// Show the body of expanded sections
.govuk-accordion__section--expanded .govuk-accordion__section-content {
display: block;
padding: 0;
}

// This is styled to look like a link not a button
.govuk-accordion__open-all {
@include govuk-font($size: 16);
.govuk-accordion__show-all {
@include govuk-font($size: 19);
position: relative;
z-index: 1;
margin: 0;
padding: 0;

margin: 0 0 govuk-spacing(2) 0;
padding: 7px 2px 7px 0;

border-width: 0;

color: $govuk-link-colour;
background: none;

cursor: pointer;
-webkit-appearance: none;

@include govuk-link-common;
@include govuk-link-style-default;

// Remove default button focus outline in Firefox
&::-moz-focus-inner {
padding: 0;
border: 0;
}

&:hover {
color: $govuk-accordion-base-colour;
background: $govuk-accordion-hover-colour;

.govuk-accordion__section-toggle-text {
color: $govuk-accordion-base-colour;
}

.govuk-accordion-nav__chevron {
color: $govuk-accordion-base-colour;
background: $govuk-accordion-base-colour;
}

.govuk-accordion-nav__chevron:after {
color: $govuk-accordion-hover-colour;
}
}

&:focus {
@include govuk-focused-text;

.govuk-accordion-nav__chevron {
background: $govuk-accordion-base-colour;
}

.govuk-accordion-nav__chevron:after {
color: $govuk-accordion-icon-focus-colour;
}
}
}

.govuk-accordion__section-heading {
@include govuk-font($size: 24, $line-height: 1);
// Override browser defaults to ensure consistent element height
margin-top: 0; // Override browser default
margin-bottom: 0; // Override browser default
}

.govuk-accordion__section-heading-focus-wrapper {
margin-bottom: govuk-spacing(1);
}

// Create Chervon icon aligned with text
Expand Down Expand Up @@ -158,29 +178,71 @@

// 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;
border-top: 1px solid $govuk-border-colour;
padding: 0;
cursor: pointer;
}

// Buttons within the headers don’t need default styling
.govuk-accordion__section-button {
@include govuk-typography-common;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
padding: 0;
border-width: 0;
color: $govuk-link-colour;
position: relative;

width: 100%;

padding: govuk-spacing(2) 0 govuk-spacing(6);

border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
border-width: $govuk-accordion-bottom-border-width 0 0 0;

color: $govuk-text-colour;
background: none;

text-align: left;
cursor: pointer;
-webkit-appearance: none;

&:active {
color: $govuk-link-active-colour;
background: none;
}

&:hover {
color: $govuk-accordion-base-colour;
background: $govuk-accordion-hover-colour;

.govuk-accordion__section-toggle-text {
color: $govuk-accordion-base-colour;
}

.govuk-accordion-nav__chevron {
color: $govuk-accordion-base-colour;
background: $govuk-accordion-base-colour;
}

.govuk-accordion-nav__chevron:after {
color: $govuk-accordion-hover-colour;
}
}

&:focus {
@include govuk-focused-text;
// Remove default focus border around button as
// styling is being applied to inner text elements that receive focus (from line 204)
outline: 0;

.govuk-accordion__section-heading-focus-wrapper,
.govuk-accordion__section-summary,
.govuk-accordion__section-toggle {
@include govuk-focused-text;
display: inline;
}

.govuk-accordion-nav__chevron {
color: $govuk-accordion-base-colour;
background: $govuk-accordion-base-colour;
}

.govuk-accordion-nav__chevron:after {
color: $govuk-accordion-icon-focus-colour;
}
}

// Remove default button focus outline in Firefox
Expand All @@ -190,77 +252,57 @@
}
}

// 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__section-button:hover:not(:focus) {
color: $govuk-link-hover-colour;
text-decoration: underline;
// Add toggle link with Chevron icon on left.
.govuk-accordion__section-toggle {
@include govuk-font($size: 19, $line-height: 1);
margin-top: govuk-spacing(1);
margin-bottom: govuk-spacing(1);

// This needs to come after the text-decoration property otherwise
// text-decoration, as a shorthand property, resets it to auto
@include govuk-link-hover-decoration;
text-underline-offset: $govuk-link-underline-offset;
}
color: $govuk-link-colour;

// For devices that can't hover such as touch devices,
// remove hover state as it can be stuck in that state (iOS).
@media (hover: none) {
.govuk-accordion__section-button:hover {
text-decoration: none;
&:active {
background: $govuk-link-active-colour;
}
}

.govuk-accordion__controls {
text-align: right;
// By default span is inline, these properties allow the elements to wrap visually and
// allow the width(and focus states) to correctly adjust the the content instead of being full width.
.govuk-accordion__section-toggle,
.govuk-accordion__section-heading-focus-wrapper,
.govuk-accordion__section-summary {
float: left;
clear: left;
text-align: left;
}

// 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;
// Change the summary subheading size.govuk-accordion__section-summary
.govuk-accordion__section-summary {
@include govuk-responsive-margin(1, "top");
@include govuk-responsive-margin(2, "bottom");
@include govuk-typography-responsive($size: 19, $override-line-height: 1);
}

.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");
// Hide body of expanded sections
.govuk-accordion__section-content {
display: none;
@include govuk-responsive-padding(0, "top");
@include govuk-responsive-padding(8, "bottom");
}

.govuk-accordion__icon:before {
width: 100%;
// Show the body of expanded sections
.govuk-accordion__section--expanded .govuk-accordion__section-content {
display: block;
}

.govuk-accordion__icon:after {
height: 100%;
// Remove the bottom margin from the last item inside the content
.govuk-accordion__section-content > :last-child {
margin-bottom: 0;
}

// Vertical bar should be hidden when section is open, to display a '-' icon
.govuk-accordion__section--expanded .govuk-accordion__icon:after {
content: " ";
display: none;
// Space between icon and text,
// Avoid placing on icon due to transform altering placement of margin
.govuk-accordion__show-all-text,
.govuk-accordion__section-toggle-text {
margin-left: 5px;
}
}
}
Loading

0 comments on commit 8a1e48e

Please sign in to comment.