govuk_publishing_components 58.1.0 → 58.2.0

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

@@ -0,0 +1,196 @@
+name: Select with search (experimental)
+description: A dropdown select with search
+body: |
+  A Javascript enhanced dropdown select. This component is progressively enhanced, if
+  Javascript is unavailable then it will use the select component.
+
+  This is an experimental component as it currently fails WCAG compliance for keyboard navigation. The total number of options are not
+  announced when using Voice Over.
+accessibility_criteria: |
+  - accept focus
+  - be focusable with a keyboard
+  - be usable with a keyboard
+  - indicate when it has focus
+examples:
+  default:
+    data:
+      id: dropdown-default
+      label: My Dropdown
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+      - text: Option three
+        value: option3
+  with_blank_option:
+    description: Include a blank option
+    data:
+      id: dropdown-with-blank
+      label: With blank option
+      include_blank: true
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+      - text: Option three
+        value: option3
+  with_grouped_options:
+    description: Options can be grouped
+    data:
+      id: dropdown-with-grouped-options
+      label: Select a city
+      grouped_options:
+      - - England
+        - - text: Bath
+            value: bath
+          - text: Bristol
+            value: bristol
+          - text: London
+            value: london
+          - text: Manchester
+            value: manchester
+      - - Northern Ireland
+        - - text: Bangor
+            value: bangor
+          - text: Belfast
+            value: belfast
+      - - Scotland
+        - - text: Dundee
+            value: dundee
+          - text: Edinburgh
+            value: edinburgh
+          - text: Glasgow
+            value: glasgow
+      - - Wales
+        - - text: Cardiff
+            value: cardiff
+          - text: Swansea
+            value: swansea
+  with_grouped_options_and_blank_option:
+    description: Options can be grouped and include a blank option
+    data:
+      id: dropdown-with-grouped-options-and-blank
+      label: Select a city
+      include_blank: true
+      grouped_options:
+      - - England
+        - - text: Bath
+            value: bath
+          - text: Bristol
+            value: bristol
+          - text: London
+            value: london
+          - text: Manchester
+            value: manchester
+      - - Northern Ireland
+        - - text: Bangor
+            value: bangor
+          - text: Belfast
+            value: belfast
+      - - Scotland
+        - - text: Dundee
+            value: dundee
+          - text: Edinburgh
+            value: edinburgh
+          - text: Glasgow
+            value: glasgow
+      - - Wales
+        - - text: Cardiff
+            value: cardiff
+          - text: Swansea
+            value: swansea
+  with_different_id_and_name:
+    description: If no name is provided, name defaults to the (required) value of id.
+    data:
+      id: dropdown-with-different-id-and-name
+      label: My Dropdown
+      name: dropdown[1]
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+  with_data_attributes:
+    data:
+      id: dropdown-with-data-attributes
+      data_attributes:
+        module: not-a-module
+        loose: moose
+      label: Select your country
+      options:
+        - text: France
+          value: fr
+        - text: Germany
+          value: de
+        - text: United Kingdom
+          value: uk
+  with_preselect:
+    data:
+      id: dropdown-with-preselect
+      label: Option 2 preselected
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+        selected: true
+      - text: Option three
+        value: option3
+  with_hint:
+    description: When a hint is included the `aria-describedby` attribute of the select is included to point to the hint. When an error and a hint are present, that attribute includes the IDs of both the hint and the error.
+    data:
+      id: dropdown-with-hint
+      label: Choose your preferred thing
+      hint: You might need some more information here
+      hint_id: optional-hint-id
+      options:
+      - text: Something
+        value: option1
+      - text: Something else
+        value: option2
+  with_error:
+    description: An arbitrary number of separate error items can be passed to the component.
+    data:
+      id: dropdown-with-error
+      label: How will you be travelling to the conference?
+      error_items:
+        - text: Please choose an option
+      include_blank: true
+      options:
+      - text: Public transport
+        value: option1
+      - text: Will make own arrangements
+        value: option2
+  with_custom_label_size:
+    description: Make the label different sizes. Valid options are `s`, `m`, `l` and `xl`.
+    data:
+      id: dropdown-with-custom-label-size
+      label: Bigger!
+      heading_size: xl
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+      - text: Option three
+        value: option3
+  with_multiple_select_enabled:
+    description: Allow multiple items to be selected and de-selected.
+    data:
+      id: dropdown-with-multiple
+      label: Select your country
+      include_blank: true
+      multiple: true
+      options:
+        - text: France
+          value: fr
+          selected: false
+        - text: Germany
+          value: de
+          selected: false
+        - text: The United Kingdom of Great Britain and Northern Ireland
+          value: uk
+        - text: Democratic Republic of the Congo
+          value: cg

data/lib/govuk_publishing_components/presenters/select_helper.rb

@@ -1,23 +1,26 @@
 module GovukPublishingComponents
   module Presenters
     class SelectHelper
