@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.
Files changed (92) hide show
  1. package/atoms/Author/index.js +38 -29
  2. package/atoms/AuthorWithTime/index.js +83 -73
  3. package/atoms/CollectionName/index.js +40 -30
  4. package/atoms/ExtendedLoadMore/{index-d0f6c865.js → index-3976fac4.js} +59 -51
  5. package/atoms/ExtendedLoadMore/{index-1e444d20.js → index-3c4ac692.js} +243 -208
  6. package/atoms/ExtendedLoadMore/index-4ddfe28d.js +93 -0
  7. package/atoms/ExtendedLoadMore/{index-c61a16dc.js → index-5c8eda4a.js} +88 -80
  8. package/atoms/ExtendedLoadMore/{index-1256e453.js → index-6e083738.js} +60 -52
  9. package/atoms/ExtendedLoadMore/{index-fd651f70.js → index-6ecceae4.js} +58 -50
  10. package/atoms/ExtendedLoadMore/{index-4356ce04.js → index-9e0d32b7.js} +76 -68
  11. package/atoms/ExtendedLoadMore/{index-beed3a68.js → index-a5c95f84.js} +70 -62
  12. package/atoms/ExtendedLoadMore/{index-0519e570.js → index-b22f1843.js} +70 -62
  13. package/atoms/ExtendedLoadMore/{index-e4cf9cb7.js → index-b5936059.js} +72 -64
  14. package/atoms/ExtendedLoadMore/{index-aba6b278.js → index-bc129cb8.js} +57 -49
  15. package/atoms/ExtendedLoadMore/{index-ad3c83c3.js → index-e7cde739.js} +74 -46
  16. package/atoms/ExtendedLoadMore/{index-c2f73d18.js → index-fee73a14.js} +62 -54
  17. package/atoms/ExtendedLoadMore/index.js +13 -5
  18. package/atoms/ExtendedLoadMore/styles.arrow.css +1 -1
  19. package/atoms/Headline/index.js +85 -76
  20. package/atoms/HeroImage/index.js +69 -60
  21. package/atoms/LoadmoreButton/index.js +32 -23
  22. package/atoms/ScrollSnap/index.js +72 -63
  23. package/atoms/SectionTag/index.js +34 -25
  24. package/atoms/Subheadline/index.js +31 -22
  25. package/atoms/TimeStamp/index.js +34 -24
  26. package/molecules/KeyEvents/index.js +72 -61
  27. package/molecules/PageIntroductionCard/index.js +43 -34
  28. package/molecules/SocialShareTemplate/index.js +97 -88
  29. package/molecules/StoryCard/index.js +242 -232
  30. package/molecules/StoryElementCard/index.js +512 -483
  31. package/molecules/StorycardContent/index.js +172 -162
  32. package/package.json +1 -1
  33. package/rows/AlternateCollectionFilter/index.js +345 -333
  34. package/rows/AsideCollection/index.js +340 -328
  35. package/rows/AstrologyCollection/index.js +321 -309
  36. package/rows/AuthorIntroductionCard/index.js +157 -148
  37. package/rows/AuthorsList/index.js +184 -174
  38. package/rows/CollectionFilter/index.js +361 -349
  39. package/rows/ElevenStories/index.js +357 -346
  40. package/rows/FourColFiveStories/index.js +304 -274
  41. package/rows/FourColGrid/index.js +351 -321
  42. package/rows/FourColPortraitStories/index.js +357 -327
  43. package/rows/FourColSixteenStories/index.js +288 -277
  44. package/rows/FourColTwelveStories/index.js +315 -304
  45. package/rows/FourStorySlider/index.js +358 -347
  46. package/rows/FourStorySliderPortrait/index.js +359 -348
  47. package/rows/FourTabbedBigStorySlider/index.js +322 -311
  48. package/rows/FullScreenSlider/index.js +336 -325
  49. package/rows/HalfScreenSlider/index.js +308 -297
  50. package/rows/ListComponent/index.js +322 -311
  51. package/rows/Listicles/index.js +150 -139
  52. package/rows/MagazineEditions/index.js +104 -93
  53. package/rows/MagazineHeaderCard/index.js +104 -93
  54. package/rows/MagazineWidget/index.js +326 -315
  55. package/rows/OneColStoryList/index.js +365 -335
  56. package/rows/OpinionCollection/index.js +250 -220
  57. package/rows/SixColSixStories/index.js +333 -303
  58. package/rows/StoryCollection/index.js +340 -328
  59. package/rows/TagIntroductionCard/index.js +30 -21
  60. package/rows/ThreeColFlexStories/index.js +348 -318
  61. package/rows/ThreeColFourteenStories/index.js +285 -274
  62. package/rows/ThreeColGrid/index.js +352 -322
  63. package/rows/ThreeColSevenStory/index.js +322 -311
  64. package/rows/ThreeColSixStories/index.js +323 -312
  65. package/rows/ThreeColTwelveStories/index.js +302 -291
  66. package/rows/TwoColFourStories/index.js +316 -305
  67. package/rows/TwoColFourStoryHighlight/index.js +317 -306
  68. package/rows/TwoColSevenStories/index.js +322 -311
  69. package/rows/TwoColSixStories/index.js +316 -305
  70. package/rows/TwoColTenStoriesSidebar/index.js +338 -327
  71. package/rows/TwoColThreeStories/index.js +316 -305
  72. package/story-elements/AlsoRead/index.js +70 -61
  73. package/story-elements/Attachment/index.js +40 -31
  74. package/story-elements/BigFact/index.js +35 -26
  75. package/story-elements/BlockQuote/index.js +61 -51
  76. package/story-elements/Blurb/index.js +36 -27
  77. package/story-elements/Image/index.js +113 -86
  78. package/story-elements/ImageGallery/index.js +98 -71
  79. package/story-elements/ImageSlideshow/index.js +147 -120
  80. package/story-elements/QuestionAnswer/index.js +55 -46
  81. package/story-elements/Quote/index.js +37 -28
  82. package/story-elements/Reference/index.js +40 -31
  83. package/story-elements/StoryElement/index.js +28 -19
  84. package/story-elements/Summary/index.js +40 -31
  85. package/story-elements/Text/index.js +34 -25
  86. package/story-elements/Video/index.js +29 -20
  87. package/story-templates/ListicleStoryTemplate/index.js +937 -908
  88. package/story-templates/LiveBlogStoryTemplate/index.js +942 -913
  89. package/story-templates/PhotoStoryTemplate/index.js +912 -883
  90. package/story-templates/TextStoryTemplate/index.js +931 -902
  91. package/story-templates/VideoStoryTemplate/index.js +897 -868
  92. 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
