@royaloperahouse/chord 2.4.6 → 2.4.7

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [2.4.7]
+- Compact Header bug fixes for Default Pages roll out
+
 ## [2.4.6]
 - Print behaviour: Accordion and ReadMore now open to display content when printing, PeopleListing avoids content breaking between pages
 

package/dist/chord.cjs.development.js

@@ -127,9 +127,12 @@ var StreamBadge = function StreamBadge(_ref) {
   var _ref$fillColor = _ref.fillColor,
       fillColor = _ref$fillColor === void 0 ? exports.Colors.White : _ref$fillColor,
       _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'center' : _ref$align;
+      align = _ref$align === void 0 ? 'center' : _ref$align,
+      _ref$invert = _ref.invert,
+      invert = _ref$invert === void 0 ? false : _ref$invert;
+  var colour = invert ? exports.Colors.Black : fillColor;
   return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
-    fillColor: fillColor,
+    fillColor: colour,
     width: "100%",
     height: "100%",
     viewBox: "110 450 865 200",
@@ -227,9 +230,12 @@ var CinemaBadge = function CinemaBadge(_ref) {
   var _ref$fillColor = _ref.fillColor,
       fillColor = _ref$fillColor === void 0 ? exports.Colors.White : _ref$fillColor,
       _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'center' : _ref$align;
+      align = _ref$align === void 0 ? 'center' : _ref$align,
+      _ref$invert = _ref.invert,
+      invert = _ref$invert === void 0 ? false : _ref$invert;
+  var colour = invert ? exports.Colors.Black : fillColor;
   return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
-    fillColor: fillColor,
+    fillColor: colour,
     width: "100%",
     height: "100%",
     viewBox: "110 450 865 200",
@@ -7354,59 +7360,61 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14 || (
   return '';
 });
 
-var TEXT_STYLE_HTML_TAGS_REGEXP = '<em>|</em>|<b>|</b>';
 var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
   return htmlString.replace(/<[^>]*>/g, '');
 };
+var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
+  if (addDots === void 0) {
+    addDots = false;
+  }
 
-var getAllMatches = function getAllMatches(str, regExp) {
-  var allMatches = [];
-  var match;
+  var textContent = stripAllHtmlTags(htmlString);
 
-  while (match = regExp.exec(str)) {
-    allMatches.push({
-      value: match[0],
-      index: match.index
-    });
+  if (textContent.length <= resultLength) {
+    return htmlString;
   }
 
-  return allMatches;
-};
-
-var insertString = function insertString(mainString, str, position) {
-  return "" + mainString.substring(0, position) + str + mainString.substring(position);
-};
+  var accumulatedText = '';
+  var tagStack = [];
+  var charCount = 0;
 
-var insertHtmlTags = function insertHtmlTags(strWithTags, strWithoutTags, resultLength) {
-  var htmlTagPositions = getAllMatches(strWithTags, new RegExp(TEXT_STYLE_HTML_TAGS_REGEXP, 'g'));
-  var tagsLength = 0;
-  var resultString = strWithoutTags;
-  htmlTagPositions.forEach(function (tag) {
-    resultString = insertString(resultString, tag.value, tag.index);
-    if (tag.index - tagsLength <= resultLength) tagsLength += tag.value.length;
-  });
-  return {
-    stringWithInsertedTags: resultString,
-    tagsLength: tagsLength
+  var closeTags = function closeTags() {
+    while (tagStack.length > 0) {
+      accumulatedText += '</' + tagStack.pop() + '>';
+    }
   };
-};
 
-var truncateHtmlString = function truncateHtmlString(str, resultLength, addDots) {
-  if (addDots === void 0) {
-    addDots = false;
-  }
+  for (var i = 0; i < htmlString.length; i++) {
+    var _char = htmlString[i];
 
-  var strWithoutTags = stripAllHtmlTags(str);
-  if (strWithoutTags.length <= resultLength) return str;
+    if (_char === '<') {
+      accumulatedText += _char;
 
-  var _insertHtmlTags = insertHtmlTags(str, strWithoutTags, resultLength),
-      stringWithInsertedTags = _insertHtmlTags.stringWithInsertedTags,
-      tagsLength = _insertHtmlTags.tagsLength;
+      if (htmlString[i + 1] !== '/') {
+        var tagNameEnd = htmlString.indexOf('>', i);
+        var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
+        tagStack.push(tagName);
+        accumulatedText += tagName + ">";
+        i = tagNameEnd;
+      }
+    } else if (_char === '>') {
+      accumulatedText += _char;
+    } else if (charCount < resultLength) {
+      accumulatedText += _char;
+      charCount++;
+    }
 
-  var truncatedString = stringWithInsertedTags.substring(0, resultLength + tagsLength);
-  var isSpaceNext = strWithoutTags[resultLength] === ' ';
-  if (!isSpaceNext) truncatedString = truncatedString.substring(0, truncatedString.lastIndexOf(' '));
-  return addDots ? truncatedString + "..." : truncatedString;
+    if (charCount >= resultLength) {
+      if (addDots) {
+        accumulatedText += '...';
+      }
+
+      break;
+    }
+  }
+
+  closeTags();
+  return accumulatedText;
 };
 var truncate = function truncate(str, n) {
   return str.length >= n ? str.substring(0, n) : str;
@@ -8212,8 +8220,8 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
 };
 
 var _templateObject$_, _templateObject2$I, _templateObject3$z, _templateObject5$m, _templateObject6$h, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
-var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-overline-4);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
-var BrandingTextBody = /*#__PURE__*/styled__default.p(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
+var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-2);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
+var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
 var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
 var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
 var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    width: 210px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    svg {\n      width: 145px;\n    }\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n\n    svg {\n      width: 180px;\n    }\n  }\n"])), function (_ref) {
@@ -8316,10 +8324,14 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
       }, truncate(stripAllHtmlTags(brandingText), 25));
 
     case 'StreamLogo':
-      return /*#__PURE__*/React__default.createElement(StreamBadge, null);
+      return /*#__PURE__*/React__default.createElement(StreamBadge, {
+        invert: invert
+      });
 
     case 'CinemaLogo':
-      return /*#__PURE__*/React__default.createElement(CinemaBadge, null);
+      return /*#__PURE__*/React__default.createElement(CinemaBadge, {
+        invert: invert
+      });
 
     default:
       return null;