@defra/lis-infra-ui-services 0.49.0 → 0.50.0-lreg-875.alpha.2

package/README.md

@@ -53,7 +53,7 @@ const nunjucksConfig = createNunjucksConfig({
 await server.register(nunjucksConfig)
 ```
 
-The template components are `appHeading`, `appAutocomplete`, `lisSubNavigation`, plus the search form,
+The template components are `appHeading`, `appAutocomplete`, `lisDatePicker`, `lisSubNavigation`, plus the search form,
 sortable paginated table and date templates. `createNunjucksContextBuilder` (also exported from
 `/nunjucks-context`) builds just the view context. The filters `formatAge`, `formatDate`,
 `formatEarTag`, `formatCurrency` and `queryString` are also exported from `/nunjucks/filters`, and the
@@ -294,10 +294,35 @@ import { initAllAutocompletes } from '@defra/lis-infra-ui-services/components/au
 initAllAutocompletes()
 ```
 
+#### Date picker
+
+The `lisDatePicker` template component adds a calendar dialog to a GOV.UK text input, adapted from the [MoJ Frontend date picker](https://design-patterns.service.justice.gov.uk/components/date-picker) (MIT licence). It takes the same `id`, `name`, `value`, `label`, `hint`, `errorMessage`, `formGroup`, `classes` and `attributes` as `govukInput`, plus `minDate` and `maxDate` (`d/m/yyyy`), `excludedDates` (space-separated dates or `d/m/yyyy-d/m/yyyy` ranges), `excludedDays` (space-separated day names), `leadingZeros` (picked dates are `27/3/2026` by default, `27/03/2026` when `true`) and `weekStartDay` (`monday` or `sunday`, default `monday`).
+
+```njk
+{% from "date-picker/macro.njk" import lisDatePicker %}
+
+{{ lisDatePicker({
+  id: "movement-date",
+  name: "movementDate",
+  label: { text: "Date of movement" },
+  hint: { text: "For example, 27/3/2026" },
+  maxDate: "5/11/2026"
+}) }}
+```
+
+Start `DatePicker` from `@defra/lis-infra-ui-services/components/date-picker` with `createAll`, alongside the other components. Without JavaScript the plain text input remains.
+
+```js
+import { createAll } from 'govuk-frontend'
+import { DatePicker } from '@defra/lis-infra-ui-services/components/date-picker'
+
+createAll(DatePicker)
+```
+
 ### Styles
 
 Import the Sass files you need from your app's stylesheet: `components/autocomplete.scss`,
-`components/search-form.scss`, `components/service-navigation.scss`,
+`components/date-picker.scss`, `components/search-form.scss`, `components/service-navigation.scss`,
 `components/sortable-paginated-table.scss` and `components/sub-navigation.scss`.
 
 ```scss

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/lis-infra-ui-services",
-  "version": "0.49.0",
+  "version": "0.50.0-lreg-875.alpha.2",
   "description": "UI-Services shared definitions for the livestock taxonomy topology.",
   "main": "src/index.js",
   "repository": {
@@ -15,10 +15,12 @@
     "./cookies/cookies-policy": "./src/cookies/cookies-policy.js",
     "./components/autocomplete": "./src/components/autocomplete.js",
     "./components/cookie-banner": "./src/components/cookie-banner.js",
+    "./components/date-picker": "./src/components/date-picker.js",
     "./components/error-pages": "./src/components/error-pages.js",
     "./components/layout": "./src/components/layout.js",
     "./components/scrollable-table": "./src/components/scrollable-table.js",
     "./components/autocomplete.scss": "./src/components/autocomplete.scss",
+    "./components/date-picker.scss": "./src/components/date-picker.scss",
     "./components/search-form.scss": "./src/components/search-form.scss",
     "./components/service-navigation.scss": "./src/components/service-navigation.scss",
     "./components/sortable-paginated-table.scss": "./src/components/sortable-paginated-table.scss",
@@ -86,6 +88,8 @@
     "@defra/lis-hubs-infra-registry": "^0.13.0",
     "@defra/lis-infra-eslint-config": "^0.6.0",
     "@hapi/hapi": "^21.4.10",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/user-event": "^14.6.8",
     "@vitest/coverage-istanbul": "^4.1.10",
     "audit-ci": "^7.1.0",
     "convict": "^6.2.5",

package/src/components/date-picker-calendar-day.js

@@ -0,0 +1,135 @@
+// Adapted from the date picker in MoJ Frontend 12.0.0
+// (https://github.com/ministryofjustice/moj-frontend), MIT licence.
+// Copyright (c) 2019 Ministry of Justice
+
+/**
+ * Picks the picker's navigation for a calendar key press.
+ * @param {object} picker - the date picker that owns the day
+ * @param {object} event - keydown event
+ * @returns {Function | undefined} the navigation, or undefined for any other key
+ */
+function navigationForKey(picker, event) {
+  const navigations = new Map([
+    ['ArrowLeft', () => picker.focusPreviousDay()],
+    ['ArrowRight', () => picker.focusNextDay()],
+    ['ArrowUp', () => picker.focusPreviousWeek()],
+    ['ArrowDown', () => picker.focusNextWeek()],
+    ['Home', () => picker.focusFirstDayOfWeek()],
+    ['End', () => picker.focusLastDayOfWeek()],
+    [
+      'PageUp',
+      () =>
+        event.shiftKey
+          ? picker.focusPreviousYear(event)
+          : picker.focusPreviousMonth(event)
+    ],
+    [
+      'PageDown',
+      () =>
+        event.shiftKey
+          ? picker.focusNextYear(event)
+          : picker.focusNextMonth(event)
+    ]
+  ])
+
+  return navigations.get(event.key)
+}
+
+/**
+ * One day button in the calendar grid.
+ */
+export class CalendarDay {
+  /**
+   * @param {object} $button - the day's button element
+   * @param {number} index - position in the grid
+   * @param {number} row - grid row
+   * @param {number} column - grid column
+   * @param {object} picker - the date picker that owns the day
+   */
+  constructor($button, index, row, column, picker) {
+    this.index = index
+    this.row = row
+    this.column = column
+    this.$button = $button
+    this.picker = picker
+    this.date = new Date()
+  }
+
+  /**
+   * @param {Date} day - the Date for the calendar day
+   * @param {boolean} hidden - visibility of the day
+   * @param {boolean} disabled - is the day selectable or excluded
+   */
+  update(day, hidden, disabled) {
+    const label = day.getDate()
+    let accessibleLabel = this.picker.formattedDateHuman(day)
+
+    if (disabled) {
+      this.$button.setAttribute('aria-disabled', 'true')
+      accessibleLabel = `Excluded date, ${accessibleLabel}`
+    } else {
+      this.$button.removeAttribute('aria-disabled')
+    }
+
+    this.$button.hidden = hidden
+    this.$button.dataset.testid = this.picker.formattedDateFromDate(day)
+
+    this.$button.innerHTML = `<span class="govuk-visually-hidden">${accessibleLabel}</span><span aria-hidden="true">${label}</span>`
+    this.date = new Date(day)
+  }
+
+  /**
+   * Called by the picker's delegated click listener on the grid.
+   * @param {object} event - click event
+   */
+  click(event) {
+    this.picker.goToDate(this.date)
+    this.picker.selectDate(this.date)
+
+    event.stopPropagation()
+    event.preventDefault()
+  }
+
+  /**
+   * Called by the picker's delegated keydown listener on the grid.
+   * @param {object} event - keydown event
+   */
+  keyPress(event) {
+    const navigation = navigationForKey(this.picker, event)
+
+    if (navigation) {
+      navigation()
+      event.preventDefault()
+      event.stopPropagation()
+    }
+  }
+}
+
+const DAYS_IN_WEEK = 7
+const CALENDAR_WEEKS = 6
+
+/**
+ * Fills the calendar's body with six weeks of day buttons.
+ * @param {object} $tbody - the calendar table's body
+ * @param {object} picker - the date picker that owns the days
+ * @returns {CalendarDay[]} the days, in grid order
+ */
+export function createCalendarDays($tbody, picker) {
+  const calendarDays = []
+  for (let row = 0; row < CALENDAR_WEEKS; row++) {
+    const $row = $tbody.insertRow(row)
+
+    for (let column = 0; column < DAYS_IN_WEEK; column++) {
+      const $cell = document.createElement('td')
+      $row.appendChild($cell)
+      const $dateButton = document.createElement('button')
+      $dateButton.setAttribute('type', 'button')
+      $cell.appendChild($dateButton)
+
+      calendarDays.push(
+        new CalendarDay($dateButton, calendarDays.length, row, column, picker)
+      )
+    }
+  }
+  return calendarDays
+}

package/src/components/date-picker-dates.js

@@ -0,0 +1,119 @@
+// Adapted from the date picker in MoJ Frontend 12.0.0
+// (https://github.com/ministryofjustice/moj-frontend), MIT licence.
+// Copyright (c) 2019 Ministry of Justice
+
+// Accepts d/m/yyyy and dd/mm/yyyy, with -, /, comma, full stop or space between parts.
+const DATE_FORMAT_PATTERN = /(\d{1,2})([-/,. ])(\d{1,2})\2(\d{4})/
+const DAY_GROUP = 1
+const MONTH_GROUP = 3
+const YEAR_GROUP = 4
+const PADDED_LENGTH = 2
+const SUNDAY_FIRST_DAYS = [
+  'sunday',
+  'monday',
+  'tuesday',
+  'wednesday',
+  'thursday',
+  'friday',
+  'saturday'
+]
+
+/**
+ * Pads given number with leading zeros
+ * @param {number} value - The value to be padded
+ * @param {number} length - The length in characters of the output
+ * @returns {string} the padded value
+ */
+export function padNumber(value, length = PADDED_LENGTH) {
+  return value.toString().padStart(length, '0')
+}
+
+/**
+ * Get a Date object from a string
+ * @param {string} dateString - string in the format d/m/yyyy dd/mm/yyyy
+ * @param {Date | null} fallback - value to return if parsing fails
+ * @returns {Date | null} the parsed date, or the fallback
+ */
+export function parseDate(dateString, fallback) {
+  const match = DATE_FORMAT_PATTERN.exec(dateString)
+
+  if (!match) {
+    return fallback
+  }
+
+  const date = new Date(
+    Number(match[YEAR_GROUP]),
+    Number(match[MONTH_GROUP]) - 1,
+    Number(match[DAY_GROUP])
+  )
+  return Number.isFinite(date.getTime()) ? date : fallback
+}
+
+/**
+ * Parses a daterange string into an array of dates
+ * @param {string} rangeString - A daterange string in the format "dd/mm/yyyy-dd/mm/yyyy"
+ * @returns {Date[]} every date in the range, or none when either end is invalid
+ */
+export function parseDateRange(rangeString) {
+  const dates = []
+  const [startDate, endDate] = rangeString
+    .split('-')
+    .map((part) => parseDate(part, null))
+
+  if (startDate && endDate) {
+    let date = new Date(startDate)
+    while (date <= endDate) {
+      dates.push(date)
+      date = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1)
+    }
+  }
+  return dates
+}
+
+/**
+ * Parses space-separated dates and date ranges.
+ * @param {string} excludedDates - e.g. "1/6/2026 10/6/2026-12/6/2026"
+ * @returns {Date[]} the valid dates
+ */
+export function parseExcludedDates(excludedDates) {
+  return excludedDates
+    .replace(/\s+/, ' ')
+    .split(' ')
+    .map((item) =>
+      item.includes('-') ? parseDateRange(item) : [parseDate(item, new Date())]
+    )
+    .reduce((dates, items) => dates.concat(items), [])
+    .filter(Boolean)
+}
+
+/**
+ * Parses space-separated day names into Date.getDay() indexes.
+ * @param {string} excludedDays - e.g. "saturday sunday"
+ * @returns {number[]} the indexes of the recognised days
+ */
+export function parseExcludedDays(excludedDays) {
+  // Sunday first, so a day's index matches Date.getDay(). MoJ's version reads
+  // the week start day before it is normalised, which shifts every excluded
+  // day back by one when the week starts on Sunday.
+
+  return excludedDays
+    .replace(/\s+/, ' ')
+    .toLowerCase()
+    .split(' ')
+    .map((item) => SUNDAY_FIRST_DAYS.indexOf(item))
+    .filter((item) => item !== -1)
+}
+
+/**
+ * Get a formatted date string from a Date object
+ * @param {Date} date - date to format to a string
+ * @param {boolean} leadingZeros - pad the day and month to two digits
+ * @returns {string} the date as d/m/yyyy, or dd/mm/yyyy with leading zeros
+ */
+export function formatDate(date, leadingZeros) {
+  if (leadingZeros) {
+    return `${padNumber(date.getDate())}/${padNumber(date.getMonth() + 1)}/${date.getFullYear()}`
+  }
+
+  return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`
+}