govuk_publishing_components 21.0.0 → 21.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2ef4a6044ee14caf38ad63acffb0762e4cebc06fa412beeff1df1e07a6c021bc
-  data.tar.gz: a57304c3266b108045c6afd4305e972ba1441e7f7150b24796c585c55c5fd802
+  metadata.gz: eba6273d64031399b770ec443b7502a8cde512cc2127af47d08f3046c6389238
+  data.tar.gz: f49f10c2ec3166a2c28fa24d370745aa7f45503e66e878653303466d82e604a8
 SHA512:
-  metadata.gz: 9a79245895e9ad222d86d6977d4c0a08db90a4a034c1650ef84d86919a051fbcec76fb40f780f249b0feaa4108f8b05609eccf5d188f9aae28b345bd78791a90
-  data.tar.gz: 7da229230ec92c542edebca0921fd85bf234c126c883fb89c0005d24e12ed4d0aade2a9c507722edf59248a077b9c408abb54ce5b12e61511a36c14abe7ef5ef
+  metadata.gz: ee746fd4ccd8f7a590361a1854456a8b68af731788a8f686880c61cb23274dea632164565cf325146914d172bcdbcafabb5a230ba0e53a737bbc26c53c9890b4
+  data.tar.gz: 5aa2a3af8b027dd77950d30a826e2bd61dae09b2dc6f1706d3fa6d2d13d563478e52d75b883d2707ca8810e970cb08ae16d76e76df45666767d1a1abbf75a4d1

data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss

@@ -7,22 +7,37 @@ $large-input-size: 50px;
 }
 
 .gem-c-search__label {
+  @include govuk-font($size: 19, $line-height: $input-size);
   display: block;
 
   h1 {
     @include govuk-font($size: 19, $line-height: $input-size);
     margin: 0;
   }
+
+  .js-enabled & {
+    position: absolute;
+    left: govuk-spacing(3);
+    top: 1px;
+    z-index: 1;
+    color: $govuk-secondary-text-colour;
+  }
+
+  // match label colour with the label component colour
+  // when javascript is enabled and inline_label option  is set to false
+  .js-enabled .gem-c-search--separate-label & {
+    color: $govuk-text-colour;
+  }
 }
 
 .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
   @include govuk-font($size: 19, $line-height: (28 / 19));
 
   padding: 6px;
-  margin: .5em 0;
+  margin: 0;
   width: 100%;
   height: $input-size;
-  border: 0;
+  border: $govuk-border-width-form-element solid $govuk-input-border-colour;
   background: govuk-colour("white");
   border-radius: 0; //otherwise iphones apply an automatic border radius
   box-sizing: border-box;
@@ -30,32 +45,66 @@ $large-input-size: 50px;
   -moz-appearance: none;
   appearance: none;
 
+  // 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;
+  }
+
   &:focus {
     outline: $govuk-focus-width solid $govuk-focus-colour;
-    outline-offset: inherit;
+    // Ensure outline appears outside of the element
+    outline-offset: 0;
+    // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`
+    // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.
+    box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+
+    @include govuk-if-ie8 {
+      // IE8 doesn't support `box-shadow` so double the border with
+      // `border-width`.
+      border-width: $govuk-border-width-form-element * 2;
+    }
   }
 }
 
 .gem-c-search__submit {
-  padding: 6px;
   border: 0;
   cursor: pointer;
   border-radius: 0;
+  position: relative;
+  padding: 0;
+  width: $input-size;
+  height: $input-size;
+  background-image: image-url("govuk_publishing_components/search-button.png");
+  background-repeat: no-repeat;
+  background-position: 2px 50%;
+  text-indent: -5000px;
+  overflow: hidden;
+
+  @include govuk-device-pixel-ratio {
+    background-size: 52.5px auto;
+    background-position: 115% 50%;
+  }
 
   &:focus {
+    z-index: 2;
     outline: $govuk-focus-width solid $govuk-focus-colour;
+    // Ensure outline appears outside of the element
+    outline-offset: 0;
+    // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
+    // Also, `outline` cannot be utilised
+    // here as it is already used for the yellow focus state.
+    box-shadow: inset 0 0 0 $govuk-border-width-form-element * 2 govuk-colour("black");
+
+    @include govuk-if-ie8 {
+      // IE8 doesn't support `box-shadow` so double the border with
+      // `border-width`.
+      border-width: $govuk-border-width-form-element * 2;
+    }
   }
-}
-
-.js-enabled {
-  .gem-c-search__label {
-    @include govuk-font($size: 19, $line-height: $input-size);
 
-    position: absolute;
-    left: govuk-spacing(3);
-    top: 1px;
-    z-index: 1;
-    color: $govuk-secondary-text-colour;
+  &::-moz-focus-inner {
+    border: 0;
   }
 }
 
@@ -72,50 +121,25 @@ $large-input-size: 50px;
   vertical-align: top;
 }
 
