@royaloperahouse/chord 2.4.3-a-chord-development → 2.4.3-b-chord-development

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [2.4.3]
+- Fix Page Heading spacing around the title
+
+## [2.4.2]
+- Logo change in main nav bar - added alt text, updated url, updated images for local testing
+
+## [2.4.1]
+- Update Stream and Cinema badges with new logo.
+- Update Page and Compact headers with new badges.
+
 ## [2.4.0]
 - Added optional semantic level props to Page Heading, Alt Header, Promo With Title, and Section Title
 - Added optional character limit prop to Page Heading

package/dist/chord.cjs.development.js

@@ -7067,9 +7067,15 @@ var TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$o || (_tem
 var _templateObject$N, _templateObject2$w, _templateObject3$p, _templateObject4$j, _templateObject5$e;
 var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  div {\n    overflow: hidden;\n  }\n"])));
 var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-lightgrey);\n  width: 100%;\n"])));
-var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n"])), devices.mobile);
+var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  visibility: ", ";\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n  \n  @media print { \n    visibility: visible;\n  }\n}\n"])), function (_ref) {
+  var isVisible = _ref.isVisible;
+  return isVisible ? 'visible' : 'hidden';
+}, devices.mobile);
 var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  && h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  div {\n    margin: 21px 20px;\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n\n    @media ", " {\n      margin: 12px 20px 12px 0px;\n    }\n  }\n\n  && svg {\n    width: var(--navigation-middle-gap);\n    height: var(--navigation-middle-gap);\n    margin-right: 20px;\n\n    @media ", " {\n      margin-right: 0px;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])), devices.mobile, devices.mobile);
-var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  @media ", " {\n    transition: 100% 0.2s ease;\n  }\n"])), devices.mobile);
+var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n  max-height: ", ";\n\n  @media print {\n    max-height: 500px;\n  }\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  @media ", " {\n    transition: 100% 0.2s ease;\n  }\n"])), function (_ref2) {
+  var textHeight = _ref2.textHeight;
+  return textHeight;
+}, devices.mobile);
 
 var Accordion = function Accordion(_ref) {
   var _ref$title = _ref.title,
@@ -7100,11 +7106,7 @@ var Accordion = function Accordion(_ref) {
       setIconName = _useState3[1]; // Contents children visibility is set to prevent it from being keyboard tabbable when the accordion is closed
 
 
-  var _useState4 = React.useState(initOpen ? {
-    visibility: 'visible'
-  } : {
-    visibility: 'hidden'
-  }),
+  var _useState4 = React.useState(initOpen),
       childrenVisibility = _useState4[0],
       setChildrenVisibility = _useState4[1];
 
@@ -7120,11 +7122,7 @@ var Accordion = function Accordion(_ref) {
     setOpenAccordion(!openAccordion);
     setTextHeight(openAccordion ? '0px' : content.current.scrollHeight + "px");
     setIconName(openAccordion ? 'Expand' : 'Detract');
-    setChildrenVisibility(openAccordion ? {
-      visibility: 'hidden'
-    } : {
-      visibility: 'visible'
-    });
+    setChildrenVisibility(!openAccordion);
   };
 
   var keyDown = function keyDown(e) {
@@ -7134,7 +7132,9 @@ var Accordion = function Accordion(_ref) {
   };
 
   var Standfirst = function Standfirst() {
-    return visibleStandfirst ? /*#__PURE__*/React__default.createElement(ContentContainer, null, /*#__PURE__*/React__default.createElement(ChildrenContainer, null, visibleStandfirst)) : null;
+    return visibleStandfirst ? /*#__PURE__*/React__default.createElement(ContentContainer, null, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
+      isVisible: childrenVisibility
+    }, visibleStandfirst)) : null;
   };
 
   var contentContainerId = title + "-accordion-content";
@@ -7184,13 +7184,11 @@ var Accordion = function Accordion(_ref) {
   })), visibleStandfirst && /*#__PURE__*/React__default.createElement(Standfirst, null), /*#__PURE__*/React__default.createElement(ContentContainer, {
     "data-testid": "richcontainer",
     ref: content,
-    style: {
-      maxHeight: "" + textHeight
-    },
+    textHeight: textHeight,
     id: contentContainerId,
     "aria-live": "polite"
   }, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
-    style: childrenVisibility
+    isVisible: childrenVisibility
   }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
 };