From 5335cf824dd1bafe0970645d24664e007d3965aa Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 27 Oct 2023 00:32:53 +0100
Subject: [PATCH] Show examples using `govuk-frontend.min.css`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We’re now using `govuk-frontend.min.css` from the GOV.UK Frontend package

Additionally, each preview uses a minimal `example.css` so the Design System website stylesheet is no longer neeeded
---
 lib/metalsmith.js                |  5 +++++
 src/stylesheets/example.scss     | 10 ++++++++++
 src/stylesheets/main.scss        |  9 ---------
 views/layouts/layout-example.njk |  5 +++--
 4 files changed, 18 insertions(+), 11 deletions(-)
 create mode 100644 src/stylesheets/example.scss

diff --git a/lib/metalsmith.js b/lib/metalsmith.js
index 36201393d3..97ef045766 100644
--- a/lib/metalsmith.js
+++ b/lib/metalsmith.js
@@ -138,6 +138,11 @@ module.exports = metalsmith
         dest: 'assets'
       }),
 
+      copyAssets('govuk-frontend.min.css?(.map)', {
+        cwd: dirname(require.resolve('govuk-frontend')),
+        dest: 'stylesheets'
+      }),
+
       copyAssets('**/iframeResizer.contentWindow.@(map|min.js)', {
         cwd: join(dirname(require.resolve('iframe-resizer')), 'js'),
         dest: 'javascripts/vendor'
diff --git a/src/stylesheets/example.scss b/src/stylesheets/example.scss
new file mode 100644
index 0000000000..57638211ff
--- /dev/null
+++ b/src/stylesheets/example.scss
@@ -0,0 +1,10 @@
+@import "example-init";
+
+.app-example-page__wrapper {
+  overflow: auto;
+  background-color: govuk-colour("white");
+}
+
+.app-example-page {
+  padding: govuk-spacing(6);
+}
diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
index f3bc39029a..b62e01632a 100644
--- a/src/stylesheets/main.scss
+++ b/src/stylesheets/main.scss
@@ -120,15 +120,6 @@ $app-code-color: #d13118;
   }
 }
 
-.app-example-page__wrapper {
-  overflow: auto;
-  background-color: govuk-colour("white");
-}
-
-.app-example-page {
-  padding: govuk-spacing(6);
-}
-
 // Copy button
 .app-copy-button {
   $copy-button-colour: #00823b;
diff --git a/views/layouts/layout-example.njk b/views/layouts/layout-example.njk
index 9916911ef3..837d186851 100644
--- a/views/layouts/layout-example.njk
+++ b/views/layouts/layout-example.njk
@@ -1,6 +1,6 @@
 {% extends "govuk/template.njk" %}
 
-{% set htmlClasses = 'app-example-page__wrapper' %}
+{% set htmlClasses = "app-example-page__wrapper" %}
 {% set assetUrl = 'https://design-system.service.gov.uk/assets' %}
 
 {% block pageTitle %}{{ title | smartypants }} – Example – GOV.UK Design System{% endblock %}
@@ -12,7 +12,8 @@
   <meta name="og:description" content="{{ description | smartypants }}">
   <link rel="canonical" href="{{ canonical }}">
 
-  <link href="{{ getFingerprint('stylesheets/main.css') }}" rel="stylesheet" media="all">
+  <link href="{{ getFingerprint('stylesheets/govuk-frontend.min.css') }}" rel="stylesheet" media="all">
+  <link href="{{ getFingerprint('stylesheets/example.css') }}" rel="stylesheet" media="all">
   {#- Include any additional stylesheets specified in the example frontmatter #}
   {% for stylesheet in stylesheets %}
     <link href="{{ getFingerprint(stylesheet) }}" rel="stylesheet" media="all">