@nnc-digital/nnc-design-system 1.0.0-alpha10 → 1.0.0-alpha12

package/build/index.mjs.js

@@ -22878,7 +22878,7 @@ const InnerContainer$2 = styled.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.createElement(Container$L, { "$alertType": alertType, "data-testid": "AlertBannerService", hasTopSpacing: hasTopSpacing },
+    return (React.createElement(Container$L, { "$alertType": alertType, "data-testid": "AlertBannerService", "$hasTopSpacing": hasTopSpacing },
         React.createElement(InnerContainer$2, { "data-testid": "AlertBannerServiceInner" },
             (title === null || title === void 0 ? void 0 : title.trim()) && React.createElement(Heading, { text: title }),
             children)));
@@ -25773,16 +25773,29 @@ const Search = styled.div`
   margin: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
 `;
 
+const VideoBackground = styled.video`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 500px;
+  object-fit: cover;
+  z-index: -1;
+`;
+
 /**
  * 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, heroVideo = _a.heroVideo, breadcrumb = _a.breadcrumb, customSearch = _a.customSearch;
     return (React.createElement(React.Fragment, null,
         React.createElement(LazyImage, { src: imageLarge, placeholder: imageSmall, visibilitySensorProps: {
                 partialVisibility: true,
             } }, function (src) { return (React.createElement(Container$u, { "$image": src, "$backgroundBox": backgroundBox, "data-testid": "HeroImage" },
+            heroVideo && (React.createElement(VideoBackground, { autoPlay: true, loop: true, muted: true },
+                React.createElement("source", { src: heroVideo, type: "video/mp4" }),
+                "Your browser does not support the video tag.")),
             React.createElement(InnerContainer, null,
                 React.createElement(Overlay, { "$backgroundBox": backgroundBox, "data-testid": "HeroImageOverlay" },
                     breadcrumb && (React.createElement(BreadcrumbLink, { href: breadcrumb.url, "$backgroundBox": backgroundBox }, breadcrumb.title)),