Skip to content

Commit

Permalink
Run Prettier on Markdown files
Browse files Browse the repository at this point in the history
  • Loading branch information
colinrotherham committed Sep 29, 2023
1 parent e942fcc commit 368ab21
Show file tree
Hide file tree
Showing 13 changed files with 168 additions and 145 deletions.
34 changes: 22 additions & 12 deletions source/configure-components-with-javascript/index.html.md.erb
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,13 @@ This example shows the opening tag of a character count component with some conf
- two plural forms for when users are under the specified limit of characters (namespaced configuration + object value)

```html
<div data-module="govuk-character-count"
<div
data-module="govuk-character-count"
data-maxlength="500"
data-i18n.characters-at-limit="No characters left"
data-i18n.characters-under-limit.other="%{count} characters to go"
data-i18n.characters-under-limit.one="%{count} character to go">
data-i18n.characters-under-limit.one="%{count} character to go"
>
```

If your configuration contains [quotes or other reserved HTML characters](https://developer.mozilla.org/en-US/docs/Glossary/Entity#reserved_characters), you'll need to escape those characters.
Expand All @@ -65,12 +67,17 @@ Some configuration options might accept object values or be grouped under a name

```javascript
new CharacterCount($element, {
maxlength: 500, // Non namespaced
i18n: { // i18n namespace
charactersAtLimit: "No characters left",
charactersUnderLimit: { // Object value
other: "%{count} characters to go",
one: "%{count} character to go"
// Non namespaced
maxlength: 500,

// i18n namespace
i18n: {
charactersAtLimit: 'No characters left',

// Object value
charactersUnderLimit: {
other: '%{count} characters to go',
one: '%{count} character to go'
}
}
})
Expand All @@ -85,10 +92,13 @@ You can pass configuration for components when initialising GOV.UK Frontend usin
```javascript
initAll({
characterCount: {
maxlength: 500, // Non namespaced
i18n: { // i18n namespace
charactersAtLimit: "No characters left"
// Non namespaced
maxlength: 500,

// i18n namespace
i18n: {
charactersAtLimit: 'No characters left'
}
},
}
})
```
49 changes: 25 additions & 24 deletions source/get-started/index.html.md.erb
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,18 @@ Paste the HTML into a page or template in your application.

1. Add the following to the main Sass file in your project, so your Sass compiler adds all of GOV.UK Frontend's styles to your CSS file.

```scss
@import "node_modules/govuk-frontend/dist/govuk/all";
```
```scss
@import "node_modules/govuk-frontend/dist/govuk/all";
```

2. Add your CSS file to your page layout if you need to. For example:

```html
<head>
...
<link rel="stylesheet" href="<YOUR-STYLESHEETS-FOLDER>/<YOUR-CSS-FILE>.css">
</head>
```
```html
<head>
<!-- // ... -->
<link rel="stylesheet" href="<YOUR-STYLESHEETS-FOLDER>/<YOUR-CSS-FILE>.css">
</head>
```

3. Run your application and check that the accordion displays correctly.

Expand All @@ -55,8 +55,9 @@ There are also different ways you can [import GOV.UK Frontend's CSS](/importing-
Your component will not use the right font or images until you've added GOV.UK Frontend's assets to your application.

1. Copy the following 2 folders:
- `/node_modules/govuk-frontend/dist/govuk/assets/images` folder to `<YOUR-APP>/assets/images`
- `/node_modules/govuk-frontend/dist/govuk/assets/fonts` folder to `<YOUR-APP>/assets/fonts`

- `/node_modules/govuk-frontend/dist/govuk/assets/images` folder to `<YOUR-APP>/assets/images`
- `/node_modules/govuk-frontend/dist/govuk/assets/fonts` folder to `<YOUR-APP>/assets/fonts`

2. Run your application, then use [the Fonts tab in Firefox Page Inspector](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts#The_Fonts_tab) to check the accordion is using the GDS Transport font.

Expand All @@ -66,24 +67,24 @@ In your live application, we recommend [using an automated task or your build pi

1. Add the following to the top of the `<body class="govuk-template__body">` section of your page template:

```html
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
```
```html
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
```

2. Copy the `/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js` file into your application.

3. Import the file before the closing `</body>` tag of your page template, then run the `initAll` function to initialise all the components. For example:

```html
<body class="govuk-template__body">
...
<script type="module" src="<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js"></script>
<script type="module">
import { initAll } from '<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js'
initAll()
</script>
</body>
```
```html
<body class="govuk-template__body">
...
<script type="module" src="<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js"></script>
<script type="module">
import { initAll } from '<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js'
initAll()
</script>
</body>
```

4. Run your application and check it works the same way as the Design System accordion example, by selecting the buttons and checking the accordion shows and hides sections.

Expand Down
15 changes: 8 additions & 7 deletions source/importing-css-assets-and-javascript/index.html.md.erb
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ For example, add the following to your Sass file to import the CSS you need for
@import "node_modules/govuk-frontend/dist/govuk/utilities/all";
@import "node_modules/govuk-frontend/dist/govuk/overrides/all";
```

You can remove lines that import parts of the CSS you do not need.

[Read more about the different parts of GOV.UK Frontend’s CSS](https://github.com/alphagov/govuk-frontend/tree/main/packages/govuk-frontend/src).
Expand Down Expand Up @@ -214,13 +215,13 @@ If you update a page with new markup, for example a modal dialogue box, you can
For example:

```html
<script type="module">
import { initAll } from '<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js'
const $modal = document.querySelector('.modal')
initAll({
scope: $modal
})
</script>
<script type="module">
import { initAll } from '<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js'
const $modal = document.querySelector('.modal')
initAll({
scope: $modal
})
</script>
```

### If your JavaScript is not working properly
Expand Down
41 changes: 20 additions & 21 deletions source/install-using-precompiled-files/index.html.md.erb
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Install using precompiled files
weight: 11
old_paths:
- /installing-from-dist/index.html
- /installing-from-dist/index.html
---

# Install using precompiled files
Expand Down Expand Up @@ -33,26 +33,25 @@ You’ll not be able to:

1. Create a page in your project using the following HTML (in your live application, you should use the [Design System page template](https://design-system.service.gov.uk/styles/page-template/) instead):

```html
<!DOCTYPE html>
<html lang="en" class="govuk-template">
<head>
<title>Example - GOV.UK</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="stylesheet" href="/stylesheets/govuk-frontend-<VERSION-NUMBER>.min.css">
</head>
<body class="govuk-template__body">
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<!-- component HTML -->
<script type="module" src="/javascripts/govuk-frontend-<VERSION-NUMBER>.min.js"></script>
<script type="module">
import { initAll } from '/javascripts/govuk-frontend-<VERSION-NUMBER>.min.js'
initAll()
</script>
</body>
</html>
```

```html
<!DOCTYPE html>
<html lang="en" class="govuk-template">
<head>
<title>Example - GOV.UK</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="stylesheet" href="/stylesheets/govuk-frontend-<VERSION-NUMBER>.min.css">
</head>
<body class="govuk-template__body">
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<!-- component HTML -->
<script type="module" src="/javascripts/govuk-frontend-<VERSION-NUMBER>.min.js"></script>
<script type="module">
import { initAll } from '/javascripts/govuk-frontend-<VERSION-NUMBER>.min.js'
initAll()
</script>
</body>
</html>
```

2. Replace `<VERSION-NUMBER>` so the 3 filenames match the files you [copied from GOV.UK Frontend's GitHub repo](#copy-the-files).

Expand Down
14 changes: 7 additions & 7 deletions source/installing-with-npm/index.html.md.erb
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,21 @@ weight: 10

1. [Install Node.js](https://nodejs.org/en/).

GOV.UK Frontend requires Node.js version 12.17.0 or later to support ECMAScript modules. Where possible, we recommend you install the latest Long Term Support (LTS) version.
GOV.UK Frontend requires Node.js version 12.17.0 or later to support ECMAScript modules. Where possible, we recommend you install the latest Long Term Support (LTS) version.

2. `cd` to the root of your project and check if you have a [`package.json` file](https://docs.npmjs.com/files/package.json). If you do not have the file, create it by running:

```
npm init
```
```
npm init
```

3. Install [Dart Sass](https://www.npmjs.com/package/sass) - version 1.0.0 or higher.

If you're using Dart Sass 1.33.0 or greater, you may see deprecation warnings when compiling your Sass. You can [silence deprecation warnings caused by dependencies](/importing-css-assets-and-javascript/#silence-deprecation-warnings-from-dependencies-in-dart-sass) if required.
If you're using Dart Sass 1.33.0 or greater, you may see deprecation warnings when compiling your Sass. You can [silence deprecation warnings caused by dependencies](/importing-css-assets-and-javascript/#silence-deprecation-warnings-from-dependencies-in-dart-sass) if required.

Do not use either LibSass or Ruby Sass, which are deprecated, for new projects.
Do not use either LibSass or Ruby Sass, which are deprecated, for new projects.

Although GOV.UK Frontend currently supports LibSass (version 3.3.0 and above) and Ruby Sass (version 3.4.0 and above), we will remove support in future. If you're using either of these Sass compilers, you should [migrate to Dart Sass](https://sass-lang.com/blog/libsass-is-deprecated#how-do-i-migrate) as soon as you reasonably can.
Although GOV.UK Frontend currently supports LibSass (version 3.3.0 and above) and Ruby Sass (version 3.4.0 and above), we will remove support in future. If you're using either of these Sass compilers, you should [migrate to Dart Sass](https://sass-lang.com/blog/libsass-is-deprecated#how-do-i-migrate) as soon as you reasonably can.

You can also [install Nunjucks v3.0.0 or later](https://www.npmjs.com/package/nunjucks) if you want to [use GOV.UK Frontend's Nunjucks macros](/use-nunjucks/).

Expand Down
Loading

0 comments on commit 368ab21

Please sign in to comment.