@quintype/arrow 3.15.1-perf.4 → 3.15.1-perf.5

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 (166) hide show
  1. package/cjs/index.js +14589 -0
  2. package/package.json +1 -1
  3. package/atoms/Author/index.js +0 -170
  4. package/atoms/Author/styles.arrow.css +0 -1
  5. package/atoms/AuthorWithTime/index.js +0 -514
  6. package/atoms/AuthorWithTime/styles.arrow.css +0 -1
  7. package/atoms/CollectionName/index.js +0 -255
  8. package/atoms/CollectionName/styles.arrow.css +0 -1
  9. package/atoms/ExtendedLoadMore/index-0f809dd9.js +0 -254
  10. package/atoms/ExtendedLoadMore/index-142f015c.js +0 -476
  11. package/atoms/ExtendedLoadMore/index-37a9ccff.js +0 -182
  12. package/atoms/ExtendedLoadMore/index-446679c8.js +0 -191
  13. package/atoms/ExtendedLoadMore/index-44f97338.js +0 -300
  14. package/atoms/ExtendedLoadMore/index-57dd4870.js +0 -239
  15. package/atoms/ExtendedLoadMore/index-66dd4dbd.js +0 -215
  16. package/atoms/ExtendedLoadMore/index-8462c597.js +0 -363
  17. package/atoms/ExtendedLoadMore/index-93cb06d1.js +0 -1016
  18. package/atoms/ExtendedLoadMore/index-afd44863.js +0 -95
  19. package/atoms/ExtendedLoadMore/index-b5754c5d.js +0 -195
  20. package/atoms/ExtendedLoadMore/index-bbaf526e.js +0 -256
  21. package/atoms/ExtendedLoadMore/index-cfb262ef.js +0 -192
  22. package/atoms/ExtendedLoadMore/index.js +0 -20
  23. package/atoms/ExtendedLoadMore/styles.arrow.css +0 -1
  24. package/atoms/Headline/index.js +0 -379
  25. package/atoms/Headline/styles.arrow.css +0 -1
  26. package/atoms/HeroImage/index.js +0 -336
  27. package/atoms/HeroImage/styles.arrow.css +0 -1
  28. package/atoms/LoadmoreButton/index.js +0 -175
  29. package/atoms/LoadmoreButton/styles.arrow.css +0 -1
  30. package/atoms/ScrollSnap/index.js +0 -379
  31. package/atoms/ScrollSnap/styles.arrow.css +0 -1
  32. package/atoms/SectionTag/index.js +0 -140
  33. package/atoms/SectionTag/styles.arrow.css +0 -1
  34. package/atoms/Subheadline/index.js +0 -120
  35. package/atoms/Subheadline/styles.arrow.css +0 -1
  36. package/atoms/TimeStamp/index.js +0 -221
  37. package/atoms/TimeStamp/styles.arrow.css +0 -1
  38. package/molecules/KeyEvents/index.js +0 -457
  39. package/molecules/KeyEvents/styles.arrow.css +0 -1
  40. package/molecules/PageIntroductionCard/index.js +0 -248
  41. package/molecules/PageIntroductionCard/styles.arrow.css +0 -1
  42. package/molecules/SocialShareTemplate/index.js +0 -506
  43. package/molecules/SocialShareTemplate/styles.arrow.css +0 -1
  44. package/molecules/StoryCard/index.js +0 -1430
  45. package/molecules/StoryCard/styles.arrow.css +0 -1
  46. package/molecules/StoryElementCard/index.js +0 -3091
  47. package/molecules/StoryElementCard/styles.arrow.css +0 -1
  48. package/molecules/StorycardContent/index.js +0 -976
  49. package/molecules/StorycardContent/styles.arrow.css +0 -1
  50. package/rows/AlternateCollectionFilter/index.js +0 -2189
  51. package/rows/AlternateCollectionFilter/styles.arrow.css +0 -1
  52. package/rows/AsideCollection/index.js +0 -2135
  53. package/rows/AsideCollection/styles.arrow.css +0 -1
  54. package/rows/AstrologyCollection/index.js +0 -2106
  55. package/rows/AstrologyCollection/styles.arrow.css +0 -1
  56. package/rows/AuthorIntroductionCard/index.js +0 -813
  57. package/rows/AuthorIntroductionCard/styles.arrow.css +0 -1
  58. package/rows/AuthorsList/index.js +0 -996
  59. package/rows/AuthorsList/styles.arrow.css +0 -1
  60. package/rows/CollectionFilter/index.js +0 -2279
  61. package/rows/CollectionFilter/styles.arrow.css +0 -1
  62. package/rows/ElevenStories/index.js +0 -2118
  63. package/rows/ElevenStories/styles.arrow.css +0 -1
  64. package/rows/FourColFiveStories/index.js +0 -1861
  65. package/rows/FourColFiveStories/styles.arrow.css +0 -1
  66. package/rows/FourColGrid/index.js +0 -2083
  67. package/rows/FourColGrid/styles.arrow.css +0 -1
  68. package/rows/FourColPortraitStories/index.js +0 -2116
  69. package/rows/FourColPortraitStories/styles.arrow.css +0 -1
  70. package/rows/FourColSixteenStories/index.js +0 -1849
  71. package/rows/FourColSixteenStories/styles.arrow.css +0 -1
  72. package/rows/FourColTwelveStories/index.js +0 -1822
  73. package/rows/FourColTwelveStories/styles.arrow.css +0 -1
  74. package/rows/FourStorySlider/index.js +0 -2223
  75. package/rows/FourStorySlider/styles.arrow.css +0 -1
  76. package/rows/FourStorySliderPortrait/index.js +0 -2226
  77. package/rows/FourStorySliderPortrait/styles.arrow.css +0 -1
  78. package/rows/FourTabbedBigStorySlider/index.js +0 -1985
  79. package/rows/FourTabbedBigStorySlider/styles.arrow.css +0 -1
  80. package/rows/FullScreenSlider/index.js +0 -2141
  81. package/rows/FullScreenSlider/styles.arrow.css +0 -1
  82. package/rows/HalfScreenSlider/index.js +0 -1994
  83. package/rows/HalfScreenSlider/styles.arrow.css +0 -1
  84. package/rows/ListComponent/index.js +0 -1942
  85. package/rows/ListComponent/styles.arrow.css +0 -1
  86. package/rows/Listicles/index.js +0 -945
  87. package/rows/Listicles/styles.arrow.css +0 -1
  88. package/rows/MagazineEditions/index.js +0 -690
  89. package/rows/MagazineEditions/styles.arrow.css +0 -1
  90. package/rows/MagazineHeaderCard/index.js +0 -684
  91. package/rows/MagazineHeaderCard/styles.arrow.css +0 -1
  92. package/rows/MagazineWidget/index.js +0 -1994
  93. package/rows/MagazineWidget/styles.arrow.css +0 -1
  94. package/rows/OneColStoryList/index.js +0 -2169
  95. package/rows/OneColStoryList/styles.arrow.css +0 -1
  96. package/rows/OpinionCollection/index.js +0 -1545
  97. package/rows/OpinionCollection/styles.arrow.css +0 -1
  98. package/rows/SixColSixStories/index.js +0 -2014
  99. package/rows/SixColSixStories/styles.arrow.css +0 -1
  100. package/rows/StoryCollection/index.js +0 -2135
  101. package/rows/StoryCollection/styles.arrow.css +0 -1
  102. package/rows/TagIntroductionCard/index.js +0 -103
  103. package/rows/TagIntroductionCard/styles.arrow.css +0 -1
  104. package/rows/ThreeColFlexStories/index.js +0 -2074
  105. package/rows/ThreeColFlexStories/styles.arrow.css +0 -1
  106. package/rows/ThreeColFourteenStories/index.js +0 -1770
  107. package/rows/ThreeColFourteenStories/styles.arrow.css +0 -1
  108. package/rows/ThreeColGrid/index.js +0 -2104
  109. package/rows/ThreeColGrid/styles.arrow.css +0 -1
  110. package/rows/ThreeColSevenStory/index.js +0 -1982
  111. package/rows/ThreeColSevenStory/styles.arrow.css +0 -1
  112. package/rows/ThreeColSixStories/index.js +0 -1965
  113. package/rows/ThreeColSixStories/styles.arrow.css +0 -1
  114. package/rows/ThreeColTwelveStories/index.js +0 -1854
  115. package/rows/ThreeColTwelveStories/styles.arrow.css +0 -1
  116. package/rows/TwoColFourStories/index.js +0 -1943
  117. package/rows/TwoColFourStories/styles.arrow.css +0 -1
  118. package/rows/TwoColFourStoryHighlight/index.js +0 -1930
  119. package/rows/TwoColFourStoryHighlight/styles.arrow.css +0 -1
  120. package/rows/TwoColSevenStories/index.js +0 -1970
  121. package/rows/TwoColSevenStories/styles.arrow.css +0 -1
  122. package/rows/TwoColSixStories/index.js +0 -1963
  123. package/rows/TwoColSixStories/styles.arrow.css +0 -1
  124. package/rows/TwoColTenStoriesSidebar/index.js +0 -2029
  125. package/rows/TwoColTenStoriesSidebar/styles.arrow.css +0 -1
  126. package/rows/TwoColThreeStories/index.js +0 -1916
  127. package/rows/TwoColThreeStories/styles.arrow.css +0 -1
  128. package/story-elements/AlsoRead/index.js +0 -320
  129. package/story-elements/AlsoRead/styles.arrow.css +0 -1
  130. package/story-elements/Attachment/index.js +0 -167
  131. package/story-elements/Attachment/styles.arrow.css +0 -1
  132. package/story-elements/BigFact/index.js +0 -137
  133. package/story-elements/BigFact/styles.arrow.css +0 -1
  134. package/story-elements/BlockQuote/index.js +0 -304
  135. package/story-elements/BlockQuote/styles.arrow.css +0 -1
  136. package/story-elements/Blurb/index.js +0 -189
  137. package/story-elements/Blurb/styles.arrow.css +0 -1
  138. package/story-elements/Image/index.js +0 -529
  139. package/story-elements/Image/styles.arrow.css +0 -1
  140. package/story-elements/ImageGallery/index.js +0 -462
  141. package/story-elements/ImageGallery/styles.arrow.css +0 -1
  142. package/story-elements/ImageSlideshow/index.js +0 -773
  143. package/story-elements/ImageSlideshow/styles.arrow.css +0 -1
  144. package/story-elements/QuestionAnswer/index.js +0 -267
  145. package/story-elements/QuestionAnswer/styles.arrow.css +0 -1
  146. package/story-elements/Quote/index.js +0 -166
  147. package/story-elements/Quote/styles.arrow.css +0 -1
  148. package/story-elements/Reference/index.js +0 -160
  149. package/story-elements/Reference/styles.arrow.css +0 -1
  150. package/story-elements/StoryElement/index.js +0 -75
  151. package/story-elements/Summary/index.js +0 -190
  152. package/story-elements/Summary/styles.arrow.css +0 -1
  153. package/story-elements/Text/index.js +0 -165
  154. package/story-elements/Text/styles.arrow.css +0 -1
  155. package/story-elements/Video/index.js +0 -81
  156. package/story-elements/Video/styles.arrow.css +0 -1
  157. package/story-templates/ListicleStoryTemplate/index.js +0 -5586
  158. package/story-templates/ListicleStoryTemplate/styles.arrow.css +0 -1
  159. package/story-templates/LiveBlogStoryTemplate/index.js +0 -5762
  160. package/story-templates/LiveBlogStoryTemplate/styles.arrow.css +0 -1
  161. package/story-templates/PhotoStoryTemplate/index.js +0 -5564
  162. package/story-templates/PhotoStoryTemplate/styles.arrow.css +0 -1
  163. package/story-templates/TextStoryTemplate/index.js +0 -5637
  164. package/story-templates/TextStoryTemplate/styles.arrow.css +0 -1
  165. package/story-templates/VideoStoryTemplate/index.js +0 -5496
  166. package/story-templates/VideoStoryTemplate/styles.arrow.css +0 -1
