Add options and helpers

- adds the shared helper to control margin bottom
- adds the component wrapper helper because I initially remembered it wrong and thought it did margin bottom but then remembered it was the shared helper that did that but actually having the component wrapper helper on this component is no bad thing
- adds an option for a download link

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

@@ -13,10 +13,16 @@
   keys ||= []
   chart_overview ||= nil
   hide_legend ||= false
+  link ||= false
 
   chart_id = "chart-id-#{SecureRandom.hex(4)}"
   table_id = "table-id-#{SecureRandom.hex(4)}"
 
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-chart")
+  component_helper.add_class(shared_helper.get_margin_bottom)
+
   require "chartkick"
   Chartkick.options[:html] = '<div id="%{id}"><noscript><p class="govuk-body">Our charts are built using JavaScript but all the data is also available in the table below.</p></noscript></div>'
   # config options are here: https://developers.google.com/chart/interactive/docs/gallery/linechart
@@ -58,7 +64,7 @@
 %>
 <% if rows.length > 0 && keys.length > 0 %>
   <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
-  <div class="gem-c-chart">
+  <%= tag.div(**component_helper.all_attributes) do %>
     <% if chart_heading %>
       <%= render "govuk_publishing_components/components/heading", {
         text: chart_heading,
@@ -134,5 +140,11 @@
         </div>
       <% end %>
     </div>
-  </div>
+
+    <% if link %>
+      <p class="govuk-body">
+        <%= link_to "Download chart data", link,  class: "govuk-link" %>
+      </p>
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -13,6 +13,7 @@ accessibility_criteria: |
     - use line colours with a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
 shared_accessibility_criteria:
   - link
+uses_component_wrapper_helper: true
 examples:
   default:
     data:
@@ -167,3 +168,71 @@ examples:
             - 118
             - 85
             - 80
+  with_a_download_link:
+    description: Add a download link to the original data. Doesn't do anything clever, just creates a link to the URL passed.
+    data:
+      chart_heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      link: 'https://www.gov.uk'
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+        - 4th
+        - 5th
+        - 6th
+        - 7th
+      rows:
+        - label: January 2015
+          values:
+            - 5
+            - 119
+            - 74
+            - 117
+            - 33
+            - 89
+            - 79
+        - label: January 2016
+          values:
+            - 3
+            - 8
+            - 37
+            - 82
+            - 118
+            - 85
+            - 80
+  with_margin_bottom:
+    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a bottom margin of 15px.
+    data:
+      chart_heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      margin_bottom: 9
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+        - 4th
+        - 5th
+        - 6th
+        - 7th
+      rows:
+        - label: January 2015
+          values:
+            - 5
+            - 119
+            - 74
+            - 117
+            - 33
+            - 89
+            - 79
+        - label: January 2016
+          values:
+            - 3
+            - 8
+            - 37
+            - 82
+            - 118
+            - 85
+            - 80

spec/components/chart_spec.rb

@@ -39,7 +39,7 @@ def component_name
 
   it "renders when given valid data" do
     render_component(data)
-    assert_select ".gem-c-chart", 1
+    assert_select '.gem-c-chart.govuk-\!-margin-bottom-3', 1
   end
 
   it "renders the correct table data horizontally" do
@@ -90,4 +90,18 @@ def component_name
     render_component(data)
     assert_select ".gem-c-chart__overview", text:
   end
+
+  it "can include a download link" do
+    data[:link] = "https://www.gov.uk"
+    render_component(data)
+
+    assert_select '.govuk-link[href="https://www.gov.uk"]', text: "Download chart data"
+  end
+
+  it "can have a different bottom margin" do
+    data[:margin_bottom] = 0
+    render_component(data)
+
+    assert_select '.gem-c-chart.govuk-\!-margin-bottom-0'
+  end
 end