govuk-frontend - npm Package Compare versions

Comparing version 4.7.0 to 4.8.0

govuk/common/govuk-frontend-version.js

@@ -12,3 +12,3 @@ (function (global, factory) {
 
-	var version = '4.7.0';
+	var version = '4.8.0';
 
@@ -15,0 +15,0 @@ exports.version = version;

govuk/components/character-count/fixtures.json

@@ -23,6 +23,9 @@ {
                 "maxlength": 10,
+                "label": {
+                    "text": "Can you provide more detail?"
+                },
                 "textareaDescriptionText": "Gallwch ddefnyddio hyd at %{count} nod"
             },
             "hidden": false,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  \n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-textarea-description\" name=\"custom-textarea-description\" rows=\"5\" aria-describedby=\"custom-textarea-description-info\"></textarea>\n</div>\n  \n  <div id=\"custom-textarea-description-info\" class=\"govuk-hint govuk-character-count__message\">\n  Gallwch ddefnyddio hyd at 10 nod\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"custom-textarea-description\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-textarea-description\" name=\"custom-textarea-description\" rows=\"5\" aria-describedby=\"custom-textarea-description-info\"></textarea>\n</div>\n  \n  <div id=\"custom-textarea-description-info\" class=\"govuk-hint govuk-character-count__message\">\n  Gallwch ddefnyddio hyd at 10 nod\n</div>\n\n</div>"
         },
@@ -138,2 +141,5 @@ {
                 "maxlength": 10,
+                "label": {
+                    "text": "Full address"
+                },
                 "charactersUnderLimitText": {
@@ -159,3 +165,3 @@ "other": "%{count} characters to go",
             "hidden": false,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-i18n.characters-under-limit.other=\"%{count} characters to go\" data-i18n.characters-under-limit.one=\"One character to go\" data-i18n.characters-at-limit=\"Zero characters left\" data-i18n.characters-over-limit.other=\"%{count} characters too many\" data-i18n.characters-over-limit.one=\"One character too many\" data-i18n.words-under-limit.other=\"%{count} words to go\" data-i18n.words-under-limit.one=\"One word to go\" data-i18n.words-at-limit=\"Zero words left\" data-i18n.words-over-limit.other=\"%{count} words too many\" data-i18n.words-over-limit.one=\"One word too many\">\n  <div class=\"govuk-form-group\">\n  \n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-translations\" name=\"with-translations\" rows=\"5\" aria-describedby=\"with-translations-info\"></textarea>\n</div>\n  \n  <div id=\"with-translations-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-i18n.characters-under-limit.other=\"%{count} characters to go\" data-i18n.characters-under-limit.one=\"One character to go\" data-i18n.characters-at-limit=\"Zero characters left\" data-i18n.characters-over-limit.other=\"%{count} characters too many\" data-i18n.characters-over-limit.one=\"One character too many\" data-i18n.words-under-limit.other=\"%{count} words to go\" data-i18n.words-under-limit.one=\"One word to go\" data-i18n.words-at-limit=\"Zero words left\" data-i18n.words-over-limit.other=\"%{count} words too many\" data-i18n.words-over-limit.one=\"One word too many\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-translations\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-translations\" name=\"with-translations\" rows=\"5\" aria-describedby=\"with-translations-info\"></textarea>\n</div>\n  \n  <div id=\"with-translations-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -162,0 +168,0 @@ {

govuk/components/header/macro-options.json

@@ -111,3 +111,9 @@ [
         "description": "HTML attributes (for example data attributes) to add to the header container."
+    },
+    {
+        "name": "useTudorCrown",
+        "type": "boolean",
+        "required": false,
+        "description": "If `true`, the header uses the Tudor crown from King Charles III's royal cypher. This will become the default in a future version of GOV.UK Frontend."
     }
 ]

govuk/components/select/fixtures.json

@@ -201,2 +201,5 @@ {
                 "name": "with-describedby",
+                "label": {
+                    "text": "Label text goes here"
+                },
                 "items": [
@@ -215,3 +218,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n  <select class=\"govuk-select\" id=\"with-describedby\" name=\"with-describedby\" aria-describedby=\"some-id\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-describedby\" name=\"with-describedby\" aria-describedby=\"some-id\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -223,2 +226,5 @@ {
                 "name": "with-attributes",
+                "label": {
+                    "text": "Label text goes here"
+                },
                 "items": [
@@ -239,3 +245,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n  <select class=\"govuk-select\" id=\"with-attributes\" name=\"with-attributes\" data-attribute=\"my data value\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-attributes\" name=\"with-attributes\" data-attribute=\"my data value\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -247,2 +253,5 @@ {
                 "name": "with-item-attributes",
+                "label": {
+                    "text": "Label text goes here"
+                },
                 "value": 2,
@@ -269,3 +278,3 @@ "items": [
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n  <select class=\"govuk-select\" id=\"with-item-attributes\" name=\"with-item-attributes\">\n      <option value=\"1\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n      <option value=\"2\" selected data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-item-attributes\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-item-attributes\" name=\"with-item-attributes\">\n      <option value=\"1\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n      <option value=\"2\" selected data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n  </select>\n</div>"
         },
@@ -277,2 +286,5 @@ {
                 "name": "with-falsey-values",
+                "label": {
+                    "text": "Label text goes here"
+                },
                 "items": [
@@ -293,3 +305,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n  <select class=\"govuk-select\" id=\"with-falsey-values\" name=\"with-falsey-values\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Options 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-falsey-values\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-falsey-values\" name=\"with-falsey-values\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Options 2</option>\n  </select>\n</div>"
         },
@@ -301,2 +313,5 @@ {
                 "name": "select-with-hint",
+                "label": {
+                    "text": "Label text goes here"
+                },
                 "hint": {
@@ -307,3 +322,3 @@ "text": "Hint text goes here"
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"select-with-hint-hint\">\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-with-hint\">\n    Label text goes here\n  </label>\n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"select-with-hint-hint\">\n  </select>\n</div>"
         },
@@ -315,2 +330,5 @@ {
                 "name": "select-with-hint",
+                "label": {
+                    "text": "Label text goes here"
+                },
                 "describedBy": "some-id",
@@ -332,3 +350,3 @@ "hint": {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"some-id select-with-hint-hint\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-with-hint\">\n    Label text goes here\n  </label>\n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"some-id select-with-hint-hint\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -340,2 +358,5 @@ {
                 "name": "select-with-error",
+                "label": {
+                    "text": "Label text goes here"
+                },
                 "errorMessage": {
@@ -356,3 +377,3 @@ "text": "Error message"
             "hidden": true,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n  <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"select-with-error\">\n    Label text goes here\n  </label>\n  <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -364,2 +385,5 @@ {
                 "name": "select-with-error",
+                "label": {
+                    "text": "Label text goes here"
+                },
                 "describedBy": "some-id",
@@ -381,3 +405,3 @@ "errorMessage": {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n  <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"select-with-error\">\n    Label text goes here\n  </label>\n  <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -389,2 +413,5 @@ {
                 "id": "colors",
+                "label": {
+                    "text": "Label text goes here"
+                },
                 "items": [
@@ -408,5 +435,5 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n  <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n      <option value=\"red\">Red</option>\n      <option value=\"green\">Green</option>\n      <option value=\"blue\">Blue</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"colors\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n      <option value=\"red\">Red</option>\n      <option value=\"green\">Green</option>\n      <option value=\"blue\">Blue</option>\n  </select>\n</div>"
         }
     ]
 }

govuk/components/table/fixtures.json

@@ -305,2 +305,3 @@ {
                     {
+                        "text": "Foo",
                         "attributes": {
@@ -323,3 +324,3 @@ "data-fizz": "buzz"
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\" data-fizz=\"buzz\"></th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Jan</td>\n          <td class=\"govuk-table__cell\">Feb</td>\n        </tr>\n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\" data-fizz=\"buzz\">Foo</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Jan</td>\n          <td class=\"govuk-table__cell\">Feb</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -326,0 +327,0 @@ {

package.json

 {
   "name": "govuk-frontend",
   "description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "main": "govuk/all.js",
@@ -6,0 +6,0 @@ "module": "govuk-esm/all.mjs",

No alert changes

Improved metrics

Total package byte prevSize

4966561

increased by7.35%

Number of downloads

128465

increased by4.4%

Number of package files

587

increased by29.3%

Lines of code

43079

increased by0.15%

Number of versions

65

increased by1.56%

Published versions last two months

3

increased by50%

Published versions last week

1

increased byInfinity%

Published versions last year

13

increased by8.33%

No dependency changes