govuk_publishing_components 21.57.1 → 21.60.2

data/app/views/govuk_publishing_components/component_guide/index.html.erb

@@ -2,12 +2,13 @@
 
 <div class="component-markdown">
   <p>Components are packages of template, style, behaviour and documentation that live in your application.</p>
-  <p>A component must:</p>
+  <p>See the <a href="https://github.com/alphagov/govuk_publishing_components">govuk_publishing_components gem</a> for further details, or <a href="https://docs.publishing.service.gov.uk/manual/components.html#component-guides">a list of all component guides</a>.</p>
   <ul>
-    <li><a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_principles.md">meet the component principles</a></li>
-    <li><a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_conventions.md">follow component conventions</a></li>
+    <li>Read about how to <a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/publishing-to-rubygems.md">release a new version of the gem</a></li>
+    <% if ENV["MAIN_COMPONENT_GUIDE"] %>
+      <li><a href="/component-guide/audit">View component audits</a></li>
+    <% end %>
   </ul>
-  <p>See the <a href="https://github.com/alphagov/govuk_publishing_components">govuk_publishing_components gem</a> for further details, or <a href="https://docs.publishing.service.gov.uk/manual/components.html#component-guides">a list of all component guides</a>.</p>
 </div>
 
 <form role="search" data-module="filter-components" class="component-search">
@@ -86,3 +87,7 @@
     </li>
   <% end %>
 </ul>
+
+<div class="component-markdown">
+  <p class="govuk-body">If you cannot find a suitable component consider extending an existing component or <a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/develop-component.md">creating a new one</a>.</p>
+</div>

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

@@ -10,7 +10,7 @@
 %>
 
 <script type="application/ld+json">
-  <%= raw breadcrumb_presenter.structured_data.to_json %>
+  <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
 </script>
 
 <div class="<%= classes %>" data-module="track-click">

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

@@ -7,7 +7,7 @@
 <% if card_helper.href || card_helper.extra_links.any? %>
   <div class="gem-c-image-card <%= "gem-c-image-card--large" if card_helper.large %> <%= brand_helper.brand_class %>"
     <%= "data-module=track-click" if card_helper.is_tracking? %>
-  >
+    <%= "lang=#{card_helper.lang}" if card_helper.lang %>>
     <%= card_helper.image %>
 
     <div class="gem-c-image-card__text-wrapper">

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

@@ -0,0 +1,26 @@
+<%
+  id ||= nil
+  extra_spacing ||= nil
+  list_type ||= "unordered"
+  visible_counters ||= nil
+  items ||= []
+  aria_label ||= nil
+
+  classes = %w(gem-c-list govuk-list)
+  classes << "govuk-list--bullet" if visible_counters && list_type === "unordered"
+  classes << "govuk-list--number" if visible_counters && list_type === "number"
+  classes << "govuk-list--spaced" if extra_spacing
+
+  # Default list type is unordered list.
+  list_tag = "ul"
+
+  # Set to ordered list to override default.
+  list_tag = "ol" if list_type === "number"
+%>
+<% if items.any? %>
+  <%= content_tag list_tag, class: classes, id: id, "aria-label": aria_label do %>
+    <% items.each do |item| %>
+      <li><%= sanitize(item) %></li>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -9,7 +9,7 @@
 <% structured_data = GovukPublishingComponents::Presenters::SchemaOrg.new(page).structured_data %>
 
 <script type="application/ld+json">
-  <%= raw structured_data.to_json %>
+  <%= raw JSON.pretty_generate(structured_data) %>
 </script>
 
 <link rel="canonical" href="<%= page.canonical_url %>" />

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

@@ -6,10 +6,18 @@
   label ||= nil
   heading ||= nil
   heading_caption ||= nil
+  heading_size ||= nil
   small ||= false
   inline ||= false
   is_page_heading ||= false
-  heading_size = 'm' unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+
+  if ['s', 'm', 'l', 'xl'].include?(heading_size)
+    size = heading_size
+  elsif is_page_heading
+    size = 'xl'
+  else
+    size = 'm'
+  end
 
   description ||= nil
   hint ||= nil
@@ -28,7 +36,7 @@
   radio_classes << "govuk-radios--inline" if inline
 
   legend_classes = %w(govuk-fieldset__legend)
