Merge pull request #500 from alphagov/v3.1.0

Bump version to v3.1.0
alphagov · Jun 16, 2017 · 7a860c7 · 7a860c7
2 parents f14eb23 + 08d80db
commit 7a860c7
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 75 deletions.
diff --git a/packages/govuk-elements-sass/CHANGELOG.md b/packages/govuk-elements-sass/CHANGELOG.md
@@ -1,3 +1,17 @@
+# 3.1.0
+
+- Split the list of partials imported by GOV.UK elements into two further files - elements and frontend-toolkit. This supports npm-sass, where the frontend toolkit dependencies are imported separately ([PR #489](https://github.com/alphagov/govuk_elements/pull/489)).
+- Add a new class `.body-text` for use inside legends, for text to accompany radio buttons or checkboxes - either 'select one', or 'select all that apply'. Ensure legends or elements within legends have margins in webkit browsers ([PR #484](https://github.com/alphagov/govuk_elements/pull/484)).
+- Move the breadcrumb so it sits outside the main element ([PR #478](https://github.com/alphagov/govuk_elements/pull/478))
+- Constrain error summary boxes to 2/3 of the page width ([PR #477](https://github.com/alphagov/govuk_elements/pull/477))
+- Remove the right padding from the last column of items in a table, also remove color set for table headers and cells, to allow users to change colour settings ([PR #482](https://github.com/alphagov/govuk_elements/pull/482)
+- Align table captions to the left ([PR #476](https://github.com/alphagov/govuk_elements/pull/482)).
+- Add guidance for use of table captions ([PR #488](https://github.com/alphagov/govuk_elements/pull/488)).
+- Fix unnecessary float and width 100% for `.form-section` and `.form-group` ([PR #487](https://github.com/alphagov/govuk_elements/pull/487)).
+- Fix incorrect margin above the last panel in a group ([PR #498](https://github.com/alphagov/govuk_elements/pull/498)).
+- Add guidance for the mininum text size to be used with the highlight box on confimation boxes ([PR #481](https://github.com/alphagov/govuk_elements/pull/481)).
+- Update govuk_template_jinja to 0.22.0 ([PR #493](https://github.com/alphagov/govuk_elements/pull/493)).
+
 # 3.0.3
 
 - Increase the size of the text in the highlight box - used for confirmation pages ([PR #451](https://github.com/alphagov/govuk_elements/pull/451))

diff --git a/packages/govuk-elements-sass/VERSION.txt b/packages/govuk-elements-sass/VERSION.txt
@@ -1 +1 @@
-3.0.3
+3.1.0
diff --git a/packages/govuk-elements-sass/package.json b/packages/govuk-elements-sass/package.json
@@ -1,6 +1,6 @@
 {
   "name": "govuk-elements-sass",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "GOVUK elements Sass files",
   "repository": "alphagov/govuk_elements",
   "license": "MIT",

diff --git a/packages/govuk-elements-sass/public/sass/_elements.scss b/packages/govuk-elements-sass/public/sass/_elements.scss
@@ -0,0 +1,31 @@
+// GOV.UK elements
+
+@import "elements/helpers";                       // Helper functions and classes
+
+// Generic (normalize/reset.css)
+@import "elements/reset";
+
+// Base (unclassed HTML elements)
+// These are predefined by govuk_template
+// If you're not using govuk_template, uncomment the line below.
+// @import "elements/govuk-template-base";        // Base styles set by GOV.UK template
+
+// Objects (unstyled design patterns)
+@import "elements/layout";                        // Main content container. Grid layout - rows and column widths
+
+// Components (chunks of UI)
+@import "elements/elements-typography";           // Typography
+@import "elements/buttons";                       // Buttons
+@import "elements/icons";                         // Icons - numbered steps, calendar, search
+@import "elements/lists";                         // Lists - numbered, bulleted
+@import "elements/tables";                        // Tables - regular, numeric
+@import "elements/details";                       // Details summary
+@import "elements/panels";                        // Panels with a left grey border
+@import "elements/forms";                         // Form - wrappers, inputs, labels
+@import "elements/forms/form-multiple-choice";    // Custom radio buttons and checkboxes
+@import "elements/forms/form-date";               // Date of birth pattern
+@import "elements/forms/form-validation";         // Errors and validation
+@import "elements/breadcrumbs";                   // Breadcrumbs
+@import "elements/phase-banner";                  // Alpha and beta banners and tags
+@import "elements/components";                    // GOV.UK prefixed styles - blue highlighted box
+@import "elements/shame";                         // Hacks and workarounds that will go away eventually
diff --git a/packages/govuk-elements-sass/public/sass/_frontend-toolkit.scss b/packages/govuk-elements-sass/public/sass/_frontend-toolkit.scss
@@ -0,0 +1,23 @@
+// GOV.UK front end toolkit
+// Sass variables, mixins and functions
+// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets
+
+// Settings (variables)
+@import "colours";                                // Colour variables
+@import "font_stack";                             // Font family variables
+@import "measurements";                           // Widths and gutter variables
+
+// Mixins
+@import "conditionals";                           // Media query mixin
+@import "device-pixels";                          // Retina image mixin
+@import "grid_layout";                            // Basic grid layout mixin
+@import "typography";                             // Core bold and heading mixins, also external links
+@import "shims";                                  // Inline block mixin, clearfix placeholder
+
+// Mixins to generate components (chunks of UI)
+@import "design-patterns/alpha-beta";
+@import "design-patterns/buttons";
+@import "design-patterns/breadcrumbs";
+
+// Functions
+@import "url-helpers";                            // Function to output image-url, or prefixed path (Rails and Compass only)
diff --git a/packages/govuk-elements-sass/public/sass/_govuk-elements.scss b/packages/govuk-elements-sass/public/sass/_govuk-elements.scss
@@ -1,55 +1,5 @@
-// GOV.UK front end toolkit
-// Sass variables, mixins and functions
-// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets
+// Import GOV.UK front end toolkit dependencies
+@import "frontend-toolkit";
 
-// Settings (variables)
-@import "colours";                                // Colour variables
-@import "font_stack";                             // Font family variables
-@import "measurements";                           // Widths and gutter variables
-
-// Mixins
-@import "conditionals";                           // Media query mixin
-@import "device-pixels";                          // Retina image mixin
-@import "grid_layout";                            // Basic grid layout mixin
-@import "typography";                             // Core bold and heading mixins, also external links
-@import "shims";                                  // Inline block mixin, clearfix placeholder
-
-// Mixins to generate components (chunks of UI)
-@import "design-patterns/alpha-beta";
-@import "design-patterns/buttons";
-@import "design-patterns/breadcrumbs";
-
-// Functions
-@import "url-helpers";                            // Function to output image-url, or prefixed path (Rails and Compass only)
-
-// GOV.UK elements
-
-@import "elements/helpers";                       // Helper functions and classes
-
-// Generic (normalize/reset.css)
-@import "elements/reset";
-
-// Base (unclassed HTML elements)
-// These are predefined by govuk_template
-// If you're not using govuk_template, uncomment the line below.
-// @import "elements/govuk-template-base";        // Base styles set by GOV.UK template
-
-// Objects (unstyled design patterns)
-@import "elements/layout";                        // Main content container. Grid layout - rows and column widths
-
-// Components (chunks of UI)
-@import "elements/elements-typography";           // Typography
-@import "elements/buttons";                       // Buttons
-@import "elements/icons";                         // Icons - numbered steps, calendar, search
-@import "elements/lists";                         // Lists - numbered, bulleted
-@import "elements/tables";                        // Tables - regular, numeric
-@import "elements/details";                       // Details summary
-@import "elements/panels";                        // Panels with a left grey border
-@import "elements/forms";                         // Form - wrappers, inputs, labels
-@import "elements/forms/form-multiple-choice";    // Custom radio buttons and checkboxes
-@import "elements/forms/form-date";               // Date of birth pattern
-@import "elements/forms/form-validation";         // Errors and validation
-@import "elements/breadcrumbs";                   // Breadcrumbs
-@import "elements/phase-banner";                  // Alpha and beta banners and tags
-@import "elements/components";                    // GOV.UK prefixed styles - blue highlighted box
-@import "elements/shame";                         // Hacks and workarounds that will go away eventually
+// Import GOV.UK elements
+@import "elements";
diff --git a/packages/govuk-elements-sass/public/sass/elements/_elements-typography.scss b/packages/govuk-elements-sass/public/sass/elements/_elements-typography.scss
@@ -135,7 +135,8 @@ main {
 }
 
 // Text
-p {
+p,
+.body-text {
   margin-top: em(5, 16);
   margin-bottom: em(20, 16);
 
@@ -146,6 +147,10 @@ p {
 
 }
 
+.body-text {
+  display: block;
+}
+
 // Lede, or intro text
 .lede {
   @include core-24;

diff --git a/packages/govuk-elements-sass/public/sass/elements/_forms.scss b/packages/govuk-elements-sass/public/sass/elements/_forms.scss
@@ -20,6 +20,11 @@ fieldset {
   width: 100%;
 }
 
+// Hack to let legends or elements within legends have margins in webkit browsers
+legend {
+  overflow: hidden;
+}
+
 // Fix left hand gap in IE7 and below
 @include ie-lte(7) {
   legend {
@@ -36,14 +41,14 @@ textarea {
 // 2. Form wrappers
 // ==========================================================================
 
-// Form section is used to wrap .form-group and has twice its margin
-.form-section {
+.form-section,
+.form-group {
   @extend %contain-floats;
   @include box-sizing(border-box);
+}
 
-  float: left;
-  width: 100%;
-
+// Form section is used to wrap .form-group and has twice its margin
+.form-section {
   margin-bottom: $gutter;
 
   @include media(tablet) {
@@ -53,12 +58,6 @@ textarea {
 
 // Form group is used to wrap label and input pairs
 .form-group {
-  @extend %contain-floats;
-  @include box-sizing(border-box);
-
-  float: left;
-  width: 100%;
-
   margin-bottom: $gutter-half;
 
   @include media(tablet) {
@@ -103,9 +102,8 @@ textarea {
 
 // Used for the 'or' in between block label options
 .form-block {
-  @extend %contain-floats;
   float: left;
-  width: 100%;
+  clear: left;
 
   margin-top: -5px;
   margin-bottom: 5px;
@@ -163,11 +161,16 @@ textarea {
 // scss-lint:disable QualifyingElement
 input.form-control,
 textarea.form-control {
-  // Remove inner shadow
+  // Disable inner shadow and remove rounded corners
   -webkit-appearance: none;
-  // Remove rounded corners
   border-radius: 0;
 }
+
+textarea.form-control {
+  // Disable opacity and background image for Firefox
+  opacity: 1;
+  background-image: none;
+}
 // scss-lint:enable QualifyingElement
 
 

diff --git a/packages/govuk-elements-sass/public/sass/elements/_panels.scss b/packages/govuk-elements-sass/public/sass/elements/_panels.scss
@@ -49,12 +49,13 @@
 
 // The last panel in a group
 .form-group .panel-border-narrow:last-child {
-  margin-top: 10px;
+  margin-top: 0;
   margin-bottom: 0;
 }
 
 // For inline panels
-.inline .panel-border-narrow {
+.inline .panel-border-narrow,
+.inline .panel-border-narrow:last-child {
   margin-top: 10px;
   margin-bottom: 0;
 }

diff --git a/packages/govuk-elements-sass/public/sass/elements/_tables.scss b/packages/govuk-elements-sass/public/sass/elements/_tables.scss
@@ -12,14 +12,18 @@ table {
     padding: em(12, 19) em(20, 19) em(9, 19) 0;
 
     text-align: left;
-    color: $black;
     border-bottom: 1px solid $border-colour;
   }
 
   th {
     font-weight: 700;
   }
 
+  td:last-child,
+  th:last-child {
+    padding-right: 0;
+  }
+
   // Right align table header cells and table cells with a numeric class
   .numeric {
     text-align: right;
@@ -30,6 +34,10 @@ table {
   td.numeric {
     font-family: $toolkit-font-stack-tabular;
   }
+
+  caption {
+    text-align: left;
+  }
 }
 
 .table-font-xsmall {