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

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,37 @@ 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, see [LICENCE-moj-frontend.txt](./LICENCE-moj-frontend.txt)). It takes the same `id`, `name`, `value`, `label`, `hint`, `errorMessage`, `formGroup`, `classes` and `attributes` as `govukInput`, plus `minDate` and `maxDate` (`d/m/yyyy`), `excludedDates`, `excludedDays` (day names separated by spaces), `leadingZeros` (picked dates are `27/3/2026` by default, `27/03/2026` when `true`) and `weekStartDay` (`monday` or `sunday`, default `monday`).
+
+`excludedDates` takes dates and ranges separated by spaces, for example `"1/6/2026 10/6/2026-12/6/2026"`. A hyphen always marks a range, so dates there must use `/` (or `.` or `,`) between their parts, never `-`. Anything that is not a real date, such as `31/4/2026` or `1-6-2026`, is ignored.
+
+```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.3",
   "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,125 @@
+// 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, and nothing else around them but whitespace.
+const DATE_FORMAT_PATTERN = /^\s*(\d{1,2})([-/,. ])(\d{1,2})\2(\d{4})\s*$/
+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
+ */
+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 year = Number(match[YEAR_GROUP])
+  const monthIndex = Number(match[MONTH_GROUP]) - 1
+  const day = Number(match[DAY_GROUP])
+  const date = new Date(year, monthIndex, day)
+
+  // Date rolls impossible dates over (31/4 becomes 1/5), so those are rejected.
+  const isRealDate =
+    date.getFullYear() === year &&
+    date.getMonth() === monthIndex &&
+    date.getDate() === day
+  return isRealDate ? 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 whitespace-separated dates and date ranges. A hyphen always marks a
+ * range, so the dates must not use it between their parts.
+ * @param {string} excludedDates - e.g. "1/6/2026 10/6/2026-12/6/2026"
+ * @returns {Date[]} the valid dates; anything that is not a date is dropped
+ */
+export function parseExcludedDates(excludedDates) {
+  return excludedDates
+    .trim()
+    .split(/\s+/)
+    .map((item) =>
+      item.includes('-') ? parseDateRange(item) : [parseDate(item, null)]
+    )
+    .reduce((dates, items) => dates.concat(items), [])
+    .filter(Boolean)
+}
+
+/**
+ * Parses whitespace-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
+    .trim()
+    .toLowerCase()
+    .split(/\s+/)
+    .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()}`
+}

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