-  legend_classes << "govuk-fieldset__legend--#{heading_size}"
+  legend_classes << "govuk-fieldset__legend--#{size}"
 
   aria = "#{hint_id} #{"#{error_id}" if has_error}".strip if hint or has_error
 
@@ -40,9 +48,9 @@
 
     <% if heading.present? %>
       <% if is_page_heading %>
-        <%= tag.legend class: "govuk-fieldset__legend govuk-fieldset__legend--xl gem-c-title" do %>
-          <%= tag.span(heading_caption, class: "govuk-caption-xl") if heading_caption.present? %>
-          <%= tag.h1 heading, class: "gem-c-title__text" %>
+        <%= tag.legend class: legend_classes do %>
+          <%= tag.span(heading_caption, class: "govuk-caption-#{size}") if heading_caption.present? %>
+          <%= tag.h1 heading, class: "gem-c-radio__heading-text govuk-fieldset__heading" %>
         <% end %>
       <% else %>
         <%= tag.legend heading, class: legend_classes %>

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

@@ -25,14 +25,14 @@
 %>
 <% if title %>
   <script type="application/ld+json">
-    <%= raw breadcrumb_presenter.structured_data.to_json %>
+    <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
   <div class="<%= classes %>" data-module="track-click">
     <span class="gem-c-step-nav-header__part-of">Part of</span>
     <% if path %>
       <a href="<%= path %>"
-        class="gem-c-step-nav-header__title"
+        class="gem-c-step-nav-header__title govuk-link"
         data-track-category="<%= tracking_category %>"
         data-track-action="<%= tracking_action %>"
         data-track-label="<%= tracking_label %>"

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

@@ -184,6 +184,10 @@ examples:
         - label: "Blue"
           value: "blue"
   with_custom_heading_size:
+    description: |
+      This allows the size of the legend to be changed. Valid options are s, m, l, xl, defaulting to m if no option is passed. 
+
+      If the is_page_heading option is true and heading_size is not set, the text size will be xl.
     data:
       name: "favourite_colour"
       heading: "What is your favourite colour?"

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

@@ -190,6 +190,51 @@ examples:
             </tr>
           </tbody>
         </table>
+  chart_with_colours:
+    data:
+      block: |
+        <table class="js-barchart-table mc-auto-outdent">
+          <thead>
+            <tr>
+              <th scope="col">Number position</th>
+              <th scope="col">Apples</th>
+              <th scope="col">Oranges</th>
+              <th scope="col">Bananas</th>
+              <th scope="col">Pears</th>
+              <th scope="col">Grapes</th>
+              <th scope="col">Strawberries</th>
+              <th scope="col">Plums</th>
+              <th scope="col">Apricots</th>
+              <th scope="col">Pineapples</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Numbers inside bar</td>
+              <td>16</td>
+              <td>48</td>
+              <td>39</td>
+              <td>50</td>
+              <td>24</td>
+              <td>10</td>
+              <td>62</td>
+              <td>29</td>
+              <td>81</td>
+            </tr>
+            <tr>
+              <td>Numbers outside bar</td>
+              <td>2</td>
+              <td>1</td>
+              <td>2</td>
+              <td>1</td>
+              <td>1</td>
+              <td>3</td>
+              <td>3</td>
+              <td>1</td>
+              <td>2</td>
+            </tr>
+          </tbody>
+        </table>
   address:
     data:
       block: |

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

@@ -24,10 +24,13 @@ examples:
       text: 'Original consultation'
       heading_level: 3
   different_font_sizes:
