@royaloperahouse/chord 0.7.1 → 0.7.5
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 +13 -0
- package/README.md +1 -1
- package/dist/chord.cjs.development.js +226 -225
- 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 +227 -227
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/index.d.ts +2 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/index.d.ts +2 -2
- package/package.json +1 -1
package/dist/chord.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { createElement, memo,
|
|
1
|
+
import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, useMemo } from 'react';
|
|
2
2
|
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
|
|
4
4
|
import 'swiper/swiper-bundle.css';
|
|
@@ -2190,8 +2190,175 @@ var CinemaBadge = function CinemaBadge(_ref) {
|
|
|
2190
2190
|
}))));
|
|
2191
2191
|
};
|
|
2192
2192
|
|
|
2193
|
-
var
|
|
2194
|
-
var
|
|
2193
|
+
var zLevels = ['base', 'content', 'contentOverlay', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
|
|
2194
|
+
var zIndexes = {};
|
|
2195
|
+
zLevels.forEach(function (name, index) {
|
|
2196
|
+
zIndexes[name] = index;
|
|
2197
|
+
});
|
|
2198
|
+
|
|
2199
|
+
var _templateObject$9, _templateObject2$1, _templateObject3;
|
|
2200
|
+
var TabContainer = /*#__PURE__*/styled.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
2201
|
+
var OptionItem = /*#__PURE__*/styled.a(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n text-transform: uppercase;\n\n :hover,\n :focus {\n color: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2202
|
+
var colorPrimary = _ref.colorPrimary;
|
|
2203
|
+
return colorPrimary;
|
|
2204
|
+
});
|
|
2205
|
+
var OptionsContainer = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n border: 1px solid var(--base-color-light-grey);\n border-top-color: var(--base-color-", ");\n display: flex;\n flex-direction: column;\n row-gap: var(--navigation-small-gap);\n padding: var(--navigation-middle-gap);\n position: absolute;\n top: 24px;\n min-width: calc(100% - calc(2 * var(--navigation-middle-gap)));\n max-width: max-content;\n white-space: nowrap;\n z-index: ", ";\n\n ", "\n\n @media ", " {\n padding-left: 0px;\n padding-bottom: 0px;\n row-gap: var(--navigation-large-gap);\n border: 0;\n background-color: none;\n\n ", "\n }\n"])), function (_ref2) {
|
|
2206
|
+
var colorPrimary = _ref2.colorPrimary;
|
|
2207
|
+
return colorPrimary;
|
|
2208
|
+
}, zIndexes.menu, function (props) {
|
|
2209
|
+
if (props.withIcon === 'none') {
|
|
2210
|
+
return "\n top: 21px;\n ";
|
|
2211
|
+
}
|
|
2212
|
+
|
|
2213
|
+
return "";
|
|
2214
|
+
}, devices.mobileAndTablet, function (props) {
|
|
2215
|
+
if (props.withOptionsInMobile) {
|
|
2216
|
+
return "\n position: relative;\n top: 0px;\n ";
|
|
2217
|
+
}
|
|
2218
|
+
|
|
2219
|
+
return "\n display: none;\n ";
|
|
2220
|
+
});
|
|
2221
|
+
|
|
2222
|
+
var _templateObject$a, _templateObject2$2, _templateObject3$1, _templateObject4;
|
|
2223
|
+
var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
|
|
2224
|
+
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 6px;\n border-bottom: 1px solid transparent;\n height: 24px;\n line-height: 24px;\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n text-transform: uppercase;\n cursor: pointer;\n\n ", "\n"])), function (_ref) {
|
|
2225
|
+
var active = _ref.active,
|
|
2226
|
+
activeColor = _ref.activeColor;
|
|
2227
|
+
|
|
2228
|
+
if (active) {
|
|
2229
|
+
return "\n & {\n border-bottom: 1px solid " + activeColor + ";\n color: var(--base-color-" + activeColor + ");\n }\n && svg path {\n fill: var(--base-color-" + activeColor + ");\n } \n ";
|
|
2230
|
+
} else {
|
|
2231
|
+
return '';
|
|
2232
|
+
}
|
|
2233
|
+
});
|
|
2234
|
+
var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled(ControlledDropdownHeaderContainer).attrs({
|
|
2235
|
+
as: 'a'
|
|
2236
|
+
})(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
2237
|
+
var IconWrapper = /*#__PURE__*/styled.span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n"])));
|
|
2238
|
+
|
|
2239
|
+
var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
2240
|
+
var text = _ref.text,
|
|
2241
|
+
options = _ref.options,
|
|
2242
|
+
_ref$activeColor = _ref.activeColor,
|
|
2243
|
+
activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor,
|
|
2244
|
+
active = _ref.active,
|
|
2245
|
+
onClick = _ref.onClick,
|
|
2246
|
+
onOptionClick = _ref.onOptionClick,
|
|
2247
|
+
_onMouseEnter = _ref.onMouseEnter,
|
|
2248
|
+
_onMouseLeave = _ref.onMouseLeave,
|
|
2249
|
+
onReset = _ref.onReset,
|
|
2250
|
+
_onFocus = _ref.onFocus,
|
|
2251
|
+
_onBlur = _ref.onBlur;
|
|
2252
|
+
var ref = useRef();
|
|
2253
|
+
var resetHandler = useCallback(function () {
|
|
2254
|
+
return onReset == null ? void 0 : onReset();
|
|
2255
|
+
}, []);
|
|
2256
|
+
useEffect(function () {
|
|
2257
|
+
if (window.innerWidth > breakpoints.sm) {
|
|
2258
|
+
var mouseClickHandler = function mouseClickHandler(e) {
|
|
2259
|
+
var _ref$current;
|
|
2260
|
+
|
|
2261
|
+
if (ref != null && (_ref$current = ref.current) != null && _ref$current.contains(e.target)) {
|
|
2262
|
+
return;
|
|
2263
|
+
} else if (active) {
|
|
2264
|
+
resetHandler();
|
|
2265
|
+
}
|
|
2266
|
+
};
|
|
2267
|
+
|
|
2268
|
+
document.addEventListener('click', mouseClickHandler);
|
|
2269
|
+
return function () {
|
|
2270
|
+
document.removeEventListener('click', mouseClickHandler);
|
|
2271
|
+
};
|
|
2272
|
+
}
|
|
2273
|
+
|
|
2274
|
+
return;
|
|
2275
|
+
}, [ref, resetHandler, active]);
|
|
2276
|
+
|
|
2277
|
+
var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
|
|
2278
|
+
if (e.key === 'Enter') {
|
|
2279
|
+
onOptionClick == null ? void 0 : onOptionClick(link);
|
|
2280
|
+
} else if (e.key === 'Escape') {
|
|
2281
|
+
resetHandler();
|
|
2282
|
+
}
|
|
2283
|
+
};
|
|
2284
|
+
|
|
2285
|
+
var handleHeaderKeyDown = function handleHeaderKeyDown(e) {
|
|
2286
|
+
if (e.key === 'Enter') {
|
|
2287
|
+
onClick == null ? void 0 : onClick();
|
|
2288
|
+
} else if (e.key === 'Escape') {
|
|
2289
|
+
resetHandler();
|
|
2290
|
+
}
|
|
2291
|
+
};
|
|
2292
|
+
|
|
2293
|
+
var handleOptionBlur = function handleOptionBlur(i) {
|
|
2294
|
+
if (i === ((options == null ? void 0 : options.length) || 0) - 1) {
|
|
2295
|
+
_onBlur == null ? void 0 : _onBlur();
|
|
2296
|
+
}
|
|
2297
|
+
};
|
|
2298
|
+
|
|
2299
|
+
var isDropdown = !!(options != null && options.length);
|
|
2300
|
+
var wrapperEvents = {
|
|
2301
|
+
onMouseEnter: function onMouseEnter() {
|
|
2302
|
+
return _onMouseEnter == null ? void 0 : _onMouseEnter();
|
|
2303
|
+
},
|
|
2304
|
+
onMouseLeave: function onMouseLeave() {
|
|
2305
|
+
return _onMouseLeave == null ? void 0 : _onMouseLeave();
|
|
2306
|
+
}
|
|
2307
|
+
};
|
|
2308
|
+
var headerEvents = {
|
|
2309
|
+
onMouseDown: function onMouseDown(e) {
|
|
2310
|
+
e.preventDefault();
|
|
2311
|
+
onClick == null ? void 0 : onClick();
|
|
2312
|
+
},
|
|
2313
|
+
onFocus: function onFocus() {
|
|
2314
|
+
return _onFocus == null ? void 0 : _onFocus();
|
|
2315
|
+
},
|
|
2316
|
+
onBlur: function onBlur() {
|
|
2317
|
+
return !isDropdown && (_onBlur == null ? void 0 : _onBlur());
|
|
2318
|
+
},
|
|
2319
|
+
onKeyDown: handleHeaderKeyDown
|
|
2320
|
+
};
|
|
2321
|
+
return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
|
|
2322
|
+
ref: ref
|
|
2323
|
+
}, wrapperEvents), isDropdown ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
|
|
2324
|
+
active: active,
|
|
2325
|
+
activeColor: activeColor
|
|
2326
|
+
}, headerEvents, {
|
|
2327
|
+
tabIndex: 0,
|
|
2328
|
+
"data-testid": "span-container"
|
|
2329
|
+
}), text, /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2330
|
+
"data-testid": "dropdown-icon"
|
|
2331
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
2332
|
+
iconName: "DropdownArrow"
|
|
2333
|
+
}))), active && options ? /*#__PURE__*/React__default.createElement(OptionsContainer, {
|
|
2334
|
+
colorPrimary: activeColor,
|
|
2335
|
+
withOptionsInMobile: true
|
|
2336
|
+
}, options.map(function (optionItem, index) {
|
|
2337
|
+
return /*#__PURE__*/React__default.createElement(OptionItem, {
|
|
2338
|
+
key: "key-" + index + "-" + optionItem.option,
|
|
2339
|
+
onClick: function onClick() {
|
|
2340
|
+
return onOptionClick == null ? void 0 : onOptionClick(optionItem.optionLink);
|
|
2341
|
+
},
|
|
2342
|
+
onKeyDown: function onKeyDown(e) {
|
|
2343
|
+
return handleOptionKeyDown(e, optionItem.optionLink);
|
|
2344
|
+
},
|
|
2345
|
+
colorPrimary: activeColor,
|
|
2346
|
+
tabIndex: 0,
|
|
2347
|
+
onBlur: function onBlur() {
|
|
2348
|
+
return handleOptionBlur(index);
|
|
2349
|
+
}
|
|
2350
|
+
}, optionItem.option);
|
|
2351
|
+
})) : null) : /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
|
|
2352
|
+
active: active,
|
|
2353
|
+
activeColor: activeColor
|
|
2354
|
+
}, headerEvents, {
|
|
2355
|
+
"data-testid": "link-container",
|
|
2356
|
+
tabIndex: 0
|
|
2357
|
+
}), text));
|
|
2358
|
+
};
|
|
2359
|
+
|
|
2360
|
+
var _templateObject$b;
|
|
2361
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2195
2362
|
var fillColor = _ref.fillColor;
|
|
2196
2363
|
return fillColor;
|
|
2197
2364
|
});
|
|
@@ -2215,8 +2382,8 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
2215
2382
|
})));
|
|
2216
2383
|
};
|
|
2217
2384
|
|
|
2218
|
-
var _templateObject$
|
|
2219
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
2385
|
+
var _templateObject$c;
|
|
2386
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
|
|
2220
2387
|
|
|
2221
2388
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
2222
2389
|
var _ref$colorLogo = _ref.colorLogo,
|
|
@@ -2426,11 +2593,11 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
2426
2593
|
})))));
|
|
2427
2594
|
};
|
|
2428
2595
|
|
|
2429
|
-
var _templateObject$
|
|
2596
|
+
var _templateObject$d;
|
|
2430
2597
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/rolex.html?size=80';
|
|
2431
2598
|
var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
|
|
2432
2599
|
var DEFAULT_DATA_ROH = 'ImgAdvert';
|
|
2433
|
-
var SponsorshipStyled = /*#__PURE__*/styled.div(_templateObject$
|
|
2600
|
+
var SponsorshipStyled = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: transparent;\n height: 80px;\n margin: 0px;\n overflow: hidden;\n padding: 0;\n width: 80px;\n\n & > iframe {\n border: 0;\n display: block;\n margin: 0px;\n padding: 0px;\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n @media ", " {\n & {\n height: 40px;\n width: 40px;\n }\n & iframe {\n height: 80px;\n transform: scale(0.5) translate(-40px, -40px);\n width: 80px;\n }\n }\n"])), devices.mobile);
|
|
2434
2601
|
|
|
2435
2602
|
var Sponsorship = function Sponsorship(_ref) {
|
|
2436
2603
|
var _ref$src = _ref.src,
|
|
@@ -2448,9 +2615,9 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
2448
2615
|
}));
|
|
2449
2616
|
};
|
|
2450
2617
|
|
|
2451
|
-
var _templateObject$
|
|
2452
|
-
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
2453
|
-
var Splitter = /*#__PURE__*/styled.div(_templateObject2$
|
|
2618
|
+
var _templateObject$e, _templateObject2$3;
|
|
2619
|
+
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
2620
|
+
var Splitter = /*#__PURE__*/styled.div(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--base-color-lightgrey);\n"])));
|
|
2454
2621
|
|
|
2455
2622
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
2456
2623
|
var _ref$fullWidth = _ref.fullWidth,
|
|
@@ -2495,8 +2662,8 @@ var AspectRatioWidth;
|
|
|
2495
2662
|
AspectRatioWidth["16 / 9"] = "1.78";
|
|
2496
2663
|
})(AspectRatioWidth || (AspectRatioWidth = {}));
|
|
2497
2664
|
|
|
2498
|
-
var _templateObject$
|
|
2499
|
-
var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
2665
|
+
var _templateObject$f;
|
|
2666
|
+
var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n position: relative;\n width: 100%;\n padding-top: ", "%;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
2500
2667
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
2501
2668
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
2502
2669
|
return aspectRatio;
|
|
@@ -2514,8 +2681,8 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$d || (_tem
|
|
|
2514
2681
|
return aspectRatio;
|
|
2515
2682
|
});
|
|
2516
2683
|
|
|
2517
|
-
var _templateObject$
|
|
2518
|
-
var TabText = /*#__PURE__*/styled.a(_templateObject$
|
|
2684
|
+
var _templateObject$g, _templateObject2$4;
|
|
2685
|
+
var TabText = /*#__PURE__*/styled.a(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n margin-right: 0px;\n margin-top: 5px;\n text-decoration: none;\n text-transform: uppercase;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (props) {
|
|
2519
2686
|
if (props.withIcon === 'left') {
|
|
2520
2687
|
return "margin-left: 5px;";
|
|
2521
2688
|
}
|
|
@@ -2528,7 +2695,7 @@ var TabText = /*#__PURE__*/styled.a(_templateObject$e || (_templateObject$e = /*
|
|
|
2528
2695
|
|
|
2529
2696
|
return "";
|
|
2530
2697
|
});
|
|
2531
|
-
var TitleContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
2698
|
+
var TitleContainer = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n border-bottom: 1px solid transparent;\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n ", "\n\n ", "\n\n @media ", " {\n svg {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (props) {
|
|
2532
2699
|
if (props.withIcon === 'left') {
|
|
2533
2700
|
return "\n flex-direction: row-reverse;\n svg {\n margin-right: 6px;\n }";
|
|
2534
2701
|
}
|
|
@@ -2614,8 +2781,8 @@ var Tab = function Tab(_ref) {
|
|
|
2614
2781
|
}));
|
|
2615
2782
|
};
|
|
2616
2783
|
|
|
2617
|
-
var _templateObject$
|
|
2618
|
-
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
2784
|
+
var _templateObject$h, _templateObject2$5;
|
|
2785
|
+
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n font-family: var(--font-family-navigation);\n font-size: var(--font-size-navigation);\n font-weight: var(--font-weight-navigation);\n line-height: var(--line-height-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n text-transform: var(--text-transform-navigation);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n ", "\n\n @media ", ", ", " {\n &:hover {\n color: var(--base-color-", ");\n border-bottom: 1px solid var(--base-color-", ");\n\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), function (_ref) {
|
|
2619
2786
|
var iconName = _ref.iconName;
|
|
2620
2787
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
|
|
2621
2788
|
}, function (_ref2) {
|
|
@@ -2641,7 +2808,7 @@ var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$f || (_templateObject
|
|
|
2641
2808
|
var hoverColor = _ref7.hoverColor;
|
|
2642
2809
|
return hoverColor;
|
|
2643
2810
|
});
|
|
2644
|
-
var TabLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$
|
|
2811
|
+
var TabLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n"])));
|
|
2645
2812
|
|
|
2646
2813
|
var _excluded$4 = ["children", "iconName", "iconDirection", "color", "hoverColor"];
|
|
2647
2814
|
|
|
@@ -2668,15 +2835,15 @@ var TabLink = function TabLink(_ref) {
|
|
|
2668
2835
|
})) : null, children);
|
|
2669
2836
|
};
|
|
2670
2837
|
|
|
2671
|
-
var _templateObject$
|
|
2672
|
-
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
2838
|
+
var _templateObject$i, _templateObject2$6;
|
|
2839
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
|
|
2673
2840
|
var iconName = _ref.iconName;
|
|
2674
2841
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
2675
2842
|
}, function (_ref2) {
|
|
2676
2843
|
var color = _ref2.color;
|
|
2677
2844
|
return color;
|
|
2678
2845
|
});
|
|
2679
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$
|
|
2846
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
2680
2847
|
|
|
2681
2848
|
var _excluded$5 = ["children", "iconName", "iconDirection", "color"];
|
|
2682
2849
|
|
|
@@ -2700,8 +2867,8 @@ var TextLink = function TextLink(_ref) {
|
|
|
2700
2867
|
})) : null);
|
|
2701
2868
|
};
|
|
2702
2869
|
|
|
2703
|
-
var _templateObject$
|
|
2704
|
-
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
2870
|
+
var _templateObject$j;
|
|
2871
|
+
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n"])), function (_ref) {
|
|
2705
2872
|
var typography = _ref.typography;
|
|
2706
2873
|
return typography;
|
|
2707
2874
|
}, function (_ref2) {
|
|
@@ -2807,16 +2974,16 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
2807
2974
|
}, children);
|
|
2808
2975
|
};
|
|
2809
2976
|
|
|
2810
|
-
var _templateObject$
|
|
2811
|
-
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject$
|
|
2977
|
+
var _templateObject$k, _templateObject2$7, _templateObject3$2;
|
|
2978
|
+
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(--base-color-", ");\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n"])), function (_ref) {
|
|
2812
2979
|
var dark = _ref.dark;
|
|
2813
2980
|
return dark ? 'white' : 'black';
|
|
2814
2981
|
});
|
|
2815
|
-
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject2$
|
|
2982
|
+
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid var(--base-color-", ");\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref2) {
|
|
2816
2983
|
var dark = _ref2.dark;
|
|
2817
2984
|
return dark ? 'white' : 'black';
|
|
2818
2985
|
}, devices.mobile);
|
|
2819
|
-
var TickboxInput = /*#__PURE__*/styled.input(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n\n &:checked ~ ", " {\n background-color: var(--base-color-", ");\n & svg {\n display: block;\n path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), TickboxCheckmark, function (_ref3) {
|
|
2986
|
+
var TickboxInput = /*#__PURE__*/styled.input(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n\n &:checked ~ ", " {\n background-color: var(--base-color-", ");\n & svg {\n display: block;\n path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), TickboxCheckmark, function (_ref3) {
|
|
2820
2987
|
var dark = _ref3.dark;
|
|
2821
2988
|
return dark ? 'white' : 'black';
|
|
2822
2989
|
}, function (_ref4) {
|
|
@@ -2868,8 +3035,8 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
2868
3035
|
})));
|
|
2869
3036
|
};
|
|
2870
3037
|
|
|
2871
|
-
var _templateObject$
|
|
2872
|
-
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$
|
|
3038
|
+
var _templateObject$l;
|
|
3039
|
+
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n & li {\n color: var(--base-color-black);\n display: inline-block;\n margin: 0;\n }\n\n & li:before {\n content: '\u2014';\n margin: 0 0.5em;\n }\n\n & li:first-child:before {\n display: none;\n }\n"])));
|
|
2873
3040
|
|
|
2874
3041
|
var TypeTags = function TypeTags(_ref) {
|
|
2875
3042
|
var list = _ref.list;
|
|
@@ -2882,13 +3049,13 @@ var TypeTags = function TypeTags(_ref) {
|
|
|
2882
3049
|
}));
|
|
2883
3050
|
};
|
|
2884
3051
|
|
|
2885
|
-
var _templateObject$
|
|
2886
|
-
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
2887
|
-
var IconWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
3052
|
+
var _templateObject$m, _templateObject2$8, _templateObject3$3;
|
|
3053
|
+
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3054
|
+
var IconWrapper$1 = /*#__PURE__*/styled.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) {
|
|
2888
3055
|
var theme = _ref.theme;
|
|
2889
3056
|
return theme.colors.primary;
|
|
2890
3057
|
}, devices.mobileAndTablet);
|
|
2891
|
-
var IconUnavailableWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
3058
|
+
var IconUnavailableWrapper = /*#__PURE__*/styled.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.mobileAndTablet);
|
|
2892
3059
|
|
|
2893
3060
|
var RotatorButtons = function RotatorButtons(_ref) {
|
|
2894
3061
|
var onClickPrev = _ref.onClickPrev,
|
|
@@ -2935,14 +3102,14 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
2935
3102
|
});
|
|
2936
3103
|
};
|
|
2937
3104
|
|
|
2938
|
-
return /*#__PURE__*/React__default.createElement(ButtonsContainer, null, availablePrev ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
3105
|
+
return /*#__PURE__*/React__default.createElement(ButtonsContainer, null, availablePrev ? /*#__PURE__*/React__default.createElement(IconWrapper$1, {
|
|
2939
3106
|
onClick: onClickLeftHandler,
|
|
2940
3107
|
onKeyDown: onPrevKeyDownHandler,
|
|
2941
3108
|
tabIndex: 0,
|
|
2942
3109
|
"data-testid": "iconprev"
|
|
2943
3110
|
}, renderPrevIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2944
3111
|
"data-testid": "iconprevnoavailable"
|
|
2945
|
-
}, renderPrevIcon()), availableNext ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
3112
|
+
}, renderPrevIcon()), availableNext ? /*#__PURE__*/React__default.createElement(IconWrapper$1, {
|
|
2946
3113
|
onClick: onClickRightHandler,
|
|
2947
3114
|
onKeyDown: onNextKeyDownHandler,
|
|
2948
3115
|
tabIndex: 0,
|
|
@@ -2952,17 +3119,11 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
2952
3119
|
}, renderNextIcon()));
|
|
2953
3120
|
};
|
|
2954
3121
|
|
|
2955
|
-
var
|
|
2956
|
-
var
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
});
|
|
2960
|
-
|
|
2961
|
-
var _templateObject$l, _templateObject2$7, _templateObject3$2, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
2962
|
-
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject$l || (_templateObject$l = /*#__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);
|
|
2963
|
-
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject2$7 || (_templateObject2$7 = /*#__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);
|
|
2964
|
-
var SearchBackground = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__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);
|
|
2965
|
-
var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject4 || (_templateObject4 = /*#__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);
|
|
3122
|
+
var _templateObject$n, _templateObject2$9, _templateObject3$4, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
3123
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__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);
|
|
3124
|
+
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject2$9 || (_templateObject2$9 = /*#__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);
|
|
3125
|
+
var SearchBackground = /*#__PURE__*/styled.div(_templateObject3$4 || (_templateObject3$4 = /*#__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);
|
|
3126
|
+
var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject4$1 || (_templateObject4$1 = /*#__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);
|
|
2966
3127
|
var NavigationGridMobile = /*#__PURE__*/styled(Grid)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n background-color: var(--base-color-white);\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet);
|
|
2967
3128
|
var LogoContainer = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__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);
|
|
2968
3129
|
var MenuContainer = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__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);
|
|
@@ -2970,8 +3131,8 @@ var NavContainer = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8
|
|
|
2970
3131
|
var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
2971
3132
|
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__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);
|
|
2972
3133
|
|
|
2973
|
-
var _templateObject$
|
|
2974
|
-
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3134
|
+
var _templateObject$o;
|
|
3135
|
+
var LogoWrapper = /*#__PURE__*/styled.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"])));
|
|
2975
3136
|
|
|
2976
3137
|
var Logo = function Logo(_ref) {
|
|
2977
3138
|
var _ref$id = _ref.id,
|
|
@@ -3000,11 +3161,11 @@ var Logo = function Logo(_ref) {
|
|
|
3000
3161
|
}))));
|
|
3001
3162
|
};
|
|
3002
3163
|
|
|
3003
|
-
var _templateObject$
|
|
3004
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
3164
|
+
var _templateObject$p;
|
|
3165
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 26px;\n\n @media ", " {\n column-gap: 8px;\n }\n"])), devices.mobile);
|
|
3005
3166
|
|
|
3006
|
-
var _templateObject$
|
|
3007
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3167
|
+
var _templateObject$q, _templateObject2$a, _templateObject3$5, _templateObject4$2;
|
|
3168
|
+
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
3008
3169
|
var selected = _ref.selected,
|
|
3009
3170
|
colorPrimary = _ref.colorPrimary;
|
|
3010
3171
|
|
|
@@ -3023,9 +3184,9 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$o || (_templateObj
|
|
|
3023
3184
|
var colorPrimary = _ref4.colorPrimary;
|
|
3024
3185
|
return colorPrimary;
|
|
3025
3186
|
});
|
|
3026
|
-
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
3027
|
-
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
3028
|
-
var BasketText = /*#__PURE__*/styled.a(_templateObject4$
|
|
3187
|
+
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
3188
|
+
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n\n & .basket-num {\n color: white;\n font-size: 10px;\n font-family: var(--font-family-navigation);\n }\n"])));
|
|
3189
|
+
var BasketText = /*#__PURE__*/styled.a(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n color: var(--base-color-black);\n margin-left: 6px;\n text-decoration: none;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
3029
3190
|
|
|
3030
3191
|
var Basket$1 = function Basket(_ref) {
|
|
3031
3192
|
var text = _ref.text,
|
|
@@ -3067,8 +3228,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
3067
3228
|
}, text) : ''));
|
|
3068
3229
|
};
|
|
3069
3230
|
|
|
3070
|
-
var _templateObject$
|
|
3071
|
-
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3231
|
+
var _templateObject$r, _templateObject2$b;
|
|
3232
|
+
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
3072
3233
|
var selected = _ref.selected,
|
|
3073
3234
|
colorPrimary = _ref.colorPrimary;
|
|
3074
3235
|
|
|
@@ -3084,7 +3245,7 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$p || (_templateObj
|
|
|
3084
3245
|
var colorPrimary = _ref3.colorPrimary;
|
|
3085
3246
|
return colorPrimary;
|
|
3086
3247
|
});
|
|
3087
|
-
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
3248
|
+
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
3088
3249
|
|
|
3089
3250
|
var Search$1 = function Search(_ref) {
|
|
3090
3251
|
var _ref$selected = _ref.selected,
|
|
@@ -3111,29 +3272,6 @@ var Search$1 = function Search(_ref) {
|
|
|
3111
3272
|
})));
|
|
3112
3273
|
};
|
|
3113
3274
|
|
|
3114
|
-
var _templateObject$q, _templateObject2$a, _templateObject3$4;
|
|
3115
|
-
var TabContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
3116
|
-
var OptionItem = /*#__PURE__*/styled.a(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n text-transform: uppercase;\n\n :hover,\n :focus {\n color: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3117
|
-
var colorPrimary = _ref.colorPrimary;
|
|
3118
|
-
return colorPrimary;
|
|
3119
|
-
});
|
|
3120
|
-
var OptionsContainer = /*#__PURE__*/styled.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n border: 1px solid var(--base-color-light-grey);\n border-top-color: var(--base-color-", ");\n display: flex;\n flex-direction: column;\n row-gap: var(--navigation-small-gap);\n padding: var(--navigation-middle-gap);\n position: absolute;\n top: 24px;\n min-width: calc(100% - calc(2 * var(--navigation-middle-gap)));\n max-width: max-content;\n white-space: nowrap;\n z-index: ", ";\n\n ", "\n\n @media ", " {\n padding-left: 0px;\n padding-bottom: 0px;\n row-gap: var(--navigation-large-gap);\n border: 0;\n background-color: none;\n\n ", "\n }\n"])), function (_ref2) {
|
|
3121
|
-
var colorPrimary = _ref2.colorPrimary;
|
|
3122
|
-
return colorPrimary;
|
|
3123
|
-
}, zIndexes.menu, function (props) {
|
|
3124
|
-
if (props.withIcon === 'none') {
|
|
3125
|
-
return "\n top: 21px;\n ";
|
|
3126
|
-
}
|
|
3127
|
-
|
|
3128
|
-
return "";
|
|
3129
|
-
}, devices.mobileAndTablet, function (props) {
|
|
3130
|
-
if (props.withOptionsInMobile) {
|
|
3131
|
-
return "\n position: relative;\n top: 0px;\n ";
|
|
3132
|
-
}
|
|
3133
|
-
|
|
3134
|
-
return "\n display: none;\n ";
|
|
3135
|
-
});
|
|
3136
|
-
|
|
3137
3275
|
var Dropdown = function Dropdown(_ref) {
|
|
3138
3276
|
var title = _ref.title,
|
|
3139
3277
|
titleLink = _ref.titleLink,
|
|
@@ -3376,161 +3514,23 @@ var NavTop = function NavTop(_ref) {
|
|
|
3376
3514
|
}));
|
|
3377
3515
|
};
|
|
3378
3516
|
|
|
3379
|
-
var _templateObject$
|
|
3380
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3381
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
3517
|
+
var _templateObject$s, _templateObject2$c, _templateObject3$6, _templateObject4$3;
|
|
3518
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
3519
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.mobileAndTablet, function (props) {
|
|
3382
3520
|
if (props.showMenu) {
|
|
3383
3521
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
3384
3522
|
}
|
|
3385
3523
|
|
|
3386
3524
|
return "display: none;";
|
|
3387
3525
|
});
|
|
3388
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
3526
|
+
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--base-color-", ");\n }\n }\n\n :hover {\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), function (_ref) {
|
|
3389
3527
|
var colorPrimary = _ref.colorPrimary;
|
|
3390
3528
|
return colorPrimary;
|
|
3391
3529
|
}, function (_ref2) {
|
|
3392
3530
|
var colorPrimary = _ref2.colorPrimary;
|
|
3393
3531
|
return colorPrimary;
|
|
3394
3532
|
}, devices.mobileAndTablet);
|
|
3395
|
-
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$
|
|
3396
|
-
|
|
3397
|
-
var _templateObject$s, _templateObject2$c, _templateObject3$6, _templateObject4$3;
|
|
3398
|
-
var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
|
|
3399
|
-
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 6px;\n border-bottom: 1px solid transparent;\n height: 24px;\n line-height: 24px;\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n text-transform: uppercase;\n cursor: pointer;\n\n ", "\n"])), function (_ref) {
|
|
3400
|
-
var active = _ref.active,
|
|
3401
|
-
activeColor = _ref.activeColor;
|
|
3402
|
-
|
|
3403
|
-
if (active) {
|
|
3404
|
-
return "\n & {\n border-bottom: 1px solid " + activeColor + ";\n color: var(--base-color-" + activeColor + ");\n }\n && svg path {\n fill: var(--base-color-" + activeColor + ");\n } \n ";
|
|
3405
|
-
} else {
|
|
3406
|
-
return '';
|
|
3407
|
-
}
|
|
3408
|
-
});
|
|
3409
|
-
var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled(ControlledDropdownHeaderContainer).attrs({
|
|
3410
|
-
as: 'a'
|
|
3411
|
-
})(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
3412
|
-
var IconWrapper$1 = /*#__PURE__*/styled.span(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n"])));
|
|
3413
|
-
|
|
3414
|
-
var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
3415
|
-
var text = _ref.text,
|
|
3416
|
-
options = _ref.options,
|
|
3417
|
-
_ref$activeColor = _ref.activeColor,
|
|
3418
|
-
activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor,
|
|
3419
|
-
active = _ref.active,
|
|
3420
|
-
onClick = _ref.onClick,
|
|
3421
|
-
onOptionClick = _ref.onOptionClick,
|
|
3422
|
-
_onMouseEnter = _ref.onMouseEnter,
|
|
3423
|
-
_onMouseLeave = _ref.onMouseLeave,
|
|
3424
|
-
onReset = _ref.onReset,
|
|
3425
|
-
_onFocus = _ref.onFocus,
|
|
3426
|
-
_onBlur = _ref.onBlur;
|
|
3427
|
-
var ref = useRef();
|
|
3428
|
-
var resetHandler = useCallback(function () {
|
|
3429
|
-
return onReset == null ? void 0 : onReset();
|
|
3430
|
-
}, []);
|
|
3431
|
-
useEffect(function () {
|
|
3432
|
-
if (window.innerWidth > breakpoints.sm) {
|
|
3433
|
-
var mouseClickHandler = function mouseClickHandler(e) {
|
|
3434
|
-
var _ref$current;
|
|
3435
|
-
|
|
3436
|
-
if (ref != null && (_ref$current = ref.current) != null && _ref$current.contains(e.target)) {
|
|
3437
|
-
return;
|
|
3438
|
-
} else if (active) {
|
|
3439
|
-
resetHandler();
|
|
3440
|
-
}
|
|
3441
|
-
};
|
|
3442
|
-
|
|
3443
|
-
document.addEventListener('click', mouseClickHandler);
|
|
3444
|
-
return function () {
|
|
3445
|
-
document.removeEventListener('click', mouseClickHandler);
|
|
3446
|
-
};
|
|
3447
|
-
}
|
|
3448
|
-
|
|
3449
|
-
return;
|
|
3450
|
-
}, [ref, resetHandler, active]);
|
|
3451
|
-
|
|
3452
|
-
var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
|
|
3453
|
-
if (e.key === 'Enter') {
|
|
3454
|
-
onOptionClick == null ? void 0 : onOptionClick(link);
|
|
3455
|
-
} else if (e.key === 'Escape') {
|
|
3456
|
-
resetHandler();
|
|
3457
|
-
}
|
|
3458
|
-
};
|
|
3459
|
-
|
|
3460
|
-
var handleHeaderKeyDown = function handleHeaderKeyDown(e) {
|
|
3461
|
-
if (e.key === 'Enter') {
|
|
3462
|
-
onClick == null ? void 0 : onClick();
|
|
3463
|
-
} else if (e.key === 'Escape') {
|
|
3464
|
-
resetHandler();
|
|
3465
|
-
}
|
|
3466
|
-
};
|
|
3467
|
-
|
|
3468
|
-
var handleOptionBlur = function handleOptionBlur(i) {
|
|
3469
|
-
if (i === ((options == null ? void 0 : options.length) || 0) - 1) {
|
|
3470
|
-
_onBlur == null ? void 0 : _onBlur();
|
|
3471
|
-
}
|
|
3472
|
-
};
|
|
3473
|
-
|
|
3474
|
-
var isDropdown = !!(options != null && options.length);
|
|
3475
|
-
var wrapperEvents = {
|
|
3476
|
-
onMouseEnter: function onMouseEnter() {
|
|
3477
|
-
return _onMouseEnter == null ? void 0 : _onMouseEnter();
|
|
3478
|
-
},
|
|
3479
|
-
onMouseLeave: function onMouseLeave() {
|
|
3480
|
-
return _onMouseLeave == null ? void 0 : _onMouseLeave();
|
|
3481
|
-
}
|
|
3482
|
-
};
|
|
3483
|
-
var headerEvents = {
|
|
3484
|
-
onMouseDown: function onMouseDown(e) {
|
|
3485
|
-
e.preventDefault();
|
|
3486
|
-
onClick == null ? void 0 : onClick();
|
|
3487
|
-
},
|
|
3488
|
-
onFocus: function onFocus() {
|
|
3489
|
-
return _onFocus == null ? void 0 : _onFocus();
|
|
3490
|
-
},
|
|
3491
|
-
onBlur: function onBlur() {
|
|
3492
|
-
return !isDropdown && (_onBlur == null ? void 0 : _onBlur());
|
|
3493
|
-
},
|
|
3494
|
-
onKeyDown: handleHeaderKeyDown
|
|
3495
|
-
};
|
|
3496
|
-
return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
|
|
3497
|
-
ref: ref
|
|
3498
|
-
}, wrapperEvents), isDropdown ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
|
|
3499
|
-
active: active,
|
|
3500
|
-
activeColor: activeColor
|
|
3501
|
-
}, headerEvents, {
|
|
3502
|
-
tabIndex: 0,
|
|
3503
|
-
"data-testid": "span-container"
|
|
3504
|
-
}), text, /*#__PURE__*/React__default.createElement(IconWrapper$1, {
|
|
3505
|
-
"data-testid": "dropdown-icon"
|
|
3506
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
3507
|
-
iconName: "DropdownArrow"
|
|
3508
|
-
}))), active && options ? /*#__PURE__*/React__default.createElement(OptionsContainer, {
|
|
3509
|
-
colorPrimary: activeColor,
|
|
3510
|
-
withOptionsInMobile: true
|
|
3511
|
-
}, options.map(function (optionItem, index) {
|
|
3512
|
-
return /*#__PURE__*/React__default.createElement(OptionItem, {
|
|
3513
|
-
key: "key-" + index + "-" + optionItem.option,
|
|
3514
|
-
onClick: function onClick() {
|
|
3515
|
-
return onOptionClick == null ? void 0 : onOptionClick(optionItem.optionLink);
|
|
3516
|
-
},
|
|
3517
|
-
onKeyDown: function onKeyDown(e) {
|
|
3518
|
-
return handleOptionKeyDown(e, optionItem.optionLink);
|
|
3519
|
-
},
|
|
3520
|
-
colorPrimary: activeColor,
|
|
3521
|
-
tabIndex: 0,
|
|
3522
|
-
onBlur: function onBlur() {
|
|
3523
|
-
return handleOptionBlur(index);
|
|
3524
|
-
}
|
|
3525
|
-
}, optionItem.option);
|
|
3526
|
-
})) : null) : /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
|
|
3527
|
-
active: active,
|
|
3528
|
-
activeColor: activeColor
|
|
3529
|
-
}, headerEvents, {
|
|
3530
|
-
"data-testid": "link-container",
|
|
3531
|
-
tabIndex: 0
|
|
3532
|
-
}), text));
|
|
3533
|
-
};
|
|
3533
|
+
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
3534
3534
|
|
|
3535
3535
|
var Tabs = function Tabs(_ref) {
|
|
3536
3536
|
var _ref$items = _ref.items,
|
|
@@ -4870,7 +4870,7 @@ var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$G || (_templateObjec
|
|
|
4870
4870
|
var imageToLeft = _ref.imageToLeft;
|
|
4871
4871
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
4872
4872
|
}, devices.mobile);
|
|
4873
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
4873
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
4874
4874
|
var imageToLeft = _ref2.imageToLeft;
|
|
4875
4875
|
return imageToLeft ? 'left' : 'right';
|
|
4876
4876
|
}, devices.mobile);
|
|
@@ -5068,7 +5068,7 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
5068
5068
|
};
|
|
5069
5069
|
|
|
5070
5070
|
var _templateObject$J, _templateObject2$s, _templateObject3$l;
|
|
5071
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n"])));
|
|
5071
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n"])));
|
|
5072
5072
|
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
5073
5073
|
var PersonLink = /*#__PURE__*/styled.a(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
5074
5074
|
|
|
@@ -6216,5 +6216,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$O || (_templat
|
|
|
6216
6216
|
return theme.spacing[6];
|
|
6217
6217
|
}, devices.desktop, devices.largeDesktop);
|
|
6218
6218
|
|
|
6219
|
-
export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TitleWithCTA, TypeTags, devices };
|
|
6219
|
+
export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ControlledDropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TitleWithCTA, TypeTags, devices };
|
|
6220
6220
|
//# sourceMappingURL=chord.esm.js.map
|