@royaloperahouse/chord 1.7.2 → 1.8.0-a-chord-development
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 +8 -0
- package/README.md +248 -40
- package/dist/chord.cjs.development.js +33 -23
- 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 +33 -23
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/molecules/PageHeading/Impact/Impact.style.d.ts +1 -0
- package/dist/types/impactHeader.d.ts +4 -0
- package/package.json +1 -1
- package/README.GIT +0 -275
package/dist/chord.esm.js
CHANGED
|
@@ -3729,10 +3729,10 @@ var Tabs = function Tabs(_ref) {
|
|
|
3729
3729
|
};
|
|
3730
3730
|
|
|
3731
3731
|
var _templateObject$t, _templateObject2$e, _templateObject3$7, _templateObject4$4, _templateObject5$1, _templateObject6$1;
|
|
3732
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height:
|
|
3732
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n background-color: var(--base-color-white);\n\n @media ", " {\n column-gap: 12px;\n }\n"])), devices.mobile);
|
|
3733
3733
|
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
3734
3734
|
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--base-color-navigation);\n }\n }\n"])));
|
|
3735
|
-
var InputContainer = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-search);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--base-color-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
3735
|
+
var InputContainer = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-search);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--base-color-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n\n input:disabled {\n background-color: var(--base-color-white);\n }\n"])), devices.mobile);
|
|
3736
3736
|
var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
3737
3737
|
var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n height: 24px;\n width: 24px;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
3738
3738
|
|
|
@@ -3799,14 +3799,15 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
3799
3799
|
"data-testid": "input-html",
|
|
3800
3800
|
ref: inputRef,
|
|
3801
3801
|
className: "search-input",
|
|
3802
|
-
placeholder: "
|
|
3802
|
+
placeholder: "Our search tool is currently unavailable due to necessary maintenance.",
|
|
3803
3803
|
type: "text",
|
|
3804
3804
|
onChange: function onChange(e) {
|
|
3805
3805
|
onChangeHandler(e);
|
|
3806
3806
|
},
|
|
3807
3807
|
onKeyPress: function onKeyPress(e) {
|
|
3808
3808
|
return handleKeypress(e, searchValue);
|
|
3809
|
-
}
|
|
3809
|
+
},
|
|
3810
|
+
disabled: true
|
|
3810
3811
|
})), showSearchLink && /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(SearchLinkContainer, {
|
|
3811
3812
|
"data-testid": "search-button"
|
|
3812
3813
|
}, /*#__PURE__*/React__default.createElement(TextLink, {
|
|
@@ -5720,21 +5721,15 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
5720
5721
|
}))));
|
|
5721
5722
|
};
|
|
5722
5723
|
|
|
5723
|
-
var _templateObject$N, _templateObject2$x, _templateObject3$o, _templateObject4$i, _templateObject5$d, _templateObject6$a, _templateObject7$7;
|
|
5724
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n
|
|
5725
|
-
|
|
5726
|
-
|
|
5727
|
-
|
|
5728
|
-
|
|
5729
|
-
|
|
5730
|
-
|
|
5731
|
-
});
|
|
5732
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5733
|
-
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
5734
|
-
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5735
|
-
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5736
|
-
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
5737
|
-
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5724
|
+
var _templateObject$N, _templateObject2$x, _templateObject3$o, _templateObject4$i, _templateObject5$d, _templateObject6$a, _templateObject7$7, _templateObject8$6;
|
|
5725
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: #00000;\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
5726
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
5727
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5728
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
5729
|
+
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5730
|
+
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5731
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 20px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
5732
|
+
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5738
5733
|
|
|
5739
5734
|
var _excluded$h = ["text"];
|
|
5740
5735
|
|
|
@@ -5747,7 +5742,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
5747
5742
|
customSponsorImage = _ref.customSponsorImage,
|
|
5748
5743
|
scrollHref = _ref.scrollHref,
|
|
5749
5744
|
bgUrlDesktop = _ref.bgUrlDesktop,
|
|
5750
|
-
bgUrlDevice = _ref.bgUrlDevice
|
|
5745
|
+
bgUrlDevice = _ref.bgUrlDevice,
|
|
5746
|
+
bgImageAltText = _ref.bgImageAltText;
|
|
5751
5747
|
var truncatedText = text && text.substring(0, 75);
|
|
5752
5748
|
|
|
5753
5749
|
var _ref2 = link || {},
|
|
@@ -5758,7 +5754,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
5758
5754
|
bgUrlDesktop: bgUrlDesktop,
|
|
5759
5755
|
bgUrlDevice: bgUrlDevice,
|
|
5760
5756
|
"data-testid": "impact-wrapper"
|
|
5761
|
-
},
|
|
5757
|
+
}, /*#__PURE__*/React__default.createElement(ImpactHeaderImageWrapper, null, /*#__PURE__*/React__default.createElement("picture", {
|
|
5758
|
+
"data-testid": "impact-picture"
|
|
5759
|
+
}, bgUrlDevice && /*#__PURE__*/React__default.createElement("source", {
|
|
5760
|
+
srcSet: bgUrlDevice,
|
|
5761
|
+
media: "" + devices.mobile,
|
|
5762
|
+
"data-testid": "impact-mobile-image-source"
|
|
5763
|
+
}), /*#__PURE__*/React__default.createElement("source", {
|
|
5764
|
+
srcSet: bgUrlDesktop,
|
|
5765
|
+
media: "" + devices.desktop,
|
|
5766
|
+
"data-testid": "impact-desktop-image-source"
|
|
5767
|
+
}), /*#__PURE__*/React__default.createElement("img", {
|
|
5768
|
+
src: bgUrlDesktop,
|
|
5769
|
+
alt: bgImageAltText,
|
|
5770
|
+
"data-testid": "impact-image"
|
|
5771
|
+
}))), sponsor ? /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
5762
5772
|
"data-testid": "impact-sponsor"
|
|
5763
5773
|
}, customSponsorImage ? /*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
5764
5774
|
"data-testid": "impact-custom-sponsor"
|
|
@@ -5861,7 +5871,7 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5861
5871
|
}));
|
|
5862
5872
|
};
|
|
5863
5873
|
|
|
5864
|
-
var _templateObject$Q, _templateObject2$z, _templateObject3$q, _templateObject4$k, _templateObject5$f, _templateObject6$c, _templateObject7$8, _templateObject8$
|
|
5874
|
+
var _templateObject$Q, _templateObject2$z, _templateObject3$q, _templateObject4$k, _templateObject5$f, _templateObject6$c, _templateObject7$8, _templateObject8$7, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
|
|
5865
5875
|
var LENGTH_TEXT = 28;
|
|
5866
5876
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
5867
5877
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
@@ -5922,7 +5932,7 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$f || (_te
|
|
|
5922
5932
|
});
|
|
5923
5933
|
var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
|
|
5924
5934
|
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
5925
|
-
var TextLinkWrapper$2 = /*#__PURE__*/styled.div(_templateObject8$
|
|
5935
|
+
var TextLinkWrapper$2 = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
5926
5936
|
var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
|
|
5927
5937
|
var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
|
|
5928
5938
|
var PrimaryButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n"])));
|