@nnc-digital/nnc-design-system 0.4.32 → 0.4.34

package/build/index.js

@@ -314,6 +314,21 @@ const AutocompleteSuggestionTextMatch = styled__default["default"].span`
   font-weight: bold;
 `;
 
+const LightErrorText = styled__default["default"].p`
+  ${(props) => props.theme.fontStyles}
+  color: ${(props) => props.theme.theme_vars.colours.white};
+  font-weight: bold;
+  margin-bottom: 5px;
+  font-size: 14px;
+  font-size: 0.8rem;
+  line-height: 1.1;
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    font-size: 18px;
+    font-size: 1rem;
+    line-height: 1.25;
+  }
+`;
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -3747,12 +3762,12 @@ process.env.NODE_ENV !== "production" ? '__function_reset__' : 12;
  * click on to select. If viewing in Storybook, try typing the name of a fruit in the story examples.
  */
 var Autocomplete = function (_a) {
-    var _b = _a.id, id = _b === void 0 ? 'autocomplete' : _b, _c = _a.name, name = _c === void 0 ? 'autocomplete' : _c, labelText = _a.labelText, _d = _a.hasHiddenLabel, hasHiddenLabel = _d === void 0 ? false : _d, value = _a.value, size = _a.size, placeholder = _a.placeholder, _e = _a.isErrored, isErrored = _e === void 0 ? false : _e, errorText = _a.errorText, _f = _a.suggestions, suggestions = _f === void 0 ? [] : _f, _g = _a.showSuggestions, showSuggestions = _g === void 0 ? false : _g, _h = _a.minimumMatchLength, minimumMatchLength = _h === void 0 ? 2 : _h, _j = _a.maximumMatchesShown, maximumMatchesShown = _j === void 0 ? 5 : _j, _k = _a.isLarge, isLarge = _k === void 0 ? false : _k, _l = _a.hasAdjacentButton, hasAdjacentButton = _l === void 0 ? false : _l, onSelect = _a.onSelect, onChange = _a.onChange;
+    var _b = _a.id, id = _b === void 0 ? 'autocomplete' : _b, _c = _a.name, name = _c === void 0 ? 'autocomplete' : _c, labelText = _a.labelText, _d = _a.hasHiddenLabel, hasHiddenLabel = _d === void 0 ? false : _d, value = _a.value, size = _a.size, placeholder = _a.placeholder, _e = _a.isErrored, isErrored = _e === void 0 ? false : _e, errorText = _a.errorText, _f = _a.suggestions, suggestions = _f === void 0 ? [] : _f, _g = _a.showSuggestions, showSuggestions = _g === void 0 ? false : _g, _h = _a.minimumMatchLength, minimumMatchLength = _h === void 0 ? 2 : _h, _j = _a.maximumMatchesShown, maximumMatchesShown = _j === void 0 ? 5 : _j, _k = _a.isLarge, isLarge = _k === void 0 ? false : _k, _l = _a.hasAdjacentButton, hasAdjacentButton = _l === void 0 ? false : _l, onSelect = _a.onSelect, onChange = _a.onChange, _m = _a.required, required = _m === void 0 ? false : _m, _o = _a.hasLightBackground, hasLightBackground = _o === void 0 ? true : _o;
     /**
      * We save the input value in state or we can't cope with leaving the input
      * without selecting a matching suggestion.
      */
-    var _m = React.useState(value), inputvalue = _m[0], setInputValue = _m[1];
+    var _p = React.useState(value), inputvalue = _p[0], setInputValue = _p[1];
     /**
      * For component state changes that affect the input value, we copy the
      * value into our saved state, and fire the onSelect handler if the change
@@ -3826,7 +3841,7 @@ var Autocomplete = function (_a) {
             var getInputProps = _a.getInputProps, getItemProps = _a.getItemProps, getLabelProps = _a.getLabelProps, getMenuProps = _a.getMenuProps, isOpen = _a.isOpen, inputValue = _a.inputValue, getRootProps = _a.getRootProps;
             return (React__default["default"].createElement("div", null,
                 React__default["default"].createElement(AutocompleteLabel, __assign$2({}, getLabelProps(), { hasHiddenLabel: hasHiddenLabel }), labelText ? labelText : placeholder),
-                isErrored && errorText ? React__default["default"].createElement(ErrorText$1, null, errorText) : '',
+                isErrored && errorText && (React__default["default"].createElement(React__default["default"].Fragment, null, hasLightBackground ? (React__default["default"].createElement(ErrorText$1, null, errorText)) : (React__default["default"].createElement(LightErrorText, null, errorText)))),
                 React__default["default"].createElement("div", __assign$2({}, getRootProps(undefined, { suppressRefError: true })),
                     React__default["default"].createElement(AutocompleteTextInput, __assign$2({}, getInputProps({
                         name: name,
@@ -3837,7 +3852,7 @@ var Autocomplete = function (_a) {
                         isLarge: isLarge,
                         hasAdjacentButton: hasAdjacentButton,
                         size: size,
-                    })))),
+                    }), { "aria-required": required ? 'true' : 'false', "aria-invalid": isErrored ? 'true' : 'false' }))),
                 // can't rely just on isOpen or we can end up displaying an empty suggestions list
                 isOpen && filteredsuggestions.length > 0 ? (React__default["default"].createElement(AutocompleteSuggestionList, __assign$2({}, getMenuProps({
                     'aria-labelledby': null,
@@ -4167,9 +4182,9 @@ const StyledButton = styled__default["default"].button`
  * Primary UI component for user interaction
  */
 var FormButton = function (_a) {
-    var _b = _a.primary, primary = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, text = _a.text; _a.type; _a.isDisabled; var props = __rest(_a, ["primary", "size", "text", "type", "isDisabled"]);
+    var _b = _a.primary, primary = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, text = _a.text, _d = _a.type, type = _d === void 0 ? "submit" : _d; _a.isDisabled; var props = __rest(_a, ["primary", "size", "text", "type", "isDisabled"]);
     var mode = primary ? 'button--primary' : 'button--secondary';
-    return (React__default["default"].createElement(StyledButton, __assign$2({ className: ["button--".concat(size), mode].join(' ') }, props), text));
+    return (React__default["default"].createElement(StyledButton, __assign$2({ type: type, className: ["button--".concat(size), mode].join(' ') }, props), text));
 };
 
 const Container$15 = styled__default["default"].div`
@@ -4418,7 +4433,7 @@ var BinCollection = function (_a) {
         var selectedUPRN = e.target.value;
         if (selectedUPRN) {
             var startDate_1 = getFormattedDate();
-            var endDate_1 = getFormattedDate(42);
+            var endDate_1 = getFormattedDate(70);
             // Fetch calendar events for the selected UPRN
             axios__default["default"].get("".concat(CalendarEventsApiUrl).concat(selectedUPRN, "/").concat(startDate_1, "/").concat(endDate_1))
                 .then(function (response) {
@@ -4512,7 +4527,7 @@ var BinCollection = function (_a) {
                     React__default["default"].createElement(VisuallyHiddenLabel, { id: "postcode-label", htmlFor: "postcode-input" }, "Enter a postcode"),
                     React__default["default"].createElement(StyledTextInput, { type: "text", placeholder: "Enter a postcode", name: "postcode", id: "postcode-input", isErrored: isError, "aria-labelledby": "postcode-label", autoComplete: "postal-code" }),
                     React__default["default"].createElement(BinCollectionButtonStyles, null,
-                        React__default["default"].createElement(FormButton, { size: "large", type: "submit", "aria-label": "Submit", text: "Find" }))))),
+                        React__default["default"].createElement(FormButton, { size: "large", "aria-label": "Submit", text: "Find" }))))),
         addressOptions.length > 0 && (React__default["default"].createElement(DropDownSelectContainer, null,
             React__default["default"].createElement(DropDownSelect, { onChange: handleAddressChange, id: "address", label: "Select your address", options: __spreadArray([{ title: 'Select an address', value: '' }], addressOptions, true) }))),
         noResultsFound && React__default["default"].createElement("p", null, "No results found."),
@@ -24134,7 +24149,7 @@ var BackLink = function (_a) {
 };
 
 const Container$B = styled__default["default"].div`
-  padding-top: 20px;
+  padding-top: 15px;
   border-bottom: 1px solid ${(props) => props.theme.theme_vars.colours.grey}80;
   margin-bottom: ${(props) => (props.hasMargin ? props.theme.theme_vars.spacingSizes.large : 0)};
 `;
@@ -24150,7 +24165,7 @@ const List$2 = styled__default["default"].ol`
 
 const Crumb = styled__default["default"].li`
   margin-right: ${(props) => props.theme.theme_vars.spacingSizes.small};
-  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
+  margin-bottom: 0;
   display: none;
   left: 0;
   padding-right: 0;
@@ -24179,6 +24194,7 @@ const BreadcrumbLink$1 = styled__default["default"].a`
   ${(props) => props.theme.linkStyles}
   font-weight: 400;
   display: inline-block;
+  padding: ${(props) => props.theme.theme_vars.spacingSizes.small} 0;
 
   svg {
     fill: ${(props) => props.theme.theme_vars.colours.action};
@@ -24201,7 +24217,7 @@ const BreadcrumbLink$1 = styled__default["default"].a`
 var Breadcrumbs = function (_a) {
     var breadcrumbsArray = _a.breadcrumbsArray, _b = _a.hasMargin, hasMargin = _b === void 0 ? false : _b;
     return (React__default["default"].createElement(Container$B, { hasMargin: hasMargin, "data-testid": "Breadcrumbs" },
-        React__default["default"].createElement(List$2, null, breadcrumbsArray.map(function (crumb) { return (React__default["default"].createElement(Crumb, { key: crumb.title }, React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(List$2, { as: breadcrumbsArray.length === 1 ? 'div' : 'ol' }, breadcrumbsArray.map(function (crumb) { return (React__default["default"].createElement(Crumb, { key: crumb.title, as: breadcrumbsArray.length === 1 ? 'span' : 'li' }, React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(BreadcrumbLink$1, { href: crumb.url, title: crumb.title }, crumb.title),
             React__default["default"].createElement(IconWrapper$4, null,
                 React__default["default"].createElement(ChevronIcon, { direction: 'right', colourFill: "#C6C6C6" }))))); }))));
@@ -24380,10 +24396,6 @@ const FooterList = styled__default["default"].ul`
   margin-bottom: 25px;
   list-style-type: none;
 
-  li:last-of-type {
-    margin-bottom: 0;
-  }
-
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.s}) {
     margin-bottom: 0px;
   }
