Revert "Revert "Bring in new toolkit with new input fields""

Reverts #452 So yesterday, we merged in these changes (#450) and then our functional tests started to break. Upon investigation, we found that it was not able to find checkbox/radio elements [when calling its default 'find_all' method and looking for input fields](https://github.com/alphagov/digitalmarketplace-functional-tests/blob/19f5fa5c7aa2db20dddb921e96869a06614864ac/features/support/form_helpers.rb#L52). Since the default input elements are really small, the new elements actually hide the inputs and draw a custom interface using the `::before` and `::after` psuedo-elements. @robinwhittleton talks about how [hiding the elements was an accessibility challenge](https://gdstechnology.blog.gov.uk/2016/12/13/improving-forms-with-new-radios-and-checkboxes/), but now they work with real-world accessibility software. Unfortunately, [selenium doesn't find hidden elements](http://stackoverflow.com/questions/22110282/how-to-click-on-hidden-element-in-selenium-webdriver), which means it can't find our inputs. Since we can't make large interface changes while G-Cloud is open for suppliers, but we can make testing changes, the decision has been made to merge this now and fix the tests later.
Crown-Commercial-Service · Feb 28, 2017 · 03c4cf5 · 03c4cf5
1 parent 9d4fe81
commit 03c4cf5
Show file tree

Hide file tree

Showing 16 changed files with 54 additions and 56 deletions.
diff --git a/app/assets/javascripts/_analytics.js b/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

diff --git a/app/assets/javascripts/_selection-buttons.js b/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');
 
   };
 

diff --git a/app/assets/javascripts/_shim-links-with-button-role.js b/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||{}]);
diff --git a/app/assets/javascripts/application.js b/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) {
 

diff --git a/app/assets/scss/_brief_submission.scss b/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;
-}
diff --git a/app/assets/scss/_footer.scss b/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;
-    }
-  }
-
 }
diff --git a/app/assets/scss/_index-page.scss b/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;

diff --git a/app/assets/scss/_secondary-action-link.scss b/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;
+}
diff --git a/app/assets/scss/_table.scss b/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 {

diff --git a/app/assets/scss/application.scss b/app/assets/scss/application.scss
@@ -16,8 +16,9 @@ $path: "/static/images/";
 @import "toolkit/shared_scss/_dmspeak.scss";
 
 /* Blocks shared between multiple selectors */
-@import "shared_placeholders/_temporary-messages.scss";
-@import "shared_placeholders/_dm-typography.scss";
+@import "toolkit/shared_placeholders/_temporary-messages.scss";
+@import "toolkit/shared_placeholders/_placeholders.scss";
+@import "toolkit/shared_placeholders/_dm-typography.scss";
 
 // Digtial Marketplace Front-end toolkit styles
 @import "toolkit/_breadcrumb.scss";
@@ -42,7 +43,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 +62,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";

diff --git a/app/templates/auth/create-user.html b/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>

diff --git a/app/templates/auth/login.html b/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>

diff --git a/app/templates/auth/request-password-reset.html b/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>

diff --git a/app/templates/auth/reset-password.html b/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>

diff --git a/bower.json b/bower.json
@@ -5,8 +5,8 @@
     "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",
-    "govuk_template": "https://github.com/alphagov/govuk_template/releases/download/v0.17.3/jinja_govuk_template-0.17.3.tgz",
+    "digitalmarketplace-frontend-toolkit": "https://github.com/alphagov/digitalmarketplace-frontend-toolkit.git#v20.0.0",
+    "govuk_template": "https://github.com/alphagov/govuk_template/releases/download/v0.19.2/jinja_govuk_template-0.19.2.tgz",
     "digitalmarketplace-frameworks": "https://github.com/alphagov/digitalmarketplace-frameworks.git#v5.15.4"
   }
 }
diff --git a/package.json b/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": {