[WIP] Bring in new toolkit with new input fields

app/assets/javascripts/_analytics.js

@@ -1,5 +1,8 @@
 //= include ../../../node_modules/govuk_frontend_toolkit/javascripts/govuk/analytics/google-analytics-universal-tracker.js
 //= include ../../../node_modules/govuk_frontend_toolkit/javascripts/govuk/analytics/analytics.js
+
+; // JavaScript in the govuk_frontend_toolkit doesn't have trailing semicolons
+
 //= include analytics/_register.js
 //= include analytics/_pageViews.js
 //= include analytics/_events.js

app/assets/javascripts/_selection-buttons.js

@@ -4,10 +4,7 @@
 
     if (!GOVUK.SelectionButtons) return;
 
-    new GOVUK.SelectionButtons('.selection-button input', {
-      'focusedClass' : 'selection-button-focused',
-      'selectedClass' : 'selection-button-selected'
-    });
+    new GOVUK.SelectionButtons('.selection-button input');
 
   };
 

app/assets/javascripts/_shim-links-with-button-role.js

@@ -0,0 +1,15 @@
+(function(GOVUK, GDM) {
+
+  GDM.shimLinksWithButtonRole = function() {
+
+    if (!GOVUK.shimLinksWithButtonRole) return;
+
+    GOVUK.shimLinksWithButtonRole.init({
+      selector: '[class^=link-button]'
+    });
+
+  };
+
+  GOVUK.GDM = GDM;
+
+}).apply(this, [GOVUK||{}, GOVUK.GDM||{}]);

app/assets/javascripts/application.js

@@ -12,9 +12,11 @@
 //= include ../../../bower_components/digitalmarketplace-frontend-toolkit/toolkit/javascripts/word-counter.js
 //= include ../../../bower_components/digitalmarketplace-frontend-toolkit/toolkit/javascripts/validation.js
 //= include ../../../node_modules/govuk_frontend_toolkit/javascripts/govuk/selection-buttons.js
+//= include ../../../node_modules/govuk_frontend_toolkit/javascripts/govuk/shim-links-with-button-role.js
 //= include _analytics.js'
 //= include _onready.js'
 //= include _selection-buttons.js
+//= include _shim-links-with-button-role.js
 
 (function(GOVUK, GDM) {
 

app/assets/scss/_brief_submission.scss

@@ -80,12 +80,3 @@ ol.steps {
    @extend %markdown-description;
    padding-bottom: 30px;
 }
-
-.secondary-action-link {
-    margin-top: 30px;
-}
-
-button.button-save + .secondary-action-link,
-input.button-save + .secondary-action-link {
-    margin-top: 5px;
-}

app/assets/scss/_footer.scss

@@ -95,9 +95,6 @@
   }
 
   .footer-meta .footer-meta-inner {
-    a[rel='external'] {
-      @include external-link-16;
-    }
 
     .open-government-licence p {
 
@@ -107,27 +104,5 @@
         font-size: 16px;
       }
     }
-
   }
-
-  .footer-categories a[rel="external"],
-  .footer-meta .footer-meta-inner a[rel="external"] {
-    /* There is no mixin for a 16px black link with a font weight of normal in the govuk toolkit hence the variant below */
-    &:after {
-      content: "\A0\A0\A0\A0\A0";
-      background-position: right 3px;
-      background-image: file-url("external-links/external-link-black-12x12.png");
-      background-repeat: no-repeat;
-
-      @include device-pixel-ratio() {
-        background-image: file-url("external-links/external-link-black-24x24.png");
-        background-size: 12px 12px;
-      }
-    }
-
-    &:hover:after {
-      background-position: right 3px;
-    }
-  }
-
 }

app/assets/scss/_index-page.scss

@@ -141,9 +141,14 @@
     margin: -6px 0 10px;
     color: white;
 
