@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,191 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var lodash = require('lodash');
5
- var index$2 = require('./index-0f809dd9.js');
6
- var index$3 = require('./index-8462c597.js');
7
- var index$4 = require('./index-afd44863.js');
8
- var index$1 = require('./index-93cb06d1.js');
9
- var index = require('./index-142f015c.js');
10
- var components = require('@quintype/components');
11
- var PropTypes = require('prop-types');
12
- var reactRedux = require('react-redux');
13
- require('babel-plugin-react-css-modules/dist/browser/getClassName');
14
- require('@babel/runtime/helpers/slicedToArray');
15
- require('@babel/runtime/helpers/defineProperty');
16
- require('react-dom');
17
- require('@babel/runtime/helpers/toConsumableArray');
18
- require('@babel/runtime/helpers/asyncToGenerator');
19
- require('@babel/runtime/regenerator');
20
- require('@babel/runtime/helpers/typeof');
21
- require('react-timeago');
22
- require('date-fns-tz');
23
-
24
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
25
-
26
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
27
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
28
-
29
- var loadMore = function loadMore(_ref) {
30
- var isLoading = _ref.isLoading,
31
- storyItems = _ref.storyItems,
32
- getMoreStories = _ref.getMoreStories,
33
- _ref$subsequentLoadCo = _ref.subsequentLoadCount,
34
- subsequentLoadCount = _ref$subsequentLoadCo === void 0 ? 3 : _ref$subsequentLoadCo;
35
- if (isLoading) return;
36
- var limit = subsequentLoadCount;
37
- var offset = storyItems.length;
38
- getMoreStories(offset, limit);
39
- };
40
-
41
- var ThreeColGridBase = function ThreeColGridBase(_ref2) {
42
- var collection = _ref2.collection,
43
- _ref2$config = _ref2.config,
44
- config = _ref2$config === void 0 ? {} : _ref2$config,
45
- getMoreStories = _ref2.getMoreStories,
46
- isLoadMoreVisible = _ref2.isLoadMoreVisible,
47
- isLoading = _ref2.isLoading,
48
- isolatedLoadMore = _ref2.isolatedLoadMore;
49
- var _config$collectionNam = config.collectionNameBorderColor,
50
- collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
51
- _config$borderColor = config.borderColor,
52
- borderColor = _config$borderColor === void 0 ? "" : _config$borderColor,
53
- _config$theme = config.theme,
54
- theme = _config$theme === void 0 ? "" : _config$theme,
55
- _config$slotConfig = config.slotConfig,
56
- slotConfig = _config$slotConfig === void 0 ? [] : _config$slotConfig,
57
- _config$border = config.border,
58
- border = _config$border === void 0 ? "" : _config$border,
59
- _config$collectionNam2 = config.collectionNameTemplate,
60
- collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
61
- _config$footerSlotCon = config.footerSlotConfig,
62
- footerSlotConfig = _config$footerSlotCon === void 0 ? {} : _config$footerSlotCon,
63
- _config$footerButton = config.footerButton,
64
- footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
65
- _config$subsequentLoa = config.subsequentLoadCount,
66
- subsequentLoadCount = _config$subsequentLoa === void 0 ? 3 : _config$subsequentLoa;
67
- var storyItems = components.collectionToStories(collection);
68
- if (!storyItems.length) return null;
69
- var textColor = index.getTextColor(theme);
70
- var footerSlot = footerSlotConfig.footerSlot;
71
- var footerSlotComp = footerSlot ? footerSlot() : null;
72
-
73
- var _get = lodash.get(slotConfig, [0], {}),
74
- _get$type = _get.type,
75
- type = _get$type === void 0 ? "" : _get$type,
76
- component = _get.component;
77
-
78
- var adWidgetSlot = type === "ad" || type === "widget" ? index.getSlot(type, component) : null;
79
- var dispatch = reactRedux.useDispatch();
80
- var qtConfig = reactRedux.useSelector(function (state) {
81
- return lodash.get(state, ["qt", "config"], {});
82
- });
83
-
84
- var getLoadMore = function getLoadMore(opts) {
85
- if (!isLoadMoreVisible) return null;
86
-
87
- if (isolatedLoadMore) {
88
- return /*#__PURE__*/React__default["default"].createElement(index$1.LoadMoreTarget, {
89
- collection: collection,
90
- componentName: "ThreeColGrid",
91
- offset: storyItems.length,
92
- limit: subsequentLoadCount
93
- });
94
- }
95
-
96
- var url = index.generateNavigateSlug(collection, qtConfig);
97
- return /*#__PURE__*/React__default["default"].createElement(index$1.ProgressiveHydration, null, /*#__PURE__*/React__default["default"].createElement(index$1.LoadmoreButton, {
98
- config: config,
99
- collection: collection,
100
- template: footerButton,
101
- onClick: function onClick() {
102
- return loadMore(opts);
103
- },
104
- navigate: function navigate() {
105
- return index.navigateTo(dispatch, url);
106
- },
107
- qtConfig: qtConfig
108
- }));
109
- };
110
-
111
- var storyCard = function storyCard(story) {
112
- return /*#__PURE__*/React__default["default"].createElement("div", {
113
- className: "three-col-m_cards__2HyyK"
114
- }, /*#__PURE__*/React__default["default"].createElement(index$2.StoryCard, {
115
- story: story,
116
- border: border,
117
- theme: theme,
118
- isHorizontalMobile: true,
119
- config: config
120
- }, /*#__PURE__*/React__default["default"].createElement(index$3.HeroImage, {
121
- aspectRatio: [[16, 9]],
122
- story: story,
123
- isHorizontalMobile: true
124
- }), /*#__PURE__*/React__default["default"].createElement(index$4.StorycardContent, {
125
- theme: theme,
126
- border: border,
127
- story: story,
128
- isHorizontalMobile: true,
129
- borderColor: borderColor,
130
- config: config
131
- })));
132
- };
133
-
134
- return /*#__PURE__*/React__default["default"].createElement("div", {
135
- className: "full-width-with-padding arrow-component",
136
- "data-test-id": "three-col-grid",
137
- style: {
138
- backgroundColor: theme,
139
- color: textColor
140
- }
141
- }, /*#__PURE__*/React__default["default"].createElement("div", {
142
- className: "three-col-m_three-col-grid__y7rZK"
143
- }, /*#__PURE__*/React__default["default"].createElement(index$1.CollectionName, {
144
- collection: collection,
145
- collectionNameTemplate: collectionNameTemplate,
146
- collectionNameBorderColor: collectionNameBorderColor
147
- }), /*#__PURE__*/React__default["default"].createElement("div", {
148
- className: "three-col-m_wrapper__20m5m"
149
- }, storyItems.slice(0, 2).map(function (story, index) {
150
- return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
151
- key: "story-3col1-".concat(index, "-").concat(lodash.get(story, ["id"], "0"))
152
- }, storyCard(story));
153
- }), storyItems.length < 2 && /*#__PURE__*/React__default["default"].createElement("div", null), adWidgetSlot, storyItems.slice(2).map(function (story, index) {
154
- return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
155
- key: "story-3col1-".concat(index, "-").concat(lodash.get(story, ["id"], "0"))
156
- }, storyCard(story));
157
- })), getLoadMore({
158
- isLoading: isLoading,
159
- storyItems: storyItems,
160
- getMoreStories: getMoreStories,
161
- subsequentLoadCount: subsequentLoadCount
162
- }), footerSlotComp));
163
- };
164
- ThreeColGridBase.propTypes = {
165
- /** collection is the array of objects which is returning by API */
166
- collection: PropTypes__default["default"].object.isRequired,
167
-
168
- /** The config for the Row */
169
- config: PropTypes__default["default"].shape({
170
- theme: PropTypes__default["default"].string,
171
- border: PropTypes__default["default"].bool,
172
- slotConfig: PropTypes__default["default"].array,
173
- footerButton: PropTypes__default["default"].string,
174
- collectionNameTemplate: PropTypes__default["default"].string,
175
- collectionNameBorderColor: PropTypes__default["default"].string,
176
- subsequentLoadCount: PropTypes__default["default"].number
177
- }),
178
- getMoreStories: PropTypes__default["default"].func,
179
- isLoadMoreVisible: PropTypes__default["default"].bool,
180
- isLoading: PropTypes__default["default"].bool,
181
- isolatedLoadMore: PropTypes__default["default"].bool
182
- };
183
- ThreeColGridBase.defaultProps = {
184
- getMoreStories: function getMoreStories() {},
185
- isLoadMoreVisible: true,
186
- isLoading: false
187
- };
188
- var ThreeColGrid = index$1.StateProvider(ThreeColGridBase);
189
-
190
- exports.ThreeColGrid = ThreeColGrid;
191
- exports.ThreeColGridBase = ThreeColGridBase;
@@ -1,300 +0,0 @@
1
- 'use strict';
2
-
3
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
- var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
5
- var React = require('react');
6
- var reactRedux = require('react-redux');
7
- var lodash = require('lodash');
8
- var PropTypes = require('prop-types');
9
- var components = require('@quintype/components');
10
- var index$1 = require('./index-93cb06d1.js');
11
- var index = require('./index-142f015c.js');
12
- require('react-dom');
13
- require('@babel/runtime/helpers/slicedToArray');
14
- require('@babel/runtime/helpers/toConsumableArray');
15
- require('@babel/runtime/helpers/asyncToGenerator');
16
- require('@babel/runtime/regenerator');
17
- require('@babel/runtime/helpers/typeof');
18
- require('react-timeago');
19
- require('date-fns-tz');
20
-
21
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
22
-
23
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
24
- var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
25
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
26
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
27
-
28
- var UserFallbackIcon = function UserFallbackIcon(_ref) {
29
- var _ref$width = _ref.width,
30
- width = _ref$width === void 0 ? 120 : _ref$width,
31
- _ref$height = _ref.height,
32
- height = _ref$height === void 0 ? 120 : _ref$height;
33
- return /*#__PURE__*/React__default["default"].createElement("svg", {
34
- width: width,
35
- height: height,
36
- viewBox: "0 0 120 120",
37
- xmlns: "http://www.w3.org/2000/svg"
38
- }, /*#__PURE__*/React__default["default"].createElement("path", {
39
- d: "M93.28 108.98c-1.055-17.675-15.47-31.678-33.098-31.678-17.708 0-32.173 14.129-33.11 31.916 9.415 6.311 20.741 9.993 32.927 9.993 12.338 0 23.795-3.774 33.28-10.23l.001-.001zM58.584 73.283c9.928 0 17.977-8.275 17.977-18.483 0-10.209-8.049-18.484-17.977-18.484-9.929 0-17.977 8.275-17.977 18.484 0 10.208 8.048 18.483 17.977 18.483zM60 120C26.863 120 0 93.137 0 60S26.863 0 60 0s60 26.863 60 60-26.863 60-60 60z",
40
- fill: "#DADADA",
41
- fillRule: "nonzero"
42
- }));
43
- };
44
- UserFallbackIcon.propTypes = {
45
- width: PropTypes__default["default"].object,
46
- height: PropTypes__default["default"].object
47
- };
48
-
49
- var _styleModuleImportMap$1 = {
50
- "./author-image.m.css": {
51
- "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
52
- "mobile": "768px",
53
- "tablet": "992px",
54
- "image-container": "author-image-m_image-container__19WNd",
55
- "author-image": "author-image-m_author-image__D8GMB",
56
- "square": "author-image-m_square__bjK7M",
57
- "small-circle": "author-image-m_small-circle__DbQMN",
58
- "smaller-circle": "author-image-m_smaller-circle__2yMOZ"
59
- }
60
- };
61
-
62
- var authorWithImage = function authorWithImage(author, templateStyle) {
63
- var avatarUrl = author["avatar-url"],
64
- avatarS3Key = author["avatar-s3-key"],
65
- name = author.name;
66
- return /*#__PURE__*/React__default["default"].createElement("div", {
67
- "data-test-id": "author-image",
68
- className: "arr--author-image " + _getClassName__default["default"]("author-image ".concat(templateStyle), _styleModuleImportMap$1)
69
- }, /*#__PURE__*/React__default["default"].createElement("figure", {
70
- className: "author-image-m_image-container__19WNd"
71
- }, avatarS3Key ? /*#__PURE__*/React__default["default"].createElement(components.ResponsiveImage, {
72
- slug: avatarS3Key,
73
- alt: name,
74
- defaultWidth: 250,
75
- widths: [250, 480],
76
- aspectRatio: [[1, 1], [1, 1]],
77
- sizes: "98vw",
78
- imgParams: {
79
- auto: ["format", "compress"]
80
- }
81
- }) : avatarUrl ? /*#__PURE__*/React__default["default"].createElement("img", {
82
- src: avatarUrl
83
- }) : /*#__PURE__*/React__default["default"].createElement(UserFallbackIcon, null)));
84
- };
85
-
86
- var AuthorImage = function AuthorImage(_ref) {
87
- var _ref$author = _ref.author,
88
- author = _ref$author === void 0 ? {} : _ref$author,
89
- _ref$template = _ref.template,
90
- template = _ref$template === void 0 ? "" : _ref$template,
91
- _ref$config = _ref.config,
92
- config = _ref$config === void 0 ? {} : _ref$config;
93
- var slug = author.slug;
94
- var mountAt = config.mountAt || "";
95
- var templateStyle = "";
96
- if (template === "smallerCircle") templateStyle = "smaller-circle";else if (template === "smallCircle") templateStyle = "small-circle";else if (template === "square") templateStyle = "square";
97
- if (slug) return /*#__PURE__*/React__default["default"].createElement(components.Link, {
98
- href: "".concat(mountAt, "/author/") + slug
99
- }, authorWithImage(author, templateStyle));else return authorWithImage(author, templateStyle);
100
- };
101
-
102
- AuthorImage.propTypes = {
103
- author: PropTypes__default["default"].shape({
104
- "avatar-url": PropTypes__default["default"].string,
105
- "avatar-s3-key": PropTypes__default["default"].string,
106
- name: PropTypes__default["default"].string,
107
- slug: PropTypes__default["default"].string
108
- }),
109
- template: PropTypes__default["default"].string
110
- };
111
-
112
- var _styleModuleImportMap = {
113
- "./opinion-collection.m.css": {
114
- "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
115
- "mobile": "768px",
116
- "desktop": "1025px",
117
- "opinion-collection": "opinion-collection-m_opinion-collection__1Bc7h",
118
- "content-wrapper": "opinion-collection-m_content-wrapper__y32PE",
119
- "custom-grid": "opinion-collection-m_custom-grid__33uRh",
120
- "wrapper-with-ads": "opinion-collection-m_wrapper-with-ads__2daVe",
121
- "ad-slot": "opinion-collection-m_ad-slot__2ZpaC",
122
- "headline-author": "opinion-collection-m_headline-author__2H6Tv",
123
- "border": "opinion-collection-m_border__38tun",
124
- "light": "opinion-collection-m_light__2Hent",
125
- "dark": "opinion-collection-m_dark__WMRNF",
126
- "count-3": "opinion-collection-m_count-3__3cQUB",
127
- "count-2": "opinion-collection-m_count-2__2e7g_"
128
- }
129
- };
130
-
131
- 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; }
132
-
133
- 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; }
134
-
135
- var loadMore = function loadMore(_ref) {
136
- var isLoading = _ref.isLoading,
137
- renderStories = _ref.renderStories,
138
- getMoreStories = _ref.getMoreStories,
139
- _ref$subsequentLoadCo = _ref.subsequentLoadCount,
140
- subsequentLoadCount = _ref$subsequentLoadCo === void 0 ? 3 : _ref$subsequentLoadCo;
141
- if (isLoading) return;
142
- var limit = subsequentLoadCount;
143
- var offset = renderStories.length;
144
- getMoreStories(offset, limit);
145
- };
146
-
147
- var OpinionCollectionBase = function OpinionCollectionBase(_ref2) {
148
- var collection = _ref2.collection,
149
- config = _ref2.config,
150
- getMoreStories = _ref2.getMoreStories,
151
- isLoadMoreVisible = _ref2.isLoadMoreVisible,
152
- isLoading = _ref2.isLoading,
153
- isolatedLoadMore = _ref2.isolatedLoadMore;
154
- var stories = components.collectionToStories(collection);
155
- var _config$theme = config.theme,
156
- theme = _config$theme === void 0 ? "" : _config$theme,
157
- _config$footerButton = config.footerButton,
158
- footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
159
- _config$border = config.border,
160
- border = _config$border === void 0 ? "fullBorder" : _config$border,
161
- _config$collectionNam = config.collectionNameBorderColor,
162
- collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
163
- _config$collectionNam2 = config.collectionNameTemplate,
164
- collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
165
- _config$slotConfig = config.slotConfig,
166
- slotConfig = _config$slotConfig === void 0 ? [] : _config$slotConfig,
167
- _config$subsequentLoa = config.subsequentLoadCount,
168
- subsequentLoadCount = _config$subsequentLoa === void 0 ? 3 : _config$subsequentLoa;
169
-
170
- var _get = lodash.get(slotConfig, [0], {}),
171
- _get$type = _get.type,
172
- type = _get$type === void 0 ? "story" : _get$type,
173
- _get$component = _get.component,
174
- component = _get$component === void 0 ? null : _get$component;
175
-
176
- var dispatch = reactRedux.useDispatch();
177
- var qtConfig = reactRedux.useSelector(function (state) {
178
- return lodash.get(state, ["qt", "config"], {});
179
- });
180
- if (!stories.length) return null;
181
- var textColor = index.getTextColor(theme);
182
- var borderStyle = border === "fullBorder" ? "border" : "";
183
- var slot = type === "ad" ? index.getSlot(type, component) : null;
184
- var adStyle = slot ? "custom-grid" : "";
185
-
186
- var getLoadMore = function getLoadMore(opts) {
187
- if (!isLoadMoreVisible) return null;
188
-
189
- if (isolatedLoadMore) {
190
- return /*#__PURE__*/React__default["default"].createElement(index$1.LoadMoreTarget, {
191
- collection: collection,
192
- componentName: "OpinionCollection",
193
- offset: stories.length,
194
- limit: subsequentLoadCount
195
- });
196
- }
197
-
198
- var url = index.generateNavigateSlug(collection, qtConfig);
199
- return /*#__PURE__*/React__default["default"].createElement(index$1.ProgressiveHydration, null, /*#__PURE__*/React__default["default"].createElement(index$1.LoadmoreButton, {
200
- config: config,
201
- collection: collection,
202
- template: footerButton,
203
- onClick: function onClick() {
204
- return loadMore(opts);
205
- },
206
- navigate: function navigate() {
207
- return index.navigateTo(dispatch, url);
208
- },
209
- qtConfig: qtConfig
210
- }));
211
- };
212
-
213
- var getAuthorCard = function getAuthorCard(story) {
214
- var authorData = lodash.get(story, ["authors", "0"]);
215
- return /*#__PURE__*/React__default["default"].createElement("div", {
216
- "data-test-id": "story-card"
217
- }, /*#__PURE__*/React__default["default"].createElement(index$1.Author, {
218
- story: story,
219
- hideAuthorImage: true
220
- }), /*#__PURE__*/React__default["default"].createElement("div", {
221
- className: "opinion-collection-m_headline-author__2H6Tv"
222
- }, /*#__PURE__*/React__default["default"].createElement(index$1.Headline, {
223
- story: story
224
- }), /*#__PURE__*/React__default["default"].createElement(AuthorImage, {
225
- author: authorData,
226
- template: "smallerCircle",
227
- config: config
228
- })), /*#__PURE__*/React__default["default"].createElement(index$1.AuthorWithTime, {
229
- story: story,
230
- config: _objectSpread(_objectSpread({}, config), {}, {
231
- disableMeridiem: true,
232
- showAuthor: false
233
- })
234
- }));
235
- };
236
-
237
- var countStyleName = stories.length === 2 || stories.length === 3 ? "count-".concat(stories.length) : "";
238
- return /*#__PURE__*/React__default["default"].createElement("div", {
239
- className: "full-width-with-padding arrow-component",
240
- "data-test-id": "opinion-collection",
241
- style: {
242
- backgroundColor: theme,
243
- color: textColor
244
- }
245
- }, /*#__PURE__*/React__default["default"].createElement("div", {
246
- className: "opinion-collection-m_opinion-collection__1Bc7h",
247
- style: {
248
- backgroundColor: theme,
249
- color: textColor
250
- }
251
- }, /*#__PURE__*/React__default["default"].createElement(index$1.CollectionName, {
252
- collection: collection,
253
- collectionNameTemplate: collectionNameTemplate,
254
- collectionNameBorderColor: collectionNameBorderColor,
255
- headerLevel: 2
256
- }), /*#__PURE__*/React__default["default"].createElement("div", {
257
- className: ("content-wrapper ".concat(borderStyle, " ").concat(textColor) ? "content-wrapper ".concat(borderStyle, " ").concat(textColor) + " " : "") + _getClassName__default["default"]("content-wrapper ".concat(borderStyle, " ").concat(textColor, " ").concat(adStyle), _styleModuleImportMap)
258
- }, slot ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
259
- className: "wrapper-with-ads " + _getClassName__default["default"]("wrapper-with-ads ".concat(countStyleName), _styleModuleImportMap)
260
- }, stories.slice(0, 4).map(function (story) {
261
- return getAuthorCard(story);
262
- })), /*#__PURE__*/React__default["default"].createElement("div", {
263
- className: "opinion-collection-m_ad-slot__2ZpaC"
264
- }, slot)) : stories.map(function (story) {
265
- return getAuthorCard(story);
266
- })), getLoadMore({
267
- isLoading: isLoading,
268
- stories: stories,
269
- getMoreStories: getMoreStories,
270
- subsequentLoadCount: subsequentLoadCount
271
- })));
272
- };
273
- OpinionCollectionBase.propTypes = {
274
- collection: PropTypes__default["default"].object,
275
- config: PropTypes__default["default"].shape({
276
- collectionNameBorderColor: PropTypes__default["default"].string,
277
- theme: PropTypes__default["default"].string,
278
- collectionNameTemplate: PropTypes__default["default"].string,
279
- footerButton: PropTypes__default["default"].string,
280
- border: PropTypes__default["default"].string,
281
- slotConfig: PropTypes__default["default"].array,
282
- subsequentLoadCount: PropTypes__default["default"].number
283
- }),
284
- getMoreStories: PropTypes__default["default"].func,
285
- isLoading: PropTypes__default["default"].bool,
286
- isLoadMoreVisible: PropTypes__default["default"].bool,
287
- isolatedLoadMore: PropTypes__default["default"].bool
288
- };
289
- OpinionCollectionBase.defaultProps = {
290
- getMoreStories: function getMoreStories() {},
291
- isLoadMoreVisible: true,
292
- isLoading: false,
293
- collection: {},
294
- config: {},
295
- hideFirstCard: false
296
- };
297
- var OpinionCollection = index$1.StateProvider(OpinionCollectionBase);
298
-
299
- exports.OpinionCollection = OpinionCollection;
300
- exports.OpinionCollectionBase = OpinionCollectionBase;