[ASL-4507] Use date-fns v3.x in all repos (#330)

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",

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 }) {
                     <ul>
                         {
                             reminders.map(reminder => (
-                                <li key={reminder.id}>{dateFormatter(reminder.deadline, 'DD/MM/YYYY')}</li>
+                                <li key={reminder.id}>{format(reminder.deadline, dateFormat)}</li>
                             ))
                         }
                     </ul>

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' }) => {

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('<Countdown />', () => {
 

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

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';
 

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 <ul className="licence-dates">
-            <li>Granted: <span className="date">{formatDate(issueDate, dateFormat)}</span></li>
+            <li>Granted: <span className="date">{format(issueDate, dateFormat)}</span></li>
             {
-                status === 'revoked' && <li>Revoked: <span className="date">{formatDate(revocationDate, dateFormat)}</span></li>
+                status === 'revoked' && <li>Revoked: <span className="date">{format(revocationDate, dateFormat)}</span></li>
             }
             {
-                status === 'expired' && <li>Expiry: <span className="date">{formatDate(expiryDate, dateFormat)}</span></li>
+                status === 'expired' && <li>Expiry: <span className="date">{format(expiryDate, dateFormat)}</span></li>
             }
             {
-                status === 'suspended' && <li>Suspended: <span className="date">{formatDate(suspendedDate, dateFormat)}</span></li>
+                status === 'suspended' && <li>Suspended: <span className="date">{format(suspendedDate, dateFormat)}</span></li>
             }
         </ul>;
     };
@@ -70,7 +70,7 @@ function LicenceStatusBanner({ licence, licenceType, isPdf, dateFormat, colour,
 }
 
 LicenceStatusBanner.defaultProps = {
-    dateFormat: 'DD MMMM YYYY'
+    dateFormat: 'dd MMMM yyyy'
 };
 
 export default LicenceStatusBanner;

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) {