@ministryofjustice/hmpps-connect-dps-shared-items 4.4.0 → 5.0.0

package/README.md

@@ -27,7 +27,7 @@ npm install @ministryofjustice/hmpps-connect-dps-shared-items
 Add the `hmpps-connect-dps-shared-items` assets directory to nunjucks configuration in your application:
 
 ```javascript
-    const njkEnv = nunjucks.configure(
+const njkEnv = nunjucks.configure(
   [
     path.join(__dirname, '../../server/views'),
     ...,
@@ -48,11 +48,11 @@ then import the component into your nunjucks file:
 ### Styling
 Include the package scss within the `index.scss` file. You can either import all:
 ```scss
-  @import 'node_modules/@ministryofjustice/hmpps-connect-dps-shared-items/dist/assets/scss/all';
+@import 'node_modules/@ministryofjustice/hmpps-connect-dps-shared-items/dist/assets/scss/all';
 ```
 or import the specific component scss you are using, e.g:
 ```scss
-  @import 'node_modules/@ministryofjustice/hmpps-connect-dps-shared-items/dist/assets/dps/components/alert-flag/alert-flag';
+@import 'node_modules/@ministryofjustice/hmpps-connect-dps-shared-items/dist/assets/dps/components/alert-flag/alert-flag';
 ```
 
 ### Client side javascript
@@ -66,10 +66,12 @@ connectDps.initAll()
 
 ## Library Components:
 
-1. [Alert Flag](readme/components/alertFlag/alert-flag.md)
-2. [Address Autosuggest](readme/components/addressAutosuggest/address-autosuggest.md)
-3. [Webcam Upload](readme/components/webcamCapture/webcam-capture.md)
+1. [Address Autosuggest](readme/components/addressAutosuggest/address-autosuggest.md)
+2. [Alert Flag](readme/components/alertFlag/alert-flag.md)
+3. [Modal](readme/components/modal/modal.md)
+4. [Webcam Upload](readme/components/webcamCapture/webcam-capture.md)
 
 ## For Library Developers
 
 1. [Publishing to NPM](readme/publishing.md)
+2. To preview all components locally, run `npm run build` and then `npm start`

package/dist/assets/dps/components/address-autosuggest/_address-autosuggest.scss

@@ -1,5 +1,4 @@
-@import 'govuk-frontend/dist/govuk/helpers/colour';
-@import 'govuk-frontend/dist/govuk/settings/colours-applied';
+@use "govuk-frontend/dist/govuk/helpers/colour";
 
 .hmpps-address-autosuggest {
     position: relative;
@@ -15,7 +14,7 @@
     }
 
     &__results {
-        border: 1px solid $govuk-border-colour;
+        border: 1px solid colour.govuk-functional-colour(border);
         border-radius: 3px;
         display: none;
         margin: 0 0 0;
@@ -25,13 +24,13 @@
     }
 
     &__results-title {
-        background: govuk-colour("light-grey");
-        border-bottom: 1px solid $govuk-border-colour;
+        background: colour.govuk-colour("black", $variant: "tint-95");
+        border-bottom: 1px solid colour.govuk-functional-colour(border);
         padding: 0.25rem 0.5rem;
     }
 
     &__listbox {
-        background: govuk-colour("white");
+        background: colour.govuk-colour("white");
         list-style: none;
         margin: 0;
         padding: 0;
@@ -47,22 +46,22 @@
         padding: 0.25rem 0.5rem;
 
         &:not(:last-child) {
-            border-bottom: 1px solid $govuk-border-colour;
+            border-bottom: 1px solid colour.govuk-functional-colour(border);
         }
 
         &--focused:not(&--no-results) {
             background: #1d70b8;
             border-color: #1d70b8;
-            color: govuk-colour("white");
+            color: colour.govuk-colour("white");
         }
 
         &:active:not(&--no-results) {
             background: var(--ons-color-focus);
-            color: govuk-colour("black");
+            color: colour.govuk-colour("black");
         }
 
         &--no-results {
-            background: govuk-colour("light-grey");
+            background: colour.govuk-colour("black", $variant: "tint-95");
             cursor: not-allowed;
             padding: 0.25rem 0.5rem;
         }

package/dist/assets/dps/components/address-autosuggest/abortable-fetch.js

@@ -1,51 +1,45 @@
 // Based on ONSDigital's https://github.com/ONSdigital/design-system/blob/main/src/js/abortable-fetch.js
-
-export const FetchStatus = {
-  unsent: 'UNSENT',
-  loading: 'LOADING',
-  done: 'DONE',
-}
-
-export const abortError = 'AbortError'
-export const abortTimeout = 'AbortTimeout'
-
+const FetchStatus = {
+    unsent: 'UNSENT',
+    loading: 'LOADING',
+    done: 'DONE',
+};
+const abortError = 'AbortError';
+const abortTimeout = 'AbortTimeout';
 class AbortableFetch {
-  constructor(url, options) {
-    this.url = url
-    this.controller = new window.AbortController()
-    this.status = FetchStatus.unsent
-    this.fetchDelay = options?.fetchDelay || 500
-  }
-
-  async send() {
-    this.status = FetchStatus.loading
-    try {
-      // Abortable delay before querying the API to limit the rate of requests when someone is typing:
-      await new Promise((resolve) => {
-        setTimeout(resolve, this.fetchDelay)
-        this.controller.signal.addEventListener('abort', () => { resolve() }, { once: true })
-      })
-
-      setTimeout(() => {
-        this.controller.abort(abortTimeout)
-      }, 5000)
-
-      const response = await window.fetch(this.url, { signal: this.controller.signal })
-
-      if (!(+response.status === 200)) {
-        const error = new Error(`API error: ${response?.status ?? 500}`)
-        error.response = response
-        throw error
-      }
-      return response
-    } finally {
-      this.status = FetchStatus.done
+    constructor(url, options) {
+        this.url = url;
+        this.controller = new window.AbortController();
+        this.status = FetchStatus.unsent;
+        this.fetchDelay = options?.fetchDelay || 500;
+    }
+    async send() {
+        this.status = FetchStatus.loading;
+        try {
+            // Abortable delay before querying the API to limit the rate of requests when someone is typing:
+            await new Promise((resolve) => {
+                setTimeout(resolve, this.fetchDelay);
+                this.controller.signal.addEventListener('abort', () => { resolve(); }, { once: true });
+            });
+            setTimeout(() => {
+                this.controller.abort(abortTimeout);
+            }, 5000);
+            const response = await window.fetch(this.url, { signal: this.controller.signal });
+            if (!(+response.status === 200)) {
+                const error = new Error(`API error: ${response?.status ?? 500}`);
+                error.response = response;
+                throw error;
+            }
+            return response;
+        }
+        finally {
+            this.status = FetchStatus.done;
+        }
+    }
+    abort() {
+        this.controller.abort();
     }
-  }
-
-  abort() {
-    this.controller.abort()
-  }
 }
+const abortableFetch = (url, options) => new AbortableFetch(url, options);
 
-export const abortableFetch = (url, options) => new AbortableFetch(url, options)
+export { FetchStatus, abortError, abortTimeout, abortableFetch };

package/dist/assets/dps/components/address-autosuggest/autosuggest-address.js

@@ -1,91 +1,80 @@
-// Based on ONSDigital's https://github.com/ONSdigital/design-system/blob/main/src/components/address-input/autosuggest.address.js
-import { AutosuggestUi, NoResults } from './autosuggest-ui'
-import { abortableFetch, abortError, FetchStatus } from './abortable-fetch'
-
-const classUPRN = 'hmpps-js-uprn'
-const classInputContainer = 'hmpps-address-autosuggest'
-const classInput = 'hmpps-js-autosuggest-input'
-
-export class AutosuggestAddress {
-  constructor(context) {
-    this.context = context
-    this.input = context.querySelector(`.${classInput}`)
-    this.container = context.querySelector(`.${classInputContainer}`)
-    this.uprn = context.querySelector(`.${classUPRN}`)
-    this.findUrl = this.container.getAttribute('data-find-url')
-    this.fetchDelay = this.container.getAttribute('data-fetch-delay')
-
-    // State:
-    this.fetch = null
-
-    // Initialise autosuggest:
-    this.autosuggest = new AutosuggestUi({
-      context: this.container,
-      onSelect: this.onAddressSelect.bind(this),
-      suggestionFunction: this.suggestAddresses.bind(this),
-    })
-
-    // Check API status:
-    this.checkAPIStatus()
-  }
+import { AutosuggestUi, NoResults } from './autosuggest-ui.js';
+import { abortableFetch, abortError, FetchStatus } from './abortable-fetch.js';
 
-  async checkAPIStatus() {
-    this.fetch = abortableFetch(`${this.findUrl}/SW1H9AJ`, { fetchDelay: this.fetchDelay })
-
-    try {
-      const response = await this.fetch.send()
-      const status = response && (await response.json()).status
-      if (status !== 200) {
-        this.autosuggest.handleNoResults(NoResults.server_error)
-      }
-    } catch (error) {
-      if (error.name !== abortError) {
-        this.autosuggest.handleNoResults(NoResults.server_error)
-      }
+// Based on ONSDigital's https://github.com/ONSdigital/design-system/blob/main/src/components/address-input/autosuggest.address.js
+const classUPRN = 'hmpps-js-uprn';
+const classInputContainer = 'hmpps-address-autosuggest';
+const classInput = 'hmpps-js-autosuggest-input';
+class AutosuggestAddress {
+    constructor(context) {
+        this.context = context;
+        this.input = context.querySelector(`.${classInput}`);
+        this.container = context.querySelector(`.${classInputContainer}`);
+        this.uprn = context.querySelector(`.${classUPRN}`);
+        this.findUrl = this.container.getAttribute('data-find-url');
+        this.fetchDelay = this.container.getAttribute('data-fetch-delay');
+        // State:
+        this.fetch = null;
+        // Initialise autosuggest:
+        this.autosuggest = new AutosuggestUi({
+            context: this.container,
+            onSelect: this.onAddressSelect.bind(this),
+            suggestionFunction: this.suggestAddresses.bind(this),
+        });
+        // Check API status:
+        this.checkAPIStatus();
     }
-  }
-
-  async suggestAddresses(query) {
-    if (this.fetch && this.fetch.status !== FetchStatus.done) {
-      this.fetch.abort()
+    async checkAPIStatus() {
+        this.fetch = abortableFetch(`${this.findUrl}/SW1H9AJ`, { fetchDelay: this.fetchDelay });
+        try {
+            const response = await this.fetch.send();
+            const status = response && (await response.json()).status;
+            if (status !== 200) {
+                this.autosuggest.handleNoResults(NoResults.server_error);
+            }
+        }
+        catch (error) {
+            if (error.name !== abortError) {
+                this.autosuggest.handleNoResults(NoResults.server_error);
+            }
+        }
     }
-
-    // Reset any previously selected result:
-    this.uprn.value = ''
-
-    return await this.findAddress(query?.replace(/[^A-Z0-9-.' ]/gi, ''))
-  }
-
-  async findAddress(query) {
-    this.fetch = abortableFetch(`${this.findUrl}/${query}`, { fetchDelay: this.fetchDelay })
-    const data = await this.fetch.send()
-    const response = await data.json()
-    const status = response.status
-    const addresses = response.results
-    return this.mapFindResults(addresses, status)
-  }
-
-  mapFindResults(results, status) {
-    if (!results) return { status }
-
-    return {
-      results: this.addressMapping(results),
-      status: status,
+    async suggestAddresses(query) {
+        if (this.fetch && this.fetch.status !== FetchStatus.done) {
+            this.fetch.abort();
+        }
+        // Reset any previously selected result:
+        this.uprn.value = '';
+        return await this.findAddress(query?.replace(/[^A-Z0-9-.' ]/gi, ''));
     }
-  }
-
-  addressMapping(addresses) {
-    if (!addresses?.length) return []
-
-    return addresses.map(address => ({ uprn: address.uprn, displayText: address.addressString }))
-  }
-
-  async onAddressSelect(selectedResult) {
-    if (this.fetch && this.fetch.status !== FetchStatus.done) {
-      this.fetch.abort()
+    async findAddress(query) {
+        this.fetch = abortableFetch(`${this.findUrl}/${query}`, { fetchDelay: this.fetchDelay });
+        const data = await this.fetch.send();
+        const response = await data.json();
+        const status = response.status;
+        const addresses = response.results;
+        return this.mapFindResults(addresses, status);
+    }
+    mapFindResults(results, status) {
+        if (!results)
+            return { status };
+        return {
+            results: this.addressMapping(results),
+            status: status,
+        };
+    }
+    addressMapping(addresses) {
+        if (!addresses?.length)
+            return [];
+        return addresses.map(address => ({ uprn: address.uprn, displayText: address.addressString }));
+    }
+    async onAddressSelect(selectedResult) {
+        if (this.fetch && this.fetch.status !== FetchStatus.done) {
+            this.fetch.abort();
+        }
+        this.autosuggest.input.value = selectedResult.displayText;
+        this.uprn.value = selectedResult.uprn;
     }
-
-    this.autosuggest.input.value = selectedResult.displayText
-    this.uprn.value = selectedResult.uprn
-  }
 }
+
+export { AutosuggestAddress };