@nnc-digital/nnc-design-system 1.0.0-alpha5 → 1.0.0-alpha51

package/build/index.js

@@ -7963,6 +7963,8 @@ const Container$_ = styled__default.default.div`
   width: 100%;
   display: block;
   box-sizing: border-box;
+  position: sticky;
+  z-index: 1;
 `;
 
 const CookieHide = styled__default.default.button`
@@ -8156,7 +8158,7 @@ var CookieBanner = function (_a) {
     // on page load - look for a cookie
     React.useEffect(function () {
         checkCookie();
-    });
+    }, []);
     var _d = React.useState(false), showCookieBanner = _d[0], setShowCookieBanner = _d[1];
     var _e = React.useState(false), showCookiesRejectedBanner = _e[0], setShowCookiesRejectedBanner = _e[1];
     var _f = React.useState(false), showCookiesAcceptedBanner = _f[0], setShowCookiesAcceptedBanner = _f[1];
@@ -22891,7 +22893,7 @@ const InnerContainer$2 = styled__default.default.div`
  */
 var AlertBannerService = function (_a) {
     var title = _a.title, _b = _a.hasTopSpacing, hasTopSpacing = _b === void 0 ? false : _b, _c = _a.alertType, alertType = _c === void 0 ? 'alert' : _c, children = _a.children;
-    return (React__default.default.createElement(Container$L, { "$alertType": alertType, "data-testid": "AlertBannerService", hasTopSpacing: hasTopSpacing },
+    return (React__default.default.createElement(Container$L, { "$alertType": alertType, "data-testid": "AlertBannerService", "$hasTopSpacing": hasTopSpacing },
         React__default.default.createElement(InnerContainer$2, { "data-testid": "AlertBannerServiceInner" },
             (title === null || title === void 0 ? void 0 : title.trim()) && React__default.default.createElement(Heading, { text: title }),
             children)));
@@ -23805,6 +23807,7 @@ const PromoTile = styled__default.default.a`
   display: block;
   width: 100%;
   height: 100%;
+  padding: 5px 10px;
   background: ${(props) =>
     props.theme.cardinal_name === 'north'
       ? props.theme.theme_vars.colours.white
@@ -24148,7 +24151,7 @@ var VideoProvider;
     VideoProvider["Vimeo"] = "Vimeo";
 })(VideoProvider || (VideoProvider = {}));
 
-const VideoContainer = styled__default.default.figure`
+const VideoContainer$1 = styled__default.default.figure`
   display: block;
   padding-top: 56.25%;
   position: relative;
@@ -24208,7 +24211,7 @@ var Video = function (_a) {
     React.useEffect(function () {
         setNotServer(true);
     }, []);
-    return (React__default.default.createElement(React__default.default.Fragment, null, cookiesAccepted && notServer ? (React__default.default.createElement(VideoContainer, { "data-testid": "Video" },
+    return (React__default.default.createElement(React__default.default.Fragment, null, cookiesAccepted && notServer ? (React__default.default.createElement(VideoContainer$1, { "data-testid": "Video" },
         React__default.default.createElement("iframe", { src: embedLink, title: description, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen;", "data-testid": "VideoIframe" }))) : (React__default.default.createElement(VideoLink, { href: watchLink, title: description, "data-testid": "VideoLink" }, description))));
 };
 
@@ -25077,6 +25080,17 @@ const FooterLink = styled__default.default.a`
     -webkit-box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.white} inset;
     -moz-box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.white} inset;
   }
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+  }
+  &:focus-visible {
+    ${(props) => props.theme.linkStylesFocus}
+    box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.white} inset;
+    -webkit-box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.white} inset;
+    -moz-box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.white} inset;
+  }
   &:active {
     ${(props) => props.theme.linkStylesActive}
     box-shadow: 0px -1px 0px 0px ${(props) => props.theme.theme_vars.colours.white} inset;
@@ -25239,6 +25253,8 @@ const headerThemeStyles = (props) => {
 const Container$w = styled__default.default.header`
   font-family: ${(props) => props.theme.theme_vars.fontstack};
   padding: 3px 0;
+  position: sticky;
+  z-index: 1;
   ${headerThemeStyles}
 `;
 
@@ -25664,6 +25680,7 @@ const InnerContainer = styled__default.default.div`
   margin-right: auto;
   margin-left: auto;
   flex-grow: 1;
+  z-index: 1;
 
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
     max-width: ${(props) => props.theme.theme_vars.breakpoints.l};
@@ -25785,16 +25802,95 @@ const Search = styled__default.default.div`
   margin: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
 `;
 
+const VideoContainer = styled__default.default.div`
+  position: absolute;
+  width: 100%;
+  @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    height: 580px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    height: 410px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    height: 560px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.xl}) {
+    height: 636px;
+  }
+`;
+
+const VideoBackground = styled__default.default.video`
+  position: absolute;
+  width: 100%;
+  height: 575px;
+  object-fit: cover;
+  @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    height: 590px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    height: 420px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    height: 568px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.xl}) {
+    height: 645px;
+  }
+`;
+
+const PlayPauseButton = styled__default.default.button`
+  position: absolute;
+  display: none;
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid white;
+    color: white;
+    font-size: 32px;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    &:hover {
+      background: rgba(0, 0, 0, 0.7);
+    }
+  }
+`;
+
 /**
  * Hero image banner with optional text and call to action with varying presentation of text area.
  * For optional use at the top of a service landing page, if set in the CMS.
  */
 var HeroImage = function (_a) {
-    var headline = _a.headline, content = _a.content, callToActionText = _a.callToActionText, callToActionURL = _a.callToActionURL, _b = _a.callToActionIsPrimary, callToActionIsPrimary = _b === void 0 ? true : _b, _c = _a.backgroundBox, backgroundBox = _c === void 0 ? true : _c, imageLarge = _a.imageLarge, imageSmall = _a.imageSmall, imageAltText = _a.imageAltText, breadcrumb = _a.breadcrumb, customSearch = _a.customSearch;
+    var headline = _a.headline, content = _a.content, callToActionText = _a.callToActionText, callToActionURL = _a.callToActionURL, _b = _a.callToActionIsPrimary, callToActionIsPrimary = _b === void 0 ? true : _b, _c = _a.backgroundBox, backgroundBox = _c === void 0 ? true : _c, imageLarge = _a.imageLarge, imageSmall = _a.imageSmall, imageAltText = _a.imageAltText, heroVideoUrl = _a.heroVideoUrl, breadcrumb = _a.breadcrumb, customSearch = _a.customSearch;
+    var _d = React.useState(true), isPlaying = _d[0], setIsPlaying = _d[1];
+    var videoRef = React.useRef(null);
+    var togglePlay = function () {
+        if (videoRef.current) {
+            if (isPlaying) {
+                videoRef.current.pause();
+            }
+            else {
+                videoRef.current.play();
+            }
+            setIsPlaying(!isPlaying);
+        }
+    };
     return (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(LazyImage, { src: imageLarge, placeholder: imageSmall, visibilitySensorProps: {
                 partialVisibility: true,
             } }, function (src) { return (React__default.default.createElement(Container$u, { "$image": src, "$backgroundBox": backgroundBox, "data-testid": "HeroImage" },
+            heroVideoUrl && (React__default.default.createElement(React__default.default.Fragment, null,
+                React__default.default.createElement(VideoContainer, null,
+                    React__default.default.createElement(VideoBackground, { ref: videoRef, autoPlay: true, loop: true, muted: true },
+                        React__default.default.createElement("source", { src: heroVideoUrl, type: "video/mp4" }),
+                        "Your browser doesn't support this video."),
+                    React__default.default.createElement(PlayPauseButton, { onClick: togglePlay }, isPlaying ? '⏸' : '▶')))),
             React__default.default.createElement(InnerContainer, null,
                 React__default.default.createElement(Overlay, { "$backgroundBox": backgroundBox, "data-testid": "HeroImageOverlay" },
                     breadcrumb && (React__default.default.createElement(BreadcrumbLink, { href: breadcrumb.url, "$backgroundBox": backgroundBox }, breadcrumb.title)),
@@ -27000,6 +27096,18 @@ const Container$l = styled__default.default.main`
     padding: 10px;
     text-align: left;
   }
