Skip to content

Commit

Permalink
Merge pull request #1823 from alphagov/release-v3.7.0
Browse files Browse the repository at this point in the history
Release v3.7.0 🚀
  • Loading branch information
36degrees authored Jun 1, 2020
2 parents ba56dc2 + 9cc3871 commit 3932f5d
Show file tree
Hide file tree
Showing 105 changed files with 3,402 additions and 3,329 deletions.
17 changes: 9 additions & 8 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,21 @@

## Unreleased

## 3.7.0 (Feature release)

### New features

#### Add extra spacing between list items

If a [list](https://design-system.service.gov.uk/styles/typography/#lists) is hard to read because the items run across multiple lines, you can now [add extra spacing between list items](http://design-system.service.gov.uk/styles/typography/#adding-extra-spacing-between-list-items) using the new `govuk-list--spaced` class.

This was added in [pull request #1775: Add list--spaced modifier](https://github.com/alphagov/govuk-frontend/pull/1775).
This was added in [pull request #1775: Add list--spaced modifier](https://github.com/alphagov/govuk-frontend/pull/1775). Thanks to [@frankieroberto](https://github.com/frankieroberto) for raising this issue.

#### Use HTML for navigation items in the header

You can now use HTML for a navigation item in the [header](https://design-system.service.gov.uk/components/header/) component, using the new `html` option.

This was added in [pull request #1819: Add the ability to specify HTML for a navigation item](https://github.com/alphagov/govuk-frontend/pull/1819).
This was added in [pull request #1819: Add the ability to specify HTML for a navigation item](https://github.com/alphagov/govuk-frontend/pull/1819). Thanks to [@adamsilver](https://github.com/adamsilver).

#### Import settings, tools and helpers CSS in one line

Expand Down Expand Up @@ -43,7 +45,7 @@ For example:

Find out more about [importing CSS](https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#css).

This was added in [pull request #1804: Allow components to be imported without dependencies](https://github.com/alphagov/govuk-frontend/pull/1804).
This was added in [pull request #1804: Allow components to be imported without dependencies](https://github.com/alphagov/govuk-frontend/pull/1804). Thanks to [@kevindew](https://github.com/kevindew) for raising this issue.

#### Collapse breadcrumb component on mobile

Expand All @@ -52,7 +54,7 @@ You can now [collapse the breadcrumb component on mobile](https://design-system.
- shows only the first and last items
- does not wrap

This was added in [pull request #1754: Add collapseOnMobile breadcrumbs flag](https://github.com/alphagov/govuk-frontend/pull/1754).
This was added in [pull request #1754: Add collapseOnMobile breadcrumbs flag](https://github.com/alphagov/govuk-frontend/pull/1754). Thanks to [@vanitabarrett](https://github.com/vanitabarrett) and [@miaallers](https://github.com/miaallers).

#### Back links are easier to select

Expand All @@ -61,16 +63,16 @@ The [back link](https://design-system.service.gov.uk/components/back-link/) comp
- bigger, so it's easier to select if you're using a touch screen
- more consistent with the design of the breadcrumb component

This was added in [pull request #1753: Make back link arrow consistent with breadcrumb component](https://github.com/alphagov/govuk-frontend/pull/1753).
This was added in [pull request #1753: Make back link arrow consistent with breadcrumb component](https://github.com/alphagov/govuk-frontend/pull/1753). Thanks to [@vanitabarrett](https://github.com/vanitabarrett) and [@miaallers](https://github.com/miaallers).


### Deprecated features

#### Importing from the `core` and `overrides` layers without `base`

If you import specific files from the `core` or `overrides` layers, you now need to import `node_modules/govuk-frontend/govuk/base` first.
If you import specific files from the `core` or `overrides` layers, you’ll now see a deprecation warning when compiling Sass if you do not import `node_modules/govuk-frontend/govuk/base` first.

For example:
To fix the warning, import `node_modules/govuk-frontend/govuk/base` first. For example:

```scss
@import "node_modules/govuk-frontend/govuk/base";
Expand All @@ -88,7 +90,6 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests:

- [#1778: Fix accordion underline hover state being removed when hovering plus/minus symbol](https://github.com/alphagov/govuk-frontend/pull/1778)
- [#1765: Import textarea from character count](https://github.com/alphagov/govuk-frontend/pull/1765)
- [#1753: Make backlink arrow consistent with breadcrumb component](https://github.com/alphagov/govuk-frontend/pull/1753)
- [#1796: Standardise accordion section headings font size (reduce height of section headings on mobile)](https://github.com/alphagov/govuk-frontend/pull/1796)


Expand Down
2 changes: 1 addition & 1 deletion dist/VERSION.txt
Original file line number Diff line number Diff line change
@@ -1 +1 @@
3.6.0
3.7.0
3 changes: 0 additions & 3 deletions dist/govuk-frontend-3.6.0.min.css

This file was deleted.

3 changes: 3 additions & 0 deletions dist/govuk-frontend-3.7.0.min.css

Large diffs are not rendered by default.

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion dist/govuk-frontend-ie8-3.6.0.min.css

This file was deleted.

1 change: 1 addition & 0 deletions dist/govuk-frontend-ie8-3.7.0.min.css

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions package/govuk/_base.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import "settings/all";
@import "tools/all";
@import "helpers/all";
2 changes: 1 addition & 1 deletion package/govuk/all.js
Original file line number Diff line number Diff line change
Expand Up @@ -891,7 +891,7 @@ Accordion.prototype.initHeaderAttributes = function ($headerWrapper, index) {
icon.className = this.iconClass;
icon.setAttribute('aria-hidden', 'true');

$heading.appendChild(icon);
$button.appendChild(icon);
};

// When section toggled, set and store state
Expand Down
4 changes: 1 addition & 3 deletions package/govuk/all.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
@import "settings/all";
@import "tools/all";
@import "helpers/all";
@import "base";

@import "core/all";
@import "objects/all";
Expand Down
60 changes: 31 additions & 29 deletions package/govuk/components/_all.scss
Original file line number Diff line number Diff line change
@@ -1,29 +1,31 @@
@import "accordion/accordion";
@import "back-link/back-link";
@import "breadcrumbs/breadcrumbs";
@import "button/button";
@import "checkboxes/checkboxes";
@import "character-count/character-count";
@import "summary-list/summary-list";
@import "date-input/date-input";
@import "details/details";
@import "error-message/error-message";
@import "error-summary/error-summary";
@import "fieldset/fieldset";
@import "file-upload/file-upload";
@import "footer/footer";
@import "hint/hint";
@import "header/header";
@import "input/input";
@import "inset-text/inset-text";
@import "label/label";
@import "panel/panel";
@import "phase-banner/phase-banner";
@import "tabs/tabs";
@import "tag/tag";
@import "radios/radios";
@import "select/select";
@import "skip-link/skip-link";
@import "table/table";
@import "textarea/textarea";
@import "warning-text/warning-text";
@import "../base";

@import "accordion/index";
@import "back-link/index";
@import "breadcrumbs/index";
@import "button/index";
@import "checkboxes/index";
@import "character-count/index";
@import "summary-list/index";
@import "date-input/index";
@import "details/index";
@import "error-message/index";
@import "error-summary/index";
@import "fieldset/index";
@import "file-upload/index";
@import "footer/index";
@import "hint/index";
@import "header/index";
@import "input/index";
@import "inset-text/index";
@import "label/index";
@import "panel/index";
@import "phase-banner/index";
@import "tabs/index";
@import "tag/index";
@import "radios/index";
@import "select/index";
@import "skip-link/index";
@import "table/index";
@import "textarea/index";
@import "warning-text/index";
210 changes: 2 additions & 208 deletions package/govuk/components/accordion/_accordion.scss
Original file line number Diff line number Diff line change
@@ -1,208 +1,2 @@
@import "../../settings/all";
@import "../../tools/all";
@import "../../helpers/all";


@include govuk-exports("govuk/component/accordion") {

$govuk-accordion-link-colour: $govuk-link-colour;
$govuk-accordion-link-hover-colour: govuk-colour("light-blue");
$govuk-accordion-border-width: 3px;

.govuk-accordion {
@include govuk-responsive-margin(6, "bottom");
}

// Borders between accordion sections
.govuk-accordion__section {
padding-top: govuk-spacing(3);
}

.govuk-accordion__section-header {
padding-top: govuk-spacing(3);
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);
display: inline-block;
margin-bottom: 0;
padding-top: govuk-spacing(3);
}

.govuk-accordion__section-summary {
margin-top: govuk-spacing(2);
margin-bottom: 0;
}

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

// JavaScript enabled
.js-enabled {

.govuk-accordion {
// Border at the bottom of the whole accordion
border-bottom: 1px 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;
}

// This is styled to look like a link not a button
.govuk-accordion__open-all {
@include govuk-font($size: 16);
position: relative;
z-index: 1;
margin: 0;
padding: 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;
}
}

// 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;
color: $govuk-accordion-link-colour;
cursor: pointer;
}

// 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-header:hover {
border-top-color: $govuk-accordion-link-colour;
box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
}
}

// 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: inherit;
background: none;
text-align: left;
cursor: pointer;
-webkit-appearance: none;

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

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

// 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) {
text-decoration: underline;
}

// 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;
}
}

.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;
}
}
}
@import "../../base";
@import "./index";
Loading

0 comments on commit 3932f5d

Please sign in to comment.