@nnc-digital/nnc-design-system 1.0.0-alpha11 → 1.0.0-alpha12
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.js
CHANGED
|
@@ -25786,16 +25786,29 @@ const Search = styled__default.default.div`
|
|
|
25786
25786
|
margin: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
|
|
25787
25787
|
`;
|
|
25788
25788
|
|
|
25789
|
+
const VideoBackground = styled__default.default.video`
|
|
25790
|
+
position: absolute;
|
|
25791
|
+
top: 0;
|
|
25792
|
+
left: 0;
|
|
25793
|
+
width: 100%;
|
|
25794
|
+
height: 500px;
|
|
25795
|
+
object-fit: cover;
|
|
25796
|
+
z-index: -1;
|
|
25797
|
+
`;
|
|
25798
|
+
|
|
25789
25799
|
/**
|
|
25790
25800
|
* Hero image banner with optional text and call to action with varying presentation of text area.
|
|
25791
25801
|
* For optional use at the top of a service landing page, if set in the CMS.
|
|
25792
25802
|
*/
|
|
25793
25803
|
var HeroImage = function (_a) {
|
|
25794
|
-
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;
|
|
25804
|
+
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;
|
|
25795
25805
|
return (React__default.default.createElement(React__default.default.Fragment, null,
|
|
25796
25806
|
React__default.default.createElement(LazyImage, { src: imageLarge, placeholder: imageSmall, visibilitySensorProps: {
|
|
25797
25807
|
partialVisibility: true,
|
|
25798
25808
|
} }, function (src) { return (React__default.default.createElement(Container$u, { "$image": src, "$backgroundBox": backgroundBox, "data-testid": "HeroImage" },
|
|
25809
|
+
heroVideo && (React__default.default.createElement(VideoBackground, { autoPlay: true, loop: true, muted: true },
|
|
25810
|
+
React__default.default.createElement("source", { src: heroVideo, type: "video/mp4" }),
|
|
25811
|
+
"Your browser does not support the video tag.")),
|
|
25799
25812
|
React__default.default.createElement(InnerContainer, null,
|
|
25800
25813
|
React__default.default.createElement(Overlay, { "$backgroundBox": backgroundBox, "data-testid": "HeroImageOverlay" },
|
|
25801
25814
|
breadcrumb && (React__default.default.createElement(BreadcrumbLink, { href: breadcrumb.url, "$backgroundBox": backgroundBox }, breadcrumb.title)),
|