@royaloperahouse/chord 1.4.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/chord.esm.js CHANGED
@@ -5492,13 +5492,22 @@ var Information = function Information(_ref) {
5492
5492
  };
5493
5493
 
5494
5494
  var _templateObject$L, _templateObject2$v, _templateObject3$m, _templateObject4$g, _templateObject5$b, _templateObject6$8, _templateObject7$5, _templateObject8$5;
5495
- var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
5495
+ var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
5496
5496
  var theme = _ref.theme;
5497
5497
  return theme.colors.primary;
5498
+ }, function (_ref2) {
5499
+ var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
5500
+ return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
5498
5501
  }, devices.mobile);
5499
5502
  var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
5500
- var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), devices.mobile);
5501
- var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), devices.mobile);
5503
+ var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
5504
+ var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
5505
+ return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
5506
+ }, devices.mobile);
5507
+ var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n ", ";\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), function (_ref4) {
5508
+ var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
5509
+ return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
5510
+ }, devices.mobile);
5502
5511
  var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
5503
5512
  var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
5504
5513
  var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
@@ -5519,12 +5528,17 @@ var PageHeading = function PageHeading(_ref) {
5519
5528
  restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
5520
5529
 
5521
5530
  var truncatedText = text == null ? void 0 : text.substring(0, 250);
5522
- var truncatedTitle = title.substring(0, 40);
5531
+ var truncatedTitle = title && title.substring(0, 40);
5532
+ var isTitleUnAvailable = !title;
5523
5533
  return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
5524
- "data-testid": "page-heading-wrapper"
5534
+ "data-testid": "page-heading-wrapper",
5535
+ isPageHeadingWithoutTitle: isTitleUnAvailable
5525
5536
  }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
5526
- "data-testid": "page-heading-title"
5527
- }, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, null, children) : null, /*#__PURE__*/React__default.createElement(Header, {
5537
+ "data-testid": "page-heading-title",
5538
+ isPageHeadingWithoutTitle: isTitleUnAvailable
5539
+ }, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, {
5540
+ isPageHeadingWithoutTitle: isTitleUnAvailable
5541
+ }, children) : null, !isTitleUnAvailable && /*#__PURE__*/React__default.createElement(Header, {
5528
5542
  level: 2
5529
5543
  }, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
5530
5544
  "data-testid": "page-heading-text"