From 0edc4d6c9b7f7c83dbfe205d7e7a5de49f8971ff Mon Sep 17 00:00:00 2001
From: alex-ju <alex-ju@users.noreply.github.com>
Date: Sat, 18 Nov 2017 19:25:15 +0000
Subject: [PATCH] Add toc component with markup example

---
 source/components/_toc.erb              | 82 +++++++++++++++++++++++++
 source/stylesheets/components/_toc.scss | 39 ++++++++++++
 2 files changed, 121 insertions(+)
 create mode 100644 source/components/_toc.erb
 create mode 100644 source/stylesheets/components/_toc.scss

diff --git a/source/components/_toc.erb b/source/components/_toc.erb
new file mode 100644
index 0000000000..73c8499fe6
--- /dev/null
+++ b/source/components/_toc.erb
@@ -0,0 +1,82 @@
+<nav class="app-c-toc">
+  <ul class="app-c-toc__section">
+    <li class="app-c-toc__section-item">
+      <a href="#">Back link</a>
+    </li>
+    <li class="app-c-toc__section-item--current">
+      <a href="#">Breadcrumbs</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Button</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Checkbox</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Cookie banner</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Date input</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Download links</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Error message</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Error summary</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Feedback link</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Fieldset</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">File upload</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Input</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Inset text</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Label</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Legal text</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">List</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Panel</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Phase banner</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Previous next</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Radio</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Select</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Skip link</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Table</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Tag</a>
+    </li>
+    <li class="app-c-toc__section-item">
+      <a href="#">Textarea</a>
+    </li>
+  </ul>
+</nav>
diff --git a/source/stylesheets/components/_toc.scss b/source/stylesheets/components/_toc.scss
new file mode 100644
index 0000000000..7909875d06
--- /dev/null
+++ b/source/stylesheets/components/_toc.scss
@@ -0,0 +1,39 @@
+@include exports("toc") {
+
+  .app-c-toc {
+    padding: 0 $govuk-gutter-half;
+    @include govuk-core-16;
+  }
+
+  .app-c-toc__section {
+    margin: $govuk-gutter-half 0;
+    padding: 0;
+    list-style-type: none;
+
+    a,
+    a:link,
+    a:visited {
+      display: block;
+      padding: 8px ($govuk-gutter * 2) 8px $gutter-one-third;
+      border-left: 4px solid transparent;
+      color: $govuk-link-colour;
+      background: inherit;
+      text-decoration: none;
+    }
+
+    a:hover {
+      border-left-color: $govuk-link-hover-colour;
+    }
+  }
+
+  .app-c-toc__section-item--current {
+    a,
+    a:link,
+    a:visited {
+      border-left-color: $govuk-link-colour;
+      background: $app-light-grey;
+      font-weight: bold;
+    }
+  }
+
+}