@royaloperahouse/chord 0.7.1 → 0.7.2
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 +4 -0
- package/README.md +1 -1
- package/dist/chord.cjs.development.js +225 -224
- 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 +226 -226
- 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
|
@@ -2194,8 +2194,175 @@ var CinemaBadge = function CinemaBadge(_ref) {
|
|
|
2194
2194
|
}))));
|
|
2195
2195
|
};
|
|
2196
2196
|
|
|
2197
|
-
var
|
|
2198
|
-
var
|
|
2197
|
+
var zLevels = ['base', 'content', 'contentOverlay', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
|
|
2198
|
+
var zIndexes = {};
|
|
2199
|
+
zLevels.forEach(function (name, index) {
|
|
2200
|
+
zIndexes[name] = index;
|
|
2201
|
+
});
|
|
2202
|
+
|
|
2203
|
+
var _templateObject$9, _templateObject2$1, _templateObject3;
|
|
2204
|
+
var TabContainer = /*#__PURE__*/styled__default.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
2205
|
+
var OptionItem = /*#__PURE__*/styled__default.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) {
|
|
2206
|
+
var colorPrimary = _ref.colorPrimary;
|
|
2207
|
+
return colorPrimary;
|
|
2208
|
+
});
|
|
2209
|
+
var OptionsContainer = /*#__PURE__*/styled__default.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) {
|
|
2210
|
+
var colorPrimary = _ref2.colorPrimary;
|
|
2211
|
+
return colorPrimary;
|
|
2212
|
+
}, zIndexes.menu, function (props) {
|
|
2213
|
+
if (props.withIcon === 'none') {
|
|
2214
|
+
return "\n top: 21px;\n ";
|
|
2215
|
+
}
|
|
2216
|
+
|
|
2217
|
+
return "";
|
|
2218
|
+
}, devices.mobileAndTablet, function (props) {
|
|
2219
|
+
if (props.withOptionsInMobile) {
|
|
2220
|
+
return "\n position: relative;\n top: 0px;\n ";
|
|
2221
|
+
}
|
|
2222
|
+
|
|
2223
|
+
return "\n display: none;\n ";
|
|
2224
|
+
});
|
|
2225
|
+
|
|
2226
|
+
var _templateObject$a, _templateObject2$2, _templateObject3$1, _templateObject4;
|
|
2227
|
+
var ControlledDropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
|
|
2228
|
+
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.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) {
|
|
2229
|
+
var active = _ref.active,
|
|
2230
|
+
activeColor = _ref.activeColor;
|
|
2231
|
+
|
|
2232
|
+
if (active) {
|
|
2233
|
+
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 ";
|
|
2234
|
+
} else {
|
|
2235
|
+
return '';
|
|
2236
|
+
}
|
|
2237
|
+
});
|
|
2238
|
+
var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled__default(ControlledDropdownHeaderContainer).attrs({
|
|
2239
|
+
as: 'a'
|
|
2240
|
+
})(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
2241
|
+
var IconWrapper = /*#__PURE__*/styled__default.span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n"])));
|
|
2242
|
+
|
|
2243
|
+
var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
2244
|
+
var text = _ref.text,
|
|
2245
|
+
options = _ref.options,
|
|
2246
|
+
_ref$activeColor = _ref.activeColor,
|
|
2247
|
+
activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor,
|
|
2248
|
+
active = _ref.active,
|
|
2249
|
+
onClick = _ref.onClick,
|
|
2250
|
+
onOptionClick = _ref.onOptionClick,
|
|
2251
|
+
_onMouseEnter = _ref.onMouseEnter,
|
|
2252
|
+
_onMouseLeave = _ref.onMouseLeave,
|
|
2253
|
+
onReset = _ref.onReset,
|
|
2254
|
+
_onFocus = _ref.onFocus,
|
|
2255
|
+
_onBlur = _ref.onBlur;
|
|
2256
|
+
var ref = React.useRef();
|
|
2257
|
+
var resetHandler = React.useCallback(function () {
|
|
2258
|
+
return onReset == null ? void 0 : onReset();
|
|
2259
|
+
}, []);
|
|
2260
|
+
React.useEffect(function () {
|
|
2261
|
+
if (window.innerWidth > breakpoints.sm) {
|
|
2262
|
+
var mouseClickHandler = function mouseClickHandler(e) {
|
|
2263
|
+
var _ref$current;
|
|
2264
|
+
|
|
2265
|
+
if (ref != null && (_ref$current = ref.current) != null && _ref$current.contains(e.target)) {
|
|
2266
|
+
return;
|
|
2267
|
+
} else if (active) {
|
|
2268
|
+
resetHandler();
|
|
2269
|
+
}
|
|
2270
|
+
};
|
|
2271
|
+
|
|
2272
|
+
document.addEventListener('click', mouseClickHandler);
|
|
2273
|
+
return function () {
|
|
2274
|
+
document.removeEventListener('click', mouseClickHandler);
|
|
2275
|
+
};
|
|
2276
|
+
}
|
|
2277
|
+
|
|
2278
|
+
return;
|
|
2279
|
+
}, [ref, resetHandler, active]);
|
|
2280
|
+
|
|
2281
|
+
var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
|
|
2282
|
+
if (e.key === 'Enter') {
|
|
2283
|
+
onOptionClick == null ? void 0 : onOptionClick(link);
|
|
2284
|
+
} else if (e.key === 'Escape') {
|
|
2285
|
+
resetHandler();
|
|
2286
|
+
}
|
|
2287
|
+
};
|
|
2288
|
+
|
|
2289
|
+
var handleHeaderKeyDown = function handleHeaderKeyDown(e) {
|
|
2290
|
+
if (e.key === 'Enter') {
|
|
2291
|
+
onClick == null ? void 0 : onClick();
|
|
2292
|
+
} else if (e.key === 'Escape') {
|
|
2293
|
+
resetHandler();
|
|
2294
|
+
}
|
|
2295
|
+
};
|
|
2296
|
+
|
|
2297
|
+
var handleOptionBlur = function handleOptionBlur(i) {
|
|
2298
|
+
if (i === ((options == null ? void 0 : options.length) || 0) - 1) {
|
|
2299
|
+
_onBlur == null ? void 0 : _onBlur();
|
|
2300
|
+
}
|
|
2301
|
+
};
|
|
2302
|
+
|
|
2303
|
+
var isDropdown = !!(options != null && options.length);
|
|
2304
|
+
var wrapperEvents = {
|
|
2305
|
+
onMouseEnter: function onMouseEnter() {
|
|
2306
|
+
return _onMouseEnter == null ? void 0 : _onMouseEnter();
|
|
2307
|
+
},
|
|
2308
|
+
onMouseLeave: function onMouseLeave() {
|
|
2309
|
+
return _onMouseLeave == null ? void 0 : _onMouseLeave();
|
|
2310
|
+
}
|
|
2311
|
+
};
|
|
2312
|
+
var headerEvents = {
|
|
2313
|
+
onMouseDown: function onMouseDown(e) {
|
|
2314
|
+
e.preventDefault();
|
|
2315
|
+
onClick == null ? void 0 : onClick();
|
|
2316
|
+
},
|
|
2317
|
+
onFocus: function onFocus() {
|
|
2318
|
+
return _onFocus == null ? void 0 : _onFocus();
|
|
2319
|
+
},
|
|
2320
|
+
onBlur: function onBlur() {
|
|
2321
|
+
return !isDropdown && (_onBlur == null ? void 0 : _onBlur());
|
|
2322
|
+
},
|
|
2323
|
+
onKeyDown: handleHeaderKeyDown
|
|
2324
|
+
};
|
|
2325
|
+
return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
|
|
2326
|
+
ref: ref
|
|
2327
|
+
}, wrapperEvents), isDropdown ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
|
|
2328
|
+
active: active,
|
|
2329
|
+
activeColor: activeColor
|
|
2330
|
+
}, headerEvents, {
|
|
2331
|
+
tabIndex: 0,
|
|
2332
|
+
"data-testid": "span-container"
|
|
2333
|
+
}), text, /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2334
|
+
"data-testid": "dropdown-icon"
|
|
2335
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
2336
|
+
iconName: "DropdownArrow"
|
|
2337
|
+
}))), active && options ? /*#__PURE__*/React__default.createElement(OptionsContainer, {
|
|
2338
|
+
colorPrimary: activeColor,
|
|
2339
|
+
withOptionsInMobile: true
|
|
2340
|
+
}, options.map(function (optionItem, index) {
|
|
2341
|
+
return /*#__PURE__*/React__default.createElement(OptionItem, {
|
|
2342
|
+
key: "key-" + index + "-" + optionItem.option,
|
|
2343
|
+
onClick: function onClick() {
|
|
2344
|
+
return onOptionClick == null ? void 0 : onOptionClick(optionItem.optionLink);
|
|
2345
|
+
},
|
|
2346
|
+
onKeyDown: function onKeyDown(e) {
|
|
2347
|
+
return handleOptionKeyDown(e, optionItem.optionLink);
|
|
2348
|
+
},
|
|
2349
|
+
colorPrimary: activeColor,
|
|
2350
|
+
tabIndex: 0,
|
|
2351
|
+
onBlur: function onBlur() {
|
|
2352
|
+
return handleOptionBlur(index);
|
|
2353
|
+
}
|
|
2354
|
+
}, optionItem.option);
|
|
2355
|
+
})) : null) : /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
|
|
2356
|
+
active: active,
|
|
2357
|
+
activeColor: activeColor
|
|
2358
|
+
}, headerEvents, {
|
|
2359
|
+
"data-testid": "link-container",
|
|
2360
|
+
tabIndex: 0
|
|
2361
|
+
}), text));
|
|
2362
|
+
};
|
|
2363
|
+
|
|
2364
|
+
var _templateObject$b;
|
|
2365
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2199
2366
|
var fillColor = _ref.fillColor;
|
|
2200
2367
|
return fillColor;
|
|
2201
2368
|
});
|
|
@@ -2219,8 +2386,8 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
2219
2386
|
})));
|
|
2220
2387
|
};
|
|
2221
2388
|
|
|
2222
|
-
var _templateObject$
|
|
2223
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2389
|
+
var _templateObject$c;
|
|
2390
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
|
|
2224
2391
|
|
|
2225
2392
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
2226
2393
|
var _ref$colorLogo = _ref.colorLogo,
|
|
@@ -2430,11 +2597,11 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
2430
2597
|
})))));
|
|
2431
2598
|
};
|
|
2432
2599
|
|
|
2433
|
-
var _templateObject$
|
|
2600
|
+
var _templateObject$d;
|
|
2434
2601
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/rolex.html?size=80';
|
|
2435
2602
|
var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
|
|
2436
2603
|
var DEFAULT_DATA_ROH = 'ImgAdvert';
|
|
2437
|
-
var SponsorshipStyled = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2604
|
+
var SponsorshipStyled = /*#__PURE__*/styled__default.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);
|
|
2438
2605
|
|
|
2439
2606
|
var Sponsorship = function Sponsorship(_ref) {
|
|
2440
2607
|
var _ref$src = _ref.src,
|
|
@@ -2452,9 +2619,9 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
2452
2619
|
}));
|
|
2453
2620
|
};
|
|
2454
2621
|
|
|
2455
|
-
var _templateObject$
|
|
2456
|
-
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
2457
|
-
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
2622
|
+
var _templateObject$e, _templateObject2$3;
|
|
2623
|
+
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
2624
|
+
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--base-color-lightgrey);\n"])));
|
|
2458
2625
|
|
|
2459
2626
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
2460
2627
|
var _ref$fullWidth = _ref.fullWidth,
|
|
@@ -2497,8 +2664,8 @@ var AspectRatioWidth;
|
|
|
2497
2664
|
AspectRatioWidth["16 / 9"] = "1.78";
|
|
2498
2665
|
})(AspectRatioWidth || (AspectRatioWidth = {}));
|
|
2499
2666
|
|
|
2500
|
-
var _templateObject$
|
|
2501
|
-
var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2667
|
+
var _templateObject$f;
|
|
2668
|
+
var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.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) {
|
|
2502
2669
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
2503
2670
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
2504
2671
|
return aspectRatio;
|
|
@@ -2516,8 +2683,8 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$d
|
|
|
2516
2683
|
return aspectRatio;
|
|
2517
2684
|
});
|
|
2518
2685
|
|
|
2519
|
-
var _templateObject$
|
|
2520
|
-
var TabText = /*#__PURE__*/styled__default.a(_templateObject$
|
|
2686
|
+
var _templateObject$g, _templateObject2$4;
|
|
2687
|
+
var TabText = /*#__PURE__*/styled__default.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) {
|
|
2521
2688
|
if (props.withIcon === 'left') {
|
|
2522
2689
|
return "margin-left: 5px;";
|
|
2523
2690
|
}
|
|
@@ -2530,7 +2697,7 @@ var TabText = /*#__PURE__*/styled__default.a(_templateObject$e || (_templateObje
|
|
|
2530
2697
|
|
|
2531
2698
|
return "";
|
|
2532
2699
|
});
|
|
2533
|
-
var TitleContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
2700
|
+
var TitleContainer = /*#__PURE__*/styled__default.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) {
|
|
2534
2701
|
if (props.withIcon === 'left') {
|
|
2535
2702
|
return "\n flex-direction: row-reverse;\n svg {\n margin-right: 6px;\n }";
|
|
2536
2703
|
}
|
|
@@ -2616,8 +2783,8 @@ var Tab = function Tab(_ref) {
|
|
|
2616
2783
|
}));
|
|
2617
2784
|
};
|
|
2618
2785
|
|
|
2619
|
-
var _templateObject$
|
|
2620
|
-
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
2786
|
+
var _templateObject$h, _templateObject2$5;
|
|
2787
|
+
var TabLinkWrapper = /*#__PURE__*/styled__default.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) {
|
|
2621
2788
|
var iconName = _ref.iconName;
|
|
2622
2789
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
|
|
2623
2790
|
}, function (_ref2) {
|
|
@@ -2643,7 +2810,7 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$f || (_templ
|
|
|
2643
2810
|
var hoverColor = _ref7.hoverColor;
|
|
2644
2811
|
return hoverColor;
|
|
2645
2812
|
});
|
|
2646
|
-
var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
2813
|
+
var TabLinkIconWrapper = /*#__PURE__*/styled__default.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"])));
|
|
2647
2814
|
|
|
2648
2815
|
var _excluded$4 = ["children", "iconName", "iconDirection", "color", "hoverColor"];
|
|
2649
2816
|
|
|
@@ -2670,15 +2837,15 @@ var TabLink = function TabLink(_ref) {
|
|
|
2670
2837
|
})) : null, children);
|
|
2671
2838
|
};
|
|
2672
2839
|
|
|
2673
|
-
var _templateObject$
|
|
2674
|
-
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
2840
|
+
var _templateObject$i, _templateObject2$6;
|
|
2841
|
+
var TextLinkWrapper = /*#__PURE__*/styled__default.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) {
|
|
2675
2842
|
var iconName = _ref.iconName;
|
|
2676
2843
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
2677
2844
|
}, function (_ref2) {
|
|
2678
2845
|
var color = _ref2.color;
|
|
2679
2846
|
return color;
|
|
2680
2847
|
});
|
|
2681
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
2848
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled__default.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"])));
|
|
2682
2849
|
|
|
2683
2850
|
var _excluded$5 = ["children", "iconName", "iconDirection", "color"];
|
|
2684
2851
|
|
|
@@ -2702,8 +2869,8 @@ var TextLink = function TextLink(_ref) {
|
|
|
2702
2869
|
})) : null);
|
|
2703
2870
|
};
|
|
2704
2871
|
|
|
2705
|
-
var _templateObject$
|
|
2706
|
-
var Wrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2872
|
+
var _templateObject$j;
|
|
2873
|
+
var Wrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
2707
2874
|
var typography = _ref.typography;
|
|
2708
2875
|
return typography;
|
|
2709
2876
|
}, function (_ref2) {
|
|
@@ -2809,16 +2976,16 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
2809
2976
|
}, children);
|
|
2810
2977
|
};
|
|
2811
2978
|
|
|
2812
|
-
var _templateObject$
|
|
2813
|
-
var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject$
|
|
2979
|
+
var _templateObject$k, _templateObject2$7, _templateObject3$2;
|
|
2980
|
+
var TickboxLabel = /*#__PURE__*/styled__default.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) {
|
|
2814
2981
|
var dark = _ref.dark;
|
|
2815
2982
|
return dark ? 'white' : 'black';
|
|
2816
2983
|
});
|
|
2817
|
-
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
2984
|
+
var TickboxCheckmark = /*#__PURE__*/styled__default.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) {
|
|
2818
2985
|
var dark = _ref2.dark;
|
|
2819
2986
|
return dark ? 'white' : 'black';
|
|
2820
2987
|
}, devices.mobile);
|
|
2821
|
-
var TickboxInput = /*#__PURE__*/styled__default.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) {
|
|
2988
|
+
var TickboxInput = /*#__PURE__*/styled__default.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) {
|
|
2822
2989
|
var dark = _ref3.dark;
|
|
2823
2990
|
return dark ? 'white' : 'black';
|
|
2824
2991
|
}, 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__default.ul(_templateObject$
|
|
3038
|
+
var _templateObject$l;
|
|
3039
|
+
var TypeTagsContainer = /*#__PURE__*/styled__default.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__default.div(_templateObject$
|
|
2887
|
-
var IconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3052
|
+
var _templateObject$m, _templateObject2$8, _templateObject3$3;
|
|
3053
|
+
var ButtonsContainer = /*#__PURE__*/styled__default.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__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) {
|
|
2888
3055
|
var theme = _ref.theme;
|
|
2889
3056
|
return theme.colors.primary;
|
|
2890
3057
|
}, devices.mobileAndTablet);
|
|
2891
|
-
var IconUnavailableWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
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.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__default.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__default(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__default.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__default(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__default.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__default(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__default.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__default(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__default(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__default.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__default.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__default.div(_templateObject8 || (_templa
|
|
|
2970
3131
|
var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
2971
3132
|
var NavTopContainer = /*#__PURE__*/styled__default.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__default.div(_templateObject$
|
|
3134
|
+
var _templateObject$o;
|
|
3135
|
+
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"])));
|
|
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__default.div(_templateObject$
|
|
3164
|
+
var _templateObject$p;
|
|
3165
|
+
var NavTopContainer$1 = /*#__PURE__*/styled__default.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__default.div(_templateObject$
|
|
3167
|
+
var _templateObject$q, _templateObject2$a, _templateObject3$5, _templateObject4$2;
|
|
3168
|
+
var BasketContainer = /*#__PURE__*/styled__default.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__default.div(_templateObject$o || (_te
|
|
|
3023
3184
|
var colorPrimary = _ref4.colorPrimary;
|
|
3024
3185
|
return colorPrimary;
|
|
3025
3186
|
});
|
|
3026
|
-
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3027
|
-
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
3028
|
-
var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
3187
|
+
var SvgContainer = /*#__PURE__*/styled__default.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__default.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__default.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__default.div(_templateObject$
|
|
3231
|
+
var _templateObject$r, _templateObject2$b;
|
|
3232
|
+
var SearchContainer = /*#__PURE__*/styled__default.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__default.div(_templateObject$p || (_te
|
|
|
3084
3245
|
var colorPrimary = _ref3.colorPrimary;
|
|
3085
3246
|
return colorPrimary;
|
|
3086
3247
|
});
|
|
3087
|
-
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3248
|
+
var SvgContainer$1 = /*#__PURE__*/styled__default.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__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
3116
|
-
var OptionItem = /*#__PURE__*/styled__default.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__default.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__default.div(_templateObject$
|
|
3381
|
-
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3517
|
+
var _templateObject$s, _templateObject2$c, _templateObject3$6, _templateObject4$3;
|
|
3518
|
+
var TabsContainer = /*#__PURE__*/styled__default.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__default.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__default.div(_templateObject3$
|
|
3526
|
+
var MenuContainer$1 = /*#__PURE__*/styled__default.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__default.div(_templateObject4$
|
|
3396
|
-
|
|
3397
|
-
var _templateObject$s, _templateObject2$c, _templateObject3$6, _templateObject4$3;
|
|
3398
|
-
var ControlledDropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
|
|
3399
|
-
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.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__default(ControlledDropdownHeaderContainer).attrs({
|
|
3410
|
-
as: 'a'
|
|
3411
|
-
})(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
3412
|
-
var IconWrapper$1 = /*#__PURE__*/styled__default.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 = React.useRef();
|
|
3428
|
-
var resetHandler = React.useCallback(function () {
|
|
3429
|
-
return onReset == null ? void 0 : onReset();
|
|
3430
|
-
}, []);
|
|
3431
|
-
React.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__default.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,
|
|
@@ -4868,7 +4868,7 @@ var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$G || (_temp
|
|
|
4868
4868
|
var imageToLeft = _ref.imageToLeft;
|
|
4869
4869
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
4870
4870
|
}, devices.mobile);
|
|
4871
|
-
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
4871
|
+
var EditorialImageWrapper = /*#__PURE__*/styled__default.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) {
|
|
4872
4872
|
var imageToLeft = _ref2.imageToLeft;
|
|
4873
4873
|
return imageToLeft ? 'left' : 'right';
|
|
4874
4874
|
}, devices.mobile);
|
|
@@ -6223,6 +6223,7 @@ exports.Card = Card;
|
|
|
6223
6223
|
exports.Cards = Cards;
|
|
6224
6224
|
exports.Carousel = Carousel;
|
|
6225
6225
|
exports.CinemaBadge = CinemaBadge;
|
|
6226
|
+
exports.ControlledDropdown = ControlledDropdown;
|
|
6226
6227
|
exports.Editorial = Editorial;
|
|
6227
6228
|
exports.Footer = Footer;
|
|
6228
6229
|
exports.GlobalStyles = GlobalStyles;
|