Add half-width flag for highlight boxes

When provided, this will render the highlight boxes at 50% width each rather than 33% on desktop.
This is for use within 2/3 layouts.

CHANGELOG.md

@@ -7,6 +7,9 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Add half_width flag for higlight boxes (PR #520)
 
 ## 9.22.0
 

app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss

@@ -26,6 +26,13 @@
   }
 }
 
+.gem-c-highlight-boxes__item-wrapper--half-width {
+  @include media(desktop) {
+    width: 50%;
+    padding: ($gutter / 6) ($gutter-half + $gutter-one-third) ($gutter-half + $gutter-one-third) 0;
+  }
+}
+
 .gem-c-highlight-boxes__item {
   @include box-sizing(border-box);
   border: 1px solid $grey-2;

app/views/govuk_publishing_components/components/_highlight_boxes.html.erb

@@ -1,7 +1,9 @@
 <%
   items ||= []
   inverse ||= false
+  half_width ||= false
   within_multitype_list ||= false
+  half_width_class = "gem-c-highlight-boxes__item-wrapper--half-width" if half_width
   inverse_class = "gem-c-highlight-boxes--inverse" if inverse
   highlight_boxes_helper = GovukPublishingComponents::Presenters::HighlightBoxesHelper.new(local_assigns)
 %>
@@ -10,7 +12,7 @@
     <ol class="gem-c-highlight-boxes" <%= "data-module=track-click" if highlight_boxes_helper.data_tracking? %>>
   <% end %>
     <% items.each do |content_item| %>
-      <li class="gem-c-highlight-boxes__item-wrapper">
+      <li class="gem-c-highlight-boxes__item-wrapper <%= half_width_class %>">
         <div class="gem-c-highlight-boxes__item <%= inverse_class %>">
           <%= link_to(
             content_item[:link].fetch(:text),

app/views/govuk_publishing_components/components/docs/highlight_boxes.yml

@@ -107,6 +107,35 @@ examples:
           document_type: Speech
           organisation: DfE and Ofqual
           public_updated_at: 2016-06-27 10:29:44
+  half_width:
+    description: The default component displays 3 highlight boxes in on row on desktop; 2 on tablet; and full-width on mobile. There are cases where we might want to show just two items per row even on desktop, for example two-third layouts.
+    data:
+      half_width: true
+      items:
+      - link:
+          text: Becoming an apprentice
+          path: /becoming-an-apprentice
+          description: Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
+        metadata:
+          document_type: Speech
+          organisation: DfE and Ofqual
+          public_updated_at: 2016-06-27 10:29:44
+      - link:
+          text: Becoming an apprentice
+          path: /becoming-an-apprentice
+          description: Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
+        metadata:
+          document_type: Speech
+          organisation: DfE and Ofqual
+          public_updated_at: 2016-06-27 10:29:44
+      - link:
+          text: Becoming an apprentice
+          path: /becoming-an-apprentice
+          description: Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
+        metadata:
+          document_type: Speech
+          organisation: DfE and Ofqual
+          public_updated_at: 2016-06-27 10:29:44
   with_data_tracking_attributes:
     data:
       items:

spec/components/highlight_boxes_spec.rb

@@ -170,6 +170,28 @@ def component_name
     )
 
     assert_select ".gem-c-highlight-boxes__title.gem-c-highlight-boxes__title--featured"
+    assert_select ".gem-c-highlight-boxes__item-wrapper--half-width", false
+  end
+
+  it "adds half width class when half_width flag passed" do
+    render_component(
+      half_width: true,
+      items: [
+        link: {
+          text: 'Become an apprentice',
+          path: '/become-an-apprentice',
+          description: "How to become an apprentice",
+          featured: true
+        },
+        metadata: {
+          public_updated_at: Time.zone.parse("2017-01-05 14:50:33 +0000"),
+          organisations: 'Department of Education',
+          document_type: 'Guide'
+        }
+      ]
+    )
+
+    assert_select ".gem-c-highlight-boxes__item-wrapper--half-width"
   end
 
   it "adds data tracking attributes when data_attributes provided" do