@nnc-digital/nnc-design-system 1.0.0-beta3 → 1.0.0-beta6

package/build/index.mjs.js

@@ -23648,8 +23648,10 @@ var ImageAndText = function (_a) {
 
 var CaseAppointmentType;
 (function (CaseAppointmentType) {
-    CaseAppointmentType["Hearing"] = "hearing";
+    CaseAppointmentType["Formal"] = "formal";
+    CaseAppointmentType["Hearing"] = "inquest hearing";
     CaseAppointmentType["Opening"] = "opening";
+    CaseAppointmentType["PreInquest"] = "pre-inquest review";
     CaseAppointmentType["Writing"] = "writing";
 })(CaseAppointmentType || (CaseAppointmentType = {}));
 
@@ -23666,28 +23668,170 @@ const GroupContainer = styled.div`
 
 const InquestContainer = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   flex-wrap: wrap;
-
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    flex-wrap: nowrap;
-  }
 `;
 
-const InquestTime = styled.div`
-  flex-grow: 0;
+styled.div`
+  flex-grow: 1;
   flex-shrink: 0;
+
+  strong {
+    display: block;
+    &::first-letter {
+      text-transform: capitalize;
+    }
+  }
 `;
 
 const InquestDetails = styled.div`
   flex-grow: 1;
+  h3 {
+    display: block;
+    &::first-letter {
+      text-transform: capitalize;
+    }
+  }
+`;
+
+const SummaryContainer = styled.div`
+  border: ${(props) => (props.$hasHeading ? `1px solid ${props.theme.theme_vars.colours.grey}` : `none`)};
+  margin: ${(props) => (props.$hasMargin ? props.theme.theme_vars.spacingSizes.medium : 0)} 0;
+`;
+
+const SummaryHeading = styled.div`
+  background-color: ${(props) => props.theme.theme_vars.colours.grey_light};
+  width: 100%;
+  padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
+  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+
+  h3 {
+    margin: 0;
+  }
+`;
+
+const SummaryList$1 = styled.dl`
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+`;
+
+const SummaryRow = styled.div`
+  border-bottom: ${(props) => props.$hasBorders ? `1px solid ${props.theme.theme_vars.colours.grey}` : 'none'};
+  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
+
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    padding-left: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    display: table-row;
+  }
+
+  @media print {
+    display: table-row;
+    border-bottom: none;
+  }
+`;
+
+const SummaryTerm = styled.dt`
+  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
+  font-weight: bold;
+
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    display: table-cell;
+    padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    width: 30%;
+    vertical-align: middle;
+  }
+
+  @media print {
+    display: table-cell;
+    width: 30%;
   }
 `;
 
+const SummaryDetail = styled.dd`
+  overflow-wrap: break-word;
+  width: 100%;
+  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
+
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    display: table-cell;
+    width: 70%;
+    padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
+  }
+
+  @media print {
+    display: table-cell;
+    width: 70%;
+  }
+`;
+
+var SummaryList = function (_a) {
+    var terms = _a.terms, _b = _a.hasMargin, hasMargin = _b === void 0 ? true : _b, _c = _a.hasBorders, hasBorders = _c === void 0 ? true : _c, heading = _a.heading;
+    return (React.createElement(SummaryContainer, { "$hasHeading": heading, "$hasMargin": hasMargin },
+        heading && (React.createElement(SummaryHeading, null,
+            React.createElement(Heading, { level: 3, text: heading }))),
+        React.createElement(SummaryList$1, { "data-testid": "SummaryList" }, terms.map(function (summaryRow, summaryIndex) { return (React.createElement(SummaryRow, { key: summaryIndex, "$hasBorders": hasBorders },
+            React.createElement(SummaryTerm, null, summaryRow.term),
+            React.createElement(SummaryDetail, { dangerouslySetInnerHTML: { __html: sanitizeHtml$1(summaryRow.detail) } }))); }))));
+};
+
+/**
+ * Format a date string to a readable date format
+ * @param {string} dateString - The date string to format
+ * @returns {string} Formatted date
+ */
+const formatDate = (dateString) => {
+  const date = new Date(dateString);
+  return date
+    .toLocaleDateString('en-GB', {
+      weekday: 'long',
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    })
+    .replace(',', '');
+};
+
+/**
+ * Format a date string to a time format
+ * @param {string} dateString - The date string to format
+ * @returns {string} Formatted time
+ */
+const formatTime = (dateString) => {
+  const date = new Date(dateString);
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+
+  // Convert to 12-hour format
+  const hour12 = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+  const ampm = hours < 12 ? 'am' : 'pm';
+
+  // Only show minutes if not zero
+  if (minutes === 0) {
+    return `${hour12}${ampm}`;
+  } else {
+    return `${hour12}:${minutes.toString().padStart(2, '0')}${ampm}`;
+  }
+};
+
+/**
+ * Format a date string to a date and time format
+ * @param {string} dateString - The date string to format
+ * @returns {string} Formatted date and time
+ */
+const formatDateTime = (dateString) => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-GB', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
 /**
  * A table displaying a schedule of inquests
  */
@@ -23696,12 +23840,18 @@ var InquestSchedule = function (_a) {
     var hearings = caseAppointments.filter(function (appointment) {
         return appointment.appointmentType.toLowerCase().includes(CaseAppointmentType.Hearing);
     });
+    var preInquest = caseAppointments.filter(function (appointment) {
+        return appointment.appointmentType.toLowerCase().includes(CaseAppointmentType.PreInquest);
+    });
     var openings = caseAppointments.filter(function (appointment) {
         return appointment.appointmentType.toLowerCase().includes(CaseAppointmentType.Opening);
     });
     var writings = caseAppointments.filter(function (appointment) {
         return appointment.appointmentType.toLowerCase().includes(CaseAppointmentType.Writing);
     });
+    var formal = caseAppointments.filter(function (appointment) {
+        return appointment.appointmentType.toLowerCase().includes(CaseAppointmentType.Formal);
+    });
     var groupHearingsByDay = function (appointments) {
         return appointments.reduce(function (acc, inquest) {
             var inquestDate = new Date(inquest.startDateTime);
@@ -23714,62 +23864,52 @@ var InquestSchedule = function (_a) {
         }, {});
     };
     var hearingDayGrouped = groupHearingsByDay(hearings);
+    var preInquestDayGrouped = groupHearingsByDay(preInquest);
     var openingDayGrouped = groupHearingsByDay(openings);
     var writingDayGrouped = groupHearingsByDay(writings);
-    var formatDate = function (inquestDay) {
-        return inquestDay
-            .toLocaleDateString('en-GB', {
-            weekday: 'long',
-            day: 'numeric',
-            month: 'long',
-            year: 'numeric',
-        })
-            .replace(',', '');
-    };
-    var formatTime = function (inquestDate) {
-        return inquestDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    };
+    var formalDayGrouped = groupHearingsByDay(formal);
     var transformToSections = function (groupedData) {
         return Object.keys(groupedData).map(function (day) {
-            var inquestDayDate = new Date(day);
             return {
-                title: formatDate(inquestDayDate),
+                title: formatDate(day),
                 content: (React.createElement(Row$1, null, groupedData[day]
                     .sort(function (a, b) {
                     return new Date(a.startDateTime).getTime() - new Date(b.startDateTime).getTime();
                 })
                     .map(function (inquest, key) {
-                    var startDateTime = new Date(inquest.startDateTime);
-                    var timeOfDeath = new Date(inquest.dateTimeOfDeath);
+                    var terms = [
+                        {
+                            term: 'Name',
+                            detail: inquest.fullName,
+                        },
+                        {
+                            term: 'Died',
+                            detail: formatDate(inquest.dateTimeOfDeath) +
+                                ' at ' +
+                                inquest.placeOfDeath +
+                                '. Aged ' +
+                                inquest.age +
+                                ' years.',
+                        },
+                        {
+                            term: 'Court location',
+                            detail: inquest.courtroomFullAddress + '.',
+                        },
+                        {
+                            term: 'Coroner',
+                            detail: inquest.coroner + '.',
+                        },
+                    ];
+                    if (inquest.endDateTime) {
+                        terms.push({
+                            term: 'End date',
+                            detail: formatDateTime(inquest.endDateTime) + '.',
+                        });
+                    }
                     return (React.createElement(Column, { small: "full", medium: "full", large: "full", key: key },
                         React.createElement(InquestContainer, null,
-                            React.createElement(InquestTime, null,
-                                React.createElement("strong", null, formatTime(startDateTime))),
                             React.createElement(InquestDetails, null,
-                                React.createElement("strong", null, "Name:"),
-                                " ",
-                                inquest.fullName,
-                                ".",
-                                React.createElement("br", null),
-                                React.createElement("strong", null, "Died:"),
-                                " ",
-                                formatDate(timeOfDeath),
-                                " at ",
-                                inquest.placeOfDeath,
-                                ". Aged ",
-                                inquest.age,
-                                ' ',
-                                "years.",
-                                React.createElement("br", null),
-                                React.createElement("strong", null, "Court location:"),
-                                " ",
-                                inquest.courtroomFullAddress,
-                                ".",
-                                React.createElement("br", null),
-                                React.createElement("strong", null, "Coroner:"),
-                                " ",
-                                inquest.coroner,
-                                "."))));
+                                React.createElement(SummaryList, { terms: terms, hasBorders: false, heading: formatTime(inquest.startDateTime) })))));
                 }))),
             };
         });
@@ -23781,9 +23921,15 @@ var InquestSchedule = function (_a) {
         Object.keys(openingDayGrouped).length > 0 && (React.createElement(GroupContainer, null,
             React.createElement(Heading, { level: 2, text: "Inquest Openings" }),
             React.createElement(Accordion$1, { sections: transformToSections(openingDayGrouped) }))),
+        Object.keys(preInquestDayGrouped).length > 0 && (React.createElement(GroupContainer, null,
+            React.createElement(Heading, { level: 2, text: "Pre-inquest Review Hearings" }),
+            React.createElement(Accordion$1, { sections: transformToSections(preInquestDayGrouped) }))),
         Object.keys(writingDayGrouped).length > 0 && (React.createElement(GroupContainer, null,
             React.createElement(Heading, { level: 2, text: "Inquests in Writing" }),
             React.createElement(Accordion$1, { sections: transformToSections(writingDayGrouped) }))),
+        Object.keys(formalDayGrouped).length > 0 && (React.createElement(GroupContainer, null,
+            React.createElement(Heading, { level: 2, text: "Formal Suspension Hearings" }),
+            React.createElement(Accordion$1, { sections: transformToSections(formalDayGrouped) }))),
         caseAppointments.length === 0 && (React.createElement("div", null,
             React.createElement("p", null, "We can't find any results at the moment."),
             error ? (React.createElement("p", null, " The information is currently unavailable.")) : (React.createElement("p", null, "There are no inquests scheduled for next month."))))));
@@ -24158,6 +24304,10 @@ var Input = function (_a) {
 var RoadworksList = function (_a) {
     var roadworks = _a.roadworks, title = _a.title;
     var _b = useState(roadworks), filteredRoadworks = _b[0], setFilteredRoadworks = _b[1];
+    // Helper function to remove trailing dot if it's the last character
+    var removeTrailingDot = function (text) {
+        return (text === null || text === void 0 ? void 0 : text.endsWith('.')) ? text.slice(0, -1) : text;
+    };
     var handleSearch = function (e) {
         var searchTerm = e.target.value.toLowerCase();
         if (searchTerm != '') {
@@ -24219,7 +24369,7 @@ var RoadworksList = function (_a) {
                 React.createElement(IconContainer$2, null,
                     React.createElement(DynamicIcon, { icon: "mappin" }),
                     React.createElement(IconText, null,
-                        React.createElement(Heading, { text: roadwork.detailedLocation, level: 3 }))),
+                        React.createElement(Heading, { text: removeTrailingDot(roadwork.detailedLocation), level: 3 }))),
                 React.createElement(IconContainer$2, null,
                     React.createElement(DynamicIcon, { icon: "events" }),
                     React.createElement(IconText, null,
@@ -24227,11 +24377,11 @@ var RoadworksList = function (_a) {
                 React.createElement(IconContainer$2, null,
                     React.createElement(DynamicIcon, { icon: "roadworks" }),
                     React.createElement(IconText, null,
-                        React.createElement("span", null, roadwork.description))),
+                        React.createElement("span", null, removeTrailingDot(roadwork.description)))),
                 React.createElement(IconContainer$2, null,
                     React.createElement(DynamicIcon, { icon: "bollard" }),
                     React.createElement(IconText, null,
-                        React.createElement("span", null, roadwork.trafficManagement)))));
+                        React.createElement("span", null, removeTrailingDot(roadwork.trafficManagement))))));
         })),
         roadworks.length > 0 && filteredRoadworks.length === 0 && (React.createElement(NoMatches, null, "We couldn't find any results for your search term. Please try a different search.")),
         roadworks.length == 0 && (React.createElement(NoMatches, null, "Sorry, we're not able to find any results at the moment. Please try again later."))));
@@ -28226,9 +28376,9 @@ const focusListItem = css`
   color: ${(props) => props.theme.theme_vars.colours.black};
   background-color: ${(props) => props.theme.theme_vars.colours.focus};
   outline: none;
