@quintype/arrow 3.15.1-fallback-support.1 → 3.15.1-perf.1

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 (167) hide show
  1. package/atoms/Author/index.js +2250 -0
  2. package/{Author → atoms/Author}/styles.arrow.css +0 -0
  3. package/atoms/AuthorWithTime/index.js +2954 -0
  4. package/{AuthorWithTime → atoms/AuthorWithTime}/styles.arrow.css +0 -0
  5. package/atoms/CollectionName/index.js +2334 -0
  6. package/{CollectionName → atoms/CollectionName}/styles.arrow.css +0 -0
  7. package/atoms/ExtendedLoadMore/index-2d713010.js +166 -0
  8. package/atoms/ExtendedLoadMore/index-4191a84c.js +240 -0
  9. package/atoms/ExtendedLoadMore/index-5a7900ba.js +181 -0
  10. package/atoms/ExtendedLoadMore/index-6cb56d1a.js +350 -0
  11. package/atoms/ExtendedLoadMore/index-6daa674c.js +282 -0
  12. package/atoms/ExtendedLoadMore/index-6f8c780e.js +243 -0
  13. package/atoms/ExtendedLoadMore/index-7eb05b3d.js +199 -0
  14. package/atoms/ExtendedLoadMore/index-8345922c.js +175 -0
  15. package/atoms/ExtendedLoadMore/index-99af722e.js +175 -0
  16. package/atoms/ExtendedLoadMore/index-aa8b8ab8.js +990 -0
  17. package/atoms/ExtendedLoadMore/index-c8f346d0.js +223 -0
  18. package/atoms/ExtendedLoadMore/index-e39b3ca8.js +3023 -0
  19. package/atoms/ExtendedLoadMore/index-f6e578e3.js +86 -0
  20. package/atoms/ExtendedLoadMore/index.js +5 -0
  21. package/atoms/ExtendedLoadMore/styles.arrow.css +1 -0
  22. package/atoms/Headline/index.js +2459 -0
  23. package/{Headline → atoms/Headline}/styles.arrow.css +0 -0
  24. package/atoms/HeroImage/index.js +2475 -0
  25. package/{HeroImage → atoms/HeroImage}/styles.arrow.css +0 -0
  26. package/atoms/LoadmoreButton/index.js +2268 -0
  27. package/{LoadmoreButton → atoms/LoadmoreButton}/styles.arrow.css +0 -0
  28. package/atoms/ScrollSnap/index.js +2531 -0
  29. package/{ScrollSnap → atoms/ScrollSnap}/styles.arrow.css +0 -0
  30. package/atoms/SectionTag/index.js +2220 -0
  31. package/{SectionTag → atoms/SectionTag}/styles.arrow.css +0 -0
  32. package/atoms/Subheadline/index.js +2200 -0
  33. package/{Subheadline → atoms/Subheadline}/styles.arrow.css +0 -0
  34. package/atoms/TimeStamp/index.js +2661 -0
  35. package/{TimeStamp → atoms/TimeStamp}/styles.arrow.css +0 -0
  36. package/molecules/KeyEvents/index.js +2968 -0
  37. package/{KeyEvents → molecules/KeyEvents}/styles.arrow.css +0 -0
  38. package/molecules/PageIntroductionCard/index.js +2676 -0
  39. package/{PageIntroductionCard → molecules/PageIntroductionCard}/styles.arrow.css +0 -0
  40. package/molecules/SocialShareTemplate/index.js +3093 -0
  41. package/{SocialShareTemplate → molecules/SocialShareTemplate}/styles.arrow.css +0 -0
  42. package/molecules/StoryCard/index.js +3938 -0
  43. package/{StoryCard → molecules/StoryCard}/styles.arrow.css +0 -0
  44. package/molecules/StoryElementCard/index.js +5832 -0
  45. package/{StoryElementCard → molecules/StoryElementCard}/styles.arrow.css +0 -0
  46. package/molecules/StorycardContent/index.js +3416 -0
  47. package/{StorycardContent → molecules/StorycardContent}/styles.arrow.css +0 -0
  48. package/package.json +1 -1
  49. package/rows/AlternateCollectionFilter/index.js +4744 -0
  50. package/{AlternateCollectionFilter → rows/AlternateCollectionFilter}/styles.arrow.css +0 -0
  51. package/rows/AsideCollection/index.js +4690 -0
  52. package/{AsideCollection → rows/AsideCollection}/styles.arrow.css +0 -0
  53. package/rows/AstrologyCollection/index.js +4661 -0
  54. package/{AstrologyCollection → rows/AstrologyCollection}/styles.arrow.css +0 -0
  55. package/rows/AuthorIntroductionCard/index.js +3520 -0
  56. package/{AuthorIntroductionCard → rows/AuthorIntroductionCard}/styles.arrow.css +0 -0
  57. package/rows/AuthorsList/index.js +3715 -0
  58. package/{AuthorsList → rows/AuthorsList}/styles.arrow.css +0 -0
  59. package/rows/CollectionFilter/index.js +4834 -0
  60. package/{CollectionFilter → rows/CollectionFilter}/styles.arrow.css +0 -0
  61. package/rows/ElevenStories/index.js +4638 -0
  62. package/{ElevenStories → rows/ElevenStories}/styles.arrow.css +0 -0
  63. package/rows/FourColFiveStories/index.js +4359 -0
  64. package/{FourColFiveStories → rows/FourColFiveStories}/styles.arrow.css +0 -0
  65. package/rows/FourColGrid/index.js +4584 -0
  66. package/{FourColGrid → rows/FourColGrid}/styles.arrow.css +0 -0
  67. package/rows/FourColPortraitStories/index.js +4617 -0
  68. package/{FourColPortraitStories → rows/FourColPortraitStories}/styles.arrow.css +0 -0
  69. package/rows/FourColSixteenStories/index.js +4375 -0
  70. package/{FourColSixteenStories → rows/FourColSixteenStories}/styles.arrow.css +0 -0
  71. package/rows/FourColTwelveStories/index.js +4335 -0
  72. package/{FourColTwelveStories → rows/FourColTwelveStories}/styles.arrow.css +0 -0
  73. package/rows/FourStorySlider/index.js +4743 -0
  74. package/{FourStorySlider → rows/FourStorySlider}/styles.arrow.css +0 -0
  75. package/rows/FourStorySliderPortrait/index.js +4746 -0
  76. package/{FourStorySliderPortrait → rows/FourStorySliderPortrait}/styles.arrow.css +1 -1
  77. package/rows/FourTabbedBigStorySlider/index.js +4505 -0
  78. package/{FourTabbedBigStorySlider → rows/FourTabbedBigStorySlider}/styles.arrow.css +0 -0
  79. package/rows/FullScreenSlider/index.js +4661 -0
  80. package/{FullScreenSlider → rows/FullScreenSlider}/styles.arrow.css +0 -0
  81. package/rows/HalfScreenSlider/index.js +4514 -0
  82. package/{HalfScreenSlider → rows/HalfScreenSlider}/styles.arrow.css +0 -0
  83. package/rows/ListComponent/index.js +4462 -0
  84. package/{ListComponent → rows/ListComponent}/styles.arrow.css +0 -0
  85. package/rows/Listicles/index.js +3131 -0
  86. package/{Listicles → rows/Listicles}/styles.arrow.css +0 -0
  87. package/rows/MagazineEditions/index.js +3142 -0
  88. package/{MagazineEditions → rows/MagazineEditions}/styles.arrow.css +0 -0
  89. package/rows/MagazineHeaderCard/index.js +3136 -0
  90. package/{MagazineHeaderCard → rows/MagazineHeaderCard}/styles.arrow.css +0 -0
  91. package/rows/MagazineWidget/index.js +4514 -0
  92. package/{MagazineWidget → rows/MagazineWidget}/styles.arrow.css +0 -0
  93. package/rows/OneColStoryList/index.js +4670 -0
  94. package/{OneColStoryList → rows/OneColStoryList}/styles.arrow.css +0 -0
  95. package/rows/OpinionCollection/index.js +4037 -0
  96. package/{OpinionCollection → rows/OpinionCollection}/styles.arrow.css +0 -0
  97. package/rows/SixColSixStories/index.js +4515 -0
  98. package/{SixColSixStories → rows/SixColSixStories}/styles.arrow.css +0 -0
  99. package/rows/StoryCollection/index.js +4690 -0
  100. package/{StoryCollection → rows/StoryCollection}/styles.arrow.css +0 -0
  101. package/rows/TagIntroductionCard/index.js +1901 -0
  102. package/{TagIntroductionCard → rows/TagIntroductionCard}/styles.arrow.css +0 -0
  103. package/rows/ThreeColFlexStories/index.js +4575 -0
  104. package/{ThreeColFlexStories → rows/ThreeColFlexStories}/styles.arrow.css +0 -0
  105. package/rows/ThreeColFourteenStories/index.js +4283 -0
  106. package/{ThreeColFourteenStories → rows/ThreeColFourteenStories}/styles.arrow.css +0 -0
  107. package/rows/ThreeColGrid/index.js +4605 -0
  108. package/{ThreeColGrid → rows/ThreeColGrid}/styles.arrow.css +0 -0
  109. package/rows/ThreeColSevenStory/index.js +4502 -0
  110. package/{ThreeColSevenStory → rows/ThreeColSevenStory}/styles.arrow.css +0 -0
  111. package/rows/ThreeColSixStories/index.js +4485 -0
  112. package/{ThreeColSixStories → rows/ThreeColSixStories}/styles.arrow.css +0 -0
  113. package/rows/ThreeColTwelveStories/index.js +4380 -0
  114. package/{ThreeColTwelveStories → rows/ThreeColTwelveStories}/styles.arrow.css +0 -0
  115. package/rows/TwoColFourStories/index.js +4463 -0
  116. package/{TwoColFourStories → rows/TwoColFourStories}/styles.arrow.css +0 -0
  117. package/rows/TwoColFourStoryHighlight/index.js +4456 -0
  118. package/{TwoColFourStoryHighlight → rows/TwoColFourStoryHighlight}/styles.arrow.css +0 -0
  119. package/rows/TwoColSevenStories/index.js +4490 -0
  120. package/{TwoColSevenStories → rows/TwoColSevenStories}/styles.arrow.css +0 -0
  121. package/rows/TwoColSixStories/index.js +4489 -0
  122. package/{TwoColSixStories → rows/TwoColSixStories}/styles.arrow.css +0 -0
  123. package/rows/TwoColTenStoriesSidebar/index.js +4549 -0
  124. package/{TwoColTenStoriesSidebar → rows/TwoColTenStoriesSidebar}/styles.arrow.css +0 -0
  125. package/rows/TwoColThreeStories/index.js +4436 -0
  126. package/{TwoColThreeStories → rows/TwoColThreeStories}/styles.arrow.css +0 -0
  127. package/story-elements/AlsoRead/index.js +2457 -0
  128. package/{AlsoRead → story-elements/AlsoRead}/styles.arrow.css +0 -0
  129. package/story-elements/Attachment/index.js +2013 -0
  130. package/{Attachment → story-elements/Attachment}/styles.arrow.css +0 -0
  131. package/story-elements/BigFact/index.js +1983 -0
  132. package/{BigFact → story-elements/BigFact}/styles.arrow.css +0 -0
  133. package/story-elements/BlockQuote/index.js +2431 -0
  134. package/{BlockQuote → story-elements/BlockQuote}/styles.arrow.css +0 -0
  135. package/story-elements/Blurb/index.js +2094 -0
  136. package/{Blurb → story-elements/Blurb}/styles.arrow.css +0 -0
  137. package/story-elements/Image/index.js +2711 -0
  138. package/{Image → story-elements/Image}/styles.arrow.css +0 -0
  139. package/story-elements/ImageGallery/index.js +2644 -0
  140. package/{ImageGallery → story-elements/ImageGallery}/styles.arrow.css +0 -0
  141. package/story-elements/ImageSlideshow/index.js +2955 -0
  142. package/{ImageSlideshow → story-elements/ImageSlideshow}/styles.arrow.css +0 -0
  143. package/story-elements/QuestionAnswer/index.js +2395 -0
  144. package/{QuestionAnswer → story-elements/QuestionAnswer}/styles.arrow.css +0 -0
  145. package/story-elements/Quote/index.js +2012 -0
  146. package/{Quote → story-elements/Quote}/styles.arrow.css +0 -0
  147. package/story-elements/Reference/index.js +2006 -0
  148. package/{Reference → story-elements/Reference}/styles.arrow.css +0 -0
  149. package/story-elements/StoryElement/index.js +1779 -0
  150. package/story-elements/Summary/index.js +2036 -0
  151. package/{Summary → story-elements/Summary}/styles.arrow.css +0 -0
  152. package/story-elements/Text/index.js +2293 -0
  153. package/{Text → story-elements/Text}/styles.arrow.css +0 -0
  154. package/story-elements/Video/index.js +1785 -0
  155. package/{Video → story-elements/Video}/styles.arrow.css +0 -0
  156. package/story-templates/ListicleStoryTemplate/index.js +8442 -0
  157. package/{ListicleStoryTemplate → story-templates/ListicleStoryTemplate}/styles.arrow.css +0 -0
  158. package/story-templates/LiveBlogStoryTemplate/index.js +8618 -0
  159. package/{LiveBlogStoryTemplate → story-templates/LiveBlogStoryTemplate}/styles.arrow.css +0 -0
  160. package/story-templates/PhotoStoryTemplate/index.js +8420 -0
  161. package/{PhotoStoryTemplate → story-templates/PhotoStoryTemplate}/styles.arrow.css +0 -0
  162. package/story-templates/TextStoryTemplate/index.js +8493 -0
  163. package/{TextStoryTemplate → story-templates/TextStoryTemplate}/styles.arrow.css +0 -0
  164. package/story-templates/VideoStoryTemplate/index.js +8352 -0
  165. package/{VideoStoryTemplate → story-templates/VideoStoryTemplate}/styles.arrow.css +0 -0
  166. package/cjs/index.js +0 -1
  167. package/esm/index.js +0 -1