@@ -1 +0,0 @@
1
- .headline-m_wrapper__Ohhox{margin-bottom:6px}.headline-m_headline__bRjMh{color:var(--arrow-c-mono2);font-weight:var(--arrow-fw-semi-bold);margin-bottom:var(--arrow-spacing-xxs)}@media (min-width:768px){.headline-m_headline__bRjMh{margin-bottom:var(--arrow-spacing-xs)}}.headline-m_wrapper__Ohhox .headline-m_headline__bRjMh{display:inline;margin-bottom:var(--arrow-spacing-xs)}.headline-m_dark__M4Yl9{color:var(--arrow-c-mono2)}.headline-m_light__IBi09{color:var(--arrow-c-invert-mono2)}
@@ -1,336 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
6
- var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
7
- var components = require('@quintype/components');
8
- var lodash = require('lodash');
9
- var PropTypes = require('prop-types');
10
- var React = require('react');
11
- var reactRedux = require('react-redux');
12
- require('@babel/runtime/helpers/asyncToGenerator');
13
- require('@babel/runtime/helpers/typeof');
14
- require('@babel/runtime/regenerator');
15
- require('react-timeago');
16
- require('date-fns-tz');
17
-
18
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
-
20
- var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
21
- var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
22
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
23
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
-
25
- var clientWidths = {
26
- mobile: 767,
27
- tablet: 1024
28
- };
29
- var clientWidth = function clientWidth(device) {
30
- var foundDeviceWidth = lodash.get(clientWidths, device);
31
-
32
- if (foundDeviceWidth) {
33
- return lodash.get(global, "document.documentElement.clientWidth") <= foundDeviceWidth;
34
- }
35
-
36
- return false;
37
- };
38
- function isExternalStory() {
39
- var story = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
40
- var _story$storyTemplate = story["story-template"],
41
- storyTemplate = _story$storyTemplate === void 0 ? "" : _story$storyTemplate,
42
- _story$metadata = story.metadata,
43
- metadata = _story$metadata === void 0 ? {} : _story$metadata;
44
- return storyTemplate === "news-elsewhere" ? lodash.get(metadata, ["reference-url"], "") : "";
45
- } // Adds target='_blank' attribute to anchor tags if not present
46
- PropTypes__default["default"].shape({
47
- "sketches-host": PropTypes__default["default"].string,
48
- "cdn-name": PropTypes__default["default"].string,
49
- "cdn-image": PropTypes__default["default"].string
50
- });
51
- PropTypes__default["default"].shape({
52
- headline: PropTypes__default["default"].string,
53
- "last-published-at": PropTypes__default["default"].number,
54
- subheadline: PropTypes__default["default"].string
55
- });
56
- var getStoryUrl = function getStoryUrl(story) {
57
- var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
58
- return lodash.get(story, ["story-template"]) === "news-elsewhere" ? lodash.get(story, ["metadata", "reference-url"], "") : story.url || defaultValue;
59
- };
60
-
61
- var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
62
- var useStateValue = function useStateValue() {
63
- return React.useContext(StateContext);
64
- };
65
-
66
- var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
67
- var _ref$width = _ref.width,
68
- width = _ref$width === void 0 ? 40 : _ref$width,
69
- _ref$height = _ref.height,
70
- height = _ref$height === void 0 ? 30 : _ref$height,
71
- _ref$iconColor = _ref.iconColor,
72
- iconColor = _ref$iconColor === void 0 ? "#99B0CB" : _ref$iconColor;
73
- return /*#__PURE__*/React__default["default"].createElement("svg", {
74
- width: width,
75
- height: height,
76
- viewBox: "0 0 102 76",
77
- version: "1.1"
78
- }, /*#__PURE__*/React__default["default"].createElement("g", {
79
- id: "demo-home-copy",
80
- stroke: "none",
81
- strokeWidth: "1",
82
- fill: "none",
83
- fillRule: "evenodd",
84
- transform: "translate(-377.000000, -314.000000)"
85
- }, /*#__PURE__*/React__default["default"].createElement("g", {
86
- id: "Group-13",
87
- transform: "translate(377.000000, 314.000000)"
88
- }, /*#__PURE__*/React__default["default"].createElement("path", {
89
- 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",
90
- id: "Combined-Shape",
91
- fill: iconColor,
92
- fillRule: "nonzero"
93
- }), /*#__PURE__*/React__default["default"].createElement("rect", {
94
- id: "Rectangle-19",
95
- stroke: iconColor,
96
- strokeWidth: "3",
97
- x: "1.5",
98
- y: "1.5",
99
- width: "99",
100
- height: "73",
101
- rx: "3"
102
- }))));
103
- };
104
- ImageFallbackIcon.propTypes = {
105
- width: PropTypes__default["default"].object,
106
- height: PropTypes__default["default"].object,
107
- iconColor: PropTypes__default["default"].object
108
- };
109
-
110
- var imageFallback = function imageFallback() {
111
- return /*#__PURE__*/React__default["default"].createElement("div", {
112
- className: "arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"
113
- }, /*#__PURE__*/React__default["default"].createElement("figure", {
114
- className: "arr--fallback-svg fallback-m_fallback-svg__tK9fL"
115
- }, /*#__PURE__*/React__default["default"].createElement(ImageFallbackIcon, null)));
116
- };
117
-
118
- var FallbackImage = function FallbackImage(_ref) {
119
- var slug = _ref.slug;
120
-
121
- if (slug) {
122
- return /*#__PURE__*/React__default["default"].createElement(components.Link, {
123
- href: slug,
124
- "aria-label": "image-fallback"
125
- }, imageFallback());
126
- } else {
127
- return imageFallback();
128
- }
129
- };
130
- FallbackImage.propTypes = {
131
- slug: PropTypes__default["default"].string
132
- };
133
-
134
- var HyperLinkIcon = function HyperLinkIcon() {
135
- return /*#__PURE__*/React__default["default"].createElement("svg", {
136
- xmlns: "http://www.w3.org/2000/svg",
137
- width: "36",
138
- height: "28"
139
- }, /*#__PURE__*/React__default["default"].createElement("g", {
140
- fill: "none",
141
- fillRule: "evenodd"
142
- }, /*#__PURE__*/React__default["default"].createElement("rect", {
143
- width: "36",
144
- height: "28",
145
- fill: "#3D6FCF",
146
- rx: "4"
147
- }), /*#__PURE__*/React__default["default"].createElement("path", {
148
- stroke: "#FFF",
149
- strokeLinecap: "round",
150
- strokeLinejoin: "round",
151
- strokeWidth: "2",
152
- d: "M22 14.667v4c0 .736-.597 1.333-1.333 1.333h-7.334A1.333 1.333 0 0112 18.667v-7.334c0-.736.597-1.333 1.333-1.333h4M20 8h4v4m-7.333 3.333L24 8"
153
- })));
154
- };
155
-
156
- var HyperLink = function HyperLink(_ref) {
157
- var _ref$hyperLink = _ref.hyperLink,
158
- hyperLink = _ref$hyperLink === void 0 ? "" : _ref$hyperLink;
159
- if (!hyperLink) return null;
160
- return /*#__PURE__*/React__default["default"].createElement(components.Link, {
161
- href: hyperLink,
162
- "aria-label": "hyperlink-button",
163
- className: "arr--hyperlink-button hyperlink-m_hyperlink-button__1CqWx",
164
- target: "_blank",
165
- rel: "noopener noreferrer"
166
- }, /*#__PURE__*/React__default["default"].createElement(HyperLinkIcon, null));
167
- };
168
- HyperLink.propTypes = {
169
- hyperLink: PropTypes__default["default"].string
170
- };
171
-
172
- var _styleModuleImportMap = {
173
- "./hero-image.m.css": {
174
- "hero-image": "hero-image-m_hero-image__3lraV",
175
- "right-padding": "hero-image-m_right-padding__1LkCe",
176
- "left-padding": "hero-image-m_left-padding__pYRAj",
177
- "right-padding-mob": "hero-image-m_right-padding-mob__3-uOU",
178
- "placeholder": "hero-image-m_placeholder__1omCm",
179
- "hero-image-mob": "hero-image-m_hero-image-mob__13JJp",
180
- "with-padding": "hero-image-m_with-padding__324G_",
181
- "image": "hero-image-m_image__1mz0U"
182
- }
183
- };
184
- var HeroImage = function HeroImage(_ref) {
185
- var story = _ref.story,
186
- FullBleed = _ref.FullBleed,
187
- aspectRatio = _ref.aspectRatio,
188
- defaultWidth = _ref.defaultWidth,
189
- widths = _ref.widths,
190
- isHorizontal = _ref.isHorizontal,
191
- isHorizontalMobile = _ref.isHorizontalMobile,
192
- isHorizontalWithImageLast = _ref.isHorizontalWithImageLast,
193
- defaultFallback = _ref.defaultFallback,
194
- isStoryPageImage = _ref.isStoryPageImage,
195
- config = _ref.config;
196
-
197
- var _ref2 = useStateValue() || {},
198
- _ref2$fallbackImageUr = _ref2.fallbackImageUrl,
199
- fallbackImageUrl = _ref2$fallbackImageUr === void 0 ? "" : _ref2$fallbackImageUr;
200
-
201
- var _config$StoryTemplate = config.StoryTemplateIcon,
202
- StoryTemplateIcon = _config$StoryTemplate === void 0 ? function () {
203
- return null;
204
- } : _config$StoryTemplate;
205
- var showImagePlaceholder = reactRedux.useSelector(function (state) {
206
- return lodash.get(state, ["qt", "config", "showPlaceholder"]);
207
- });
208
- var getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
209
- var fullBleed = FullBleed ? "" : "with-padding";
210
- var heroImageClass = "hero-image";
211
- if (isHorizontal) heroImageClass = "right-padding";else if (isHorizontalWithImageLast) heroImageClass = "left-padding";
212
- var heroImageMobClasses = isHorizontalMobile ? "right-padding-mob" : "";
213
-
214
- var getPadding = function getPadding(aspectRatio) {
215
- var _aspectRatio = _slicedToArray__default["default"](aspectRatio, 2),
216
- height = _aspectRatio[0],
217
- width = _aspectRatio[1];
218
-
219
- if (height > 0 && width > 0) {
220
- var padding = width / height * 100;
221
- return padding;
222
- }
223
-
224
- return 0;
225
- };
226
-
227
- var _aspectRatio2 = _slicedToArray__default["default"](aspectRatio, 2),
228
- mobileAspectRatio = _aspectRatio2[0],
229
- _aspectRatio2$ = _aspectRatio2[1],
230
- desktopAspectRatio = _aspectRatio2$ === void 0 ? mobileAspectRatio : _aspectRatio2$;
231
-
232
- var isMobile = clientWidth("mobile");
233
- var imageAspectRatio = isMobile ? mobileAspectRatio : desktopAspectRatio;
234
- var imagePadding = isMobile ? getPadding(mobileAspectRatio) : getPadding(desktopAspectRatio);
235
- var slug = lodash.get(story, ["hero-image-s3-key"]) || lodash.get(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]);
236
- var hyperLink = lodash.get(story, ["hero-image-hyperlink"], "");
237
-
238
- var fallbackImage = function fallbackImage() {
239
- if (!slug) {
240
- if (fallbackImageUrl && !isStoryPageImage) {
241
- return /*#__PURE__*/React__default["default"].createElement("figure", {
242
- style: {
243
- paddingTop: imagePadding + "%"
244
- },
245
- className: "arr--responsive-hero-image " + _getClassName__default["default"]("image ".concat(getPlaceholderStyleName), _styleModuleImportMap)
246
- }, /*#__PURE__*/React__default["default"].createElement("img", {
247
- className: "qt-image",
248
- "data-src": "".concat(fallbackImageUrl),
249
- alt: "image-fallback"
250
- }));
251
- }
252
-
253
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, defaultFallback ? /*#__PURE__*/React__default["default"].createElement("div", {
254
- "data-test-id": "arr--fallback-hero-image",
255
- style: {
256
- paddingTop: imagePadding + "%"
257
- },
258
- className: "arr--fallback-hero-image " + _getClassName__default["default"]("image ".concat(getPlaceholderStyleName), _styleModuleImportMap)
259
- }, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
260
- storyTemplate: story["story-template"]
261
- }), /*#__PURE__*/React__default["default"].createElement(FallbackImage, null)) : null);
262
- }
263
-
264
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("figure", {
265
- style: {
266
- paddingTop: imagePadding + "%"
267
- },
268
- className: "arr--responsive-hero-image " + _getClassName__default["default"]("image ".concat(getPlaceholderStyleName), _styleModuleImportMap)
269
- }, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
270
- storyTemplate: story["story-template"]
271
- }), /*#__PURE__*/React__default["default"].createElement(components.ResponsiveHeroImage, {
272
- story: story,
273
- aspectRatio: imageAspectRatio,
274
- defaultWidth: defaultWidth,
275
- widths: widths,
276
- imgParams: {
277
- auto: ["format", "compress"],
278
- fit: "max"
279
- }
280
- })), isStoryPageImage && hyperLink && /*#__PURE__*/React__default["default"].createElement(HyperLink, {
281
- hyperLink: hyperLink
282
- }));
283
- };
284
-
285
- return story && (isStoryPageImage ? /*#__PURE__*/React__default["default"].createElement("div", {
286
- "data-test-id": "arr--hero-image",
287
- className: "arr--hero-image " + _getClassName__default["default"]("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap)
288
- }, fallbackImage()) : /*#__PURE__*/React__default["default"].createElement(components.Link, {
289
- "data-test-id": "arr--hero-image",
290
- href: getStoryUrl(story, "/".concat(story.slug)),
291
- externalLink: isExternalStory(story),
292
- "aria-label": "fallback-hero-image",
293
- className: "arr--hero-image " + _getClassName__default["default"]("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap)
294
- }, fallbackImage()));
295
- };
296
- HeroImage.propTypes = {
297
- /** The Story Object from the API response */
298
- story: PropTypes__default["default"].object.isRequired,
299
-
300
- /** Removes the Hero Image padding for the image to bleed over the margin */
301
- FullBleed: PropTypes__default["default"].bool,
302
-
303
- /** The default width for the image, in case the browser does not support srcset */
304
- defaultWidth: PropTypes__default["default"].number,
305
-
306
- /** The list of available widths */
307
- widths: PropTypes__default["default"].array,
308
- // fatch the correct hero image
309
- aspectRatio: PropTypes__default["default"].array,
310
- // Hints for the browser to choose the best size
311
-
312
- /** This prop is responsible for adding padding-right of the image and remove padding bottom of the image */
313
- isHorizontal: PropTypes__default["default"].bool,
314
-
315
- /** This prop is responsible for adding padding-bottom in desktop and padding-right in mobile */
316
- isHorizontalMobile: PropTypes__default["default"].bool,
317
- // this prop is responsive for rendering fallback image on story page
318
- defaultFallback: PropTypes__default["default"].bool,
319
- isHorizontalWithImageLast: PropTypes__default["default"].bool,
320
- isStoryPageImage: PropTypes__default["default"].bool,
321
- config: PropTypes__default["default"].object
322
- };
323
- HeroImage.defaultProps = {
324
- FullBleed: true,
325
- aspectRatio: [[1, 1], [16, 9]],
326
- defaultWidth: 480,
327
- widths: [250, 480, 640],
328
- isHorizontal: false,
329
- isHorizontalMobile: false,
330
- defaultFallback: true,
331
- isStoryPageImage: false,
332
- isHorizontalWithImageLast: false,
333
- config: {}
334
- };
335
-
336
- exports.HeroImage = HeroImage;
@@ -1 +0,0 @@
1
- .fallback-m_image-position__rAOpW{bottom:0;left:0;position:absolute;right:0;top:0}.fallback-m_image__j9gJ2{background:var(--fallback-img)}.fallback-m_image__j9gJ2:after{bottom:0;content:"";left:0;position:absolute;right:0;top:0}.fallback-m_fallback-svg__LJk7c svg{bottom:0;height:100%;left:50%;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;transform:translateX(-50%)}.hyperlink-m_hyperlink-button__sysnC{bottom:var(--arrow-spacing-xxs);position:absolute;right:var(--arrow-spacing-xxs);z-index:10}.hyperlink-m_hyperlink-button__sysnC svg rect{fill:var(--arrow-c-brand1)}.hero-image-m_hero-image__GPENA{flex-grow:1;margin-bottom:var(--arrow-spacing-xs);padding-right:0;position:relative}.hero-image-m_right-padding__BTBXn{flex-grow:1;margin-bottom:0;padding-right:var(--arrow-spacing-s)}.hero-image-m_left-padding__yiln3{flex-grow:1;margin-bottom:0;padding-left:var(--arrow-spacing-s)}.hero-image-m_right-padding-mob__y7wsK{flex-basis:30%;flex-grow:1;margin-bottom:0;padding-right:var(--arrow-spacing-s)}@media (min-width:768px){.hero-image-m_right-padding-mob__y7wsK{margin-bottom:var(--arrow-spacing-xs);padding-right:0}}.hero-image-m_placeholder__QdaNV{background-color:#d3d3d3}html[dir=rtl] .hero-image-m_right-padding-mob__y7wsK,html[dir=rtl] .hero-image-m_right-padding__BTBXn{padding-left:var(--arrow-spacing-s);padding-right:0}@media (min-width:768px){html[dir=rtl] .hero-image-m_right-padding-mob__y7wsK{padding-left:0}}.hero-image-m_hero-image-mob__BXKnM{flex-grow:1;margin-bottom:var(--arrow-spacing-xs);padding-right:0}.hero-image-m_with-padding__4uBJT{padding:16px 16px 0}.hero-image-m_image__868Y6{position:relative}.hero-image-m_image__868Y6 img{bottom:0;height:100%;left:0;position:absolute;right:0;top:0}
@@ -1,175 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
- var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
7
- var React = require('react');
8
- var components = require('@quintype/components');
9
- var PropTypes = require('prop-types');
10
- require('@babel/runtime/helpers/asyncToGenerator');
11
- require('@babel/runtime/helpers/typeof');
12
- require('@babel/runtime/regenerator');
13
- var lodash = require('lodash');
14
- require('react-timeago');
15
- require('date-fns-tz');
16
-
17
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
-
19
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
20
- var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
21
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
22
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
23
-
24
- var hexToRGB = function hexToRGB(hex) {
25
- var r = parseInt(hex.slice(1, 3), 16);
26
- var g = parseInt(hex.slice(3, 5), 16);
27
- var b = parseInt(hex.slice(5, 7), 16);
28
- return {
29
- r: r,
30
- g: g,
31
- b: b
32
- };
33
- };
34
- var getLuminanceOfColor = function getLuminanceOfColor(hex) {
35
- var _hexToRGB = hexToRGB(hex),
36
- r = _hexToRGB.r,
37
- g = _hexToRGB.g,
38
- b = _hexToRGB.b;
39
-
40
- return r * 0.299 + g * 0.587 + b * 0.114;
41
- };
42
- var rgbToHex = function rgbToHex() {
43
- var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgba(255, 255, 255, 0)";
44
- var rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
45
- return rgba && rgba.length === 4 ? "#" + ("0" + parseInt(rgba[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[3], 10).toString(16)).slice(-2) : color;
46
- };
47
- var getTextColor = function getTextColor() {
48
- var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(255,255,255)";
49
- var isRegexCheck = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(theme);
50
- var getHexValue = !isRegexCheck ? rgbToHex(theme) : theme;
51
- var textColor = getLuminanceOfColor(getHexValue) < 155 ? "light" : "dark";
52
- return textColor;
53
- };
54
- var getSlug = function getSlug(collection) {
55
- var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
56
- var _config$magazineSlug = config.magazineSlug,
57
- magazineSlug = _config$magazineSlug === void 0 ? "" : _config$magazineSlug,
58
- _config$isArchivePage = config.isArchivePage,
59
- isArchivePage = _config$isArchivePage === void 0 ? false : _config$isArchivePage;
60
-
61
- if (isArchivePage) {
62
- return "/magazine/archive/".concat(magazineSlug);
63
- }
64
-
65
- if (magazineSlug) {
66
- return "/magazine/".concat(magazineSlug, "/").concat(collection.slug);
67
- }
68
-
69
- var isSection = collection.template === "section";
70
-
71
- if (isSection) {
72
- var sectionId = lodash.get(collection, ["metadata", "section", "0", "id"], "");
73
- var sections = config.sections;
74
- var section = sections && sections.find(function (section) {
75
- return section.id === sectionId;
76
- });
77
- return section ? section["section-url"] : "/";
78
- }
79
-
80
- return "/collection/".concat(collection.slug);
81
- };
82
- PropTypes__default["default"].shape({
83
- "sketches-host": PropTypes__default["default"].string,
84
- "cdn-name": PropTypes__default["default"].string,
85
- "cdn-image": PropTypes__default["default"].string
86
- });
87
- PropTypes__default["default"].shape({
88
- headline: PropTypes__default["default"].string,
89
- "last-published-at": PropTypes__default["default"].number,
90
- subheadline: PropTypes__default["default"].string
91
- });
92
- var generateNavigateSlug = function generateNavigateSlug() {
93
- var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
94
- var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
95
- var customUrlPath = arguments.length > 2 ? arguments[2] : undefined;
96
-
97
- if (customUrlPath) {
98
- return customUrlPath;
99
- }
100
-
101
- var _config$magazineSlug2 = config.magazineSlug,
102
- magazineSlug = _config$magazineSlug2 === void 0 ? "" : _config$magazineSlug2,
103
- _config$isArchivePage2 = config.isArchivePage,
104
- isArchivePage = _config$isArchivePage2 === void 0 ? false : _config$isArchivePage2;
105
-
106
- if (isArchivePage) {
107
- return "/magazine/archive/".concat(magazineSlug);
108
- }
109
-
110
- if (magazineSlug) {
111
- return "/magazine/".concat(magazineSlug, "/").concat(collection.slug);
112
- }
113
-
114
- if (collection) {
115
- return getSlug(collection, config);
116
- }
117
-
118
- return "/";
119
- };
120
-
121
- var _styleModuleImportMap = {
122
- "./load-more.m.css": {
123
- "button": "load-more-m_button__1mmf1",
124
- "default": "load-more-m_default__2_k4V",
125
- "dark": "load-more-m_dark__3dfzb",
126
- "light": "load-more-m_light__ePZQI"
127
- }
128
- };
129
-
130
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
131
-
132
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
133
- var LoadmoreButton = function LoadmoreButton(_ref) {
134
- var _ref$config = _ref.config,
135
- config = _ref$config === void 0 ? {} : _ref$config,
136
- collection = _ref.collection,
137
- _ref$template = _ref.template,
138
- template = _ref$template === void 0 ? "SubsequentLoadCount" : _ref$template,
139
- onClick = _ref.onClick,
140
- navigate = _ref.navigate,
141
- qtConfig = _ref.qtConfig;
142
- var _config$showButton = config.showButton,
143
- showButton = _config$showButton === void 0 ? true : _config$showButton,
144
- _config$buttonText = config.buttonText,
145
- buttonText = _config$buttonText === void 0 ? "Read More" : _config$buttonText,
146
- _config$theme = config.theme,
147
- theme = _config$theme === void 0 ? "" : _config$theme,
148
- _config$customUrlPath = config.customUrlPath,
149
- customUrlPath = _config$customUrlPath === void 0 ? "" : _config$customUrlPath;
150
- if (!showButton) return null;
151
- var textColor = getTextColor(theme);
152
- var slug = customUrlPath ? "/".concat(customUrlPath) : generateNavigateSlug(collection, _objectSpread(_objectSpread({}, qtConfig), config));
153
- return template === "SubsequentLoadCount" ? /*#__PURE__*/React__default["default"].createElement("div", {
154
- onClick: onClick,
155
- "data-test-id": "load-more",
156
- className: "arr--button " + _getClassName__default["default"]("button ".concat(textColor, " default"), _styleModuleImportMap)
157
- }, buttonText) : /*#__PURE__*/React__default["default"].createElement(components.LinkBase, {
158
- href: slug,
159
- navigateTo: navigate,
160
- "data-test-id": "load-more",
161
- "aria-label": "load-more"
162
- }, /*#__PURE__*/React__default["default"].createElement("div", {
163
- className: "arr--button " + _getClassName__default["default"]("button ".concat(textColor, " default"), _styleModuleImportMap)
164
- }, buttonText));
165
- };
166
- LoadmoreButton.propTypes = {
167
- collection: PropTypes__default["default"].object,
168
- template: PropTypes__default["default"].string,
169
- config: PropTypes__default["default"].object,
170
- onClick: PropTypes__default["default"].func,
171
- navigate: PropTypes__default["default"].func,
172
- qtConfig: PropTypes__default["default"].object
173
- };
174
-
175
- exports.LoadmoreButton = LoadmoreButton;
@@ -1 +0,0 @@
1
- .load-more-m_button__qDfvU{background-color:transparent;border:1px solid;border-radius:var(--arrow-spacing-xxs);cursor:pointer;display:flex;font-size:var(--arrow-fs-xs);margin:var(--arrow-spacing-m) auto var(--arrow-spacing-xs) auto;padding:var(--arrow-spacing-xs) var(--arrow-spacing-l);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.load-more-m_default__HMaZ1{display:block}.load-more-m_dark__pAdYl{color:var(--arrow-c-mono2)}.load-more-m_light__x9Bdj{color:var(--arrow-c-invert-mono2)}