@royaloperahouse/harmonic 0.13.0-a → 0.13.1-a
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 +3 -0
- package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +271 -1
- package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +271 -1
- package/dist/components/organisms/Carousels/Carousel/Carousel.style.d.ts +271 -1
- package/dist/harmonic.cjs.development.js +30 -12
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +30 -12
- package/dist/harmonic.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/harmonic.esm.js
CHANGED
|
@@ -5884,27 +5884,45 @@ var Accordion = function Accordion(_ref) {
|
|
|
5884
5884
|
setTextHeight(content.current.scrollHeight + "px");
|
|
5885
5885
|
}
|
|
5886
5886
|
}, [content, initOpen]);
|
|
5887
|
+
useEffect(function () {
|
|
5888
|
+
if (openAccordion && content != null && content.current) {
|
|
5889
|
+
requestAnimationFrame(function () {
|
|
5890
|
+
var _content$current$scro, _content$current;
|
|
5891
|
+
setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
|
|
5892
|
+
});
|
|
5893
|
+
} else if (!openAccordion) {
|
|
5894
|
+
setTextHeight('0px');
|
|
5895
|
+
}
|
|
5896
|
+
}, [openAccordion, childrenVisibility, content]);
|
|
5887
5897
|
var toggleAccordion = function toggleAccordion() {
|
|
5888
|
-
if (
|
|
5889
|
-
|
|
5890
|
-
|
|
5891
|
-
|
|
5892
|
-
|
|
5898
|
+
if (React__default.Children.count(children) === 0) return;
|
|
5899
|
+
if (openAccordion) {
|
|
5900
|
+
setIconName('Expand');
|
|
5901
|
+
setOpenAccordion(false);
|
|
5902
|
+
setTextHeight('0px');
|
|
5903
|
+
window.setTimeout(function () {
|
|
5904
|
+
return setChildrenVisibility(false);
|
|
5905
|
+
}, 300);
|
|
5906
|
+
} else {
|
|
5907
|
+
setChildrenVisibility(true);
|
|
5908
|
+
setOpenAccordion(true);
|
|
5909
|
+
setIconName('Detract');
|
|
5910
|
+
}
|
|
5893
5911
|
};
|
|
5894
5912
|
var keyDown = function keyDown(e) {
|
|
5895
|
-
if (e.key === 'Enter' || e.key === '
|
|
5913
|
+
if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
|
|
5914
|
+
e.preventDefault();
|
|
5896
5915
|
toggleAccordion();
|
|
5897
5916
|
}
|
|
5898
5917
|
};
|
|
5899
5918
|
var contentContainerId = title + "-accordion-content";
|
|
5900
5919
|
return /*#__PURE__*/React__default.createElement(AccordionContainer, {
|
|
5901
5920
|
showLine: showLine,
|
|
5902
|
-
tabIndex: 0,
|
|
5903
|
-
onKeyDown: keyDown,
|
|
5904
5921
|
className: className
|
|
5905
5922
|
}, /*#__PURE__*/React__default.createElement(TitleContainer$1, {
|
|
5906
5923
|
onClick: toggleAccordion,
|
|
5907
|
-
|
|
5924
|
+
onKeyDown: keyDown,
|
|
5925
|
+
tabIndex: 0,
|
|
5908
5926
|
role: "button",
|
|
5909
5927
|
"aria-label": title,
|
|
5910
5928
|
"aria-expanded": openAccordion,
|
|
@@ -5917,10 +5935,10 @@ var Accordion = function Accordion(_ref) {
|
|
|
5917
5935
|
ref: content,
|
|
5918
5936
|
textHeight: textHeight,
|
|
5919
5937
|
id: contentContainerId,
|
|
5920
|
-
"aria-live":
|
|
5938
|
+
"aria-live": openAccordion ? 'polite' : 'off',
|
|
5921
5939
|
tag: "div",
|
|
5922
5940
|
size: "large"
|
|
5923
|
-
}, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
|
|
5941
|
+
}, openAccordion && /*#__PURE__*/React__default.createElement(ChildrenContainer, {
|
|
5924
5942
|
isVisible: childrenVisibility
|
|
5925
5943
|
}, children)));
|
|
5926
5944
|
};
|
|
@@ -11781,7 +11799,7 @@ var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject2$11 || (_template
|
|
|
11781
11799
|
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 2.5em;\n div > :first-child {\n margin-top: 1.5em;\n }\n\n @media ", " {\n margin-top: 0;\n div > :first-child {\n margin-top: 0.5em;\n }\n }\n\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n & {\n div > :first-child {\n margin-top: 1em;\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
11782
11800
|
|
|
11783
11801
|
var _templateObject$1i;
|
|
11784
|
-
var TextContainer$2 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n
|
|
11802
|
+
var TextContainer$2 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n cursor: pointer;\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n line-height: var(--line-height-listing);\n position: relative;\n padding-left: 32px;\n\n @media ", " {\n padding-left: 28px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
|
|
11785
11803
|
|
|
11786
11804
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11787
11805
|
return html.replace(/<h1>/g, "<h1 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h2>/g, "<h2 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h3>/g, "<h3 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h4>/g, "<h4 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h5>/g, "<h5 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">").replace(/<h6>/g, "<h6 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">");
|