@nnc-digital/nnc-design-system 1.0.0-alpha3 → 1.0.0-alpha31

package/build/ThemeVars.types.d.ts

@@ -0,0 +1,60 @@
+export interface ThemeVars {
+    theme_name: string;
+    full_name: string;
+    cardinal_name: string;
+    is_memorial: boolean;
+    council_link?: string;
+    other_council_link?: string;
+    other_council_name?: string;
+    other_council_action?: string;
+    twitter_link?: string;
+    linkedin_link?: string;
+    facebook_link?: string;
+    instagram_link?: string;
+    youtube_link?: string;
+    breakpointsVals: ThemeBreakpointTypes;
+    breakpoints: ThemeBreakpointTypes;
+    fontstack: string;
+    colours: ThemeColourTypes;
+    fontSizes: ThemeSizeTypes;
+    border_width: string;
+    border_width_error: string;
+    border_width_thin: string;
+    border_radius: string;
+    border_radius_large: string;
+    spacingSizes: ThemeSizeTypes;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+}
+export interface ThemeBreakpointTypes {
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+}
+export interface ThemeColourTypes {
+    black: string;
+    grey_darkest: string;
+    grey_dark: string;
+    grey: string;
+    grey_light: string;
+    white: string;
+    action: string;
+    action_light: string;
+    action_dark: string;
+    positive: string;
+    negative: string;
+    visited?: string;
+    focus: string;
+    placeholder: string;
+    secondary?: string;
+}
+export interface ThemeSizeTypes {
+    extra_small: string;
+    small: string;
+    medium: string;
+    large: string;
+    x_large?: string;
+}

package/build/index.js

@@ -22891,7 +22891,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 +23805,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 +24149,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 +24209,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))));
 };
 
@@ -24417,11 +24418,11 @@ const Container$E = styled__default.default.div`
   padding: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
   background: ${(props) =>
     props.$alertType === 'alert'
-      ? props.theme.theme_vars.colours.negative
+      ? props.theme.theme_vars.colours.alert_background
       : props.$alertType === 'warning'
-      ? props.theme.theme_vars.colours.focus
+      ? props.theme.theme_vars.colours.warning_background
       : props.$alertType === 'positive'
-      ? props.theme.theme_vars.colours.positive
+      ? props.theme.theme_vars.colours.positive_background
       : props.$alertType === 'london_bridge'
       ? props.theme.theme_vars.colours.black
       : props.theme.theme_vars.colours.negative};
@@ -24429,7 +24430,7 @@ const Container$E = styled__default.default.div`
   button {
     line-height: 1.3;
     color: ${(props) =>
-      props.alertType === 'warning' || props.alertType === 'positive'
+      props.$alertType === 'warning' || props.$alertType === 'positive'
         ? props.theme.theme_vars.colours.black
         : props.theme.theme_vars.colours.white} !important;
   }
@@ -24437,7 +24438,7 @@ const Container$E = styled__default.default.div`
   a {
     ${(props) => props.theme.linkStyles}
     color: ${(props) =>
-      props.alertType === 'warning' || props.alertType === 'positive'
+      props.$alertType === 'warning' || props.$alertType === 'positive'
         ? props.theme.theme_vars.colours.black
         : props.theme.theme_vars.colours.white} !important;
 
@@ -24447,13 +24448,13 @@ const Container$E = styled__default.default.div`
     &:focus {
       ${(props) => props.theme.linkStylesFocus}
       color: ${(props) =>
-        props.alertType === 'warning' || props.alertType === 'positive'
+        props.$alertType === 'warning' || props.$alertType === 'positive'
           ? props.theme.theme_vars.colours.white
           : props.theme.theme_vars.colours.black} !important;
       background: ${(props) =>
-        props.alertType === 'warning' || props.alertType === 'positive'
+        props.$alertType === 'warning' || props.$alertType === 'positive'
           ? props.theme.theme_vars.colours.action
-          : props.theme.theme_vars.colours.focus} !important;
+          : props.theme.theme_vars.colours.warning_background} !important;
     }
     &:active {
       ${(props) => props.theme.linkStylesActive}
@@ -24462,7 +24463,7 @@ const Container$E = styled__default.default.div`
 
   svg {
     fill: ${(props) =>
-      props.alertType === 'warning' || props.alertType === 'positive'
+      props.$alertType === 'warning' || props.$alertType === 'positive'
         ? props.theme.theme_vars.colours.black
         : props.theme.theme_vars.colours.white} !important;
   }
@@ -24506,19 +24507,19 @@ const HideLink = styled__default.default.button`
     outline: none;
     border-radius: ${(props) => props.theme.theme_vars.border_radius};
     color: ${(props) =>
-      props.alertType === 'warning' || props.alertType === 'positive'
+      props.$alertType === 'warning' || props.$alertType === 'positive'
         ? props.theme.theme_vars.colours.white
         : props.theme.theme_vars.colours.black} !important;
     background: ${(props) =>
-      props.alertType === 'warning' || props.alertType === 'positive'
+      props.$alertType === 'warning' || props.$alertType === 'positive'
         ? props.theme.theme_vars.colours.action
-        : props.theme.theme_vars.colours.focus} !important;
+        : props.theme.theme_vars.colours.warning_background} !important;
     border-bottom: 3px solid ${(props) => props.theme.theme_vars.colours.black};
 
     svg {
       path {
         fill: ${(props) =>
-          props.alertType === 'warning' || props.alertType === 'positive'
+          props.$alertType === 'warning' || props.$alertType === 'positive'
             ? props.theme.theme_vars.colours.white
             : props.theme.theme_vars.colours.black} !important;
       }
@@ -25239,6 +25240,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}
 `;
 
@@ -25785,16 +25788,91 @@ 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%;
+  z-index: -1;
+  @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: 530px;
+  }
+`;
+
+const VideoBackground = styled__default.default.video`
+  position: absolute;
+  width: 100%;
+  height: 575px;
+  object-fit: cover;
+  z-index: -1;
+  @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: 540px;
+  }
+`;
+
+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: 10;
+    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 +27078,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;
   }
@@ -28286,7 +28376,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 +28400,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}