+    .phase-tag {
+      color: $govuk-blue;
+      background-color: white;
+    }
+
     a, a:visited {
         color: $white;
-      }
+    }
 
     a:hover, a:active {
       color: $light-blue-50;

app/assets/scss/_secondary-action-link.scss

@@ -0,0 +1,13 @@
+.secondary-action-link {
+  margin-top: 30px;
+}
+
+.question + .secondary-action-link {
+  margin-top: -36px;
+  margin-bottom: 40px;
+}
+
+.button-save + .secondary-action-link,
+.button-save + .secondary-action-link-bigger {
+  margin-top: 5px;
+}

app/assets/scss/_table.scss

@@ -23,10 +23,6 @@ table.content-table {
     @include core-16($tabular-numbers: true);
     vertical-align: top;
     padding: .75em .5em .75em 0;
-
-    a[rel="external"] {
-      @include external-link-16;
-    }
   }
 
   td {

app/assets/scss/application.scss

@@ -42,7 +42,6 @@ $path: "/static/images/";
 @import "toolkit/forms/_textboxes.scss";
 @import "toolkit/forms/_validation.scss";
 @import "toolkit/search/_search-result.scss";
-@import "toolkit/_secondary-action-link.scss";
 
 #wrapper {
   @extend %site-width-container;
@@ -62,6 +61,7 @@ $path: "/static/images/";
 @import "_service-page.scss";
 @import "_index-page.scss";
 @import "_search-page.scss";
+@import "_secondary-action-link.scss";
 @import "_pagination.scss";
 @import "_publication.scss";
 @import "_supplier-a-to-z.scss";

app/templates/auth/create-user.html

@@ -39,7 +39,7 @@ <h3 class="validation-masthead-heading" id="validation-masthead-heading">
                 <div class="validation-wrapper">
                     {% endif %}
                     <div class="question" id="{{ form.name.name }}">
-                        {{ form.name.label(class="question-heading-with-hint") }}
+                        {{ form.name.label(class="question-heading") }}
                         <p class="hint">
                             Enter the name to be referred to on the Digital Marketplace
                         </p>
@@ -58,7 +58,7 @@ <h3 class="validation-masthead-heading" id="validation-masthead-heading">
                     <div class="validation-wrapper">
                 {% endif %}
                     <div class="question" id="{{ form.phone_number.name }}">
-                        {{ form.phone_number.label(class="question-heading-with-hint") }}
+                        {{ form.phone_number.label(class="question-heading") }}
                         <p class="hint">
                           If there are any urgent problems with your requirements, we need your phone number so the support team can help you fix them quickly.
                         </p>
@@ -77,7 +77,7 @@ <h3 class="validation-masthead-heading" id="validation-masthead-heading">
                     <div class="validation-wrapper">
                 {% endif %}
                     <div class="question" id="{{ form.password.name }}">
-                        {{ form.password.label(class="question-heading-with-hint") }}
+                        {{ form.password.label(class="question-heading") }}
                         <p class="hint">
                           Must be between 10 and 50 characters
                         </p>

app/templates/auth/login.html

@@ -76,7 +76,7 @@ <h3 class="validation-masthead-heading" id="validation-masthead-heading">
                 <div class="validation-wrapper">
             {% endif %}
                 <div class="question" id="{{ form.email_address.name }}">
-                    {{ form.email_address.label(class="question-heading-with-hint") }}
+                    {{ form.email_address.label(class="question-heading") }}
                     <p class="hint">
                         Enter the email address you used to register with the Digital Marketplace
                     </p>

app/templates/auth/request-password-reset.html

@@ -47,7 +47,7 @@ <h1>Reset password</h1>
                 <div class="validation-wrapper">
             {% endif %}
                 <div class="question">
-                    {{ form.email_address.label(class="question-heading-with-hint") }}
+                    {{ form.email_address.label(class="question-heading") }}
                     <p class="hint">
                         Enter the email address you used to register with the Digital Marketplace
                     </p>

app/templates/auth/reset-password.html

@@ -36,7 +36,7 @@ <h1>Reset password</h1>
                 <div class="validation-wrapper">
             {% endif %}
                 <div class="question" id="{{ form.password.name }}">
-                    {{ form.password.label(class="question-heading-with-hint") }}
+                    {{ form.password.label(class="question-heading") }}
                     <p class="hint">
                       Must be between 10 and 50 characters
                     </p>
@@ -55,7 +55,7 @@ <h1>Reset password</h1>
                 <div class="validation-wrapper">
             {% endif %}
                 <div class="question" id="{{ form.confirm_password.name }}">
-                    {{ form.confirm_password.label(class="question-heading-with-hint") }}
+                    {{ form.confirm_password.label(class="question-heading") }}
                     <p class="hint">
                         Repeat password used above
                     </p>

bower.json

@@ -5,7 +5,7 @@
     "jquery": "1.11.2",
     "hogan": "3.0.2",
     "jquery-details": "https://github.com/mathiasbynens/jquery-details/archive/v0.1.0.tar.gz",
-    "digitalmarketplace-frontend-toolkit": "https://github.com/alphagov/digitalmarketplace-frontend-toolkit.git#v19.5.1",
+    "digitalmarketplace-frontend-toolkit": "https://github.com/alphagov/digitalmarketplace-frontend-toolkit.git#pc-import-improved-inputs",
     "govuk_template": "https://github.com/alphagov/govuk_template/releases/download/v0.17.3/jinja_govuk_template-0.17.3.tgz",
     "digitalmarketplace-frameworks": "https://github.com/alphagov/digitalmarketplace-frameworks.git#v5.15.4"
   }

package.json

@@ -14,7 +14,7 @@
     "gulp-shell" : "0.2.9",
     "gulp-filelog" : "0.4.1",
     "gulp-include": "1.1.1",
-    "govuk_frontend_toolkit" : "4.12.0",
+    "govuk_frontend_toolkit" : "5.0.3",
     "gulp-jasmine-phantom": "3.0.0"
   },
   "scripts": {