From 2c708b2be96b332c511f4b47bb2c9adf627c4b7e Mon Sep 17 00:00:00 2001
From: Frankie Roberto <frankie@frankieroberto.com>
Date: Wed, 6 Dec 2023 12:19:29 +0000
Subject: [PATCH] Move inline styles to a stylesheet

---
 docs/components/_example.njk  |  2 +-
 docs/components/_example.scss | 16 ++++++++++++++++
 docs/eleventy.config.js       |  3 +++
 docs/styles/application.scss  |  4 ++++
 4 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 docs/components/_example.scss
 create mode 100644 docs/styles/application.scss

diff --git a/docs/components/_example.njk b/docs/components/_example.njk
index 052a054..22ce645 100644
--- a/docs/components/_example.njk
+++ b/docs/components/_example.njk
@@ -9,7 +9,7 @@
 ```
 {% endset %}
 
-{%- set outputHtml %}<iframe style="width: 100%; display: block; max-width: 100%; border: 0; background: white; height: 300px;" src="/examples/{{ params.component }}"></iframe><p class="govuk-body-s" style="border-top: 1px solid #b1b4b6; padding: 10px 20px;"><a href="/examples/{{ params.component }}" class="govuk-link" target="_blank">Open this example in a new tab</a></p>{%- endset %}
+{%- set outputHtml %}<iframe class="app-example__iframe" src="/examples/{{ params.component }}"></iframe><p class="app-example__link govuk-body-s"><a href="/examples/{{ params.component }}" class="govuk-link" target="_blank">Open this example in a new tab</a></p>{%- endset %}
 
 {{ govukTabs({
   items: [
diff --git a/docs/components/_example.scss b/docs/components/_example.scss
new file mode 100644
index 0000000..eac1e12
--- /dev/null
+++ b/docs/components/_example.scss
@@ -0,0 +1,16 @@
+
+.app-example__iframe {
+  width: 100%;
+  max-width: 100%;
+  height: 300px;
+  display: block;
+  border: 0;
+  background-color: govuk-colour("white");
+}
+
+.app-example__link {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-color: $govuk-border-colour;
+  padding: 10px 20px;
+}
diff --git a/docs/eleventy.config.js b/docs/eleventy.config.js
index 3101982..55d5335 100644
--- a/docs/eleventy.config.js
+++ b/docs/eleventy.config.js
@@ -21,6 +21,9 @@ module.exports = function(eleventyConfig) {
     url: process.env.GITHUB_ACTIONS
       ? 'https://x-govuk.github.io/govuk-prototype-components/'
       : '/',
+    stylesheets: [
+      '/styles/application.css'
+    ],
     header: {
       organisationLogo: 'x-govuk',
       organisationName: 'X-GOVUK',
diff --git a/docs/styles/application.scss b/docs/styles/application.scss
new file mode 100644
index 0000000..c799dda
--- /dev/null
+++ b/docs/styles/application.scss
@@ -0,0 +1,4 @@
+
+@import "govuk-frontend/govuk/base";
+
+@import "../components/_example.scss";