+
+  td > a:only-child {
+    padding: 12px 20px;
+    display: inline-block;
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  td > a:not(:only-child) {
+    padding: 0;
+  }
+
   th {
     font-weight: bold;
   }
@@ -27879,10 +27987,12 @@ const ListItem = styled__default.default.li`
       background-color: ${(props) => props.theme.theme_vars.colours.action_light};
       color: ${(props) => props.theme.theme_vars.colours.black};
       border-bottom-color: transparent;
-
       &:focus {
         ${focusListItem}
       }
+      &:focus-visible {
+        ${focusListItem}
+      }
     }
   }
 `;
@@ -27898,10 +28008,12 @@ const ListItemLink = styled__default.default.a`
     transition: background-color 0.3s ease 0s;
     background-color: ${(props) => props.theme.theme_vars.colours.action_light}80;
   }
-
   &:focus {
     ${focusListItem}
   }
+  &:focus-visible {
+    ${focusListItem}
+  }
   &:active {
     transform: translateY(1px);
     box-shadow: 0px -1px 0px 0px ${(props) => props.theme.theme_vars.colours.black} inset;
@@ -28286,7 +28398,6 @@ const QuicklinkList = styled__default.default.ul`
 const QuicklinkItem = styled__default.default.li`
   margin-bottom: 10px;
   padding: 0 !important;
-  padding-left: 25px;
   position: relative;
   left: 0;
 
@@ -28311,6 +28422,7 @@ const Quicklink = styled__default.default.a`
   ${(props) => props.theme.linkStyles}
   font-weight: 400 !important;
   text-decoration: none !important;
+  padding: 5px 10px;
 
   &:hover {
     ${(props) => props.theme.linkStylesHover}
@@ -30071,7 +30183,7 @@ var PhoneIcon = function (_a) {
 };
 
 var ServiceContact = function (_a) {
-    var website = _a.website, email = _a.email, contacts = _a.contacts;
+    var website = _a.website, email = _a.email, contacts = _a.contacts, websiteTitle = _a.websiteTitle;
     var themeContext = React.useContext(styled.ThemeContext);
     return (React__default.default.createElement(Container$6, { "data-testid": "ServiceContact" },
         React__default.default.createElement(Row$1, { hasWrap: false },
@@ -30079,7 +30191,7 @@ var ServiceContact = function (_a) {
                 React__default.default.createElement(IconContainer$1, null,
                     React__default.default.createElement(WebsiteIcon, { colourFill: themeContext.theme_vars.colours.black })),
                 React__default.default.createElement(Content$1, null,
-                    React__default.default.createElement(WebLink$1, { href: website }, website)))),
+                    React__default.default.createElement(WebLink$1, { href: website }, websiteTitle ? "".concat(websiteTitle) : website)))),
             email && (React__default.default.createElement(Column, { small: "full", medium: "full", large: "auto", classes: "striped-contacts" },
                 React__default.default.createElement(IconContainer$1, null,
                     React__default.default.createElement(EmailIcon, { colourFill: themeContext.theme_vars.colours.black })),
@@ -30269,10 +30381,15 @@ var transformDescriptionDetails = function (accreditations, fees, service_areas,
 };
 var transformSnippet = function (description, extractLength) {
     if (extractLength === void 0) { extractLength = 190; }
-    return (sanitizeHtml$1(description, {
+    var sanitized = sanitizeHtml$1(description, {
         allowedTags: [],
         allowedAttributes: {},
-    }).substr(0, extractLength) + String.fromCharCode(8230));
+    }).trim();
+    if (!sanitized) {
+        return '';
+    }
+    var snippet = sanitized.substr(0, extractLength);
+    return sanitized.length > extractLength ? snippet + String.fromCharCode(8230) : snippet;
 };
 var transformTaxonomies = function (service_taxonomys, taxonomiesToShow) {
     if (taxonomiesToShow === void 0) { taxonomiesToShow = []; }
@@ -30305,11 +30422,14 @@ var transformTaxonomies = function (service_taxonomys, taxonomiesToShow) {
 var transformAge = function (age, ageInMonths) {
     if (ageInMonths === void 0) { ageInMonths = false; }
     if (age === 0) {
-        return age;
+        return age.toString();
     }
     if (ageInMonths) {
         if (age > 36) {
-            return Math.ceil(age / 12) + ' years';
+            if (age % 12 === 0) {
+                return Math.ceil(age / 12) + ' years';
+            }
+            return Math.floor(age / 12) + ' years and ' + (age % 12) + (age % 12 === 1 ? ' month' : ' months');
         }
         return "".concat(age, " months");
     }
@@ -30426,11 +30546,11 @@ var HeartIcon = function (_a) {
 };
 
 var DirectoryAddToShortList = function (_a) {
-    var id = _a.id, name = _a.name, snippet = _a.snippet, email = _a.email, website = _a.website, phone = _a.phone;
+    var id = _a.id, name = _a.name, snippet = _a.snippet, email = _a.email, website = _a.website, phone = _a.phone, addresses = _a.addresses, fees = _a.fees;
     var _b = useDirectoryShortListContext(), toggleFavourites = _b.toggleFavourites, isFavourite = _b.isFavourite;
     var themeContext = React.useContext(styled.ThemeContext);
     var favourite = isFavourite(id);
-    return (React__default.default.createElement(AddToShortlist, { onClick: function (e) { return toggleFavourites(id, name, snippet, email, website, phone); }, "data-testid": "DirectoryAddToShortList", "$favourite": favourite },
+    return (React__default.default.createElement(AddToShortlist, { onClick: function (e) { return toggleFavourites(id, name, snippet, email, website, phone, addresses, fees); }, "data-testid": "DirectoryAddToShortList", "$favourite": favourite },
         favourite ? (React__default.default.createElement(IconDownload$1, { colourFill: themeContext.theme_vars.colours.negative })) : (React__default.default.createElement(HeartIcon, { colourFill: themeContext.theme_vars.colours.action })),
         favourite ? React__default.default.createElement(React__default.default.Fragment, null, "Remove from shortlist") : React__default.default.createElement(React__default.default.Fragment, null, "Add to shortlist")));
 };
@@ -30499,7 +30619,7 @@ var getIcon = function (profile) {
 
 var DirectoryService = function (_a) {
     var _b, _c, _d, _e;
-    var id = _a.id, name = _a.name, accreditations = _a.accreditations, _f = _a.ageInMonths, ageInMonths = _f === void 0 ? false : _f, description = _a.description, descriptionElement = _a.descriptionElement, eligibilitys = _a.eligibilitys, email = _a.email, fees = _a.fees, languages = _a.languages, organization = _a.organization, regular_schedules = _a.regular_schedules, contacts = _a.contacts, service_areas = _a.service_areas, service_at_locations = _a.service_at_locations, service_social_profiles = _a.service_social_profiles, service_taxonomys = _a.service_taxonomys, taxonomiesToShow = _a.taxonomiesToShow, url = _a.url, uploads = _a.uploads, shortListPath = _a.shortListPath;
+    var id = _a.id, name = _a.name, accreditations = _a.accreditations, _f = _a.ageInMonths, ageInMonths = _f === void 0 ? false : _f, description = _a.description, descriptionElement = _a.descriptionElement, eligibilitys = _a.eligibilitys, email = _a.email, fees = _a.fees, languages = _a.languages, organization = _a.organization, regular_schedules = _a.regular_schedules, contacts = _a.contacts, service_areas = _a.service_areas, service_at_locations = _a.service_at_locations, service_social_profiles = _a.service_social_profiles, service_taxonomys = _a.service_taxonomys, taxonomiesToShow = _a.taxonomiesToShow, url = _a.url, websiteUrlTitle = _a.websiteUrlTitle, uploads = _a.uploads, shortListPath = _a.shortListPath;
     var labelLetters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'];
     var _g = React.useState(false), notServer = _g[0], setNotServer = _g[1];
     var themeContext = React.useContext(styled.ThemeContext);
@@ -30523,7 +30643,9 @@ var DirectoryService = function (_a) {
                             " Shortlist (",
                             favourites.length,
                             ")")),
-                        React__default.default.createElement(DirectoryAddToShortList, { id: id, name: name, snippet: transformSnippet(description, 350), email: email, website: url, phone: (_c = (_b = contacts === null || contacts === void 0 ? void 0 : contacts[0]) === null || _b === void 0 ? void 0 : _b.phones) === null || _c === void 0 ? void 0 : _c.flatMap(function (phone) { return phone.number; }).join(', ') })))))),
+                        React__default.default.createElement(DirectoryAddToShortList, { id: id, name: name, snippet: transformSnippet(description, 350), email: email, website: url, phone: (_c = (_b = contacts === null || contacts === void 0 ? void 0 : contacts[0]) === null || _b === void 0 ? void 0 : _b.phones) === null || _c === void 0 ? void 0 : _c.flatMap(function (phone) { return phone.number; }).join(', '), addresses: service_at_locations.flatMap(function (location) {
+                                return location.physical_addresses;
+                            }), fees: fees })))))),
             service_at_locations.filter(function (location) {
                 return location.is_visitable != false;
             }).length > 0 && (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", classes: "striped-column" },
@@ -30538,7 +30660,7 @@ var DirectoryService = function (_a) {
                                         .filter(function (item) { return item !== '' && item !== address.id; })
                                         .join(' <br />'),
                                 } }),
