@dwp/govuk-casa 8.15.0 → 9.1.0

package/src/routes/static.js

@@ -1,12 +1,12 @@
-import ExpressJS from 'express';
-import { readFileSync } from 'fs';
-import { URL } from 'url';
-import { resolve } from 'path';
-import { createRequire } from 'module';
+import ExpressJS from "express";
+import { readFileSync } from "fs";
+import { URL } from "url";
+import { resolve } from "path";
+import { createRequire } from "module";
 
-import dirname from './dirname.cjs';
-import MutableRouter from '../lib/MutableRouter.js';
-import { validateUrlPath } from '../lib/utils.js';
+import dirname from "./dirname.cjs";
+import MutableRouter from "../lib/MutableRouter.js";
+import { validateUrlPath } from "../lib/utils.js";
 
 const { static: ExpressStatic } = ExpressJS; // CommonJS
 
@@ -14,34 +14,36 @@ const oneDay = 86400000;
 
 /**
  * @typedef {object} StaticOptions Options to configure static router
- * @property {number} [maxAge=3600000] Cache TTL for all assets (optional, default 1 hour)
+ * @property {number} [maxAge=3600000] Cache TTL for all assets (optional,
+ *   default 1 hour). Default is `3600000`
  */
 
 /**
  * Create a router for serving CASA's static assets.
  *
- * @access private
  * @param {StaticOptions} options Options
  * @returns {MutableRouter} ExpressJS Router instance
+ * @access private
  */
