Release v2.11.0 (#1296)

Release v2.11.0

CHANGELOG.md

@@ -14,19 +14,37 @@
 
 🆕 New features:
 
-- Add support for custom row classes on the summary list component (including support for some rows without action links)
+- Pull Request Title goes here
 
-  ([PR #1259](https://github.com/alphagov/govuk-frontend/pull/1259))
+  Description goes here (optional)
+
+  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
+
+🔧 Fixes:
+
+- Pull Request Title goes here
+
+  Description goes here (optional)
+
+  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
+
+## 2.11.0 (Feature release)
+
+🆕 New features:
+
+- Add new secondary and warning button variants
+
+  ([PR #1207](https://github.com/alphagov/govuk-frontend/pull/1207))
 
 - Add new govuk-shade and govuk-tint functions for creating shades and tints of
   colours.
 
   ([PR #1207](https://github.com/alphagov/govuk-frontend/pull/1207))
 
-- Add new secondary and warning button variants
+- Add support for custom row classes on the summary list component (including support for some rows without action links)
+
+  ([PR #1259](https://github.com/alphagov/govuk-frontend/pull/1259))
 
-  ([PR #1207](https://github.com/alphagov/govuk-frontend/pull/1207))
-
 - Ensure fieldset never exceeds max-width
 
   This fix ensures that both WebKit/Blink and Firefox are prevented from expanding their fieldset widths to the content's minimum size.
@@ -37,12 +55,6 @@
 
   ([PR #1269](https://github.com/alphagov/govuk-frontend/pull/1269))
 
-- Pull Request Title goes here
-
-  Description goes here (optional)
-
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
-
 🔧 Fixes:
 
 - Add various fixes to the summary list component:
@@ -55,12 +67,6 @@
 
   ([PR #1259](https://github.com/alphagov/govuk-frontend/pull/1259))
 
-- Pull Request Title goes here
-
-  Description goes here (optional)
-
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
-
 ## 2.10.0 (Feature release)
 
 🆕 New features:

dist/VERSION.txt

@@ -1 +1 @@
-2.10.0
+2.11.0

package/components/button/_button.scss

@@ -3,12 +3,24 @@
 @import "../../helpers/all";
 
 @include govuk-exports("govuk/component/button") {
-
-  $govuk-button-colour: #00823b;
-  $govuk-button-hover-colour: darken($govuk-button-colour, 5%);
-  $govuk-button-shadow-colour: darken($govuk-button-colour, 15%);
+  // Primary button variables
+  $govuk-button-colour: #00823b; // sass-lint:disable no-color-literals
+  $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
+  $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
   $govuk-button-text-colour: govuk-colour("white");
 
+  // Secondary button variables
+  $govuk-secondary-button-colour: govuk-colour("grey-3");
+  $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
+  $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
+  $govuk-secondary-button-text-colour: govuk-colour("black");
+
+  // Warning button variables
+  $govuk-warning-button-colour: govuk-colour("red");
+  $govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%);
+  $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);
+  $govuk-warning-button-text-colour: govuk-colour("white");
+
   // Because the shadow (s0) is visually 'part of' the button, we need to reduce
   // the height of the button to compensate by adjusting its padding (s1) and
   // increase the bottom margin to include it (s2).
@@ -141,6 +153,64 @@
     }
   }
 
+  .govuk-button--secondary {
+    background-color: $govuk-secondary-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour;
+
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-secondary-button-text-colour;
+    }
+
+    // alphagov/govuk_template includes a specific a:link:focus selector
+    // designed to make unvisited links a slightly darker blue when focussed, so
+    // we need to override the text colour for that combination of selectors so
+    // so that unvisited links styled as buttons do not end up with dark blue
+    // text when focussed.
+    @include govuk-compatibility(govuk_template) {
+      &:link:focus {
+        color: $govuk-secondary-button-text-colour;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $govuk-secondary-button-hover-colour;
+    }
+  }
+
+  .govuk-button--warning {
+    background-color: $govuk-warning-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour;
+
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-warning-button-text-colour;
+    }
+
+    // alphagov/govuk_template includes a specific a:link:focus selector
+    // designed to make unvisited links a slightly darker blue when focussed, so
+    // we need to override the text colour for that combination of selectors so
+    // so that unvisited links styled as buttons do not end up with dark blue
+    // text when focussed.
+    @include govuk-compatibility(govuk_template) {
+      &:link:focus {
+        color: $govuk-warning-button-text-colour;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $govuk-warning-button-hover-colour;
+    }
+  }
+
   .govuk-button--start {
     @include govuk-typography-weight-bold;
     @include govuk-typography-responsive($size: 24, $override-line-height: 1);
@@ -176,5 +246,4 @@
     padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
     padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
   }
-
 }

package/components/fieldset/_fieldset.scss

@@ -4,12 +4,22 @@
 
 @include govuk-exports("govuk/component/fieldset") {
   .govuk-fieldset {
+    min-width: 0;
     margin: 0;
     padding: 0;
     border: 0;
     @include govuk-clearfix;
   }
 
+  // Fix for Firefox < 53
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=504622
+  @supports not (caret-color: auto) {
+    .govuk-fieldset,
+    x:-moz-any-link {
+      display: table-cell;
+    }
+  }
+
   .govuk-fieldset__legend {
     @include govuk-font($size: 19);
     @include govuk-text-colour;

package/components/footer/_footer.scss

@@ -208,17 +208,20 @@
     padding: 0;
     list-style: none;
     -webkit-column-gap: $govuk-gutter;
+       -moz-column-gap: $govuk-gutter;
             column-gap: $govuk-gutter; // Support: Columns
   }
 
   @include mq ($from: desktop) {
     .govuk-footer__list--columns-2 {
       -webkit-column-count: 2;
+         -moz-column-count: 2;
               column-count: 2; // Support: Columns
     }
 
     .govuk-footer__list--columns-3 {
       -webkit-column-count: 3;
+         -moz-column-count: 3;
               column-count: 3; // Support: Columns
     }
   }

package/components/summary-list/_summary-list.scss

@@ -80,6 +80,13 @@
     }
   }
 
+  // Expand width when value is last column (no action)
+  .govuk-summary-list__value:last-child {
+    @include govuk-media-query($from: tablet) {
+      width: 70%;
+    }
+  }
+
   .govuk-summary-list__value > p {
     margin-bottom: govuk-spacing(2);
   }
@@ -112,12 +119,39 @@
     border: 0;
   }
 
+  // No border on entire summary list
   .govuk-summary-list--no-border {
-    .govuk-summary-list__key,
-    .govuk-summary-list__value,
-    .govuk-summary-list__actions,
-    .govuk-summary-list__row {
+    @include govuk-media-query($until: tablet) {
+      .govuk-summary-list__row {
+        border: 0;
+      }
+    }
+
+    @include govuk-media-query($from: tablet) {
+      .govuk-summary-list__key,
+      .govuk-summary-list__value,
+      .govuk-summary-list__actions {
+        // Remove 1px border, add 1px height back on
+        padding-bottom: govuk-spacing(2) + 1px;
+        border: 0;
+      }
+    }
+  }
+
+  // No border on specific rows
+  .govuk-summary-list__row--no-border {
+    @include govuk-media-query($until: tablet) {
       border: 0;
     }
+
+    @include govuk-media-query($from: tablet) {
+      .govuk-summary-list__key,
+      .govuk-summary-list__value,
+      .govuk-summary-list__actions {
+        // Remove 1px border, add 1px height back on
+        padding-bottom: govuk-spacing(2) + 1px;
+        border: 0;
+      }
+    }
   }
 }

package/components/summary-list/template.njk

@@ -6,16 +6,23 @@
     {% endif -%}
   </a>
 {% endmacro -%}
+
+{# Determine if we need 2 or 3 columns #}
+{% set anyRowHasActions = false %}
+{% for row in params.rows %}
+  {% set anyRowHasActions = true if row.actions.items else anyRowHasActions %}
+{% endfor -%}
+
 <dl class="govuk-summary-list {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% for row in params.rows %}
-    <div class="govuk-summary-list__row">
+    <div class="govuk-summary-list__row {%- if row.classes %} {{ row.classes }}{% endif %}">
       <dt class="govuk-summary-list__key {%- if row.key.classes %} {{ row.key.classes }}{% endif %}">
         {{ row.key.html | safe if row.key.html else row.key.text }}
       </dt>
       <dd class="govuk-summary-list__value {%- if row.value.classes %} {{ row.value.classes }}{% endif %}">
         {{ row.value.html | indent(8) | trim | safe if row.value.html else row.value.text }}
       </dd>
-      {% if row.actions.items %}
+      {% if row.actions.items.length %}
         <dd class="govuk-summary-list__actions {%- if row.actions.classes %} {{ row.actions.classes }}{% endif %}">
           {% if row.actions.items.length == 1 %}
             {{ _actionLink(row.actions.items[0]) | indent(12) | trim }}
@@ -29,6 +36,9 @@
             </ul>
           {% endif %}
         </dd>
+      {% elseif anyRowHasActions %}
+        {# Add dummy column to extend border #}
+        <span class="govuk-summary-list__actions"></span>
       {% endif %}
     </div>
   {% endfor %}

package/helpers/_colour.scss

@@ -49,3 +49,25 @@
     @return map-get($org-colour, colour);
   }
 }
+
+/// Make a colour darker by mixing it with black
+///
+/// @param {Colour} $colour - colour to shade
+/// @param {Number} $percentage - percentage of `$colour` in returned color
+/// @return {Colour}
+/// @access public
+
+@function govuk-shade($colour, $percentage) {
+  @return mix(#000000, $colour, $percentage);
+}
+
+/// Make a colour lighter by mixing it with white
+///
+/// @param {Colour} $colour - colour to tint
+/// @param {Number} $percentage - percentage of `$colour` in returned color
+/// @return {Colour}
+/// @access public
+
+@function govuk-tint($colour, $percentage) {
+  @return mix(govuk-colour("white"), $colour, $percentage);
+}

package/helpers/_device-pixels.scss

@@ -29,7 +29,6 @@
 
 @mixin govuk-device-pixel-ratio($ratio: 2) {
   @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
-    only screen and (min--moz-device-pixel-ratio: $ratio),
     only screen and (     min-device-pixel-ratio: $ratio),
     only screen and (             min-resolution: #{($ratio*96)}dpi),
     only screen and (             min-resolution: #{$ratio}dppx) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "govuk-frontend",
   "description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "main": "all.js",
   "sass": "all.scss",
   "engines": {