diff --git a/package-lock.json b/package-lock.json
index b977a898..1d300fec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
"@ukhomeoffice/react-components": "^1.0.0",
"accessible-autocomplete": "^2.0.3",
"classnames": "^2.2.6",
- "date-fns": "^1.29.0",
+ "date-fns": "^3.6.0",
"diff": "^4.0.1",
"lodash": "^4.17.21",
"moment": "^2.29.4",
@@ -3989,9 +3989,13 @@
"peer": true
},
"node_modules/date-fns": {
- "version": "1.29.0",
- "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz",
- "integrity": "sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw=="
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+ "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/kossnocorp"
+ }
},
"node_modules/debug": {
"version": "4.3.4",
@@ -12484,9 +12488,9 @@
"peer": true
},
"date-fns": {
- "version": "1.29.0",
- "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz",
- "integrity": "sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw=="
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+ "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="
},
"debug": {
"version": "4.3.4",
diff --git a/package.json b/package.json
index 436e92a0..e75bc9a0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@ukhomeoffice/asl-components",
- "version": "13.3.1",
+ "version": "13.4.0",
"description": "React components for ASL layouts and elements",
"main": "src/index.jsx",
"styles": "styles/index.scss",
@@ -30,7 +30,7 @@
"@ukhomeoffice/react-components": "^1.0.0",
"accessible-autocomplete": "^2.0.3",
"classnames": "^2.2.6",
- "date-fns": "^1.29.0",
+ "date-fns": "^3.6.0",
"diff": "^4.0.1",
"lodash": "^4.17.21",
"moment": "^2.29.4",
diff --git a/src/condition-reminders/index.jsx b/src/condition-reminders/index.jsx
index 09d48747..e89a4f2a 100644
--- a/src/condition-reminders/index.jsx
+++ b/src/condition-reminders/index.jsx
@@ -1,8 +1,8 @@
import React from 'react';
-import dateFormatter from 'date-fns/format';
+import { format } from 'date-fns';
import { Inset } from '../';
-function ConditionReminders({ reminders }) {
+function ConditionReminders({ reminders, dateFormat = 'dd/MM/yyyy' }) {
if (!reminders || reminders.length < 1) {
return null;
}
@@ -17,7 +17,7 @@ function ConditionReminders({ reminders }) {
{
reminders.map(reminder => (
- - {dateFormatter(reminder.deadline, 'DD/MM/YYYY')}
+ - {format(reminder.deadline, dateFormat)}
))
}
diff --git a/src/countdown/index.jsx b/src/countdown/index.jsx
index 3b5e400d..3f548c25 100644
--- a/src/countdown/index.jsx
+++ b/src/countdown/index.jsx
@@ -1,10 +1,6 @@
import React from 'react';
import { Snippet } from '../';
-import differenceInMonths from 'date-fns/difference_in_months';
-import differenceInWeeks from 'date-fns/difference_in_weeks';
-import differenceInDays from 'date-fns/difference_in_calendar_days';
-import isBefore from 'date-fns/is_before';
-import isToday from 'date-fns/is_today';
+import { differenceInDays, differenceInMonths, differenceInWeeks, isBefore, isToday } from 'date-fns';
import classnames from 'classnames';
const Countdown = ({ expiry, unit, showNotice, showUrgent, contentPrefix = 'countdown' }) => {
diff --git a/src/countdown/index.spec.jsx b/src/countdown/index.spec.jsx
index 5a184486..9e7183d4 100644
--- a/src/countdown/index.spec.jsx
+++ b/src/countdown/index.spec.jsx
@@ -2,9 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import Countdown from './';
import Snippet from '../snippet';
-import endOfTomorrow from 'date-fns/end_of_tomorrow';
-import addWeeks from 'date-fns/add_weeks';
-import addMonths from 'date-fns/add_months';
+import { endOfTomorrow, addWeeks, addMonths } from 'date-fns';
describe('', () => {
diff --git a/src/expiry-date/index.jsx b/src/expiry-date/index.jsx
index d110ce92..807209df 100644
--- a/src/expiry-date/index.jsx
+++ b/src/expiry-date/index.jsx
@@ -1,6 +1,6 @@
import React, { Fragment } from 'react';
import { Countdown } from '../';
-import format from 'date-fns/format';
+import { format } from 'date-fns';
const ExpiryDate = ({ date, expiry, dateFormat, unit, showUrgent, showNotice }) => {
if (!date) {
@@ -23,7 +23,7 @@ const ExpiryDate = ({ date, expiry, dateFormat, unit, showUrgent, showNotice })
};
ExpiryDate.defaultProps = {
- dateFormat: 'DD MMMM YYYY',
+ dateFormat: 'dd MMMM yyyy',
unit: 'month',
showUrgent: 3,
showNotice: true
diff --git a/src/expiry-date/index.spec.jsx b/src/expiry-date/index.spec.jsx
index 357d22ea..31092b4a 100644
--- a/src/expiry-date/index.spec.jsx
+++ b/src/expiry-date/index.spec.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import { shallow } from 'enzyme';
-import addWeeks from 'date-fns/add_weeks';
+import { addWeeks } from 'date-fns';
import ExpiryDate from './';
import Countdown from '../countdown';
diff --git a/src/licence-status-banner/index.jsx b/src/licence-status-banner/index.jsx
index e27112cf..104205a3 100644
--- a/src/licence-status-banner/index.jsx
+++ b/src/licence-status-banner/index.jsx
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import Snippet from '../snippet';
import classnames from 'classnames';
-import formatDate from 'date-fns/format';
+import { format } from 'date-fns';
function LicenceStatusBanner({ licence, licenceType, isPdf, dateFormat, colour, title, suspendedEstablishment, children }) {
const [open, setOpen] = useState(true);
@@ -26,15 +26,15 @@ function LicenceStatusBanner({ licence, licenceType, isPdf, dateFormat, colour,
}
return
- - Granted: {formatDate(issueDate, dateFormat)}
+ - Granted: {format(issueDate, dateFormat)}
{
- status === 'revoked' && - Revoked: {formatDate(revocationDate, dateFormat)}
+ status === 'revoked' && - Revoked: {format(revocationDate, dateFormat)}
}
{
- status === 'expired' && - Expiry: {formatDate(expiryDate, dateFormat)}
+ status === 'expired' && - Expiry: {format(expiryDate, dateFormat)}
}
{
- status === 'suspended' && - Suspended: {formatDate(suspendedDate, dateFormat)}
+ status === 'suspended' && - Suspended: {format(suspendedDate, dateFormat)}
}
;
};
@@ -70,7 +70,7 @@ function LicenceStatusBanner({ licence, licenceType, isPdf, dateFormat, colour,
}
LicenceStatusBanner.defaultProps = {
- dateFormat: 'DD MMMM YYYY'
+ dateFormat: 'dd MMMM yyyy'
};
export default LicenceStatusBanner;
diff --git a/src/training-summary/index.jsx b/src/training-summary/index.jsx
index dacf78f4..b265b1b3 100644
--- a/src/training-summary/index.jsx
+++ b/src/training-summary/index.jsx
@@ -1,11 +1,11 @@
import React from 'react';
import { useSelector } from 'react-redux';
import sortBy from 'lodash/sortBy';
-import format from 'date-fns/format';
+import { format } from 'date-fns';
import { ApplyChanges, Snippet, Link } from '../';
import { getUrl } from '../link';
-const dateFormat = 'DD MMMM YYYY';
+const dateFormat = 'dd MMMM yyyy';
function List({ items }) {
if (!items || !items.length) {