@royaloperahouse/chord 0.7.29 → 0.7.32

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## [0.7.32]
+- Carousels: extend character limit for description
+
+## [0.7.31]
+- Card: add image alt text as a prop
+
+## [0.7.30]
+- Navigation: add possibility to pass basket link as prop
+
 ## [0.7.29]
 - TextOnly: change spacing for the headings
 

package/dist/chord.cjs.development.js

@@ -3225,6 +3225,7 @@ var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$2 || (_template
 
 var Basket$1 = function Basket(_ref) {
   var text = _ref.text,
+      link = _ref.link,
       _ref$selected = _ref.selected,
       selected = _ref$selected === void 0 ? false : _ref$selected,
       _ref$numItems = _ref.numItems,
@@ -3235,7 +3236,7 @@ var Basket$1 = function Basket(_ref) {
 
   var onClickHandler = function onClickHandler() {
     if (onClick) {
-      onClick('/basket');
+      onClick(link || '/basket');
     }
   };
 
@@ -3524,6 +3525,7 @@ var NavTop = function NavTop(_ref) {
       accountOptions = _ref.accountOptions,
       onLink = _ref.onLink,
       basketText = _ref.basketText,
+      basketLink = _ref.basketLink,
       basketNumItems = _ref.basketNumItems,
       onClickSearch = _ref.onClickSearch,
       _ref$isShowSearch = _ref.isShowSearch,
@@ -3535,6 +3537,7 @@ var NavTop = function NavTop(_ref) {
     selected: isShowSearch,
     colorPrimary: colorPrimary
   }), /*#__PURE__*/React__default.createElement(Basket$1, {
+    link: basketLink,
     text: basketText,
     numItems: basketNumItems,
     onClick: onLink,
@@ -3886,6 +3889,7 @@ var Navigation = function Navigation(_ref) {
     accountText: navTopData.accountText,
     accountLink: navTopData.accountLink,
     basketText: navTopData.basketText,
+    basketLink: navTopData.basketLink,
     basketNumItems: navTopData.basketNumItems,
     onClickSearch: onClickSearchHandler,
     onLink: onLinkHandler,
@@ -4407,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) {
@@ -4438,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);
@@ -4855,6 +4901,8 @@ var Card = function Card(_ref) {
       _ref$tags = _ref.tags,
       tags = _ref$tags === void 0 ? [] : _ref$tags,
       image = _ref.image,
+      _ref$imageAltText = _ref.imageAltText,
+      imageAltText = _ref$imageAltText === void 0 ? '' : _ref$imageAltText,
       _ref$withContinueWatc = _ref.withContinueWatching,
       withContinueWatching = _ref$withContinueWatc === void 0 ? false : _ref$withContinueWatc,
       _ref$size = _ref.size,
@@ -4872,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 || {},
@@ -4919,7 +4968,7 @@ var Card = function Card(_ref) {
     aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
     src: image,
-    alt: "test"
+    alt: imageAltText
   })), withContinueWatching && /*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
     progress: progress
   }))), /*#__PURE__*/React__default.createElement(ContentContainer$2, {
@@ -4936,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,