Prettier FTW

nhsuk · Jul 25, 2022 · 08d5100 · 08d5100
1 parent 8d5fd72
commit 08d5100
Show file tree

Hide file tree

Showing 145 changed files with 41,996 additions and 40,476 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+node_modules/*
+dist/*
+tests/backstop/*
+.github/*
+coverage/*
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,2 @@
+// Here to reassure defaults and to trigger IDEs that expect a config for Prettier to run
+module.exports = {};
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -10,10 +10,12 @@ If you have any questions please [email us](mailto:[email protected]) or ge
 ## Contributing contents
 
 ### General
+
 - [Code of Conduct](./CODE_OF_CONDUCT.md)
 - [Report a bug or issue](https://github.com/nhsuk/nhsuk-frontend/issues/new?template=BUG_REPORT.md)
 
 ### Contributors
+
 - [Running the application locally](docs/contributing/running-locally.md)
 - [Application architecture](docs/contributing/application-architecture.md)
 - [Coding standards and style guide](docs/contributing/coding-standards.md)

diff --git a/babel.config.js b/babel.config.js
@@ -1,12 +1,12 @@
 module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        targets: {
-          node: 'current',
-        },
-      },
-    ],
-  ],
+	presets: [
+		[
+			"@babel/preset-env",
+			{
+				targets: {
+					node: "current",
+				},
+			},
+		],
+	],
 };
diff --git a/docs/contributing/application-architecture.md b/docs/contributing/application-architecture.md
@@ -6,35 +6,35 @@ The application generates static HTML pages to preview components, with each com
 
 `.github/`
 
-  GitHub specific files, such templates for pull requests and issues.
+GitHub specific files, such templates for pull requests and issues.
 
 `app/`
 
-  Nunjuck (HTML) files for the component example pages that you see at http://localhost:3000 when running the application locally and on https://nhsuk.github.io/nhsuk-frontend
+Nunjuck (HTML) files for the component example pages that you see at http://localhost:3000 when running the application locally and on https://nhsuk.github.io/nhsuk-frontend
 
 `dist/` (Automatically generated)
 
-  Automatically generated compiled files and build assets for GitHub pages, releases and npm packages. Don't manually edit files in this folder as they will be deleted.
+Automatically generated compiled files and build assets for GitHub pages, releases and npm packages. Don't manually edit files in this folder as they will be deleted.
 
 `docs/`
 
-  Markdown files for documentation on GitHub, such as contributing to the project, coding standards and more.
+Markdown files for documentation on GitHub, such as contributing to the project, coding standards and more.
 
 `node_modules/` (Automatically generated)
 
- Node package manager modules for third party dependencies. This folder is automatically generated when running `npm install`. Don't manually edit files in this folder as they will be deleted.
+Node package manager modules for third party dependencies. This folder is automatically generated when running `npm install`. Don't manually edit files in this folder as they will be deleted.
 
 `packages/`
 
-  NHS.UK frontend individual components files, such as all the stylesheet (scss) files, HTML templates (nunjucks), READMEs and assets.
+NHS.UK frontend individual components files, such as all the stylesheet (scss) files, HTML templates (nunjucks), READMEs and assets.
 
 `tasks/`
 
-  Gulp.js tasks to build the `dist/` folder from the files in `app`.
+Gulp.js tasks to build the `dist/` folder from the files in `app`.
 
 `tests/`
 
-  Test configuration files for our testing frameworks Cypress and BackstopJS. Linting configuration for our linters eslint, htmlhint and stylelint.
+Test configuration files for our testing frameworks Cypress and BackstopJS. Linting configuration for our linters eslint, htmlhint and stylelint.
 
 ---
 

diff --git a/docs/contributing/automated-testing.md b/docs/contributing/automated-testing.md
@@ -16,12 +16,12 @@ BackstopJS tests configuration and files can be found within the `backstop` fold
 
 **`id`** – Used for screenshot naming. Set this property when sharing reference files with teammates -- otherwise omit and BackstopJS will auto-generate one for you to avoid naming collisions with BackstopJS resources.
 
-**`viewports`** – An array of screen size objects your DOM will be tested against.  Add as many as you like -- but add at least one.
+**`viewports`** – An array of screen size objects your DOM will be tested against. Add as many as you like -- but add at least one.
 
 **`scenarios`** – This is where you set up your actual tests. The important sub properties are...
 
 - **`scenarios[n].label`** – Required. Also used for screenshot naming.
-- **`scenarios[n].url`** – Required. Tells BackstopJS what endpoint/document you want to test.  This can be an absolute URL or local to your current working directory.
+- **`scenarios[n].url`** – Required. Tells BackstopJS what endpoint/document you want to test. This can be an absolute URL or local to your current working directory.
 
 _TIP: no other SCENARIO properties are required. Other properties can just be added as necessary_
 

diff --git a/docs/contributing/browser-support.md b/docs/contributing/browser-support.md
@@ -2,19 +2,19 @@
 
 NHS.UK frontend browser support is shown in the table below.
 
-| Operating system | Browser                              | Support   |
-|----------------- |--------------------------------------|-----------|
-| Windows          | Internet Explorer 11                 | compliant |
-| Windows          | Edge (latest versions)               | compliant |
-| Windows          | Google Chrome (latest versions)      | compliant |
-| Windows          | Mozilla Firefox (latest versions)    | compliant |
-| macOS            | Safari 12+                           | compliant |
-| macOS            | Google Chrome (latest versions)      | compliant |
-| macOS            | Mozilla Firefox (latest versions)    | compliant |
-| iOS              | Safari for iOS 12.1 and later        | compliant |
-| iOS              | Google Chrome (latest versions)      | compliant |
-| Android          | Google Chrome (latest versions)      | compliant |
-| Android          | Samsung Internet (latest versions)   | compliant |
+| Operating system | Browser                            | Support   |
+| ---------------- | ---------------------------------- | --------- |
+| Windows          | Internet Explorer 11               | compliant |
+| Windows          | Edge (latest versions)             | compliant |
+| Windows          | Google Chrome (latest versions)    | compliant |
+| Windows          | Mozilla Firefox (latest versions)  | compliant |
+| macOS            | Safari 12+                         | compliant |
+| macOS            | Google Chrome (latest versions)    | compliant |
+| macOS            | Mozilla Firefox (latest versions)  | compliant |
+| iOS              | Safari for iOS 12.1 and later      | compliant |
+| iOS              | Google Chrome (latest versions)    | compliant |
+| Android          | Google Chrome (latest versions)    | compliant |
+| Android          | Samsung Internet (latest versions) | compliant |
 
 'Compliant' means that components should look and function as they were designed to do in other modern browsers.
 
@@ -26,14 +26,14 @@ We no longer support older versions of Internet Explorer. This is due to the ver
 
 We test the NHS.UK frontend with the following assistive technology:
 
-| Software                 | Type               | Browser                             |
-|--------------------------|--------------------|-------------------------------------|
-| [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS)     | Windows desktop screen reader      | Internet Explorer 11, Chrome (latest version) |
-| [NVDA](https://www.nvaccess.org/) | Windows desktop screen reader      | Firefox (latest versions)|
-| [VoiceOver](https://www.apple.com/uk/accessibility/iphone/vision/)           | Apple mobile and desktop screen reader      | Safari 12+ |
-| [TalkBack](https://support.google.com/accessibility/android/topic/3529932?hl=en-GB&ref_topic=9078845)           | Android mobile screen reader      | Chrome (latest version) |
-| [Dragon NaturallySpeaking](https://www.nuance.com/en-gb/dragon.html)| Windows speech recognition | Internet Explorer 11 |
-| [ZoomText](https://www.zoomtext.com/products/zoomtext-magnifierreader/)             | Windows desktop screen magnifier   | Internet Explorer 11 |
+| Software                                                                                              | Type                                   | Browser                                       |
+| ----------------------------------------------------------------------------------------------------- | -------------------------------------- | --------------------------------------------- |
+| [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS)                                     | Windows desktop screen reader          | Internet Explorer 11, Chrome (latest version) |
+| [NVDA](https://www.nvaccess.org/)                                                                     | Windows desktop screen reader          | Firefox (latest versions)                     |
+| [VoiceOver](https://www.apple.com/uk/accessibility/iphone/vision/)                                    | Apple mobile and desktop screen reader | Safari 12+                                    |
+| [TalkBack](https://support.google.com/accessibility/android/topic/3529932?hl=en-GB&ref_topic=9078845) | Android mobile screen reader           | Chrome (latest version)                       |
+| [Dragon NaturallySpeaking](https://www.nuance.com/en-gb/dragon.html)                                  | Windows speech recognition             | Internet Explorer 11                          |
+| [ZoomText](https://www.zoomtext.com/products/zoomtext-magnifierreader/)                               | Windows desktop screen magnifier       | Internet Explorer 11                          |
 
 Testing with the various technologies above should cover the vast amount of
 users who use assistive technologies.

diff --git a/docs/contributing/coding-standards.md b/docs/contributing/coding-standards.md
@@ -35,7 +35,7 @@ HTML attributes should come in this particular order for easier reading of code.
 
 Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly (e.g., for in-page bookmarks), so they come second.
 
-----
+---
 
 ## SCSS
 
@@ -79,14 +79,14 @@ For example:
 
 #### BEM further reading:
 
-* [Get BEM](http://getbem.com/introduction/)
-* [BEM Resources](https://github.com/sturobson/BEM-resources)
-* [Harry Roberts - BEMIT: Taking the BEM Naming Convention a Step Further](https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/)
+- [Get BEM](http://getbem.com/introduction/)
+- [BEM Resources](https://github.com/sturobson/BEM-resources)
+- [Harry Roberts - BEMIT: Taking the BEM Naming Convention a Step Further](https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/)
 
 ### Nesting
 
 Break elements and modifiers outside of blocks rather than nesting using a
-parent selector `&`. 
+parent selector `&`.
 
 Nesting pseudo elements like `:before` and `:hover` is ok.
 
@@ -130,16 +130,17 @@ Avoid including multiple elements when naming classes.
 
 Create separate selectors rather using an `&` in the middle of a selector.
 
-This enables the NHSUK styles to be used inside other applications, where, for example, an ID is being used to isolate a section of a page to style separately from the rest of an application; e.g. 
+This enables the NHSUK styles to be used inside other applications, where, for example, an ID is being used to isolate a section of a page to style separately from the rest of an application; e.g.
+
 ```scss
 div#nhsuk-ers {
 ...
-@import 'node_modules/nhsuk-frontend/packages/core/all'; 
+@import 'node_modules/nhsuk-frontend/packages/core/all';
 ...
 }
-``` 
+```
 
-Bad: 
+Bad:
 
 ```scss
 .nhsuk-checkboxes__conditional {
@@ -151,7 +152,7 @@ Bad:
 }
 ```
 
-Good: 
+Good:
 
 ```scss
 .nhsuk-checkboxes__conditional {
@@ -193,10 +194,10 @@ This makes it easier to keep track of different contexts.
 
 ### Code comments
 
-All scss files should have comments (with intent rather than implementation). Line comments should all go within 
+All scss files should have comments (with intent rather than implementation). Line comments should all go within
 the top block comment and then a reference to the number should go next to the line of code.
 
-Example: 
+Example:
 
 ```scss
 /* ==========================================================================
@@ -213,7 +214,7 @@ Example:
  */
 
 .X-class {
-  color: red; /* [1] */
+	color: red; /* [1] */
 }
 ```
 
@@ -229,14 +230,14 @@ We're still writing our JavaScript style guide, as we're only just figuring it o
 
 We have chosen as Nunjucks as the templating language for NHS.UK frontend components. We expose those templates as reusable chunks of code: macros. Developers import macros into their application, call them as per documentation and provide data to its arguments.
 
-To provide a level of consistency for developers we have standardised argument names, their expected input, use and placement. There are expectations, and  if so they are documented accordingly.
+To provide a level of consistency for developers we have standardised argument names, their expected input, use and placement. There are expectations, and if so they are documented accordingly.
 
 ### Specifying content
 
-When providing *content* to a macro, say for a label or a button, we accept two argument options:
+When providing _content_ to a macro, say for a label or a button, we accept two argument options:
 
- - `text` accepts a plain string and is the default way of passing content
- - `html` accepts html markup. In the template we will not escape html so it will be rendered. In a scenario where both text and html are set, html argument will take precedence over text.
+- `text` accepts a plain string and is the default way of passing content
+- `html` accepts html markup. In the template we will not escape html so it will be rendered. In a scenario where both text and html are set, html argument will take precedence over text.
 
 Example:
 
@@ -264,7 +265,7 @@ We should use **camelCase** for naming attributes.
 
 ### Specifying multiple items
 
-When a component accepts a *single array of items* for an output, such as checkboxes or radios, we accept an ***"items"*** array of objects.  Table component is an exception is it can contain multiple array for rows, head, footer where there is need to for more specific names.
+When a component accepts a _single array of items_ for an output, such as checkboxes or radios, we accept an **_"items"_** array of objects. Table component is an exception is it can contain multiple array for rows, head, footer where there is need to for more specific names.
 
 ### Use of classes to specify variants
 
@@ -273,13 +274,13 @@ When a component has multiple visual presentations, such as the care cards, we m
 Care card urgent (red) example:
 
 ```html