-                            React__default.default.createElement(Button$4, { url: "https://google.com/maps/dir//".concat(location.latitude, ",").concat(location.longitude), text: "Get directions" }))); }),
+                            location.latitude && location.longitude && (React__default.default.createElement(Button$4, { url: "https://google.com/maps/dir//".concat(location.latitude, ",").concat(location.longitude), text: "Get directions" })))); }),
                         (location === null || location === void 0 ? void 0 : location.accessibility_for_disabilities.length) > 0 && (React__default.default.createElement(React__default.default.Fragment, null,
                             React__default.default.createElement(Heading, { level: 3, text: "Other facilities on site" }),
                             React__default.default.createElement("ul", null, location.accessibility_for_disabilities.map(function (accessibility) { return (React__default.default.createElement("li", { key: accessibility.id }, accessibility.accessibility)); })))))); })),
@@ -30570,7 +30692,7 @@ var DirectoryService = function (_a) {
                         React__default.default.createElement(MapLink, { href: "https://www.google.com/maps/search/?api=1&query=".concat(service_at_locations[0].latitude, "%2C").concat(service_at_locations[0].longitude) }, "View in Google Maps"))))))),
             (email || url || (contacts === null || contacts === void 0 ? void 0 : contacts.length) > 0) && (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", classes: "striped-column" },
                 React__default.default.createElement(Heading, { level: 2, text: "How to contact this service" }),
-                React__default.default.createElement(ServiceContact, { email: email, website: url, contacts: contacts }))),
+                React__default.default.createElement(ServiceContact, { email: email, website: url, websiteTitle: websiteUrlTitle, contacts: contacts }))),
             React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", classes: "striped-column" },
                 React__default.default.createElement(Heading, { level: 2, text: "Description" }),
                 React__default.default.createElement("div", null,
@@ -30583,7 +30705,7 @@ var DirectoryService = function (_a) {
                     React__default.default.createElement("table", null,
                         React__default.default.createElement("thead", null,
                             React__default.default.createElement("tr", null,
-                                React__default.default.createElement("th", { scope: "col" }, "Weekday"),
+                                React__default.default.createElement("th", { scope: "col" }, "Opening days"),
                                 React__default.default.createElement("th", { scope: "col" }, "Opens"),
                                 React__default.default.createElement("th", { scope: "col" }, "Closes"))),
                         React__default.default.createElement("tbody", null, regular_schedules === null || regular_schedules === void 0 ? void 0 : regular_schedules.map(function (schedule, scheduleIndex) { return (React__default.default.createElement("tr", { key: scheduleIndex },
@@ -30649,7 +30771,7 @@ styled__default.default.div`
   color: ${(props) => props.theme.theme_vars.colours.grey_dark};
 `;
 
-const ButtonContainer$1 = styled__default.default.div`
+const ButtonContainer$2 = styled__default.default.div`
   display: flex;
   align-items: end;
   padding-bottom: 0;
@@ -30657,23 +30779,49 @@ const ButtonContainer$1 = styled__default.default.div`
 `;
 
 const Button$1 = styled__default.default.button`
-  border: 1px solid ${(props) => props.theme.theme_vars.colours.white};
-  background: ${(props) => props.theme.theme_vars.colours.action};
-  color: ${(props) => props.theme.theme_vars.colours.white};
-  padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
-  cursor: pointer;
-  border-radius: ${(props) => props.theme.theme_vars.border_radius};
-  min-height: 42px;
-  margin-right: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+    border: ${(props) => (props.$isWarning ? `3px` : `1px`)} solid
+    ${(props) => (props.$isWarning ? props.theme.theme_vars.colours.negative : props.theme.theme_vars.colours.white)};
+    background: ${(props) =>
+            props.$isWarning ? props.theme.theme_vars.colours.white : props.theme.theme_vars.colours.action};
+    color: ${(props) =>
+            props.$isWarning ? props.theme.theme_vars.colours.negative : props.theme.theme_vars.colours.white};
+    padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    cursor: pointer;
+    border-radius: ${(props) => props.theme.theme_vars.border_radius};
+    min-height: 42px;
+    margin-right: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+    font-weight: bold;
 
-  &:hover {
-    background: ${(props) => props.theme.theme_vars.colours.action_dark};
-  }
+    &:hover {
+        background: ${(props) =>
+                props.$isWarning ? props.theme.theme_vars.colours.action_light : props.theme.theme_vars.colours.action_dark};
+        color: ${(props) =>
+                props.$isWarning ? props.theme.theme_vars.colours.action_dark : props.theme.theme_vars.colours.white};
+        text-decoration: underline;
+        text-decoration-style: dotted;
+    }
 
-  &:focus {
-    outline: none;
-    background: ${(props) => props.theme.theme_vars.colours.focus};
-  }
+    &:focus {
+        ${(props) => props.theme.linkStylesFocus}
+    }
+
+    &:active {
+        ${(props) => props.theme.linkStylesActive}
+    }
+
+    ${(props) => {
+      if (props.size === 'large') {
+        return `
+          font-size: 16px;
+          padding: 14px 24px;
+        `;
+      }
+    }}
+
+    ${(props) =>
+      props.$isWarning && props.size === 'large' && `
+        padding: 12px 24px;
+      `}
 `;
 
 const ButtonText$1 = styled__default.default.span`
@@ -30753,28 +30901,29 @@ const Legend$1 = styled__default.default.legend`
 `;
 
 const LegendButton = styled__default.default.button`
-  position: relative;
-  background: none;
-  border: none;
-  color: ${(props) => props.theme.theme_vars.colours.action};
-  width: 100%;
-  white-space: normal;
-  cursor: pointer;
-  text-align: left;
-  padding-right: 30px;
-  padding-top: ${(props) => props.theme.theme_vars.spacingSizes.small};
-  padding-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
-  ${(props) => props.theme.theme_vars.h4}
-  ${(props) => props.theme.linkStyles}
-  &:hover {
-    ${(props) => props.theme.linkStylesHover}
-  }
-  &:focus {
-    ${(props) => props.theme.linkStylesFocus}
-  }
-  &:active {
-    ${(props) => props.theme.linkStylesActive}
-  }
+    position: relative;
+    background: none;
+    border: none;
+    color: ${(props) => props.theme.theme_vars.colours.action};
+    width: 100%;
+    white-space: normal;
+    cursor: pointer;
+    text-align: left;
+    padding-right: 30px;
+    padding-top: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    padding-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    ${(props) => props.theme.theme_vars.h4}
+    ${(props) => props.theme.linkStyles}
+    &:hover {
+        ${(props) => props.theme.linkStylesHover}
+    }
+    &:focus {
+        ${(props) => props.theme.linkStylesFocus}
+    }
+    &:active {
+        ${(props) => props.theme.linkStylesActive}
+    }
+    margin: 0;
 `;
 
 const AccordionIcon = styled__default.default.span`
@@ -30883,6 +31032,14 @@ const MapToggle = styled__default.default.button`
   &:active {
     ${(props) => props.theme.linkStylesActive}
   }
+  ${(props) => {
+    if (props.size === 'large') {
+      return `
+        font-size: 16px;
+        padding: 14px 24px;
+      `;
+    }
+  }}
 `;
 
 const Favourites = styled__default.default.a`
@@ -31088,24 +31245,24 @@ var RadioCheckboxInput = function (_a) {
 };
 
 var DirectoryServiceList = function (_a) {
-    var directoryPath = _a.directoryPath, shortListPath = _a.shortListPath, services = _a.services, _b = _a.search, search = _b === void 0 ? '' : _b, setSearch = _a.setSearch, _c = _a.postcode, postcode = _c === void 0 ? '' : _c, setPostcode = _a.setPostcode, _d = _a.totalResults, totalResults = _d === void 0 ? 0 : _d, _e = _a.pageNumber, pageNumber = _e === void 0 ? 1 : _e, setPageNumber = _a.setPageNumber, _f = _a.perPage, perPage = _f === void 0 ? 5 : _f, _g = _a.extractLength, extractLength = _g === void 0 ? 300 : _g, _h = _a.categories, categories = _h === void 0 ? [] : _h, setCategories = _a.setCategories, _j = _a.minimumAge, minimumAge = _j === void 0 ? undefined : _j, setMinimumAge = _a.setMinimumAge, _k = _a.maximumAge, maximumAge = _k === void 0 ? undefined : _k, setMaximumAge = _a.setMaximumAge, _l = _a.mapCenter, mapCenter = _l === void 0 ? '52.23555414368587,-0.8957390701320571' : _l, _m = _a.mapZoom, mapZoom = _m === void 0 ? 9 : _m, _o = _a.isLoading, isLoading = _o === void 0 ? false : _o, _p = _a.ageInMonths, ageInMonths = _p === void 0 ? false : _p, _q = _a.hasDocuments, hasDocuments = _q === void 0 ? false : _q;
-    var _r = useLocalStorage("".concat(directoryPath.replace(/\//g, ''), "-accordion"), []), accordions = _r[0], setAccordions = _r[1];
-    var _s = useLocalStorage("".concat(directoryPath.replace(/\//g, ''), "-accordion-all"), true), openAll = _s[0], setOpenAll = _s[1];
-    var _t = useLocalStorage("".concat(directoryPath.replace(/\//g, ''), "-show-map"), false), showMap = _t[0], setShowMap = _t[1];
-    var _u = React.useState(false), showFilters = _u[0], setShowFilters = _u[1];
-    var _v = useDirectoryShortListContext(), _w = _v.favourites, favourites = _w.favourites; _w.setFavourites; _v.toggleFavourites; _v.isFavourite;
-    var _x = React.useState(false), notServer = _x[0], setNotServer = _x[1];
-    var _y = React.useState(search), searchTerm = _y[0], setSearchTerm = _y[1];
-    var _z = React.useState(postcode), postcodeSearch = _z[0], setPostcodeSearch = _z[1];
+    var directoryPath = _a.directoryPath, shortListPath = _a.shortListPath, services = _a.services, _b = _a.search, search = _b === void 0 ? '' : _b, setSearch = _a.setSearch, _c = _a.proximity, proximity = _c === void 0 ? 2 : _c, _d = _a.showPostcodeSearch, showPostcodeSearch = _d === void 0 ? true : _d, _e = _a.postcode, postcode = _e === void 0 ? '' : _e, setPostcode = _a.setPostcode, _f = _a.totalResults, totalResults = _f === void 0 ? 0 : _f, _g = _a.pageNumber, pageNumber = _g === void 0 ? 1 : _g, setPageNumber = _a.setPageNumber, _h = _a.perPage, perPage = _h === void 0 ? 5 : _h, _j = _a.extractLength, extractLength = _j === void 0 ? 300 : _j, _k = _a.categories, categories = _k === void 0 ? [] : _k, setCategories = _a.setCategories, _l = _a.minimumAge, minimumAge = _l === void 0 ? undefined : _l, setMinimumAge = _a.setMinimumAge, _m = _a.maximumAge, maximumAge = _m === void 0 ? undefined : _m, setMaximumAge = _a.setMaximumAge, _o = _a.mapCenter, mapCenter = _o === void 0 ? '52.23555414368587,-0.8957390701320571' : _o, _p = _a.mapZoom, mapZoom = _p === void 0 ? 9 : _p, _q = _a.isLoading, isLoading = _q === void 0 ? false : _q, _r = _a.ageInMonths, ageInMonths = _r === void 0 ? false : _r, _s = _a.hasDocuments, hasDocuments = _s === void 0 ? false : _s, _t = _a.isError, isError = _t === void 0 ? false : _t;
+    var _u = useLocalStorage("".concat(directoryPath.replace(/\//g, ''), "-accordion"), []), accordions = _u[0], setAccordions = _u[1];
+    var _v = useLocalStorage("".concat(directoryPath.replace(/\//g, ''), "-accordion-all"), true), openAll = _v[0], setOpenAll = _v[1];
+    var _w = useLocalStorage("".concat(directoryPath.replace(/\//g, ''), "-show-map"), false), showMap = _w[0], setShowMap = _w[1];
+    var _x = React.useState(false), showFilters = _x[0], setShowFilters = _x[1];
+    var _y = useDirectoryShortListContext(), _z = _y.favourites, favourites = _z.favourites; _z.setFavourites; _y.toggleFavourites; _y.isFavourite;
+    var _0 = React.useState(false), notServer = _0[0], setNotServer = _0[1];
+    var _1 = React.useState(search), searchTerm = _1[0], setSearchTerm = _1[1];
+    var _2 = React.useState(postcode), postcodeSearch = _2[0], setPostcodeSearch = _2[1];
     var themeContext = React.useContext(styled.ThemeContext);
-    var _0 = React.useState(false), filtersActive = _0[0], setFiltersActive = _0[1];
+    var _3 = React.useState(false), filtersActive = _3[0], setFiltersActive = _3[1];
     React.useEffect(function () {
         setNotServer(true);
         setFiltersActive(hasActiveFilters());
     }, []);
     React.useEffect(function () {
         setFiltersActive(hasActiveFilters());
-    }, [minimumAge, maximumAge, categories]);
+    }, [minimumAge, maximumAge, categories, search, postcode]);
     if (accordions.length === 0) {
         var tempAccordions_1 = [];
         categories === null || categories === void 0 ? void 0 : categories.forEach(function () {
@@ -31183,7 +31340,7 @@ var DirectoryServiceList = function (_a) {
                 lat: parseFloat((_a = service.service_at_locations[0]) === null || _a === void 0 ? void 0 : _a.latitude),
                 lng: parseFloat((_b = service.service_at_locations[0]) === null || _b === void 0 ? void 0 : _b.longitude),
                 label: labelLetters[index],
-                title: "<a href=\"".concat(directoryPath, "/").concat(service.id, "\">").concat(service.name, "</a>"),
+                title: "<a href=".concat(service.id, ">").concat(service.name, "</a>"),
             };
         }),
     };
@@ -31200,7 +31357,9 @@ var DirectoryServiceList = function (_a) {
         }
     };
     var hasActiveFilters = function () {
-        return (maximumAge !== '' ||
+        return (search !== '' ||
+            postcode !== '' ||
+            maximumAge !== '' ||
             minimumAge !== '' ||
             categories.some(function (category) {
                 return category.options.some(function (option) {
@@ -31220,17 +31379,19 @@ var DirectoryServiceList = function (_a) {
                                 React__default.default.createElement(Input, { name: "directorySearch", type: "text", defaultValue: searchTerm, id: "directorySearch", onChange: function (e) {
                                         setSearchTerm(e.target.value);
                                     } })),
-                            React__default.default.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },
+                            showPostcodeSearch && (React__default.default.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },
                                 React__default.default.createElement(Label$1, { htmlFor: "postcode" }, "Postcode (optional)"),
-                                React__default.default.createElement(HintText, { text: "Enter a postcode" }),
-                                React__default.default.createElement(Input, { name: "postcode", type: "text", defaultValue: postcodeSearch, id: "postcode", onChange: function (e) { return setPostcodeSearch(e.target.value); }, autocomplete: "postal-code" })),
+                                React__default.default.createElement(HintText, { text: "Enter a postcode to see results within ".concat(proximity, " miles") }),
+                                React__default.default.createElement(Input, { name: "postcode", type: "text", defaultValue: postcodeSearch, id: "postcode", onChange: function (e) { return setPostcodeSearch(e.target.value); }, autocomplete: "postal-code" }))),
                             React__default.default.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },
-                                React__default.default.createElement(ButtonContainer$1, null,
-                                    React__default.default.createElement(Button$1, { onClick: submitSearch, type: "submit" },
+                                React__default.default.createElement(ButtonContainer$2, null,
+                                    React__default.default.createElement(Button$1, { size: "large", onClick: submitSearch, type: "submit" },
                                         React__default.default.createElement(ButtonText$1, null, "Search"),
-                                        React__default.default.createElement(IconDownload, { colourFill: "#fff" })))),
+                                        React__default.default.createElement(IconDownload, { colourFill: "#fff" })),
+                                    filtersActive && (React__default.default.createElement(Button$1, { size: "large", onClick: clearSearch, type: "button", "$isWarning": true },
+                                        React__default.default.createElement(ButtonText$1, null, "Clear search"))))),
                             hasDocuments && (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
-                                React__default.default.createElement(Button$4, { url: "".concat(directoryPath, "/documents?search=").concat(searchTerm), text: "View documents and resources", primary: false }))))))),
+                                React__default.default.createElement(Button$4, { url: "".concat(directoryPath, "/documents?search=").concat(searchTerm), text: "View documents and resources", primary: false, size: "large" }))))))),
             React__default.default.createElement(Column, { small: "full", medium: "one-third", large: "one-third" },
                 React__default.default.createElement(FilterToggle, { type: "button", onClick: function (e) { return setShowFilters(!showFilters); } }, showFilters ? "Hide Filters" : "Show Filters"),
                 React__default.default.createElement(FilterContainer, { "$showFilters": showFilters },
@@ -31266,14 +31427,16 @@ var DirectoryServiceList = function (_a) {
                                     React__default.default.createElement(Legend$1, null,
                                         React__default.default.createElement(LegendButton, { onClick: function (e) { return toggleAccordion(categoryIndex + 1); }, type: "button" },
                                             category.label,
-                                            React__default.default.createElement(AccordionIcon, { isOpen: accordions[categoryIndex + 1] }))),
+                                            React__default.default.createElement(AccordionIcon, { "$isOpen": accordions[categoryIndex + 1] }))),
                                     React__default.default.createElement(Accordion, { "$isOpen": accordions[categoryIndex + 1] },
                                         React__default.default.createElement(ClearFilter$1, null,
                                             React__default.default.createElement(TextLink$1, { onClick: function (e) { return clearCategory(categoryIndex); } }, "Clear filter")),
                                         category.options.map(function (taxonomy) { return (React__default.default.createElement(Category$2, { key: taxonomy.id },
                                             React__default.default.createElement(RadioCheckboxInput, { name: taxonomy.vocabulary, value: taxonomy.id, label: taxonomy.name, singleSelection: category.singleSelection, checked: taxonomy.checked, onChange: function (e) { return optionChecked(e, categoryIndex, category.singleSelection); } }))); }))))); })))))),
             React__default.default.createElement(Column, { small: "full", medium: "two-thirds", large: "two-thirds" },
-                React__default.default.createElement(Row$1, null, isLoading ? (React__default.default.createElement(LoadingContainer$1, null,
+                React__default.default.createElement(Row$1, null, isError ? (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                    React__default.default.createElement(AlertBannerService, null,
+                        React__default.default.createElement("p", null, "Sorry, there was a problem fetching results. Please try again later.")))) : isLoading ? (React__default.default.createElement(LoadingContainer$1, null,
                     React__default.default.createElement(LoadingSpinner, null),
                     React__default.default.createElement("p", null, "Loading"))) : (React__default.default.createElement(React__default.default.Fragment, null,
                     React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
@@ -31285,7 +31448,7 @@ var DirectoryServiceList = function (_a) {
                             " out of ",
                             totalResults.toLocaleString())) : (React__default.default.createElement(ResultInfo$1, null, "No results found")),
                         React__default.default.createElement(FavouritesContainer, null,
-                            (services === null || services === void 0 ? void 0 : services.length) > 0 && (React__default.default.createElement(MapToggle, { type: "button", onClick: function (e) { return setShowMap(!showMap); } }, showMap ? "Hide Map" : "Show Map")),
+                            (services === null || services === void 0 ? void 0 : services.length) > 0 && (React__default.default.createElement(MapToggle, { type: "button", size: "large", onClick: function (e) { return setShowMap(!showMap); } }, showMap ? "Hide Map" : "Show Map")),
                             React__default.default.createElement(Favourites, { href: shortListPath },
                                 React__default.default.createElement(HeartIcon, { colourFill: themeContext.theme_vars.colours.action }),
                                 " Shortlist (",
@@ -31295,14 +31458,14 @@ var DirectoryServiceList = function (_a) {
                         React__default.default.createElement(Pagination, { currentPage: pageNumber, totalResults: totalResults, resultsPerPage: perPage, postTo: directoryPath, buttonClickOverride: setPageNumber })),
                     React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" }, notServer && React__default.default.createElement(React__default.default.Fragment, null, (services === null || services === void 0 ? void 0 : services.length) > 0 && showMap && React__default.default.createElement(DirectoryMap, { mapProps: mapProps }))),
                     services.map(function (service, index) {
-                        var _a, _b, _c, _d, _e, _f;
+                        var _a, _b, _c, _d, _e, _f, _g;
                         var snippet = transformSnippet(service.description, extractLength);
                         return (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", key: service.id },
                             React__default.default.createElement(ServiceContainer, { "$resultNumber": index },
                                 React__default.default.createElement(Row$1, null,
                                     React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
                                         React__default.default.createElement(ServiceHeader, null,
-                                            React__default.default.createElement(ServiceLink$1, { href: "".concat(directoryPath, "/").concat(service.id) }, service.name),
+                                            React__default.default.createElement(ServiceLink$1, { href: "".concat(service.id) }, service.name),
                                             showMap && (React__default.default.createElement(MarkerContainer, null,
                                                 React__default.default.createElement("span", null, labelLetters[index]),
                                                 React__default.default.createElement(PinIcon, { colourFill: themeContext.theme_vars.colours.action_dark }))))),
@@ -31318,7 +31481,9 @@ var DirectoryServiceList = function (_a) {
                                         ' ',
                                         transformAge(eligibility.maximum_age, ageInMonths))); })))),
                                     React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
-                                        React__default.default.createElement(DirectoryAddToShortList, { id: service.id, name: service.name, snippet: snippet, email: service.email, website: service.url, phone: (_f = (_e = (_d = service.contacts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.phones) === null || _f === void 0 ? void 0 : _f.flatMap(function (phone) { return phone.number; }).join(', ') }))))));
+                                        React__default.default.createElement(DirectoryAddToShortList, { id: service.id, name: service.name, snippet: snippet, email: service.email, website: service.url, phone: (_f = (_e = (_d = service.contacts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.phones) === null || _f === void 0 ? void 0 : _f.flatMap(function (phone) { return phone.number; }).join(', '), addresses: (_g = service.service_at_locations) === null || _g === void 0 ? void 0 : _g.flatMap(function (location) {
+                                                return location.physical_addresses;
+                                            }), fees: service.fees }))))));
                     }),
                     React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
                         React__default.default.createElement(Pagination, { currentPage: pageNumber, totalResults: totalResults, resultsPerPage: perPage, postTo: directoryPath, buttonClickOverride: setPageNumber })))))))));
@@ -31326,71 +31491,96 @@ var DirectoryServiceList = function (_a) {
 
 const Container$1 = styled__default.default.div`
   display: block;
+
+    @media print {  
+        font-size: ${(props) => props.theme.theme_vars.fontSizes.extra_small} !important;
+        [data-testid='Column'] {
+            padding: ${(props) => props.theme.theme_vars.spacingSizes.extra_small} !important;
+        }
+
+        .favourite-outer:nth-of-type(2n + 1) {
+            page-break-after: always;
+        }
+
+        .favourite-outer:last-of-type {
+            page-break-after: avoid !important;
+        }
+    }
 `;
 
 const ServiceLink = styled__default.default.a`
-  display: block;
-  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
-  ${(props) => props.theme.theme_vars.h4}
-  ${(props) => props.theme.linkStyles}
-  &:hover {
-    ${(props) => props.theme.linkStylesHover}
-  }
-  &:focus {
-    ${(props) => props.theme.linkStylesFocus}
-  }
-  &:active {
-    ${(props) => props.theme.linkStylesActive}
-  }
+    display: block;
+    margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    ${(props) => props.theme.theme_vars.h4}
+    ${(props) => props.theme.linkStyles}
+    &:hover {
+        ${(props) => props.theme.linkStylesHover}
+    }
+    &:focus {
+        ${(props) => props.theme.linkStylesFocus}
+    }
+    &:active {
+        ${(props) => props.theme.linkStylesActive}
+    }
 
-  @media print {
-    color: ${(props) => props.theme.theme_vars.colours.black} !important;
-    text-decoration: none !important;
-  }
+    @media print {
+        color: ${(props) => props.theme.theme_vars.colours.black} !important;
+        text-decoration: none !important;
+        font-size: ${(props) => props.theme.theme_vars.fontSizes.small};
+        margin-bottom: 0;
+    }
 `;
 
 const PrintLink = styled__default.default.div`
-  p {
-    display: none;
-  }
-
-  @media print {
     p {
-      display: block;
+        display: none;
+    }
+
+    @media print {
+        p {
+            display: none;
+            margin-bottom: 0 !important;
+        }
     }
+`;
+
+const SnippetContainer = styled__default.default.div`
+  @media print {
+    display: flex;
+    flex-wrap: nowrap;
   }
 `;
 
 const QRCodeContainer = styled__default.default.div`
-  max-width: 80px;
-  margin: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
-  display: none;
-  float: right;
+    max-width: 80px;
+    display: none;
 
-  @media print {
-    display: block;
-  }
+    @media print {
+        display: block;
+        margin-left: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    }
 `;
 
 const FavouriteContainer = styled__default.default.div`
-  background: ${(props) =>
-    props.theme.cardinal_name === 'north'
-      ? props.theme.theme_vars.colours.white
-      : props.theme.theme_vars.colours.grey_light};
-  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
-  transition: box-shadow 0.3s ease;
-  border-bottom: 5px solid ${(props) => props.theme.theme_vars.colours.action};
-  border-radius: ${(props) => props.theme.theme_vars.border_radius};
-  padding: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+    background: ${(props) =>
+            props.theme.cardinal_name === 'north'
+                    ? props.theme.theme_vars.colours.white
+                    : props.theme.theme_vars.colours.grey_light};
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
+    transition: box-shadow 0.3s ease;
+    border-bottom: 5px solid ${(props) => props.theme.theme_vars.colours.action};
+    border-radius: ${(props) => props.theme.theme_vars.border_radius};
+    padding: ${(props) => props.theme.theme_vars.spacingSizes.medium};
 
-  @media print {
-    box-shadow: none;
-    border: 1px solid ${(props) => props.theme.theme_vars.colours.grey};
-    background: none;
-  }
+    @media print {
+        box-shadow: none;
+        border: 1px solid ${(props) => props.theme.theme_vars.colours.grey};
+        background: none;
+        padding: 0 ${(props) => props.theme.theme_vars.spacingSizes.small};
+    }
 `;
 
-const PrintContainer = styled__default.default.div`
+const ButtonContainer$1 = styled__default.default.div`
   display: flex;
   justify-content: flex-end;
 
@@ -31399,7 +31589,7 @@ const PrintContainer = styled__default.default.div`
   }
 `;
 
-const PrintButton = styled__default.default.button`
+const ActionButton = styled__default.default.button`
   border: 2px solid ${(props) => props.theme.theme_vars.colours.action};
   border-radius: ${(props) => props.theme.theme_vars.border_radius};
   background: ${(props) => props.theme.theme_vars.colours.action};
@@ -31411,6 +31601,7 @@ const PrintButton = styled__default.default.button`
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
+  margin-left: ${(props) => props.theme.theme_vars.spacingSizes.medium};
   &:hover {
     ${(props) => props.theme.linkStylesHover}
     color: ${(props) => props.theme.theme_vars.colours.white};
@@ -31433,6 +31624,53 @@ const AddContainer = styled__default.default.div`
   }
 `;
 
+const SubTitle = styled__default.default.p`
+  font-weight: bold;
+  margin-top: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+`;
+
+const ClearShortlistButton = styled__default.default.button`
+  border: 1px solid ${(props) => props.theme.theme_vars.colours.negative};
+  background: ${(props) => props.theme.theme_vars.colours.white};
+  color: ${(props) => props.theme.theme_vars.colours.negative};
+  padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
+  cursor: pointer;
+  border-radius: ${(props) => props.theme.theme_vars.border_radius};
+  min-height: 42px;
+  font-weight: bold;
+
+  &:hover {
+    background: ${(props) => props.theme.theme_vars.colours.action_light};
+    color: ${(props) => props.theme.theme_vars.colours.action_dark};
+    text-decoration: underline;
+    text-decoration-style: dotted;
+  }
+
+  &:focus {
+    ${(props) => props.theme.linkStylesFocus}
+  }
+
+  &:active {
+    ${(props) => props.theme.linkStylesActive}
+  }
+`;
+
+const AddressContainer = styled__default.default.div`
+  display: block;
+
+  @media print {
+    display: none;
+  }
+`;
+
+const PrintAddress = styled__default.default.div`
+  display: none;
+
+  @media print {
+    display: block;
+  }
+`;
+
 var lib = {};
 
 var mode$1 = {
@@ -32792,32 +33030,82 @@ QRCode.defaultProps = defaultProps;
 var _default = lib.default = QRCode;
 
 var DirectoryShortList = function (_a) {
-    var directoryPath = _a.directoryPath;
-    var favourites = useDirectoryShortListContext().favourites.favourites;
-    var _b = React.useState(false), notServer = _b[0], setNotServer = _b[1];
+    _a.directoryPath;
+    var _b = useDirectoryShortListContext(), favourites = _b.favourites.favourites, clearShortlist = _b.clearShortlist;
+    var _c = React.useState(false), notServer = _c[0], setNotServer = _c[1];
     React.useEffect(function () {
         setNotServer(true);
     }, []);
+    var confirmClear = function () {
+        if (window.confirm('Are you sure you want to clear your shortlist?')) {
+            clearShortlist();
+        }
+    };
+    var formatAddress = function (address) {
+        return Object.values(address)
+            .filter(function (item) { return item !== '' && item !== address.id && item !== address.country; })
+            .join(', ');
+    };
+    var copyToClipboard = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var data;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    data = favourites.map(function (favourite) {
+                        var _a, _b, _c, _d;
+                        var address = favourite.addresses.length > 0 ? formatAddress(favourite.addresses[0]) : '';
+                        return "\nName: ".concat(favourite.name, "\nLink: ").concat(favourite.id, "\nAddress: ").concat(address, "\nEmail: ").concat((_a = favourite.email) !== null && _a !== void 0 ? _a : '', "\nWebsite: ").concat((_b = favourite.website) !== null && _b !== void 0 ? _b : '', "\nTelephone: ").concat((_c = favourite.phone) !== null && _c !== void 0 ? _c : '', "\nAbout: ").concat((_d = favourite.snippet.replace(/(\r\n|\n|\r)/gm, '').replace(/\s+/g, ' ')) !== null && _d !== void 0 ? _d : '', "\n\n      ");
+                    });
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, navigator.clipboard.writeText(data.join('')).then(function () {
+                            window.alert('Copied to clipboard');
+                        })];
+                case 2:
+                    _b.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    _b.sent();
+                    window.alert('Unable to copy');
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
     return (React__default.default.createElement(Container$1, { "data-testid": "DirectoryShortList" }, notServer && (React__default.default.createElement(Row$1, null, favourites.length > 0 ? (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
-            React__default.default.createElement(PrintContainer, null,
-                React__default.default.createElement(PrintButton, { onClick: function () { return window.print(); } }, "Print Shortlist"))),
-        favourites.map(function (favourite) { return (React__default.default.createElement(Column, { key: favourite.id, small: "full", medium: "full", large: "full" },
-            React__default.default.createElement(FavouriteContainer, null,
-                React__default.default.createElement(Row$1, null,
-                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
-                        React__default.default.createElement(QRCodeContainer, null,
-                            React__default.default.createElement(_default, { value: "".concat(directoryPath, "/").concat(favourite.id), size: 256, style: { height: 'auto', maxWidth: '100%', width: '100%' }, viewBox: "0 0 256 256" })),
-                        React__default.default.createElement(ServiceLink, { href: "".concat(directoryPath, "/").concat(favourite.id) }, favourite.name),
-                        React__default.default.createElement(PrintLink, null,
-                            React__default.default.createElement("p", null, "".concat(directoryPath, "/").concat(favourite.id)))),
-                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "one-half" },
-                        React__default.default.createElement("div", null, favourite.snippet)),
-                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "one-half" },
-                        React__default.default.createElement(SummaryList, { terms: transformService(favourite.email, favourite.website, favourite.phone), hasMargin: false })),
-                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
-                        React__default.default.createElement(AddContainer, null,
-                            React__default.default.createElement(DirectoryAddToShortList, { id: favourite.id, name: favourite.name, snippet: favourite.snippet, email: favourite.email, website: favourite.website, phone: favourite.phone }))))))); }))) : (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+            React__default.default.createElement(ButtonContainer$1, null,
+                React__default.default.createElement(ClearShortlistButton, { onClick: confirmClear }, "Clear Shortlist"),
+                React__default.default.createElement(ActionButton, { onClick: copyToClipboard }, "Copy To Clipboard"),
+                React__default.default.createElement(ActionButton, { onClick: function () { return window.print(); } }, "Print Shortlist"))),
+        favourites.map(function (favourite) {
+            var _a, _b;
+            return (React__default.default.createElement(Column, { key: favourite.id, small: "full", medium: "full", large: "full", classes: "favourite-outer" },
+                React__default.default.createElement(FavouriteContainer, null,
+                    React__default.default.createElement(Row$1, null,
+                        React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                            React__default.default.createElement(ServiceLink, { href: "".concat(favourite.id) }, favourite.name),
+                            React__default.default.createElement(PrintLink, null,
+                                React__default.default.createElement("p", null, "".concat(favourite.id)))),
+                        React__default.default.createElement(Column, { small: "full", medium: "full", large: "one-half" },
+                            React__default.default.createElement(SnippetContainer, null,
+                                React__default.default.createElement("div", null, favourite.snippet),
+                                React__default.default.createElement(QRCodeContainer, null,
+                                    React__default.default.createElement(_default, { value: "".concat(favourite.id), size: 256, style: { height: 'auto', maxWidth: '100%', width: '100%' }, viewBox: "0 0 256 256" }))),
+                            ((_a = favourite.addresses) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default.default.createElement(React__default.default.Fragment, null,
+                                React__default.default.createElement(AddressContainer, null,
+                                    React__default.default.createElement(SubTitle, null, "Address"),
+                                    ((_b = favourite.addresses) === null || _b === void 0 ? void 0 : _b.length) === 1 ? (React__default.default.createElement("p", null, formatAddress(favourite.addresses[0]))) : (React__default.default.createElement("ul", null, favourite.addresses.map(function (address) { return (React__default.default.createElement("li", { key: address.id }, formatAddress(address))); })))),
+                                React__default.default.createElement(PrintAddress, null,
+                                    React__default.default.createElement(SummaryList, { terms: [{ term: 'Address', detail: formatAddress(favourite.addresses[0]) }], hasMargin: false }))))),
+                        React__default.default.createElement(Column, { small: "full", medium: "full", large: "one-half" },
+                            React__default.default.createElement(SummaryList, { terms: transformService(favourite.email, favourite.website, favourite.phone), hasMargin: false }),
+                            favourite.fees && (React__default.default.createElement(SummaryList, { terms: [{ term: 'Cost', detail: favourite.fees }], hasMargin: false }))),
+                        React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                            React__default.default.createElement(AddContainer, null,
+                                React__default.default.createElement(DirectoryAddToShortList, { id: favourite.id, name: favourite.name, snippet: favourite.snippet, email: favourite.email, website: favourite.website, phone: favourite.phone, addresses: favourite.addresses })))))));
+        }))) : (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
         React__default.default.createElement(FavouriteContainer, null,
             React__default.default.createElement("p", null, "No items in the shortlist"))))))));
 };