@@ -24393,8 +24405,15 @@ const FooterListItem = styled__default["default"].li`
   display: inline-block;
   left: 0;
   padding-right: 0;
-  margin-right: 25px;
-  margin-bottom: 15px;
+  margin-right: 0;
+  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
+  width: 100%;
+  
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    width: auto;
+    margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+    margin-right: ${(props) => props.theme.theme_vars.spacingSizes.small};
+  }
 `;
 
 const SocialLinks = styled__default["default"].ul`
@@ -24408,8 +24427,8 @@ const SocialLinkItem = styled__default["default"].li`
 `;
 
 const SocialLinkSingle = styled__default["default"].a`
-  display: inline-block;
-  height: 36px;
+  display: block;
+  padding: ${(props) => props.theme.theme_vars.spacingSizes.extra_small};
 
   &:hover {
     opacity: 0.8;
@@ -24441,9 +24460,16 @@ const SocialLinkSingle = styled__default["default"].a`
 `;
 
 const FooterLink = styled__default["default"].a`
+  display: block;
   ${(props) => props.theme.linkStyles}
   color: ${(props) => props.theme.theme_vars.colours.white};
   font-weight: 400;
+  padding: ${(props) =>
+    `${props.theme.theme_vars.spacingSizes.small} ${props.theme.theme_vars.spacingSizes.extra_small}`};
+
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    display: inline-block;
+  }
 
   &:hover {
     ${(props) => props.theme.linkStylesHover}
@@ -24781,8 +24807,8 @@ var NorthColouredLogo = function () {
 };
 
 const Container$v = styled__default["default"].div`
-  ${props => props.theme.fontStyles}
-  width: calc(100% - ${ props => props.isLarge ? "5rem" : "3rem"});
+  ${(props) => props.theme.fontStyles}
+  width: calc(100% - ${(props) => (props.isLarge ? '5rem' : '3rem')});
 `;
 
 styled__default["default"].label`
@@ -24807,41 +24833,44 @@ const InputWrapper = styled__default["default"].div`
 const Button$3 = styled__default["default"].button`
   position: absolute;
   top: 0;
-  right: ${ props => props.isLarge ? "-5rem" : "-3rem"};
+  right: ${(props) => (props.isLarge ? '-5rem' : '-3rem')};
   cursor: pointer;
   margin: 0;
-  padding: ${props => props.theme.theme_vars.spacingSizes.small};
-  background: ${props => props.isLight ? props.theme.theme_vars.colours.action : props.theme.theme_vars.colours.grey_darkest};
-  color: ${props => props.theme.theme_vars.colours.white};
+  margin-top: ${(props) => (props.isErrored ? '25px' : 0)};
+  padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
+  background: ${(props) =>
+    props.isLight ? props.theme.theme_vars.colours.action : props.theme.theme_vars.colours.grey_darkest};
+  color: ${(props) => props.theme.theme_vars.colours.white};
   border: 1px solid transparent;
-  border-top-right-radius: calc(${props => props.theme.theme_vars.border_radius} * 2);
-  border-bottom-right-radius: calc(${props => props.theme.theme_vars.border_radius} * 2);
-  width: ${props => props.isLarge ? "5rem" : "3rem"};
+  border-top-right-radius: calc(${(props) => props.theme.theme_vars.border_radius} * 2);
+  border-bottom-right-radius: calc(${(props) => props.theme.theme_vars.border_radius} * 2);
+  width: ${(props) => (props.isLarge ? '5rem' : '3rem')};
   text-align: center;
-  height: ${ props => props.isLarge ? "2.9rem" : "2.28rem"};
-  @media screen and (min-width: ${ props => props.theme.theme_vars.breakpoints.m}) {
-    height: ${ props => props.isLarge ? "3.22rem" : "2.6rem"};
+  height: ${(props) => (props.isLarge ? '2.9rem' : '2.28rem')};
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    height: ${(props) => (props.isLarge ? '3.22rem' : '2.6rem')};
   }
 
   &:hover {
-    background: ${props => props.isLight? props.theme.theme_vars.colours.action_dark : props.theme.theme_vars.colours.black};
+    background: ${(props) =>
+      props.isLight ? props.theme.theme_vars.colours.action_dark : props.theme.theme_vars.colours.black};
   }
 
   &:focus {
     outline: none;
-    background: ${props => props.theme.theme_vars.colours.focus};
+    background: ${(props) => props.theme.theme_vars.colours.focus};
     svg {
-      path{
-        fill: ${props => props.theme.theme_vars.colours.black};
+      path {
+        fill: ${(props) => props.theme.theme_vars.colours.black};
       }
     }
   }
 
   &:active {
     transform: translateY(1px);
-    background-color: ${props => props.theme.theme_vars.colours.focus};
-    box-shadow: 0px -1px 0px 0px ${props => props.theme.theme_vars.colours.black};
-    border-top-color: ${props => props.theme.theme_vars.colours.black};
+    background-color: ${(props) => props.theme.theme_vars.colours.focus};
+    box-shadow: 0px -1px 0px 0px ${(props) => props.theme.theme_vars.colours.black};
+    border-top-color: ${(props) => props.theme.theme_vars.colours.black};
     border-bottom-color: transparent;
   }
 `;
@@ -24866,7 +24895,7 @@ var IconDownload = function (_a) {
 };
 
 var Searchbar = function (_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Search" : _b, isLight = _a.isLight, isLarge = _a.isLarge, _c = _a.searchTerm, searchTerm = _c === void 0 ? "" : _c, submitInfo = _a.submitInfo, _d = _a.id, id = _d === void 0 ? "search" : _d, _e = _a.suggestions, suggestions = _e === void 0 ? [] : _e, _f = _a.minimumMatchLength, minimumMatchLength = _f === void 0 ? 2 : _f, _g = _a.maximumMatchesShown, maximumMatchesShown = _g === void 0 ? 5 : _g;
+    var _b = _a.placeholder, placeholder = _b === void 0 ? 'Search' : _b, isLight = _a.isLight, isLarge = _a.isLarge, _c = _a.searchTerm, searchTerm = _c === void 0 ? '' : _c, submitInfo = _a.submitInfo, _d = _a.id, id = _d === void 0 ? 'search' : _d, _e = _a.suggestions, suggestions = _e === void 0 ? [] : _e, _f = _a.minimumMatchLength, minimumMatchLength = _f === void 0 ? 2 : _f, _g = _a.maximumMatchesShown, maximumMatchesShown = _g === void 0 ? 5 : _g;
     var initialSearchTerm = searchTerm;
     var _h = React.useState(initialSearchTerm), inputSearchTerm = _h[0], setInputSearchTerm = _h[1];
     var _j = React.useState(false), submit = _j[0], setSubmit = _j[1];
@@ -24898,13 +24927,12 @@ var Searchbar = function (_a) {
             return;
         setSubmit(false);
         var submitParams = submitInfo.params;
-        if (initialSearchTerm !== inputSearchTerm ||
-            !(NewsArticleFilterFields.search.queryParamKey in submitParams)) {
+        if (initialSearchTerm !== inputSearchTerm || !(NewsArticleFilterFields.search.queryParamKey in submitParams)) {
             submitParams = __assign$2(__assign$2({}, submitParams), { searchTerm: inputSearchTerm });
             var keyValueFormat = Object.keys(submitParams).map(function (key) {
                 return { key: key, value: submitParams[key] };
             });
-            handleParams(submitInfo.postTo, keyValueFormat, ["page"]);
+            handleParams(submitInfo.postTo, keyValueFormat, ['page']);
         }
     }, [submit, submitInfo, initialSearchTerm, inputSearchTerm, handleParams] // dependencies that this function relies upon
     );
@@ -24915,7 +24943,7 @@ var Searchbar = function (_a) {
     var handleSubmit = function (event) {
         if (event)
             event.preventDefault();
-        if (inputSearchTerm == "") {
+        if (inputSearchTerm == '') {
             if (!isErrored) {
                 setIsErrored(true);
             }
@@ -24930,8 +24958,8 @@ var Searchbar = function (_a) {
         React__default["default"].createElement("form", { onSubmit: handleSubmit },
             React__default["default"].createElement("div", { role: "search" },
                 React__default["default"].createElement(InputWrapper, null,
-                    React__default["default"].createElement(Autocomplete, { id: id, name: NewsArticleFilterFields.search.queryParamKey, placeholder: placeholder, onSelect: handleSelect, onChange: handleChange, value: inputSearchTerm, suggestions: suggestions, minimumMatchLength: minimumMatchLength, maximumMatchesShown: maximumMatchesShown, isLarge: isLarge, hasAdjacentButton: true, isErrored: isErrored, hasHiddenLabel: true }),
-                    React__default["default"].createElement(Button$3, { type: "submit", value: "Search", isLarge: isLarge, isLight: isLight, "data-testid": "SearchButton" },
+                    React__default["default"].createElement(Autocomplete, { id: id, name: NewsArticleFilterFields.search.queryParamKey, placeholder: placeholder, onSelect: handleSelect, onChange: handleChange, value: inputSearchTerm, suggestions: suggestions, minimumMatchLength: minimumMatchLength, maximumMatchesShown: maximumMatchesShown, isLarge: isLarge, hasAdjacentButton: true, isErrored: isErrored, hasHiddenLabel: true, required: true, errorText: "The search field is required.", hasLightBackground: isLight }),
+                    React__default["default"].createElement(Button$3, { type: "submit", value: "Search", isLarge: isLarge, isLight: isLight, isErrored: isErrored, "data-testid": "SearchButton" },
                         React__default["default"].createElement(IconDownload, { colourFill: "#fff" }),
                         React__default["default"].createElement(ButtonText$2, null, "Search")))))));
 };
@@ -24989,7 +25017,7 @@ var Header = function (_a) {
                     hasNewsLink && (React__default["default"].createElement(Link$1, { href: "/news" }, "News")),
                     allServicesLink && (React__default["default"].createElement(Link$1, { href: isHomepage ? '#all-services' : allServicesLink + '#all-services' }, "All services")))),
                 !hideSearchBar && (React__default["default"].createElement(SearchWrapper, null,
-                    React__default["default"].createElement(Searchbar, { isLight: themeContext.cardinal_name === 'north' ? true : false, submitInfo: {
+                    React__default["default"].createElement(Searchbar, { isLight: themeContext.cardinal_name === 'north' ? true : false, isLarge: true, submitInfo: {
                             postTo: '/search',
                             params: {
                                 type: 'search',