ccs-frontend_helpers 0.1.0.rc.1 → 0.1.0.rc.2

data/lib/ccs/components/govuk/field/inputs.rb

@@ -0,0 +1,55 @@
+require_relative '../field'
+require_relative '../fieldset'
+
+module CCS::Components
+  module GovUK
+    class Field < Base
+      # = GOV.UK Field Inputs
+      #
+      # This class is used to create a form for a list of fields, e.g. radios or checkboxes.
+      # It will wrap the inputs in the form group and then the fieldset and:
+      # - display the hint (if there is one)
+      # - find and display the error message (if there is one)
+      #
+      # @!attribute [r] fieldset
+      #   @return [Fieldset] The initialised fieldset
+
+      class Inputs < Field
+        private
+
+        attr_reader :fieldset
+
+        public
+
+        # @param (see CCS::Components::GovUK::Field#initialize)
+        # @param fieldset [Hash] attributes for the fieldset, see {CCS::Components::GovUK::Fieldset#initialize Fieldset#initialize} for more details.
+        #
+        # @option (see CCS::Components::GovUK::Field#initialize)
+
+        def initialize(attribute:, fieldset:, **options)
+          super(attribute: attribute, **options)
+
+          set_described_by(fieldset, @attribute, @error_message, options[:hint])
+
+          @fieldset = Fieldset.new(context: @context, **fieldset)
+        end
+
+        # Generates the HTML to wrap arround a GDS form component
+        #
+        # @yield (see CCS::Components::GovUK::Field#render)
+        #
+        # @return [ActiveSupport::SafeBuffer]
+
+        def render
+          super() do |display_error_message|
+            fieldset.render do
+              concat(hint.render) if hint
+              concat(display_error_message)
+              concat(yield)
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/ccs/components/govuk/field.rb

@@ -0,0 +1,106 @@
+require_relative '../base'
+require_relative 'form_group'
+require_relative 'hint'
+
+module CCS::Components
+  module GovUK
+    # = GOV.UK Field
+    #
+    # This class is used to create a form using the structure of a GDS input field components, e.g. text input.
+    # It will wrap the input within the form group as well as find if there are any error messages to display.
+    #
+    # @!attribute [r] attribute
+    #   @return [String,Symbol] The attribute of the field
+    # @!attribute [r] error_message
+    #   @return [String] The error message for the field
+    # @!attribute [r] form_group
+    #   @return [FormGroup] The initialised form group
+    # @!attribute [r] hint
+    #   @return [Hint] The initialised hint
+
+    class Field < Base
+      private
+
+      attr_reader :attribute, :error_message, :form_group, :hint
+
+      public
+
+      # @param attribute [String, Symbol] the attribute of the field
+      # @param hint [Hash] attributes for the hint, see {CCS::Components::GovUK::Hint#initialize Hint#initialize} for more details.
+      #                    If no hint is given then no hint will be rendered
+      # @param form_group [Hash] attributes for the form group, see {CCS::Components::GovUK::FormGroup#initialize FormGroup#initialize} for more details.
+      # @param options [Hash] options that will be used for the parts of the field
+      #
+      # @option options [String] :error_message (nil) the error message to be displayed
+      # @option options [ActiveModel] :model (nil) optional model that can be used to find an error message
+      # @option options [ActionView::Helpers::FormBuilder] :form (nil) optional form builder used to create
+      #                                                                the field and find the error message
+      # @option options [String] :classes additional CSS classes for the field HTML
+      # @option options [Hash] :attributes ({}) any additional attributes that will added as part of the HTML
+
+      def initialize(attribute:, form_group: nil, hint: nil, **options)
+        super(**options)
+
+        (hint[:attributes] ||= {})[:id] = "#{attribute}-hint" if hint && !hint.dig(:attributes, :id)
+
+        @attribute = attribute
+        @error_message = find_error_message(attribute)
+
+        @form_group = FormGroup.new(attribute: attribute, error_message: @error_message, context: @context, **(form_group || {}))
+        @hint = Hint.new(context: @context, **hint) if hint
+      end
+
+      # Generates the HTML to wrap arround a GDS form input component
+      #
+      # @yield the field HTML
+      #
+      # @yieldparam displayed_error_message [ActiveSupport::SafeBuffer] the error message HTML to display
+      #
+      # @return [ActiveSupport::SafeBuffer]
+
+      def render(&block)
+        form_group.render(&block)
+      end
+
+      private
+
+      # If one is present it will find the error message text for the field
+      #
+      # @param attribute [String, Symbol] the attribute of the field
+      #
+      # @return [String]
+
+      def find_error_message(attribute)
+        if @options[:model]
+          @options[:model].errors[attribute].first
+        elsif options[:form]
+          @options[:form].object.errors[attribute].first
+        else
+          @options[:error_message]
+        end
+      end
+
+      # Adds the aira-describedby attribute for the field
+      # if there is a hint or an error message
+      #
+      # @param field_options [Hash] the hash with the options to add the aria described by to
+      # @param attribute [String, Symbol] the attribute of the field
+      # @param error_message [String] used to indicate if there is an error
+      # @param hint [Hash] the hint attributes
+
+      def set_described_by(field_options, attribute, error_message, hint)
+        aria_described_by = [
+          field_options.dig(:attributes, :aria, :describedby),
+          (hint[:attributes][:id] if hint),
+          ("#{attribute}-error" if error_message)
+        ].compact
+
+        return unless aria_described_by.any?
+
+        ((field_options[:attributes] ||= {})[:aria] ||= {})[:describedby] = aria_described_by.join(' ')
+      end
+    end
+  end
+
+  ActionView::Base.field_error_proc = proc { |html_tag, _instance| html_tag }
+end

