@royaloperahouse/chord 0.7.6 → 0.7.9
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/CHANGELOG.md +11 -0
- package/dist/chord.cjs.development.js +73 -52
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +73 -52
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/organisms/Carousel/Carousel.style.d.ts +1 -0
- package/dist/components/organisms/HighlightsCarousel/HighlightsCarousel.style.d.ts +1 -0
- package/dist/components/organisms/Navigation/Navigation.style.d.ts +2 -0
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +6 -3
- package/dist/types/navigation.d.ts +16 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
# CHANGELOG
|
|
2
|
+
## [0.7.9]
|
|
3
|
+
- Impact: fix sponsor click and font size on mobile
|
|
4
|
+
- Carousel: add buttons to tablet
|
|
5
|
+
- Navigation: position fixed when menu is open on mobile
|
|
6
|
+
- Highlight Carousel: add html text to short description
|
|
7
|
+
|
|
8
|
+
## [0.7.8]
|
|
9
|
+
- TitleWithCTA: add message prop
|
|
10
|
+
|
|
11
|
+
## [0.7.7]
|
|
12
|
+
- Tabs: close dropdown when it is clicked twice
|
|
2
13
|
|
|
3
14
|
## [0.7.6]
|
|
4
15
|
- Add new initOpen prop to Accordion component
|
|
@@ -2194,7 +2194,7 @@ var CinemaBadge = function CinemaBadge(_ref) {
|
|
|
2194
2194
|
}))));
|
|
2195
2195
|
};
|
|
2196
2196
|
|
|
2197
|
-
var zLevels = ['base', 'content', 'contentOverlay', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
|
|
2197
|
+
var zLevels = ['base', 'content', 'contentOverlay', 'sponsorship', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
|
|
2198
2198
|
var zIndexes = {};
|
|
2199
2199
|
zLevels.forEach(function (name, index) {
|
|
2200
2200
|
zIndexes[name] = index;
|
|
@@ -3054,8 +3054,8 @@ var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$m || (_t
|
|
|
3054
3054
|
var IconWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
|
|
3055
3055
|
var theme = _ref.theme;
|
|
3056
3056
|
return theme.colors.primary;
|
|
3057
|
-
}, devices.
|
|
3058
|
-
var IconUnavailableWrapper = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.
|
|
3057
|
+
}, devices.mobile);
|
|
3058
|
+
var IconUnavailableWrapper = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.mobile);
|
|
3059
3059
|
|
|
3060
3060
|
var RotatorButtons = function RotatorButtons(_ref) {
|
|
3061
3061
|
var onClickPrev = _ref.onClickPrev,
|
|
@@ -3119,17 +3119,24 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3119
3119
|
}, renderNextIcon()));
|
|
3120
3120
|
};
|
|
3121
3121
|
|
|
3122
|
-
var _templateObject$n, _templateObject2$9, _templateObject3$4, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
3123
|
-
var
|
|
3124
|
-
var
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
var
|
|
3128
|
-
var
|
|
3129
|
-
var
|
|
3130
|
-
var
|
|
3131
|
-
var
|
|
3132
|
-
var
|
|
3122
|
+
var _templateObject$n, _templateObject2$9, _templateObject3$4, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
3123
|
+
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
|
|
3124
|
+
var isMenuOpen = _ref.isMenuOpen;
|
|
3125
|
+
return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--base-color-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
|
|
3126
|
+
});
|
|
3127
|
+
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 100vw;\n position: absolute;\n z-index: ", ";\n opacity: 0.4;\n"])), zIndexes.searchOverlay);
|
|
3128
|
+
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--base-color-white);\n height: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n }\n"])), zIndexes.navigation, devices.mobile);
|
|
3129
|
+
var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n height: 100px;\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
|
|
3130
|
+
var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n border-top: 1px solid var(--base-color-light-grey);\n height: 100px;\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n \n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
|
|
3131
|
+
var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n background-color: var(--base-color-white);\n padding-top: ", ";\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet, function (_ref2) {
|
|
3132
|
+
var theme = _ref2.theme;
|
|
3133
|
+
return theme.spacing[12];
|
|
3134
|
+
});
|
|
3135
|
+
var LogoContainer = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 140px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &&& .logoImg {\n height: 96px;\n width: 66px;\n }\n\n @media ", " {\n height: 80px;\n\n &&& .logoImg {\n width: 100%;\n height: 64px;\n }\n }\n"])), devices.mobile);
|
|
3136
|
+
var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 140px;\n\n @media ", " {\n flex-direction: row;\n height: 80px;\n justify-content: flex-end;\n }\n"])), devices.mobileAndTablet);
|
|
3137
|
+
var NavContainer = /*#__PURE__*/styled__default.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 40px;\n margin-top: auto;\n\n @media ", " {\n background-color: var(--base-color-white);\n height: auto;\n margin-top: 0px;\n }\n"])), devices.mobileAndTablet);
|
|
3138
|
+
var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
3139
|
+
var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
|
|
3133
3140
|
|
|
3134
3141
|
var _templateObject$o;
|
|
3135
3142
|
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
|
|
@@ -3583,8 +3590,10 @@ var Tabs = function Tabs(_ref) {
|
|
|
3583
3590
|
};
|
|
3584
3591
|
|
|
3585
3592
|
var onDropdownClick = function onDropdownClick(i, link) {
|
|
3586
|
-
var
|
|
3593
|
+
var isActiveDropdownClicked = i === activeDropdown;
|
|
3594
|
+
var nextActive = isActiveDropdownClicked ? -1 : i;
|
|
3587
3595
|
setActiveDropdown(nextActive);
|
|
3596
|
+
if (isActiveDropdownClicked) setHoverOverDropdown(-1);
|
|
3588
3597
|
if (onChange && link) onChange(link);
|
|
3589
3598
|
};
|
|
3590
3599
|
|
|
@@ -3823,7 +3832,9 @@ var Navigation = function Navigation(_ref) {
|
|
|
3823
3832
|
setshowSearch(false);
|
|
3824
3833
|
};
|
|
3825
3834
|
|
|
3826
|
-
return /*#__PURE__*/React__default.createElement(
|
|
3835
|
+
return /*#__PURE__*/React__default.createElement(NavigationWrapper, {
|
|
3836
|
+
isMenuOpen: showMenu
|
|
3837
|
+
}, showSearch && /*#__PURE__*/React__default.createElement(FullScreenContainer, {
|
|
3827
3838
|
style: {
|
|
3828
3839
|
height: "" + fullScreenHeight
|
|
3829
3840
|
}
|
|
@@ -4154,7 +4165,7 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4154
4165
|
CarouselType["LargeCard"] = "LargeCard";
|
|
4155
4166
|
})(exports.CarouselType || (exports.CarouselType = {}));
|
|
4156
4167
|
|
|
4157
|
-
var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8;
|
|
4168
|
+
var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8, _templateObject5$5;
|
|
4158
4169
|
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (_ref) {
|
|
4159
4170
|
var type = _ref.type,
|
|
4160
4171
|
imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
@@ -4189,7 +4200,8 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_te
|
|
|
4189
4200
|
});
|
|
4190
4201
|
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
4191
4202
|
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n user-select: text;\n\n h4 {\n padding: 0;\n margin: 0;\n }\n"])));
|
|
4192
|
-
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.
|
|
4203
|
+
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4204
|
+
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 2 / span 10;\n }\n }\n"])), devices.tablet);
|
|
4193
4205
|
|
|
4194
4206
|
var Carousel = function Carousel(_ref) {
|
|
4195
4207
|
var children = _ref.children,
|
|
@@ -4260,7 +4272,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
4260
4272
|
type: type,
|
|
4261
4273
|
imagesHeightDevice: imagesHeightDevice,
|
|
4262
4274
|
imagesHeightDesktop: imagesHeightDesktop
|
|
4263
|
-
}, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(
|
|
4275
|
+
}, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(TitleGridItem, {
|
|
4264
4276
|
columnStartDesktop: 3,
|
|
4265
4277
|
columnSpanDesktop: 10,
|
|
4266
4278
|
columnStartDevice: 2,
|
|
@@ -4272,7 +4284,8 @@ var Carousel = function Carousel(_ref) {
|
|
|
4272
4284
|
}, title))), /*#__PURE__*/React__default.createElement(GridItem, {
|
|
4273
4285
|
columnStartDesktop: 14,
|
|
4274
4286
|
columnSpanDesktop: 2,
|
|
4275
|
-
columnStartDevice:
|
|
4287
|
+
columnStartDevice: 12,
|
|
4288
|
+
columnSpanDevice: 2
|
|
4276
4289
|
}, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
|
|
4277
4290
|
"data-testid": "carousel-buttons-wrapper"
|
|
4278
4291
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
@@ -4296,7 +4309,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
4296
4309
|
})))));
|
|
4297
4310
|
};
|
|
4298
4311
|
|
|
4299
|
-
var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$
|
|
4312
|
+
var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$6, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1;
|
|
4300
4313
|
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
4301
4314
|
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n h4 {\n margin: 0;\n padding: 0;\n }\n\n h5 {\n display: none;\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: 40px;\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: var(--line-height-altHeader-5);\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n }\n }\n }\n"])), devices.tablet, function (_ref) {
|
|
4302
4315
|
var theme = _ref.theme;
|
|
@@ -4310,7 +4323,7 @@ var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$j |
|
|
|
4310
4323
|
}, devices.mobile);
|
|
4311
4324
|
var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4312
4325
|
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4313
|
-
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4326
|
+
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n h6 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (_ref4) {
|
|
4314
4327
|
var theme = _ref4.theme;
|
|
4315
4328
|
return theme.fonts.mobile.sizes.headers[3];
|
|
4316
4329
|
}, function (_ref5) {
|
|
@@ -4364,6 +4377,7 @@ var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject7$2 || (_t
|
|
|
4364
4377
|
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swiper-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4365
4378
|
var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
4366
4379
|
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4380
|
+
var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
4367
4381
|
|
|
4368
4382
|
var _excluded$8 = ["text"];
|
|
4369
4383
|
|
|
@@ -4450,7 +4464,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4450
4464
|
tag: "h6"
|
|
4451
4465
|
}, infoSubtitle), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
4452
4466
|
level: 1
|
|
4453
|
-
},
|
|
4467
|
+
}, /*#__PURE__*/React__default.createElement(HtmlBodyText, {
|
|
4468
|
+
dangerouslySetInnerHTML: {
|
|
4469
|
+
__html: description
|
|
4470
|
+
}
|
|
4471
|
+
}))), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
|
|
4454
4472
|
"data-testid": "carousel-wrapper"
|
|
4455
4473
|
}, hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
4456
4474
|
"data-testid": "rotator-buttons"
|
|
@@ -4523,29 +4541,34 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
4523
4541
|
})));
|
|
4524
4542
|
};
|
|
4525
4543
|
|
|
4526
|
-
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a,
|
|
4544
|
+
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject6$6, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2;
|
|
4527
4545
|
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
4528
4546
|
var sticky = _ref.sticky;
|
|
4529
4547
|
return sticky ? 'sticky' : 'initial';
|
|
4530
4548
|
}, zIndexes.anchor);
|
|
4531
|
-
var
|
|
4532
|
-
var
|
|
4533
|
-
var
|
|
4534
|
-
|
|
4535
|
-
|
|
4536
|
-
var
|
|
4537
|
-
|
|
4538
|
-
|
|
4539
|
-
}, function (_ref3) {
|
|
4549
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
4550
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
4551
|
+
var title = _ref2.title;
|
|
4552
|
+
return title ? 'row' : 'row-reverse';
|
|
4553
|
+
}, devices.tablet, devices.mobile);
|
|
4554
|
+
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n height: 50px;\n }\n }\n"])), devices.mobile);
|
|
4555
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4556
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
4557
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
4540
4558
|
var theme = _ref3.theme;
|
|
4541
4559
|
return theme.colors.primaryButtonReverseBg;
|
|
4542
4560
|
}, function (_ref4) {
|
|
4543
4561
|
var theme = _ref4.theme;
|
|
4544
|
-
return theme.colors.
|
|
4562
|
+
return theme.colors.primaryButtonReverseBg;
|
|
4545
4563
|
}, function (_ref5) {
|
|
4546
4564
|
var theme = _ref5.theme;
|
|
4547
4565
|
return theme.colors.primaryButtonReverse;
|
|
4566
|
+
}, function (_ref6) {
|
|
4567
|
+
var theme = _ref6.theme;
|
|
4568
|
+
return theme.colors.primaryButtonReverse;
|
|
4548
4569
|
});
|
|
4570
|
+
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4571
|
+
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
4549
4572
|
|
|
4550
4573
|
var _excluded$b = ["text"],
|
|
4551
4574
|
_excluded2 = ["text"];
|
|
@@ -4554,7 +4577,8 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
4554
4577
|
var title = _ref.title,
|
|
4555
4578
|
links = _ref.links,
|
|
4556
4579
|
_ref$sticky = _ref.sticky,
|
|
4557
|
-
sticky = _ref$sticky === void 0 ? false : _ref$sticky
|
|
4580
|
+
sticky = _ref$sticky === void 0 ? false : _ref$sticky,
|
|
4581
|
+
message = _ref.message;
|
|
4558
4582
|
|
|
4559
4583
|
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
4560
4584
|
primaryButtonText = _ref2.text,
|
|
@@ -4566,22 +4590,19 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
4566
4590
|
|
|
4567
4591
|
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
4568
4592
|
sticky: sticky
|
|
4569
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
4570
|
-
|
|
4571
|
-
|
|
4572
|
-
columnStartDevice: 2,
|
|
4573
|
-
columnSpanDevice: 12
|
|
4574
|
-
}, /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4593
|
+
}, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
|
|
4594
|
+
title: title
|
|
4595
|
+
}, title ? /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4575
4596
|
"data-testid": "anchor-title"
|
|
4576
4597
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
4577
4598
|
level: 5
|
|
4578
|
-
}, title))
|
|
4579
|
-
columnStartDesktop: 12,
|
|
4580
|
-
columnSpanDesktop: 5,
|
|
4581
|
-
columnStartDevice: 2,
|
|
4582
|
-
columnSpanDevice: 12,
|
|
4599
|
+
}, title)) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopWrapper, {
|
|
4583
4600
|
"data-testid": "anchor-ctas"
|
|
4584
|
-
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) :
|
|
4601
|
+
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) : message && /*#__PURE__*/React__default.createElement(MessageWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4602
|
+
level: 6
|
|
4603
|
+
}, message)))), links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText)) : message && /*#__PURE__*/React__default.createElement(MessageWrapperMobile, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4604
|
+
level: 6
|
|
4605
|
+
}, message)));
|
|
4585
4606
|
};
|
|
4586
4607
|
|
|
4587
4608
|
var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$7;
|
|
@@ -4658,7 +4679,7 @@ var Accordions = function Accordions(_ref) {
|
|
|
4658
4679
|
}));
|
|
4659
4680
|
};
|
|
4660
4681
|
|
|
4661
|
-
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$4, _templateObject8$
|
|
4682
|
+
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$4, _templateObject8$4, _templateObject9$3;
|
|
4662
4683
|
var LENGTH_LARGE_TEXT = 28;
|
|
4663
4684
|
var LENGTH_SMALL_TEXT = 19;
|
|
4664
4685
|
var LENGTH_TEXT_TABLET = 10;
|
|
@@ -4675,8 +4696,8 @@ var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$c ||
|
|
|
4675
4696
|
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4676
4697
|
var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
4677
4698
|
var TextContainer = /*#__PURE__*/styled__default.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
4678
|
-
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$
|
|
4679
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
4699
|
+
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
4700
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n opacity: 0;\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref3) {
|
|
4680
4701
|
var size = _ref3.size,
|
|
4681
4702
|
primaryButtonTextLength = _ref3.primaryButtonTextLength,
|
|
4682
4703
|
tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
|
|
@@ -5006,9 +5027,9 @@ var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$I || (_temp
|
|
|
5006
5027
|
return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
|
|
5007
5028
|
});
|
|
5008
5029
|
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . . logo logo logo logo . . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . . logo logo logo logo logo logo . . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. . . . . logo logo logo logo . . . . .'\n '. text text text text text text text text text text text text .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5009
|
-
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.
|
|
5030
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
5010
5031
|
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5011
|
-
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(3 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(3 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-
|
|
5032
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(3 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(3 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5012
5033
|
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
5013
5034
|
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5014
5035
|
|