feat: add support for v5 of the Design System (#528)

* feat: add support for v5 of the Design System Allows the Pattern Library to be used with v5 of the Design System, and uses v5 by default in the documentation. Due to changes in file structure and browser support, we cannot continue to provide support for versions 3 or 4 of govuk-frontend. Due to upstream changes in govuk-frontend, this package no longer supports Internet Explorer 8. BREAKING CHANGE: This package no longer supports v3 or v4 of govuk-frontend BREAKING CHANGE: This package no longer supports Internet Explorer 8
ministryofjustice · Jan 8, 2024 · 6bfd2a3 · 6bfd2a3
1 parent fe1e06b
commit 6bfd2a3
Show file tree

Hide file tree

Showing 32 changed files with 49 additions and 157 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -14,7 +14,7 @@ module.exports = function (eleventyConfig) {
   const nunjucksEnv = nunjucks.configure([
     ".",
     "docs/_includes/",
-    "node_modules/govuk-frontend/",
+    "node_modules/govuk-frontend/dist/",
     "node_modules/@ministryofjustice/frontend/",
   ]);
 

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -34,7 +34,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x, 18.x]
+        node-version: [12.x, 14.x, 16.x, 18.x, 20.x]
 
     steps:
     - uses: actions/checkout@v4

diff --git a/README.md b/README.md
@@ -32,8 +32,7 @@ Once installed, you will be able to use the code from the examples in the [MOJ P
 
 MOJ Frontend will allow you to build services that comply with the [guidance in the Service Manual][service-manual-browsers].
 
-If you are including MOJ Frontend as part of a stylesheet that you are generating in your application's build pipeline, you will need to [generate and
-include a separate stylesheet in order to support Internet Explorer 8](docs/installation/supporting-internet-explorer-8.md).
+MOJ Frontend no longer supports Internet Explorer 8. If you need IE8 support, then [you must use an old version or provide your own support](docs/installation/supporting-internet-explorer-8.md).
 
 [service-manual-browsers]: https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices#browsers-to-test-in
 

diff --git a/assets/all.js b/assets/all.js
@@ -1,11 +1,11 @@
-import GOVUKFrontend from "govuk-frontend/govuk/all.js";
+import { initAll as initGOVUKFrontend } from "govuk-frontend/dist/govuk/all.mjs";
 import MOJFrontend from "../package/moj/all.js";
 
 import Cookies from "./javascript/cookies";
 import Copy from "./javascript/copy";
 import Tabs from "./javascript/tabs";
 
-GOVUKFrontend.initAll();
+initGOVUKFrontend();
 MOJFrontend.initAll();
 
 $(function () {

diff --git a/assets/sass/application-ie8.scss b/assets/sass/application-ie8.scss
diff --git a/assets/sass/application.scss b/assets/sass/application.scss
@@ -4,7 +4,7 @@ $moj-assets-path: "../" !default;
 $govuk-assets-path: "../" !default;
 
 // GOV.UK Frontend
-@import "node_modules/govuk-frontend/govuk/all";
+@import "node_modules/govuk-frontend/dist/govuk/all";
 
 // MOJ Frontend
 @import "src/moj/all";

diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -15,16 +15,15 @@
     <meta name="description" content="Design your service using MoJ styles, components and patterns">
     <meta property="og:image" content="{{ '/assets/images/moj-opengraph-image.png' | url }}">
 
-    <!--[if lte IE 8]><link href="{{ '/assets/stylesheets/application-ie8.css' | url }}" rel="stylesheet"><![endif]-->
-    <!--[if gt IE 8]><!--><link href="{{ '/assets/stylesheets/application.css' | url }}" rel="stylesheet"><!--<![endif]-->
+    <link href="{{ '/assets/stylesheets/application.css' | url }}" rel="stylesheet">
     <title>{% block title %}{{ title }} - MoJ Design System{% endblock %}</title>
 
-    <script type="text/javascript" src="https://www.googletagmanager.com/gtag/js?id=G-VTGX4YLSVL" async></script>
-    <script type="text/javascript" src="{{ '/assets/javascript/jquery.js' | url }}"></script>
-    <script type="text/javascript" src="{{ '/assets/javascript/all.js' | url }}"></script>
+    <script type="module" src="https://www.googletagmanager.com/gtag/js?id=G-VTGX4YLSVL" async></script>
+    <script type="module" src="{{ '/assets/javascript/jquery.js' | url }}"></script>
+    <script type="module" src="{{ '/assets/javascript/all.js' | url }}"></script>
   </head>
   <body class="govuk-template__body">
-    <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+    <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
 
     {% block body %}
       <div>
@@ -44,10 +43,6 @@
 
       </div>
     {% endblock %}
-
-    <script type="text/javascript">
-      MOJFrontend.initAll();
-    </script>
     {% block pageScripts %}{% endblock %}
   </body>
 </html>
diff --git a/docs/_includes/layouts/community.njk b/docs/_includes/layouts/community.njk
@@ -83,11 +83,3 @@
     </div>
   </div>
 {% endblock %}
-
-{% block pageScripts %}
-  <script>
-    $('[data-module="app-tabs"]').each(function(e, el) {
-      new Tabs($(el));
-    });
-  </script>
-{% endblock %}
diff --git a/docs/_includes/layouts/example.njk b/docs/_includes/layouts/example.njk
@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block pageScripts %}
-  <script type="text/javascript">
+  <script type="module">
     {% include (page.inputPath | getScriptPath) ignore missing %}
   </script>
 {% endblock %}
diff --git a/docs/_includes/layouts/get-started.njk b/docs/_includes/layouts/get-started.njk
@@ -68,11 +68,3 @@
     </div>
   </div>
 {% endblock %}
-
-{% block pageScripts %}
-  <script>
-    $('[data-module="app-tabs"]').each(function(e, el) {
-      new Tabs($(el));
-    });
-  </script>
-{% endblock %}
diff --git a/docs/_includes/layouts/patterns.njk b/docs/_includes/layouts/patterns.njk
@@ -66,11 +66,3 @@
     </div>
   </div>
 {% endblock %}
-
-{% block pageScripts %}
-  <script>
-    $('[data-module="app-tabs"]').each(function(e, el) {
-      new Tabs($(el));
-    });
-  </script>
-{% endblock %}
diff --git a/docs/get-started/installing-compiled.md b/docs/get-started/installing-compiled.md
@@ -27,12 +27,7 @@ In a live application, we recommend that you [install with npm](../installing-wi
 1. Follow [the instructions for installing the GOV.UK Design System](https://frontend.design-system.service.gov.uk/install-using-precompiled-files/)
 2. Add `link` tags for the MoJ Frontend CSS, alongside the GOV.UK ones in the `head`:
    ```html
-   <!--[if !IE 8]><!-->
    <link rel="stylesheet" href="/stylesheets/moj-frontend.min.css" />
-   <!--<![endif]-->
-   <!--[if IE 8]>
-     <link rel="stylesheet" href="/stylesheets/moj-frontend-ie8.min.css" />
-   <![endif]-->
    ```
 3. Add `script` tags for the MoJ Frontend JavaScript, alongside the GOV.UK at the bottom of the `body`. This includes jQuery, which is a dependency of MoJ Frontend.
    ```html
@@ -62,12 +57,7 @@ It is unlikely that you would ever want to install the MoJ Design System alone,
          name="viewport"
          content="width=device-width, initial-scale=1, viewport-fit=cover"
        />
-       <!--[if !IE 8]><!-->
        <link rel="stylesheet" href="/stylesheets/moj-frontend.min.css" />
-       <!--<![endif]-->
-       <!--[if IE 8]>
-         <link rel="stylesheet" href="/stylesheets/moj-frontend-ie8.min.css" />
-       <![endif]-->
      </head>
      <body>
        <!-- component HTML -->

diff --git a/docs/get-started/installing-with-npm.md b/docs/get-started/installing-with-npm.md
@@ -142,5 +142,3 @@ Add the CSS and JavaScript code to your HTML template:
   </body>
 </html>
 ```
-
-If your service supports Internet Explorer 8, you will need to [generate and include a separate stylesheet](../supporting-internet-explorer-8) as well.
diff --git a/docs/get-started/supporting-internet-explorer-8.md b/docs/get-started/supporting-internet-explorer-8.md
@@ -3,25 +3,10 @@ layout: layouts/get-started.njk
 title: Supporting Internet Explorer 8
 ---
 
-If you are including MoJ Frontend as part of your application's stylesheets then you'll need to do some additional work to support Internet Explorer 8 (IE8).
+As of version 2.0.0, MoJ Frontend no longer provides support for Internet Explorer 8, in line with changes to the GOV.UK Design System and after Microsoft [stopped supporting all versions of Internet Explorer in 2022](https://support.microsoft.com/en-us/windows/internet-explorer-help-23360e49-9cd3-4dda-ba52-705336cc0de2). You should no longer use Internet Explorer.
 
-The first thing you need to do is follow [GOV.UK Frontend's setup instructions](https://frontend.design-system.service.gov.uk/supporting-ie8/) for supporting Internet Explorer 8.
+If your service still requires support for Internet Explorer 8, you have two options:
 
-When [generating your IE8-specific stylesheet](https://frontend.design-system.service.gov.uk/supporting-ie8/#2-generate-an-ie8-specific-stylesheet), your `application.scss` will also include the MoJ Frontend import:
+You can **provide your own support for Internet Explorer 8**. You are welcome to use an additional CSS file that will patch features that are not supported in older browsers. However, you must do this at your own risk.
 
-```scss
-// application.scss
-
-@import "govuk-frontend/frontend/all";
-@import "@ministryofjustice/frontend/all";
-
-.example {
-  // example application style
-}
-
-// application-ie8.scss
-
-$govuk-is-ie8: true;
-
-@import "application";
-```
+You can **continue to use an unmaintained v1 version of MoJ Frontend**. This is not recommended as you will miss important updates, but may be necessary to support legacy tech as it approaches its end of life.
diff --git a/gulp/build-javascript.js b/gulp/build-javascript.js
@@ -40,10 +40,6 @@ gulp.task('build:javascript-with-jquery', () => {
         return 'MOJFrontend';
       }
     }))
-    .pipe(
-      uglify({
-        ie8: true,
-      })
-    )
+    .pipe(uglify())
     .pipe(gulp.dest('package/moj/'));
 });
diff --git a/gulp/dist-scss/all.scss b/gulp/dist-scss/all.scss
@@ -0,0 +1,6 @@
+$_govuk-imported-modules: ("govuk/objects/width-container") !default;
+
+@import "node_modules/govuk-frontend/dist/govuk/base";
+@import "node_modules/govuk-frontend/dist/govuk/objects/width-container";
+@import "package/moj/all"
+
diff --git a/gulp/dist.js b/gulp/dist.js
@@ -19,24 +19,20 @@ gulp.task("dist:assets", () => {
 gulp.task("dist:javascript", () => {
   return gulp
     .src("package/moj/all.js")
-    .pipe(
-      uglify({
-        ie8: true,
-      })
-    )
+    .pipe(uglify())
     .pipe(rename("moj-frontend.min.js"))
     .pipe(gulp.dest("dist"));
 });
 
 gulp.task("dist:css", () => {
   return gulp
-    .src("package/moj/*.scss")
+    .src("gulp/dist-scss/*.scss")
     .pipe(sass())
     .pipe(postcss([autoprefixer, cssnano]))
     .pipe(
       rename((path) => ({
         dirname: path.dirname,
-        basename: path.basename.replace("all", "moj-frontend"),
+        basename: path.basename.replace("dist", "moj-frontend"),
         extname: ".min.css",
       }))
     )

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "ci:dryrun": "HUSKY=0 CI=true semantic-release --dry-run",
     "start": "npm-run-all --parallel watch:*",
     "test": "npm-run-all --parallel test:*",
-    "test:sass": "npm install node-sass && node-sass -q test.scss >/dev/null && echo 'ok'",
+    "test:sass": "npm install node-sass && node-sass -q gulp/dist-scss/all.scss >/dev/null && echo 'ok'",
     "test:docs": "npm run build:docs",
     "watch:11ty": "eleventy --input=./docs --output=public --serve --watch",
     "watch:webpack": "webpack --watch"
@@ -39,7 +39,7 @@
     "@11ty/eleventy": "^2.0.0",
     "clipboard": "^2.0.8",
     "del": "^7.0.0",
-    "govuk-frontend": "^4.0.0",
+    "govuk-frontend": "^5.0.0",
     "gulp": "^4.0.2",
     "gulp-cache": "^1.1.3",
     "gulp-concat": "^2.6.1",

diff --git a/package/README.md b/package/README.md
@@ -32,8 +32,7 @@ Once installed, you will be able to use the code from the examples in the [MOJ P
 
 MOJ Frontend will allow you to build services that comply with the [guidance in the Service Manual][service-manual-browsers].
 
-If you are including MOJ Frontend as part of a stylesheet that you are generating in your application's build pipeline, you will need to [generate and
-include a separate stylesheet in order to support Internet Explorer 8](docs/installation/supporting-internet-explorer-8.md).
+MOJ Frontend no longer supports Internet Explorer 8. If you need IE8 support, then [you must use an old version or provide your own support](docs/installation/supporting-internet-explorer-8.md).
 
 [service-manual-browsers]: https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices#browsers-to-test-in
 

diff --git a/package/package.json b/package/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ministryofjustice/frontend",
   "description": "The MOJ Frontend contains the code you need to start building user interfaces for UK Ministry of Justice government services.",
-  "version": "1.8.1",
+  "version": "2.0.0",
   "main": "moj/all.js",
   "sass": "moj/all.scss",
   "engines": {
@@ -27,7 +27,7 @@
     "access": "public"
   },
   "dependencies": {
-    "govuk-frontend": "^3.0.0 || ^4.0.0",
+    "govuk-frontend": "^5.0.0",
     "moment": "^2.27.0"
   },
   "peerDependencies": {

diff --git a/server.js b/server.js
@@ -37,7 +37,7 @@ const useBrowserSync = process.env.USE_BROWSER_SYNC || true;
 
 // Set up application
 const appViews = [
-  path.join(__dirname, '/node_modules/govuk-frontend'),
+  path.join(__dirname, '/node_modules/govuk-frontend/dist'),
   path.join(__dirname, '/app/views'),
   path.join(__dirname, '/app/views/layouts'),
   path.join(__dirname, '/app/views/partials'),
@@ -123,7 +123,7 @@ app.set('view engine', 'html');
 
 // Middleware to serve static assets
 app.use('/public', express.static(path.join(__dirname, '/public')));
-app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/govuk/assets')));
+app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/dist/govuk/assets')));
 app.use('/assets', express.static(path.join(__dirname, 'src', 'moj', 'assets')));
 
 app.use(sessionInMemory(Object.assign(sessionOptions, {

diff --git a/src/moj/all-ie8.scss b/src/moj/all-ie8.scss
diff --git a/src/moj/all.scss b/src/moj/all.scss
@@ -1,4 +1,4 @@
-@import "node_modules/govuk-frontend/govuk/base";
+@import "node_modules/govuk-frontend/dist/govuk/base";
 
 @import "settings/all";
 @import "helpers/all";

diff --git a/src/moj/components/cookie-banner/_cookie-banner.scss b/src/moj/components/cookie-banner/_cookie-banner.scss
@@ -1,4 +1,4 @@
-@import "node_modules/govuk-frontend/govuk/objects/width-container";
+@import "node_modules/govuk-frontend/dist/govuk/objects/width-container";
 
 .moj-cookie-banner {
   display: none;

diff --git a/src/moj/components/password-reveal/password-reveal.js b/src/moj/components/password-reveal/password-reveal.js
@@ -1,6 +1,6 @@
 MOJFrontend.PasswordReveal = function(element) {
   this.el = element;
-  $el = $(this.el)
+  var $el = $(this.el)
 
   if ($el.data('moj-password-reveal-initialised')) {
     return