-export default function staticRouter({
-  maxAge = 3600000,
-} = {}) {
+export default function staticRouter({ maxAge = 3600000 } = {}) {
   const router = new MutableRouter();
 
   const notFoundHandler = (req, res, next) => {
     // Fall through to a general purpose error handler
-    next(new Error('404'));
+    next(new Error("404"));
   };
 
   const setHeaders = (req, res, next) => {
-    res.set('cache-control', 'public');
-    res.set('pragma', 'cache');
-    res.set('expires', new Date(Date.now() + oneDay).toUTCString());
-    const { pathname } = new URL(req?.originalUrl ?? '', 'https://placeholder.test/');
-    if (pathname.substr(-4) === '.css') {
+    res.set("cache-control", "public");
+    res.set("pragma", "cache");
+    res.set("expires", new Date(Date.now() + oneDay).toUTCString());
+    const { pathname } = new URL(
+      req?.originalUrl ?? "",
+      "https://placeholder.test/",
+    );
+    if (pathname.substr(-4) === ".css") {
       // Just needed for our in-memory CSS assets
-      res.set('content-type', 'text/css');
+      res.set("content-type", "text/css");
     }
     next();
   };
@@ -59,22 +61,52 @@ export default function staticRouter({
   // must be replaced with the dynamic `mountUrl` to ensure govuk-frontend
   // assets are served from the correct location.
   /* eslint-disable security/detect-non-literal-fs-filename */
-  const casaCss = readFileSync(resolve(dirname, '../../dist/assets/css/casa.css'), { encoding: 'utf8' });
-  const casaCssIe8 = readFileSync(resolve(dirname, '../../dist/assets/css/casa-ie8.css'), { encoding: 'utf8' });
+  const casaCss = readFileSync(
+    resolve(dirname, "../../dist/assets/css/casa.css"),
+    { encoding: "utf8" },
+  );
   /* eslint-enable security/detect-non-literal-fs-filename */
 
   // The static middleware will only server GET/HEAD requests, so we can mount
   // the middleware using `use()` rather than resorting to `get()`
-  const govukFrontendDirectory = resolve(createRequire(dirname).resolve('govuk-frontend'), '../../');
+  const govukFrontendDirectory = resolve(
+    createRequire(dirname).resolve("govuk-frontend"),
+    "../../",
+  );
 
-  router.use('/govuk/assets/js/all.js', ExpressStatic(`${govukFrontendDirectory}/govuk/all.js`, staticConfig));
-  router.use('/govuk/assets/js/all.js.map', ExpressStatic(`${govukFrontendDirectory}/govuk/all.js.map`, staticConfig));
-  router.use('/govuk/assets', ExpressStatic(`${govukFrontendDirectory}/govuk/assets`, staticConfig));
-  router.use('/govuk/assets', notFoundHandler);
+  router.use(
+    "/govuk/govuk-frontend.min.js",
+    ExpressStatic(
+      `${govukFrontendDirectory}/govuk/govuk-frontend.min.js`,
+      staticConfig,
+    ),
+  );
+  router.use(
+    "/govuk/govuk-frontend.min.js.map",
+    ExpressStatic(
+      `${govukFrontendDirectory}/govuk/govuk-frontend.min.js.map`,
+      staticConfig,
+    ),
+  );
+  router.use(
+    "/govuk/assets",
+    ExpressStatic(`${govukFrontendDirectory}/govuk/assets`, staticConfig),
+  );
+  router.use("/govuk/assets", notFoundHandler);
 
-  router.get('/casa/assets/css/casa.css', setHeaders, (req, res) => res.send(casaCss.replace(/~~~CASA_MOUNT_URL~~~/g, validateUrlPath(`${req.baseUrl}/`))));
-  router.get('/casa/assets/css/casa-ie8.css', setHeaders, (req, res) => res.send(casaCssIe8.replace(/~~~CASA_MOUNT_URL~~~/g, validateUrlPath(`${req.baseUrl}/`))));
-  router.use('/casa/assets', notFoundHandler);
+  router.get("/casa/assets/css/casa.css", setHeaders, (req, res) =>
+    res.send(
+      casaCss.replace(
+        /~~~CASA_MOUNT_URL~~~/g,
+        validateUrlPath(`${req.baseUrl}/`),
+      ),
+    ),
+  );
+  router.use(
+    "/casa/assets/css/casa.css.map",
+    ExpressStatic(resolve(dirname, "../../dist/assets/css/casa.css.map")),
+  );
+  router.use("/casa/assets", notFoundHandler);
 
   return router;
 }

package/views/casa/components/character-count/README.md

@@ -4,7 +4,7 @@ Extends the [`govukCharacterCount()`](https://design-system.service.gov.uk/compo
 
 Custom parameters:
 
-* `casaErrors` - form errors (just pass `formErrors`)
+- `casaErrors` - form errors (just pass `formErrors`)
 
 ## Example usage
 
@@ -24,7 +24,7 @@ casaGovukCharacterCount({
 
 The following attributes will be attached to the error `<p>` tag if `casaWithAnalytics` is `true`:
 
-* `data-ga-question`: Holds the fieldset label's text content
+- `data-ga-question`: Holds the fieldset label's text content
 
 These are the conventions used by DWP.
 

package/views/casa/components/checkboxes/README.md

@@ -6,9 +6,9 @@ Note that for consistency, values gathered from this macro will always be an arr
 
 Custom parameters:
 
-* `casaValue` (`array`) - the value of the chosen checkbox(es). This is a convenience for toggling the `checked` flag on the appropriate `item`, but you can also manually set `checked` on each item if you need to use more specific logic for determining checked state.
-* `casaErrors` - form errors (just pass `formErrors`)
-* `casaWithAnalytics` - enable DWP's conventional Google Analytics attributes (`data-ga-question` and `data-ga-answer`) - `false` by default; **IMPORTANT: DO NOT ENABLE this option if the question or answer may contain personally-identifiable information as values will be pushed to Google**
+- `casaValue` (`array`) - the value of the chosen checkbox(es). This is a convenience for toggling the `checked` flag on the appropriate `item`, but you can also manually set `checked` on each item if you need to use more specific logic for determining checked state.
+- `casaErrors` - form errors (just pass `formErrors`)
+- `casaWithAnalytics` - enable DWP's conventional Google Analytics attributes (`data-ga-question` and `data-ga-answer`) - `false` by default; **IMPORTANT: DO NOT ENABLE this option if the question or answer may contain personally-identifiable information as values will be pushed to Google**
 
 ## Example usage
 
@@ -88,12 +88,12 @@ The error summary link must set focus on the first checkbox in the group. Unless
 
 The following attributes will be attached to each `<input>` option if `casaWithAnalytics` is `true`:
 
-* `data-ga-question`: Holds the fieldset legend's content
-* `data-ga-answer`: Holds the specific answer's text/html value
+- `data-ga-question`: Holds the fieldset legend's content
+- `data-ga-answer`: Holds the specific answer's text/html value
 
 The following attributes will be attached to the error `<p>` tag if `casaWithAnalytics` is `true`:
 
-* `data-ga-question`: Holds the fieldset legend's content after removing all html tags
+- `data-ga-question`: Holds the fieldset legend's content after removing all html tags
 
 These are the conventions used by DWP.
 

package/views/casa/components/date-input/README.md

@@ -4,8 +4,8 @@ Extends the [`govukDateInput()`](https://design-system.service.gov.uk/components
 
 Custom parameters:
 
-* `casaValue` (`object`) - the value of the date object, in `{dd: "", mm: "", yyyy: ""}` format
-* `casaErrors` - form errors (just pass `formErrors`)
+- `casaValue` (`object`) - the value of the date object, in `{dd: "", mm: "", yyyy: ""}` format
+- `casaErrors` - form errors (just pass `formErrors`)
 
 Note that the underlying GOVUK macro has no support for a `name` parameter, and instead you will need to use the `namePrefix` attribute.
 
@@ -72,11 +72,11 @@ module.exports = {
   myDateField: sf([
     r.required.make({
       errorMsg: {
-        summary: 'Your error message',
-        focusSuffix: '[dd]'
-      }
+        summary: "Your error message",
+        focusSuffix: "[dd]",
+      },
     }),
-    r.dateObject
+    r.dateObject,
   ]),
 };
 ```
@@ -107,7 +107,7 @@ You can also pass a locale:
 
 The following attributes will be attached to the error `<p>` tag if `casaWithAnalytics` is `true`:
 
-* `data-ga-question`: Holds the fieldset label's text content after removing all html tags
+- `data-ga-question`: Holds the fieldset label's text content after removing all html tags
 
 These are the conventions used by DWP.
 

package/views/casa/components/input/README.md

@@ -4,7 +4,7 @@ Extends the [`govukInput()`](https://design-system.service.gov.uk/components/tex
 
 Custom parameters:
 
-* `casaErrors` - form errors (just pass `formErrors`)
+- `casaErrors` - form errors (just pass `formErrors`)
 
 ## Example usage
 
@@ -24,7 +24,7 @@ casaGovukInput({
 
 The following attributes will be attached to the error `<p>` tag if `casaWithAnalytics` is `true`:
 
-* `data-ga-question`: Holds the fieldset label's text content after removing all html tags
+- `data-ga-question`: Holds the fieldset label's text content after removing all html tags
 
 These are the conventions used by DWP.
 

package/views/casa/components/journey-form/README.md

@@ -27,20 +27,39 @@ A "Continue" button (and "Cancel" link if in edit mode) will also be added.
 Which will render something like this:
 
 ```html
-<form action="/form/url" method="post" autocomplete="off" novalidate class="casa-journey-form">
+<form
+  action="/form/url"
+  method="post"
+  autocomplete="off"
+  novalidate
+  class="casa-journey-form"
+>
   <input type="hidden" name="_csrf" value="..." />
   <input type="hidden" name="edit" value="true" />
   <input type="hidden" name="editorigin" value="/url/to/review/page" />
-  <input type="hidden" name="contextid" value="123e4567-e89b-12d3-a456-426614174000" />
+  <input
+    type="hidden"
+    name="contextid"
+    value="123e4567-e89b-12d3-a456-426614174000"
+  />
 
   ... your form inputs here ...
 
   <div class="govuk-button-group casa-form-control-block">
-    <button type="submit" class="govuk-button" data-prevent-double-click="true" id="continue-button">
+    <button
+      type="submit"
+      class="govuk-button"
+      data-prevent-double-click="true"
+      id="continue-button"
+    >
       Save changes
     </button>
 
-    <a href="/url/to/review/page" class="govuk-link govuk-link--no-visited-state">Cancel</a>
+    <a
+      href="/url/to/review/page"
+      class="govuk-link govuk-link--no-visited-state"
+      >Cancel</a
+    >
   </div>
 </form>
 ```
@@ -49,13 +68,13 @@ Note that the submit button is configured to prevent double-clicks and avoid dup
 
 ## Component arguments
 
-| Name | Type | Required | Description |
-|------|------|----------|-------------|
-| `formUrl` | string | Yes | The form's "action", available in a `formUrl` template variable |
-| `autoComplete` | string | No | Allows you to override the autocomplete parameter  - the default value is 'off'
-| `csrfToken` | string | Yes | Token used to protect form from CSRF (available to user's templates via the global `casa.csrfToken` variable) |
-| `inEditMode` | boolean | No | Toggle edit-mode of the form (available to page templates using default GET/POST handlers via the local `inEditMode` variable) |
-| `editOriginUrl` | string | No | Absolute URL to the page from which the edit request came (defaults to `review`) (available to user's templates using default GET/POST handlers via the local `editOriginUrl` variable) |
-| `activeContextId` | string | No | ID of the active context to save data into. Won't be present if the "default" context is active |
-| `buttonBarHidden` | boolean | No | Toggle the rendering of the bar containing the "Continue" button and "Cancel" link.Useful if you want to render your own buttons |
-| `buttonText` | string | No | Overrides default button text i.e Save changes. If you need to retain the save changes switch you will need to add this logic |
+| Name              | Type    | Required | Description                                                                                                                                                                             |
+| ----------------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `formUrl`         | string  | Yes      | The form's "action", available in a `formUrl` template variable                                                                                                                         |
+| `autoComplete`    | string  | No       | Allows you to override the autocomplete parameter - the default value is 'off'                                                                                                          |
+| `csrfToken`       | string  | Yes      | Token used to protect form from CSRF (available to user's templates via the global `casa.csrfToken` variable)                                                                           |
+| `inEditMode`      | boolean | No       | Toggle edit-mode of the form (available to page templates using default GET/POST handlers via the local `inEditMode` variable)                                                          |
+| `editOriginUrl`   | string  | No       | Absolute URL to the page from which the edit request came (defaults to `review`) (available to user's templates using default GET/POST handlers via the local `editOriginUrl` variable) |
+| `activeContextId` | string  | No       | ID of the active context to save data into. Won't be present if the "default" context is active                                                                                         |
+| `buttonBarHidden` | boolean | No       | Toggle the rendering of the bar containing the "Continue" button and "Cancel" link.Useful if you want to render your own buttons                                                        |
+| `buttonText`      | string  | No       | Overrides default button text i.e Save changes. If you need to retain the save changes switch you will need to add this logic                                                           |

package/views/casa/components/postal-address-object/README.md

@@ -2,9 +2,9 @@
 
 Custom parameters:
 
-* `value` - the value of the address object, in `{address1: '', address2: '', address3: '', address4: '', postcode: ''}` format
-* `casaErrors` - form errors (just pass `formErrors`)
-* `address[1-4]` and `postcode` - for specifying extra attributes for each of the address input components
+- `value` - the value of the address object, in `{address1: '', address2: '', address3: '', address4: '', postcode: ''}` format
+- `casaErrors` - form errors (just pass `formErrors`)
+- `address[1-4]` and `postcode` - for specifying extra attributes for each of the address input components
 
 ## Example usage
 
@@ -57,7 +57,7 @@ And when using the `required` field validator in conjunction with this macro, yo
 
 The following attributes will be attached to the error `<p>` tags if `casaWithAnalytics` is `true`:
 
-* `data-ga-question`: Holds the specific item's label's text content after removing all html tags
+- `data-ga-question`: Holds the specific item's label's text content after removing all html tags
 
 These are the conventions used by DWP.
 

package/views/casa/components/radios/README.md

@@ -4,9 +4,9 @@ Extends the [`govukRadios()`](https://design-system.service.gov.uk/components/ra
 
 Custom parameters:
 
-* `casaValue` - the value of the chosen radio button. This is a convenience for toggling the `checked` flag on the appropriate `item`, but you can also manually set `checked` on each item if you need to use more specific logic for determining checked state.
-* `casaErrors` - form errors (just pass `formErrors`)
-* `casaWithAnalytics` - enable DWP's conventional Google Analytics attributes (`data-ga-question` and `data-ga-answer`) - `false` by default; **IMPORTANT: DO NOT ENABLE this option if the question or answer may contain personally-identifiable information as values will be pushed to Google**
+- `casaValue` - the value of the chosen radio button. This is a convenience for toggling the `checked` flag on the appropriate `item`, but you can also manually set `checked` on each item if you need to use more specific logic for determining checked state.
+- `casaErrors` - form errors (just pass `formErrors`)
+- `casaWithAnalytics` - enable DWP's conventional Google Analytics attributes (`data-ga-question` and `data-ga-answer`) - `false` by default; **IMPORTANT: DO NOT ENABLE this option if the question or answer may contain personally-identifiable information as values will be pushed to Google**
 
 ## Example usage
 
@@ -86,12 +86,12 @@ The error summary link must set focus on the first radio in the group. Unless yo
 
 The following attributes will be attached to each `<input>` option if `casaWithAnalytics` is `true`:
 
-* `data-ga-question`: Holds the fieldset legend's content
-* `data-ga-answer`: Holds the specific answer's text/html value
+- `data-ga-question`: Holds the fieldset legend's content
+- `data-ga-answer`: Holds the specific answer's text/html value
 
 The following attributes will be attached to the error `<p>` tag if `casaWithAnalytics` is `true`:
 
-* `data-ga-question`: Holds the fieldset legend's content after removing all html tags
+- `data-ga-question`: Holds the fieldset legend's content after removing all html tags
 
 These are the conventions used by DWP.
 

package/views/casa/components/select/README.md

@@ -4,9 +4,9 @@ Extends the [`govukSelect()`](https://design-system.service.gov.uk/components/se
 
 Custom parameters:
 
-* `casaValue` - the value of the selected option. This is a convenience for toggling the `selected` flag on the appropriate `item`, but you can also manually set `selected` on each item of you need to use more specific logic for determining selected state.
-* `casaErrors` - form errors (just pass `formErrors`)
-* `casaWithAnalytics` - enable DWP's conventional Google Analytics attributes (`data-ga-question` and `data-ga-answer`) - `false` by default; **IMPORTANT: DO NOT ENABLE this option if the question or answer may contain personally-identifiable information as values will be pushed to Google**
+- `casaValue` - the value of the selected option. This is a convenience for toggling the `selected` flag on the appropriate `item`, but you can also manually set `selected` on each item of you need to use more specific logic for determining selected state.
+- `casaErrors` - form errors (just pass `formErrors`)
+- `casaWithAnalytics` - enable DWP's conventional Google Analytics attributes (`data-ga-question` and `data-ga-answer`) - `false` by default; **IMPORTANT: DO NOT ENABLE this option if the question or answer may contain personally-identifiable information as values will be pushed to Google**
 
 ## Example usage
 
@@ -53,12 +53,12 @@ The error summary link must set focus on the select item in the group. Unless yo
 
 The following attributes will be attached to each `<input>` option if `casaWithAnalytics` is `true`:
 
-* `data-ga-question`: Holds the fieldset legend's content
-* `data-ga-answer`: Holds the specific answer's text/html value
+- `data-ga-question`: Holds the fieldset legend's content
+- `data-ga-answer`: Holds the specific answer's text/html value
 
 The following attributes will be attached to the error `<p>` tag if `casaWithAnalytics` is `true`:
 
-* `data-ga-question`: Holds the fieldset legend's content after removing all html tags
+- `data-ga-question`: Holds the fieldset legend's content after removing all html tags
 
 These are the conventions used by DWP.
 

package/views/casa/components/textarea/README.md

@@ -4,7 +4,7 @@ Extends the [`govukTextarea()`](https://design-system.service.gov.uk/components/
 
 Custom parameters:
 
-* `casaErrors` - form errors (just pass `formErrors`)
+- `casaErrors` - form errors (just pass `formErrors`)
 
 ## Example usage
 
@@ -24,7 +24,7 @@ casaGovukTextarea({
 
 The following attributes will be attached to the error `<p>` tag if `casaWithAnalytics` is `true`:
 
-* `data-ga-question`: Holds the fieldset label's text content after removing all html tags
+- `data-ga-question`: Holds the fieldset label's text content after removing all html tags
 
 These are the conventions used by DWP.
 

package/views/casa/partials/scripts.njk

@@ -1,7 +1,9 @@
 <!-- CASA -->
-<script src="{{ casa.staticMountUrl }}govuk/assets/js/all.js?{{ casaVersion }}"></script>
-<script nonce="{{ cspNonce }}">
-window.GOVUKFrontend.initAll();
+{% set jsPath = casa.staticMountUrl + "govuk/govuk-frontend.min.js?" + casaVersion %}
+<script type="module" src="{{ jsPath }}"></script>
+<script type="module"{% if cspNonce %} nonce="{{ cspNonce }}"{% endif %}>
+import { initAll } from '{{ jsPath }}';
+initAll();
 if (window.history.replaceState) {
   // Prevent re-submission of POST on refreshing page
   window.history.replaceState(null, null, window.location.href);

package/views/casa/partials/styles.njk

@@ -1,6 +1,3 @@
 <!-- CASA -->
-<!--[if gt IE 8]><!--><link href="{{ casa.staticMountUrl }}casa/assets/css/casa.css?{{ casaVersion }}" rel="stylesheet" /><!--<![endif]-->
-<!--[if lte IE 8]>
-<link href="{{ casa.staticMountUrl }}casa/assets/css/casa-ie8.css?{{ casaVersion }}" rel="stylesheet" />
-<![endif]-->
+<link href="{{ casa.staticMountUrl }}casa/assets/css/casa.css?{{ casaVersion }}" rel="stylesheet" />
 <!-- /CASA -->