build: remove support for IE8

Stop building IE8 CSS distributions. Remove IE8-specific rules from SCSS. BREAKING CHANGE: This package no longer provides support for IE8
ministryofjustice · Dec 11, 2023 · 5e75ed7 · 5e75ed7
1 parent bb77562
commit 5e75ed7
Show file tree

Hide file tree

Showing 23 changed files with 16 additions and 105 deletions.
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/sass/application-ie8.scss b/assets/sass/application-ie8.scss
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -15,8 +15,7 @@
     <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 Pattern Library{% endblock %}</title>
 
     <script type="module" src="https://www.googletagmanager.com/gtag/js?id=G-VTGX4YLSVL" async></script>

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/dist/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-ie8.scss b/gulp/dist-scss/all-ie8.scss
diff --git a/gulp/dist.js b/gulp/dist.js
@@ -19,11 +19,7 @@ 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"));
 });

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
@@ -27,7 +27,7 @@
     "access": "public"
   },
   "dependencies": {
-    "govuk-frontend": "^4.0.0 || ^5.0.0",
+    "govuk-frontend": "^5.0.0",
     "moment": "^2.27.0"
   },
   "peerDependencies": {

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,3 +1,5 @@
+@import "node_modules/govuk-frontend/dist/govuk/base";
+
 @import "settings/all";
 @import "helpers/all";
 @import "objects/all";

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

diff --git a/src/moj/components/progress-bar/_progress-bar.scss b/src/moj/components/progress-bar/_progress-bar.scss
@@ -15,13 +15,6 @@
   text-align: justify;
   vertical-align: top;
 
-  // IE8 does not support the text justify approach for spacing
-  @include govuk-if-ie8 {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
-  }
-
   &::after {
     content: "";
     display: inline-block;
@@ -47,11 +40,6 @@
   text-align: center;
   vertical-align: top;
 
-  // IE8 does not support the text justify approach for spacing
-  @include govuk-if-ie8 {
-    display: table-cell;
-  }
-
   &:first-child,
   &:last-child {
     &::before {
@@ -91,7 +79,7 @@
   position: relative;
   background-color: govuk-colour("white");
   border: 6px solid govuk-colour("green");
-  border-radius: 50%; // IE8 does not support border radius but we’re ok with that
+  border-radius: 50%;
   box-sizing: border-box;
   display: block;
   height: 32px;
@@ -105,12 +93,6 @@
   background-image: url(#{$moj-images-path}icon-progress-tick.svg);
   background-position: 50% 50%;
   background-repeat: no-repeat;
-
-  // IE8 does not support box shadow, so use a standard border.
-  @include govuk-if-ie8 {
-    background-image: url(#{$moj-images-path}icon-progress-tick.png);
-  }
-
 }
 
 .moj-progress-bar__label {

diff --git a/src/moj/components/sub-navigation/_sub-navigation.scss b/src/moj/components/sub-navigation/_sub-navigation.scss
@@ -17,12 +17,6 @@
     box-shadow: inset 0 -1px 0 $govuk-border-colour;
     width: 100%;
   }
-
-  // IE8 does not support box shadow, so use a standard border.
-  @include govuk-if-ie8 {
-    border-bottom: 1px solid $govuk-border-colour;
-  }
-
 }
 
 

diff --git a/src/moj/components/timeline/_timeline.scss b/src/moj/components/timeline/_timeline.scss
@@ -106,10 +106,4 @@
   &:focus {
     color: govuk-colour("black"); // Focus colour on yellow should really be black.
   }
-
-  // IE8 does not support box shadow, so use a standard border.
-  @include govuk-if-ie8 {
-    background-image: url(#{$moj-images-path}icon-document.png);
-  }
-
 }
diff --git a/src/moj/helpers/_all.scss b/src/moj/helpers/_all.scss
@@ -1,2 +1 @@
 @import "hidden";
-@import "ie8";
diff --git a/src/moj/helpers/_ie8.scss b/src/moj/helpers/_ie8.scss
diff --git a/src/moj/objects/_width-container.scss b/src/moj/objects/_width-container.scss
@@ -2,10 +2,6 @@
   // Limit the width of the container to the page width
   max-width: $width;
 
-  @include govuk-if-ie8 {
-    width: $width;
-  }
-
   // On mobile, add half width gutters
   margin: 0 $moj-gutter-half;
 
@@ -19,4 +15,4 @@
   @include govuk-media-query($and: "(min-width: #{($width + $moj-gutter * 2)})") {
     margin: 0 auto;
   }
-}
+}
diff --git a/src/moj/settings/_all.scss b/src/moj/settings/_all.scss
@@ -1,4 +1,3 @@
 @import "assets";
-@import "ie8";
 @import "measurements";
 @import "colours";
diff --git a/src/moj/settings/_ie8.scss b/src/moj/settings/_ie8.scss
diff --git a/webpack.config.js b/webpack.config.js
@@ -6,7 +6,6 @@ module.exports = {
   entry: {
     all: "./assets/all.js",
     application: "./assets/sass/application.scss",
-    "application-ie8": "./assets/sass/application-ie8.scss",
   },
   mode: "production",
   devtool: "source-map",
-Original file line number
+Diff line change
@@ Expand Up / @@ -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.