- import { a as get_1, c as _slicedToArray, d as clientWidth, _ as _getClassName, e as getStoryUrl, f as isExternalStory, g as getTextColor, r as rgbToHex } from './index-ad3c83c3.js';
2
- import { Link, ResponsiveHeroImage } from '@quintype/components';
3
- import PropTypes from 'prop-types';
4
- import React from 'react';
5
- import { useSelector } from 'react-redux';
6
- import { u as useStateValue } from './index-1e444d20.js';
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__*/React.createElement("svg", {
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__*/React.createElement("g", {
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__*/React.createElement("g", {
34
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
28
35
  id: "Group-13",
29
36
  transform: "translate(377.000000, 314.000000)"
30
- }, /*#__PURE__*/React.createElement("path", {
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__*/React.createElement("rect", {
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: PropTypes.object,
48
- height: PropTypes.object,
49
- iconColor: PropTypes.object
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__*/React.createElement("div", {
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__*/React.createElement("figure", {
62
+ }, /*#__PURE__*/React__default["default"].createElement("figure", {
56
63
  className: "arr--fallback-svg fallback-m_fallback-svg__tK9fL"
57
- }, /*#__PURE__*/React.createElement(ImageFallbackIcon, null)));
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__*/React.createElement(Link, {
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: PropTypes.string
80
+ slug: PropTypes__default["default"].string
74
81
  };
75
82
 
76
83
  var HyperLinkIcon = function HyperLinkIcon() {
77
- return /*#__PURE__*/React.createElement("svg", {
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__*/React.createElement("g", {
88
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
82
89
  fill: "none",
83
90
  fillRule: "evenodd"
84
- }, /*#__PURE__*/React.createElement("rect", {
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__*/React.createElement("path", {
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__*/React.createElement(Link, {
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__*/React.createElement(HyperLinkIcon, null));
115
+ }, /*#__PURE__*/React__default["default"].createElement(HyperLinkIcon, null));
109
116
  };
110
117
  HyperLink.propTypes = {
111
- hyperLink: PropTypes.string
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__*/React.createElement("figure", {
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__*/React.createElement("img", {
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__*/React.createElement(React.Fragment, null, defaultFallback ? /*#__PURE__*/React.createElement("div", {
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__*/React.createElement(StoryTemplateIcon, {
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__*/React.createElement(FallbackImage, null)) : null);
210
+ }), /*#__PURE__*/React__default["default"].createElement(FallbackImage, null)) : null);
204
211
  }
205
212
 
206
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("figure", {
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__*/React.createElement(StoryTemplateIcon, {
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__*/React.createElement(ResponsiveHeroImage, {
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__*/React.createElement(HyperLink, {
229
+ })), isStoryPageImage && hyperLink && /*#__PURE__*/React__default["default"].createElement(HyperLink, {
223
230
  hyperLink: hyperLink
224
231
  }));
225
232
  };
226
233
 
227
- return story && (isStoryPageImage ? /*#__PURE__*/React.createElement("div", {
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__*/React.createElement(Link, {
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: PropTypes.object.isRequired,
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: PropTypes.bool,
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: PropTypes.number,
253
+ defaultWidth: PropTypes__default["default"].number,
247
254
 
248
255
  /** The list of available widths */
249
- widths: PropTypes.array,
256
+ widths: PropTypes__default["default"].array,
250
257
  // fatch the correct hero image
251
- aspectRatio: PropTypes.array,
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: PropTypes.bool,
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: PropTypes.bool,
265
+ isHorizontalMobile: PropTypes__default["default"].bool,
259
266
  // this prop is responsive for rendering fallback image on story page
260
- defaultFallback: PropTypes.bool,
261
- isHorizontalWithImageLast: PropTypes.bool,
262
- isStoryPageImage: PropTypes.bool,
263
- config: PropTypes.object
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__*/React.createElement(Link, {
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__*/React.createElement("div", {
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__*/React.createElement("span", {
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__*/React.createElement("div", {
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: PropTypes.object.isRequired,
344
+ story: PropTypes__default["default"].object.isRequired,
338
345
 
339
346
  /** The style template for section tag */
340
- template: PropTypes.oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
341
- borderColor: PropTypes.string,
342
- solidBorderColor: PropTypes.string,
343
- isLightTheme: PropTypes.bool
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
- export { HeroImage as H, SectionTag as S };
357
+ exports.HeroImage = HeroImage;
358
+ exports.SectionTag = SectionTag;