@royaloperahouse/chord 1.1.0-b-development → 1.2.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 (13) hide show
  1. package/CHANGELOG.md +3 -2
  2. package/dist/chord.cjs.development.js +56 -99
  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 +57 -100
  7. package/dist/chord.esm.js.map +1 -1
  8. package/dist/components/atoms/Typography/Typography.d.ts +1 -1
  9. package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +3 -5
  10. package/dist/types/editorial.d.ts +0 -16
  11. package/dist/types/typography.d.ts +1 -5
  12. package/package.json +1 -1
  13. package/dist/helpers/defaultValues.d.ts +0 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,8 @@
1
1
  # CHANGELOG
2
2
 
3
+ ## [1.2.0]
4
+ - Card: buttons do not change position on mobiles;
5
+
3
6
  ## [1.1.0]
4
7
  - TitleWithCTA: fix cases with a long title
5
8
  - Card: add pointer cursor to container
@@ -13,8 +16,6 @@
13
16
 
14
17
  ## [0.7.49]
15
18
  - Change button behaviour on stream and DED pages
16
- ## [0.7.50]
17
- - Add Static Actvivity Cards
18
19
 
19
20
  ## [0.7.48]
20
21
  - Add background themes to Information component
package/dist/chord.cjs.development.js CHANGED
@@ -2974,10 +2974,9 @@ var BodyText = function BodyText(_ref3) {
2974
2974
  }, children);
2975
2975
  };
2976
2976
  var Header = function Header(_ref4) {
2977
- var semanticLevel = _ref4.semanticLevel,
2978
- level = _ref4.level,
2977
+ var level = _ref4.level,
2979
2978
  children = _ref4.children;
2980
- var renderedTag = semanticLevel ? "h" + semanticLevel : "h" + level;
2979
+ var renderedTag = "h" + level;
2981
2980
  return /*#__PURE__*/React__default.createElement(StyledTag, {
2982
2981
  tag: renderedTag,
2983
2982
  typography: "header",
@@ -5698,41 +5697,47 @@ var PeopleListing = function PeopleListing(_ref) {
5698
5697
  }));
5699
5698
  };
5700
5699
 
5701
- var _templateObject$P, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$e, _templateObject6$b, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
5700
+ var _templateObject$P, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$e, _templateObject6$b, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15;
5702
5701
  var LENGTH_TEXT = 28;
5703
- var LENGTH_TEXT_TABLET$1 = 12;
5704
- var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
5705
- var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
5706
- var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
5707
- var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
5708
- var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
5702
+ var LENGTH_TEXT_TABLET$1 = 10;
5703
+ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
5709
5704
  var imageToLeft = _ref.imageToLeft;
5710
- return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
5705
+ return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
5711
5706
  }, devices.tablet, function (_ref2) {
5712
5707
  var imageToLeft = _ref2.imageToLeft;
5713
5708
  return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
5714
- }, devices.mobile, function (asCard) {
5715
- return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
5709
+ }, devices.mobile);
5710
+ var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
5711
+ var imageToLeft = _ref3.imageToLeft;
5712
+ return imageToLeft ? 'left' : 'right';
5713
+ }, devices.mobile);
5714
+ var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n display: ", ";\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
5715
+ var imageToLeft = _ref4.imageToLeft;
5716
+ return imageToLeft ? 'right' : 'left';
5717
+ }, devices.mobile, function (_ref5) {
5718
+ var hideSection = _ref5.hideSection;
5719
+ return hideSection ? 'none' : 'block';
5716
5720
  });
5717
- var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
5718
- var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref3) {
5719
- var theme = _ref3.theme;
5721
+ var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 16px;\n }\n"])));
5722
+ var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
5723
+ var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref6) {
5724
+ var theme = _ref6.theme;
5720
5725
  return theme.colors.black;
5721
- }, function (_ref4) {
5722
- var theme = _ref4.theme;
5726
+ }, function (_ref7) {
5727
+ var theme = _ref7.theme;
5723
5728
  return theme.colors.darkgrey;
5724
- }, function (_ref5) {
5725
- var theme = _ref5.theme;
5729
+ }, function (_ref8) {
5730
+ var theme = _ref8.theme;
5726
5731
  return theme.colors.primary;
5727
5732
  });
