govuk_frontend_toolkit 1.3.0 → 1.4.0

data/app/assets/Gruntfile.js

@@ -4,7 +4,7 @@ module.exports = function(grunt) {
       javascripts: {
         src: [
           'node_modules/jquery-browser/lib/jquery.js',
-          'javascripts/**/*.js',
+          'javascripts/**/*.js'
         ],
         options: {
           specs: 'spec/*Spec.js',

data/app/assets/README.md

@@ -605,55 +605,68 @@ The button text colour is set by the mixin to either light or dark, depending on
 
 If you're applying these styles to non form elements, adding a class of 'disabled' to the element will emulate the disabled button style.
 
-### <a id="alpha-beta"></a>Alpha/Beta
 
-Mixins for creating alpha/beta banners and tags for services on GOV.UK
+### <a id="alpha-beta"></a> Phase banner
 
-##### Description
+A mixin to create a GOV.UK Phase banner, with alpha/beta tag inside.
+
+#### Description
 
 `@mixin phase-banner($state)`
-`@mixin phase-tag($state)`
 
-##### Parameters
+`$state` is either `alpha` or `beta`.
 
-`$state` either `alpha` or `beta`. This will set the background colour of the element to the appropriate colour.
+`$state` sets the background colour of the phase tag to the appropriate alpha or beta colour.
 
-##### Usage - Alpha/Beta banners
+##### Phase banner - Alpha
 
-    .alpha-banner  {
+    .phase-banner  {
       @include phase-banner(alpha);
     }
 
-    <div class="alpha-banner">
-      <div class="outer-block">
-        <div class="inner-block">
-          <strong>ALPHA:</strong> This is a prototype
-        </div>
-      </div>
+    <div class="phase-banner">
+      <p>
+        <strong class="phase-tag">ALPHA</strong>
+        <span>This is a new service – your <a href="#">feedback</a> will help us to improve it.</span>
+      </p>
     </div>
 
-    .beta-banner  {
+##### Phase banner - Beta
+
+    .phase-banner  {
       @include phase-banner(beta);
     }
 
-    <div class="beta-banner">
-      <div class="outer-block">
-        <div class="inner-block">
-          <strong>BETA:</strong> This is a trial service
-        </div>
-      </div>
+    <div class="phase-banner">
+      <p>
+        <strong class="phase-tag">BETA</strong>
+        <span>This is a new service – your <a href="#">feedback</a> will help us to improve it.</span>
+      </p>
     </div>
 
+### <a id="phase-tags"></a> Phase tags
 
-##### Usage - Alpha/Beta tags
+A mixin to create an alpha/beta tag.
+
+#### Description
+
+`@mixin phase-tag($state)`
+
+`$state` is either `alpha` or `beta`.
+
+`$state` sets the background colour of the phase tag to the appropriate alpha or beta colour.
+
+##### Phase tag - Alpha
 
     .alpha-tag{
       @include phase-tag(alpha);
     }
     <h2>
-      Apply using the new service <span class="beta-tag">ALPHA</span>
+      Apply using the new service <span class="alpha-tag">ALPHA</span>
     </h2>
 
+##### Phase tag - Beta
+
     .beta-tag{
       @include phase-tag(beta);
     }

data/app/assets/spec/MultivariateTestSpec.js

@@ -83,7 +83,7 @@ describe("MultivariateTest", function() {
         cohorts: {
           foo: {html: "foo"},
           bar: {html: "bar"}
-        },
+        }
       });
       expect($el.html()).toEqual('foo');
     });
@@ -100,7 +100,7 @@ describe("MultivariateTest", function() {
         cohorts: {
           foo: {callback: fooSpy},
           bar: {callback: barSpy}
-        },
+        }
       });
       expect(barSpy).toHaveBeenCalled();
     });
@@ -131,7 +131,7 @@ describe("MultivariateTest", function() {
         cohorts: {
           foo: {callback: fooSpy},
           bar: {callback: barSpy}
-        },
+        }
       });
       if (GOVUK.cookie.argsForCall[1][1] == 'foo') {
         expect(fooSpy).toHaveBeenCalled();

data/app/assets/stylesheets/design-patterns/_alpha-beta.scss

@@ -3,57 +3,73 @@
 @import "../_shims";
 @import "../_grid_layout";
 
-@mixin phase-banner($state: alpha) {
-  padding-top: 8px;
-  padding-bottom: 8px;
-
-  @if $state == alpha {
-    background-color: $alpha-colour;
-  } @else if $state == beta {
-    background-color: $beta-colour;
-  }
+// Phase banner usage:
+//
+// .phase-banner {
+//    @include phase-banner($state: beta);
+// }
 
-  // Outer block sets a max width
-  .outer-block {
-    @include outer-block;
-  }
-
-  // Inner block sets gutters to align content with header and footer
-  .inner-block {
-    @include inner-block;
+@mixin phase-banner($state: alpha) {
+  padding: 10px 0 8px 0;
+  @include media(tablet) {
+    padding-bottom: 10px;
   }
+  border-bottom: 1px solid $border-colour;
 
-  // No need to set a max-width for content inside .inner-block
   p {
     margin: 0;
     color: $banner-text-colour;
     @include core-16;
   }
 
-  a, a:link, a:visited, a:active {
-    color: $banner-text-colour;
+  .phase-tag {
+    @include phase-tag($state);
   }
 
-  a:hover {
-    color: $banner-text-colour;
+  span {
+    @include inline-block;
+    width: 75%;
+    vertical-align: top;
+
+    @include media(tablet) {
+      width: auto;
+      vertical-align: baseline;
+    }
   }
 }
 
+// Phase tag usage:
+//
+// Alpha
+// .phase-tag {
+//    @include phase-tag;
+// }
+//
+// Beta
+// .phase-tag {
+//    @include phase-tag(beta);
+// }
+
 @mixin phase-tag($state: alpha) {
   @include inline-block;
+  vertical-align: top;
 
-  @if $state == alpha {
-    background-color: $alpha-colour;
-  } @else if $state == beta {
-    background-color: $beta-colour;
+  @include media(tablet){
+    vertical-align: baseline;
   }
 
-  color: #fff;
+  margin: 0 8px 0 0;
+  padding: 2px 5px 0;
+
   @include bold-16($line-height: 20/16);
   text-transform: uppercase;
   letter-spacing: 1px;
   text-decoration: none;
 
-  margin: 3px 10px 0 5px;
-  padding: 2px 5px 0;
+  color: #fff;
+  @if $state == alpha {
+    background-color: $alpha-colour;
+  } @else if $state == beta {
+    background-color: $beta-colour;
+  }
 }

data/lib/govuk_frontend_toolkit/version.rb

@@ -1,3 +1,3 @@
 module GovUKFrontendToolkit
-  VERSION = "1.3.0"
+  VERSION = "1.4.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_frontend_toolkit
 version: !ruby/object:Gem::Version
-  version: 1.3.0
+  version: 1.4.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-06-05 00:00:00.000000000 Z
+date: 2014-06-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -264,7 +264,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -1772834152994469322
+      hash: -3563452542867821047
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -273,7 +273,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -1772834152994469322
+      hash: -3563452542867821047
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23