-  box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.black} inset;
-  -webkit-box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.black} inset;
-  -moz-box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.black} inset;
+  box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
+  -webkit-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
+  -moz-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
 `;
 
 const ListItem = styled.li`
@@ -30468,69 +30618,6 @@ var ServiceContact = function (_a) {
                     contact.phones.map(function (phone, phoneIndex) { return (React.createElement(ContactLink, { href: "tel:".concat(phone.number), key: phoneIndex }, phone.number)); }))); })))))));
 };
 
-const SummaryList$1 = styled.dl`
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-  margin: ${(props) => (props.$hasMargin ? props.theme.theme_vars.spacingSizes.medium : 0)} 0;
-`;
-
-const SummaryRow = styled.div`
-  border-bottom: 1px solid ${(props) => props.theme.theme_vars.colours.grey};
-  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
-
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    display: table-row;
-  }
-
-  @media print {
-    display: table-row;
-    border-bottom: none;
-  }
-`;
-
-const SummaryTerm = styled.dt`
-  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
-  font-weight: bold;
-
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    display: table-cell;
-    padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
-    width: 30%;
-    vertical-align: middle;
-  }
-
-  @media print {
-    display: table-cell;
-    width: 30%;
-  }
-`;
-
-const SummaryDetail = styled.dd`
-  overflow-wrap: break-word;
-  width: 100%;
-  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
-
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    display: table-cell;
-    width: 70%;
-    padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
-  }
-
-  @media print {
-    display: table-cell;
-    width: 70%;
-  }
-`;
-
-var SummaryList = function (_a) {
-    var terms = _a.terms, _b = _a.hasMargin, hasMargin = _b === void 0 ? true : _b;
-    return (React.createElement(SummaryList$1, { "data-testid": "SummaryList", "$hasMargin": hasMargin }, terms.map(function (summaryRow, summaryIndex) { return (React.createElement(SummaryRow, { key: summaryIndex },
-        React.createElement(SummaryTerm, null, summaryRow.term),
-        React.createElement(SummaryDetail, { dangerouslySetInnerHTML: { __html: sanitizeHtml$1(summaryRow.detail) } }))); })));
-};
-
 /**
  * Group an array of items by the key
  */