5728
- var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref6) {
5729
- var hasTextLinks = _ref6.hasTextLinks;
5733
+ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref9) {
5734
+ var hasTextLinks = _ref9.hasTextLinks;
5730
5735
  return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
5731
- }, function (_ref7) {
5732
- var _ref7$primaryButtonTe = _ref7.primaryButtonTextLength,
5733
- primaryButtonTextLength = _ref7$primaryButtonTe === void 0 ? 0 : _ref7$primaryButtonTe,
5734
- _ref7$tertiaryButtonT = _ref7.tertiaryButtonTextLength,
5735
- tertiaryButtonTextLength = _ref7$tertiaryButtonT === void 0 ? 0 : _ref7$tertiaryButtonT;
5736
+ }, function (_ref10) {
5737
+ var _ref10$primaryButtonT = _ref10.primaryButtonTextLength,
5738
+ primaryButtonTextLength = _ref10$primaryButtonT === void 0 ? 0 : _ref10$primaryButtonT,
5739
+ _ref10$tertiaryButton = _ref10.tertiaryButtonTextLength,
5740
+ tertiaryButtonTextLength = _ref10$tertiaryButton === void 0 ? 0 : _ref10$tertiaryButton;
5736
5741
  var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
5737
5742
 
5738
5743
  if (isLinksLayoutColumn) {
@@ -5740,11 +5745,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$j ||
5740
5745
  }
5741
5746
 
5742
5747
  return '';
5743
- }, devices.mobile, devices.tablet, function (_ref8) {
5744
- var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
5745
- primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
5746
- _ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
5747
- tertiaryButtonTextLength = _ref8$tertiaryButtonT === void 0 ? 0 : _ref8$tertiaryButtonT;
5748
+ }, devices.mobile, devices.tablet, function (_ref11) {
5749
+ var _ref11$primaryButtonT = _ref11.primaryButtonTextLength,
5750
+ primaryButtonTextLength = _ref11$primaryButtonT === void 0 ? 0 : _ref11$primaryButtonT,
5751
+ _ref11$tertiaryButton = _ref11.tertiaryButtonTextLength,
5752
+ tertiaryButtonTextLength = _ref11$tertiaryButton === void 0 ? 0 : _ref11$tertiaryButton;
5748
5753
  var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
5749
5754
 
5750
5755
  if (isLinksLayoutColumnTablet) {
@@ -5753,40 +5758,22 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$j ||
5753
5758
 
5754
5759
  return '';
5755
5760
  });
5756
- var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref9) {
5757
- var marginBottom = _ref9.marginBottom;
5761
+ var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref12) {
5762
+ var marginBottom = _ref12.marginBottom;
5758
5763
  return marginBottom + "px";
5759
5764
  });
5760
- var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
5761
- var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
5762
- var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
5763
- var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
5764
- var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
5765
- var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n"])));
5766
- var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
5767
- var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
5768
- var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
5769
- var asCardOverrides = /*#__PURE__*/styled.css(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n font-size: var(--font-size-subtitle-2);\n }\n\n ", " {\n font-size: var(--font-size-overline-1);\n }\n\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet);
5770
- var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref10) {
5771
- var imageToLeft = _ref10.imageToLeft;
5772
- return imageToLeft ? 'left' : 'right';
5773
- }, devices.mobile);
5774
- var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n display: ", ";\n grid-area: row2;\n align-self: start;\n }\n }\n\n ", "\n"])), function (_ref11) {
5775
- var imageToLeft = _ref11.imageToLeft;
5776
- return imageToLeft ? 'right' : 'left';
5777
- }, devices.mobile, function (_ref12) {
5778
- var hideSection = _ref12.hideSection;
5779
- return hideSection ? 'none' : 'block';
5780
- }, function (asCard) {
5781
- return asCard && asCardOverrides;
5782
- });
5783
- var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 16px;\n }\n"])));
5765
+ var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
5766
+ var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
5767
+ var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
5768
+ var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
5769
+ var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
5770
+ var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n"])));
5771
+ var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
5784
5772
 
5785
5773
  var _excluded$j = ["text"],
5786
5774
  _excluded2$3 = ["text"],
5787
5775
  _excluded3 = ["text"];
5788
5776
  var LENGTH_TEXT$1 = 28;
5789
- var LENGTH_TEXT_PARAGRAPH = 130;
5790
5777
 
