govuk_admin_template 6.7.0 → 6.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d4fc0dd6edbaa646b7bec8a7fdb6d339bca0ffefe933f031402af6a7496b63ed
-  data.tar.gz: 3cd7238926adf16a7ca60141e2df86472d80863aa61b1d4df5f1846ff566f79e
+  metadata.gz: 6e75f271807c94207f7e9842d7ac03a4f5fc857533a8d2aeee7be6f0645e8d07
+  data.tar.gz: 9e75c7162d072ed39a29ce90cd7037ca3aad8b3890a11f4ab93e9f28939cd480
 SHA512:
-  metadata.gz: c5e7e1fd8816003f5ce43ed1fbae13083d6a2aed54b0977674b228fd4d30650154d6562c7be601fb16475698980376561710b5a5ce28c4907982ec02f8ab4bde
-  data.tar.gz: 8fc142625c840bf6bf7a0bab2bb5b408f2fbee99d68bf9036041bab23e5df3425942d006339019ad44a2a3130629d292a2c97f9717f1f84a3b55f50ac6bf32f3
+  metadata.gz: a11f7e71d2ec53e1f704714a5996478153077c9282c41850ee6256faa6a776bec444436824027d50a9cb1a2b3bcfb3703d52ccd799ac58c80de6118638a65758
+  data.tar.gz: 748d12a8f4319a5cbfd4c716336141b315088add35e5ce8d57b9d9e710a0e0b80c48ae204a657997fcf4db2bf6b35edc0f17bccf71162399719c492dddf867ab

data/CHANGELOG.md

@@ -1,3 +1,19 @@
+# 6.9.0
+
+* Rails 7 compatibility: use `Time#to_fs` instead of deprecated use of `Time#to_s`
+* Bump minimum supported Rails version to 6
+* Fix broken 'Crown Copyright' link in the layout template page footer
+
+# 6.8.1
+
+* Ensure labels have sufficient colour contrast
+
+# 6.8.0
+
+* Replace the development dependency govuk-lint with rubocop-govuk
+* Fix colour contrast issues flagged by WAVE Web Accessibility Evaluation Tool
+* Ensure govspeak guidance can be navigated to via keyboard tabbing
+
 # 6.7.0
 
 * Update bootstrap-sass dependency to 3.4.1 (from 3.3.5.1)

data/CSS.md

@@ -9,20 +9,20 @@ CSS in the gem follows two conventions:
 ## Available helper classes
 
 Firstly, the admin styles are based on Bootstrap:
