Move inline styles to a stylesheet

x-govuk · Dec 6, 2023 · 2c708b2 · 2c708b2
1 parent 33596b1
commit 2c708b2
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,4 @@
+
+@import "govuk-frontend/govuk/base";
+
+@import "../components/_example.scss";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@

		@import "govuk-frontend/govuk/base";

		@import "../components/_example.scss";