From 03c4cf529734ed948a5c97789a372312320bdf58 Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Fri, 24 Feb 2017 10:29:46 +0000 Subject: [PATCH] Revert "Revert "Bring in new toolkit with new input fields"" Reverts alphagov/digitalmarketplace-buyer-frontend#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. --- app/assets/javascripts/_analytics.js | 3 +++ app/assets/javascripts/_selection-buttons.js | 5 +--- .../_shim-links-with-button-role.js | 15 +++++++++++ app/assets/javascripts/application.js | 2 ++ app/assets/scss/_brief_submission.scss | 9 ------- app/assets/scss/_footer.scss | 25 ------------------- app/assets/scss/_index-page.scss | 7 +++++- app/assets/scss/_secondary-action-link.scss | 13 ++++++++++ app/assets/scss/_table.scss | 4 --- app/assets/scss/application.scss | 7 +++--- app/templates/auth/create-user.html | 6 ++--- app/templates/auth/login.html | 2 +- .../auth/request-password-reset.html | 2 +- app/templates/auth/reset-password.html | 4 +-- bower.json | 4 +-- package.json | 2 +- 16 files changed, 54 insertions(+), 56 deletions(-) create mode 100644 app/assets/javascripts/_shim-links-with-button-role.js create mode 100644 app/assets/scss/_secondary-action-link.scss diff --git a/app/assets/javascripts/_analytics.js b/app/assets/javascripts/_analytics.js index 97cf630c7..eefb2d9c5 100644 --- 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 index b67cd6d39..925656e95 100644 --- 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 new file mode 100644 index 000000000..e8dde3268 --- /dev/null +++ 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 index 0b12d008b..e76f67bf7 100644 --- 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 index 73b24620f..2b84867dd 100644 --- 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 index 244d11884..02eb05521 100644 --- 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 index 32b42d7a9..8c1b39a5f 100644 --- 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 new file mode 100644 index 000000000..e041b6897 --- /dev/null +++ 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 index f937c6f1e..8bb3c650d 100644 --- 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 index dedbd68d8..32345e865 100644 --- 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 index 1aef0fcfd..229b5a90e 100644 --- a/app/templates/auth/create-user.html +++ b/app/templates/auth/create-user.html @@ -39,7 +39,7 @@

{% endif %}
- {{ form.name.label(class="question-heading-with-hint") }} + {{ form.name.label(class="question-heading") }}

Enter the name to be referred to on the Digital Marketplace

@@ -58,7 +58,7 @@

{% endif %}
- {{ form.phone_number.label(class="question-heading-with-hint") }} + {{ form.phone_number.label(class="question-heading") }}

If there are any urgent problems with your requirements, we need your phone number so the support team can help you fix them quickly.

@@ -77,7 +77,7 @@

{% endif %}
- {{ form.password.label(class="question-heading-with-hint") }} + {{ form.password.label(class="question-heading") }}

Must be between 10 and 50 characters

diff --git a/app/templates/auth/login.html b/app/templates/auth/login.html index 51ff519e6..9e8be61c2 100644 --- a/app/templates/auth/login.html +++ b/app/templates/auth/login.html @@ -76,7 +76,7 @@

{% endif %}
- {{ form.email_address.label(class="question-heading-with-hint") }} + {{ form.email_address.label(class="question-heading") }}

Enter the email address you used to register with the Digital Marketplace

diff --git a/app/templates/auth/request-password-reset.html b/app/templates/auth/request-password-reset.html index 229a6b91e..3705b1f18 100644 --- a/app/templates/auth/request-password-reset.html +++ b/app/templates/auth/request-password-reset.html @@ -47,7 +47,7 @@

Reset password

{% endif %}
- {{ form.email_address.label(class="question-heading-with-hint") }} + {{ form.email_address.label(class="question-heading") }}

Enter the email address you used to register with the Digital Marketplace

diff --git a/app/templates/auth/reset-password.html b/app/templates/auth/reset-password.html index bd1d11211..c6c006747 100644 --- a/app/templates/auth/reset-password.html +++ b/app/templates/auth/reset-password.html @@ -36,7 +36,7 @@

Reset password

{% endif %}
- {{ form.password.label(class="question-heading-with-hint") }} + {{ form.password.label(class="question-heading") }}

Must be between 10 and 50 characters

@@ -55,7 +55,7 @@

Reset password

{% endif %}
- {{ form.confirm_password.label(class="question-heading-with-hint") }} + {{ form.confirm_password.label(class="question-heading") }}

Repeat password used above

diff --git a/bower.json b/bower.json index 7bc9559b0..7b63e0f92 100644 --- 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 index 0f0f7d834..dc27518dc 100644 --- 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": {