@@ -0,0 +1,166 @@
1
+ import React, { Fragment } from 'react';
2
+ import { S as StoryCard } from './index-6f8c780e.js';
3
+ import { S as StorycardContent } from './index-f6e578e3.js';
4
+ import { H as HeroImage } from './index-6cb56d1a.js';
5
+ import { g as getTextColor, a as get_1, b as generateNavigateSlug, n as navigateTo } from './index-e39b3ca8.js';
6
+ import { C as CollectionName, S as StateProvider, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton } from './index-aa8b8ab8.js';
7
+ import { collectionToStories } from '@quintype/components';
8
+ import PropTypes from 'prop-types';
9
+ import { useDispatch, useSelector } from 'react-redux';
10
+ import 'react-timeago';
11
+ import 'date-fns-tz';
12
+ import 'react-dom';
13
+
14
+ var loadMore = function loadMore(_ref) {
15
+ var isLoading = _ref.isLoading,
16
+ storyItems = _ref.storyItems,
17
+ getMoreStories = _ref.getMoreStories,
18
+ _ref$subsequentLoadCo = _ref.subsequentLoadCount,
19
+ subsequentLoadCount = _ref$subsequentLoadCo === void 0 ? 4 : _ref$subsequentLoadCo;
20
+ if (isLoading) return; // prevent multiple clicks/calls
21
+
22
+ var limit = subsequentLoadCount;
23
+ var offset = storyItems.length;
24
+ getMoreStories(offset, limit);
25
+ };
26
+
27
+ var FourColGridBase = function FourColGridBase(_ref2) {
28
+ var collection = _ref2.collection,
29
+ _ref2$config = _ref2.config,
30
+ config = _ref2$config === void 0 ? {} : _ref2$config,
31
+ getMoreStories = _ref2.getMoreStories,
32
+ isLoadMoreVisible = _ref2.isLoadMoreVisible,
33
+ isLoading = _ref2.isLoading,
34
+ isolatedLoadMore = _ref2.isolatedLoadMore;
35
+ var _config$collectionNam = config.collectionNameBorderColor,
36
+ collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
37
+ _config$borderColor = config.borderColor,
38
+ borderColor = _config$borderColor === void 0 ? "" : _config$borderColor,
39
+ _config$theme = config.theme,
40
+ theme = _config$theme === void 0 ? "" : _config$theme,
41
+ _config$border = config.border,
42
+ border = _config$border === void 0 ? "" : _config$border,
43
+ _config$collectionNam2 = config.collectionNameTemplate,
44
+ collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
45
+ _config$footerSlotCon = config.footerSlotConfig,
46
+ footerSlotConfig = _config$footerSlotCon === void 0 ? {} : _config$footerSlotCon,
47
+ _config$footerButton = config.footerButton,
48
+ footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
49
+ customCollectionName = config.customCollectionName,
50
+ _config$navigate = config.navigate,
51
+ navigate = _config$navigate === void 0 ? true : _config$navigate,
52
+ _config$subsequentLoa = config.subsequentLoadCount,
53
+ subsequentLoadCount = _config$subsequentLoa === void 0 ? 4 : _config$subsequentLoa;
54
+ var storyItems = collectionToStories(collection);
55
+ if (!storyItems.length) return null;
56
+ var footerSlot = footerSlotConfig.footerSlot;
57
+ var footerSlotComp = footerSlot ? footerSlot() : null;
58
+ var textColor = getTextColor(theme);
59
+ var dispatch = useDispatch();
60
+ var qtConfig = useSelector(function (state) {
61
+ return get_1(state, ["qt", "config"], {});
62
+ });
63
+
64
+ var getLoadMore = function getLoadMore(opts) {
65
+ if (!isLoadMoreVisible) return null;
66
+
67
+ if (isolatedLoadMore) {
68
+ return /*#__PURE__*/React.createElement(LoadMoreTarget, {
69
+ collection: collection,
70
+ componentName: "FourColGrid",
71
+ offset: storyItems.length,
72
+ limit: subsequentLoadCount
73
+ });
74
+ }
75
+
76
+ var url = generateNavigateSlug(collection, qtConfig);
77
+ return /*#__PURE__*/React.createElement(ProgressiveHydration, null, /*#__PURE__*/React.createElement(LoadmoreButton, {
78
+ config: config,
79
+ collection: collection,
80
+ template: footerButton,
81
+ onClick: function onClick() {
82
+ return loadMore(opts);
83
+ },
84
+ navigate: function navigate() {
85
+ return navigateTo(dispatch, url);
86
+ },
87
+ qtConfig: qtConfig
88
+ }));
89
+ };
90
+
91
+ return /*#__PURE__*/React.createElement("div", {
92
+ className: "full-width-with-padding arrow-component",
93
+ "data-test-id": "four-col-grid",
94
+ style: {
95
+ backgroundColor: theme,
96
+ color: textColor
97
+ }
98
+ }, /*#__PURE__*/React.createElement("div", {
99
+ className: "four-col-m_four-col-grid__1EiO7"
100
+ }, /*#__PURE__*/React.createElement(CollectionName, {
101
+ collection: collection,
102
+ collectionNameTemplate: collectionNameTemplate,
103
+ collectionNameBorderColor: collectionNameBorderColor,
104
+ customCollectionName: customCollectionName,
105
+ navigate: navigate
106
+ }), /*#__PURE__*/React.createElement("div", {
107
+ className: "four-col-m_wrapper__1vOV7"
108
+ }, storyItems.map(function (story, index) {
109
+ return /*#__PURE__*/React.createElement(Fragment, {
110
+ key: "story-4col-".concat(index, "-").concat(get_1(story, ["id"], "0"))
111
+ }, /*#__PURE__*/React.createElement("div", {
112
+ className: "four-col-m_story-card-wrapper__1e8p0",
113
+ key: "default-".concat(index)
114
+ }, /*#__PURE__*/React.createElement(StoryCard, {
115
+ story: story,
116
+ border: border,
117
+ theme: theme,
118
+ isHorizontalMobile: true,
119
+ config: config
120
+ }, /*#__PURE__*/React.createElement(HeroImage, {
121
+ aspectRatio: [[16, 9]],
122
+ story: story,
123
+ isHorizontalMobile: true
124
+ }), /*#__PURE__*/React.createElement(StorycardContent, {
125
+ theme: theme,
126
+ border: border,
127
+ borderColor: borderColor,
128
+ story: story,
129
+ isHorizontalMobile: true,
130
+ config: config
131
+ }))));
132
+ })), getLoadMore({
133
+ isLoading: isLoading,
134
+ storyItems: storyItems,
135
+ getMoreStories: getMoreStories,
136
+ subsequentLoadCount: subsequentLoadCount
137
+ }), footerSlotComp));
138
+ };
139
+ FourColGridBase.propTypes = {
140
+ /** collection is the array of objects which is returning by API */
141
+ collection: PropTypes.object.isRequired,
142
+
143
+ /** The config for the Row */
144
+ config: PropTypes.shape({
145
+ borderColor: PropTypes.string,
146
+ theme: PropTypes.string,
147
+ border: PropTypes.bool,
148
+ slotConfig: PropTypes.array,
149
+ collectionNameTemplate: PropTypes.string,
150
+ footerButton: PropTypes.string,
151
+ collectionNameBorderColor: PropTypes.string,
152
+ subsequentLoadCount: PropTypes.number
153
+ }),
154
+ getMoreStories: PropTypes.func,
155
+ isLoadMoreVisible: PropTypes.bool,
156
+ isLoading: PropTypes.bool,
157
+ isolatedLoadMore: PropTypes.bool
158
+ };
159
+ FourColGridBase.defaultProps = {
160
+ getMoreStories: function getMoreStories() {},
161
+ isLoadMoreVisible: true,
162
+ isLoading: false
163
+ };
164
+ var FourColGrid = StateProvider(FourColGridBase);
165
+
166
+ export { FourColGrid, FourColGridBase };
@@ -0,0 +1,240 @@
1
+ import { collectionToStories } from '@quintype/components';
2
+ import { a as get_1, g as getTextColor, l as getSlot, b as generateNavigateSlug, n as navigateTo } from './index-e39b3ca8.js';
3
+ import PropTypes from 'prop-types';
4
+ import React from 'react';
5
+ import { useDispatch, useSelector } from 'react-redux';
6
+ import { C as CollectionName, S as StateProvider, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton, H as Headline, A as AuthorWithTime } from './index-aa8b8ab8.js';
7
+ import { H as HeroImage, S as SectionTag } from './index-6cb56d1a.js';
8
+ import { S as StoryCard, a as Subheadline } from './index-6f8c780e.js';
9
+ import { S as StorycardContent } from './index-f6e578e3.js';
10
+ import 'react-timeago';
11
+ import 'date-fns-tz';
12
+ import 'react-dom';
13
+
14
+ var loadMore = function loadMore(_ref) {
15
+ var isLoading = _ref.isLoading,
16
+ storyItems = _ref.storyItems,
17
+ getMoreStories = _ref.getMoreStories,
18
+ _ref$subsequentLoadCo = _ref.subsequentLoadCount,
19
+ subsequentLoadCount = _ref$subsequentLoadCo === void 0 ? 8 : _ref$subsequentLoadCo;
20
+ if (isLoading) return;
21
+ var limit = subsequentLoadCount;
22
+ var offset = storyItems.length;
23
+ getMoreStories(offset, limit);
24
+ };
25
+
26
+ var OneColStoryListBase = function OneColStoryListBase(_ref2) {
27
+ var collection = _ref2.collection,
28
+ _ref2$config = _ref2.config,
29
+ config = _ref2$config === void 0 ? {} : _ref2$config,
30
+ getMoreStories = _ref2.getMoreStories,
31
+ isLoadMoreVisible = _ref2.isLoadMoreVisible,
32
+ isLoading = _ref2.isLoading,
33
+ isolatedLoadMore = _ref2.isolatedLoadMore;
34
+ var storyItems = collectionToStories(collection);
35
+ if (!storyItems.length) return null;
36
+ var _config$collectionNam = config.collectionNameBorderColor,
37
+ collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
38
+ _config$borderColor = config.borderColor,
39
+ borderColor = _config$borderColor === void 0 ? "" : _config$borderColor,
40
+ _config$theme = config.theme,
41
+ theme = _config$theme === void 0 ? "" : _config$theme,
42
+ _config$border = config.border,
43
+ border = _config$border === void 0 ? "" : _config$border,
44
+ _config$slotConfig = config.slotConfig,
45
+ slotConfig = _config$slotConfig === void 0 ? [] : _config$slotConfig,
46
+ _config$collectionNam2 = config.collectionNameTemplate,
47
+ collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
48
+ _config$footerSlotCon = config.footerSlotConfig,
49
+ footerSlotConfig = _config$footerSlotCon === void 0 ? {} : _config$footerSlotCon,
50
+ _config$footerButton = config.footerButton,
51
+ footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
52
+ _config$localizationC = config.localizationConfig,
53
+ localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC,
54
+ _config$subsequentLoa = config.subsequentLoadCount,
55
+ subsequentLoadCount = _config$subsequentLoa === void 0 ? 8 : _config$subsequentLoa;
56
+ var footerSlot = footerSlotConfig.footerSlot;
57
+
58
+ var _get = get_1(slotConfig, [0], {}),
59
+ type = _get.type,
60
+ component = _get.component;
61
+
62
+ var dispatch = useDispatch();
63
+ var qtConfig = useSelector(function (state) {
64
+ return get_1(state, ["qt", "config"], {});
65
+ });
66
+
67
+ var getLoadMore = function getLoadMore(opts) {
68
+ if (!isLoadMoreVisible) return null;
69
+
70
+ if (isolatedLoadMore) {
71
+ return /*#__PURE__*/React.createElement(LoadMoreTarget, {
72
+ collection: collection,
73
+ componentName: "OneColStoryList",
74
+ offset: storyItems.length,
75
+ limit: subsequentLoadCount
76
+ });
77
+ }
78
+
79
+ var url = generateNavigateSlug(collection, qtConfig);
80
+ return /*#__PURE__*/React.createElement(ProgressiveHydration, null, /*#__PURE__*/React.createElement(LoadmoreButton, {
81
+ config: config,
82
+ collection: collection,
83
+ template: footerButton,
84
+ onClick: function onClick() {
85
+ return loadMore(opts);
86
+ },
87
+ navigate: function navigate() {
88
+ return navigateTo(dispatch, url);
89
+ },
90
+ qtConfig: qtConfig
91
+ }));
92
+ };
93
+
94
+ var footerSlotComp = footerSlot ? footerSlot() : null;
95
+
96
+ var borderHandler = function borderHandler(story) {
97
+ switch (border) {
98
+ case "bottom":
99
+ return /*#__PURE__*/React.createElement("div", {
100
+ className: "one-col-story-list-m_one-col-border-bottom__13nPb"
101
+ }, /*#__PURE__*/React.createElement(StoryCard, {
102
+ story: story,
103
+ theme: theme,
104
+ headerLevel: "4",
105
+ isHorizontal: true,
106
+ border: border,
107
+ aspectRatio: [[1, 1], [4, 3]],
108
+ borderColor: borderColor,
109
+ prefix: "By",
110
+ config: config
111
+ }));
112
+
113
+ case "full":
114
+ return /*#__PURE__*/React.createElement("div", {
115
+ className: "one-col-story-list-m_one-col-border-full__3PSl0"
116
+ }, /*#__PURE__*/React.createElement(StoryCard, {
117
+ story: story,
118
+ border: border,
119
+ theme: theme,
120
+ isHorizontal: true,
121
+ borderColor: borderColor
122
+ }, /*#__PURE__*/React.createElement(HeroImage, {
123
+ story: story,
124
+ isHorizontal: true,
125
+ aspectRatio: [[1, 1], [4, 3]]
126
+ }), /*#__PURE__*/React.createElement("div", {
127
+ className: "one-col-story-list-m_story-card-content-wrapper__1baqS"
128
+ }, /*#__PURE__*/React.createElement(StorycardContent, {
129
+ story: story,
130
+ borderColor: borderColor,
131
+ config: config
132
+ }, /*#__PURE__*/React.createElement(SectionTag, {
133
+ story: story
134
+ }), /*#__PURE__*/React.createElement(Headline, {
135
+ story: story,
136
+ headerLevel: "4",
137
+ premiumStoryIconConfig: config
138
+ }), /*#__PURE__*/React.createElement(Subheadline, {
139
+ story: story
140
+ }), /*#__PURE__*/React.createElement(AuthorWithTime, {
141
+ config: localizationConfig,
142
+ story: story,
143
+ prefix: "By"
144
+ })))));
145
+
146
+ default:
147
+ return /*#__PURE__*/React.createElement("div", {
148
+ className: "one-col-story-list-m_one-col-border-default__2BDg7"
149
+ }, /*#__PURE__*/React.createElement(StoryCard, {
150
+ story: story,
151
+ theme: theme,
152
+ headerLevel: "4",
153
+ isHorizontal: true,
154
+ border: border,
155
+ aspectRatio: [[1, 1], [4, 3]],
156
+ borderColor: borderColor,
157
+ prefix: "By",
158
+ config: config
159
+ }));
160
+ }
161
+ };
162
+
163
+ var textColor = getTextColor(theme);
164
+ return /*#__PURE__*/React.createElement("div", {
165
+ className: "full-width-with-padding arrow-component",
166
+ "data-test-id": "one-col-story-list",
167
+ style: {
168
+ backgroundColor: theme,
169
+ color: textColor
170
+ }
171
+ }, /*#__PURE__*/React.createElement("div", {
172
+ className: "one-col-story-list-m_one-col-story-list-wrapper__ICvTq"
173
+ }, /*#__PURE__*/React.createElement(CollectionName, {
174
+ collection: collection,
175
+ collectionNameTemplate: collectionNameTemplate,
176
+ collectionNameBorderColor: collectionNameBorderColor
177
+ }), /*#__PURE__*/React.createElement("div", {
178
+ className: "one-col-story-list-m_wrapper__38qTp",
179
+ style: {
180
+ backgroundColor: theme,
181
+ color: textColor
182
+ }
183
+ }, /*#__PURE__*/React.createElement("div", {
184
+ className: "one-col-story-list-m_one-col-first-story__1aC6i"
185
+ }, storyItems.slice(0, 1).map(function (story, index) {
186
+ return /*#__PURE__*/React.createElement("div", {
187
+ key: "default-".concat(index)
188
+ }, borderHandler(story));
189
+ })), /*#__PURE__*/React.createElement("div", {
190
+ className: "one-col-story-list-m_one-col-story-list__3d6Bp"
191
+ }, storyItems.slice(1).map(function (story, index) {
192
+ return /*#__PURE__*/React.createElement("div", {
193
+ key: "default-".concat(index)
194
+ }, borderHandler(story));
195
+ })), /*#__PURE__*/React.createElement("div", {
196
+ className: "one-col-story-list-m_one-col-ads__UN_hF"
197
+ }, getSlot(type, component, function () {
198
+ return null;
199
+ }, function () {
200
+ return null;
201
+ }))), /*#__PURE__*/React.createElement("div", {
202
+ className: "one-col-story-list-m_footer-ad-wrapper__NGgvp"
203
+ }, getLoadMore({
204
+ isLoading: isLoading,
205
+ storyItems: storyItems,
206
+ getMoreStories: getMoreStories,
207
+ subsequentLoadCount: subsequentLoadCount
208
+ }), /*#__PURE__*/React.createElement("div", {
209
+ className: "one-col-story-list-m_ad-wrapper__3_cNc"
210
+ }, footerSlotComp))));
211
+ };
212
+ OneColStoryListBase.propTypes = {
213
+ /** collection is the array of objects which is returning by API */
214
+ collection: PropTypes.object.isRequired,
215
+
216
+ /** The config for the Row */
217
+ config: PropTypes.shape({
218
+ borderColor: PropTypes.string,
219
+ theme: PropTypes.string,
220
+ border: PropTypes.string,
221
+ footerButton: PropTypes.string,
222
+ // row title style
223
+ collectionNameTemplate: PropTypes.string,
224
+ // row title style colour
225
+ collectionNameBorderColor: PropTypes.string,
226
+ subsequentLoadCount: PropTypes.number
227
+ }),
228
+ getMoreStories: PropTypes.func,
229
+ isLoadMoreVisible: PropTypes.bool,
230
+ isLoading: PropTypes.bool,
231
+ isolatedLoadMore: PropTypes.bool
232
+ };
233
+ OneColStoryListBase.defaultProps = {
234
+ getMoreStories: function getMoreStories() {},
235
+ isLoadMoreVisible: true,
236
+ isLoading: false
237
+ };
238
+ var OneColStoryList = StateProvider(OneColStoryListBase);
239
+
240
+ export { OneColStoryList, OneColStoryListBase };
@@ -0,0 +1,181 @@
1
+ import { m as _arrayWithHoles, o as _iterableToArray, p as _unsupportedIterableToArray, q as _nonIterableRest, a as get_1, g as getTextColor, r as rgbToHex, l as getSlot, b as generateNavigateSlug, n as navigateTo } from './index-e39b3ca8.js';
2
+ import React from 'react';
3
+ import PropTypes from 'prop-types';
4
+ import { useDispatch, useSelector } from 'react-redux';
5
+ import { H as HeroImage } from './index-6cb56d1a.js';
6
+ import { C as CollectionName, S as StateProvider, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton } from './index-aa8b8ab8.js';
7
+ import { collectionToStories } from '@quintype/components';
8
+ import { S as StorycardContent } from './index-f6e578e3.js';
9
+ import 'react-timeago';
10
+ import 'date-fns-tz';
11
+ import 'react-dom';
12
+
13
+ function _toArray(arr) {
14
+ return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
15
+ }
16
+
17
+ var loadMore = function loadMore(_ref) {
18
+ var isLoading = _ref.isLoading,
19
+ renderStories = _ref.renderStories,
20
+ getMoreStories = _ref.getMoreStories,
21
+ _ref$subsequentLoadCo = _ref.subsequentLoadCount,
22
+ subsequentLoadCount = _ref$subsequentLoadCo === void 0 ? 4 : _ref$subsequentLoadCo;
23
+ if (isLoading) return;
24
+ var limit = subsequentLoadCount;
25
+ var offset = renderStories.length + 1;
26
+ getMoreStories(offset, limit);
27
+ };
28
+
29
+ var FourColFiveStoriesBase = function FourColFiveStoriesBase(_ref2) {
30
+ var collection = _ref2.collection,
31
+ config = _ref2.config,
32
+ getMoreStories = _ref2.getMoreStories,
33
+ isLoadMoreVisible = _ref2.isLoadMoreVisible,
34
+ isLoading = _ref2.isLoading,
35
+ isolatedLoadMore = _ref2.isolatedLoadMore,
36
+ hideFirstCard = _ref2.hideFirstCard;
37
+ var stories = collectionToStories(collection);
38
+ if (!stories.length) return null;
39
+ var _config$collectionNam = config.collectionNameBorderColor,
40
+ collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
41
+ _config$theme = config.theme,
42
+ theme = _config$theme === void 0 ? "" : _config$theme,
43
+ _config$slotConfig = config.slotConfig,
44
+ slotConfig = _config$slotConfig === void 0 ? [] : _config$slotConfig,
45
+ _config$collectionNam2 = config.collectionNameTemplate,
46
+ collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
47
+ _config$footerButton = config.footerButton,
48
+ footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
49
+ _config$borderColor = config.borderColor,
50
+ borderColor = _config$borderColor === void 0 ? "" : _config$borderColor,
51
+ _config$subsequentLoa = config.subsequentLoadCount,
52
+ subsequentLoadCount = _config$subsequentLoa === void 0 ? 4 : _config$subsequentLoa;
53
+
54
+ var _get = get_1(slotConfig, [0], {}),
55
+ _get$type = _get.type,
56
+ type = _get$type === void 0 ? "story" : _get$type,
57
+ component = _get.component;
58
+
59
+ var textColor = getTextColor(theme);
60
+ var sectionTagBorderColor = rgbToHex(borderColor);
61
+ var adWidgetSlot = type === "ad" || type === "widget" ? getSlot(type, component) : null;
62
+ var dispatch = useDispatch();
63
+ var qtConfig = useSelector(function (state) {
64
+ return get_1(state, ["qt", "config"], {});
65
+ });
66
+
67
+ var _ref3 = stories || [],
68
+ _ref4 = _toArray(_ref3),
69
+ firstStory = _ref4[0],
70
+ otherStories = _ref4.slice(1);
71
+
72
+ var storyCard = function storyCard(story) {
73
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeroImage, {
74
+ config: config,
75
+ story: story,
76
+ aspectRatio: [[16, 9]]
77
+ }), /*#__PURE__*/React.createElement(StorycardContent, {
78
+ theme: theme,
79
+ story: story,
80
+ config: config,
81
+ headerLevel: 6,
82
+ borderColor: sectionTagBorderColor
83
+ }));
84
+ };
85
+
86
+ var otherCards = function otherCards(story, index) {
87
+ return /*#__PURE__*/React.createElement("div", {
88
+ className: "four-col-five-stories-m_card__2lzhH",
89
+ "data-test-id": "story-card",
90
+ key: "four-col-five-story-".concat(index, "-").concat(get_1(story, ["id"], "0"))
91
+ }, storyCard(story));
92
+ };
93
+
94
+ var getLoadMore = function getLoadMore(opts) {
95
+ if (!isLoadMoreVisible) return null;
96
+
97
+ if (isolatedLoadMore) {
98
+ return /*#__PURE__*/React.createElement(LoadMoreTarget, {
99
+ collection: collection,
100
+ componentName: "FourColFiveStories",
101
+ offset: stories.length,
102
+ limit: subsequentLoadCount
103
+ });
104
+ }
105
+
106
+ var url = generateNavigateSlug(collection, qtConfig);
107
+ return /*#__PURE__*/React.createElement(ProgressiveHydration, null, /*#__PURE__*/React.createElement(LoadmoreButton, {
108
+ config: config,
109
+ collection: collection,
110
+ template: footerButton,
111
+ onClick: function onClick() {
112
+ return loadMore(opts);
113
+ },
114
+ navigate: function navigate() {
115
+ return navigateTo(dispatch, url);
116
+ },
117
+ qtConfig: qtConfig
118
+ }));
119
+ };
120
+
121
+ var renderStories = hideFirstCard ? stories : otherStories;
122
+ return /*#__PURE__*/React.createElement("div", {
123
+ className: "full-width-with-padding arrow-component",
124
+ "data-test-id": "four-col-five-stories",
125
+ style: {
126
+ backgroundColor: theme,
127
+ color: textColor
128
+ }
129
+ }, /*#__PURE__*/React.createElement("div", {
130
+ className: "four-col-five-stories-m_four-col-five-stories__16ja_"
131
+ }, /*#__PURE__*/React.createElement(CollectionName, {
132
+ collection: collection,
133
+ collectionNameTemplate: collectionNameTemplate,
134
+ collectionNameBorderColor: collectionNameBorderColor,
135
+ headerLevel: 2
136
+ }), /*#__PURE__*/React.createElement("div", {
137
+ className: "four-col-five-stories-m_wrapper__31KAU"
138
+ }, !hideFirstCard && /*#__PURE__*/React.createElement("div", {
139
+ className: "first-card four-col-five-stories-m_first-card__3dXVH",
140
+ "data-test-id": "story-card"
141
+ }, storyCard(firstStory)), /*#__PURE__*/React.createElement("div", {
142
+ className: "other-cards four-col-five-stories-m_other-cards__1P4k5"
143
+ }, renderStories.slice(0, 3).map(function (story, index) {
144
+ return otherCards(story, index);
145
+ }), adWidgetSlot, renderStories.slice(3).map(function (story, index) {
146
+ return otherCards(story, index);
147
+ }))), getLoadMore({
148
+ isLoading: isLoading,
149
+ renderStories: renderStories,
150
+ getMoreStories: getMoreStories,
151
+ subsequentLoadCount: subsequentLoadCount
152
+ })));
153
+ };
154
+ FourColFiveStoriesBase.propTypes = {
155
+ collection: PropTypes.object,
156
+ config: PropTypes.shape({
157
+ collectionNameBorderColor: PropTypes.string,
158
+ theme: PropTypes.string,
159
+ slotConfig: PropTypes.array,
160
+ collectionNameTemplate: PropTypes.string,
161
+ footerButton: PropTypes.string,
162
+ borderColor: PropTypes.string,
163
+ subsequentLoadCount: PropTypes.number
164
+ }),
165
+ getMoreStories: PropTypes.func,
166
+ isLoading: PropTypes.bool,
167
+ hideFirstCard: PropTypes.bool,
168
+ isLoadMoreVisible: PropTypes.bool,
169
+ isolatedLoadMore: PropTypes.bool
170
+ };
171
+ FourColFiveStoriesBase.defaultProps = {
172
+ getMoreStories: function getMoreStories() {},
173
+ isLoadMoreVisible: true,
174
+ isLoading: false,
175
+ collection: {},
176
+ config: {},
177
+ hideFirstCard: false
178
+ };
179
+ var FourColFiveStories = StateProvider(FourColFiveStoriesBase);
180
+
181
+ export { FourColFiveStories, FourColFiveStoriesBase };