@royaloperahouse/chord 1.2.0 → 1.3.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/CHANGELOG.md +3 -0
- package/dist/chord.cjs.development.js +99 -56
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +100 -57
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/Typography/Typography.d.ts +1 -1
- package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +5 -3
- package/dist/helpers/defaultValues.d.ts +7 -0
- package/dist/types/editorial.d.ts +16 -0
- package/dist/types/typography.d.ts +5 -1
- package/package.json +1 -1
package/dist/chord.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, useMemo } from 'react';
|
|
2
|
-
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
2
|
+
import styled, { ThemeProvider, css, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
|
|
4
4
|
import 'swiper/swiper-bundle.css';
|
|
5
5
|
|
|
@@ -2978,9 +2978,10 @@ var BodyText = function BodyText(_ref3) {
|
|
|
2978
2978
|
}, children);
|
|
2979
2979
|
};
|
|
2980
2980
|
var Header = function Header(_ref4) {
|
|
2981
|
-
var
|
|
2981
|
+
var semanticLevel = _ref4.semanticLevel,
|
|
2982
|
+
level = _ref4.level,
|
|
2982
2983
|
children = _ref4.children;
|
|
2983
|
-
var renderedTag = "h" + level;
|
|
2984
|
+
var renderedTag = semanticLevel ? "h" + semanticLevel : "h" + level;
|
|
2984
2985
|
return /*#__PURE__*/React__default.createElement(StyledTag, {
|
|
2985
2986
|
tag: renderedTag,
|
|
2986
2987
|
typography: "header",
|
|
@@ -5701,47 +5702,41 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5701
5702
|
}));
|
|
5702
5703
|
};
|
|
5703
5704
|
|
|
5704
|
-
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;
|
|
5705
|
+
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;
|
|
5705
5706
|
var LENGTH_TEXT = 28;
|
|
5706
|
-
var LENGTH_TEXT_TABLET$1 =
|
|
5707
|
-
var
|
|
5707
|
+
var LENGTH_TEXT_TABLET$1 = 12;
|
|
5708
|
+
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
5709
|
+
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
5710
|
+
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
5711
|
+
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
5712
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(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) {
|
|
5708
5713
|
var imageToLeft = _ref.imageToLeft;
|
|
5709
|
-
return imageToLeft ?
|
|
5714
|
+
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
5710
5715
|
}, devices.tablet, function (_ref2) {
|
|
5711
5716
|
var imageToLeft = _ref2.imageToLeft;
|
|
5712
5717
|
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'";
|
|
5713
|
-
}, devices.mobile)
|
|
5714
|
-
|
|
5715
|
-
var imageToLeft = _ref3.imageToLeft;
|
|
5716
|
-
return imageToLeft ? 'left' : 'right';
|
|
5717
|
-
}, devices.mobile);
|
|
5718
|
-
var PromoWithTagsContentWrapper = /*#__PURE__*/styled.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) {
|
|
5719
|
-
var imageToLeft = _ref4.imageToLeft;
|
|
5720
|
-
return imageToLeft ? 'right' : 'left';
|
|
5721
|
-
}, devices.mobile, function (_ref5) {
|
|
5722
|
-
var hideSection = _ref5.hideSection;
|
|
5723
|
-
return hideSection ? 'none' : 'block';
|
|
5718
|
+
}, devices.mobile, function (asCard) {
|
|
5719
|
+
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
5724
5720
|
});
|
|
5725
|
-
var
|
|
5726
|
-
var
|
|
5727
|
-
var
|
|
5728
|
-
var theme = _ref6.theme;
|
|
5721
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled.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"])));
|
|
5722
|
+
var PromoWithTagsText = /*#__PURE__*/styled.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) {
|
|
5723
|
+
var theme = _ref3.theme;
|
|
5729
5724
|
return theme.colors.black;
|
|
5730
|
-
}, function (
|
|
5731
|
-
var theme =
|
|
5725
|
+
}, function (_ref4) {
|
|
5726
|
+
var theme = _ref4.theme;
|
|
5732
5727
|
return theme.colors.darkgrey;
|
|
5733
|
-
}, function (
|
|
5734
|
-
var theme =
|
|
5728
|
+
}, function (_ref5) {
|
|
5729
|
+
var theme = _ref5.theme;
|
|
5735
5730
|
return theme.colors.primary;
|
|
5736
5731
|
});
|
|
5737
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(
|
|
5738
|
-
var hasTextLinks =
|
|
5732
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.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) {
|
|
5733
|
+
var hasTextLinks = _ref6.hasTextLinks;
|
|
5739
5734
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
5740
|
-
}, function (
|
|
5741
|
-
var
|
|
5742
|
-
primaryButtonTextLength =
|
|
5743
|
-
|
|
5744
|
-
tertiaryButtonTextLength =
|
|
5735
|
+
}, function (_ref7) {
|
|
5736
|
+
var _ref7$primaryButtonTe = _ref7.primaryButtonTextLength,
|
|
5737
|
+
primaryButtonTextLength = _ref7$primaryButtonTe === void 0 ? 0 : _ref7$primaryButtonTe,
|
|
5738
|
+
_ref7$tertiaryButtonT = _ref7.tertiaryButtonTextLength,
|
|
5739
|
+
tertiaryButtonTextLength = _ref7$tertiaryButtonT === void 0 ? 0 : _ref7$tertiaryButtonT;
|
|
5745
5740
|
var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
|
|
5746
5741
|
|
|
5747
5742
|
if (isLinksLayoutColumn) {
|
|
@@ -5749,11 +5744,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templat
|
|
|
5749
5744
|
}
|
|
5750
5745
|
|
|
5751
5746
|
return '';
|
|
5752
|
-
}, devices.mobile, devices.tablet, function (
|
|
5753
|
-
var
|
|
5754
|
-
primaryButtonTextLength =
|
|
5755
|
-
|
|
5756
|
-
tertiaryButtonTextLength =
|
|
5747
|
+
}, devices.mobile, devices.tablet, function (_ref8) {
|
|
5748
|
+
var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
|
|
5749
|
+
primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
|
|
5750
|
+
_ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
|
|
5751
|
+
tertiaryButtonTextLength = _ref8$tertiaryButtonT === void 0 ? 0 : _ref8$tertiaryButtonT;
|
|
5757
5752
|
var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
|
|
5758
5753
|
|
|
5759
5754
|
if (isLinksLayoutColumnTablet) {
|
|
@@ -5762,22 +5757,40 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templat
|
|
|
5762
5757
|
|
|
5763
5758
|
return '';
|
|
5764
5759
|
});
|
|
5765
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(
|
|
5766
|
-
var marginBottom =
|
|
5760
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref9) {
|
|
5761
|
+
var marginBottom = _ref9.marginBottom;
|
|
5767
5762
|
return marginBottom + "px";
|
|
5768
5763
|
});
|
|
5769
|
-
var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(
|
|
5770
|
-
var TextLinksContainer = /*#__PURE__*/styled.div(
|
|
5771
|
-
var TextLinkWrapper$2 = /*#__PURE__*/styled.div(
|
|
5772
|
-
var ExtraContentWrapper = /*#__PURE__*/styled.div(
|
|
5773
|
-
var IconWrapper$2 = /*#__PURE__*/styled.div(
|
|
5774
|
-
var PrimaryButtonWrapper$2 = /*#__PURE__*/styled.div(
|
|
5775
|
-
var MobileTitleWrapper = /*#__PURE__*/styled.div(
|
|
5764
|
+
var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
|
|
5765
|
+
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
5766
|
+
var TextLinkWrapper$2 = /*#__PURE__*/styled.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"])));
|
|
5767
|
+
var ExtraContentWrapper = /*#__PURE__*/styled.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);
|
|
5768
|
+
var IconWrapper$2 = /*#__PURE__*/styled.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);
|
|
5769
|
+
var PrimaryButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n"])));
|
|
5770
|
+
var MobileTitleWrapper = /*#__PURE__*/styled.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);
|
|
5771
|
+
var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
5772
|
+
var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
5773
|
+
var asCardOverrides = /*#__PURE__*/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);
|
|
5774
|
+
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.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) {
|
|
5775
|
+
var imageToLeft = _ref10.imageToLeft;
|
|
5776
|
+
return imageToLeft ? 'left' : 'right';
|
|
5777
|
+
}, devices.mobile);
|
|
5778
|
+
var PromoWithTagsContentWrapper = /*#__PURE__*/styled.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) {
|
|
5779
|
+
var imageToLeft = _ref11.imageToLeft;
|
|
5780
|
+
return imageToLeft ? 'right' : 'left';
|
|
5781
|
+
}, devices.mobile, function (_ref12) {
|
|
5782
|
+
var hideSection = _ref12.hideSection;
|
|
5783
|
+
return hideSection ? 'none' : 'block';
|
|
5784
|
+
}, function (asCard) {
|
|
5785
|
+
return asCard && asCardOverrides;
|
|
5786
|
+
});
|
|
5787
|
+
var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 16px;\n }\n"])));
|
|
5776
5788
|
|
|
5777
5789
|
var _excluded$j = ["text"],
|
|
5778
5790
|
_excluded2$3 = ["text"],
|
|
5779
5791
|
_excluded3 = ["text"];
|
|
5780
5792
|
var LENGTH_TEXT$1 = 28;
|
|
5793
|
+
var LENGTH_TEXT_PARAGRAPH = 130;
|
|
5781
5794
|
|
|
5782
5795
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
5783
5796
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -5795,7 +5808,13 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5795
5808
|
belowTitleTags = _ref.belowTitleTags,
|
|
5796
5809
|
middleText = _ref.middleText,
|
|
5797
5810
|
bottomText = _ref.bottomText,
|
|
5798
|
-
image = _ref.image
|
|
5811
|
+
image = _ref.image,
|
|
5812
|
+
_ref$asCard = _ref.asCard,
|
|
5813
|
+
asCard = _ref$asCard === void 0 ? false : _ref$asCard,
|
|
5814
|
+
_ref$disableCTA = _ref.disableCTA,
|
|
5815
|
+
disableCTA = _ref$disableCTA === void 0 ? false : _ref$disableCTA,
|
|
5816
|
+
_ref$disabledCTACopy = _ref.disabledCTACopy,
|
|
5817
|
+
disabledCTACopy = _ref$disabledCTACopy === void 0 ? 'Sold Out' : _ref$disabledCTACopy;
|
|
5799
5818
|
|
|
5800
5819
|
var _useState = useState(false),
|
|
5801
5820
|
showExtraContent = _useState[0],
|
|
@@ -5805,8 +5824,20 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5805
5824
|
return str.length >= n ? str.substr(0, n) : str;
|
|
5806
5825
|
};
|
|
5807
5826
|
|
|
5827
|
+
var getTitleLevel = function getTitleLevel(titleSize, isCard) {
|
|
5828
|
+
if (isCard) {
|
|
5829
|
+
return 5;
|
|
5830
|
+
}
|
|
5831
|
+
|
|
5832
|
+
if (titleSize === 'large') {
|
|
5833
|
+
return 3;
|
|
5834
|
+
}
|
|
5835
|
+
|
|
5836
|
+
return 2;
|
|
5837
|
+
};
|
|
5838
|
+
|
|
5808
5839
|
var imageToLeft = imagePosition === 'left';
|
|
5809
|
-
var titleLevel = titleSize
|
|
5840
|
+
var titleLevel = getTitleLevel(titleSize, asCard);
|
|
5810
5841
|
var isExtraContentPresent = !!children;
|
|
5811
5842
|
var anchorLink = title.replace(' ', '-').toLocaleLowerCase() + "-content";
|
|
5812
5843
|
|
|
@@ -5836,6 +5867,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5836
5867
|
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
|
|
5837
5868
|
|
|
5838
5869
|
var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$1);
|
|
5870
|
+
var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
|
|
5839
5871
|
var textLinkItems = textLinks ? textLinks.map(function (link) {
|
|
5840
5872
|
var _link$text = link.text,
|
|
5841
5873
|
textLinkText = _link$text === void 0 ? '' : _link$text,
|
|
@@ -5845,24 +5877,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5845
5877
|
}) : null;
|
|
5846
5878
|
return /*#__PURE__*/React__default.createElement(PromoWithTagsGrid, {
|
|
5847
5879
|
id: anchorLink,
|
|
5848
|
-
|
|
5880
|
+
"data-testid": "grid-wrapper",
|
|
5881
|
+
imageToLeft: imageToLeft,
|
|
5882
|
+
asCard: asCard
|
|
5849
5883
|
}, /*#__PURE__*/React__default.createElement(PromoWithTagsContentWrapper, {
|
|
5850
5884
|
"data-testid": "content-wrapper",
|
|
5851
5885
|
imageToLeft: imageToLeft,
|
|
5852
|
-
hideSection: showExtraContent
|
|
5886
|
+
hideSection: showExtraContent,
|
|
5887
|
+
asCard: asCard
|
|
5853
5888
|
}, /*#__PURE__*/React__default.createElement(PromoWithTagsContainer, null, !!(aboveTitleTags != null && aboveTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
5854
5889
|
marginBottom: 16
|
|
5855
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
5890
|
+
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
|
|
5856
5891
|
list: aboveTitleTags
|
|
5857
|
-
})), /*#__PURE__*/React__default.createElement(
|
|
5892
|
+
})), /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
|
|
5893
|
+
semanticLevel: 2,
|
|
5858
5894
|
level: titleLevel
|
|
5859
5895
|
}, title)), subtitle && /*#__PURE__*/React__default.createElement(PromoWithTagsSubtitle, null, subtitle), !!(belowTitleTags != null && belowTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
5860
5896
|
marginBottom: 8
|
|
5861
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
5897
|
+
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
|
|
5862
5898
|
list: belowTitleTags
|
|
5863
5899
|
})), /*#__PURE__*/React__default.createElement(PromoWithTagsText, {
|
|
5864
5900
|
dangerouslySetInnerHTML: {
|
|
5865
|
-
__html:
|
|
5901
|
+
__html: textTruncate
|
|
5866
5902
|
}
|
|
5867
5903
|
}), middleText && /*#__PURE__*/React__default.createElement(PromoWithTagsAdditionalText, {
|
|
5868
5904
|
dangerouslySetInnerHTML: {
|
|
@@ -5877,12 +5913,19 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5877
5913
|
"data-testid": "buttons-wrapper",
|
|
5878
5914
|
primaryButtonTextLength: primaryButtonText.length,
|
|
5879
5915
|
tertiaryButtonTextLength: tertiaryButtonText.length
|
|
5880
|
-
}, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null,
|
|
5916
|
+
}, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null, disableCTA ? /*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
5917
|
+
bgColor: Colors.MidGrey,
|
|
5918
|
+
onClick: function onClick() {
|
|
5919
|
+
return null;
|
|
5920
|
+
},
|
|
5921
|
+
"data-testid": "diabled-link"
|
|
5922
|
+
}, disabledCTACopy || primaryButtonTextTruncate) : !showExtraContent && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
|
|
5881
5923
|
onClick: defaultOnClickHandler
|
|
5882
5924
|
}, restPrimaryButton), primaryButtonTextTruncate)), tertiaryButton && /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate))), /*#__PURE__*/React__default.createElement(PromoWithTagsExtraContentWrapper, {
|
|
5883
5925
|
"data-testid": "extra-content-wrapper",
|
|
5884
5926
|
imageToLeft: imageToLeft
|
|
5885
|
-
}, showExtraContent && /*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(
|
|
5927
|
+
}, showExtraContent && /*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
|
|
5928
|
+
semanticLevel: 2,
|
|
5886
5929
|
level: titleLevel
|
|
5887
5930
|
}, title)), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
5888
5931
|
aspectRatio: AspectRatio['4:3']
|