@@ -0,0 +1,197 @@
+import { describe, expect, test } from 'vitest'
+
+import {
+  formatDate,
+  parseDate,
+  parseDateRange,
+  parseExcludedDates,
+  parseExcludedDays
+} from './date-picker-dates.js'
+
+const FALLBACK = new Date(2000, 0, 1)
+
+describe('date-picker-dates', () => {
+  describe('parseDate()', () => {
+    test.each([
+      ['27/3/2026', new Date(2026, 2, 27)],
+      ['07/03/2026', new Date(2026, 2, 7)],
+      ['27-3-2026', new Date(2026, 2, 27)],
+      ['27.3.2026', new Date(2026, 2, 27)],
+      ['27,3,2026', new Date(2026, 2, 27)],
+      ['27 3 2026', new Date(2026, 2, 27)],
+      ['  27/3/2026  ', new Date(2026, 2, 27)],
+      ['29/2/2024', new Date(2024, 1, 29)]
+    ])('reads %j as a date', (dateString, expected) => {
+      // Act
+      const result = parseDate(dateString, FALLBACK)
+
+      // Assert
+      expect(result).toStrictEqual(expected)
+    })
+
+    test.each([
+      '31/2/2026',
+      '29/2/2026',
+      '31/4/2026',
+      '45/13/2026',
+      '0/1/2026',
+      '1/0/2026'
+    ])('rejects the impossible date %j', (dateString) => {
+      // Act
+      const result = parseDate(dateString, FALLBACK)
+
+      // Assert
+      expect(result).toBe(FALLBACK)
+    })
+
+    test.each([
+      '127/3/20261',
+      '27/3/20261',
+      '27/3/26',
+      'on 27/3/2026',
+      '27/3/2026 or later',
+      '27/3-2026',
+      '',
+      'soon'
+    ])('rejects %j, which is not just a date', (dateString) => {
+      // Act
+      const result = parseDate(dateString, FALLBACK)
+
+      // Assert
+      expect(result).toBe(FALLBACK)
+    })
+
+    test('returns a null fallback when asked', () => {
+      // Act
+      const result = parseDate('31/4/2026', null)
+
+      // Assert
+      expect(result).toBeNull()
+    })
+  })
+
+  describe('parseDateRange()', () => {
+    test('returns every date from the start to the end', () => {
+      // Act
+      const result = parseDateRange('30/4/2026-2/5/2026')
+
+      // Assert
+      expect(result).toStrictEqual([
+        new Date(2026, 3, 30),
+        new Date(2026, 4, 1),
+        new Date(2026, 4, 2)
+      ])
+    })
+
+    test('returns no dates when the end is before the start', () => {
+      // Act
+      const result = parseDateRange('2/5/2026-30/4/2026')
+
+      // Assert
+      expect(result).toStrictEqual([])
+    })
+
+    test.each(['1/5/2026-31/4/2026', '1/5/2026-soon', '1-5-2026'])(
+      'returns no dates for %j',
+      (rangeString) => {
+        // Act
+        const result = parseDateRange(rangeString)
+
+        // Assert
+        expect(result).toStrictEqual([])
+      }
+    )
+  })
+
+  describe('parseExcludedDates()', () => {
+    test.each([
+      ['a trailing space', '1/6/2026 ', [new Date(2026, 5, 1)]],
+      [
+        'leading and repeated spaces',
+        '  1/6/2026   3/6/2026',
+        [new Date(2026, 5, 1), new Date(2026, 5, 3)]
+      ],
+      [
+        'newlines and tabs',
+        '1/6/2026\n\t3/6/2026\n',
+        [new Date(2026, 5, 1), new Date(2026, 5, 3)]
+      ],
+      [
+        'an invalid token',
+        '1/6/2026 soon 3/6/2026',
+        [new Date(2026, 5, 1), new Date(2026, 5, 3)]
+      ],
+      [
+        'an impossible date',
+        '1/6/2026 31/6/2026 3/6/2026',
+        [new Date(2026, 5, 1), new Date(2026, 5, 3)]
+      ],
+      [
+        'a date with hyphens between its parts',
+        '1/6/2026 2-6-2026 3/6/2026',
+        [new Date(2026, 5, 1), new Date(2026, 5, 3)]
+      ]
+    ])('keeps only the real dates with %s', (_, excludedDates, expected) => {
+      // Act
+      const result = parseExcludedDates(excludedDates)
+
+      // Assert
+      expect(result).toStrictEqual(expected)
+    })
+
+    test('combines single dates and ranges', () => {
+      // Act
+      const result = parseExcludedDates('1/6/2026 10/6/2026-12/6/2026')
+
+      // Assert
+      expect(result).toStrictEqual([
+        new Date(2026, 5, 1),
+        new Date(2026, 5, 10),
+        new Date(2026, 5, 11),
+        new Date(2026, 5, 12)
+      ])
+    })
+
+    test.each(['', '   ', 'soon'])(
+      'returns no dates for %j',
+      (excludedDates) => {
+        // Act
+        const result = parseExcludedDates(excludedDates)
+
+        // Assert
+        expect(result).toStrictEqual([])
+      }
+    )
+  })
+
+  describe('parseExcludedDays()', () => {
+    test('reads day names in any case and spacing as Date.getDay() indexes', () => {
+      // Act
+      const result = parseExcludedDays(' Saturday \n sunday  MONDAY ')
+
+      // Assert
+      expect(result).toStrictEqual([6, 0, 1])
+    })
+
+    test('drops words that are not day names', () => {
+      // Act
+      const result = parseExcludedDays('sunday someday sat')
+
+      // Assert
+      expect(result).toStrictEqual([0])
+    })
+  })
+
+  describe('formatDate()', () => {
+    test.each([
+      [false, '7/3/2026'],
+      [true, '07/03/2026']
+    ])('with leading zeros %s formats as %s', (leadingZeros, expected) => {
+      // Act
+      const result = formatDate(new Date(2026, 2, 7), leadingZeros)
+
+      // Assert
+      expect(result).toBe(expected)
+    })
+  })
+})