Release v0.0.31-alpha

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 Note: We're not following semantic versioning yet, we are going to talk about this soon.
 
-## Unreleased
+## 0.0.31-alpha (Breaking release)
 
 💥 Breaking changes:
 

dist/VERSION.txt

@@ -1 +1 @@
-0.0.30-alpha
+0.0.31-alpha

package/components/back-link/_back-link.scss

@@ -2,10 +2,10 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@include govuk-exports("back-link") {
+@include govuk-exports("govuk/component/back-link") {
 
   .govuk-back-link {
-    @include govuk-font-regular-16;
+    @include govuk-typography-responsive($govuk-font-16);
     @include govuk-link-common;
     @include govuk-link-style-text;
 

package/components/breadcrumbs/_breadcrumbs.scss

@@ -2,7 +2,7 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@include govuk-exports("breadcrumbs") {
+@include govuk-exports("govuk/component/breadcrumbs") {
 
   // Size of chevron (excluding border)
   $chevron-size: 7px;
@@ -94,6 +94,10 @@
         height: auto;
         border: 0;
         color: $chevron-border-colour;
+
+        // IE8 doesn't seem to like rendering pseudo-elements using @font-faces,
+        // so fall back to using another sans-serif font to render the chevron.
+        font-family: Arial, sans-serif;
       }
     }
 

package/components/button/_button.scss

@@ -2,7 +2,7 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@include govuk-exports("button") {
+@include govuk-exports("govuk/component/button") {
 
   // 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
@@ -37,6 +37,10 @@
     cursor: pointer;
     -webkit-appearance: none;
 
+    @include govuk-if-ie8 {
+      border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
+    }
+
     @include mq($from: tablet) {
       width: auto;
     }
@@ -76,6 +80,10 @@
       top: $button-shadow-size;
       -webkit-box-shadow: none;
               box-shadow: none;
+
+      @include govuk-if-ie8 {
+        border-bottom-width: 0;
+      }
     }
 
     // The following adjustments do not work for <input type="button"> as
@@ -150,12 +158,12 @@
     padding-bottom: $govuk-spacing-scale-2 - $govuk-border-width-form-element;
     padding-left: $govuk-spacing-scale-3;
 
-    background-image: govuk-file-url("icon-pointer.png");
+    background-image: govuk-image-url("icon-pointer.png");
     background-repeat: no-repeat;
     background-position: 100% 50%;
 
     @include govuk-device-pixel-ratio {
-      background-image: govuk-file-url("icon-pointer-2x.png");
+      background-image: govuk-image-url("icon-pointer-2x.png");
       background-size: 30px 19px;
     }
   }

package/components/checkboxes/_checkboxes.scss

@@ -7,7 +7,7 @@
 @import "../hint/hint";
 @import "../label/label";
 
-@include govuk-exports("checkboxes") {
+@include govuk-exports("govuk/component/checkboxes") {
   $govuk-checkboxes-size: $govuk-spacing-scale-7;
   $govuk-checkboxes-label-padding-left-right: $govuk-spacing-scale-3;
 

package/components/date-input/_date-input.scss

@@ -7,7 +7,7 @@
 @import "../hint/hint";
 @import "../label/label";
 
-@include govuk-exports("date-input") {
+@include govuk-exports("govuk/component/date-input") {
   .govuk-date-input {
     @include govuk-clearfix;
   }

package/components/details/_details.scss

@@ -2,7 +2,7 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@include govuk-exports("details") {
+@include govuk-exports("govuk/component/details") {
 
   .govuk-details {
     @include govuk-font-regular-19;

package/components/error-message/_error-message.scss

@@ -2,7 +2,7 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@include govuk-exports("error-message") {
+@include govuk-exports("govuk/component/error-message") {
   .govuk-error-message {
     @include govuk-font-bold-19;
 

package/components/error-summary/_error-summary.scss

@@ -4,7 +4,7 @@
 
 @import "../../core/lists";
 
-@include govuk-exports("error-summary") {
+@include govuk-exports("govuk/component/error-summary") {
 
   .govuk-error-summary {
     @include govuk-text-colour;

package/components/fieldset/_fieldset.scss

@@ -2,7 +2,7 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@include govuk-exports("fieldset") {
+@include govuk-exports("govuk/component/fieldset") {
   .govuk-fieldset {
     margin: 0;
     padding: 0;

package/components/file-upload/_file-upload.scss

@@ -6,7 +6,7 @@
 @import "../hint/hint";
 @import "../label/label";
 
-@include govuk-exports("file-upload") {
+@include govuk-exports("govuk/component/file-upload") {
   .govuk-file-upload {
     @include govuk-font-regular-19;
     @include govuk-text-colour;

package/components/footer/_footer.scss

@@ -4,16 +4,16 @@
 
 @import "../../helpers/typography";
 
-@include govuk-exports("footer") {
+@include govuk-exports("govuk/component/footer") {
 
-  $govuk-footer-background: $govuk-grey-3;
+  $govuk-footer-background: $govuk-canvas-background-colour;
   $govuk-footer-border-top: #a1acb2;
   $govuk-footer-border: $govuk-grey-2;
   $govuk-footer-text: #454a4c;
   $govuk-footer-link: $govuk-footer-text;
   $govuk-footer-link-hover: #171819;
 
-  // Based on the `govuk-file-url("govuk-crest-2x.png");` image dimensions.
+  // Based on the govuk-crest-2x.png image dimensions.
   $govuk-footer-crest-image-width-2x: 250px;
   $govuk-footer-crest-image-height-2x: 204px;
   // Half the 2x image so that it fits the regular 1x size.
@@ -115,9 +115,9 @@
     display: inline-block;
     min-width: $govuk-footer-crest-image-width;
     padding-top: ($govuk-footer-crest-image-height + $govuk-spacing-scale-2);
-    background-image: govuk-file-url("govuk-crest.png");
+    background-image: govuk-image-url("govuk-crest.png");
     @include govuk-device-pixel-ratio {
-      background-image: govuk-file-url("govuk-crest-2x.png");
+      background-image: govuk-image-url("govuk-crest-2x.png");
     }
     background-repeat: no-repeat;
     background-position: 50% 0%;

package/components/header/_header.scss

@@ -4,7 +4,7 @@
 
 @import "../../helpers/typography";
 
-@include govuk-exports("header") {
+@include govuk-exports("govuk/component/header") {
 
   $govuk-header-background: $govuk-black;
   $govuk-header-border-color: $govuk-blue;

package/components/hint/_hint.scss

@@ -2,7 +2,7 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@include govuk-exports("hint") {
+@include govuk-exports("govuk/component/hint") {
   .govuk-hint {
     @include govuk-font-regular-19;
 

package/components/input/_input.scss

@@ -6,7 +6,7 @@
 @import "../hint/hint";
 @import "../label/label";
 
-@include govuk-exports("input") {
+@include govuk-exports("govuk/component/input") {
   .govuk-input {
     @include govuk-font-regular-19;
     @include govuk-focusable;

package/components/inset-text/_inset-text.scss

@@ -2,7 +2,7 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@include govuk-exports("inset-text") {
+@include govuk-exports("govuk/component/inset-text") {
   .govuk-inset-text {
     @include govuk-font-regular-19;
     @include govuk-text-colour;
@@ -16,8 +16,6 @@
 
     border-left: $govuk-border-width-wide solid $govuk-border-colour;
 
-    font-family: $govuk-font-stack;
-
     :first-child {
       margin-top: 0;
     }

package/components/label/_label.scss

@@ -2,7 +2,7 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@include govuk-exports("label") {
+@include govuk-exports("govuk/component/label") {
   .govuk-label {
     @include govuk-font-regular-19;
     @include govuk-text-colour;

package/components/panel/_panel.scss

@@ -2,7 +2,7 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@include govuk-exports("panel") {
+@include govuk-exports("govuk/component/panel") {
 
   .govuk-panel {
     @include govuk-font-regular-19;

package/components/phase-banner/_phase-banner.scss

@@ -4,7 +4,7 @@
 
 @import "../tag/tag";
 
-@include govuk-exports("phase-banner") {
+@include govuk-exports("govuk/component/phase-banner") {
   .govuk-phase-banner {
     @include govuk-font-regular-16;
     @include govuk-text-colour;

package/components/radios/_radios.scss

@@ -7,7 +7,7 @@
 @import "../hint/hint";
 @import "../label/label";
 
-@include govuk-exports("radios") {
+@include govuk-exports("govuk/component/radios") {
   $govuk-radios-size: $govuk-spacing-scale-7;
   $govuk-radios-label-padding-left-right: $govuk-spacing-scale-3;
 

package/components/select/_select.scss

@@ -6,7 +6,7 @@
 @import "../hint/hint";
 @import "../label/label";
 
-@include govuk-exports("select") {
+@include govuk-exports("govuk/component/select") {
   .govuk-select {
     @include govuk-font-regular;
     @include govuk-typography-responsive(

package/components/skip-link/_skip-link.scss

@@ -2,12 +2,12 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@include govuk-exports("skip-link") {
+@include govuk-exports("govuk/component/skip-link") {
   .govuk-skip-link {
     @include govuk-visually-hidden-focusable;
     @include govuk-link-common;
     @include govuk-link-style-text;
-    @include govuk-font-regular-16;
+    @include govuk-typography-responsive($govuk-font-16);
 
     display: block;
     padding: $govuk-spacing-scale-2 $govuk-spacing-scale-3;

package/components/table/_table.scss

@@ -2,7 +2,7 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@include govuk-exports("table") {
+@include govuk-exports("govuk/component/table") {
   .govuk-table {
     @include govuk-font-regular-19;
     @include govuk-text-colour;

package/components/tag/_tag.scss

@@ -2,7 +2,7 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@include govuk-exports("tag") {
+@include govuk-exports("govuk/component/tag") {
   .govuk-tag {
     @include govuk-font-bold;
     @include govuk-typography-responsive(

package/components/textarea/_textarea.scss

@@ -6,7 +6,7 @@
 @import "../hint/hint";
 @import "../label/label";
 
-@include govuk-exports("textarea") {
+@include govuk-exports("govuk/component/textarea") {
   .govuk-textarea {
     @include govuk-font-regular;
     @include govuk-typography-responsive(

package/components/warning-text/_warning-text.scss

@@ -4,7 +4,7 @@
 
 @import "../../objects/shapes";
 
-@include govuk-exports("warning-text") {
+@include govuk-exports("govuk/component/warning-text") {
 
   .govuk-warning-text {
     @include govuk-font-regular-19;

package/core/_all.scss

@@ -1,5 +1,6 @@
 @import "links";
 @import "lists";
+@import "template";
 @import "typography";
 @import "prose-scope";
 @import "section-break";

package/core/_global-styles.scss

@@ -11,7 +11,7 @@
   }
 }
 
-@include govuk-exports("govuk-global-styles") {
+@include govuk-exports("govuk/core/global-styles") {
 
   @if $govuk-global-styles == true {
     @include govuk-global-styles;

package/core/_links.scss

@@ -1,4 +1,4 @@
-@include govuk-exports("links") {
+@include govuk-exports("govuk/core/links") {
 
   // We use a placeholder class here so that we can @extend from the prose scope
   // without also applying every other occurrence of the .govuk-link selector to

package/core/_lists.scss

@@ -1,4 +1,4 @@
-@include govuk-exports("lists") {
+@include govuk-exports("govuk/core/lists") {
 
   // We use a placeholder class here so that we can @extend from the prose scope
   // without also applying every other occurrence of the .govuk-list selector to

package/core/_prose-scope.scss

@@ -1,4 +1,4 @@
-@include govuk-exports("prose-scope") {
+@include govuk-exports("govuk/core/prose-scope") {
   .govuk-prose-scope {
 
     // @extend inheritance

package/core/_section-break.scss

@@ -1,4 +1,4 @@
-@include govuk-exports("section-break") {
+@include govuk-exports("govuk/core/section-break") {
 
   // We use placeholder classes here so that we can @extend from the prose scope
 

package/core/_template.scss

@@ -0,0 +1,16 @@
+@import "../settings/all";
+
+@include govuk-exports("govuk/core/template") {
+  // Set the overall page background color to the same colour
+  // as used by the footer to give the illusion of a long footer.
+  .govuk-template {
+    background-color: $govuk-canvas-background-colour;
+  }
+
+  .govuk-template__body {
+    // The default margins set by user-agents are not required since we have our own containers.
+    margin: 0;
+    // Set the overall body of the page back to the typical background colour.
+    background-color: $govuk-body-background-colour;
+  }
+}