Topic list add branding

Gemfile

@@ -6,7 +6,7 @@ gem 'gds-api-adapters', '~> 52.5'
 gem 'govuk_ab_testing', '~> 2.4.1'
 gem 'govuk_app_config', '~> 1.5.0'
 gem 'govuk_frontend_toolkit', '~> 7.5.0'
-gem 'govuk_publishing_components', '~> 7.1.0'
+gem 'govuk_publishing_components', '~> 7.3.0'
 gem 'plek', '~> 2.1.1'
 gem 'rails', '5.2.0'
 gem 'sass-rails', '~> 5.0.3'

Gemfile.lock

@@ -139,7 +139,7 @@ GEM
     govuk_frontend_toolkit (7.5.0)
       railties (>= 3.1.0)
       sass (>= 3.2.0)
-    govuk_publishing_components (7.1.0)
+    govuk_publishing_components (7.3.0)
       govspeak (>= 5.0.3)
       govuk_app_config
       govuk_frontend_toolkit
@@ -197,13 +197,13 @@ GEM
       rails (>= 4.1)
     mocha (1.5.0)
       metaclass (~> 0.0.1)
-    money (6.11.1)
+    money (6.11.3)
       i18n (>= 0.6.4, < 1.1)
     multi_json (1.13.1)
     multi_test (0.1.2)
     multipart-post (2.0.0)
     netrc (0.11.0)
-    nio4r (2.3.0)
+    nio4r (2.3.1)
     nokogiri (1.8.2)
       mini_portile2 (~> 2.3.0)
     nokogumbo (1.5.0)
@@ -361,7 +361,7 @@ DEPENDENCIES
   govuk_ab_testing (~> 2.4.1)
   govuk_app_config (~> 1.5.0)
   govuk_frontend_toolkit (~> 7.5.0)
-  govuk_publishing_components (~> 7.1.0)
+  govuk_publishing_components (~> 7.3.0)
   govuk_schemas (~> 3.1.0)
   jasmine-rails
   minitest-spec-rails

app/assets/stylesheets/components/_topic-list.scss

@@ -4,10 +4,20 @@
   margin-bottom: $gutter-one-third;
 }
 
-.app-c-topic-list__link {
+.app-c-topic-list__link--no-underline {
   text-decoration: none;
 
   &:hover {
     text-decoration: underline;
   }
 }
+
+.app-c-topic-list--small {
+  .app-c-topic-list__item {
+    margin-bottom: $gutter-one-third / 2;
+  }
+
+  .app-c-topic-list__link {
+    @include bold-16;
+  }
+}

app/views/components/_topic-list.html.erb

@@ -1,17 +1,22 @@
 <%
   items ||= []
   see_more_link ||= false
+  small ||= false
+  component_size = "app-c-topic-list--small" if small
+
+  brand ||= false
+  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
 %>
 <% if items.any? %>
-  <ol class="app-c-topic-list">
+  <ol class="app-c-topic-list <%= component_size %> <%= brand_helper.brand_class %>">
     <% items.each do |item| %>
       <li class="app-c-topic-list__item">
         <%=
           link_to(
             item[:text],
             item[:path],
             data: item[:data_attributes],
-            class: 'app-c-topic-list__link'
+            class: "app-c-topic-list__link app-c-topic-list__link--no-underline #{brand_helper.color_class}"
           )
         %>
       </li>
@@ -22,7 +27,8 @@
           link_to(
             see_more_link[:text],
             see_more_link[:path],
-            data: see_more_link[:data_attributes]
+            data: see_more_link[:data_attributes],
+            class: "app-c-topic-list__link #{brand_helper.color_class}"
           )
         %>
       </li>

app/views/components/docs/topic-list.yml

@@ -49,3 +49,29 @@ examples:
           track_options:
             dimension28: 2
             dimension29: 'Aggregates Levy: register or change your details'
+  with_branding:
+    description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_branding.md) can be added to the component as shown.
+    data:
+      brand: 'department-for-environment-food-rural-affairs'
+      items:
+      - text: 'Environmental taxes, reliefs and schemes for businesses'
+        path: '/green-taxes-and-reliefs'
+      - text: 'Aggregates Levy: register or change your details'
+        path: '/guidance/aggregates-levy-register-or-change-your-details'
+      - text: 'Pay environmental taxes'
+        path: '/guidance/pay-environmental-taxes'
+      see_more_link:
+        text: 'See more'
+        path: '/more'
+  small_version:
+    description: A version of the component with a smaller font size and reduced vertical spacing.
+    data:
+      small: true
+      items:
+      - text: 'Environmental taxes, reliefs and schemes for businesses'
+        path: '/green-taxes-and-reliefs'
+      - text: 'Aggregates Levy: register or change your details'
+        path: '/guidance/aggregates-levy-register-or-change-your-details'
+      see_more_link:
+        text: 'See more and more and more'
+        path: '/more'

test/components/topic_list_test.rb

@@ -5,6 +5,23 @@ def component_name
     "topic-list"
   end
 
+  def simple_item
+    [
+      {
+        path: '/path',
+        text: 'Text'
+      }
+    ]
+  end
+
+  def see_more_link
+    {
+      path: '/more',
+      text: 'More',
+      data_attributes: { test: 'test' }
+    }
+  end
+
   test "renders nothing without a list of items" do
     assert_empty render_component({})
   end
@@ -29,21 +46,19 @@ def component_name
   end
 
   test "renders a see more link" do
-    see_more_link = {
-                      path: '/more',
-                      text: 'More',
-                      data_attributes: { test: 'test' }
-                    }
-
-    items = [
-              {
-                path: '/path',
-                text: 'Text'
-              }
-            ]
+    render_component(items: simple_item, see_more_link: see_more_link)
+    assert_select ".app-c-topic-list__item a[href='/more'][data-test='test']", text: 'More'
+  end
 
+  test "adds branding correctly" do
+    render_component(items: simple_item, see_more_link: see_more_link, brand: 'attorney-generals-office')
+    assert_select ".app-c-topic-list.brand--attorney-generals-office"
+    assert_select ".app-c-topic-list .app-c-topic-list__link.brand__color"
+    assert_select ".brand__color", text: "More"
+  end
 
-    render_component(items: items, see_more_link: see_more_link)
-    assert_select ".app-c-topic-list__item a[href='/more'][data-test='test']", text: 'More'
+  test "renders small version" do
+    render_component(items: simple_item, small: true)
+    assert_select ".app-c-topic-list.app-c-topic-list--small"
   end
 end