Add back to top component

app/assets/stylesheets/components/_back-to-top.scss

@@ -0,0 +1,15 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.app-c-back-to-top {
+  display: inline-block;
+  margin-bottom: govuk-spacing(2);
+  margin-left: govuk-spacing(3);
+  margin-right: govuk-spacing(3);
+}
+
+.app-c-back-to-top__icon {
+  float: left;
+  margin-right: .3em;
+  width: .8em;
+  height: .968em;
+}

app/views/components/_back_to_top.html.erb

@@ -0,0 +1,11 @@
+<% add_app_component_stylesheet("back-to-top") %>
+<%
+  text ||= t("content_item.contents", default: "Contents")
+%>
+<a class="govuk-link app-c-back-to-top govuk-!-display-none-print"
+    href="<%= href %>">
+    <svg class="app-c-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17" aria-hidden="true" focusable="false">
+      <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z" />
+    </svg>
+    <%= text %>
+</a>

app/views/components/docs/back_to_top.yml

@@ -0,0 +1,17 @@
+name: Back to top link
+description: An anchor link intended to allow users to return to the top of the content.
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      href: "#contents"
+  with_different_text:
+    data:
+      href: "#contents"
+      text: "Back to top"
+  right_to_left:
+    data:
+      href: "#contents"
+    context:
+      right_to_left: true

config/initializers/dartsass.rb

@@ -1,6 +1,7 @@
 APP_STYLESHEETS = {
   "application.scss" => "application.css",
   "static-error-pages.scss" => "static-error-pages.css",
+  "components/_back-to-top.scss" => "components/_back-to-top.css",
   "components/_calendar.scss" => "components/_calendar.css",
   "components/_download-link.scss" => "components/_download-link.css",
   "components/_figure.scss" => "components/_figure.css",

spec/components/back_to_top_spec.rb

@@ -0,0 +1,19 @@
+RSpec.describe "BackToCopComponent", type: :view do
+  def component_name
+    "back_to_top"
+  end
+
+  it "fails to render a download link when no parameters given" do
+    expect { render_component({}) }.to raise_error(ActionView::Template::Error)
+  end
+
+  it "renders a back to top link when a href is given" do
+    render_component(href: "#contents")
+    expect(rendered).to have_css(".app-c-back-to-top[href='#contents']")
+  end
+
+  it "renders a back to top link with custom text" do
+    render_component(href: "#contents", text: "Back to top")
+    expect(rendered).to have_css(".app-c-back-to-top[href='#contents']", text: "Back to top")
+  end
+end