@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.
Files changed (9) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/dist/chord.cjs.development.js +21 -7
  3. package/dist/chord.cjs.development.js.map +1 -1
  4. package/dist/chord.cjs.production.min.js +1 -1
  5. package/dist/chord.cjs.production.min.js.map +1 -1
  6. package/dist/chord.esm.js +21 -7
  7. package/dist/chord.esm.js.map +1 -1
  8. package/dist/components/molecules/PageHeading/PageHeading.style.d.ts +6 -3
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,8 @@
1
1
  # CHANGELOG
2
2
 
3
+ ## [1.5.0]
4
+ - PageHeading: decrease header height when title is not available
5
+
3
6
  ## [1.4.0]
4
7
  - ImpactHeader: make it possible to pass custom image as a sponsor logo
5
8
 
package/dist/chord.cjs.development.js CHANGED
@@ -5488,13 +5488,22 @@ var Information = function Information(_ref) {
5488
5488
  };
5489
5489
 
5490
5490
  var _templateObject$L, _templateObject2$v, _templateObject3$m, _templateObject4$g, _templateObject5$b, _templateObject6$8, _templateObject7$5, _templateObject8$5;
5491
- var PageHeadingWrapper = /*#__PURE__*/styled__default.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) {
5491
+ var PageHeadingWrapper = /*#__PURE__*/styled__default.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) {
5492
5492
  var theme = _ref.theme;
5493
5493
  return theme.colors.primary;
5494
+ }, function (_ref2) {
5495
+ var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
5496
+ return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
5494
5497
  }, devices.mobile);
5495
5498
  var PageHeadingGrid = /*#__PURE__*/styled__default(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);
5496
- var TitleWrapper$1 = /*#__PURE__*/styled__default.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);
5497
- var ChildrenWrapper = /*#__PURE__*/styled__default.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);
5499
+ var TitleWrapper$1 = /*#__PURE__*/styled__default.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) {
5500
+ var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
5501
+ return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
5502
+ }, devices.mobile);
5503
+ var ChildrenWrapper = /*#__PURE__*/styled__default.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) {
5504
+ var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
5505
+ return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
5506
+ }, devices.mobile);
5498
5507
  var TextWrapper = /*#__PURE__*/styled__default.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"])));
5499
5508
  var LogoWrapper$1 = /*#__PURE__*/styled__default.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);
5500
5509
  var ButtonWrapper$1 = /*#__PURE__*/styled__default.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);
@@ -5515,12 +5524,17 @@ var PageHeading = function PageHeading(_ref) {
5515
5524
  restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
5516
5525
 
5517
5526
  var truncatedText = text == null ? void 0 : text.substring(0, 250);
5518
- var truncatedTitle = title.substring(0, 40);
5527
+ var truncatedTitle = title && title.substring(0, 40);
5528
+ var isTitleUnAvailable = !title;
5519
5529
  return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
5520
- "data-testid": "page-heading-wrapper"
5530
+ "data-testid": "page-heading-wrapper",
5531
+ isPageHeadingWithoutTitle: isTitleUnAvailable
5521
5532
  }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
5522
- "data-testid": "page-heading-title"
5523
- }, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, null, children) : null, /*#__PURE__*/React__default.createElement(Header, {
5533
+ "data-testid": "page-heading-title",
5534
+ isPageHeadingWithoutTitle: isTitleUnAvailable
5535
+ }, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, {
5536
+ isPageHeadingWithoutTitle: isTitleUnAvailable
5537
+ }, children) : null, !isTitleUnAvailable && /*#__PURE__*/React__default.createElement(Header, {
5524
5538
  level: 2
5525
5539
  }, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
5526
5540
  "data-testid": "page-heading-text"