Add new colour palette and states

Create page for examples Add examples Update examples Update content Temporarily disable error summary js Update button information Fix typos Add information about border on tabs Update based on clarification with a11y team Add link class to links in buton section Update focusable fill style to include border Focus and component changes
alphagov · Mar 12, 2019 · d4e8f7b · d4e8f7b
1 parent e9b32d1
commit d4e8f7b
Show file tree

Hide file tree

Showing 24 changed files with 3,785 additions and 68 deletions.
diff --git a/app/views/examples/colour-palette-and-states/index.njk b/app/views/examples/colour-palette-and-states/index.njk
diff --git a/app/views/examples/links/index.njk b/app/views/examples/links/index.njk
@@ -34,21 +34,25 @@
  <h1 class="govuk-heading-xl">
  Links
  </h1>
-
- {% for variant_description, variant_class in variants %}
-
- <section class="govuk-!-margin-top-8">
- <h2 class="govuk-heading-l">{{ variant_description }}</h2>
-
- {% for state_description, state_class in states %}
- <p class="govuk-body">
- <a href="/" class="govuk-link {{ variant_class }} {{ state_class }}">
- {{ state_description}}
- </a>
- </p>
+ <div class="govuk-grid-row">
+ <div class="govuk-grid-column-one-quarter">
+ {% for variant_description, variant_class in variants %}
+
+ <section class="govuk-!-margin-top-8">
+ <h2 class="govuk-heading-l">{{ variant_description }}</h2>
+
+ {% for state_description, state_class in states %}
+ <p class="govuk-body">
+ <a href="/" class="govuk-link {{ variant_class }} {{ state_class }}">
+ {{ state_description}}
+ </a>
+ </p>
+ {% endfor %}
+ </section>
  {% endfor %}
- </section>
- {% endfor %}
+ </div>
+ </div>
+
 
  </div>
  </div>

diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -15,6 +15,7 @@
  }
 
  .govuk-accordion__section-header {
+ padding-top: govuk-spacing(3);
  padding-bottom: govuk-spacing(3);
  }
 
@@ -53,38 +54,64 @@
  .govuk-accordion__section {
  padding-top: 0;
  border-top: 1px solid $govuk-border-colour;
+
+ &:hover {
+ border-top: 1px solid govuk-colour("light-blue");
+ }
  }
 
  // Hide the body of collapsed sections
  .govuk-accordion__section-content {
  display: none;
  @include govuk-responsive-padding(3, "top");
+ @include govuk-responsive-padding(3, "right");
  @include govuk-responsive-padding(3, "bottom");
+ @include govuk-responsive-padding(3, "left");
  }
 
  // Show the body of expanded sections
  .govuk-accordion__section--expanded .govuk-accordion__section-content {
  display: block;
  }
 
+ // Stle the expanded section
+ .govuk-accordion__section--expanded {
+ border-top: 1px solid govuk-colour("blue");
+ box-shadow: inset 0 3px 0 0 govuk-colour("blue");
+
+ &:hover {
+ border-top: 1px solid govuk-colour("light-blue");
+ box-shadow: inset 0 3px 0 0 govuk-colour("blue");
+ }
+ }
+
  // This is styled to look like a link not a button
  .govuk-accordion__open-all {
  @include govuk-font($size: 16);
  @include govuk-link-common;
+ @include govuk-focusable-text-link;
+ box-sizing: border-box;
  display: inline;
+ margin-right: 0;
+ margin-left: -5px;
+ padding-top: 3px;
+ padding-right: 5px;
+ padding-left: 5px;
  border-width: 0;
  color: $govuk-link-colour;
  background: none;
  cursor: pointer;
 
  &:focus {
- background: none;
+ margin-right: 0;
+ color: govuk-colour("black");
  }
  }
 
  // Section headers have a pointer cursor as an additional affordance
  .govuk-accordion__section-header {
  position: relative;
+ @include govuk-responsive-padding(3, "left");
  // Safe area on the right to avoid clashing with icon
  padding-right: 40px;
  cursor: pointer;
@@ -93,28 +120,33 @@
  // Section headers have a grey background on hover as an additional affodance
  .govuk-accordion__section-header:hover {
  background-color: govuk-colour("light-grey");
+ box-shadow: inset 0 3px 0 0 govuk-colour("light-blue");
  // For devices that can't hover such as touch devices,
  // remove hover state as it can be stuck in that state (iOS).
+
+ .govuk-accordion__section-button {
+ background-color: none;
+ text-decoration: underline;
+ }
+
  @media (hover: none) {
  background-color: initial;
  }
  }
 
- // 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;
+ // Section headers have a grey background on hover as an additional affodance
+ .govuk-accordion__section-header:active {
+ background-color: govuk-colour("light-grey");
  }
 
  // Buttons within the headers don’t need default styling
  .govuk-accordion__section-button {
- @include govuk-link-common;
- width: 100%;
+ @include govuk-typography-common;
+ // width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
- padding-top: govuk-spacing(3);
+ padding-top: 3px;
  padding-bottom: 0;
  padding-left: 0;
  border-width: 0;
@@ -130,6 +162,21 @@
  }
  }
 
