@quintype/arrow 3.15.1-perf.2 → 3.15.1-perf.3
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/atoms/Author/index.js +38 -29
- package/atoms/AuthorWithTime/index.js +83 -73
- package/atoms/CollectionName/index.js +40 -30
- package/atoms/ExtendedLoadMore/{index-d0f6c865.js → index-3976fac4.js} +59 -51
- package/atoms/ExtendedLoadMore/{index-1e444d20.js → index-3c4ac692.js} +243 -208
- package/atoms/ExtendedLoadMore/index-4ddfe28d.js +93 -0
- package/atoms/ExtendedLoadMore/{index-c61a16dc.js → index-5c8eda4a.js} +88 -80
- package/atoms/ExtendedLoadMore/{index-1256e453.js → index-6e083738.js} +60 -52
- package/atoms/ExtendedLoadMore/{index-fd651f70.js → index-6ecceae4.js} +58 -50
- package/atoms/ExtendedLoadMore/{index-4356ce04.js → index-9e0d32b7.js} +76 -68
- package/atoms/ExtendedLoadMore/{index-beed3a68.js → index-a5c95f84.js} +70 -62
- package/atoms/ExtendedLoadMore/{index-0519e570.js → index-b22f1843.js} +70 -62
- package/atoms/ExtendedLoadMore/{index-e4cf9cb7.js → index-b5936059.js} +72 -64
- package/atoms/ExtendedLoadMore/{index-aba6b278.js → index-bc129cb8.js} +57 -49
- package/atoms/ExtendedLoadMore/{index-ad3c83c3.js → index-e7cde739.js} +74 -46
- package/atoms/ExtendedLoadMore/{index-c2f73d18.js → index-fee73a14.js} +62 -54
- package/atoms/ExtendedLoadMore/index.js +13 -5
- package/atoms/ExtendedLoadMore/styles.arrow.css +1 -1
- package/atoms/Headline/index.js +85 -76
- package/atoms/HeroImage/index.js +69 -60
- package/atoms/LoadmoreButton/index.js +32 -23
- package/atoms/ScrollSnap/index.js +72 -63
- package/atoms/SectionTag/index.js +34 -25
- package/atoms/Subheadline/index.js +31 -22
- package/atoms/TimeStamp/index.js +34 -24
- package/molecules/KeyEvents/index.js +72 -61
- package/molecules/PageIntroductionCard/index.js +43 -34
- package/molecules/SocialShareTemplate/index.js +97 -88
- package/molecules/StoryCard/index.js +242 -232
- package/molecules/StoryElementCard/index.js +512 -483
- package/molecules/StorycardContent/index.js +172 -162
- package/package.json +1 -1
- package/rows/AlternateCollectionFilter/index.js +345 -333
- package/rows/AsideCollection/index.js +340 -328
- package/rows/AstrologyCollection/index.js +321 -309
- package/rows/AuthorIntroductionCard/index.js +157 -148
- package/rows/AuthorsList/index.js +184 -174
- package/rows/CollectionFilter/index.js +361 -349
- package/rows/ElevenStories/index.js +357 -346
- package/rows/FourColFiveStories/index.js +304 -274
- package/rows/FourColGrid/index.js +351 -321
- package/rows/FourColPortraitStories/index.js +357 -327
- package/rows/FourColSixteenStories/index.js +288 -277
- package/rows/FourColTwelveStories/index.js +315 -304
- package/rows/FourStorySlider/index.js +358 -347
- package/rows/FourStorySliderPortrait/index.js +359 -348
- package/rows/FourTabbedBigStorySlider/index.js +322 -311
- package/rows/FullScreenSlider/index.js +336 -325
- package/rows/HalfScreenSlider/index.js +308 -297
- package/rows/ListComponent/index.js +322 -311
- package/rows/Listicles/index.js +150 -139
- package/rows/MagazineEditions/index.js +104 -93
- package/rows/MagazineHeaderCard/index.js +104 -93
- package/rows/MagazineWidget/index.js +326 -315
- package/rows/OneColStoryList/index.js +365 -335
- package/rows/OpinionCollection/index.js +250 -220
- package/rows/SixColSixStories/index.js +333 -303
- package/rows/StoryCollection/index.js +340 -328
- package/rows/TagIntroductionCard/index.js +30 -21
- package/rows/ThreeColFlexStories/index.js +348 -318
- package/rows/ThreeColFourteenStories/index.js +285 -274
- package/rows/ThreeColGrid/index.js +352 -322
- package/rows/ThreeColSevenStory/index.js +322 -311
- package/rows/ThreeColSixStories/index.js +323 -312
- package/rows/ThreeColTwelveStories/index.js +302 -291
- package/rows/TwoColFourStories/index.js +316 -305
- package/rows/TwoColFourStoryHighlight/index.js +317 -306
- package/rows/TwoColSevenStories/index.js +322 -311
- package/rows/TwoColSixStories/index.js +316 -305
- package/rows/TwoColTenStoriesSidebar/index.js +338 -327
- package/rows/TwoColThreeStories/index.js +316 -305
- package/story-elements/AlsoRead/index.js +70 -61
- package/story-elements/Attachment/index.js +40 -31
- package/story-elements/BigFact/index.js +35 -26
- package/story-elements/BlockQuote/index.js +61 -51
- package/story-elements/Blurb/index.js +36 -27
- package/story-elements/Image/index.js +113 -86
- package/story-elements/ImageGallery/index.js +98 -71
- package/story-elements/ImageSlideshow/index.js +147 -120
- package/story-elements/QuestionAnswer/index.js +55 -46
- package/story-elements/Quote/index.js +37 -28
- package/story-elements/Reference/index.js +40 -31
- package/story-elements/StoryElement/index.js +28 -19
- package/story-elements/Summary/index.js +40 -31
- package/story-elements/Text/index.js +34 -25
- package/story-elements/Video/index.js +29 -20
- package/story-templates/ListicleStoryTemplate/index.js +937 -908
- package/story-templates/LiveBlogStoryTemplate/index.js +942 -913
- package/story-templates/PhotoStoryTemplate/index.js +912 -883
- package/story-templates/TextStoryTemplate/index.js +931 -902
- package/story-templates/VideoStoryTemplate/index.js +897 -868
- package/atoms/ExtendedLoadMore/index-81eb3978.js +0 -86
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-e7cde739.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var index$2 = require('./index-3c4ac692.js');
|
|
6
|
+
var index$1 = require('./index-5c8eda4a.js');
|
|
7
|
+
var PropTypes = require('prop-types');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
|
+
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
13
|
+
|
|
14
|
+
var _styleModuleImportMap = {
|
|
15
|
+
"./storycardContent.m.css": {
|
|
16
|
+
"wrapper": "storycardContent-m_wrapper__TEmfA",
|
|
17
|
+
"horizontal-content-wrapper": "storycardContent-m_horizontal-content-wrapper__NgpuC",
|
|
18
|
+
"border-full": "storycardContent-m_border-full__2km37"
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
var StorycardContent = function StorycardContent(_ref) {
|
|
22
|
+
var story = _ref.story,
|
|
23
|
+
children = _ref.children,
|
|
24
|
+
theme = _ref.theme,
|
|
25
|
+
border = _ref.border,
|
|
26
|
+
isHorizontalMobile = _ref.isHorizontalMobile,
|
|
27
|
+
headerLevel = _ref.headerLevel,
|
|
28
|
+
borderColor = _ref.borderColor,
|
|
29
|
+
config = _ref.config;
|
|
30
|
+
var textColor = index.getTextColor(theme);
|
|
31
|
+
var borderOptions = ["full"];
|
|
32
|
+
var SectionTagborderColor = index.rgbToHex(borderColor);
|
|
33
|
+
var borderTemplate = borderOptions.includes(border) ? "border-".concat(border) : "";
|
|
34
|
+
var horizontalCard = isHorizontalMobile ? "horizontal-content-wrapper" : "";
|
|
35
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
36
|
+
"data-test-id": "story-card-content",
|
|
37
|
+
style: {
|
|
38
|
+
backgroundColor: theme,
|
|
39
|
+
color: textColor
|
|
40
|
+
},
|
|
41
|
+
className: "arr--content-wrapper " + index._getClassName("wrapper ".concat(borderTemplate, " ").concat(horizontalCard), _styleModuleImportMap)
|
|
42
|
+
}, children || /*#__PURE__*/React__default["default"].createElement(DefaultStoryCardContent, {
|
|
43
|
+
story: story,
|
|
44
|
+
headerLevel: headerLevel,
|
|
45
|
+
isHorizontalMobile: isHorizontalMobile,
|
|
46
|
+
borderColor: SectionTagborderColor,
|
|
47
|
+
config: config
|
|
48
|
+
}));
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
var DefaultStoryCardContent = function DefaultStoryCardContent(_ref2) {
|
|
52
|
+
var story = _ref2.story,
|
|
53
|
+
headerLevel = _ref2.headerLevel,
|
|
54
|
+
borderColor = _ref2.borderColor,
|
|
55
|
+
_ref2$config = _ref2.config,
|
|
56
|
+
config = _ref2$config === void 0 ? {} : _ref2$config;
|
|
57
|
+
var SectionTagborderColor = index.rgbToHex(borderColor);
|
|
58
|
+
var _config$localizationC = config.localizationConfig,
|
|
59
|
+
localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC;
|
|
60
|
+
return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(index$1.SectionTag, {
|
|
61
|
+
story: story,
|
|
62
|
+
borderColor: SectionTagborderColor
|
|
63
|
+
}), /*#__PURE__*/React__default["default"].createElement(index$2.Headline, {
|
|
64
|
+
story: story,
|
|
65
|
+
headerLevel: headerLevel,
|
|
66
|
+
premiumStoryIconConfig: config
|
|
67
|
+
}), /*#__PURE__*/React__default["default"].createElement(index$2.AuthorWithTime, {
|
|
68
|
+
config: localizationConfig,
|
|
69
|
+
story: story
|
|
70
|
+
}));
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
DefaultStoryCardContent.propTypes = {
|
|
74
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
75
|
+
border: PropTypes__default["default"].string,
|
|
76
|
+
theme: PropTypes__default["default"].string,
|
|
77
|
+
isHorizontalMobile: PropTypes__default["default"].bool,
|
|
78
|
+
headerLevel: PropTypes__default["default"].string,
|
|
79
|
+
borderColor: PropTypes__default["default"].string,
|
|
80
|
+
config: PropTypes__default["default"].object
|
|
81
|
+
};
|
|
82
|
+
StorycardContent.propTypes = {
|
|
83
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
84
|
+
children: PropTypes__default["default"].node,
|
|
85
|
+
theme: PropTypes__default["default"].string,
|
|
86
|
+
border: PropTypes__default["default"].string,
|
|
87
|
+
isHorizontalMobile: PropTypes__default["default"].bool,
|
|
88
|
+
headerLevel: PropTypes__default["default"].string,
|
|
89
|
+
borderColor: PropTypes__default["default"].string,
|
|
90
|
+
config: PropTypes__default["default"].object
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
exports.StorycardContent = StorycardContent;
|
|
@@ -1,9 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index$1 = require('./index-e7cde739.js');
|
|
4
|
+
var components = require('@quintype/components');
|
|
5
|
+
var PropTypes = require('prop-types');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var reactRedux = require('react-redux');
|
|
8
|
+
var index = require('./index-3c4ac692.js');
|
|
9
|
+
|
|
10
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
|
+
|
|
12
|
+
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
13
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
7
14
|
|
|
8
15
|
var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
|
|
9
16
|
var _ref$width = _ref.width,
|
|
@@ -12,27 +19,27 @@ var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
|
|
|
12
19
|
height = _ref$height === void 0 ? 30 : _ref$height,
|
|
13
20
|
_ref$iconColor = _ref.iconColor,
|
|
14
21
|
iconColor = _ref$iconColor === void 0 ? "#99B0CB" : _ref$iconColor;
|
|
15
|
-
return /*#__PURE__*/
|
|
22
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
16
23
|
width: width,
|
|
17
24
|
height: height,
|
|
18
25
|
viewBox: "0 0 102 76",
|
|
19
26
|
version: "1.1"
|
|
20
|
-
}, /*#__PURE__*/
|
|
27
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
21
28
|
id: "demo-home-copy",
|
|
22
29
|
stroke: "none",
|
|
23
30
|
strokeWidth: "1",
|
|
24
31
|
fill: "none",
|
|
25
32
|
fillRule: "evenodd",
|
|
26
33
|
transform: "translate(-377.000000, -314.000000)"
|
|
27
|
-
}, /*#__PURE__*/
|
|
34
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
28
35
|
id: "Group-13",
|
|
29
36
|
transform: "translate(377.000000, 314.000000)"
|
|
30
|
-
}, /*#__PURE__*/
|
|
37
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
31
38
|
d: "M43.2,49.7 L62.2,19.2 L87.2,59.4 L17,59.4 L32.8,39.4 L43.2,49.7 Z M29.9,28.6 C25.8683213,28.6 22.6,25.3316787 22.6,21.3 C22.6,17.2683213 25.8683213,14 29.9,14 C33.9316787,14 37.2,17.2683213 37.2,21.3 C37.2,25.3316787 33.9316787,28.6 29.9,28.6 Z",
|
|
32
39
|
id: "Combined-Shape",
|
|
33
40
|
fill: iconColor,
|
|
34
41
|
fillRule: "nonzero"
|
|
35
|
-
}), /*#__PURE__*/
|
|
42
|
+
}), /*#__PURE__*/React__default["default"].createElement("rect", {
|
|
36
43
|
id: "Rectangle-19",
|
|
37
44
|
stroke: iconColor,
|
|
38
45
|
strokeWidth: "3",
|
|
@@ -44,24 +51,24 @@ var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
|
|
|
44
51
|
}))));
|
|
45
52
|
};
|
|
46
53
|
ImageFallbackIcon.propTypes = {
|
|
47
|
-
width:
|
|
48
|
-
height:
|
|
49
|
-
iconColor:
|
|
54
|
+
width: PropTypes__default["default"].object,
|
|
55
|
+
height: PropTypes__default["default"].object,
|
|
56
|
+
iconColor: PropTypes__default["default"].object
|
|
50
57
|
};
|
|
51
58
|
|
|
52
59
|
var imageFallback = function imageFallback() {
|
|
53
|
-
return /*#__PURE__*/
|
|
60
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
54
61
|
className: "arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"
|
|
55
|
-
}, /*#__PURE__*/
|
|
62
|
+
}, /*#__PURE__*/React__default["default"].createElement("figure", {
|
|
56
63
|
className: "arr--fallback-svg fallback-m_fallback-svg__tK9fL"
|
|
57
|
-
}, /*#__PURE__*/
|
|
64
|
+
}, /*#__PURE__*/React__default["default"].createElement(ImageFallbackIcon, null)));
|
|
58
65
|
};
|
|
59
66
|
|
|
60
67
|
var FallbackImage = function FallbackImage(_ref) {
|
|
61
68
|
var slug = _ref.slug;
|
|
62
69
|
|
|
63
70
|
if (slug) {
|
|
64
|
-
return /*#__PURE__*/
|
|
71
|
+
return /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
65
72
|
href: slug,
|
|
66
73
|
"aria-label": "image-fallback"
|
|
67
74
|
}, imageFallback());
|
|
@@ -70,23 +77,23 @@ var FallbackImage = function FallbackImage(_ref) {
|
|
|
70
77
|
}
|
|
71
78
|
};
|
|
72
79
|
FallbackImage.propTypes = {
|
|
73
|
-
slug:
|
|
80
|
+
slug: PropTypes__default["default"].string
|
|
74
81
|
};
|
|
75
82
|
|
|
76
83
|
var HyperLinkIcon = function HyperLinkIcon() {
|
|
77
|
-
return /*#__PURE__*/
|
|
84
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
78
85
|
xmlns: "http://www.w3.org/2000/svg",
|
|
79
86
|
width: "36",
|
|
80
87
|
height: "28"
|
|
81
|
-
}, /*#__PURE__*/
|
|
88
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
82
89
|
fill: "none",
|
|
83
90
|
fillRule: "evenodd"
|
|
84
|
-
}, /*#__PURE__*/
|
|
91
|
+
}, /*#__PURE__*/React__default["default"].createElement("rect", {
|
|
85
92
|
width: "36",
|
|
86
93
|
height: "28",
|
|
87
94
|
fill: "#3D6FCF",
|
|
88
95
|
rx: "4"
|
|
89
|
-
}), /*#__PURE__*/
|
|
96
|
+
}), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
90
97
|
stroke: "#FFF",
|
|
91
98
|
strokeLinecap: "round",
|
|
92
99
|
strokeLinejoin: "round",
|
|
@@ -99,16 +106,16 @@ var HyperLink = function HyperLink(_ref) {
|
|
|
99
106
|
var _ref$hyperLink = _ref.hyperLink,
|
|
100
107
|
hyperLink = _ref$hyperLink === void 0 ? "" : _ref$hyperLink;
|
|
101
108
|
if (!hyperLink) return null;
|
|
102
|
-
return /*#__PURE__*/
|
|
109
|
+
return /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
103
110
|
href: hyperLink,
|
|
104
111
|
"aria-label": "hyperlink-button",
|
|
105
112
|
className: "arr--hyperlink-button hyperlink-m_hyperlink-button__1CqWx",
|
|
106
113
|
target: "_blank",
|
|
107
114
|
rel: "noopener noreferrer"
|
|
108
|
-
}, /*#__PURE__*/
|
|
115
|
+
}, /*#__PURE__*/React__default["default"].createElement(HyperLinkIcon, null));
|
|
109
116
|
};
|
|
110
117
|
HyperLink.propTypes = {
|
|
111
|
-
hyperLink:
|
|
118
|
+
hyperLink: PropTypes__default["default"].string
|
|
112
119
|
};
|
|
113
120
|
|
|
114
121
|
var _styleModuleImportMap$1 = {
|
|
@@ -136,7 +143,7 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
136
143
|
isStoryPageImage = _ref.isStoryPageImage,
|
|
137
144
|
config = _ref.config;
|
|
138
145
|
|
|
139
|
-
var _ref2 = useStateValue() || {},
|
|
146
|
+
var _ref2 = index.useStateValue() || {},
|
|
140
147
|
_ref2$fallbackImageUr = _ref2.fallbackImageUrl,
|
|
141
148
|
fallbackImageUrl = _ref2$fallbackImageUr === void 0 ? "" : _ref2$fallbackImageUr;
|
|
142
149
|
|
|
@@ -144,8 +151,8 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
144
151
|
StoryTemplateIcon = _config$StoryTemplate === void 0 ? function () {
|
|
145
152
|
return null;
|
|
146
153
|
} : _config$StoryTemplate;
|
|
147
|
-
var showImagePlaceholder = useSelector(function (state) {
|
|
148
|
-
return get_1(state, ["qt", "config", "showPlaceholder"]);
|
|
154
|
+
var showImagePlaceholder = reactRedux.useSelector(function (state) {
|
|
155
|
+
return index$1.get_1(state, ["qt", "config", "showPlaceholder"]);
|
|
149
156
|
});
|
|
150
157
|
var getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
|
|
151
158
|
var fullBleed = FullBleed ? "" : "with-padding";
|
|
@@ -154,7 +161,7 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
154
161
|
var heroImageMobClasses = isHorizontalMobile ? "right-padding-mob" : "";
|
|
155
162
|
|
|
156
163
|
var getPadding = function getPadding(aspectRatio) {
|
|
157
|
-
var _aspectRatio = _slicedToArray(aspectRatio, 2),
|
|
164
|
+
var _aspectRatio = index$1._slicedToArray(aspectRatio, 2),
|
|
158
165
|
height = _aspectRatio[0],
|
|
159
166
|
width = _aspectRatio[1];
|
|
160
167
|
|
|
@@ -166,51 +173,51 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
166
173
|
return 0;
|
|
167
174
|
};
|
|
168
175
|
|
|
169
|
-
var _aspectRatio2 = _slicedToArray(aspectRatio, 2),
|
|
176
|
+
var _aspectRatio2 = index$1._slicedToArray(aspectRatio, 2),
|
|
170
177
|
mobileAspectRatio = _aspectRatio2[0],
|
|
171
178
|
_aspectRatio2$ = _aspectRatio2[1],
|
|
172
179
|
desktopAspectRatio = _aspectRatio2$ === void 0 ? mobileAspectRatio : _aspectRatio2$;
|
|
173
180
|
|
|
174
|
-
var isMobile = clientWidth("mobile");
|
|
181
|
+
var isMobile = index$1.clientWidth("mobile");
|
|
175
182
|
var imageAspectRatio = isMobile ? mobileAspectRatio : desktopAspectRatio;
|
|
176
183
|
var imagePadding = isMobile ? getPadding(mobileAspectRatio) : getPadding(desktopAspectRatio);
|
|
177
|
-
var slug = get_1(story, ["hero-image-s3-key"]) || get_1(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]);
|
|
178
|
-
var hyperLink = get_1(story, ["hero-image-hyperlink"], "");
|
|
184
|
+
var slug = index$1.get_1(story, ["hero-image-s3-key"]) || index$1.get_1(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]);
|
|
185
|
+
var hyperLink = index$1.get_1(story, ["hero-image-hyperlink"], "");
|
|
179
186
|
|
|
180
187
|
var fallbackImage = function fallbackImage() {
|
|
181
188
|
if (!slug) {
|
|
182
189
|
if (fallbackImageUrl && !isStoryPageImage) {
|
|
183
|
-
return /*#__PURE__*/
|
|
190
|
+
return /*#__PURE__*/React__default["default"].createElement("figure", {
|
|
184
191
|
style: {
|
|
185
192
|
paddingTop: imagePadding + "%"
|
|
186
193
|
},
|
|
187
|
-
className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$1)
|
|
188
|
-
}, /*#__PURE__*/
|
|
194
|
+
className: "arr--responsive-hero-image " + index$1._getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$1)
|
|
195
|
+
}, /*#__PURE__*/React__default["default"].createElement("img", {
|
|
189
196
|
className: "qt-image",
|
|
190
197
|
"data-src": "".concat(fallbackImageUrl),
|
|
191
198
|
alt: "image-fallback"
|
|
192
199
|
}));
|
|
193
200
|
}
|
|
194
201
|
|
|
195
|
-
return /*#__PURE__*/
|
|
202
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, defaultFallback ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
196
203
|
"data-test-id": "arr--fallback-hero-image",
|
|
197
204
|
style: {
|
|
198
205
|
paddingTop: imagePadding + "%"
|
|
199
206
|
},
|
|
200
|
-
className: "arr--fallback-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$1)
|
|
201
|
-
}, /*#__PURE__*/
|
|
207
|
+
className: "arr--fallback-hero-image " + index$1._getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$1)
|
|
208
|
+
}, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
|
|
202
209
|
storyTemplate: story["story-template"]
|
|
203
|
-
}), /*#__PURE__*/
|
|
210
|
+
}), /*#__PURE__*/React__default["default"].createElement(FallbackImage, null)) : null);
|
|
204
211
|
}
|
|
205
212
|
|
|
206
|
-
return /*#__PURE__*/
|
|
213
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("figure", {
|
|
207
214
|
style: {
|
|
208
215
|
paddingTop: imagePadding + "%"
|
|
209
216
|
},
|
|
210
|
-
className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$1)
|
|
211
|
-
}, /*#__PURE__*/
|
|
217
|
+
className: "arr--responsive-hero-image " + index$1._getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$1)
|
|
218
|
+
}, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
|
|
212
219
|
storyTemplate: story["story-template"]
|
|
213
|
-
}), /*#__PURE__*/
|
|
220
|
+
}), /*#__PURE__*/React__default["default"].createElement(components.ResponsiveHeroImage, {
|
|
214
221
|
story: story,
|
|
215
222
|
aspectRatio: imageAspectRatio,
|
|
216
223
|
defaultWidth: defaultWidth,
|
|
@@ -219,48 +226,48 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
219
226
|
auto: ["format", "compress"],
|
|
220
227
|
fit: "max"
|
|
221
228
|
}
|
|
222
|
-
})), isStoryPageImage && hyperLink && /*#__PURE__*/
|
|
229
|
+
})), isStoryPageImage && hyperLink && /*#__PURE__*/React__default["default"].createElement(HyperLink, {
|
|
223
230
|
hyperLink: hyperLink
|
|
224
231
|
}));
|
|
225
232
|
};
|
|
226
233
|
|
|
227
|
-
return story && (isStoryPageImage ? /*#__PURE__*/
|
|
234
|
+
return story && (isStoryPageImage ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
228
235
|
"data-test-id": "arr--hero-image",
|
|
229
|
-
className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$1)
|
|
230
|
-
}, fallbackImage()) : /*#__PURE__*/
|
|
236
|
+
className: "arr--hero-image " + index$1._getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$1)
|
|
237
|
+
}, fallbackImage()) : /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
231
238
|
"data-test-id": "arr--hero-image",
|
|
232
|
-
href: getStoryUrl(story, "/".concat(story.slug)),
|
|
233
|
-
externalLink: isExternalStory(story),
|
|
239
|
+
href: index$1.getStoryUrl(story, "/".concat(story.slug)),
|
|
240
|
+
externalLink: index$1.isExternalStory(story),
|
|
234
241
|
"aria-label": "fallback-hero-image",
|
|
235
|
-
className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$1)
|
|
242
|
+
className: "arr--hero-image " + index$1._getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$1)
|
|
236
243
|
}, fallbackImage()));
|
|
237
244
|
};
|
|
238
245
|
HeroImage.propTypes = {
|
|
239
246
|
/** The Story Object from the API response */
|
|
240
|
-
story:
|
|
247
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
241
248
|
|
|
242
249
|
/** Removes the Hero Image padding for the image to bleed over the margin */
|
|
243
|
-
FullBleed:
|
|
250
|
+
FullBleed: PropTypes__default["default"].bool,
|
|
244
251
|
|
|
245
252
|
/** The default width for the image, in case the browser does not support srcset */
|
|
246
|
-
defaultWidth:
|
|
253
|
+
defaultWidth: PropTypes__default["default"].number,
|
|
247
254
|
|
|
248
255
|
/** The list of available widths */
|
|
249
|
-
widths:
|
|
256
|
+
widths: PropTypes__default["default"].array,
|
|
250
257
|
// fatch the correct hero image
|
|
251
|
-
aspectRatio:
|
|
258
|
+
aspectRatio: PropTypes__default["default"].array,
|
|
252
259
|
// Hints for the browser to choose the best size
|
|
253
260
|
|
|
254
261
|
/** This prop is responsible for adding padding-right of the image and remove padding bottom of the image */
|
|
255
|
-
isHorizontal:
|
|
262
|
+
isHorizontal: PropTypes__default["default"].bool,
|
|
256
263
|
|
|
257
264
|
/** This prop is responsible for adding padding-bottom in desktop and padding-right in mobile */
|
|
258
|
-
isHorizontalMobile:
|
|
265
|
+
isHorizontalMobile: PropTypes__default["default"].bool,
|
|
259
266
|
// this prop is responsive for rendering fallback image on story page
|
|
260
|
-
defaultFallback:
|
|
261
|
-
isHorizontalWithImageLast:
|
|
262
|
-
isStoryPageImage:
|
|
263
|
-
config:
|
|
267
|
+
defaultFallback: PropTypes__default["default"].bool,
|
|
268
|
+
isHorizontalWithImageLast: PropTypes__default["default"].bool,
|
|
269
|
+
isStoryPageImage: PropTypes__default["default"].bool,
|
|
270
|
+
config: PropTypes__default["default"].object
|
|
264
271
|
};
|
|
265
272
|
HeroImage.defaultProps = {
|
|
266
273
|
FullBleed: true,
|
|
@@ -294,15 +301,15 @@ var SectionTag = function SectionTag(_ref) {
|
|
|
294
301
|
_ref$borderColor = _ref.borderColor,
|
|
295
302
|
borderColor = _ref$borderColor === void 0 ? "" : _ref$borderColor,
|
|
296
303
|
isLightTheme = _ref.isLightTheme;
|
|
297
|
-
var config = useStateValue() || {};
|
|
298
|
-
var isSection = get_1(config, ["showSection"], true);
|
|
299
|
-
var templateFromRowContext = get_1(config, ["sectionTagTemplate"]);
|
|
300
|
-
var section = get_1(story, ["sections", 0], "");
|
|
304
|
+
var config = index.useStateValue() || {};
|
|
305
|
+
var isSection = index$1.get_1(config, ["showSection"], true);
|
|
306
|
+
var templateFromRowContext = index$1.get_1(config, ["sectionTagTemplate"]);
|
|
307
|
+
var section = index$1.get_1(story, ["sections", 0], "");
|
|
301
308
|
var supportedTemplates = ["borderBottomSml", "borderLeft", "solid"];
|
|
302
309
|
var getUrl = section ? section["section-url"] : "/";
|
|
303
310
|
var colorToApplyContrast = template === "solid" || templateFromRowContext === "solid" ? borderColor : config.theme;
|
|
304
|
-
var textColor = isLightTheme ? "light" : getTextColor(colorToApplyContrast);
|
|
305
|
-
var sectionTagBorderColor = rgbToHex(borderColor);
|
|
311
|
+
var textColor = isLightTheme ? "light" : index$1.getTextColor(colorToApplyContrast);
|
|
312
|
+
var sectionTagBorderColor = index$1.rgbToHex(borderColor);
|
|
306
313
|
var templateStyle = supportedTemplates.includes(template) ? "section section-".concat(template) : "section";
|
|
307
314
|
|
|
308
315
|
if (templateFromRowContext) {
|
|
@@ -310,22 +317,22 @@ var SectionTag = function SectionTag(_ref) {
|
|
|
310
317
|
}
|
|
311
318
|
|
|
312
319
|
if (!isSection) return null;
|
|
313
|
-
return /*#__PURE__*/
|
|
320
|
+
return /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
314
321
|
href: getUrl,
|
|
315
322
|
className: "arrow-component arr--section-name",
|
|
316
323
|
"aria-label": "section-name"
|
|
317
|
-
}, /*#__PURE__*/
|
|
324
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
318
325
|
"data-test-id": "sectionTag",
|
|
319
326
|
style: {
|
|
320
327
|
backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : ""
|
|
321
328
|
},
|
|
322
|
-
className: "section-tag arrow-component " + _getClassName("".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap)
|
|
323
|
-
}, templateStyle.includes("section-borderLeft") && /*#__PURE__*/
|
|
329
|
+
className: "section-tag arrow-component " + index$1._getClassName("".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap)
|
|
330
|
+
}, templateStyle.includes("section-borderLeft") && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
324
331
|
className: "section-m_border-left__2oUyp",
|
|
325
332
|
style: {
|
|
326
333
|
color: sectionTagBorderColor
|
|
327
334
|
}
|
|
328
|
-
}), section["display-name"] || section["name"], /*#__PURE__*/
|
|
335
|
+
}), section["display-name"] || section["name"], /*#__PURE__*/React__default["default"].createElement("div", {
|
|
329
336
|
className: "section-m_border-bottom__3cRoD",
|
|
330
337
|
style: {
|
|
331
338
|
backgroundColor: "".concat(template === "solid" ? "" : sectionTagBorderColor)
|
|
@@ -334,17 +341,18 @@ var SectionTag = function SectionTag(_ref) {
|
|
|
334
341
|
};
|
|
335
342
|
SectionTag.propTypes = {
|
|
336
343
|
/** The Story Object from the API response */
|
|
337
|
-
story:
|
|
344
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
338
345
|
|
|
339
346
|
/** The style template for section tag */
|
|
340
|
-
template:
|
|
341
|
-
borderColor:
|
|
342
|
-
solidBorderColor:
|
|
343
|
-
isLightTheme:
|
|
347
|
+
template: PropTypes__default["default"].oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
|
|
348
|
+
borderColor: PropTypes__default["default"].string,
|
|
349
|
+
solidBorderColor: PropTypes__default["default"].string,
|
|
350
|
+
isLightTheme: PropTypes__default["default"].bool
|
|
344
351
|
};
|
|
345
352
|
SectionTag.defaultProps = {
|
|
346
353
|
template: "",
|
|
347
354
|
isLightTheme: false
|
|
348
355
|
};
|
|
349
356
|
|
|
350
|
-
|
|
357
|
+
exports.HeroImage = HeroImage;
|
|
358
|
+
exports.SectionTag = SectionTag;
|