@royaloperahouse/chord 0.7.31 → 0.7.32

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## [0.7.32]
+- Carousels: extend character limit for description
+
 ## [0.7.31]
 - Card: add image alt text as a prop
 

package/dist/chord.cjs.development.js

@@ -4411,6 +4411,48 @@ var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject9$1
 var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      grid-area: 1 / 12 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: flex;\n      grid-area: 1 / 11 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n"])));
 
+var TEXT_STYLE_HTML_TAGS_REGEXP = '<em>|</em>|<b>|</b>';
+
+var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
+  return htmlString.replace(/<[^>]*>/g, '');
+};
+
+var insertString = function insertString(mainString, str, position) {
+  return "" + mainString.substring(0, position) + str + mainString.substring(position);
+};
+
+var insertHtmlTags = function insertHtmlTags(strWithTags, strWithoutTags, resultLength) {
+  var htmlTagPositions = Array.from(strWithTags.matchAll(new RegExp(TEXT_STYLE_HTML_TAGS_REGEXP, 'g')));
+  var tagsLength = 0;
+  var resultString = strWithoutTags;
+  htmlTagPositions.forEach(function (tag) {
+    resultString = insertString(resultString, tag[0], tag.index);
+    if (tag.index - tagsLength <= resultLength) tagsLength += tag[0].length;
+  });
+  return {
+    stringWithInsertedTags: resultString,
+    tagsLength: tagsLength
+  };
+};
+
+var truncateHtmlString = function truncateHtmlString(str, resultLength, addDots) {
+  if (addDots === void 0) {
+    addDots = false;
+  }
+
+  var strWithoutTags = stripAllHtmlTags(str);
+  if (strWithoutTags.length <= resultLength) return str;
+
+  var _insertHtmlTags = insertHtmlTags(str, strWithoutTags, resultLength),
+      stringWithInsertedTags = _insertHtmlTags.stringWithInsertedTags,
+      tagsLength = _insertHtmlTags.tagsLength;
+
+  var truncatedString = stringWithInsertedTags.substring(0, resultLength + tagsLength);
+  var isSpaceNext = strWithoutTags[resultLength] === ' ';
+  if (!isSpaceNext) truncatedString = truncatedString.substring(0, truncatedString.lastIndexOf(' '));
+  return addDots ? truncatedString + "..." : truncatedString;
+};
+
 var _excluded$8 = ["text"];
 
 var HighlightsCarousel = function HighlightsCarousel(_ref) {
@@ -4442,7 +4484,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   var linkText = link.text,
       restLink = _objectWithoutPropertiesLoose(link, _excluded$8);
 
-  var description = infoText == null ? void 0 : infoText.substring(0, 130);
+  var description = infoText ? truncateHtmlString(infoText, 185, true) : '';
   React.useEffect(function () {
     var slideChangeHandler = function slideChangeHandler(s) {
       return setCurrentSlide(s.realIndex);
@@ -4878,6 +4920,7 @@ var Card = function Card(_ref) {
       hovered = _useState[0],
       setHovered = _useState[1];
 
+  var truncatedText = truncateHtmlString(text, 185, true);
   var primaryButton = links == null ? void 0 : links[0];
 
   var _ref2 = primaryButton || {},
@@ -4942,7 +4985,7 @@ var Card = function Card(_ref) {
     level: 6
   }, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer, {
     dangerouslySetInnerHTML: {
-      __html: truncate(text, 130)
+      __html: truncatedText
     }
   })), links ? /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
     ref: node,