data/lib/ccs/components/govuk/fieldset/legend.rb

@@ -0,0 +1,63 @@
+require_relative '../../base'
+
+module CCS::Components
+  module GovUK
+    class Fieldset < Base
+      # = GOV.UK Fieldset Legend
+      #
+      # The legend for the fieldset
+      #
+      # @!attribute [r] text
+      #   @return [String] Text for the fieldset legend
+      # @!attribute [r] is_page_heading
+      #   @return [Boolean] Flag to indicate of the legend is a the page heading
+      # @!attribute [r] caption
+      #   @return [Hash] The class for the li elements
+
+      class Legend < Base
+        private
+
+        attr_reader :text, :is_page_heading, :caption
+
+        public
+
+        # @param text [String] the text for the fieldset legend
+        # @param is_page_heading [Boolean]  if the legend is also the heading it will rendered in a h1
+        # @param caption [String] options for the caption to be rendered above the heading if +:is_page_heading+ is true
+        # @param options [Hash] options that will be used in customising the HTML
+        #
+        # @option options [String] :classes additional CSS classes for the legend HTML
+        #
+        # @option caption [String] :text text for the caption
+        # @option caption [String] :classes additional CSS classes for the caption HTML
+
+        def initialize(text:, is_page_heading: nil, caption: nil, **options)
+          super(**options)
+
+          @text = text
+          @is_page_heading = is_page_heading
+          @caption = caption
+        end
+
+        # Generates the HTML for the GOV.UK Fieldset legend
+        #
+        # @return [ActiveSupport::SafeBuffer]
+
+        def render
+          tag.legend(class: options[:attributes][:class]) do
+            if is_page_heading
+              concat(tag.span(caption[:text], class: caption[:classes])) if caption
+              concat(tag.h1(text, class: 'govuk-fieldset__heading'))
+            else
+              text
+            end
+          end
+        end
+
+        # The default attributes for the fieldset legend
+
+        DEFAULT_ATTRIBUTES = { class: 'govuk-fieldset__legend' }.freeze
+      end
+    end
+  end
+end

data/lib/ccs/components/govuk/fieldset.rb

@@ -0,0 +1,52 @@
+require_relative '../base'
+require_relative 'fieldset/legend'
+
+module CCS::Components
+  module GovUK
+    # = GOV.UK Fieldset
+    #
+    # This is used to generate the fieldset component from the
+    # {https://design-system.service.gov.uk/components/fieldset GDS - Components - Fieldset}
+    #
+    # @!attribute [r] legend
+    #   @return [Legend] Initialised fieldset legend
+
+    class Fieldset < Base
+      private
+
+      attr_reader :legend
+
+      public
+
+      # @param legend [Hash] options for the fieldset legend.
+      #                      See {Components::GovUK::Fieldset::Legend#initialize Legend#initialize} for details of the options.
+      # @param options [Hash] options that will be used in customising the HTML
+      #
+      # @option options [String] :classes additional CSS classes for the fieldset HTML
+      # @option options [Hash] :attributes ({}) any additional attributes that will added as part of the HTML
+
+      def initialize(legend: nil, **options)
+        super(**options)
+
+        @legend = Legend.new(context: @context, **legend) if legend
+      end
+
+      # Generates the HTML for the GOV.UK Fieldset component
+      #
+      # @yield HTML that will be contained within the 'govuk-fieldset' div and under the legend
+      #
+      # @return [ActiveSupport::SafeBuffer]
+
+      def render
+        tag.fieldset(**options[:attributes]) do
+          concat(legend.render) if legend
+          yield
+        end
+      end
+
+      # The default attributes for the fieldset
+
+      DEFAULT_ATTRIBUTES = { class: 'govuk-fieldset' }.freeze
+    end
+  end
+end