-.gem-c-search__input[type="search"] {
-  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;
-  }
-}
-
 .gem-c-search__submit-wrapper {
   width: 1%;
 }
 
-.gem-c-search__submit {
-  position: relative;
-  padding: 0;
-  width: $input-size;
-  height: $input-size;
-  background-image: image-url("govuk_publishing_components/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 govuk-device-pixel-ratio {
-    background-size: 52.5px auto;
-    background-position: 115% 50%;
-  }
-}
-
 .gem-c-search--on-govuk-blue {
   .gem-c-search__label {
     color: govuk-colour("white");
   }
 
+  .gem-c-search__input {
+    border-width: 0;
+
+    // no need for black outline as there is enough contrast
+    // with the blue background
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
   .gem-c-search__submit {
     background-color: govuk-colour("black");
     color: govuk-colour("white");
@@ -132,15 +156,7 @@ $large-input-size: 50px;
   }
 }
 
-
 .gem-c-search--on-white {
-  .gem-c-search__label {
-    color: govuk-colour("black");
-  }
-
-  .gem-c-search__input[type="search"] {
-    border: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
-  }
 
   .gem-c-search__submit {
     background-color: govuk-colour("light-blue");
@@ -152,12 +168,11 @@ $large-input-size: 50px;
   }
 
   .gem-c-search__input[type="search"] {
-    border-right: 0;
-  }
+    border-right-width: 0;
 
-  .js-enabled & {
-    .gem-c-search__label {
-      color: $govuk-secondary-text-colour;
+    // add the border once focused
+    &:focus {
+      border-right-width: 2px;
     }
   }
 }

data/app/views/govuk_publishing_components/components/_select.html.erb

@@ -3,16 +3,19 @@
   id ||= false
   label ||= false
   full_width ||= false
+  name ||= id
+  heading_size = '' unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+
+  label_classes = %w(govuk-label)
+  label_classes << "govuk-label--#{heading_size}" if heading_size
 
   select_helper = GovukPublishingComponents::Presenters::SelectHelper.new(options)
   data_module = "data-module=track-select-change" unless select_helper.data_tracking?.eql?(false)
 %>
 <% if options.any? && id && label %>
   <div class="govuk-form-group gem-c-select">
-    <label class="govuk-label" for="<%= id %>">
-      <%= label %>
-    </label>
-    <select class="govuk-select <%= 'gem-c-select__select--full-width' if full_width %>" id="<%= id %>" name="<%= id %>" <%= data_module %> >
+    <%= label_tag(id, label, class: label_classes) %>
+    <select class="govuk-select <%= 'gem-c-select__select--full-width' if full_width %>" id="<%= id %>" name="<%= name %>" <%= data_module %> >
       <%= options_for_select(select_helper.option_markup, select_helper.selected_option) %>
     </select>
   </div>

data/app/views/govuk_publishing_components/components/docs/select.yml

@@ -19,6 +19,17 @@ examples:
         value: 'option2'
       - text: 'Option three'
         value: 'option3'
+  with_different_id_and_name:
+    description: If no name is provided, name defaults to the (required) value of id.
+    data:
+      id: 'dropdown1-1'
+      label: 'My Dropdown'
+      name: 'dropdown[1]'
+      options:
+      - text: 'Option one'
+        value: 'option1'
+      - text: 'Option two'
+        value: 'option2'
   with_preselect:
     data:
       id: 'dropdown2'
@@ -92,4 +103,16 @@ examples:
         value: 'option2'
       - text: 'Option three'
         value: 'option3'
-
+  with_custom_label_size:
+    description: Make the label different sizes. Valid options are 's', 'm', 'l' and 'xl'.
+    data:
+      id: 'dropdown6'
+      label: 'Bigger!'
+      heading_size: 'xl'
+      options:
+      - text: 'Option one'
+        value: 'option1'
+      - text: 'Option two'
+        value: 'option2'
+      - text: 'Option three'
+        value: 'option3'

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '21.0.0'.freeze
+  VERSION = '21.1.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 21.0.0
+  version: 21.1.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-09-19 00:00:00.000000000 Z
+date: 2019-09-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: gds-api-adapters