-      attr_reader :options, :option_markup, :selected_option, :error_message, :error_id, :hint, :hint_id, :describedby
+      include ActionView::Helpers::FormOptionsHelper
+
+      attr_reader :options, :options_markup, :error_items, :error_id, :hint, :hint_id, :describedby
 
       def initialize(local_assigns)
         @options = local_assigns[:options] || []
-        @error_message = local_assigns[:error_message]
+        @error_items = local_assigns[:error_items] || []
+        @error_items << { text: local_assigns[:error_message] } if local_assigns[:error_message]
         @error_id = local_assigns[:error_id] || nil
         @hint = local_assigns[:hint] || nil
         @hint_id = local_assigns[:hint_id] || nil
         @heading_size = local_assigns[:heading_size]
         @full_width = local_assigns[:full_width] || false
-        @option_markup = get_options
+        @options_markup = options_for_select(get_options, @selected_option)
         @describedby = get_describedby
       end
 
       def css_classes
         classes = %w[govuk-form-group gem-c-select]
-        classes << "govuk-form-group--error" if @error_message
+        classes << "govuk-form-group--error" if @error_items.present?
         classes
       end
 
@@ -66,7 +69,7 @@ module GovukPublishingComponents
       def get_describedby
         describedby = %w[]
 
-        if @error_message || @error_id
+        if @error_items.present? || @error_id
           @error_id ||= "error-#{SecureRandom.hex(4)}"
           describedby << @error_id
         end

data/lib/govuk_publishing_components/presenters/select_with_search_helper.rb

@@ -0,0 +1,92 @@
+##
+# Helper methods for use with the "select-with-search" component.
+# This wraps and extends the Select component's helper methods to add support for option groups.
+##
+module GovukPublishingComponents
+  module Presenters
+    class SelectWithSearchHelper
+      include ActionView::Helpers::FormOptionsHelper
+
+      attr_reader :options, :selected_options, :aria, :options_markup
+
+      delegate :describedby,
+               :hint_id,
+               :hint,
+               :label_classes,
+               :select_classes,
+               :error_items,
+               :error_id,
+               to: :@select_helper
+
+      def initialize(local_assigns)
+        @select_helper = SelectHelper.new(local_assigns.except(:options, :grouped_options))
+        @options = local_assigns[:options]
+        @grouped_options = local_assigns[:grouped_options]
+        @include_blank = local_assigns[:include_blank]
+        @selected_options = []
+        @options_markup = get_options
+        @local_assigns = local_assigns
+      end
+
+      def css_classes
+        classes = @select_helper.css_classes
+        classes << "gem-c-select-with-search"
+        classes
+      end
+
+    private
+
+      def get_options
+        blank_option_if_include_blank +
+          if @grouped_options.present?
+            grouped_and_ungrouped_options_for_select(@grouped_options)
+          elsif @options.present?
+            options_for_select(
+              transform_options(@options),
+              selected_options,
+            )
+          end
+      end
+
+      def grouped_and_ungrouped_options_for_select(unsorted_options)
+        # Filter out the 'single option' options and treat them as simply `<option>`
+        # The remainder should be treated as true 'grouped options', i.e. `<optgroup>`
+        single_options = []
+        grouped_options = []
+        unsorted_options.each_with_index do |(group, options), _index|
+          if group == ""
+            single_options << options
+          else
+            grouped_options << [group, options]
+          end
+        end
+        single_options.flatten!
+
+        options_for_select(transform_options(single_options), selected_options) +
+          grouped_options_for_select(transform_grouped_options(grouped_options), selected_options)
+      end
+
+      def transform_options(options)
+        options.map do |option|
+          @selected_options << option[:value] if option[:selected]
+          [
+            option[:text],
+            option[:value],
+          ]
+        end
+      end
+
+      def transform_grouped_options(grouped_options)
+        grouped_options.map do |(group, options)|
+          [group, transform_options(options)]
+        end
+      end
+
+      def blank_option_if_include_blank
+        return "".html_safe if @include_blank.blank?
+
+        options_for_select([["", ""]])
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "58.1.0".freeze
+  VERSION = "58.2.0".freeze
 end

data/lib/govuk_publishing_components.rb

@@ -27,6 +27,7 @@ require "govuk_publishing_components/presenters/content_breadcrumbs_based_on_org
 require "govuk_publishing_components/presenters/content_breadcrumbs_based_on_taxons"
 require "govuk_publishing_components/presenters/checkboxes_helper"
 require "govuk_publishing_components/presenters/select_helper"
+require "govuk_publishing_components/presenters/select_with_search_helper"
 require "govuk_publishing_components/presenters/meta_tags"
 require "govuk_publishing_components/presenters/content_item"
 require "govuk_publishing_components/presenters/translation_nav_helper"

data/node_modules/choices.js/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Josh Johnson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.