Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 10 commits into from
Jan 8, 2024
Merged

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

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
498d3ec
feat: add support for v5 of the Design System
gregtyler Nov 3, 2023
7176180
fix: use `type="module` for scripts
gregtyler Nov 3, 2023
672418c
fix: stop directly requiring govuk-frontend SCSS
gregtyler Nov 3, 2023
aea5cd7
build: start testing against Node 20
gregtyler Nov 3, 2023
59c4440
build: bump local version to v2.0.0-beta.0
gregtyler Dec 11, 2023
bb77562
build: support v4 and v5 of govuk-frontend
gregtyler Dec 11, 2023
5e75ed7
build: remove support for IE8
gregtyler Dec 11, 2023
1463f36
build: bump version
gregtyler Dec 11, 2023
8320172
build: bump version
gregtyler Jan 8, 2024
aac11d2
docs: rename MOJPL -> MOJDS
gregtyler Jan 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eleventy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/",
]);

Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/main.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 1 addition & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions assets/all.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 () {
Expand Down
6 changes: 0 additions & 6 deletions assets/sass/application-ie8.scss
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion assets/sass/application.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
17 changes: 6 additions & 11 deletions docs/_includes/layouts/base.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]-->
<title>{% block title %}{{ title }} - MoJ Design System{% endblock %}</title>
<link href="{{ '/assets/stylesheets/application.css' | url }}" rel="stylesheet">
<title>{% block title %}{{ title }} - MoJ Pattern Library{% endblock %}</title>
gregtyler marked this conversation as resolved.
Show resolved Hide resolved

<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>
Expand All @@ -42,10 +41,6 @@

</div>
{% endblock %}

<script type="text/javascript">
MOJFrontend.initAll();
</script>
{% block pageScripts %}{% endblock %}
</body>
</html>
8 changes: 0 additions & 8 deletions docs/_includes/layouts/community.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,3 @@
</div>
</div>
{% endblock %}

{% block pageScripts %}
<script>
$('[data-module="app-tabs"]').each(function(e, el) {
new Tabs($(el));
});
</script>
{% endblock %}
2 changes: 1 addition & 1 deletion docs/_includes/layouts/example.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{% endblock %}

{% block pageScripts %}
<script type="text/javascript">
<script type="module">
{% include (page.inputPath | getScriptPath) ignore missing %}
</script>
{% endblock %}
8 changes: 0 additions & 8 deletions docs/_includes/layouts/get-started.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,3 @@
</div>
</div>
{% endblock %}

{% block pageScripts %}
<script>
$('[data-module="app-tabs"]').each(function(e, el) {
new Tabs($(el));
});
</script>
{% endblock %}
8 changes: 0 additions & 8 deletions docs/_includes/layouts/patterns.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,3 @@
</div>
</div>
{% endblock %}

{% block pageScripts %}
<script>
$('[data-module="app-tabs"]').each(function(e, el) {
new Tabs($(el));
});
</script>
{% endblock %}
10 changes: 0 additions & 10 deletions docs/get-started/installing-compiled.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 -->
Expand Down
2 changes: 0 additions & 2 deletions docs/get-started/installing-with-npm.md
View file
Open in desktop
Original file line number Diff 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.
23 changes: 4 additions & 19 deletions docs/get-started/supporting-internet-explorer-8.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
6 changes: 1 addition & 5 deletions gulp/build-javascript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,6 @@ gulp.task('build:javascript-with-jquery', () => {
return 'MOJFrontend';
}
}))
.pipe(
uglify({
ie8: true,
})
)
.pipe(uglify())
.pipe(gulp.dest('package/moj/'));
});
6 changes: 6 additions & 0 deletions gulp/dist-scss/all.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"

10 changes: 3 additions & 7 deletions gulp/dist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}))
)
Expand Down
20 changes: 10 additions & 10 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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",
Expand Down
3 changes: 1 addition & 2 deletions package/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions package/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": {
Expand All @@ -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": {
Expand Down
4 changes: 2 additions & 2 deletions server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down Expand Up @@ -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, {
Expand Down
3 changes: 0 additions & 3 deletions src/moj/all-ie8.scss
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/moj/all.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
2 changes: 1 addition & 1 deletion src/moj/components/cookie-banner/_cookie-banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/moj/components/password-reveal/password-reveal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
Loading