govuk_frontend_toolkit 0.43.2 → 0.44.0

data/README.md

@@ -8,6 +8,12 @@ Just include `govuk_frontend_toolkit` in your `Gemfile`. It
 automatically attaches itself to your asset path so the static/SCSS
 files will be available to the asset pipeline.
 
+### Development
+
+If you are installing from git, ensure you enable submodules like so:
+
+    gem 'govuk_frontend_toolkit', :git => "https://github.com/alphagov/govuk_frontend_toolkit_gem.git", :submodules => true
+
 You will need to check that the gem is included while in development. Often
 asset related gems are in a bundler group called `assets`. Old Rails projects
 do not inluded this in development by default so you need to ensure bundler is
@@ -20,7 +26,9 @@ included using the following lines at the top of the `/config/application.rb`:
       # Bundler.require(:default, :assets, Rails.env)
     end
 
-You will also need to ensure that the correct assets are precompiled for
+### Production
+
+You will need to ensure that the correct assets are precompiled for
 production. These are set using the variable `config.assets.precompile` in
 `/config/application.rb`. An example of what this may look like is:
 

data/app/assets/README.md

@@ -655,7 +655,7 @@ var test = new GOVUK.MultivariateTest({
 });
 ```
 
-If you have a complex test, it may be worth extending MultivariateTest with 
+If you have a complex test, it may be worth extending MultivariateTest with
 your own. Callbacks can be strings which will call a method of that name
 on the current object.
 
@@ -669,6 +669,35 @@ Takes these options:
 
 Full documentation on how to design multivariate tests, use the data in GA and construct hypothesis tests is on its way soon.
 
+## Primary Links
+
+`GOVUK.PrimaryList` hides elements in a list which don't have a supplied
+selector, they will then be shown when the user clicks. `GOVUK.primaryLinks` is
+a helper to add this behaviour to many elements.
+
+Example markup:
+
+```html
+<ul id="primary-list">
+  <li class="primary-item">Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
+```
+
+To add it to all lists which have items with the class `primary-item` use
+something like:
+
+```javascript
+GOVUK.primaryLinks.init('.primary-item');
+```
+
+Or to add it just to that list you could use:
+
+```javascript
+new GOVUK.PrimaryList($('#primary-list'), '.primary-item');
+```
+
 
 ## Licence
 

data/app/assets/javascripts/govuk/primary-links.js

@@ -0,0 +1,49 @@
+(function() {
+  "use strict";
+  window.GOVUK = window.GOVUK || {};
+
+  // Only show the first {n} items in a list, documentation is in the README.md
+  var PrimaryList = function(el, selector){
+    this.$el = $(el);
+    this.$extraLinks = this.$el.find('li:not('+selector+')');
+    // only hide more than one extra link
+    if(this.$extraLinks.length > 1){
+      this.addToggleLink();
+      this.hideExtraLinks();
+    }
+  }
+  PrimaryList.prototype = {
+    toggleText: function(){
+      if(this.$extraLinks.length > 1){
+        return '+'+ this.$extraLinks.length +' others';
+      } else {
+        return '+'+ this.$extraLinks.length +' other';
+      }
+    },
+    addToggleLink: function(){
+      this.$toggleLink = $('<a href="#">'+ this.toggleText() + '</a>')
+      this.$toggleLink.click($.proxy(this.toggleLinks, this));
+      this.$toggleLink.insertAfter(this.$el);
+    },
+    toggleLinks: function(e){
+      e.preventDefault();
+      this.$toggleLink.remove();
+      this.showExtraLinks();
+    },
+    hideExtraLinks: function(){
+      this.$extraLinks.addClass('visuallyhidden');
+    },
+    showExtraLinks: function(){
+      this.$extraLinks.removeClass('visuallyhidden');
+    }
+  };
+  GOVUK.PrimaryList = PrimaryList;
+
+  GOVUK.primaryLinks = {
+    init: function(selector){
+      $(selector).parent().each(function(i, el){
+        new GOVUK.PrimaryList(el, selector);
+      });
+    }
+  }
+}());

data/app/assets/spec/PrimaryLinksSpec.js

@@ -0,0 +1,49 @@
+describe('primary-links', function(){
+  var shortList, mediumList, longList;
+
+  beforeEach(function () {
+    shortList = $('<ul><li class="primary">one</li><li>two</li></ul>');
+    mediumList = $('<ul><li class="primary">one</li><li>two</li><li>three</li></ul>');
+    longList = $('<ul><li class="primary">one</li><li class="primary">two</li><li>three</li><li>four</li></ul>');
+  });
+
+  it('visually hides extra links', function(){
+    var list = new GOVUK.PrimaryList(mediumList, '.primary');
+    
+    expect(mediumList.find('.visuallyhidden').length).toBe(2);
+  });
+
+  it('creates appropriate toggle text', function(){
+    var short = new GOVUK.PrimaryList(shortList, '.primary');
+    var medium = new GOVUK.PrimaryList(mediumList, '.primary');
+    
+    expect(short.toggleText()).toEqual('+1 other');
+    expect(medium.toggleText()).toEqual('+2 others');
+  });
+
+  it('add a toggle link', function(){
+    var container = $('<div>').append(mediumList);
+    var list = new GOVUK.PrimaryList(mediumList, '.primary');
+
+    expect(container.find('a').length).toBe(1);
+  });
+
+  it('show extra links when toggled', function(){
+    var list = new GOVUK.PrimaryList(mediumList, '.primary');
+    var event = { preventDefault: function(){} };
+    spyOn(event, 'preventDefault');
+    spyOn(list, 'showExtraLinks');
+
+    list.toggleLinks(event);
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(list.showExtraLinks).toHaveBeenCalled();
+  });
+
+  it('only adds toggle if more than one extra link', function(){
+    var short = new GOVUK.PrimaryList(shortList, '.primary');
+    var medium = new GOVUK.PrimaryList(mediumList, '.primary');
+    
+    expect(shortList.find('.visuallyhidden').length).toBe(0);
+    expect(mediumList.find('.visuallyhidden').length).toBe(2);
+  });
+});

data/app/assets/stylesheets/_css3.scss

@@ -1,7 +1,7 @@
-/* CSS 3 Mixins
+// CSS 3 Mixins
+
+// Add them as you need them. This should let us manage vendor prefixes in one place.
 
-  Add them as you need them. This should let us manage vendor prefixes in one place.
- */
 
 @mixin border-radius($radius) {
   -webkit-border-radius: $radius;

data/app/assets/stylesheets/_shims.scss

@@ -1,20 +1,18 @@
-/* Cross-browser shims
+// Cross-browser shims
+// Ways of normalising properties across browsers.
 
-  Ways of normalising properties across browsers.
- */
 @import "_conditionals";
 
 // From: https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
 
-/* Usage:
-   @include inline-block
+// Usage:
+//
+// @include inline-block
+// or
+// @include inline-block("250px")
+//
+// which gives a min-height to the inline-block elements.
 
-   or
-
-   @include inline-block("250px")
-
-   which gives a min-height to the inline-block elements.
-*/
 
 @mixin inline-block($min-height: "") {
   display: -moz-inline-stack;
@@ -37,13 +35,12 @@
 }
 
 
-/* Contain floats usage:
-
-   .this-has-floated-children {
-     @extend %contain-floats;
-   }
+// Contain floats usage:
+//
+// .this-has-floated-children {
+//  @extend %contain-floats;
+// }
 
-*/
 
 %contain-floats {
   &:after {

data/app/assets/stylesheets/design-patterns/_buttons.scss

@@ -2,25 +2,22 @@
 @import '../_css3.scss';
 @import '../_conditionals.scss';
 
-/*
+// Mixin and defaults for making buttons on GOV.UK services.
 
-Mixin and defaults for making buttons on GOV.UK services.
+// For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
 
-For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
+// Example usage:
 
-Example usage:
+// .button{
+//   @include button;
+// }
+// .button-secondary{
+//   @include button($grey-3);
+// }
+// .button-warning{
+//   @include button($red);
+// }
 
-.button{
-  @include button;
-}
-.button-secondary{
-  @include button($grey-3);
-}
-.button-warning{
-  @include button($red);
-}
-
-*/
 
 @mixin button($colour: $button-colour){
   // Colour

data/app/assets/stylesheets/design-patterns/_media-player.scss

@@ -1,4 +1,4 @@
-/* Player overrides */
+// Player overrides
 
 @mixin media-player {
   display: block;

data/lib/govuk_frontend_toolkit/version.rb

@@ -1,3 +1,3 @@
 module GovUKFrontendToolkit
-  VERSION = "0.43.2"
+  VERSION = "0.44.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_frontend_toolkit
 version: !ruby/object:Gem::Version
-  version: 0.43.2
+  version: 0.44.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-02-18 00:00:00.000000000 Z
+date: 2014-03-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -203,6 +203,7 @@ files:
 - app/assets/images/player-icon-rewind.png
 - app/assets/images/player-icon-volume.png
 - app/assets/javascripts/govuk/multivariate-test.js
+- app/assets/javascripts/govuk/primary-links.js
 - app/assets/javascripts/govuk/stop-scrolling-at-footer.js
 - app/assets/javascripts/govuk_toolkit.js
 - app/assets/javascripts/stageprompt.js
@@ -210,6 +211,7 @@ files:
 - app/assets/jenkins.sh
 - app/assets/package.json
 - app/assets/spec/MultivariateTestSpec.js
+- app/assets/spec/PrimaryLinksSpec.js
 - app/assets/stylesheets/.gitkeep
 - app/assets/stylesheets/_colours.scss
 - app/assets/stylesheets/_conditionals.scss
@@ -238,7 +240,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -1878013936912249459
+      hash: 4141806898857661575
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -247,7 +249,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -1878013936912249459
+      hash: 4141806898857661575
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23