data/lib/ccs/components/govuk/footer/link.rb

@@ -0,0 +1,53 @@
+require_relative '../../base'
+
+module CCS::Components
+  module GovUK
+    class Footer < Base
+      # = GOV.UK Footer link
+      #
+      # The individual footer footer link item
+      #
+      # @!attribute [r] text
+      #   @return [String] Text for the footer link
+      # @!attribute [r] href
+      #   @return [String] The href for the footer link
+      # @!attribute [r] li_class
+      #   @return [String] The class for the li elements
+
+      class Link < Base
+        private
+
+        attr_reader :text, :href, :li_class
+
+        public
+
+        # @param text [String] the text for the footer link
+        # @param href [String] the href for the footer link
+        # @param li_class [String] class for the li elements
+        # @param options [Hash] options that will be used in customising the HTML
+        #
+        # @option options [Hash] :attributes any additional attributes that will added as part of the HTML
+
+        def initialize(text:, href:, li_class:, **options)
+          super(**options)
+
+          @text = text
+          @href = href
+          @li_class = li_class
+        end
+
+        # Generates the HTML for the GOV.UK Footer link
+        #
+        # @return [ActiveSupport::SafeBuffer]
+
+        def render
+          tag.li(class: li_class) do
+            options[:attributes][:class] = 'govuk-footer__link'
+
+            link_to(text, href, **options[:attributes])
+          end
+        end
+      end
+    end
+  end
+end

data/lib/ccs/components/govuk/footer/meta.rb

@@ -0,0 +1,58 @@
+require_relative '../../base'
+require_relative 'link'
+
+module CCS::Components
+  module GovUK
+    class Footer < Base
+      # = GOV.UK Footer Meta
+      #
+      # The footer meta section
+      #
+      # @!attribute [r] meta_links
+      #   @return [Array<Link>] An array of the initialised meta links
+      # @!attribute [r] visually_hidden_title
+      #   @return [String] Title for the meta section
+      # @!attribute [r] text
+      #   @return [String] Text to add to the meta section of the footer
+
+      class Meta
+        include ActionView::Context
+        include ActionView::Helpers
+
+        private
+
+        attr_reader :meta_links, :visually_hidden_title, :text
+
+        public
+
+        # @param items [Array<Hash>] an array of links for the meta section.
+        #                            See {Components::GovUK::Footer::Link#initialize Link#initialize} for details of the items in the array.
+        # @param visually_hidden_title [String] ('Support links') title for the meta section
+        # @param text [String] text to add to the meta section of the footer
+        # @param context [ActionView::Base] the view context
+
+        def initialize(context:, items: nil, visually_hidden_title: nil, text: nil)
+          @meta_links = items&.map { |meta_link| Link.new(li_class: 'govuk-footer__inline-list-item', context: context, **meta_link) }
+          @visually_hidden_title = visually_hidden_title || 'Support links'
+          @text = text
+        end
+
+        # Generates the HTML for the GOV.UK Footer Meta sections
+        #
+        # @return [ActiveSupport::SafeBuffer]
+
+        def render
+          capture do
+            concat(tag.h2(visually_hidden_title, class: 'govuk-visually-hidden'))
+            if meta_links
+              concat(tag.ul(class: 'govuk-footer__inline-list') do
+                meta_links.each { |meta_link| concat(meta_link.render) }
+              end)
+            end
+            concat(tag.div(text, class: 'govuk-footer__meta-custom')) if text
+          end
+        end
+      end
+    end
+  end
+end

data/lib/ccs/components/govuk/footer/navigation.rb

