@nnc-digital/nnc-design-system 1.0.0-alpha11 → 1.0.0-alpha13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/index.mjs.js
CHANGED
|
@@ -25773,16 +25773,29 @@ const Search = styled.div`
|
|
|
25773
25773
|
margin: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
|
|
25774
25774
|
`;
|
|
25775
25775
|
|
|
25776
|
+
const VideoBackground = styled.video`
|
|
25777
|
+
position: absolute;
|
|
25778
|
+
top: 0;
|
|
25779
|
+
left: 0;
|
|
25780
|
+
width: 100%;
|
|
25781
|
+
height: 500px;
|
|
25782
|
+
object-fit: cover;
|
|
25783
|
+
z-index: -1;
|
|
25784
|
+
`;
|
|
25785
|
+
|
|
25776
25786
|
/**
|
|
25777
25787
|
* Hero image banner with optional text and call to action with varying presentation of text area.
|
|
25778
25788
|
* For optional use at the top of a service landing page, if set in the CMS.
|
|
25779
25789
|
*/
|
|
25780
25790
|
var HeroImage = function (_a) {
|
|
25781
|
-
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;
|
|
25791
|
+
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;
|
|
25782
25792
|
return (React.createElement(React.Fragment, null,
|
|
25783
25793
|
React.createElement(LazyImage, { src: imageLarge, placeholder: imageSmall, visibilitySensorProps: {
|
|
25784
25794
|
partialVisibility: true,
|
|
25785
25795
|
} }, function (src) { return (React.createElement(Container$u, { "$image": src, "$backgroundBox": backgroundBox, "data-testid": "HeroImage" },
|
|
25796
|
+
heroVideoUrl && (React.createElement(VideoBackground, { autoPlay: true, loop: true, muted: true },
|
|
25797
|
+
React.createElement("source", { src: heroVideoUrl, type: "video/mp4" }),
|
|
25798
|
+
"Your browser does not support the video tag.")),
|
|
25786
25799
|
React.createElement(InnerContainer, null,
|
|
25787
25800
|
React.createElement(Overlay, { "$backgroundBox": backgroundBox, "data-testid": "HeroImageOverlay" },
|
|
25788
25801
|
breadcrumb && (React.createElement(BreadcrumbLink, { href: breadcrumb.url, "$backgroundBox": backgroundBox }, breadcrumb.title)),
|