@royaloperahouse/chord 2.1.9-b-chord-development → 2.1.9-c-chord-development

package/dist/chord.cjs.development.js

@@ -9,6 +9,7 @@ var React__default = _interopDefault(React);
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
 var moment = _interopDefault(require('moment'));
+var server = require('react-dom/server');
 
 (function (Colors) {
   Colors["White"] = "white";
@@ -5920,6 +5921,14 @@ var truncateHtmlString = function truncateHtmlString(str, resultLength, addDots)
 var truncate = function truncate(str, n) {
   return str.length >= n ? str.substring(0, n) : str;
 };
+var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
+  if (addDots === void 0) {
+    addDots = false;
+  }
+
+  var nodeString = server.renderToString( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
+  return truncateHtmlString(nodeString, resultLength, addDots);
+};
 
 var _excluded$b = ["text"],
     _excluded2$1 = ["text"];
@@ -8224,83 +8233,97 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
 
-var _templateObject$17, _templateObject2$O;
+var _templateObject$17, _templateObject2$O, _templateObject3$F, _templateObject4$w;
 var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
 var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s 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"])));
+
+var keyDown = function keyDown(e, toggleFunction) {
+  if (e.key === 'Enter' || e.key === 'Space') {
+    toggleFunction();
+  }
+};
 
 var ReadMore = function ReadMore(_ref) {
   var title = _ref.title,
+      introText = _ref.introText,
       fullText = _ref.fullText,
       _ref$initOpen = _ref.initOpen,
       initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
       showMoreText = _ref.showMoreText,
       hideText = _ref.hideText,
-      characterLimit = _ref.characterLimit;
+      characterLimit = _ref.characterLimit,
+      _ref$truncate = _ref.truncate,
+      truncate = _ref$truncate === void 0 ? true : _ref$truncate;
 
   var _useState = React.useState(initOpen),
       isFullTextOpen = _useState[0],
       setIsFullTextOpen = _useState[1];
 
-  var _useState2 = React.useState(initOpen ? {
-    visibility: 'visible',
-    display: 'block'
+  var _useState2 = React.useState('0px'),
+      textHeight = _useState2[0],
+      setTextHeight = _useState2[1];
+
+  var _useState3 = React.useState(initOpen ? {
+    visibility: 'visible'
   } : {
-    visibility: 'hidden',
-    display: 'none'
+    visibility: 'hidden'
   }),
-      textVisibility = _useState2[0],
-      setTextVisibility = _useState2[1];
+      textVisibility = _useState3[0],
+      setTextVisibility = _useState3[1];
+
+  var content = React.useRef(null);
+  React.useEffect(function () {
+    if (content != null && content.current && initOpen) {
+      setTextHeight(content.current.scrollHeight + "px");
+    }
+  }, [content, initOpen]);
 
   var toggleFullText = function toggleFullText() {
     if (!fullText) return;
     setIsFullTextOpen(!isFullTextOpen);
+    setTextHeight(isFullTextOpen ? '0px' : content.current.scrollHeight + "px");
     setTextVisibility(isFullTextOpen ? {
-      visibility: 'hidden',
-      display: 'none'
+      visibility: 'hidden'
     } : {
-      visibility: 'visible',
-      display: 'block'
+      visibility: 'visible'
     });
   };
 
-  var keyDown = function keyDown(e) {
-    if (e.key === 'Enter' || e.key === 'Space') {
-      toggleFullText();
-    }
+  var handleKeyDown = function handleKeyDown(e) {
+    keyDown(e, toggleFullText);
   };
 
-  var INTRO_CHAR_LIMIT = characterLimit != null ? characterLimit : 115;
-
-  var setIntroText = function setIntroText(text) {
-    if (text.length <= INTRO_CHAR_LIMIT) {
-      return text;
-    }
-
-    return text.slice(0, INTRO_CHAR_LIMIT) + '...';
-  };
+  var INTRO_CHAR_LIMIT = truncate ? characterLimit != null ? characterLimit : 115 : undefined;
+  var truncatedText = truncate ? truncateReactNodeString(introText != null ? introText : '', INTRO_CHAR_LIMIT, true) : introText;
 
-  var Standfirst = function Standfirst() {
-    return fullText ? /*#__PURE__*/React__default.createElement(ContentContainer, null, setIntroText(fullText)) : null;
+  var IntroText = function IntroText() {
+    return introText ? /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(FullTextContainer, null, truncatedText)) : null;
   };
 
-  var content = React.useRef(null);
   var contentContainerId = title + "-read-more-content";
   return /*#__PURE__*/React__default.createElement(AccordionContainer, {
     tabIndex: 0,
-    onKeyDown: keyDown
+    onKeyDown: handleKeyDown
   }, /*#__PURE__*/React__default.createElement(ReadMoreContainer, {
     "aria-label": title,
     "aria-expanded": isFullTextOpen,
     "aria-controls": contentContainerId
   }, /*#__PURE__*/React__default.createElement(Header, {
-    level: 5
-  }, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(Standfirst, null), /*#__PURE__*/React__default.createElement(ContentContainer, {
+    level: 5,
+    semanticLevel: 3
+  }, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(IntroText, null), /*#__PURE__*/React__default.createElement(ContentContainer$4, {
     "data-testid": "richcontainer",
     ref: content,
     id: contentContainerId,
     "aria-live": "polite",
+    style: {
+      maxHeight: "" + textHeight
+    }
+  }, /*#__PURE__*/React__default.createElement(FullTextContainer, {
     style: textVisibility
-  }, fullText), /*#__PURE__*/React__default.createElement(LinkContainer, null, (fullText || isFullTextOpen) && /*#__PURE__*/React__default.createElement(TextLink, {
+  }, fullText)), /*#__PURE__*/React__default.createElement(LinkContainer, null, (fullText || isFullTextOpen) && /*#__PURE__*/React__default.createElement(TextLink, {
     tabIndex: 0,
     role: "button",
     onClick: toggleFullText