Merge branch 'main' into inset-text-text

nhsuk · Feb 12, 2025 · af04c6b · af04c6b
2 parents 5fc6da1 + 42dcf6a
commit af04c6b
Show file tree

Hide file tree

Showing 105 changed files with 2,716 additions and 3,362 deletions.
diff --git a/tests/linters/.eslintrc.js → .eslintrc.js b/tests/linters/.eslintrc.js → .eslintrc.js
diff --git a/tests/linters/.htmlhintrc → .htmlhintrc b/tests/linters/.htmlhintrc → .htmlhintrc
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -13,6 +13,7 @@ module.exports = {
     {
       files: '*.scss',
       options: {
+        printWidth: 120,
         singleQuote: false
       }
     }

diff --git a/tests/linters/.stylelintignore → .stylelintignore b/tests/linters/.stylelintignore → .stylelintignore
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -0,0 +1,87 @@
+module.exports = {
+  extends: 'stylelint-config-gds/scss',
+  ignoreFiles: [
+    '**/dist/**',
+    '**/vendor/**',
+
+    // Ignore CSS-in-JS (including dotfiles)
+    '**/?(.)*.{cjs,js,mjs}'
+  ],
+  overrides: [
+    {
+      customSyntax: 'postcss-markdown',
+      files: ['**/*.md']
+    },
+    {
+      customSyntax: 'postcss-markdown',
+      files: ['**/coding-standards.md', '**/README.md'],
+      rules: {
+        // Allow markdown `*.md` CSS bad examples
+        'block-no-empty': null,
+        'color-no-hex': null,
+        'selector-max-id': null,
+        'selector-no-qualifying-type': null,
+
+        // Allow markdown `*.md` Sass bad examples
+        'scss/dollar-variable-pattern': null
+      }
+    },
+    {
+      customSyntax: 'postcss-scss',
+      files: ['**/*.scss'],
+      rules: {
+        // Disallow hex colours
+        // https://stylelint.io/user-guide/rules/color-no-hex/
+        'color-no-hex': true,
+
+        // Properties and values that are disallowed
+        // https://stylelint.io/user-guide/rules/declaration-property-value-disallowed-list/
+        'declaration-property-value-disallowed-list': {
+          transition: ['all'],
+          '/^border/': ['none']
+        },
+
+        // Disallow @mixin before @extends
+        // /~https://github.com/hudochenkov/stylelint-order/blob/master/rules/order/README.md#extended-at-rule-objects
+        'order/order': [
+          {
+            type: 'at-rule',
+            name: 'extend'
+          },
+          {
+            type: 'at-rule',
+            name: 'mixin'
+          }
+        ],
+
+        // Allow underscores (but not numbers) in mixin naming pattern
+        // /~https://github.com/stylelint-scss/stylelint-scss/tree/master/src/rules/at-mixin-pattern
+        'scss/at-mixin-pattern': [
+          /^([a-z-_])*$/,
+          {
+            message: 'Mixin names may only contain [a-z-_] characters'
+          }
+        ],
+
+        // Allow underscores in $variable naming pattern
+        // /~https://github.com/stylelint-scss/stylelint-scss/tree/master/src/rules/dollar-variable-pattern
+        'scss/dollar-variable-pattern': [
+          /^([a-z0-9-_])*$/,
+          {
+            message: 'Variable names may only contain [a-z0-9-_] characters'
+          }
+        ],
+
+        // Allow underscores (but not numbers) in %placeholder naming pattern
+        // /~https://github.com/stylelint-scss/stylelint-scss/tree/master/src/rules/percent-placeholder-pattern
+        'scss/percent-placeholder-pattern': [
+          /^([a-z-_])*$/,
+          {
+            message: 'Placeholders may only contain [a-z-_] characters'
+          }
+        ]
+      }
+    }
+  ],
+  plugins: ['stylelint-order']
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,13 +5,17 @@
 :new: **New features**
 
 - Adds `text` param for Inset text ([PR 1113](/~https://github.com/nhsuk/nhsuk-frontend/pull/1113))
+- Make it easier to set checkbox and radio checked items ([PR 1105](/~https://github.com/nhsuk/nhsuk-frontend/pull/1105))
+
+## 9.2.0 - 12 February 2025
 
 :wrench: **Fixes**
 
 - Fix appearance of the select element for more consistency between browsers and OS ([Issue 527](/~https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/527))
 - Fix appearance of disabled warning buttons ([Issue 1034]([/~https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/1034]))
 - Fix reverse button text colour ([PR 1080]([/~https://github.com/nhsuk/nhsuk-frontend/pull/1080]))
 - Fix details component requiring html param in uppercase ([PR 1090](/~https://github.com/nhsuk/nhsuk-frontend/pull/1090), [Issue 1089](/~https://github.com/nhsuk/nhsuk-frontend/issues/1089))
+- Replace image component example images to match assets used on service manual ([Issue 1091](/~https://github.com/nhsuk/nhsuk-frontend/issues/1091))
 
 ## 9.1.0 - 4 November 2024
 

diff --git a/app/components/checkboxes/index.njk b/app/components/checkboxes/index.njk
@@ -20,6 +20,7 @@
                   "classes": "nhsuk-fieldset__legend--m"
                 }
               },
+              "values": ["british"],
               "hint": {
                 "text": "If you have more than 1 nationality, select all options that are relevant to you."
               },

diff --git a/app/components/images/index.njk b/app/components/images/index.njk
@@ -11,16 +11,16 @@
       <div class="nhsuk-grid-row">
         <div class="nhsuk-grid-column-two-thirds">
           {{ image({
-            "src": "https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg",
-            "sizes": "(min-width: 1020px) 320px, (min-width: 768px) 50vw, 100vw",
-            "srcset": "https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-640x427.jpg 640w, https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-767x511.jpg 767w",
-            "alt": "Picture of allergic conjunctivitis",
-            "caption": "Itchy, red, watering eyes"
+            src: "https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg",
+            sizes: "(max-width: 768px) 100vw, 66vw",
+            srcset: "https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg 600w, https://service-manual.nhs.uk/assets/image-example-stretch-marks-1000w.jpg 1000w",
+            alt: "Close-up of a person’s tummy showing a number of creases in the skin under their belly button. Shown on light brown skin.",
+            caption: "Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time."
           }) }}
 
           {{ image({
-            "src": "https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg",
-            "alt": "Picture of allergic conjunctivitis"
+            "src": "https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg",
+            "alt": "Close-up of a person’s tummy showing a number of creases in the skin under their belly button. Shown on light brown skin."
           }) }}
         </div>
       </div>

diff --git a/app/components/radios/index.njk b/app/components/radios/index.njk
@@ -22,15 +22,15 @@
             "hint": {
               "text": "This includes changing your last name or spelling your name differently."
             },
+            "value": "no",
             "items": [
               {
                 "value": "yes",
                 "text": "Yes"
               },
               {
                 "value": "no",
-                "text": "No",
-                "checked": true
+                "text": "No"
               }
             ]
           }) }}

diff --git a/docs/contributing/coding-standards.md b/docs/contributing/coding-standards.md
@@ -61,9 +61,9 @@ The naming convention follows this pattern:
 .block__element {}
 .block--modifier {}
 
-.nhsuk-card              // Block - the root of a component
-.nhsuk-card__heading     // Element - a part of the block
-.nhsuk-card--clickable   // Modifier - a variant of the block
+.nhsuk-card {}            // Block - the root of a component
+.nhsuk-card__heading {}   // Element - a part of the block
+.nhsuk-card--clickable {} // Modifier - a variant of the block
 ```
 
 It uses double hyphens (`--`) and underscores (`__`) so that the block, element
@@ -72,9 +72,9 @@ or modifiers themselves can be hyphen delimited without causing ambiguity.
 For example:
 
 ```scss
-.nhsuk-a-z-nav
-.nhsuk-a-z-nav__link
-.nhsuk-a-z-nav__link--disabled
+.nhsuk-a-z-nav {}
+.nhsuk-a-z-nav__link {}
+.nhsuk-a-z-nav__link--disabled {}
 ```
 
 #### BEM further reading:
@@ -97,11 +97,11 @@ Bad:
 
 ```scss
 .nhsuk-contents-list {
-  ...
+  // ...
   &__item {
-    ...
-    &:before {
-      ...
+    // ...
+    &::before {
+      // ...
     }
   }
 }
@@ -111,13 +111,13 @@ Good:
 
 ```scss
 .nhsuk-contents-list {
-  ...
+  // ...
 }
 
 .nhsuk-contents-list__item {
-  ...
-  &:before {
-    ...
+  // ...
+  &::before {
+    // ...
   }
 }
 ```
@@ -134,33 +134,33 @@ This enables the NHSUK styles to be used inside other applications, where, for e
 
 ```scss
 div#nhsuk-ers {
-...
-@import 'node_modules/nhsuk-frontend/packages/core/all';
-...
+// ...
+@import "node_modules/nhsuk-frontend/packages/core/all";
+// ...
 }
 ```
 
 Bad:
 
 ```scss
 .nhsuk-checkboxes__conditional {
-  ...
+  // ...
   .js-enabled &--hidden {
-    ...
+    // ...
   }
- ...
+ // ...
 }
 ```
 
 Good:
 
 ```scss
 .nhsuk-checkboxes__conditional {
-  ...
+  // ...
 }
 
 .js-enabled .nhsuk-checkboxes__conditional--hidden {
-  ...
+  // ...
 }
 ```
 
@@ -200,21 +200,19 @@ the top block comment and then a reference to the number should go next to the l
 Example:
 
 ```scss
-/* ==========================================================================
-   #TITLE
-   ========================================================================== */
-
-/**
- * Long-form comment.
- *
- * This spans multiple lines and is also constrained to no longer than 80
- * characters in width.
- *
- * 1. Provide line-comments like this.
- */
-
-.X-class {
-  color: red; /* [1] */
+////
+/// Title
+////
+
+/// Long-form comment
+///
+/// This spans multiple lines and is also constrained to no longer than 80
+/// characters in width.
+///
+/// 1. Provide line-comments like this.
+
+.nhsuk-example {
+  color: $color_nhsuk-red; // [1]
 }
 ```
 

diff --git a/docs/contributing/linting.md b/docs/contributing/linting.md
@@ -187,15 +187,15 @@ margin: 1px 2px 3px;
 Bad:
 
 ```
-@import '_foo.scss';
-@import '_bar/foo.scss';
+@import "_foo.scss";
+@import "_bar/foo.scss";
 ```
 
 Good:
 
 ```
-@import 'foo';
-@import 'bar/foo';
+@import "foo";
+@import "bar/foo";
 ```
 
 ### Properties should be formatted with a single space separating the colon from the property's value
@@ -204,15 +204,15 @@ Bad:
 
 ```
 .foo {
-  content:'bar';
+  content:"bar";
 }
 ```
 
 Good:
 
 ```
 .foo {
-  content: 'bar';
+  content: "bar";
 }
 ```
 

diff --git a/docs/installation/installing-with-npm.md b/docs/installation/installing-with-npm.md
@@ -38,18 +38,18 @@ To build the stylesheet you will need a pipeline set up to compile [Sass](https:
 
 You need to import the NHS.UK frontend styles into the main Sass file in your project. You should place the below code before your own Sass rules (or Sass imports).
 
-```SCSS
-@import 'node_modules/nhsuk-frontend/packages/nhsuk';
+```scss
+@import "node_modules/nhsuk-frontend/packages/nhsuk";
 ```
 
 Alternatively you can import each of the individual components separately, meaning you can import just the components that you are using.
 
-```SCSS
+```scss
 // Core (required)
-@import 'node_modules/nhsuk-frontend/packages/core/all';
+@import "node_modules/nhsuk-frontend/packages/core/all";
 
 // Individual component (optional)
-@import 'node_modules/nhsuk-frontend/packages/components/action-link/action-link';
+@import "node_modules/nhsuk-frontend/packages/components/action-link/action-link";
 ```
 
 ## Importing JavaScript