-    description: Choose a different font size. Valid options are 24 (24px) and 19 (19px), with the component defaulting to 27px, appropriate for a H1. This option is not tied to the heading_level option in order to give flexibility.
+    description: |
+      Set a different font size for the heading. Uses the [GOV.UK Frontend heading sizes](https://design-system.service.gov.uk/styles/typography/#headings) but defaults to 27px for legacy reasons. Valid options are `xl`, `l`, `m` and `s`.
+
+      This option is not tied to the heading_level option in order to give flexibility.
     data:
-      text: 'Heading 3'
-      font_size: 19
+      text: 'One big heading'
+      font_size: "xl"
   with_id_attribute:
     data:
       text: 'Detail of outcome'

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

@@ -9,6 +9,7 @@ accessibility_criteria: |
 
   - include alt text for images when present
   - not have duplicate links for the image and the text
+  - if the contents of the component are in a different language than the rest of the document, include an appropriate `lang` attribute to correctly identify the language used in the component
 shared_accessibility_criteria:
   - link
 examples:
@@ -191,7 +192,7 @@ examples:
     description: Can be used for links to people pages to indicate payment type
     data:
       href: "/government/people/"
-      image_src: "http://placekitten.com/215/140"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
       image_alt: "some meaningful alt text please"
       context:
         text: "The Rt Hon"
@@ -204,3 +205,14 @@ examples:
         }
       ]
       extra_links_no_indent: true
+  with_lang:
+    description: |
+      Pass through an appropriate `lang` to set a HTML lang attribute for the component.
+      
+      The `lang` attribute **must** be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is `en` or `eng`, Korean is `ko` or `kor` - but if in doubt please check.
+    data:
+      href: "/not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      heading_text: Yr hyn rydym ni'n ei wneud
+      lang: cy

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

@@ -0,0 +1,64 @@
+name: List
+description: A list - unordered or ordered, with or without counters / bullet points.
+body: |
+  This is an ordered or unordered list, with or without visible bullets / numbers.
+
+  The `items` parameter can include HTML to display - such as links or another
+  list. This HTML can either be directly coded or come from another component.
+accessibility_criteria: |
+  The list must:
+
+  - inform the user how many items are in the list
+  - convey the content structure
+  - indicate the current page when contents span different pages, and not link to itself
+
+  The list may:
+
+  - include an `aria-label` to contextualise the list if helpful
+govuk_frontend_components:
+  - list
+examples:
+  default:
+    description: "The default is an unordered list with no bullet points or numbers."
+    data: &default-example-data
+      items:
+      - "Tony’s Chocolonely"
+      - '<a href="https://en.wikipedia.org/wiki/Cherry_Ripe_(chocolate_bar)" rel="noopener" class="govuk-link">Cherry Ripe</a>'
+      - "Snickers"
+      - "Chomp"
+      - "Penguin"
+      - "Boost"
+  unordered_list_with_aria-label:
+    description: "A list with an aria-label"
+    data:
+      aria_label: "A list of delicious chocolate bars."
+      <<: *default-example-data
+  unordered_list_with_bullet_points:
+    description: "An unordered list with visible bullet points."
+    data:
+      visible_counters: true
+      <<: *default-example-data
+  ordered_list_without_numbers:
+    description: "This is an ordered list where the numbers aren't visible."
+    data:
+      list_type: "number"
+      <<: *default-example-data
+  ordered_list_with_numbers:
+    description: |
+      This is an ordered list with the numbers visible.
+    data:
+      list_type: "number"
+      visible_counters: true
+      <<: *default-example-data
+  with_extra_spacing:
+    description: |
+      Increases the amount of spacing between the list items.
+    data:
+      extra_spacing: true
+      <<: *default-example-data
+  with_id_attribute:
+    description: |
+      Sets the `id` on the `ul` or `ol` element.
+    data:
+      id: 'super-fantastic-chocolate-list'
+      <<: *default-example-data

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

@@ -183,6 +183,10 @@ examples:
       - value: "blue"
         text: "Blue"
   with_custom_heading_size:
+    description: |
+      This allows the size of the legend to be changed. Valid options are s, m, l, xl, defaulting to m if no option is passed. 
+
+      If the is_page_heading option is true and heading_size is not set, the text size will be xl.
     data:
       name: "radio-group-description"
       heading: "What is your favourite colour?"

data/config/routes.rb

@@ -1,4 +1,5 @@
 GovukPublishingComponents::Engine.routes.draw do
+  get "/audit" => "audit#show", as: :audit
   root to: "component_guide#index", as: :component_guide
   get ":component/preview" => "component_guide#preview", as: :component_preview_all
   get ":component/:example/preview" => "component_guide#preview", as: :component_preview

data/lib/govuk_publishing_components/presenters/checkboxes_helper.rb

