docs(examples): update example css to reflect real-life usage (#1064)

* docs(examples): update example css to reflect real-life usage The code in our examples was using application.css, which is a sass compiled file including all of govuk frontend, moj-frontend and all the custom styles for the docs site. This could cause potential issues where our own css could affect components. This commit refactors things such that the example layout includes compiled govuk-frontend and (separately) compiled moj-frontend and none of the docs site css. This ensure we are presenting (and testing) components in a more isolated way with no danger of style leakage. * docs(examples): disable govuk global styles
ministryofjustice · Jan 10, 2025 · dd472f9 · dd472f9
1 parent 63da558
commit dd472f9
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -22,8 +22,15 @@
               content="Design your service using MoJ styles, components and patterns">
         <meta property="og:image"
               content="{{ 'assets/images/moj-opengraph-image-2024.png' | rev | url }}">
-        <link href="{{ 'assets/stylesheets/application.css' | rev | url }}"
+        {% if layout == "layouts/example.njk" %}
+            <link href="{{ 'assets/stylesheets/govuk-frontend.css' | rev | url }}"
+                  rel="stylesheet">
+            <link href="{{ 'assets/stylesheets/moj-frontend.css' | rev | url }}"
               rel="stylesheet">
+        {% else %}
+            <link href="{{ 'assets/stylesheets/application.css' | rev | url }}"
+              rel="stylesheet">
+        {% endif %}
         {% block pageStyles %}{% endblock %}
         <title>
             {% block title %}{{ title }} - MoJ Design System{% endblock %}
@@ -36,6 +43,7 @@
         <script type="module" src="{{ 'assets/javascript/all.js' | rev | url }}"></script>
     </head>
     <body class="govuk-template__body">
+
         <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
         {% block body %}
            <div>

diff --git a/docs/assets/stylesheets/govuk-frontend.scss b/docs/assets/stylesheets/govuk-frontend.scss
@@ -0,0 +1,8 @@
+$govuk-page-width: 1220px !default;
+$govuk-assets-path: "../" !default;
+$govuk-global-styles: false;
+
+// GOV.UK Frontend
+@import "node_modules/govuk-frontend/dist/govuk/all";
+
+
diff --git a/docs/assets/stylesheets/moj-frontend.scss b/docs/assets/stylesheets/moj-frontend.scss
@@ -0,0 +1,6 @@
+$moj-page-width: 1220px !default;
+$moj-assets-path: "../" !default;
+
+// MOJ Frontend
+@import "src/moj/all";
+
diff --git a/gulp/docs.js b/gulp/docs.js
@@ -56,7 +56,7 @@ gulp.task(
 gulp.task(
   "docs:styles", () => {
     return gulp
-      .src("docs/assets/stylesheets/application.scss")
+      .src("docs/assets/stylesheets/*.scss")
       .pipe(sass({
         outputStyle: (process.env.ENV == 'dev' ? "expanded" : "compressed"),
       }))