+ // Setting focus styles on header so that summary that is not part of the button is included in focus
+ .govuk-accordion__section-header--focused,
+ .govuk-accordion__section-header--focused:active,
+ .govuk-accordion__section-header--focused:hover {
+ // These replicate @mixin govuk-focusable (the mixin can't be used as the header doesn't get the focus)
+ outline: $govuk-focus-width solid transparent;
+ outline-offset: 0;
+
+ .govuk-accordion__section-button {
+ @include govuk-focusable-text;
+ // Stop focus breaking outside of component
+ color: govuk-colour("black");
+ }
+ }
+
  // Extend the touch area of the button to span the section header
  .govuk-accordion__section-button:after {
  content: "";

diff --git a/src/components/back-link/_back-link.scss b/src/components/back-link/_back-link.scss
@@ -25,6 +25,20 @@
  // Underline is provided by a bottom border
  text-decoration: none;
 
+
+ &:focus {
+ // Current margin minus 3px padding added by focus
+ margin-top: 12px;
+ // 14px for icon + 5px from focus style
+ padding-left: 19px;
+ border-bottom: 1px solid govuk-colour("yellow");
+
+ &:before {
+ top: 2px;
+ left: 5px;
+ }
+ }
+
  // Prepend left pointing arrow
  &:before {
  @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -27,6 +27,7 @@
  padding: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)) govuk-spacing(2); // s1
  border: $govuk-border-width-form-element solid transparent;
  border-radius: 0;
+ outline: $govuk-focus-width solid transparent !important;
  color: $govuk-button-text-colour;
  background-color: $govuk-button-colour;
  box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
@@ -69,14 +70,29 @@
  border: 0;
  }
 
- &:hover,
  &:focus {
+ padding-bottom: 5px;
+ color: govuk-colour("black");
+ background-color: govuk-colour("yellow");
+ box-shadow: 0 4px 0 govuk-colour("black");
+ }
+
+ &:hover {
+ color: govuk-colour("white");
  background-color: $govuk-button-hover-colour;
  }
 
  &:active {
  top: $button-shadow-size;
- box-shadow: none;
+ padding-bottom: 8px;
+ border: $govuk-border-width-form-element solid govuk-colour("yellow");
+ color: govuk-colour("white");
+ background-color: $govuk-button-hover-colour;
+ box-shadow: inset 0 0 0 1px govuk-colour("yellow");
+
+ &:before {
+ box-shadow: none;
+ }
 
  @include govuk-if-ie8 {
  border-bottom-width: 0;
@@ -95,9 +111,9 @@
  position: absolute;
 
  top: -$govuk-border-width-form-element;
- right: -$govuk-border-width-form-element;
+ right: -5px;
  bottom: -($govuk-border-width-form-element + $button-shadow-size);
- left: -$govuk-border-width-form-element;
+ left: -5px;
 
  background: transparent;
  }

diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss
@@ -112,6 +112,7 @@
  // Since box-shadows are removed when users customise their colours
  // We set a transparent outline that is shown instead.
  // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+ border: 4px solid govuk-colour("black");
  outline: $govuk-focus-width solid transparent;
  outline-offset: $govuk-focus-width;
  box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;

diff --git a/src/components/details/_details.scss b/src/components/details/_details.scss
@@ -19,7 +19,11 @@
  // Absolutely position the marker against this element
  position: relative;
 
+ margin-right: -(govuk-spacing(1));
  margin-bottom: govuk-spacing(1);
+ margin-left: -(govuk-spacing(1));
+ padding-top: 3px;
+ padding-right: govuk-spacing(1);
 
  // Allow for absolutely positioned marker and align with disclosed text
  padding-left: govuk-spacing(4) + $govuk-border-width;
@@ -39,13 +43,23 @@
  }
 
  .govuk-details__summary:focus {
+ margin-right: -(govuk-spacing(1));
+ margin-left: -(govuk-spacing(1));
+ padding-right: govuk-spacing(1);
+ padding-left: govuk-spacing(4) + $govuk-border-width;
  // -1px offset fixes gap between background and outline in Firefox
- outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour;
+ outline: ($govuk-focus-width + 1px) solid transparent;
  outline-offset: -1px;
  // When focussed, the text colour needs to be darker to ensure that colour
  // contrast is still acceptable
  color: $govuk-focus-text-colour;
  background: $govuk-focus-colour;
+ box-shadow: 0 4px 0 govuk-colour("black");
+
+ // remove underline on link
+ .govuk-details__summary-text {
+ text-decoration: none;
+ }
  }
 
  // Remove the default details marker so we can style our own consistently and
@@ -61,7 +75,7 @@
 
  top: 0;
  bottom: 0;
- left: 0;
+ left: govuk-spacing(1);
 
  margin: auto;
 

diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss
@@ -42,7 +42,7 @@
  }
 
  .govuk-error-summary__list a {
- @include govuk-focusable-fill;
+ @include govuk-focusable-text-link;
  @include govuk-typography-weight-bold;
 
  // Override default link styling to use error colour

diff --git a/src/components/error-summary/error-summary.js b/src/components/error-summary/error-summary.js
@@ -11,9 +11,9 @@ ErrorSummary.prototype.init = function () {
  if (!$module) {
  return
  }
- window.addEventListener('load', function () {
- $module.focus()
- })
+ // window.addEventListener('load', function () {
+ //  $module.focus()
+ // })
 
  $module.addEventListener('click', this.handleClick.bind(this))
 }

diff --git a/src/components/file-upload/_file-upload.scss b/src/components/file-upload/_file-upload.scss
@@ -11,9 +11,25 @@
  @include govuk-font($size: 19);
  @include govuk-text-colour;
  @include govuk-focusable;
+ padding-top: govuk-spacing(1);
+ padding-bottom: govuk-spacing(1);
+ }
+
+ .govuk-file-upload:focus {
+ margin-right: -(govuk-spacing(1));
+ margin-left: -(govuk-spacing(1));
+ padding-right: govuk-spacing(1);
+ padding-left: govuk-spacing(1);
+ border: $govuk-border-width-form-element solid govuk-colour("black");
+ box-shadow: inset 0 0 0 2px govuk-colour("black");
  }
 
  .govuk-file-upload--error {
  border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+
+ &:focus {
+ border: $govuk-border-width-form-element-error solid govuk-colour("black");
+ box-shadow: none;
+ }
  }
 }