@@ -0,0 +1,59 @@
+require_relative '../../base'
+require_relative 'link'
+
+module CCS::Components
+  module GovUK
+    class Footer < Base
+      # = GOV.UK Footer Navigation
+      #
+      # The individual footer navigation item
+      #
+      # @!attribute [r] title
+      #   @return [String] Title for the navigation section
+      # @!attribute [r] navigation_links
+      #   @return [Array<Link>] An array of the initialised navigation links
+      # @!attribute [r] width
+      #   @return [String] Width of the navigation section
+      # @!attribute [r] columns
+      #   @return [Integer] Number of columns to display the links in
+
+      class Navigation
+        include ActionView::Context
+        include ActionView::Helpers
+
+        private
+
+        attr_reader :title, :navigation_links, :width, :columns
+
+        public
+
+        # @param title [String] the title for the navigation section
+        # @param items [Array<Hash>] an array of links for the navigation section.
+        #                            See {Components::GovUK::Footer::Link#initialize Link#initialize} for details of the items in the array.
+        # @param width [String] ('full') width of each navigation section in the footer
+        # @param columns [Integer] (nil) number of columns to display the links
+        # @param context [ActionView::Base] the view context
+
+        def initialize(title:, items:, context:, width: nil, columns: nil)
+          @title = title
+          @navigation_links = items.map { |navigation_link| Link.new(li_class: 'govuk-footer__list-item', context: context, **navigation_link) }
+          @width = width || 'full'
+          @columns = columns
+        end
+
+        # Generates the HTML for the GOV.UK Footer Navigation sections
+        #
+        # @return [ActiveSupport::SafeBuffer]
+
+        def render
+          tag.div(class: "govuk-footer__section govuk-grid-column-#{width}") do
+            concat(tag.h2(title, class: 'govuk-footer__heading govuk-heading-m'))
+            concat(tag.ul(class: "govuk-footer__list #{"govuk-footer__list--columns-#{columns}" if columns}".rstrip) do
+              navigation_links.each { |navigation_link| concat(navigation_link.render) }
+            end)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/ccs/components/govuk/footer.rb

@@ -0,0 +1,129 @@
+require_relative '../base'
+require_relative 'footer/navigation'
+require_relative 'footer/meta'
+
+module CCS::Components
+  module GovUK
+    # = GOV.UK Footer
+    #
+    # This is used to generate the footer component from the
+    # {https://design-system.service.gov.uk/components/footer GDS - Components - Footer}
+    #
+    # @!attribute [r] navigation
+    #   @return [Array<Navigation>] An array of the initialised navigation sections
+    # @!attribute [r] meta
+    #   @return [Meta] The initialised meta section
+
+    class Footer < Base
+      private
+
+      attr_reader :navigation, :meta
+
+      public
+
+      # @param navigation [Array<Hash>] an array of sections for the footer navigation.
+      #                                 See {Components::GovUK::Footer::Navigation#initialize Navigation#initialize} for details of the items in the array.
+      # @param meta [Hash] ptions for the meta section of the footer.
+      #                    See {Components::GovUK::Footer::Meta#initialize Meta#initialize} for details of the options.
+      # @param options [Hash] options that will be used in customising the HTML
+      #
+      # @option options [String] :classes additional CSS classes for the footer HTML
+      # @option options [String] :container_class classes that can be added to the inner container
+      # @option options [ActiveSupport::SafeBuffer,String] :content_licence The content licence information, see {CCS::Components::GovUK::Footer#footer_content_licence footer_content_licence} for default
+      # @option options [ActiveSupport::SafeBuffer,String] :copyright The copyright information, (default: '© Crown copyright')
+      # @option options [Hash] :attributes additional attributes that will added as part of the HTML
+
+      def initialize(navigation: nil, meta: nil, **options)
+        super(**options)
+
+        @options[:attributes][:role] = 'contentinfo'
+        @options[:copyright] ||= '© Crown copyright'
+
+        @navigation = navigation&.map { |navigation_item| Navigation.new(context: @context, **navigation_item) }
+        @meta = Meta.new(context: @context, **meta) if meta
+      end
+
+      # rubocop:disable Metrics/AbcSize
+
+      # Generates the HTML for the GOV.UK Footer component
+      #
+      # @return [ActiveSupport::SafeBuffer]
+
+      def render
+        tag.footer(**options[:attributes]) do
+          tag.div(class: "govuk-width-container #{options[:container_classes]}".rstrip) do
+            if navigation
+              concat(tag.div(class: 'govuk-footer__navigation') do
+                navigation.each { |navigation_item| concat(navigation_item.render) }
+              end)
+              concat(tag.hr(class: 'govuk-footer__section-break'))
+            end
+            concat(tag.div(class: 'govuk-footer__meta') do
+              concat(tag.div(class: 'govuk-footer__meta-item govuk-footer__meta-item--grow') do
+                concat(meta.render) if meta
+                concat(footer_logo)
+                concat(footer_content_licence)
+              end)
+              concat(footer_copyright)
+            end)
+          end
+        end
+      end
+
+      # rubocop:enable Metrics/AbcSize
+
+      # The default attributes for the breadcrumbs
+
+      DEFAULT_ATTRIBUTES = { class: 'govuk-footer' }.freeze
+
+      private
+
+      # Generates the logo used in the footer
+      #
+      # @return [ActiveSupport::SafeBuffer]
+
+      def footer_logo
+        tag.svg(
+          class: 'govuk-footer__licence-logo',
+          aria: { hidden: 'true' },
+          focusable: 'false',
+          xmlns: 'http://www.w3.org/2000/svg',
+          viewBox: '0 0 483.2 195.7',
+          height: '17',
+          width: '41'
+        ) do
+          tag.path(
+            fill: 'currentColor',
+            d: 'M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145'
+          )
+        end
+      end
+
+      # Generates the content licence for the footer
+      #
+      # @return [ActiveSupport::SafeBuffer]
+
+      def footer_content_licence
+        tag.span(class: 'govuk-footer__licence-description') do
+          if options[:content_licence]
+            concat(options[:content_licence])
+          else
+            concat('All content is available under the')
+            concat(link_to('Open Government Licence v3.0', 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/', class: 'govuk-footer__link', rel: 'license'))
+            concat(', except where otherwise stated')
+          end
+        end
+      end
+
+      # Generates the copyright used in the footer
+      #
+      # @return [ActiveSupport::SafeBuffer]
+
+      def footer_copyright
+        tag.div(class: 'govuk-footer__meta-item') do
+          link_to(options[:copyright], 'https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/', class: 'govuk-footer__link govuk-footer__copyright-logo')
+        end
+      end
+    end
+  end
+end

data/lib/ccs/components/govuk/form_group.rb

@@ -0,0 +1,58 @@
+require_relative '../base'
+require_relative 'error_message'
+
+module CCS::Components
+  module GovUK
+    # = GOV.UK FormGroup
+    #
+    # This helper is used for generating the form group component from the Government Design Systems
+    #
+    # @!attribute [r] attribute
+    #   @return [String,Symbol] Attribute that the form group is for
+    # @!attribute [r] error_message
+    #   @return [String] Text for the error message
+
+    class FormGroup < Base
+      private
+
+      attr_reader :attribute, :error_message
+
+      public
+
+      # @param attribute [String,Symbol] the attribute that the form group is for
+      # @param error_message [String] (nil) the error message to be displayed
+      # @param options [Hash] options that will be used in customising the HTML
+      #
+      # @option options [String] :classes additional CSS classes for the form group HTML
+      # @option options [Hash] :attributes ({}) any additional attributes that will added as part of the HTML
+
+      def initialize(attribute:, error_message: nil, **options)
+        super(**options)
+
+        @options[:attributes][:id] ||= "#{attribute}-form-group"
+        @options[:attributes][:class][..15] = 'govuk-form-group govuk-form-group--error' if error_message
+
+        @attribute = attribute
+        @error_message = error_message
+      end
+
+      # Generates the HTML for the GOV.UK Form Group component
+      #
+      # @yield HTML that will be contained within the 'govuk-form-group' div
+      #
+      # @yieldparam displayed_error_message [ActiveSupport::SafeBuffer] the HTML for the error message (if there is one)
+      #
+      # @return [ActiveSupport::SafeBuffer]
+
+      def render
+        tag.div(**options[:attributes]) do
+          yield((ErrorMessage.new(message: error_message, attribute: attribute, context: context).render if error_message))
+        end
+      end
+
+      # The default attributes for the form group
+
+      DEFAULT_ATTRIBUTES = { class: 'govuk-form-group' }.freeze
+    end
+  end
+end

data/lib/ccs/components/govuk/header/link.rb

@@ -0,0 +1,54 @@
+require_relative '../../base'
+
+module CCS::Components
+  module GovUK
+    class Header < Base
+      # = GOV.UK Header link
+      #
+      # The individual header link item
+      #
+      # @!attribute [r] text
+      #   @return [String] Text for the header link
+      # @!attribute [r] href
+      #   @return [String] The href for the header link
+
+      class Link < Base
+        private
+
+        attr_reader :text, :href
+
+        public
+
+        # @param text [String] the text for the header link
+        # @param href [String] the href for the header link
+        # @param options [Hash] options that will be used in customising the HTML
+        #
+        # @option options [Boolean] :active flag to mark the navigation item as active or not
+        # @option options [Hash] :attributes any additional attributes that will added as part of the HTML
+
+        def initialize(text:, href: nil, **options)
+          super(**options)
+
+          @text = text
+          @href = href
+        end
+
+        # Generates the HTML for the GOV.UK Header link
+        #
+        # @return [ActiveSupport::SafeBuffer]
+
+        def render
+          tag.li(class: "govuk-header__navigation-item #{'govuk-header__navigation-item--active' if options[:active]}".rstrip) do
+            if href
+              options[:attributes][:class] = 'govuk-header__link'
+
+              link_to(text, href, **options[:attributes])
+            else
+              text
+            end
+          end
+        end
+      end
+    end
+  end
+end