@@ -32952,8 +33240,8 @@ const LoadingContainer = styled__default.default.div`
 `;
 
 var DirectoryDocumentList = function (_a) {
-    var directoryPath = _a.directoryPath, documents = _a.documents, _b = _a.search, search = _b === void 0 ? '' : _b, setSearch = _a.setSearch, _c = _a.totalResults, totalResults = _c === void 0 ? 0 : _c, _d = _a.pageNumber, pageNumber = _d === void 0 ? 1 : _d, setPageNumber = _a.setPageNumber, _e = _a.perPage, perPage = _e === void 0 ? 10 : _e, categories = _a.categories, setCategories = _a.setCategories, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f;
-    var _g = React.useState(search), searchTerm = _g[0], setSearchTerm = _g[1];
+    var directoryPath = _a.directoryPath, documents = _a.documents, _b = _a.search, search = _b === void 0 ? '' : _b, setSearch = _a.setSearch, _c = _a.totalResults, totalResults = _c === void 0 ? 0 : _c, _d = _a.pageNumber, pageNumber = _d === void 0 ? 1 : _d, setPageNumber = _a.setPageNumber, _e = _a.perPage, perPage = _e === void 0 ? 10 : _e, categories = _a.categories, setCategories = _a.setCategories, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isError, isError = _g === void 0 ? false : _g;
+    var _h = React.useState(search), searchTerm = _h[0], setSearchTerm = _h[1];
     var submitSearch = function (e) {
         e.preventDefault();
         setSearch(searchTerm);
@@ -33016,7 +33304,9 @@ var DirectoryDocumentList = function (_a) {
                                 React__default.default.createElement(RadioCheckboxInput, { name: taxonomy.vocabulary, value: taxonomy.id, label: taxonomy.name, singleSelection: category.singleSelection, checked: taxonomy.checked, onChange: function (e) { return optionChecked(e, categoryIndex, category.singleSelection); } }))); })))); }))),
             React__default.default.createElement(Column, { small: "full", medium: "two-thirds", large: "two-thirds" },
                 React__default.default.createElement(Row$1, null,
-                    isLoading ? (React__default.default.createElement(LoadingContainer, null,
+                    isError ? (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                        React__default.default.createElement(AlertBannerService, null,
+                            React__default.default.createElement("p", null, "Sorry, there was a problem fetching results. Please try again later.")))) : isLoading ? (React__default.default.createElement(LoadingContainer, null,
                         React__default.default.createElement(LoadingSpinner, null),
                         React__default.default.createElement("p", null, "Loading"))) : (React__default.default.createElement(React__default.default.Fragment, null,
                         React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" }, (documents === null || documents === void 0 ? void 0 : documents.length) > 0 ? (React__default.default.createElement(ResultInfo, null,