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

package/build/index.esm.js

@@ -299,6 +299,21 @@ const AutocompleteSuggestionTextMatch = styled.span`
   font-weight: bold;
 `;
 
+const LightErrorText = styled.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) {
@@ -3732,12 +3747,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 = useState(value), inputvalue = _m[0], setInputValue = _m[1];
+    var _p = 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
@@ -3811,7 +3826,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.createElement("div", null,
                 React.createElement(AutocompleteLabel, __assign$2({}, getLabelProps(), { hasHiddenLabel: hasHiddenLabel }), labelText ? labelText : placeholder),
-                isErrored && errorText ? React.createElement(ErrorText$1, null, errorText) : '',
+                isErrored && errorText && (React.createElement(React.Fragment, null, hasLightBackground ? (React.createElement(ErrorText$1, null, errorText)) : (React.createElement(LightErrorText, null, errorText)))),
                 React.createElement("div", __assign$2({}, getRootProps(undefined, { suppressRefError: true })),
                     React.createElement(AutocompleteTextInput, __assign$2({}, getInputProps({
                         name: name,
@@ -3822,7 +3837,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.createElement(AutocompleteSuggestionList, __assign$2({}, getMenuProps({
                     'aria-labelledby': null,
@@ -4152,9 +4167,9 @@ const StyledButton = styled.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.createElement(StyledButton, __assign$2({ className: ["button--".concat(size), mode].join(' ') }, props), text));
+    return (React.createElement(StyledButton, __assign$2({ type: type, className: ["button--".concat(size), mode].join(' ') }, props), text));
 };
 
 const Container$15 = styled.div`
@@ -4497,7 +4512,7 @@ var BinCollection = function (_a) {
                     React.createElement(VisuallyHiddenLabel, { id: "postcode-label", htmlFor: "postcode-input" }, "Enter a postcode"),
                     React.createElement(StyledTextInput, { type: "text", placeholder: "Enter a postcode", name: "postcode", id: "postcode-input", isErrored: isError, "aria-labelledby": "postcode-label", autoComplete: "postal-code" }),
                     React.createElement(BinCollectionButtonStyles, null,
-                        React.createElement(FormButton, { size: "large", type: "submit", "aria-label": "Submit", text: "Find" }))))),
+                        React.createElement(FormButton, { size: "large", "aria-label": "Submit", text: "Find" }))))),
         addressOptions.length > 0 && (React.createElement(DropDownSelectContainer, null,
             React.createElement(DropDownSelect, { onChange: handleAddressChange, id: "address", label: "Select your address", options: __spreadArray([{ title: 'Select an address', value: '' }], addressOptions, true) }))),
         noResultsFound && React.createElement("p", null, "No results found."),
@@ -24119,7 +24134,7 @@ var BackLink = function (_a) {
 };
 
 const Container$B = styled.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)};
 `;
@@ -24135,7 +24150,7 @@ const List$2 = styled.ol`
 
 const Crumb = styled.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;
@@ -24164,6 +24179,7 @@ const BreadcrumbLink$1 = styled.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};
@@ -24186,7 +24202,7 @@ const BreadcrumbLink$1 = styled.a`
 var Breadcrumbs = function (_a) {
     var breadcrumbsArray = _a.breadcrumbsArray, _b = _a.hasMargin, hasMargin = _b === void 0 ? false : _b;
     return (React.createElement(Container$B, { hasMargin: hasMargin, "data-testid": "Breadcrumbs" },
-        React.createElement(List$2, null, breadcrumbsArray.map(function (crumb) { return (React.createElement(Crumb, { key: crumb.title }, React.createElement(React.Fragment, null,
+        React.createElement(List$2, { as: breadcrumbsArray.length === 1 ? 'div' : 'ol' }, breadcrumbsArray.map(function (crumb) { return (React.createElement(Crumb, { key: crumb.title, as: breadcrumbsArray.length === 1 ? 'span' : 'li' }, React.createElement(React.Fragment, null,
             React.createElement(BreadcrumbLink$1, { href: crumb.url, title: crumb.title }, crumb.title),
             React.createElement(IconWrapper$4, null,
                 React.createElement(ChevronIcon, { direction: 'right', colourFill: "#C6C6C6" }))))); }))));
@@ -24365,10 +24381,6 @@ const FooterList = styled.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;
   }
@@ -24378,8 +24390,15 @@ const FooterListItem = styled.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.ul`
@@ -24393,8 +24412,8 @@ const SocialLinkItem = styled.li`
 `;
 
 const SocialLinkSingle = styled.a`
-  display: inline-block;
-  height: 36px;
+  display: block;
+  padding: ${(props) => props.theme.theme_vars.spacingSizes.extra_small};
 
   &:hover {
     opacity: 0.8;
@@ -24426,9 +24445,16 @@ const SocialLinkSingle = styled.a`
 `;
 
 const FooterLink = styled.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}
@@ -24766,8 +24792,8 @@ var NorthColouredLogo = function () {
 };
 
 const Container$v = styled.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.label`
@@ -24792,41 +24818,44 @@ const InputWrapper = styled.div`
 const Button$3 = styled.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;
   }
 `;
@@ -24851,7 +24880,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 = useState(initialSearchTerm), inputSearchTerm = _h[0], setInputSearchTerm = _h[1];
     var _j = useState(false), submit = _j[0], setSubmit = _j[1];
@@ -24883,13 +24912,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
     );
@@ -24900,7 +24928,7 @@ var Searchbar = function (_a) {
     var handleSubmit = function (event) {
         if (event)
             event.preventDefault();
-        if (inputSearchTerm == "") {
+        if (inputSearchTerm == '') {
             if (!isErrored) {
                 setIsErrored(true);
             }
@@ -24915,8 +24943,8 @@ var Searchbar = function (_a) {
         React.createElement("form", { onSubmit: handleSubmit },
             React.createElement("div", { role: "search" },
                 React.createElement(InputWrapper, null,
-                    React.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.createElement(Button$3, { type: "submit", value: "Search", isLarge: isLarge, isLight: isLight, "data-testid": "SearchButton" },
+                    React.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.createElement(Button$3, { type: "submit", value: "Search", isLarge: isLarge, isLight: isLight, isErrored: isErrored, "data-testid": "SearchButton" },
                         React.createElement(IconDownload, { colourFill: "#fff" }),
                         React.createElement(ButtonText$2, null, "Search")))))));
 };
@@ -24974,7 +25002,7 @@ var Header = function (_a) {
                     hasNewsLink && (React.createElement(Link$1, { href: "/news" }, "News")),
                     allServicesLink && (React.createElement(Link$1, { href: isHomepage ? '#all-services' : allServicesLink + '#all-services' }, "All services")))),
                 !hideSearchBar && (React.createElement(SearchWrapper, null,
-                    React.createElement(Searchbar, { isLight: themeContext.cardinal_name === 'north' ? true : false, submitInfo: {
+                    React.createElement(Searchbar, { isLight: themeContext.cardinal_name === 'north' ? true : false, isLarge: true, submitInfo: {
                             postTo: '/search',
                             params: {
                                 type: 'search',