diff --git a/Gemfile b/Gemfile index e8c8100ea..8622a0020 100644 --- a/Gemfile +++ b/Gemfile @@ -10,7 +10,7 @@ gem 'sass-rails', "5.0.7" gem 'asset_bom_removal-rails', '~> 1.0.0' gem 'nokogiri', "~> 1.7" gem 'redis', "~> 4.0.1" -gem 'govuk_publishing_components', '~> 7.0.0' +gem 'govuk_publishing_components', '~> 7.1.0' gem 'govuk_app_config', '~> 1.4.1' group :development do diff --git a/Gemfile.lock b/Gemfile.lock index 740b6d586..bbe34f737 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -118,7 +118,7 @@ GEM govuk_frontend_toolkit (7.5.0) railties (>= 3.1.0) sass (>= 3.2.0) - govuk_publishing_components (7.0.0) + govuk_publishing_components (7.1.0) govspeak (>= 5.0.3) govuk_app_config govuk_frontend_toolkit @@ -348,7 +348,7 @@ DEPENDENCIES govuk-lint (~> 3.8.0) govuk_app_config (~> 1.4.1) govuk_frontend_toolkit (~> 7.5.0) - govuk_publishing_components (~> 7.0.0) + govuk_publishing_components (~> 7.1.0) govuk_template (= 0.24.0) image_optim (= 0.26.1) jasmine-rails (~> 0.14.1) diff --git a/app/assets/images/search-button.png b/app/assets/images/search-button.png deleted file mode 100644 index 0cbe2c7f5..000000000 Binary files a/app/assets/images/search-button.png and /dev/null differ diff --git a/app/assets/javascripts/modules/toggle-input-class-on-focus.js b/app/assets/javascripts/modules/toggle-input-class-on-focus.js deleted file mode 100644 index 90f857c6b..000000000 --- a/app/assets/javascripts/modules/toggle-input-class-on-focus.js +++ /dev/null @@ -1,33 +0,0 @@ -/* - Toggle the class 'focus' on input boxes on element focus/blur -*/ -(function (Modules) { - 'use strict' - - Modules.ToggleInputClassOnFocus = function () { - this.start = function ($el) { - var $toggleTarget = $el.find('.js-class-toggle'); - - if(!inputIsEmpty()) { - addFocusClass(); - } - - $toggleTarget.on('focus', addFocusClass); - $toggleTarget.on('blur', removeFocusClassFromEmptyInput); - - function inputIsEmpty() { - return $toggleTarget.val() === ''; - } - - function addFocusClass() { - $toggleTarget.addClass('focus'); - } - - function removeFocusClassFromEmptyInput() { - if(inputIsEmpty()) { - $toggleTarget.removeClass('focus'); - } - } - } - } -})(window.GOVUK.Modules) diff --git a/app/assets/javascripts/start-modules.js b/app/assets/javascripts/start-modules.js index 824f84a9a..e84262083 100644 --- a/app/assets/javascripts/start-modules.js +++ b/app/assets/javascripts/start-modules.js @@ -1,7 +1,6 @@ // = require govuk/modules // = require modules/sticky-element-container // = require modules/toggle -// = require modules/toggle-input-class-on-focus // = require modules/track-click // = require modules/cross-domain-tracking diff --git a/app/assets/stylesheets/govuk-component/_component.scss b/app/assets/stylesheets/govuk-component/_component.scss index 2eb660492..6d4069377 100644 --- a/app/assets/stylesheets/govuk-component/_component.scss +++ b/app/assets/stylesheets/govuk-component/_component.scss @@ -20,6 +20,5 @@ @import "breadcrumbs"; @import "related-items"; @import "organisation-logo"; -@import "search"; @import "button"; @import "lead-paragraph"; diff --git a/app/assets/stylesheets/govuk-component/_search.scss b/app/assets/stylesheets/govuk-component/_search.scss deleted file mode 100644 index fef85dbc6..000000000 --- a/app/assets/stylesheets/govuk-component/_search.scss +++ /dev/null @@ -1,181 +0,0 @@ -.govuk-search { - position: relative; - margin-bottom: 30px; - - $input-size: 40px; - - .search-label { - display: block; - } - - .search-input { - padding: 6px; - margin: 0.5em 0; - width: 100%; - height: $input-size; - border: 0; - @include box-sizing(border-box); - @include core-19($line-height: (28 / 19), $line-height-640: (28 / 16)); - background: $white; - border-radius: 0; //otherwise iphones apply an automatic border radius - @include appearance(none); - } - - .search-submit { - padding: 6px; - border: 0; - cursor: pointer; - border-radius: 0; - } - - // IE6 + IE7 always get the simplest version, regardless of whether javascript is enabled - @if ($is-ie == false) or ($ie-version >= 8) { - .js-enabled & { - .search-label { - position: absolute; - left: 15px; - top: 1px; - z-index: 1; - @include core-19($line-height: $input-size, $line-height-640: $input-size); - color: $secondary-text-colour; - } - } - - .search-wrapper { - display: table; - width: 100%; - background: $white; - } - - //general class applied to search input and button wrapper - .search-element { - position: relative; - display: table-cell; - vertical-align: top; - } - - .search-input { - margin: 0; - - // the .focus class is added by JS and ensures that the input remains above the label once clicked/filled in - &:focus, - &.focus { - z-index: 2; - } - } - - .search-submit-wrapper { - width: 1%; - } - - .search-submit { - position: relative; - padding: 0; - width: $input-size; - height: $input-size; - background-image: image-url("search-button.png"); - background-repeat: no-repeat; - background-position: 2px 50%; - text-indent: -5000px; - overflow: hidden; - - &:focus { - z-index: 2; - } - - &::-moz-focus-inner { - border: 0; - } - - @include device-pixel-ratio() { - background-size: 52.5px auto; - background-position: 115% 50%; - } - } - } - - &.on-govuk-blue { - .search-label { - color: $white; - } - - .search-submit { - background-color: $black; - color: $white; - - &:hover { - background-color: lighten($black, 5%); - } - } - - @if ($is-ie == false) or ($ie-version >= 8) { - .js-enabled & { - .search-label { - color: $secondary-text-colour; - } - } - } - } - - - &.on-white { - .search-label { - color: $black; - } - - .search-input { - border: solid 1px $grey-2; - } - - .search-submit { - background-color: $light-blue; - color: $white; - - &:hover { - background-color: lighten($light-blue, 5%); - } - } - - @if ($is-ie == false) or ($ie-version >= 8) { - .search-input { - border-right: 0; - } - - .js-enabled & { - .search-label { - color: $secondary-text-colour; - } - } - } - } - - &.search-large { - $input-size: 50px; - - .search-label { - @include core-19($line-height: $input-size, $line-height-640: $input-size); - } - - .search-input { - height: $input-size; - } - - .search-submit { - width: $input-size; - height: $input-size; - background-position: 8px 50%; - - @include device-pixel-ratio() { - background-size: 60px auto; - background-position: 160% 50%; - } - } - } - - &.search-separate-label { - .search-label { - position: relative; - left: auto; - } - } -} diff --git a/app/views/govuk_component/docs/search.yml b/app/views/govuk_component/docs/search.yml deleted file mode 100644 index 49664fdc1..000000000 --- a/app/views/govuk_component/docs/search.yml +++ /dev/null @@ -1,40 +0,0 @@ -name: "Search" -description: "Search box" -body: | - A search box with label and attached submit button. The component must be used within an HTML form. - The search input has a name="q" attribute and a customisable ID. - - It can be used on white or on govuk-blue using the on_govuk_blue option. - - Markup such as heading tags can be included in the label using the label_text option. Styling is not included in the component for heading tags in labels, however this is what the search results page does. -accessibility_criteria: | - The search box should: - - - be used inside a form with the role of 'search', to indicate it as a [search landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_lh_search) - - have a clear label to identify the search functionality, which is visible to all users - -examples: - default: - data: {} - apply_custom_styling_to_the_label_and_set_search_value: - data: - inline_label: false - label_text: "

