From 6c1bb3eac009af8c6e0f1edbb1d99c8291d5b96b Mon Sep 17 00:00:00 2001
From: Tijmen Brommet <tijmen@gmail.com>
Date: Tue, 10 Jul 2018 16:03:21 +0100
Subject: [PATCH] Allow components to link to the Design System

If a component uses a component from the design system, it can now
specify so in the YAML file using the `govuk_frontend_components` key.

This will show links on the component page.

https://trello.com/c/R7Ija8dR/1-create-initial-layout-system-for-admin-a
pplications
---
 CHANGELOG.md                                        |  1 +
 .../govuk_publishing_components/component_doc.rb    |  4 ++++
 .../component_guide/show.html.erb                   | 13 +++++++++++++
 3 files changed, 18 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3ac8c5d4c..d8d5426e1b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 ## Unreleased
 
 * Add the [GOV.UK Frontend](https://design-system.service.gov.uk/) library to the gem (PR #398)
+* Allow linking to the Design System on component pages (PR #401)
 
 ## 9.3.6
 
diff --git a/app/models/govuk_publishing_components/component_doc.rb b/app/models/govuk_publishing_components/component_doc.rb
index e77638e664..fd37b92145 100644
--- a/app/models/govuk_publishing_components/component_doc.rb
+++ b/app/models/govuk_publishing_components/component_doc.rb
@@ -62,6 +62,10 @@ def partial_path
       end
     end
 
+    def govuk_frontend_components
+      component[:govuk_frontend_components].to_a
+    end
+
     def github_search_url
       params = { q: "org:alphagov #{partial_path}", type: "Code" }
       "https://github.com/search?#{params.to_query}"
diff --git a/app/views/govuk_publishing_components/component_guide/show.html.erb b/app/views/govuk_publishing_components/component_guide/show.html.erb
index 9c9019fbd5..c621593af9 100644
--- a/app/views/govuk_publishing_components/component_guide/show.html.erb
+++ b/app/views/govuk_publishing_components/component_guide/show.html.erb
@@ -28,6 +28,19 @@
 
   <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>
 
+  <% if @component_doc.govuk_frontend_components.any? %>
+    <h2 class="component-doc-h2">GOV.UK Design System</h2>
+    <%= render 'govuk_publishing_components/components/govspeak' do %>
+      <p>This component incorporates components from the <%= link_to "GOV.UK Design System", "https://design-system.service.gov.uk" %>:</p>
+
+      <ul>
+      <% @component_doc.govuk_frontend_components.each do |component| %>
+        <li><%= link_to component.humanize, "https://design-system.service.gov.uk/components/#{component}" %></li>
+      <% end %>
+      </ul>
+    <% end %>
+  <% end %>
+
   <% if @component_doc.accessibility_criteria.present? %>
     <div class="grid-row component-accessibility-criteria">
       <div class="column-two-thirds">