@@ -14,7 +14,6 @@ module GovukPublishingComponents
                   :id,
                   :hint_text,
                   :description,
-                  :heading_size,
                   :heading_caption,
                   :has_exclusive
 
@@ -35,9 +34,8 @@ module GovukPublishingComponents
 
         @id = options[:id] || "checkboxes-#{SecureRandom.hex(4)}"
         @heading = options[:heading] || nil
-        @heading_size = options[:heading_size]
-        @heading_size = "m" unless %w[s m l xl].include?(@heading_size)
         @heading_caption = options[:heading_caption] || nil
+        @heading_size = options[:heading_size] || nil
         @is_page_heading = options[:is_page_heading]
         @description = options[:description] || nil
         @no_hint_text = options[:no_hint_text]
@@ -60,20 +58,30 @@ module GovukPublishingComponents
         end
       end
 
+      def size
+        if %w[s m l xl].include?(@heading_size)
+          @heading_size
+        elsif @is_page_heading
+          "xl"
+        else
+          "m"
+        end
+      end
+
       def heading_markup
         return unless @heading.present?
 
         if @is_page_heading
           content_tag(
             :legend,
-            class: "govuk-fieldset__legend govuk-fieldset__legend--xl gem-c-title",
+            class: "govuk-fieldset__legend govuk-fieldset__legend--#{size}",
           ) do
-            concat content_tag(:span, heading_caption, class: "govuk-caption-xl") if heading_caption.present?
-            concat content_tag(:h1, @heading, class: "gem-c-title__text")
+            concat content_tag(:span, heading_caption, class: "govuk-caption-#{size}") if heading_caption.present?
+            concat content_tag(:h1, @heading, class: "gem-c-checkboxes__heading-text govuk-fieldset__heading")
           end
         else
           classes = %w[govuk-fieldset__legend]
-          classes << "govuk-fieldset__legend--#{@heading_size}"
+          classes << "govuk-fieldset__legend--#{size}"
           classes << "gem-c-checkboxes__legend--hidden" if @visually_hide_heading
 
           content_tag(:legend, @heading, class: classes)

data/lib/govuk_publishing_components/presenters/heading_helper.rb

@@ -7,12 +7,32 @@ module GovukPublishingComponents
         @id = options[:id]
 
         @classes = ""
-        @classes << " gem-c-heading--font-size-#{options[:font_size]}" if [24, 19].include? options[:font_size]
+        @classes << heading_size(options[:font_size])
         @classes << " gem-c-heading--mobile-top-margin" if options[:mobile_top_margin]
         @classes << " gem-c-heading--padding" if options[:padding]
         @classes << " gem-c-heading--border-top-#{options[:border_top]}" if [1, 2, 5].include? options[:border_top]
         @classes << " gem-c-heading--inverse" if options[:inverse]
       end
+
+    private
+
+      def heading_size(option)
+        gem_class = "gem-c-heading--font-size-"
+        govuk_class = "govuk-heading-"
+
+        case option
+        when "xl"
+          "#{govuk_class}xl"
+        when "l"
+          "#{govuk_class}l"
+        when 24, "m"
+          "#{govuk_class}m"
+        when 19, "s"
+          "#{govuk_class}s"
+        else
+          "#{gem_class}27"
+        end
+      end
     end
   end
 end

data/lib/govuk_publishing_components/presenters/image_card_helper.rb

@@ -4,7 +4,7 @@ module GovukPublishingComponents
       include ActionView::Helpers
       include ActionView::Context
 
-      attr_reader :href, :href_data_attributes, :extra_links, :large, :extra_links_no_indent, :heading_text, :metadata
+      attr_reader :href, :href_data_attributes, :extra_links, :large, :extra_links_no_indent, :heading_text, :metadata, :lang
 
       def initialize(local_assigns)
         @href = local_assigns[:href]
@@ -18,6 +18,7 @@ module GovukPublishingComponents
         @heading_text = local_assigns[:heading_text]
         @extra_links_no_indent = local_assigns[:extra_links_no_indent]
         @metadata = local_assigns[:metadata]
+        @lang = local_assigns[:lang]
       end
 
       def is_tracking?

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "21.57.1".freeze
+  VERSION = "21.60.2".freeze
 end