5791
5778
  var PromoWithTags = function PromoWithTags(_ref) {
5792
5779
  var _ref$imagePosition = _ref.imagePosition,
@@ -5804,13 +5791,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
5804
5791
  belowTitleTags = _ref.belowTitleTags,
5805
5792
  middleText = _ref.middleText,
5806
5793
  bottomText = _ref.bottomText,
5807
- image = _ref.image,
5808
- _ref$asCard = _ref.asCard,
5809
- asCard = _ref$asCard === void 0 ? false : _ref$asCard,
5810
- _ref$disableCTA = _ref.disableCTA,
5811
- disableCTA = _ref$disableCTA === void 0 ? false : _ref$disableCTA,
5812
- _ref$disabledCTACopy = _ref.disabledCTACopy,
5813
- disabledCTACopy = _ref$disabledCTACopy === void 0 ? 'Sold Out' : _ref$disabledCTACopy;
5794
+ image = _ref.image;
5814
5795
 
5815
5796
  var _useState = React.useState(false),
5816
5797
  showExtraContent = _useState[0],
@@ -5820,20 +5801,8 @@ var PromoWithTags = function PromoWithTags(_ref) {
5820
5801
  return str.length >= n ? str.substr(0, n) : str;
5821
5802
  };
5822
5803
 
5823
- var getTitleLevel = function getTitleLevel(titleSize, isCard) {
5824
- if (isCard) {
5825
- return 5;
5826
- }
5827
-
5828
- if (titleSize === 'large') {
5829
- return 3;
5830
- }
5831
-
5832
- return 2;
5833
- };
5834
-
5835
5804
  var imageToLeft = imagePosition === 'left';
5836
- var titleLevel = getTitleLevel(titleSize, asCard);
5805
+ var titleLevel = titleSize === 'large' ? 2 : 3;
5837
5806
  var isExtraContentPresent = !!children;
5838
5807
  var anchorLink = title.replace(' ', '-').toLocaleLowerCase() + "-content";
5839
5808
 
@@ -5863,7 +5832,6 @@ var PromoWithTags = function PromoWithTags(_ref) {
5863
5832
  restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
5864
5833
 
5865
5834
  var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$1);
5866
- var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
5867
5835
  var textLinkItems = textLinks ? textLinks.map(function (link) {
5868
5836
  var _link$text = link.text,
5869
5837
  textLinkText = _link$text === void 0 ? '' : _link$text,
@@ -5873,28 +5841,24 @@ var PromoWithTags = function PromoWithTags(_ref) {
5873
5841
  }) : null;
5874
5842
  return /*#__PURE__*/React__default.createElement(PromoWithTagsGrid, {
5875
5843
  id: anchorLink,
5876
- "data-testid": "grid-wrapper",
5877
- imageToLeft: imageToLeft,
5878
- asCard: asCard
5844
+ imageToLeft: imageToLeft
5879
5845
  }, /*#__PURE__*/React__default.createElement(PromoWithTagsContentWrapper, {
5880
5846
  "data-testid": "content-wrapper",
5881
5847
  imageToLeft: imageToLeft,
5882
- hideSection: showExtraContent,
5883
- asCard: asCard
5848
+ hideSection: showExtraContent
5884
5849
  }, /*#__PURE__*/React__default.createElement(PromoWithTagsContainer, null, !!(aboveTitleTags != null && aboveTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
5885
5850
  marginBottom: 16
5886
- }, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
5851
+ }, /*#__PURE__*/React__default.createElement(TypeTags, {
5887
5852
  list: aboveTitleTags
5888
- })), /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
5889
- semanticLevel: 2,
5853
+ })), /*#__PURE__*/React__default.createElement(Header, {
5890
5854
  level: titleLevel
5891
5855
  }, title)), subtitle && /*#__PURE__*/React__default.createElement(PromoWithTagsSubtitle, null, subtitle), !!(belowTitleTags != null && belowTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
5892
5856
  marginBottom: 8
5893
- }, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
5857
+ }, /*#__PURE__*/React__default.createElement(TypeTags, {
5894
5858
  list: belowTitleTags
5895
5859
  })), /*#__PURE__*/React__default.createElement(PromoWithTagsText, {
5896
5860
  dangerouslySetInnerHTML: {
5897
- __html: textTruncate
5861
+ __html: text
5898
5862
  }
5899
5863
  }), middleText && /*#__PURE__*/React__default.createElement(PromoWithTagsAdditionalText, {
5900
5864
  dangerouslySetInnerHTML: {
@@ -5909,19 +5873,12 @@ var PromoWithTags = function PromoWithTags(_ref) {
5909
5873
  "data-testid": "buttons-wrapper",
5910
5874
  primaryButtonTextLength: primaryButtonText.length,
5911
5875
  tertiaryButtonTextLength: tertiaryButtonText.length
5912
- }, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null, disableCTA ? /*#__PURE__*/React__default.createElement(PrimaryButton, {
5913
- bgColor: exports.Colors.MidGrey,
5914
- onClick: function onClick() {
5915
- return null;
5916
- },
5917
- "data-testid": "diabled-link"
5918
- }, disabledCTACopy || primaryButtonTextTruncate) : !showExtraContent && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
5876
+ }, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null, !showExtraContent && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
5919
5877
  onClick: defaultOnClickHandler
5920
5878
  }, restPrimaryButton), primaryButtonTextTruncate)), tertiaryButton && /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate))), /*#__PURE__*/React__default.createElement(PromoWithTagsExtraContentWrapper, {
5921
5879
  "data-testid": "extra-content-wrapper",
5922
5880
  imageToLeft: imageToLeft
5923
- }, showExtraContent && /*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
5924
- semanticLevel: 2,
5881
+ }, showExtraContent && /*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
5925
5882
  level: titleLevel
5926
5883
  }, title)), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
5927
5884
  aspectRatio: exports.AspectRatio['4:3']