govuk_admin_template 1.0.5 → 1.1.0

data/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 1.1.0
+
+* Upgrade to JQuery 1.11.1
+* Upgrade to Bootstrap 3.2
+
 # 1.0.5
 
 * Tweak to size of inputs when using input helper classes

data/app/assets/stylesheets/govuk_admin_template.scss

@@ -1,3 +1,4 @@
+@import 'govuk_admin_template/bootstrap_colour_overrides'; //Needs to be set before Bootstrap import
 @import 'bootstrap';
 @import 'govuk_admin_template/theme';
 @import 'govuk_admin_template/mixins';

data/app/assets/stylesheets/govuk_admin_template/bootstrap_colour_overrides.css.scss

@@ -0,0 +1,8 @@
+/*
+  Bootstrap 3.2 made gray-light darker for accessibility and contrast:
+  https://github.com/twbs/bootstrap/releases/tag/v3.2.0
+
+  This assumed gray-light was on a light background. We aren't always
+  using it in that way. Reset to the original value #999.
+*/
+$gray-light: lighten(#000, 60%);

data/app/views/govuk_admin_template/style_guide/index.html.erb

@@ -6,7 +6,7 @@
   </h1>
 </div>
 
-<p class="lead">Admin app UIs are powered by <a href="http://getbootstrap.com/css/">bootstrap 3.1</a>, using <a href="https://github.com/twbs/bootstrap-sass/tree/v3.1.0">bootstrap SASS</a> v3.1.0 (<a href="https://github.com/twbs/bootstrap-sass/blob/v3.1.0/vendor/assets/stylesheets/bootstrap/_mixins.scss">mixins</a>), but maintaining bootstrap 2 button styles. This guide documents how we use bootstrap, where the apps have diverged from default styles and any custom styles needed to fill in the gaps.</p>
+<p class="lead">Admin app UIs are powered by <a href="http://getbootstrap.com/css/">bootstrap 3.2</a>, using <a href="https://github.com/twbs/bootstrap-sass/tree/v3.2.0">bootstrap SASS</a> v3.2.0 (<a href="https://github.com/twbs/bootstrap-sass/blob/v3.2.0/assets/stylesheets/bootstrap/_mixins.scss">mixins</a>), but maintaining bootstrap 2 button styles. This guide documents how we use bootstrap, where the apps have diverged from default styles and any custom styles needed to fill in the gaps.</p>
 
 <h2>Grid</h2>
 <p class="lead">Apps use the <a href="http://getbootstrap.com/css/#grid">default bootstrap</a> <strong>12 column scaleable responsive grid</strong>.</p>
@@ -93,19 +93,34 @@
     <a href="#" class="btn btn-link">Link</a>
   </div>
 </div>
+<h3 class="add-vertical-margins">Which button style should be used</h3>
 <div class="row">
-  <p class="col-md-6 lead">Create and success actions use <code>btn-success</code>.</p>
+  <p class="col-md-6 lead">Start with <code>btn-default</code>. Buttons should always be the default grey unless there is a good reason otherwise. Buttons that initiate a user action (ie lead to a form, pop-up a modal) should be grey.</p>
+  <div class="col-md-6">
+    <a href="#" class="btn btn-default">
+      Open modal
+    </a>
+    <a href="#" class="btn btn-default">
+      Filter items
+    </a>
+  </div>
+</div>
+<div class="row">
+  <p class="col-md-6 lead">When submitting a form that will create or update items use <code>btn-success</code>.</p>
   <div class="col-md-6">
     <a href="#" class="btn btn-success">
-      Save mapping
+      Save item
     </a>
   </div>
 </div>
 <div class="row">
-  <p class="col-md-6 lead">When adding an item include an <code>icon-plus</code> icon.</p>
+  <p class="col-md-6 lead">When a form has a submit button and a cancel button they must be different with adequate space between them.</p>
   <div class="col-md-6">
-    <a href="#" class="btn btn-default">
-      <i class="glyphicon glyphicon-plus"></i> Add mapping
+    <a href="#" class="btn btn-default add-right-margin">
+      Cancel
+    </a>
+    <a href="#" class="btn btn-success">
+      Save item
     </a>
   </div>
 </div>
@@ -173,7 +188,7 @@
 
     <p>The second example shows a table with selectable rows. Selected rows highlight in yellow. The checkbox in the header selects all rows.</p>
   </div>
-  <ul class="col-md-6">
+  <div class="col-md-6">
     <table class="table table-bordered table-hover">
       <thead>
         <tr class="table-header">
@@ -183,17 +198,17 @@
           <th>Secondary header</th>
         </tr>
       </thead>
-    <tbody>
-      <tr>
-        <td>Typical row</td>
-      </tr>
-      <tr>
-        <td>Typical row</td>
-      </tr>
-    </tbody>
+      <tbody>
+        <tr>
+          <td>Typical row</td>
+        </tr>
+        <tr>
+          <td>Typical row</td>
+        </tr>
+      </tbody>
     </table>
 
-    <table class="table table-bordered table-hover" data-module="selectable-table">
+    <table class="table table-bordered" data-module="selectable-table">
       <thead>
         <tr class="table-header">
           <th></th>
@@ -225,7 +240,7 @@
         <td class="selectable-row">
           <div class="relative">
             <label>
-              <input type="checkbox" />
+              <input type="checkbox" class="js-toggle-row" />
             </label>
           </div>
         </td>
@@ -233,7 +248,44 @@
       </tr>
     </tbody>
     </table>
-  </ul>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-6 lead">
+    <p>Using the <code>filterable-table</code> <a href="https://github.com/alphagov/govuk_admin_template/blob/master/app/assets/javascripts/govuk-admin-template/modules/filterable_table.js">module</a> table rows can be filtered. The module performs a simple match against the content of each row, if there’s no match the row is hidden.</p>
+  </div>
+  <div class="col-md-6">
+    <table class="table table-bordered table-hover" data-module="filterable-table">
+      <thead>
+        <tr class="table-header">
+          <th>Primary header</th>
+          <th style="width: 80px">Number</th>
+        </tr>
+        <tr class="if-no-js-hide table-header-secondary">
+          <td colspan="2">
+            <form>
+              <label for="table-filter" class="rm">Filter organisations</label>
+              <input id="table-filter" type="text" class="form-control normal js-filter-table-input" placeholder="Filter table">
+            </form>
+          </td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Apples</td>
+          <td>100</td>
+        </tr>
+        <tr>
+          <td>Bananas</td>
+          <td>25</td>
+        </tr>
+        <tr>
+          <td>Peaches</td>
+          <td>13</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </div>
 <hr>
 
@@ -415,11 +467,11 @@
     </div>
   </div>
   <div class="col-md-4">
-    <div class="highlight highlight-turquoise">
-      <p class="big-message">Turquoise &amp; Live</p>
+    <div class="highlight highlight-turquoise add-bottom-margin">
+      <p class="big-message">Turquoise</p>
     </div>
     <div class="highlight highlight-orange">
-      <p class="big-message">Orange &amp; Pre-transition</p>
+      <p class="big-message">Orange</p>
     </div>
   </div>
 </div>
@@ -427,9 +479,9 @@
 
 <h2>No content</h2>
 <div class="row">
-  <p class="col-md-6 lead">A large but light style which applies to the empty state, eg when there are no mappings or hits. The bordered version mimics bootstrap table styles.</p>
+  <p class="col-md-6 lead">A large but light style which applies to the empty state. The bordered version mimics bootstrap table styles.</p>
   <div class="col-md-6">
-    <p class="no-content">No mappings available</p>
+    <p class="no-content">No items available</p>
     <p class="no-content no-content-bordered">Bordered message</p>
     <p class="no-content">A longer, multi-line no content message. Do labore et <a href="<%= @normal_link_href %>">dolore magna aliqua</a>.</p>
   </div>

data/lib/govuk_admin_template/version.rb

@@ -1,3 +1,3 @@
 module GovukAdminTemplate
-  VERSION = "1.0.5"
+  VERSION = "1.1.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_admin_template
 version: !ruby/object:Gem::Version
-  version: 1.0.5
+  version: 1.1.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-07-04 00:00:00.000000000 Z
+date: 2014-07-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -34,7 +34,7 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 3.1.0
+        version: 3.2.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -42,7 +42,7 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 3.1.0
+        version: 3.2.0.0
 - !ruby/object:Gem::Dependency
   name: jquery-rails
   requirement: !ruby/object:Gem::Requirement
@@ -50,7 +50,7 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 3.0.4
+        version: 3.1.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -58,7 +58,7 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 3.0.4
+        version: 3.1.1
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
@@ -139,6 +139,22 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 1.3.1
+- !ruby/object:Gem::Dependency
+  name: jasmine
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.0.2
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.0.2
 description: Styles, scripts and templates for GOV.UK admin applications
 email:
 - govuk-dev@digital.cabinet-office.gov.uk
@@ -155,6 +171,7 @@ files:
 - app/assets/stylesheets/govuk_admin_template/bootstrap-ie7.scss
 - app/assets/stylesheets/govuk_admin_template/style_guide.css.scss
 - app/assets/stylesheets/govuk_admin_template/navbar.css.scss
+- app/assets/stylesheets/govuk_admin_template/bootstrap_colour_overrides.css.scss
 - app/assets/stylesheets/govuk_admin_template/toggles.css.scss
 - app/assets/stylesheets/govuk_admin_template/base.css.scss
 - app/assets/stylesheets/govuk_admin_template/buttons.css.scss
@@ -202,7 +219,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 2116947858523364151
+      hash: 2496046958828964519
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -211,7 +228,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 2116947858523364151
+      hash: 2496046958828964519
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23