@nnc-digital/nnc-design-system 1.0.0-beta2 → 1.0.0-beta5

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,158 @@ 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);
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+};
+
+/**
+ * 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 +23828,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 +23852,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 +23909,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."))))));
@@ -25559,13 +25693,11 @@ const HomeLink = styled.a`
     }
   }
   &:focus {
-    outline: 2px transparent solid;
-    box-shadow: ${(props) => props.theme.theme_vars.colours.focus} 0 0 0 2px,
-      ${(props) =>
-          props.theme.cardinal_name === 'north'
-            ? props.theme.theme_vars.colours.black
-            : props.theme.theme_vars.colours.focus}
-        0 0 0 4px;
+    outline: none;
+    background: ${(props) => props.theme.theme_vars.colours.focus};
+    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};
     transition: box-shadow 0.3s ease 0s;
   }
 `;
@@ -25718,6 +25850,9 @@ const Button$3 = styled.button`
   &:focus {
     outline: none;
     background: ${(props) => props.theme.theme_vars.colours.focus};
+    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};
     svg {
       path {
         fill: ${(props) => props.theme.theme_vars.colours.black};
@@ -26020,12 +26155,14 @@ const CallToActionLink = styled.a`
   display: inline-block;
   outline: none;
 
-  &:hover,
-  &:focus {
+  &:hover {
     text-decoration-style: dotted;
     text-shadow: 2px 2px 4px rgba(150, 150, 150, 0.5), -2px 2px 4px rgba(150, 150, 150, 0.5),
       2px -2px 4px rgba(150, 150, 150, 0.5), -2px -2px 4px rgba(150, 150, 150, 0.5);
   }
+  &:focus {
+    ${(props) => props.theme.linkStylesFocus};
+  }
   &:active {
     transform: translate(3px);
   }
@@ -26111,6 +26248,14 @@ const PlayPauseButton = styled.button`
     &:hover {
       background: rgba(0, 0, 0, 0.7);
     }
+    &:focus {
+      outline: none;
+      background: ${(props) => props.theme.theme_vars.colours.focus};
+      color: ${(props) => props.theme.theme_vars.colours.black};
+      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};
+    }
   }
 `;
 
@@ -28215,9 +28360,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`
@@ -30015,9 +30160,9 @@ const generate_theme = (theme_vars) => {
       background: ${theme_vars.colours.focus};
       outline: none;
       text-decoration: none !important;
-      box-shadow: 0 0 0 1px ${theme_vars.colours.focus}, 0 0 0 3px ${theme_vars.colours.black};
-      -webkit-box-shadow: 0 0 0 1px ${theme_vars.colours.focus}, 0 0 0 3px ${theme_vars.colours.black};
-      -moz-box-shadow: 0 0 0 1px ${theme_vars.colours.focus}, 0 0 0 3px ${theme_vars.colours.black};
+      box-shadow: 0 0 0 2px ${theme_vars.colours.focus}, 0 0 0 4px ${theme_vars.colours.black};
+      -webkit-box-shadow: 0 0 0 2px ${theme_vars.colours.focus}, 0 0 0 4px ${theme_vars.colours.black};
+      -moz-box-shadow: 0 0 0 2px ${theme_vars.colours.focus}, 0 0 0 4px ${theme_vars.colours.black};
     `,
     linkStylesActive: css`
       color: ${theme_vars.colours.black};
@@ -30457,69 +30602,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
  */