-<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--urgent">
+<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--urgent"></div>
 ```
 
 Care card emergency (red and black) example:
 
 ```html
-<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--emergency">
+<div class="nhsuk-card nhsuk-card--care nhsuk-card--care--emergency"></div>
 ```
 
 ---
@@ -297,10 +298,11 @@ For example, `.nhsuk-card`.
 Components must follow the conventions described in our SCSS coding standards.
 
 Components must:
-* use classes for child elements, scoped to the parent component
-* be flexible, not set a width or external padding and margins
-* set internal margins in a single direction
-* not rely on any other selector outside of the component scss file to style its children
+
+- use classes for child elements, scoped to the parent component
+- be flexible, not set a width or external padding and margins
+- set internal margins in a single direction
+- not rely on any other selector outside of the component scss file to style its children
 
 #### Component folder structure and naming
 

diff --git a/docs/contributing/git-style-guide.md b/docs/contributing/git-style-guide.md
@@ -24,18 +24,14 @@ If the commit refers to a ticket ID, then reference that in the commit message:
 After the summary line should come a blank line, followed by a more detailed description, which should wrap at around 72 characters.
 
 ```html
-[refs #94] Remove search icon IE8 fallback icon
-
-We are reducing the extra code and overheads for Internet Explorer 8,
-so we are removing fallback icons. We have replaced a fallback icon
-with the text search so it still functions.
-See https://github.com/nhsuk/nhsuk-frontend/issues/94
-
+[refs #94] Remove search icon IE8 fallback icon We are reducing the extra code
+and overheads for Internet Explorer 8, so we are removing fallback icons. We
+have replaced a fallback icon with the text search so it still functions. See
+https://github.com/nhsuk/nhsuk-frontend/issues/94
 ```
 
 If including a link to a ticket make sure it is publicly viewable.
 
-
 ## Branching and merging
 
 You may often choose to work on a particular feature on a "feature branch"
@@ -49,11 +45,11 @@ will make sense to your fellow developers. In particular, you may find
 `git rebase --interactive` very useful. You are also encouraged to avoid merge
 commits and use `git rebase master` instead. However, you should not rewrite commits that have been pushed unless you:
 
-  * are **very sure** that no-one else will be affected by you rewriting the
-    branch history
-  * have an Extremely Good Reason. For example: someone has committed
-    sensitive information (personally identifiable data, passwords and suchlike)
-    and it needs purging from history
+- are **very sure** that no-one else will be affected by you rewriting the
+  branch history
+- have an Extremely Good Reason. For example: someone has committed
+  sensitive information (personally identifiable data, passwords and suchlike)
+  and it needs purging from history
 
 When in doubt you should err towards smaller commits, which can be rebased
 together later. It's harder to break large commits out into smaller chunks.
@@ -94,7 +90,7 @@ $ git push -f
 If anyone has committed anything to master[^1] since you last pulled -- and if
 you've been working on the branch for any length of time this is pretty likely
 -- you will blow their changes away, because without arguments git will force
-push *all* remote-tracking branches.
+push _all_ remote-tracking branches.
 
 So, if you ever need to force push the 'foobar' branch, please instead do
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// Here to reassure defaults and to trigger IDEs that expect a config for Prettier to run
		module.exports = {};