Search GOV.UK

" - value: "driving licence" - stop_the_label_appearing_inline: - data: - inline_label: false - for_use_on_govuk_blue_background: - data: - on_govuk_blue: true - context: - dark_background: true - change_label_text: - data: - label_text: "Search" - set_id_for_search_input: - data: - id: "my_unique_id" - large_version: - data: - size: "large" diff --git a/app/views/govuk_component/search.raw.html.erb b/app/views/govuk_component/search.raw.html.erb deleted file mode 100644 index a58d3f27e..000000000 --- a/app/views/govuk_component/search.raw.html.erb +++ /dev/null @@ -1,24 +0,0 @@ -<% - class_name = "on-white" - class_name = "on-govuk-blue" if local_assigns.include?(:on_govuk_blue) - size ||= "" - class_name = "#{class_name} search-large" if size == 'large' - class_name = "#{class_name} search-separate-label" if local_assigns.include?(:inline_label) - - value ||= "" - id ||= "search-main-" + SecureRandom.hex(4) - label_text ||= "Search GOV.UK" - label_text = "#{label_text}".html_safe -%> - -
- -
- -
- -
-
-
diff --git a/spec/javascripts/modules/toggle-class-on-focus.spec.js b/spec/javascripts/modules/toggle-class-on-focus.spec.js deleted file mode 100644 index 5acde030b..000000000 --- a/spec/javascripts/modules/toggle-class-on-focus.spec.js +++ /dev/null @@ -1,57 +0,0 @@ -describe('A toggle class module', function () { - 'use strict'; - - var element, toggle; - - afterEach(function(){ - element.remove(); - }); - - describe('when the search box is interacted with', function () { - beforeEach(function () { - element = $('\ -
\ - \ -
') - - $('body').append(element); - toggle = new GOVUK.Modules.ToggleInputClassOnFocus(); - toggle.start(element); - }); - - it('applies the focus style on focus and removes it on blur', function () { - var searchInput = element.find('.js-class-toggle'); - expect(searchInput.is('.focus')).toBe(false); - searchInput.trigger('focus'); - expect(searchInput.is('.focus')).toBe(true); - searchInput.trigger('blur'); - expect(searchInput.is('.focus')).toBe(false); - }); - }); - - describe('when the search box has a value', function () { - beforeEach(function () { - element = $('\ -
\ - \ -
') - - $('body').append(element); - toggle = new GOVUK.Modules.ToggleInputClassOnFocus(); - toggle.start(element); - }); - - it('applies the focus style on load if the search box already has a value', function() { - var searchInput = element.find('.js-class-toggle'); - expect(searchInput.is('.focus')).toBe(true); - }); - - it('does not remove the focus style on blur if the search box already has a value', function() { - var searchInput = element.find('.js-class-toggle'); - searchInput.trigger('focus'); - expect(searchInput.is('.focus')).toBe(true); - searchInput.trigger('blur'); - expect(searchInput.is('.focus')).toBe(true); - }); - }); -}); diff --git a/test/govuk_component/search_test.rb b/test/govuk_component/search_test.rb deleted file mode 100644 index 8abb468da..000000000 --- a/test/govuk_component/search_test.rb +++ /dev/null @@ -1,45 +0,0 @@ -require 'govuk_component_test_helper' - -class SearchTestCase < ComponentTestCase - def component_name - "search" - end - - test "renders a search box with default options" do - render_component({}) - assert_select ".govuk-search.on-white" - end - - test "renders a search box for a dark background" do - render_component(on_govuk_blue: true) - assert_select ".govuk-search.on-govuk-blue" - end - - test "renders a search box with a custom label text" do - render_component(label_text: "This is my new label") - assert_select ".govuk-search .search-label", text: "This is my new label" - end - - test "renders a search box with a custom label content" do - render_component(inline_label: false, label_text: "

This is a heading 1

") - assert_select ".govuk-search .search-label h1", text: "This is a heading 1" - assert_select ".govuk-search.search-separate-label" - end - - test "renders a search box with a value" do - render_component(value: "I searched for this") - assert_select ".govuk-search .search-input" do - assert_select "[value=?]", "I searched for this" - end - end - - test "renders a search box with a custom id" do - render_component(id: "my-unique-id") - assert_select ".govuk-search #my-unique-id.search-input" - end - - test "renders a large search box" do - render_component(size: "large") - assert_select ".govuk-search.search-large" - end -end