-* [Bootstrap CSS](http://getbootstrap.com/css/)
-* [Bootstrap Components](http://getbootstrap.com/components/)
+* [Bootstrap CSS](https://getbootstrap.com/docs/3.4/css/)
+* [Bootstrap Components](https://getbootstrap.com/docs/3.4/components/)
 
 For admin components, see the admin style guide (`/style-guide` in your app).
 
 ### Hide and show content
-[toggle.css.scss](app/assets/stylesheets/govuk_admin_template/_toggles.css.scss)
+See: [toggles.scss](app/assets/stylesheets/govuk_admin_template/_toggles.scss)
 
 Class   | Purpose
 ------  |--------
 `hide` | Hide content from all users, including screenreaders
 `if-no-js-hide` | Hide from users without Javascript
 `if-js-hide` | Hide from users with Javascript
-`rm` | [Hide visually](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility) but keep available to screenreaders
+`rm` | [Hide visually](https://snook.ca/archives/html_and_css/hiding-content-for-accessibility) but keep available to screenreaders
 `if-js-rm` | Hide visually from users with Javascript
 
 ### Margin helpers
@@ -35,7 +35,7 @@ Rather than creating a class purely to remove or add margins (many Bootstrap sty
 
 The mixins don’t include `!important` by default, but can be added as a parameter:
 
-```sass
+```scss
 .class {
   @include add-top-margin;
   @include add-top-margin('!important');
@@ -61,7 +61,7 @@ Like the margin helpers, the padding classes include `!important` so they’ll a
 <h3 class="add-bottom-padding"></h3>
 ```
 
-```sass
+```scss
 .class {
   @include add-top-padding;
   @include add-top-padding('!important');
@@ -105,7 +105,7 @@ Class   | Purpose
 `inline-block` | Display inline-block
 
 ### Tables
-[tables.css.scss](app/assets/stylesheets/govuk_admin_template/_tables.css.scss)
+See: [tables.scss](app/assets/stylesheets/govuk_admin_template/_tables.scss)
 
 Class   | Purpose
 ------  |--------
@@ -114,7 +114,7 @@ Class   | Purpose
 
 ### SASS Variables
 
-Along with Bootstrap’s many [mixins](https://github.com/twbs/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_mixins.scss) and [variables](http://getbootstrap.com/customize/#less-variables), the admin gem comes with [some of its own](app/assets/stylesheets/govuk_admin_template/_theme.css.scss).
+Along with Bootstrap’s many [mixins](https://github.com/twbs/bootstrap-sass/blob/v3.4.1/assets/stylesheets/bootstrap/_mixins.scss) and [variables](https://github.com/twbs/bootstrap-sass/blob/v3.4.1/assets/stylesheets/bootstrap/_variables.scss), the admin gem comes with [some of its own](app/assets/stylesheets/govuk_admin_template/_theme.scss).
 
 Class   | Purpose
 ------  |--------

data/JAVASCRIPT.md

@@ -39,7 +39,7 @@ The simplest of modules looks like this:
 
 ## Writing modules
 
-Whilst this isn’t prescriptive, it helps if modules look and behave in a similar manner. Modules should live within your app’s `app\assets\javascripts\modules` directory.
+Whilst this isn’t prescriptive, it helps if modules look and behave in a similar manner. Modules should live within your app’s `app/assets/javascripts/modules` directory.
 
 ### Use `js-` prefixed classes for interaction hooks
 

data/README.md

@@ -4,7 +4,7 @@
 
 ---
 
-Styles, scripts and templates wrapped up in a gem for getting up and running with [Bootstrap](http://getbootstrap.com) based backend admin apps.
+Styles, scripts and templates wrapped up in a gem for getting up and running with [Bootstrap 3.4](https://getbootstrap.com/docs/3.4/) based backend admin apps.
 
 This gem provides (via a Rails engine):
 * jQuery
@@ -35,10 +35,10 @@ Firstly, include the gem in your Gemfile, pinned to the appropriate version and
 
 ```ruby
 # Gemfile
-gem 'govuk_admin_template', '~> 3.3'
+gem 'govuk_admin_template', '~> 6.8'
 ```
 
-At the top of `application.scss` include the styles (this provides all the mixins and variables from the gem as well as from bootstrap — [bootstrap mixins](https://github.com/twbs/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_mixins.scss)):
+At the top of `application.scss` include the styles (this provides all the mixins and variables from the gem as well as from bootstrap — [bootstrap mixins](https://github.com/twbs/bootstrap-sass/blob/v3.4.1/assets/stylesheets/bootstrap/_mixins.scss)):
 ```css
 /* application.scss */
 @import 'govuk_admin_template';
@@ -71,11 +71,13 @@ You will also need to include your styles and javascripts:
 Note that `jquery` and `jquery_ujs` are already imported by `govuk_admin_template`,
 so you should remove them from your `app/assets/javascripts/application.js`. This may
 cause your jasmine tests to fail, so you'll need to include `assets/govuk-admin-template.js`
-in your `spec/javascripts/support/jasmine.yml` like this:
+in your `spec/support/jasmine-browser.json` like this:
 
-```yaml
-src_files:
-  - assets/govuk-admin-template.js
+```json
+"srcFiles": [
+  "govuk-admin-template-*.js",
+  "application-*.js"
+]
 ```
 
 It is recommended that the style guide is also made available within your app at the route `/style-guide`. Add this to your `config/routes.rb` file:
@@ -87,7 +89,7 @@ if Rails.env.development?
 end
 ```
 
-The gem source includes a [dummy app](spec/dummy) configured to behave like an app using the gem. If you have the gem checked out it can be run from the `spec\dummy` directory using `rails s`.
+The gem source includes a [dummy app](spec/dummy) configured to behave like an app using the gem. If you have the gem checked out it can be run from the `spec/dummy` directory using `rails s`.
 
 For Javascript usage, available modules and writing modules, see the [Javascript guide](JAVASCRIPT.md).
 
@@ -118,7 +120,7 @@ To use this configuration:
 0. Add an initializer in `config/initializers/simple_form.rb` containing the
    following:
 
-```
+```ruby
 SimpleForm.setup do |config|
   GovukAdminTemplate.setup_simple_form(config)
 end
@@ -130,7 +132,7 @@ specific customisations are required.
 
 ### Content blocks
 
-The gem [uses nested layouts](http://guides.rubyonrails.org/layouts_and_rendering.html#using-nested-layouts) for customisation.
+The gem [uses nested layouts](https://guides.rubyonrails.org/layouts_and_rendering.html#using-nested-layouts) for customisation.
 
 `content_for`     | Description
 ---------------   | -------------
@@ -164,19 +166,19 @@ The [gem includes](lib/govuk_admin_template/engine.rb) date and time formats whi
 
 ```ruby
 # 1 January 2013
-date.to_s(:govuk_date)
+date.to_fs(:govuk_date)
 
 # 1:15pm, 1 January 2013
-time.to_s(:govuk_date)
+time.to_fs(:govuk_date)
 
 # 1 Jan 2013
-date.to_s(:govuk_date_short)
+date.to_fs(:govuk_date_short)
 
 # 1:15pm, 1 Jan 2013
-time.to_s(:govuk_date_short)
+time.to_fs(:govuk_date_short)
 
 # 1:15pm
-time.to_s(:govuk_time)
+time.to_fs(:govuk_time)
 ```
 
 ### Environment indicators
@@ -225,7 +227,7 @@ We support `:success`, `:info`, `:warning` and `:danger`:
 
 ![Flash types](docs/flash-types.png)
 
-In Rails 4, you can register your types to allow them to be used as arguments
+You can register your types to allow them to be used as arguments
 to `redirect_to`.
 
 ```ruby
@@ -241,13 +243,15 @@ redirect_to :back, danger: "This didn't work."
 
 ## Development
 
-Clone the repository and run `bundle`.
+1. Clone the repository
+2. Run `bundle install`
+3. Run `yarn install`
 
 The source files are in the [app](app) directory. Unlike other GOVUK frontend gems, there is no compile step. The app directory is included in the gem and hooked in as a Rails engine.
 
 While developing it may be helpful to see how the gem will render. The dummy app at [spec/dummy](spec/dummy) is configured to act like an application using the gem and can be started from that directory using `rails s`. Changes will show immediately. The tests also run against this app.
 
-The dummy app’s rake tasks have been loaded into the gem’s task list under the namespace `dummy_app` for convenience.
+The dummy app’s rake tasks have been loaded into the gem’s task list under the namespace `app` for convenience – e.g. `bundle exec rake app:assets:precompile`
 
 ### Running tests
 
@@ -261,13 +265,13 @@ Layout and nested layouts are tested using RSpec and Capybara:
 bundle exec rake spec
 ```
 
-Javascript is tested using Jasmine and the [Jasmine gem](https://github.com/pivotal/jasmine-gem). Tests can be run either in the browser or on the command line via the dummy app’s tasks:
+Javascript is tested using Jasmine and [jasmine-browser-runner](https://jasmine.github.io/setup/browser.html). Tests can be run either in the browser or on the command line:
 ```sh
 # browser
-bundle exec rake dummy_app:jasmine
+yarn run jasmine:browser
 
 # command line
-bundle exec rake dummy_app:jasmine:ci
+yarn run jasmine:ci
 ```
 
 ## Publishing

data/app/assets/stylesheets/govuk_admin_template/_base.scss

@@ -276,13 +276,13 @@ a.list-group-item {
 
 .link-muted,
 .link-muted:visited {
-  color: $gray-light;
+  color: $gray-dark;
   text-decoration: underline;
 }
 
 .link-muted:hover,
 .link-muted:focus {
-  color: $gray;
+  color: #000;
 }
 
 .link-inherit,
@@ -304,7 +304,7 @@ a.list-group-item {
   font-size: 65%;
   font-weight: normal;
   line-height: 1.5;
-  color: $gray-light;
+  color: $gray;
   display: block;
 }
 
@@ -360,7 +360,7 @@ a.list-group-item {
 }
 
 .no-content {
-  color: lighten($gray-light, 20%); // Large text needs a lighter colour for balance
+  color: $gray;
   @extend %large-and-spaced;
 }
 

data/app/assets/stylesheets/govuk_admin_template/_bootstrap_colour_overrides.scss

@@ -1,3 +1,7 @@
+$black: #000;
+$gray-dark: #444;
+$blue: #1d70b8;
+
 /*
   Bootstrap 3.2 made gray-light darker for accessibility and contrast:
   https://github.com/twbs/bootstrap/releases/tag/v3.2.0
@@ -5,4 +9,41 @@
   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%);
+
+$gray-light: lighten($black, 60%);
+
+/*
+  Updates a bunch of copy that used to be gray to black for things like labels.
+*/
+$text-color: $black;
+
+/*
+  Updates the input to black so it contrasts with the light gray background.
+*/
+$input-color: $black;
+
+/*
+  Updates muted text to gray so it contrasts with the light gray background.
+*/
+$text-muted: $gray-dark;
+
+/*
+  Updates text in the breadcrumbs to use a darker gray to fix contrast issues.
+*/
+$breadcrumb-active-color: $gray-dark;
+
+/*
+  Updates the spans in headers to use a darker gray to fix contrast issues.
+*/
+$headings-small-color: $gray-dark;
+
+/*
+  Updates the disabled pagination links to use a darker gray to fix contrast issues.
+*/
+$pagination-disabled-color: $gray-dark;
+
+/*
+  Updates the default link to colour to a the same colour used in the
+  GOVUK design system. This fixes some contrast issues.
+*/
+$link-color: $blue;

data/app/assets/stylesheets/govuk_admin_template/_bootstrap_overrides.scss

@@ -1,5 +1,18 @@
 @import 'govuk_admin_template/buttons'; // overrides bootstrap buttons
 
+$govuk-tag-dark-grey: #383f43;
+$govuk-tag-light-gray: #eeefef;
+$govuk-tag-mid-blue: #1d70b8;
+$govuk-tag-white: #fff;
+$govuk-tag-dark-green: #005a30;
+$govuk-tag-light-green: #cce2d8;
+$govuk-tag-dark-blue: #144e81;
+$govuk-tag-light-blue: #d2e2f1;
+$govuk-tag-dark-yellow: #594d00;
+$govuk-tag-light-yellow: #fff7bf;
+$govuk-tag-dark-red: #942514;
+$govuk-tag-light-red: #f6d7d2;
+
 /*
   The admin gem's navbar has a bottom margin, for correct spacing
   when the page-header class isn't used. To account for this reduce
@@ -19,8 +32,40 @@
 .lead {
   font-weight: normal;
   color: #555;
+}
+
+// Overrides the lables to use same colour scheme as the GOVUK design system
+
+.label-default {
+  color: $govuk-tag-dark-grey;
+  background: $govuk-tag-light-gray;
+}
+
+.label-primary {
+  color: $govuk-tag-white;
+  background: $govuk-tag-mid-blue;
+}
+
+.label-success {
+  color: $govuk-tag-dark-green;
+  background: $govuk-tag-light-green;
+}
+
+.label-info {
+  color: $govuk-tag-dark-blue;
+  background: $govuk-tag-light-blue;
+}
+
+.label-warning {
+  color: $govuk-tag-dark-yellow;
+  background: $govuk-tag-light-yellow;
+}
+
+.label-danger {
+  color: $govuk-tag-dark-red;
+  background: $govuk-tag-light-red;
+}
 
-  &.text-muted {
-    color: $gray-light;
-  }
+.label {
+  font-size: 80%;
 }

data/app/assets/stylesheets/govuk_admin_template/_nav_list.scss

@@ -20,7 +20,7 @@
     font-size: 11px;
     font-weight: bold;
     line-height: $line-height-computed;
-    color: $gray-light;
+    color: $gray;
     text-transform: uppercase;
   }
 
@@ -30,6 +30,11 @@
   }
 }
 
+.nav-tabs .badge {
+  color: #fff;
+  background: #666;
+}
+
 .nav-list > li > a,
 .nav-list .nav-header {
   margin-left:  -15px;

data/app/assets/stylesheets/govuk_admin_template/_navbar.scss

@@ -116,3 +116,8 @@ header .navbar-header {
   background-color: $dev-color;
   color: #000;
 }
+
+.sidebar-nav .badge {
+  color: #fff;
+  background: #666;
+}

data/app/controllers/govuk_admin_template/style_guide_controller.rb

@@ -1,7 +1,7 @@
 module GovukAdminTemplate
   class StyleGuideController < ApplicationController
     def index
-      @normal_link_href = "#{request.original_url}##{Time.now.utc.to_i}"
+      @normal_link_href = "#{request.original_url}##{Time.zone.now.utc.to_i}"
       @visited_link_href = request.original_url
     end
   end

data/app/views/govuk_admin_template/_govspeak_help.html.erb

@@ -5,7 +5,7 @@
   <h2>Formatting help</h2>
   <%= yield :format_specific_help %>
   <h3>
-    <a data-toggle="collapse" data-target="#govspeak-headings">
+    <a data-toggle="collapse" href="#govspeak-headings">
       Headings
     </a>
   </h3>
@@ -18,7 +18,7 @@
   </div>
 
   <h3>
-    <a data-toggle="collapse" data-target="#govspeak-links">
+    <a data-toggle="collapse" href="#govspeak-links">
       Links
     </a>
   </h3>
@@ -54,7 +54,7 @@
   </div>
 
   <h3>
-    <a data-toggle="collapse" data-target="#govspeak-bullets">
+    <a data-toggle="collapse" href="#govspeak-bullets">
       Bullets
     </a>
   </h3>
@@ -67,7 +67,7 @@
   </div>
 
   <h3>
-    <a data-toggle="collapse" data-target="#govspeak-numbered-list">
+    <a data-toggle="collapse" href="#govspeak-numbered-list">
       Numbered list
     </a>
   </h3>
@@ -81,7 +81,7 @@
   </div>
 
   <h3>
-    <a data-toggle="collapse" data-target="#govspeak-priority-list">
+    <a data-toggle="collapse" href="#govspeak-priority-list">
       Priority list
     </a>
   </h3>
@@ -98,7 +98,7 @@
   </div>
 
   <h3>
-    <a data-toggle="collapse" data-target="#govspeak-legislative-list">
+    <a data-toggle="collapse" href="#govspeak-legislative-list">
       Legislative list
     </a>
   </h3>
@@ -120,7 +120,7 @@
   </div>
 
   <h3>
-    <a data-toggle="collapse" data-target="#govspeak-tables">
+    <a data-toggle="collapse" href="#govspeak-tables">
       Tables
     </a>
   </h3>
@@ -139,7 +139,7 @@
   </div>
 
   <h3>
-    <a data-toggle="collapse" data-target="#govspeak-cta">
+    <a data-toggle="collapse" href="#govspeak-cta">
       Call to action
     </a>
   </h3>
@@ -150,21 +150,18 @@
   </div>
 
   <h3>
-    <a data-toggle="collapse" data-target="#govspeak-abbreviations-and-acronyms">
+    <a data-toggle="collapse" href="#govspeak-abbreviations-and-acronyms">
       Abbreviations and acronyms
     </a>
   </h3>
   <div class="collapse" id="govspeak-abbreviations-and-acronyms">
-    <pre>Example content containing DWP and EU acronyms.
-
-  *[EU]: European Union
-  *[DWP]: Department for Work and Pensions</pre>
+    <pre>*[DWP]: Department for Work and Pensions</pre>
     <p>Text found in content which matches what’s in the brackets <code>[ ]</code> (eg DWP), will have the full text (Department for Work and Pensions) available to screenreaders and when hovering: <abbr title="Department for Work and Pensions">DWP</abbr>. The markdown code will not be displayed.</p>
     <p>List abbreviation markdown at the end.</p>
   </div>
 
   <h3>
-    <a data-toggle="collapse" data-target="#govspeak-blockquotes">
+    <a data-toggle="collapse" href="#govspeak-blockquotes">
       Blockquotes
     </a>
   </h3>
@@ -178,7 +175,7 @@
   </div>
 
   <h3>
-    <a data-toggle="collapse" data-target="#govspeak-addresses">
+    <a data-toggle="collapse" href="#govspeak-addresses">
       Addresses
     </a>
   </h3>
@@ -192,7 +189,7 @@
   </div>
 
   <h3>
-    <a data-toggle="collapse" data-target="#govspeak-footnotes">
+    <a data-toggle="collapse" href="#govspeak-footnotes">
       Footnotes
     </a>
   </h3>

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

@@ -6,10 +6,10 @@
   </h1>
 </div>
 
-<p class="lead">Admin app UIs are powered by <a href="http://getbootstrap.com/css/">bootstrap 3.3.2</a>, using <a href="https://github.com/twbs/bootstrap-sass/tree/v3.3.3">bootstrap SASS</a> v3.3.3 (<a href="https://github.com/twbs/bootstrap-sass/blob/v3.3.3/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="https://getbootstrap.com/docs/3.4/">Bootstrap 3.4</a>, using <a href="https://github.com/twbs/bootstrap-sass/tree/v3.4.1">Bootstrap SASS</a> v3.4.1 (<a href="https://github.com/twbs/bootstrap-sass/blob/v3.4.1/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 id="grid">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>
+<p class="lead">Apps use the <a href="https://getbootstrap.com/docs/3.4/css/#grid">default bootstrap</a> <strong>12 column scaleable responsive grid</strong>.</p>
 <div class="row add-bottom-margin">
   <div class="grid-example col-md-2">col-md-2</div>
   <div class="grid-example col-md-4">col-md-4</div>
@@ -26,7 +26,7 @@
 <div class="row">
   <div class="col-md-6 lead">
     <p>
-      Based on the <a href="http://govuk-elements.herokuapp.com/form-elements/#form-toggle-content">GOV.UK elements pattern</a>, ticking a checkbox or selecting a radio element can toggle the display of further content or fields.
+      Based on the <a href="https://govuk-elements.herokuapp.com/form-elements/#form-toggle-content">GOV.UK elements pattern</a>, ticking a checkbox or selecting a radio element can toggle the display of further content or fields.
     </p>
     <pre class="add-top-margin">&lt;div class=&quot;checkbox&quot; data-module=&quot;toggle-checkbox&quot;&gt;
   &lt;label&gt;
@@ -73,7 +73,7 @@
 <h3 id="forms-input-widths">Input widths</h3>
 <div class="row">
   <div class="col-md-6 lead">
-    <p>Bootstrap 3 inputs always <a href="http://getbootstrap.com/css/#forms">extend to the size of their container</a>. The recommendation from Bootstrap is to wrap form elements with grid classes. Sometimes this isn’t suitable, for instance if a page isn’t using a grid.</p>
+    <p>Bootstrap 3 inputs always <a href="https://getbootstrap.com/docs/3.4/css/#forms">extend to the size of their container</a>. The recommendation from Bootstrap is to wrap form elements with grid classes. Sometimes this isn’t suitable, for instance if a page isn’t using a grid.</p>
     <p>The gem includes classes to restrict the width of inputs based on column sizes: <code>input-md-x</code> (1 — 11)</p>
   </div>
   <div class="col-md-6">
@@ -192,13 +192,13 @@
     <blockquote>
       <dl class="remove-bottom-margin">
         <dt class="add-label-margin"><code>:govuk_date</code></dt>
-        <dd><%= halloween.to_s(:govuk_date) %><br />
-          <%= halloween.to_time.to_s(:govuk_date) %></dd>
+        <dd><%= halloween.to_fs(:govuk_date) %><br />
+          <%= halloween.to_time.to_fs(:govuk_date) %></dd>
         <dt class="add-top-margin add-label-margin"><code>:govuk_date_short</code></dt>
-        <dd><%= halloween.to_s(:govuk_date_short) %><br />
-          <%= halloween.to_time.to_s(:govuk_date_short) %></dd>
+        <dd><%= halloween.to_fs(:govuk_date_short) %><br />
+          <%= halloween.to_time.to_fs(:govuk_date_short) %></dd>
         <dt class="add-top-margin add-label-margin"><code>:govuk_time</code></dt>
-        <dd><%= halloween.to_time.to_s(:govuk_time) %></dd>
+        <dd><%= halloween.to_time.to_fs(:govuk_time) %></dd>
       </dl>
     </blockquote>
   </section>
@@ -261,7 +261,7 @@
 <h3 id="tables-filterable-tables">Filterable tables</h3>
 <div class="row">
   <div class="col-md-6 lead">
-    <p>Using the <a href="https://github.com/alphagov/govuk_admin_template/blob/master/app/assets/javascripts/govuk-admin-template/modules/filterable_table.js">filterable-table module</a> and the <a href="https://github.com/alphagov/govuk_admin_template/tree/master/app/views/govuk_admin_template/_table_filter.html.erb">table_filter partial</a> any table 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>
+    <p>Using the <a href="https://github.com/alphagov/govuk_admin_template/blob/main/app/assets/javascripts/govuk-admin-template/modules/filterable_table.js">filterable-table module</a> and the <a href="https://github.com/alphagov/govuk_admin_template/blob/main/app/views/govuk_admin_template/_table_filter.html.erb">table_filter partial</a> any table 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>
     <p>If the class <code>js-open-on-submit</code> is added to a link within a row, then the first link visible with that class will be opened when the user hits <code>ENTER</code>.</p>
     <pre class="add-top-margin">&lt;table class="table table-bordered" data-module="filterable-table"&gt;
   &lt;thead&gt;
@@ -403,7 +403,7 @@
 <h2 id="nav-lists">Nav lists</h2>
 <div class="row">
   <p class="col-md-4 lead">
-    <a href="http://stackoverflow.com/questions/18281636/what-replaces-nav-lists-in-bootstrap-3">Bootstrap 3 removed</a> the <code>nav-list</code> classes and <a href="http://getbootstrap.com/2.3.2/components.html#navs">design pattern</a>. For backwards compatibility these styles have been put back, but it’s advised to avoid this pattern.
+    <a href="https://stackoverflow.com/questions/18281636/what-replaces-nav-lists-in-bootstrap-3">Bootstrap 3 removed</a> the <code>nav-list</code> classes and <a href="https://getbootstrap.com/2.3.2/components.html#navs">design pattern</a>. For backwards compatibility these styles have been put back, but it’s advised to avoid this pattern.
   </p>
   <div class="col-md-4">
     <div class="well sidebar-nav">

data/app/views/layouts/govuk_admin_template.html.erb

@@ -101,7 +101,7 @@
       </main>
       <footer class="page-footer">
         <%= yield :footer_top %>
-        <a class="inherit" href="http://www.nationalarchives.gov.uk/information-management/our-services/crown-copyright.htm">&copy; Crown Copyright</a>
+        <a class="inherit" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">&copy; Crown Copyright</a>
         <% if content_for?(:footer_version) %>
           <span class="pull-right">Version: <%= yield :footer_version %></span>
         <% end %>

data/config/routes.rb

@@ -1,3 +1,3 @@
 GovukAdminTemplate::Engine.routes.draw do
-  root :to => 'govuk_admin_template/style_guide#index'
+  root to: "govuk_admin_template/style_guide#index"
 end

data/lib/govuk_admin_template/config.rb

@@ -6,7 +6,7 @@ module GovukAdminTemplate
   module Config
     # Name of your application
     mattr_accessor :app_title
-    @@app_title = "GOV.UK"
+    @app_title = "GOV.UK"
 
     # Show flash-messages
     # Default: false

data/lib/govuk_admin_template/engine.rb

@@ -1,37 +1,40 @@
 module GovukAdminTemplate
   class Engine < ::Rails::Engine
-    require 'bootstrap-sass'
-    require 'jquery-rails'
-
-    initializer 'govuk_admin_template.assets.precompile' do |app|
-      app.config.assets.precompile += %w(lte-ie8.js govuk-admin-template.js)
-      app.config.assets.precompile += %w(govuk_admin_template/favicon-development.png govuk_admin_template/favicon-test.png govuk_admin_template/favicon-integration.png
-                                          govuk_admin_template/favicon-preview.png govuk_admin_template/favicon-production.png govuk_admin_template/favicon.png)
-
+    require "bootstrap-sass"
+    require "jquery-rails"
+
+    initializer "govuk_admin_template.assets.precompile" do |app|
+      app.config.assets.precompile += %w[lte-ie8.js govuk-admin-template.js]
+      app.config.assets.precompile += %w[govuk_admin_template/favicon-development.png
+                                         govuk_admin_template/favicon-test.png
+                                         govuk_admin_template/favicon-integration.png
+                                         govuk_admin_template/favicon-preview.png
+                                         govuk_admin_template/favicon-production.png
+                                         govuk_admin_template/favicon.png]
     end
 
     # User friendly GOV.UK date formats, based on:
     # https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#dates
     # https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#times
-    initializer 'govuk_admin_template.date_formats' do |app|
+    initializer "govuk_admin_template.date_formats" do |_app|
       # 1 January 2013
-      Date::DATE_FORMATS[:govuk_date] = '%-e %B %Y'
+      Date::DATE_FORMATS[:govuk_date] = "%-e %B %Y"
 
       # 1 Jan 2013
-      Date::DATE_FORMATS[:govuk_date_short] = '%-e %b %Y'
+      Date::DATE_FORMATS[:govuk_date_short] = "%-e %b %Y"
 
       # 1:15pm, 1 January 2013
-      Time::DATE_FORMATS[:govuk_date] = '%-I:%M%P, %-e %B %Y'
+      Time::DATE_FORMATS[:govuk_date] = "%-I:%M%P, %-e %B %Y"
 
       # 1:15pm, 1 Jan 2013
-      Time::DATE_FORMATS[:govuk_date_short] = '%-I:%M%P, %-e %b %Y'
+      Time::DATE_FORMATS[:govuk_date_short] = "%-I:%M%P, %-e %b %Y"
 
       # 1:15pm
-      Time::DATE_FORMATS[:govuk_time] = '%-I:%M%P'
+      Time::DATE_FORMATS[:govuk_time] = "%-I:%M%P"
     end
 
     initializer "govuk_admin_template.view_helpers" do
-      ActionView::Base.send :include, ViewHelpers
+      ActionView::Base.include ViewHelpers
     end
   end
 end

data/lib/govuk_admin_template/simple_form.rb

@@ -38,40 +38,40 @@ module GovukAdminTemplate
       b.use :error, wrap_with: { tag: :span, class: :error }
     end
 
-    config.wrappers :bootstrap, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+    config.wrappers :bootstrap, tag: "div", class: "form-group", error_class: "has-error" do |b|
       b.use :html5
       b.use :placeholder
-      b.use :label, class: 'control-label'
-      b.wrapper tag: 'div' do |ba|
+      b.use :label, class: "control-label"
+      b.wrapper tag: "div" do |ba|
         ba.use :input
-        ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
-        ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+        ba.use :error, wrap_with: { tag: "span", class: "help-inline" }
+        ba.use :hint,  wrap_with: { tag: "p", class: "help-block" }
       end
     end
 
-    config.wrappers :prepend, tag: 'div', class: "form-group", error_class: 'has-error' do |b|
+    config.wrappers :prepend, tag: "div", class: "form-group", error_class: "has-error" do |b|
       b.use :html5
       b.use :placeholder
       b.use :label
-      b.wrapper tag: 'div', class: 'controls' do |input|
-        input.wrapper tag: 'div', class: 'input-prepend' do |prepend|
+      b.wrapper tag: "div", class: "controls" do |input|
+        input.wrapper tag: "div", class: "input-prepend" do |prepend|
           prepend.use :input
         end
-        input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
-        input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
+        input.use :hint,  wrap_with: { tag: "span", class: "help-block" }
+        input.use :error, wrap_with: { tag: "span", class: "help-inline" }
       end
     end
 
-    config.wrappers :append, tag: 'div', class: "form-group", error_class: 'has-error' do |b|
+    config.wrappers :append, tag: "div", class: "form-group", error_class: "has-error" do |b|
       b.use :html5
       b.use :placeholder
       b.use :label
-      b.wrapper tag: 'div', class: 'controls' do |input|
-        input.wrapper tag: 'div', class: 'input-append' do |append|
+      b.wrapper tag: "div", class: "controls" do |input|
+        input.wrapper tag: "div", class: "input-append" do |append|
           append.use :input
         end
-        input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
-        input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
+        input.use :hint,  wrap_with: { tag: "span", class: "help-block" }
+        input.use :error, wrap_with: { tag: "span", class: "help-inline" }
       end
     end
 
@@ -85,13 +85,13 @@ module GovukAdminTemplate
     config.boolean_style = :inline
 
     # Default class for buttons
-    config.button_class = 'btn'
+    config.button_class = "btn"
 
     # Default tag used for error notification helper.
     config.error_notification_tag = :div
 
     # CSS class to add for error notification helper.
-    config.error_notification_class = 'alert alert-danger'
+    config.error_notification_class = "alert alert-danger"
 
     # Tell browsers whether to use default HTML5 validations (novalidate option).
     # Default is enabled.

data/lib/govuk_admin_template/version.rb

@@ -1,3 +1,3 @@
 module GovukAdminTemplate
-  VERSION = "6.7.0".freeze
+  VERSION = "6.9.0".freeze
 end

data/lib/govuk_admin_template/view_helpers.rb

@@ -5,7 +5,8 @@ module GovukAdminTemplate
 
       flash.each do |type, message|
         next unless type.to_sym.in?(%i[success info warning danger])
-        html << content_tag(:div, message, class: "alert alert-#{type}")
+
+        html << tag.div(message, class: "alert alert-#{type}")
       end
 
       html.join.html_safe

data/lib/govuk_admin_template.rb

@@ -8,11 +8,11 @@ module GovukAdminTemplate
   mattr_accessor :environment_style, :environment_label
 
   def self.environment_style
-    @@environment_style || self.default_environment_style
+    @@environment_style || default_environment_style
   end
 
   def self.environment_label
-    @@environment_label || self.environment_style.try(:titleize)
+    @@environment_label || environment_style.try(:titleize)
   end
 
   # In development we can't consistently set an environment

data/lib/tasks/jasmine.rake

@@ -0,0 +1,4 @@
+desc "Run Jasmine tests"
+task jasmine: :environment do
+  sh "yarn run jasmine:ci"
+end

data/lib/tasks/lint.rake

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+desc "Lint files"
+task "lint" => :environment do
+  sh "rubocop --format clang"
+end

data/lib/tasks/sass/check.rake

@@ -0,0 +1,52 @@
+UNGUARDED_URL_USAGE  = /\surl\(/.freeze
+ABSOLUTE_ASSET_USAGE = /(?:image-path|image-url|asset-path|asset-url)\(["']\/assets/.freeze
+
+namespace :sass do
+  desc "Check all SCSS for 404-creating problems, takes place of govuk-lint"
+  task check: :environment do
+    scss_files = File.expand_path(
+      "../../app/assets/stylesheets/**/*.scss", __dir__
+    )
+
+    matching_lines = Dir[scss_files].each_with_object([]) do |scss_file, matching|
+      File.readlines(scss_file).each_with_index do |line, number|
+        matching << "Unguarded url usage: #{scss_file}:#{number + 1}"    if line =~ UNGUARDED_URL_USAGE
+        matching << "Absolute /assets usage: #{scss_file}:#{number + 1}" if line =~ ABSOLUTE_ASSET_USAGE
+      end
+    end
+
+    if matching_lines.any?
+      raise <<~MSG
+
+        One or more problems exist:
+
+        Unguarded url usage
+        -------------------
+
+          Do not use instances of url(...) to refer to images within this gem.
+          Prefer the SASS function image-url. Unguarded url references won't work in
+          Rails 4 and up due to MD5 hashes in asset filenames. Your asset will 404 in
+          production Rails 4 apps.
+
+        Absolute /assets usage
+        ----------------------
+
+          When using any of the image/asset helpers, don't refer to /assets absolutely.
+          For example,
+
+            image-url('/assets/govuk_admin_template/header-crown.png')
+
+          should instead be
+
+            image-url('govuk_admin_template/header-crown.png')
+
+          If Sprockets can't find the image on precompilation, it won't rewrite the
+          URL and will pass it through unaltered. This usually means it will 404.
+
+        Problems:
+              #{matching_lines.join("\n  ")}
+
+      MSG
+    end
+  end
+end

metadata

@@ -1,87 +1,73 @@
 --- !ruby/object:Gem::Specification
 name: govuk_admin_template
 version: !ruby/object:Gem::Version
-  version: 6.7.0
+  version: 6.9.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-03-19 00:00:00.000000000 Z
+date: 2022-03-21 00:00:00.000000000 Z
 dependencies:
-- !ruby/object:Gem::Dependency
-  name: rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.2.0
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.2.0
 - !ruby/object:Gem::Dependency
   name: bootstrap-sass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.4.1
+        version: '3.4'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.4.1
+        version: '3.4'
 - !ruby/object:Gem::Dependency
   name: jquery-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.3.1
+        version: '4.3'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.3.1
+        version: '4.3'
 - !ruby/object:Gem::Dependency
   name: plek
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 2.1.0
+        version: '2.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 2.1.0
+        version: '2.1'
 - !ruby/object:Gem::Dependency
-  name: sass-rails
+  name: rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '5'
-  type: :development
+        version: '6'
+  type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '5'
+        version: '6'
 - !ruby/object:Gem::Dependency
-  name: rspec-rails
+  name: capybara
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
@@ -95,7 +81,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '3'
 - !ruby/object:Gem::Dependency
-  name: capybara
+  name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
@@ -109,33 +95,33 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '3'
 - !ruby/object:Gem::Dependency
-  name: jasmine
+  name: rubocop-govuk
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - '='
       - !ruby/object:Gem::Version
-        version: '3'
+        version: 4.3.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - '='
       - !ruby/object:Gem::Version
-        version: '3'
+        version: 4.3.0
 - !ruby/object:Gem::Dependency
-  name: govuk-lint
+  name: sassc-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '2'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '2'
 description: Styles, scripts and templates for GOV.UK admin applications
 email:
 - govuk-dev@digital.cabinet-office.gov.uk
@@ -198,6 +184,9 @@ files:
 - lib/govuk_admin_template/simple_form.rb
 - lib/govuk_admin_template/version.rb
 - lib/govuk_admin_template/view_helpers.rb
+- lib/tasks/jasmine.rake
+- lib/tasks/lint.rake
+- lib/tasks/sass/check.rake
 homepage: https://github.com/alphagov/govuk_admin_template
 licenses: []
 metadata: {}
@@ -209,14 +198,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 1.9.3
+      version: 2.7.2
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.1
+rubygems_version: 3.3.9
 signing_key: 
 specification_version: 4
 summary: Styles, scripts and templates for GOV.UK admin applications