@quintype/arrow 3.15.1-perf.2 → 3.15.1-perf.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/atoms/Author/index.js +38 -29
- package/atoms/AuthorWithTime/index.js +83 -73
- package/atoms/CollectionName/index.js +40 -30
- package/atoms/ExtendedLoadMore/{index-d0f6c865.js → index-3976fac4.js} +59 -51
- package/atoms/ExtendedLoadMore/{index-1e444d20.js → index-3c4ac692.js} +243 -208
- package/atoms/ExtendedLoadMore/index-4ddfe28d.js +93 -0
- package/atoms/ExtendedLoadMore/{index-c61a16dc.js → index-5c8eda4a.js} +88 -80
- package/atoms/ExtendedLoadMore/{index-1256e453.js → index-6e083738.js} +60 -52
- package/atoms/ExtendedLoadMore/{index-fd651f70.js → index-6ecceae4.js} +58 -50
- package/atoms/ExtendedLoadMore/{index-4356ce04.js → index-9e0d32b7.js} +76 -68
- package/atoms/ExtendedLoadMore/{index-beed3a68.js → index-a5c95f84.js} +70 -62
- package/atoms/ExtendedLoadMore/{index-0519e570.js → index-b22f1843.js} +70 -62
- package/atoms/ExtendedLoadMore/{index-e4cf9cb7.js → index-b5936059.js} +72 -64
- package/atoms/ExtendedLoadMore/{index-aba6b278.js → index-bc129cb8.js} +57 -49
- package/atoms/ExtendedLoadMore/{index-ad3c83c3.js → index-e7cde739.js} +74 -46
- package/atoms/ExtendedLoadMore/{index-c2f73d18.js → index-fee73a14.js} +62 -54
- package/atoms/ExtendedLoadMore/index.js +13 -5
- package/atoms/ExtendedLoadMore/styles.arrow.css +1 -1
- package/atoms/Headline/index.js +85 -76
- package/atoms/HeroImage/index.js +69 -60
- package/atoms/LoadmoreButton/index.js +32 -23
- package/atoms/ScrollSnap/index.js +72 -63
- package/atoms/SectionTag/index.js +34 -25
- package/atoms/Subheadline/index.js +31 -22
- package/atoms/TimeStamp/index.js +34 -24
- package/molecules/KeyEvents/index.js +72 -61
- package/molecules/PageIntroductionCard/index.js +43 -34
- package/molecules/SocialShareTemplate/index.js +97 -88
- package/molecules/StoryCard/index.js +242 -232
- package/molecules/StoryElementCard/index.js +512 -483
- package/molecules/StorycardContent/index.js +172 -162
- package/package.json +1 -1
- package/rows/AlternateCollectionFilter/index.js +345 -333
- package/rows/AsideCollection/index.js +340 -328
- package/rows/AstrologyCollection/index.js +321 -309
- package/rows/AuthorIntroductionCard/index.js +157 -148
- package/rows/AuthorsList/index.js +184 -174
- package/rows/CollectionFilter/index.js +361 -349
- package/rows/ElevenStories/index.js +357 -346
- package/rows/FourColFiveStories/index.js +304 -274
- package/rows/FourColGrid/index.js +351 -321
- package/rows/FourColPortraitStories/index.js +357 -327
- package/rows/FourColSixteenStories/index.js +288 -277
- package/rows/FourColTwelveStories/index.js +315 -304
- package/rows/FourStorySlider/index.js +358 -347
- package/rows/FourStorySliderPortrait/index.js +359 -348
- package/rows/FourTabbedBigStorySlider/index.js +322 -311
- package/rows/FullScreenSlider/index.js +336 -325
- package/rows/HalfScreenSlider/index.js +308 -297
- package/rows/ListComponent/index.js +322 -311
- package/rows/Listicles/index.js +150 -139
- package/rows/MagazineEditions/index.js +104 -93
- package/rows/MagazineHeaderCard/index.js +104 -93
- package/rows/MagazineWidget/index.js +326 -315
- package/rows/OneColStoryList/index.js +365 -335
- package/rows/OpinionCollection/index.js +250 -220
- package/rows/SixColSixStories/index.js +333 -303
- package/rows/StoryCollection/index.js +340 -328
- package/rows/TagIntroductionCard/index.js +30 -21
- package/rows/ThreeColFlexStories/index.js +348 -318
- package/rows/ThreeColFourteenStories/index.js +285 -274
- package/rows/ThreeColGrid/index.js +352 -322
- package/rows/ThreeColSevenStory/index.js +322 -311
- package/rows/ThreeColSixStories/index.js +323 -312
- package/rows/ThreeColTwelveStories/index.js +302 -291
- package/rows/TwoColFourStories/index.js +316 -305
- package/rows/TwoColFourStoryHighlight/index.js +317 -306
- package/rows/TwoColSevenStories/index.js +322 -311
- package/rows/TwoColSixStories/index.js +316 -305
- package/rows/TwoColTenStoriesSidebar/index.js +338 -327
- package/rows/TwoColThreeStories/index.js +316 -305
- package/story-elements/AlsoRead/index.js +70 -61
- package/story-elements/Attachment/index.js +40 -31
- package/story-elements/BigFact/index.js +35 -26
- package/story-elements/BlockQuote/index.js +61 -51
- package/story-elements/Blurb/index.js +36 -27
- package/story-elements/Image/index.js +113 -86
- package/story-elements/ImageGallery/index.js +98 -71
- package/story-elements/ImageSlideshow/index.js +147 -120
- package/story-elements/QuestionAnswer/index.js +55 -46
- package/story-elements/Quote/index.js +37 -28
- package/story-elements/Reference/index.js +40 -31
- package/story-elements/StoryElement/index.js +28 -19
- package/story-elements/Summary/index.js +40 -31
- package/story-elements/Text/index.js +34 -25
- package/story-elements/Video/index.js +29 -20
- package/story-templates/ListicleStoryTemplate/index.js +937 -908
- package/story-templates/LiveBlogStoryTemplate/index.js +942 -913
- package/story-templates/PhotoStoryTemplate/index.js +912 -883
- package/story-templates/TextStoryTemplate/index.js +931 -902
- package/story-templates/VideoStoryTemplate/index.js +897 -868
- package/atoms/ExtendedLoadMore/index-81eb3978.js +0 -86
|
@@ -1,10 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var axios = require('axios');
|
|
7
|
+
var PropTypes = require('prop-types');
|
|
8
|
+
var reactRedux = require('react-redux');
|
|
9
|
+
var components = require('@quintype/components');
|
|
10
|
+
var Timeago = require('react-timeago');
|
|
11
|
+
var dateFnsTz = require('date-fns-tz');
|
|
12
|
+
|
|
13
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
|
+
|
|
15
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
16
|
+
var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
|
|
17
|
+
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
18
|
+
var Timeago__default = /*#__PURE__*/_interopDefaultLegacy(Timeago);
|
|
8
19
|
|
|
9
20
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
10
21
|
try {
|
|
@@ -2215,21 +2226,21 @@ function get(object, path, defaultValue) {
|
|
|
2215
2226
|
|
|
2216
2227
|
var get_1 = get;
|
|
2217
2228
|
|
|
2218
|
-
var StateContext = /*#__PURE__*/createContext(); // eslint-disable-next-line react/display-name
|
|
2229
|
+
var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
|
|
2219
2230
|
|
|
2220
2231
|
var StateProvider = function StateProvider(RowComponent) {
|
|
2221
2232
|
return function (props) {
|
|
2222
2233
|
return (
|
|
2223
2234
|
/*#__PURE__*/
|
|
2224
2235
|
// eslint-disable-next-line react/prop-types
|
|
2225
|
-
|
|
2236
|
+
React__default["default"].createElement(StateContext.Provider, {
|
|
2226
2237
|
value: props.config
|
|
2227
|
-
}, /*#__PURE__*/
|
|
2238
|
+
}, /*#__PURE__*/React__default["default"].createElement(RowComponent, props))
|
|
2228
2239
|
);
|
|
2229
2240
|
};
|
|
2230
2241
|
};
|
|
2231
2242
|
var useStateValue = function useStateValue() {
|
|
2232
|
-
return useContext(StateContext);
|
|
2243
|
+
return React.useContext(StateContext);
|
|
2233
2244
|
};
|
|
2234
2245
|
|
|
2235
2246
|
function _typeof(obj) {
|
|
@@ -2802,15 +2813,15 @@ var isEmpty = function isEmpty(value) {
|
|
|
2802
2813
|
return value == null || // From standard.js: Always use === - but value == null is allowed to check null || undefined
|
|
2803
2814
|
_typeof(value) === "object" && Object.entries(value).length === 0 && value.constructor === Object || typeof value === "string" && value.trim().length === 0;
|
|
2804
2815
|
};
|
|
2805
|
-
|
|
2806
|
-
"sketches-host":
|
|
2807
|
-
"cdn-name":
|
|
2808
|
-
"cdn-image":
|
|
2816
|
+
PropTypes__default["default"].shape({
|
|
2817
|
+
"sketches-host": PropTypes__default["default"].string,
|
|
2818
|
+
"cdn-name": PropTypes__default["default"].string,
|
|
2819
|
+
"cdn-image": PropTypes__default["default"].string
|
|
2809
2820
|
});
|
|
2810
|
-
|
|
2811
|
-
headline:
|
|
2812
|
-
"last-published-at":
|
|
2813
|
-
subheadline:
|
|
2821
|
+
PropTypes__default["default"].shape({
|
|
2822
|
+
headline: PropTypes__default["default"].string,
|
|
2823
|
+
"last-published-at": PropTypes__default["default"].number,
|
|
2824
|
+
subheadline: PropTypes__default["default"].string
|
|
2814
2825
|
});
|
|
2815
2826
|
var getStoryUrl = function getStoryUrl(story) {
|
|
2816
2827
|
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
|
|
@@ -2854,17 +2865,17 @@ var getTimeStamp = function getTimeStamp(date, _formatter) {
|
|
|
2854
2865
|
var timezone = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
|
|
2855
2866
|
|
|
2856
2867
|
if (timezone && template === "story") {
|
|
2857
|
-
var zonedTime = timezone && utcToZonedTime(date, timezone);
|
|
2858
|
-
var formatZonedTime = zonedTime && format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", {
|
|
2868
|
+
var zonedTime = timezone && dateFnsTz.utcToZonedTime(date, timezone);
|
|
2869
|
+
var formatZonedTime = zonedTime && dateFnsTz.format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", {
|
|
2859
2870
|
timeZone: timezone
|
|
2860
2871
|
});
|
|
2861
2872
|
var timeStamp = timestampToFormat("", "", "", date, config);
|
|
2862
|
-
return /*#__PURE__*/
|
|
2873
|
+
return /*#__PURE__*/React__default["default"].createElement("time", {
|
|
2863
2874
|
dateTime: formatZonedTime
|
|
2864
2875
|
}, timeStamp);
|
|
2865
2876
|
}
|
|
2866
2877
|
|
|
2867
|
-
return /*#__PURE__*/
|
|
2878
|
+
return /*#__PURE__*/React__default["default"].createElement(Timeago__default["default"], {
|
|
2868
2879
|
date: date,
|
|
2869
2880
|
formatter: function formatter(value, unit, suffix, date) {
|
|
2870
2881
|
return _formatter(value, unit, suffix, date, config);
|
|
@@ -2908,7 +2919,7 @@ var CollectionNameBase = function CollectionNameBase(_ref) {
|
|
|
2908
2919
|
var borderBottomFullStyle = templateStyle.includes("collection-borderBottomFull") ? "4px solid ".concat(CollectionNameBorderColor) : "";
|
|
2909
2920
|
|
|
2910
2921
|
var borderBottomStyle = function borderBottomStyle() {
|
|
2911
|
-
return templateStyle.includes("collection-borderBottom") && !templateStyle.includes("collection-borderBottomFull") ? /*#__PURE__*/
|
|
2922
|
+
return templateStyle.includes("collection-borderBottom") && !templateStyle.includes("collection-borderBottomFull") ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
2912
2923
|
className: "collection-name-m_border-bottom__1MnlV",
|
|
2913
2924
|
style: {
|
|
2914
2925
|
borderBottom: "4px solid ".concat(CollectionNameBorderColor)
|
|
@@ -2968,40 +2979,40 @@ var CollectionNameBase = function CollectionNameBase(_ref) {
|
|
|
2968
2979
|
}
|
|
2969
2980
|
};
|
|
2970
2981
|
|
|
2971
|
-
return /*#__PURE__*/
|
|
2982
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showRowTitle && collectionName && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
2972
2983
|
style: {
|
|
2973
2984
|
borderBottom: borderBottomFullStyle
|
|
2974
2985
|
},
|
|
2975
2986
|
"data-test-id": "collection-name",
|
|
2976
2987
|
className: ("arr--collection-name arrow-component ".concat(templateStyle) ? "arr--collection-name arrow-component ".concat(templateStyle) + " " : "") + _getClassName("collection ".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap$d)
|
|
2977
|
-
}, templateStyle.includes("collection-borderLeft") && /*#__PURE__*/
|
|
2988
|
+
}, templateStyle.includes("collection-borderLeft") && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
2978
2989
|
className: "arr-collection-name-border-left collection-name-m_border-left__3_pYw",
|
|
2979
2990
|
style: {
|
|
2980
2991
|
color: CollectionNameBorderColor,
|
|
2981
2992
|
fontSize: getBorderHeight()
|
|
2982
2993
|
}
|
|
2983
|
-
}), slug && !slug.includes(undefined) ? /*#__PURE__*/
|
|
2994
|
+
}), slug && !slug.includes(undefined) ? /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
2984
2995
|
href: slug,
|
|
2985
2996
|
"aria-label": "collection-name"
|
|
2986
|
-
}, /*#__PURE__*/
|
|
2997
|
+
}, /*#__PURE__*/React__default["default"].createElement(HeaderTag, null, collectionName)) : /*#__PURE__*/React__default["default"].createElement(HeaderTag, null, collectionName), borderBottomStyle()));
|
|
2987
2998
|
};
|
|
2988
2999
|
CollectionNameBase.propTypes = {
|
|
2989
3000
|
/** Collection name border color */
|
|
2990
|
-
collectionNameBorderColor: PropTypes
|
|
3001
|
+
collectionNameBorderColor: PropTypes.PropTypes.string,
|
|
2991
3002
|
|
|
2992
3003
|
/** The Collection Object from the API response */
|
|
2993
|
-
collection: PropTypes
|
|
3004
|
+
collection: PropTypes.PropTypes.object,
|
|
2994
3005
|
|
|
2995
3006
|
/** The publisher config from the API response */
|
|
2996
|
-
config: PropTypes
|
|
3007
|
+
config: PropTypes.PropTypes.object,
|
|
2997
3008
|
|
|
2998
3009
|
/** The style template for the component */
|
|
2999
|
-
collectionNameTemplate: PropTypes
|
|
3010
|
+
collectionNameTemplate: PropTypes.PropTypes.oneOf(["", "borderLeft", "borderBottom", "crossLine", "borderBottomFull"]),
|
|
3000
3011
|
|
|
3001
3012
|
/** Header tags ranging h1-h6, where h[headerLevel] */
|
|
3002
|
-
headerLevel: PropTypes
|
|
3003
|
-
customCollectionName: PropTypes
|
|
3004
|
-
navigate: PropTypes
|
|
3013
|
+
headerLevel: PropTypes.PropTypes.string,
|
|
3014
|
+
customCollectionName: PropTypes.PropTypes.string,
|
|
3015
|
+
navigate: PropTypes.PropTypes.bool
|
|
3005
3016
|
};
|
|
3006
3017
|
CollectionNameBase.defaultProps = {
|
|
3007
3018
|
collectionNameTemplate: "",
|
|
@@ -3014,7 +3025,7 @@ function mapStateToProps$1(state) {
|
|
|
3014
3025
|
};
|
|
3015
3026
|
}
|
|
3016
3027
|
|
|
3017
|
-
var CollectionName = connect(mapStateToProps$1)(CollectionNameBase);
|
|
3028
|
+
var CollectionName = reactRedux.connect(mapStateToProps$1)(CollectionNameBase);
|
|
3018
3029
|
|
|
3019
3030
|
var CrownIcon = function CrownIcon(_ref) {
|
|
3020
3031
|
var height = _ref.height,
|
|
@@ -3022,7 +3033,7 @@ var CrownIcon = function CrownIcon(_ref) {
|
|
|
3022
3033
|
_ref$color = _ref.color,
|
|
3023
3034
|
color = _ref$color === void 0 ? "#D8D8D8" : _ref$color,
|
|
3024
3035
|
positionTop = _ref.positionTop;
|
|
3025
|
-
return /*#__PURE__*/
|
|
3036
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
3026
3037
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3027
3038
|
width: width,
|
|
3028
3039
|
height: height,
|
|
@@ -3031,28 +3042,28 @@ var CrownIcon = function CrownIcon(_ref) {
|
|
|
3031
3042
|
position: "relative",
|
|
3032
3043
|
top: positionTop
|
|
3033
3044
|
}
|
|
3034
|
-
}, /*#__PURE__*/
|
|
3045
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3035
3046
|
fill: "none",
|
|
3036
3047
|
fillRule: "evenodd",
|
|
3037
3048
|
stroke: "none",
|
|
3038
3049
|
strokeWidth: "1"
|
|
3039
|
-
}, /*#__PURE__*/
|
|
3050
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3040
3051
|
transform: "translate(8 8)"
|
|
3041
|
-
}, /*#__PURE__*/
|
|
3052
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3042
3053
|
d: "M0 0H24V24H0z"
|
|
3043
|
-
}), /*#__PURE__*/
|
|
3054
|
+
}), /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3044
3055
|
fill: color,
|
|
3045
3056
|
fillRule: "nonzero",
|
|
3046
3057
|
transform: "translate(0 2)"
|
|
3047
|
-
}, /*#__PURE__*/
|
|
3058
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3048
3059
|
d: "M21.043 19.553c0-.743-.601-1.344-1.344-1.344h-15.4a1.343 1.343 0 100 2.688h15.4c.743 0 1.344-.603 1.344-1.344zM1.598 8.673c.022 0 .042 0 .064-.003l2.131 7.713h16.411l2.132-7.713c.022 0 .041.003.063.003a1.599 1.599 0 10-1.52-1.108L17.025 9.82 12.882 2.95a1.599 1.599 0 10-1.765 0L6.976 9.82 3.121 7.565a1.599 1.599 0 10-1.523 1.107z"
|
|
3049
3060
|
}))))));
|
|
3050
3061
|
};
|
|
3051
3062
|
CrownIcon.propTypes = {
|
|
3052
|
-
height:
|
|
3053
|
-
width:
|
|
3054
|
-
color:
|
|
3055
|
-
positionTop:
|
|
3063
|
+
height: PropTypes__default["default"].string,
|
|
3064
|
+
width: PropTypes__default["default"].string,
|
|
3065
|
+
color: PropTypes__default["default"].string,
|
|
3066
|
+
positionTop: PropTypes__default["default"].string
|
|
3056
3067
|
};
|
|
3057
3068
|
|
|
3058
3069
|
var KeyIcon = function KeyIcon(_ref) {
|
|
@@ -3061,7 +3072,7 @@ var KeyIcon = function KeyIcon(_ref) {
|
|
|
3061
3072
|
_ref$color = _ref.color,
|
|
3062
3073
|
color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
|
|
3063
3074
|
positionTop = _ref.positionTop;
|
|
3064
|
-
return /*#__PURE__*/
|
|
3075
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
3065
3076
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3066
3077
|
width: width,
|
|
3067
3078
|
height: height,
|
|
@@ -3070,16 +3081,16 @@ var KeyIcon = function KeyIcon(_ref) {
|
|
|
3070
3081
|
position: "relative",
|
|
3071
3082
|
top: positionTop
|
|
3072
3083
|
}
|
|
3073
|
-
}, /*#__PURE__*/
|
|
3084
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3074
3085
|
fill: "none",
|
|
3075
3086
|
fillRule: "evenodd",
|
|
3076
3087
|
stroke: "none",
|
|
3077
3088
|
strokeWidth: "1"
|
|
3078
|
-
}, /*#__PURE__*/
|
|
3089
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3079
3090
|
transform: "translate(8 8)"
|
|
3080
|
-
}, /*#__PURE__*/
|
|
3091
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3081
3092
|
d: "M0 0H24V24H0z"
|
|
3082
|
-
}), /*#__PURE__*/
|
|
3093
|
+
}), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3083
3094
|
fill: color,
|
|
3084
3095
|
fillRule: "nonzero",
|
|
3085
3096
|
d: "M12.71 4.364A6.54 6.54 0 000 6.545a6.54 6.54 0 0012.71 2.182h4.745v4.364h4.363V8.727H24V4.364H12.71zM6.544 8.727a2.181 2.181 0 110-4.362 2.181 2.181 0 010 4.362z",
|
|
@@ -3087,10 +3098,10 @@ var KeyIcon = function KeyIcon(_ref) {
|
|
|
3087
3098
|
})))));
|
|
3088
3099
|
};
|
|
3089
3100
|
KeyIcon.propTypes = {
|
|
3090
|
-
height:
|
|
3091
|
-
width:
|
|
3092
|
-
color:
|
|
3093
|
-
positionTop:
|
|
3101
|
+
height: PropTypes__default["default"].string,
|
|
3102
|
+
width: PropTypes__default["default"].string,
|
|
3103
|
+
color: PropTypes__default["default"].string,
|
|
3104
|
+
positionTop: PropTypes__default["default"].string
|
|
3094
3105
|
};
|
|
3095
3106
|
|
|
3096
3107
|
var LockIcon = function LockIcon(_ref) {
|
|
@@ -3099,7 +3110,7 @@ var LockIcon = function LockIcon(_ref) {
|
|
|
3099
3110
|
_ref$color = _ref.color,
|
|
3100
3111
|
color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
|
|
3101
3112
|
positionTop = _ref.positionTop;
|
|
3102
|
-
return /*#__PURE__*/
|
|
3113
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
3103
3114
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3104
3115
|
width: width,
|
|
3105
3116
|
height: height,
|
|
@@ -3108,28 +3119,28 @@ var LockIcon = function LockIcon(_ref) {
|
|
|
3108
3119
|
position: "relative",
|
|
3109
3120
|
top: positionTop
|
|
3110
3121
|
}
|
|
3111
|
-
}, /*#__PURE__*/
|
|
3122
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3112
3123
|
fill: "none",
|
|
3113
3124
|
fillRule: "evenodd",
|
|
3114
3125
|
stroke: "none",
|
|
3115
3126
|
strokeWidth: "1"
|
|
3116
|
-
}, /*#__PURE__*/
|
|
3127
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3117
3128
|
transform: "translate(8 8)"
|
|
3118
|
-
}, /*#__PURE__*/
|
|
3129
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3119
3130
|
d: "M0 0H24V24H0z"
|
|
3120
|
-
}), /*#__PURE__*/
|
|
3131
|
+
}), /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3121
3132
|
fill: color,
|
|
3122
3133
|
fillRule: "nonzero",
|
|
3123
3134
|
transform: "translate(3)"
|
|
3124
|
-
}, /*#__PURE__*/
|
|
3135
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3125
3136
|
d: "M15.692 9h-.747V6c0-3.31-2.681-6-5.978-6C5.67 0 2.989 2.69 2.989 6v3h-.747A2.249 2.249 0 000 11.25v10.5A2.249 2.249 0 002.242 24h13.45a2.249 2.249 0 002.242-2.25v-10.5A2.249 2.249 0 0015.692 9zM4.982 6c0-2.206 1.787-4 3.985-4s3.985 1.794 3.985 4v3h-7.97V6z"
|
|
3126
3137
|
}))))));
|
|
3127
3138
|
};
|
|
3128
3139
|
LockIcon.propTypes = {
|
|
3129
|
-
height:
|
|
3130
|
-
width:
|
|
3131
|
-
color:
|
|
3132
|
-
positionTop:
|
|
3140
|
+
height: PropTypes__default["default"].string,
|
|
3141
|
+
width: PropTypes__default["default"].string,
|
|
3142
|
+
color: PropTypes__default["default"].string,
|
|
3143
|
+
positionTop: PropTypes__default["default"].string
|
|
3133
3144
|
};
|
|
3134
3145
|
|
|
3135
3146
|
var StarIcon = function StarIcon(_ref) {
|
|
@@ -3139,7 +3150,7 @@ var StarIcon = function StarIcon(_ref) {
|
|
|
3139
3150
|
color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
|
|
3140
3151
|
_ref$positionTop = _ref.positionTop,
|
|
3141
3152
|
positionTop = _ref$positionTop === void 0 ? "" : _ref$positionTop;
|
|
3142
|
-
return /*#__PURE__*/
|
|
3153
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
3143
3154
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3144
3155
|
width: width,
|
|
3145
3156
|
height: height,
|
|
@@ -3148,21 +3159,21 @@ var StarIcon = function StarIcon(_ref) {
|
|
|
3148
3159
|
position: "relative",
|
|
3149
3160
|
top: positionTop
|
|
3150
3161
|
}
|
|
3151
|
-
}, /*#__PURE__*/
|
|
3162
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3152
3163
|
fill: "none",
|
|
3153
3164
|
fillRule: "evenodd",
|
|
3154
3165
|
stroke: "none",
|
|
3155
3166
|
strokeWidth: "1"
|
|
3156
|
-
}, /*#__PURE__*/
|
|
3167
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3157
3168
|
fill: color,
|
|
3158
3169
|
d: "M20 26L12.946577 29.7082039 14.2936609 21.854102 8.5873218 16.2917961 16.4732885 15.145898 20 8 23.5267115 15.145898 31.4126782 16.2917961 25.7063391 21.854102 27.053423 29.7082039z"
|
|
3159
3170
|
}))));
|
|
3160
3171
|
};
|
|
3161
3172
|
StarIcon.propTypes = {
|
|
3162
|
-
height:
|
|
3163
|
-
width:
|
|
3164
|
-
color:
|
|
3165
|
-
positionTop:
|
|
3173
|
+
height: PropTypes__default["default"].string,
|
|
3174
|
+
width: PropTypes__default["default"].string,
|
|
3175
|
+
color: PropTypes__default["default"].string,
|
|
3176
|
+
positionTop: PropTypes__default["default"].string
|
|
3166
3177
|
};
|
|
3167
3178
|
|
|
3168
3179
|
var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
|
|
@@ -3174,7 +3185,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
|
|
|
3174
3185
|
|
|
3175
3186
|
switch (iconType) {
|
|
3176
3187
|
case "crown":
|
|
3177
|
-
return /*#__PURE__*/
|
|
3188
|
+
return /*#__PURE__*/React__default["default"].createElement(CrownIcon, {
|
|
3178
3189
|
width: width,
|
|
3179
3190
|
height: height,
|
|
3180
3191
|
color: color,
|
|
@@ -3182,7 +3193,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
|
|
|
3182
3193
|
});
|
|
3183
3194
|
|
|
3184
3195
|
case "lock":
|
|
3185
|
-
return /*#__PURE__*/
|
|
3196
|
+
return /*#__PURE__*/React__default["default"].createElement(LockIcon, {
|
|
3186
3197
|
width: width,
|
|
3187
3198
|
height: height,
|
|
3188
3199
|
color: color,
|
|
@@ -3190,7 +3201,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
|
|
|
3190
3201
|
});
|
|
3191
3202
|
|
|
3192
3203
|
case "key":
|
|
3193
|
-
return /*#__PURE__*/
|
|
3204
|
+
return /*#__PURE__*/React__default["default"].createElement(KeyIcon, {
|
|
3194
3205
|
width: width,
|
|
3195
3206
|
height: height,
|
|
3196
3207
|
color: color,
|
|
@@ -3198,7 +3209,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
|
|
|
3198
3209
|
});
|
|
3199
3210
|
|
|
3200
3211
|
default:
|
|
3201
|
-
return /*#__PURE__*/
|
|
3212
|
+
return /*#__PURE__*/React__default["default"].createElement(StarIcon, {
|
|
3202
3213
|
width: width,
|
|
3203
3214
|
height: height,
|
|
3204
3215
|
color: color,
|
|
@@ -3207,21 +3218,21 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
|
|
|
3207
3218
|
}
|
|
3208
3219
|
};
|
|
3209
3220
|
PremiumStoryIcon.propTypes = {
|
|
3210
|
-
width:
|
|
3211
|
-
height:
|
|
3212
|
-
color:
|
|
3213
|
-
iconType:
|
|
3214
|
-
positionTop:
|
|
3221
|
+
width: PropTypes__default["default"].string,
|
|
3222
|
+
height: PropTypes__default["default"].string,
|
|
3223
|
+
color: PropTypes__default["default"].string,
|
|
3224
|
+
iconType: PropTypes__default["default"].string,
|
|
3225
|
+
positionTop: PropTypes__default["default"].string
|
|
3215
3226
|
};
|
|
3216
3227
|
|
|
3217
3228
|
function LiveIcon() {
|
|
3218
|
-
return /*#__PURE__*/
|
|
3229
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
3219
3230
|
className: "live-icon",
|
|
3220
3231
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3221
3232
|
width: "25",
|
|
3222
3233
|
height: "24",
|
|
3223
3234
|
viewBox: "0 0 25 24"
|
|
3224
|
-
}, /*#__PURE__*/
|
|
3235
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3225
3236
|
fill: "#ff5858",
|
|
3226
3237
|
d: "M12 18a6 6 0 110-12 6 6 0 010 12zm0 2.5a8.5 8.5 0 110-17 8.5 8.5 0 010 17zm0-1a7.5 7.5 0 100-15 7.5 7.5 0 000 15z"
|
|
3227
3238
|
}));
|
|
@@ -3278,37 +3289,37 @@ var Headline = function Headline(_ref) {
|
|
|
3278
3289
|
var wrapperClass = premiumStory ? "wrapper" : "";
|
|
3279
3290
|
var iconSize = "24px";
|
|
3280
3291
|
var enableLiveIcon = showLiveIcon && story["story-template"] === "live-blog" && !get_1(story, ["metadata", "is-closed"], false);
|
|
3281
|
-
return /*#__PURE__*/
|
|
3292
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3282
3293
|
"data-test-id": "headline",
|
|
3283
3294
|
className: "arrow-component arr--headline " + _getClassName(wrapperClass, _styleModuleImportMap$c)
|
|
3284
|
-
}, premiumStory && /*#__PURE__*/
|
|
3295
|
+
}, premiumStory && /*#__PURE__*/React__default["default"].createElement(PremiumStoryIcon, {
|
|
3285
3296
|
width: iconSize,
|
|
3286
3297
|
height: iconSize,
|
|
3287
3298
|
color: iconColor,
|
|
3288
3299
|
iconType: iconStyle,
|
|
3289
3300
|
positionTop: positionHeadline()
|
|
3290
|
-
}), isLink ? /*#__PURE__*/
|
|
3301
|
+
}), isLink ? /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
3291
3302
|
href: getStoryUrl(story, "/".concat(story.slug)),
|
|
3292
3303
|
externalLink: isExternalStory(story),
|
|
3293
3304
|
"aria-label": "headline"
|
|
3294
|
-
}, /*#__PURE__*/
|
|
3305
|
+
}, /*#__PURE__*/React__default["default"].createElement(HeaderTag, {
|
|
3295
3306
|
className: _getClassName("headline ".concat(textColor), _styleModuleImportMap$c)
|
|
3296
|
-
}, enableLiveIcon && /*#__PURE__*/
|
|
3307
|
+
}, enableLiveIcon && /*#__PURE__*/React__default["default"].createElement(LiveIcon, null), headline)) : /*#__PURE__*/React__default["default"].createElement(HeaderTag, {
|
|
3297
3308
|
className: _getClassName("headline ".concat(textColor), _styleModuleImportMap$c)
|
|
3298
|
-
}, enableLiveIcon && /*#__PURE__*/
|
|
3309
|
+
}, enableLiveIcon && /*#__PURE__*/React__default["default"].createElement(LiveIcon, null), headline));
|
|
3299
3310
|
};
|
|
3300
3311
|
Headline.propTypes = {
|
|
3301
3312
|
/** The Story Object from the API response */
|
|
3302
|
-
story:
|
|
3313
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
3303
3314
|
|
|
3304
3315
|
/** Header tags ranging h1-h6, where h[headerLevel] */
|
|
3305
|
-
headerLevel:
|
|
3306
|
-
premiumStoryIconConfig:
|
|
3307
|
-
iconColor:
|
|
3308
|
-
iconType:
|
|
3309
|
-
enablePremiumStoryIcon:
|
|
3316
|
+
headerLevel: PropTypes__default["default"].string,
|
|
3317
|
+
premiumStoryIconConfig: PropTypes__default["default"].shape({
|
|
3318
|
+
iconColor: PropTypes__default["default"].string,
|
|
3319
|
+
iconType: PropTypes__default["default"].string,
|
|
3320
|
+
enablePremiumStoryIcon: PropTypes__default["default"].bool
|
|
3310
3321
|
}),
|
|
3311
|
-
isLink:
|
|
3322
|
+
isLink: PropTypes__default["default"].bool
|
|
3312
3323
|
};
|
|
3313
3324
|
Headline.defaultProps = {
|
|
3314
3325
|
headerLevel: "6",
|
|
@@ -3347,26 +3358,26 @@ var LoadmoreButton = function LoadmoreButton(_ref) {
|
|
|
3347
3358
|
if (!showButton) return null;
|
|
3348
3359
|
var textColor = getTextColor(theme);
|
|
3349
3360
|
var slug = customUrlPath ? "/".concat(customUrlPath) : generateNavigateSlug(collection, _objectSpread$1(_objectSpread$1({}, qtConfig), config));
|
|
3350
|
-
return template === "SubsequentLoadCount" ? /*#__PURE__*/
|
|
3361
|
+
return template === "SubsequentLoadCount" ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3351
3362
|
onClick: onClick,
|
|
3352
3363
|
"data-test-id": "load-more",
|
|
3353
3364
|
className: "arr--button " + _getClassName("button ".concat(textColor, " default"), _styleModuleImportMap$b)
|
|
3354
|
-
}, buttonText) : /*#__PURE__*/
|
|
3365
|
+
}, buttonText) : /*#__PURE__*/React__default["default"].createElement(components.LinkBase, {
|
|
3355
3366
|
href: slug,
|
|
3356
3367
|
navigateTo: navigate,
|
|
3357
3368
|
"data-test-id": "load-more",
|
|
3358
3369
|
"aria-label": "load-more"
|
|
3359
|
-
}, /*#__PURE__*/
|
|
3370
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3360
3371
|
className: "arr--button " + _getClassName("button ".concat(textColor, " default"), _styleModuleImportMap$b)
|
|
3361
3372
|
}, buttonText));
|
|
3362
3373
|
};
|
|
3363
3374
|
LoadmoreButton.propTypes = {
|
|
3364
|
-
collection:
|
|
3365
|
-
template:
|
|
3366
|
-
config:
|
|
3367
|
-
onClick:
|
|
3368
|
-
navigate:
|
|
3369
|
-
qtConfig:
|
|
3375
|
+
collection: PropTypes__default["default"].object,
|
|
3376
|
+
template: PropTypes__default["default"].string,
|
|
3377
|
+
config: PropTypes__default["default"].object,
|
|
3378
|
+
onClick: PropTypes__default["default"].func,
|
|
3379
|
+
navigate: PropTypes__default["default"].func,
|
|
3380
|
+
qtConfig: PropTypes__default["default"].object
|
|
3370
3381
|
};
|
|
3371
3382
|
|
|
3372
3383
|
var _styleModuleImportMap$a = {
|
|
@@ -3389,7 +3400,7 @@ var Subheadline = function Subheadline(_ref) {
|
|
|
3389
3400
|
var subheadline = forceShowAtom || get_1(config, ["showSubheadline"], true);
|
|
3390
3401
|
if (!subheadline) return null;
|
|
3391
3402
|
var textColor = getTextColor(config.theme);
|
|
3392
|
-
return /*#__PURE__*/
|
|
3403
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3393
3404
|
style: {
|
|
3394
3405
|
WebkitLineClamp: lineClamp
|
|
3395
3406
|
},
|
|
@@ -3399,15 +3410,15 @@ var Subheadline = function Subheadline(_ref) {
|
|
|
3399
3410
|
};
|
|
3400
3411
|
Subheadline.propTypes = {
|
|
3401
3412
|
/** The Story Object from the API response */
|
|
3402
|
-
story:
|
|
3413
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
3403
3414
|
// Restricts the number of lines for subheadline.
|
|
3404
|
-
lineClamp:
|
|
3415
|
+
lineClamp: PropTypes__default["default"].number,
|
|
3405
3416
|
|
|
3406
3417
|
/** Number of characters to truncate the subheadline */
|
|
3407
|
-
truncateChars:
|
|
3408
|
-
clazzName:
|
|
3409
|
-
forceShowAtom:
|
|
3410
|
-
showFullContent:
|
|
3418
|
+
truncateChars: PropTypes__default["default"].number,
|
|
3419
|
+
clazzName: PropTypes__default["default"].string,
|
|
3420
|
+
forceShowAtom: PropTypes__default["default"].bool,
|
|
3421
|
+
showFullContent: PropTypes__default["default"].bool
|
|
3411
3422
|
};
|
|
3412
3423
|
Subheadline.defaultProps = {
|
|
3413
3424
|
forceShowAtom: false,
|
|
@@ -3433,18 +3444,18 @@ var TimeStamp = function TimeStamp(_ref) {
|
|
|
3433
3444
|
var time = story["last-published-at"] || story["first-published-at"];
|
|
3434
3445
|
var isBottomClasses = isBottom ? "bottom-fix" : "";
|
|
3435
3446
|
var textColor = getTextColor(configState.theme);
|
|
3436
|
-
return /*#__PURE__*/
|
|
3447
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isTime && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3437
3448
|
"data-test-id": "publish-time",
|
|
3438
3449
|
className: "time arr--publish-time " + _getClassName("time ".concat(textColor, " ").concat(isBottomClasses), _styleModuleImportMap$9)
|
|
3439
|
-
}, /*#__PURE__*/
|
|
3450
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3440
3451
|
className: "timestamp-m_time-wrapper__3O2lM"
|
|
3441
3452
|
}, getTimeStamp(time, formatter, config))));
|
|
3442
3453
|
};
|
|
3443
3454
|
TimeStamp.propTypes = {
|
|
3444
3455
|
/** The Story Object from the API response */
|
|
3445
|
-
story:
|
|
3446
|
-
isBottom:
|
|
3447
|
-
config:
|
|
3456
|
+
story: PropTypes__default["default"].object,
|
|
3457
|
+
isBottom: PropTypes__default["default"].bool,
|
|
3458
|
+
config: PropTypes__default["default"].object
|
|
3448
3459
|
};
|
|
3449
3460
|
|
|
3450
3461
|
var _styleModuleImportMap$8 = {
|
|
@@ -3487,10 +3498,10 @@ var AuthorBase = function AuthorBase(_ref) {
|
|
|
3487
3498
|
return null;
|
|
3488
3499
|
}
|
|
3489
3500
|
|
|
3490
|
-
return /*#__PURE__*/
|
|
3501
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3491
3502
|
"data-test-id": "author-image",
|
|
3492
3503
|
className: _getClassName("author-image ".concat(dir, "-image"), _styleModuleImportMap$8)
|
|
3493
|
-
}, /*#__PURE__*/
|
|
3504
|
+
}, /*#__PURE__*/React__default["default"].createElement("figure", null, avatarS3Key ? /*#__PURE__*/React__default["default"].createElement(components.ResponsiveImage, {
|
|
3494
3505
|
slug: avatarS3Key,
|
|
3495
3506
|
"aspect-ratio": [1, 1],
|
|
3496
3507
|
defaultWidth: 400,
|
|
@@ -3498,14 +3509,14 @@ var AuthorBase = function AuthorBase(_ref) {
|
|
|
3498
3509
|
auto: ["format", "compress"]
|
|
3499
3510
|
},
|
|
3500
3511
|
alt: authorName
|
|
3501
|
-
}) : /*#__PURE__*/
|
|
3512
|
+
}) : /*#__PURE__*/React__default["default"].createElement("img", {
|
|
3502
3513
|
src: avatarUrl
|
|
3503
3514
|
})));
|
|
3504
3515
|
};
|
|
3505
3516
|
|
|
3506
3517
|
var isPrefix = function isPrefix(dir) {
|
|
3507
3518
|
if (prefix) {
|
|
3508
|
-
return /*#__PURE__*/
|
|
3519
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3509
3520
|
className: "arr-author-prefix " + _getClassName("prefix ".concat(textColor), _styleModuleImportMap$8)
|
|
3510
3521
|
}, prefix);
|
|
3511
3522
|
}
|
|
@@ -3513,11 +3524,11 @@ var AuthorBase = function AuthorBase(_ref) {
|
|
|
3513
3524
|
return !hideAuthorImage && authorImage(dir);
|
|
3514
3525
|
};
|
|
3515
3526
|
|
|
3516
|
-
return /*#__PURE__*/
|
|
3527
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isAuthor && /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
3517
3528
|
href: "".concat(mountAt, "/author/") + slug,
|
|
3518
3529
|
"aria-label": "author-name",
|
|
3519
3530
|
className: "author-name arr-author-name arrow-component " + _getClassName("author ".concat(isBottomClasses), _styleModuleImportMap$8)
|
|
3520
|
-
}, isPrefix("ltr"), /*#__PURE__*/
|
|
3531
|
+
}, isPrefix("ltr"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3521
3532
|
"data-test-id": "author-name",
|
|
3522
3533
|
className: "author-name " + _getClassName("author-name ".concat(textColor), _styleModuleImportMap$8)
|
|
3523
3534
|
}, authorName || story["author-name"]), !prefix && isPrefix("rtl")));
|
|
@@ -3529,18 +3540,18 @@ function mapStateToProps(state) {
|
|
|
3529
3540
|
};
|
|
3530
3541
|
}
|
|
3531
3542
|
|
|
3532
|
-
var Author = connect(mapStateToProps)(AuthorBase);
|
|
3543
|
+
var Author = reactRedux.connect(mapStateToProps)(AuthorBase);
|
|
3533
3544
|
AuthorBase.propTypes = {
|
|
3534
3545
|
/** The Story Object from the API response */
|
|
3535
|
-
story:
|
|
3546
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
3536
3547
|
|
|
3537
3548
|
/** Hide Author Avatar Image */
|
|
3538
|
-
hideAuthorImage:
|
|
3549
|
+
hideAuthorImage: PropTypes__default["default"].bool,
|
|
3539
3550
|
// fix Author bottom of the storyCard
|
|
3540
|
-
isBottom:
|
|
3551
|
+
isBottom: PropTypes__default["default"].bool,
|
|
3541
3552
|
// fix prefix before the author name
|
|
3542
|
-
prefix:
|
|
3543
|
-
config:
|
|
3553
|
+
prefix: PropTypes__default["default"].string,
|
|
3554
|
+
config: PropTypes__default["default"].object
|
|
3544
3555
|
};
|
|
3545
3556
|
AuthorBase.defaultProps = {
|
|
3546
3557
|
hideAuthorImage: false,
|
|
@@ -3561,14 +3572,14 @@ var Dot = function Dot(_ref) {
|
|
|
3561
3572
|
height = _ref$height === void 0 ? "3px" : _ref$height,
|
|
3562
3573
|
_ref$color = _ref.color,
|
|
3563
3574
|
color = _ref$color === void 0 ? "light" : _ref$color;
|
|
3564
|
-
return /*#__PURE__*/
|
|
3575
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3565
3576
|
className: _getClassName(color, _styleModuleImportMap$7)
|
|
3566
|
-
}, /*#__PURE__*/
|
|
3577
|
+
}, /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
3567
3578
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3568
3579
|
width: width,
|
|
3569
3580
|
height: height,
|
|
3570
3581
|
viewBox: "0 0 3 3"
|
|
3571
|
-
}, /*#__PURE__*/
|
|
3582
|
+
}, /*#__PURE__*/React__default["default"].createElement("circle", {
|
|
3572
3583
|
cx: "87",
|
|
3573
3584
|
cy: "9",
|
|
3574
3585
|
r: "1",
|
|
@@ -3579,9 +3590,9 @@ var Dot = function Dot(_ref) {
|
|
|
3579
3590
|
};
|
|
3580
3591
|
Dot.propTypes = {
|
|
3581
3592
|
/** height , width and color of the dot icon */
|
|
3582
|
-
color:
|
|
3583
|
-
width:
|
|
3584
|
-
height:
|
|
3593
|
+
color: PropTypes__default["default"].string,
|
|
3594
|
+
width: PropTypes__default["default"].string,
|
|
3595
|
+
height: PropTypes__default["default"].string
|
|
3585
3596
|
};
|
|
3586
3597
|
|
|
3587
3598
|
var _styleModuleImportMap$6 = {
|
|
@@ -3597,22 +3608,22 @@ var Divider = function Divider(_ref) {
|
|
|
3597
3608
|
height = _ref$height === void 0 ? "10" : _ref$height,
|
|
3598
3609
|
_ref$color = _ref.color,
|
|
3599
3610
|
color = _ref$color === void 0 ? "light" : _ref$color;
|
|
3600
|
-
return /*#__PURE__*/
|
|
3611
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3601
3612
|
className: _getClassName(color, _styleModuleImportMap$6)
|
|
3602
|
-
}, /*#__PURE__*/
|
|
3613
|
+
}, /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
3603
3614
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3604
3615
|
width: width,
|
|
3605
3616
|
height: height
|
|
3606
|
-
}, /*#__PURE__*/
|
|
3617
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3607
3618
|
fill: "inherit",
|
|
3608
3619
|
d: "M0 0h1v10H0z"
|
|
3609
3620
|
})));
|
|
3610
3621
|
};
|
|
3611
3622
|
Divider.propTypes = {
|
|
3612
3623
|
/** height , width and color of the dot icon */
|
|
3613
|
-
color:
|
|
3614
|
-
width:
|
|
3615
|
-
height:
|
|
3624
|
+
color: PropTypes__default["default"].string,
|
|
3625
|
+
width: PropTypes__default["default"].string,
|
|
3626
|
+
height: PropTypes__default["default"].string
|
|
3616
3627
|
};
|
|
3617
3628
|
|
|
3618
3629
|
var _styleModuleImportMap$5 = {
|
|
@@ -3635,23 +3646,23 @@ var ReadTime = function ReadTime(_ref) {
|
|
|
3635
3646
|
var textColor = isLightTheme ? "light" : getTextColor(config.theme);
|
|
3636
3647
|
if (!showReadTime || !readTime) return null;
|
|
3637
3648
|
var timeToRead = get_1(opts, ["localizedTimeToRead"]) || "min read";
|
|
3638
|
-
return /*#__PURE__*/
|
|
3649
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3639
3650
|
"data-test-id": "read-time",
|
|
3640
3651
|
className: "arrow-component arr--read-time " + _getClassName("read-time-wrapper ".concat(textColor), _styleModuleImportMap$5)
|
|
3641
|
-
}, /*#__PURE__*/
|
|
3652
|
+
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
3642
3653
|
className: "read-time-indicator read-time-m_dot-indicator__3Sqh2"
|
|
3643
|
-
}, /*#__PURE__*/
|
|
3654
|
+
}, /*#__PURE__*/React__default["default"].createElement(Dot, {
|
|
3644
3655
|
color: textColor
|
|
3645
|
-
})), /*#__PURE__*/
|
|
3656
|
+
})), /*#__PURE__*/React__default["default"].createElement("span", null, readTime, " ", timeToRead)));
|
|
3646
3657
|
};
|
|
3647
3658
|
ReadTime.propTypes = {
|
|
3648
|
-
story:
|
|
3649
|
-
"read-time":
|
|
3659
|
+
story: PropTypes__default["default"].shape({
|
|
3660
|
+
"read-time": PropTypes__default["default"].number
|
|
3650
3661
|
}),
|
|
3651
|
-
opts:
|
|
3652
|
-
showReadTime:
|
|
3662
|
+
opts: PropTypes__default["default"].shape({
|
|
3663
|
+
showReadTime: PropTypes__default["default"].bool
|
|
3653
3664
|
}),
|
|
3654
|
-
isLightTheme:
|
|
3665
|
+
isLightTheme: PropTypes__default["default"].bool
|
|
3655
3666
|
};
|
|
3656
3667
|
|
|
3657
3668
|
var _styleModuleImportMap$4 = {
|
|
@@ -3682,33 +3693,33 @@ var AuthorWithTime = function AuthorWithTime(_ref) {
|
|
|
3682
3693
|
|
|
3683
3694
|
var getSeparator = function getSeparator() {
|
|
3684
3695
|
if (separator === "divider") {
|
|
3685
|
-
return /*#__PURE__*/
|
|
3696
|
+
return /*#__PURE__*/React__default["default"].createElement(Divider, {
|
|
3686
3697
|
color: textColor
|
|
3687
3698
|
});
|
|
3688
3699
|
}
|
|
3689
3700
|
|
|
3690
|
-
return /*#__PURE__*/
|
|
3701
|
+
return /*#__PURE__*/React__default["default"].createElement(Dot, {
|
|
3691
3702
|
color: textColor
|
|
3692
3703
|
});
|
|
3693
3704
|
};
|
|
3694
3705
|
|
|
3695
3706
|
var getTimeStamp = function getTimeStamp() {
|
|
3696
3707
|
if (!isTime) return null;
|
|
3697
|
-
return /*#__PURE__*/
|
|
3708
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isAuthor && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
3698
3709
|
className: "arr-separator " + _getClassName("".concat(seperatorStyle), _styleModuleImportMap$4)
|
|
3699
|
-
}, getSeparator()), /*#__PURE__*/
|
|
3710
|
+
}, getSeparator()), /*#__PURE__*/React__default["default"].createElement(TimeStamp, {
|
|
3700
3711
|
story: story,
|
|
3701
3712
|
config: config
|
|
3702
|
-
}), isReadTime && /*#__PURE__*/
|
|
3713
|
+
}), isReadTime && /*#__PURE__*/React__default["default"].createElement(ReadTime, {
|
|
3703
3714
|
story: story,
|
|
3704
3715
|
opts: config,
|
|
3705
3716
|
isLightTheme: isLightTheme
|
|
3706
3717
|
}));
|
|
3707
3718
|
};
|
|
3708
3719
|
|
|
3709
|
-
return /*#__PURE__*/
|
|
3720
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3710
3721
|
className: "arr--author-time " + _getClassName("author-time-wrapper ".concat(isBottomClasses), _styleModuleImportMap$4)
|
|
3711
|
-
}, isAuthor ? /*#__PURE__*/
|
|
3722
|
+
}, isAuthor ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Author, {
|
|
3712
3723
|
story: story,
|
|
3713
3724
|
isBottom: true,
|
|
3714
3725
|
hideAuthorImage: hideAuthorImage,
|
|
@@ -3716,19 +3727,19 @@ var AuthorWithTime = function AuthorWithTime(_ref) {
|
|
|
3716
3727
|
}), getTimeStamp()) : getTimeStamp());
|
|
3717
3728
|
};
|
|
3718
3729
|
AuthorWithTime.propTypes = {
|
|
3719
|
-
story:
|
|
3730
|
+
story: PropTypes__default["default"].object,
|
|
3720
3731
|
|
|
3721
3732
|
/** Style of separator between the Author & Timestamp */
|
|
3722
|
-
separator:
|
|
3733
|
+
separator: PropTypes__default["default"].oneOf(["dot", "divider"]),
|
|
3723
3734
|
|
|
3724
3735
|
/** hide the author image */
|
|
3725
|
-
hideAuthorImage:
|
|
3736
|
+
hideAuthorImage: PropTypes__default["default"].bool,
|
|
3726
3737
|
// fix author and time at the end
|
|
3727
|
-
isBottom:
|
|
3738
|
+
isBottom: PropTypes__default["default"].bool,
|
|
3728
3739
|
// fix prefix before the author name
|
|
3729
|
-
prefix:
|
|
3730
|
-
config:
|
|
3731
|
-
isLightTheme:
|
|
3740
|
+
prefix: PropTypes__default["default"].string,
|
|
3741
|
+
config: PropTypes__default["default"].object,
|
|
3742
|
+
isLightTheme: PropTypes__default["default"].bool
|
|
3732
3743
|
};
|
|
3733
3744
|
AuthorWithTime.defaultProps = {
|
|
3734
3745
|
separator: "dot",
|
|
@@ -3745,27 +3756,27 @@ var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
|
|
|
3745
3756
|
height = _ref$height === void 0 ? 30 : _ref$height,
|
|
3746
3757
|
_ref$iconColor = _ref.iconColor,
|
|
3747
3758
|
iconColor = _ref$iconColor === void 0 ? "#99B0CB" : _ref$iconColor;
|
|
3748
|
-
return /*#__PURE__*/
|
|
3759
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
3749
3760
|
width: width,
|
|
3750
3761
|
height: height,
|
|
3751
3762
|
viewBox: "0 0 102 76",
|
|
3752
3763
|
version: "1.1"
|
|
3753
|
-
}, /*#__PURE__*/
|
|
3764
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3754
3765
|
id: "demo-home-copy",
|
|
3755
3766
|
stroke: "none",
|
|
3756
3767
|
strokeWidth: "1",
|
|
3757
3768
|
fill: "none",
|
|
3758
3769
|
fillRule: "evenodd",
|
|
3759
3770
|
transform: "translate(-377.000000, -314.000000)"
|
|
3760
|
-
}, /*#__PURE__*/
|
|
3771
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3761
3772
|
id: "Group-13",
|
|
3762
3773
|
transform: "translate(377.000000, 314.000000)"
|
|
3763
|
-
}, /*#__PURE__*/
|
|
3774
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3764
3775
|
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",
|
|
3765
3776
|
id: "Combined-Shape",
|
|
3766
3777
|
fill: iconColor,
|
|
3767
3778
|
fillRule: "nonzero"
|
|
3768
|
-
}), /*#__PURE__*/
|
|
3779
|
+
}), /*#__PURE__*/React__default["default"].createElement("rect", {
|
|
3769
3780
|
id: "Rectangle-19",
|
|
3770
3781
|
stroke: iconColor,
|
|
3771
3782
|
strokeWidth: "3",
|
|
@@ -3777,24 +3788,24 @@ var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
|
|
|
3777
3788
|
}))));
|
|
3778
3789
|
};
|
|
3779
3790
|
ImageFallbackIcon.propTypes = {
|
|
3780
|
-
width:
|
|
3781
|
-
height:
|
|
3782
|
-
iconColor:
|
|
3791
|
+
width: PropTypes__default["default"].object,
|
|
3792
|
+
height: PropTypes__default["default"].object,
|
|
3793
|
+
iconColor: PropTypes__default["default"].object
|
|
3783
3794
|
};
|
|
3784
3795
|
|
|
3785
3796
|
var imageFallback = function imageFallback() {
|
|
3786
|
-
return /*#__PURE__*/
|
|
3797
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3787
3798
|
className: "arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"
|
|
3788
|
-
}, /*#__PURE__*/
|
|
3799
|
+
}, /*#__PURE__*/React__default["default"].createElement("figure", {
|
|
3789
3800
|
className: "arr--fallback-svg fallback-m_fallback-svg__tK9fL"
|
|
3790
|
-
}, /*#__PURE__*/
|
|
3801
|
+
}, /*#__PURE__*/React__default["default"].createElement(ImageFallbackIcon, null)));
|
|
3791
3802
|
};
|
|
3792
3803
|
|
|
3793
3804
|
var FallbackImage = function FallbackImage(_ref) {
|
|
3794
3805
|
var slug = _ref.slug;
|
|
3795
3806
|
|
|
3796
3807
|
if (slug) {
|
|
3797
|
-
return /*#__PURE__*/
|
|
3808
|
+
return /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
3798
3809
|
href: slug,
|
|
3799
3810
|
"aria-label": "image-fallback"
|
|
3800
3811
|
}, imageFallback());
|
|
@@ -3803,23 +3814,23 @@ var FallbackImage = function FallbackImage(_ref) {
|
|
|
3803
3814
|
}
|
|
3804
3815
|
};
|
|
3805
3816
|
FallbackImage.propTypes = {
|
|
3806
|
-
slug:
|
|
3817
|
+
slug: PropTypes__default["default"].string
|
|
3807
3818
|
};
|
|
3808
3819
|
|
|
3809
3820
|
var HyperLinkIcon = function HyperLinkIcon() {
|
|
3810
|
-
return /*#__PURE__*/
|
|
3821
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
3811
3822
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3812
3823
|
width: "36",
|
|
3813
3824
|
height: "28"
|
|
3814
|
-
}, /*#__PURE__*/
|
|
3825
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3815
3826
|
fill: "none",
|
|
3816
3827
|
fillRule: "evenodd"
|
|
3817
|
-
}, /*#__PURE__*/
|
|
3828
|
+
}, /*#__PURE__*/React__default["default"].createElement("rect", {
|
|
3818
3829
|
width: "36",
|
|
3819
3830
|
height: "28",
|
|
3820
3831
|
fill: "#3D6FCF",
|
|
3821
3832
|
rx: "4"
|
|
3822
|
-
}), /*#__PURE__*/
|
|
3833
|
+
}), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3823
3834
|
stroke: "#FFF",
|
|
3824
3835
|
strokeLinecap: "round",
|
|
3825
3836
|
strokeLinejoin: "round",
|
|
@@ -3832,16 +3843,16 @@ var HyperLink = function HyperLink(_ref) {
|
|
|
3832
3843
|
var _ref$hyperLink = _ref.hyperLink,
|
|
3833
3844
|
hyperLink = _ref$hyperLink === void 0 ? "" : _ref$hyperLink;
|
|
3834
3845
|
if (!hyperLink) return null;
|
|
3835
|
-
return /*#__PURE__*/
|
|
3846
|
+
return /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
3836
3847
|
href: hyperLink,
|
|
3837
3848
|
"aria-label": "hyperlink-button",
|
|
3838
3849
|
className: "arr--hyperlink-button hyperlink-m_hyperlink-button__1CqWx",
|
|
3839
3850
|
target: "_blank",
|
|
3840
3851
|
rel: "noopener noreferrer"
|
|
3841
|
-
}, /*#__PURE__*/
|
|
3852
|
+
}, /*#__PURE__*/React__default["default"].createElement(HyperLinkIcon, null));
|
|
3842
3853
|
};
|
|
3843
3854
|
HyperLink.propTypes = {
|
|
3844
|
-
hyperLink:
|
|
3855
|
+
hyperLink: PropTypes__default["default"].string
|
|
3845
3856
|
};
|
|
3846
3857
|
|
|
3847
3858
|
var _styleModuleImportMap$3 = {
|
|
@@ -3877,7 +3888,7 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
3877
3888
|
StoryTemplateIcon = _config$StoryTemplate === void 0 ? function () {
|
|
3878
3889
|
return null;
|
|
3879
3890
|
} : _config$StoryTemplate;
|
|
3880
|
-
var showImagePlaceholder = useSelector(function (state) {
|
|
3891
|
+
var showImagePlaceholder = reactRedux.useSelector(function (state) {
|
|
3881
3892
|
return get_1(state, ["qt", "config", "showPlaceholder"]);
|
|
3882
3893
|
});
|
|
3883
3894
|
var getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
|
|
@@ -3913,37 +3924,37 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
3913
3924
|
var fallbackImage = function fallbackImage() {
|
|
3914
3925
|
if (!slug) {
|
|
3915
3926
|
if (fallbackImageUrl && !isStoryPageImage) {
|
|
3916
|
-
return /*#__PURE__*/
|
|
3927
|
+
return /*#__PURE__*/React__default["default"].createElement("figure", {
|
|
3917
3928
|
style: {
|
|
3918
3929
|
paddingTop: imagePadding + "%"
|
|
3919
3930
|
},
|
|
3920
3931
|
className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$3)
|
|
3921
|
-
}, /*#__PURE__*/
|
|
3932
|
+
}, /*#__PURE__*/React__default["default"].createElement("img", {
|
|
3922
3933
|
className: "qt-image",
|
|
3923
3934
|
"data-src": "".concat(fallbackImageUrl),
|
|
3924
3935
|
alt: "image-fallback"
|
|
3925
3936
|
}));
|
|
3926
3937
|
}
|
|
3927
3938
|
|
|
3928
|
-
return /*#__PURE__*/
|
|
3939
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, defaultFallback ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3929
3940
|
"data-test-id": "arr--fallback-hero-image",
|
|
3930
3941
|
style: {
|
|
3931
3942
|
paddingTop: imagePadding + "%"
|
|
3932
3943
|
},
|
|
3933
3944
|
className: "arr--fallback-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$3)
|
|
3934
|
-
}, /*#__PURE__*/
|
|
3945
|
+
}, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
|
|
3935
3946
|
storyTemplate: story["story-template"]
|
|
3936
|
-
}), /*#__PURE__*/
|
|
3947
|
+
}), /*#__PURE__*/React__default["default"].createElement(FallbackImage, null)) : null);
|
|
3937
3948
|
}
|
|
3938
3949
|
|
|
3939
|
-
return /*#__PURE__*/
|
|
3950
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("figure", {
|
|
3940
3951
|
style: {
|
|
3941
3952
|
paddingTop: imagePadding + "%"
|
|
3942
3953
|
},
|
|
3943
3954
|
className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$3)
|
|
3944
|
-
}, /*#__PURE__*/
|
|
3955
|
+
}, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
|
|
3945
3956
|
storyTemplate: story["story-template"]
|
|
3946
|
-
}), /*#__PURE__*/
|
|
3957
|
+
}), /*#__PURE__*/React__default["default"].createElement(components.ResponsiveHeroImage, {
|
|
3947
3958
|
story: story,
|
|
3948
3959
|
aspectRatio: imageAspectRatio,
|
|
3949
3960
|
defaultWidth: defaultWidth,
|
|
@@ -3952,15 +3963,15 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
3952
3963
|
auto: ["format", "compress"],
|
|
3953
3964
|
fit: "max"
|
|
3954
3965
|
}
|
|
3955
|
-
})), isStoryPageImage && hyperLink && /*#__PURE__*/
|
|
3966
|
+
})), isStoryPageImage && hyperLink && /*#__PURE__*/React__default["default"].createElement(HyperLink, {
|
|
3956
3967
|
hyperLink: hyperLink
|
|
3957
3968
|
}));
|
|
3958
3969
|
};
|
|
3959
3970
|
|
|
3960
|
-
return story && (isStoryPageImage ? /*#__PURE__*/
|
|
3971
|
+
return story && (isStoryPageImage ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3961
3972
|
"data-test-id": "arr--hero-image",
|
|
3962
3973
|
className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$3)
|
|
3963
|
-
}, fallbackImage()) : /*#__PURE__*/
|
|
3974
|
+
}, fallbackImage()) : /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
3964
3975
|
"data-test-id": "arr--hero-image",
|
|
3965
3976
|
href: getStoryUrl(story, "/".concat(story.slug)),
|
|
3966
3977
|
externalLink: isExternalStory(story),
|
|
@@ -3970,30 +3981,30 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
3970
3981
|
};
|
|
3971
3982
|
HeroImage.propTypes = {
|
|
3972
3983
|
/** The Story Object from the API response */
|
|
3973
|
-
story:
|
|
3984
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
3974
3985
|
|
|
3975
3986
|
/** Removes the Hero Image padding for the image to bleed over the margin */
|
|
3976
|
-
FullBleed:
|
|
3987
|
+
FullBleed: PropTypes__default["default"].bool,
|
|
3977
3988
|
|
|
3978
3989
|
/** The default width for the image, in case the browser does not support srcset */
|
|
3979
|
-
defaultWidth:
|
|
3990
|
+
defaultWidth: PropTypes__default["default"].number,
|
|
3980
3991
|
|
|
3981
3992
|
/** The list of available widths */
|
|
3982
|
-
widths:
|
|
3993
|
+
widths: PropTypes__default["default"].array,
|
|
3983
3994
|
// fatch the correct hero image
|
|
3984
|
-
aspectRatio:
|
|
3995
|
+
aspectRatio: PropTypes__default["default"].array,
|
|
3985
3996
|
// Hints for the browser to choose the best size
|
|
3986
3997
|
|
|
3987
3998
|
/** This prop is responsible for adding padding-right of the image and remove padding bottom of the image */
|
|
3988
|
-
isHorizontal:
|
|
3999
|
+
isHorizontal: PropTypes__default["default"].bool,
|
|
3989
4000
|
|
|
3990
4001
|
/** This prop is responsible for adding padding-bottom in desktop and padding-right in mobile */
|
|
3991
|
-
isHorizontalMobile:
|
|
4002
|
+
isHorizontalMobile: PropTypes__default["default"].bool,
|
|
3992
4003
|
// this prop is responsive for rendering fallback image on story page
|
|
3993
|
-
defaultFallback:
|
|
3994
|
-
isHorizontalWithImageLast:
|
|
3995
|
-
isStoryPageImage:
|
|
3996
|
-
config:
|
|
4004
|
+
defaultFallback: PropTypes__default["default"].bool,
|
|
4005
|
+
isHorizontalWithImageLast: PropTypes__default["default"].bool,
|
|
4006
|
+
isStoryPageImage: PropTypes__default["default"].bool,
|
|
4007
|
+
config: PropTypes__default["default"].object
|
|
3997
4008
|
};
|
|
3998
4009
|
HeroImage.defaultProps = {
|
|
3999
4010
|
FullBleed: true,
|
|
@@ -4043,22 +4054,22 @@ var SectionTag = function SectionTag(_ref) {
|
|
|
4043
4054
|
}
|
|
4044
4055
|
|
|
4045
4056
|
if (!isSection) return null;
|
|
4046
|
-
return /*#__PURE__*/
|
|
4057
|
+
return /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
4047
4058
|
href: getUrl,
|
|
4048
4059
|
className: "arrow-component arr--section-name",
|
|
4049
4060
|
"aria-label": "section-name"
|
|
4050
|
-
}, /*#__PURE__*/
|
|
4061
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4051
4062
|
"data-test-id": "sectionTag",
|
|
4052
4063
|
style: {
|
|
4053
4064
|
backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : ""
|
|
4054
4065
|
},
|
|
4055
4066
|
className: "section-tag arrow-component " + _getClassName("".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap$2)
|
|
4056
|
-
}, templateStyle.includes("section-borderLeft") && /*#__PURE__*/
|
|
4067
|
+
}, templateStyle.includes("section-borderLeft") && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
4057
4068
|
className: "section-m_border-left__2oUyp",
|
|
4058
4069
|
style: {
|
|
4059
4070
|
color: sectionTagBorderColor
|
|
4060
4071
|
}
|
|
4061
|
-
}), section["display-name"] || section["name"], /*#__PURE__*/
|
|
4072
|
+
}), section["display-name"] || section["name"], /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4062
4073
|
className: "section-m_border-bottom__3cRoD",
|
|
4063
4074
|
style: {
|
|
4064
4075
|
backgroundColor: "".concat(template === "solid" ? "" : sectionTagBorderColor)
|
|
@@ -4067,13 +4078,13 @@ var SectionTag = function SectionTag(_ref) {
|
|
|
4067
4078
|
};
|
|
4068
4079
|
SectionTag.propTypes = {
|
|
4069
4080
|
/** The Story Object from the API response */
|
|
4070
|
-
story:
|
|
4081
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
4071
4082
|
|
|
4072
4083
|
/** The style template for section tag */
|
|
4073
|
-
template:
|
|
4074
|
-
borderColor:
|
|
4075
|
-
solidBorderColor:
|
|
4076
|
-
isLightTheme:
|
|
4084
|
+
template: PropTypes__default["default"].oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
|
|
4085
|
+
borderColor: PropTypes__default["default"].string,
|
|
4086
|
+
solidBorderColor: PropTypes__default["default"].string,
|
|
4087
|
+
isLightTheme: PropTypes__default["default"].bool
|
|
4077
4088
|
};
|
|
4078
4089
|
SectionTag.defaultProps = {
|
|
4079
4090
|
template: "",
|
|
@@ -4122,7 +4133,7 @@ var StoryCard = function StoryCard(_ref) {
|
|
|
4122
4133
|
prefix = _ref.prefix,
|
|
4123
4134
|
config = _ref.config,
|
|
4124
4135
|
isHorizontalWithImageLast = _ref.isHorizontalWithImageLast;
|
|
4125
|
-
if (!story || isEmpty(story)) return /*#__PURE__*/
|
|
4136
|
+
if (!story || isEmpty(story)) return /*#__PURE__*/React__default["default"].createElement("div", null);
|
|
4126
4137
|
var borderOptions = ["default", "full", "bottom", "boxShadow"];
|
|
4127
4138
|
var borderTemplate = borderOptions.includes(border) ? "border-".concat(border) : ""; // TODO optimize conditions
|
|
4128
4139
|
|
|
@@ -4132,7 +4143,7 @@ var StoryCard = function StoryCard(_ref) {
|
|
|
4132
4143
|
var bgImgContentOverlapClass = bgImgContentOverlap ? "content-overlap" : "";
|
|
4133
4144
|
var textColor = getTextColor(theme);
|
|
4134
4145
|
var horizontalMobileClasses = isHorizontalMobile ? "horizontal-mob" : "";
|
|
4135
|
-
var defaultStorycard = /*#__PURE__*/
|
|
4146
|
+
var defaultStorycard = /*#__PURE__*/React__default["default"].createElement(DefaultStoryCard, {
|
|
4136
4147
|
story: story,
|
|
4137
4148
|
aspectRatio: aspectRatio,
|
|
4138
4149
|
border: border,
|
|
@@ -4146,7 +4157,7 @@ var StoryCard = function StoryCard(_ref) {
|
|
|
4146
4157
|
config: config,
|
|
4147
4158
|
isHorizontalWithImageLast: isHorizontalWithImageLast
|
|
4148
4159
|
});
|
|
4149
|
-
return /*#__PURE__*/
|
|
4160
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4150
4161
|
"data-test-id": "story-card",
|
|
4151
4162
|
style: {
|
|
4152
4163
|
backgroundColor: theme,
|
|
@@ -4175,91 +4186,91 @@ var DefaultStoryCard = function DefaultStoryCard(_ref2) {
|
|
|
4175
4186
|
var SectionTagborderColor = rgbToHex(borderColor);
|
|
4176
4187
|
var _config$localizationC = config.localizationConfig,
|
|
4177
4188
|
localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC;
|
|
4178
|
-
return /*#__PURE__*/
|
|
4189
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isHorizontal ? /*#__PURE__*/React__default["default"].createElement(HeroImage, {
|
|
4179
4190
|
config: config,
|
|
4180
4191
|
story: story,
|
|
4181
4192
|
isHorizontal: true,
|
|
4182
4193
|
isHorizontalMobile: isHorizontalMobile,
|
|
4183
4194
|
aspectRatio: aspectRatio
|
|
4184
|
-
}) : isHorizontalWithImageLast ? /*#__PURE__*/
|
|
4195
|
+
}) : isHorizontalWithImageLast ? /*#__PURE__*/React__default["default"].createElement(HeroImage, {
|
|
4185
4196
|
config: config,
|
|
4186
4197
|
story: story,
|
|
4187
4198
|
isHorizontalWithImageLast: true,
|
|
4188
4199
|
isHorizontalMobile: isHorizontalMobile,
|
|
4189
4200
|
aspectRatio: aspectRatio
|
|
4190
|
-
}) : /*#__PURE__*/
|
|
4201
|
+
}) : /*#__PURE__*/React__default["default"].createElement(HeroImage, {
|
|
4191
4202
|
story: story,
|
|
4192
4203
|
config: config,
|
|
4193
4204
|
isHorizontalMobile: isHorizontalMobile,
|
|
4194
4205
|
aspectRatio: aspectRatio
|
|
4195
|
-
}), /*#__PURE__*/
|
|
4206
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4196
4207
|
className: "arr--story-content " + _getClassName("content ".concat(alignment), _styleModuleImportMap$1)
|
|
4197
|
-
}, /*#__PURE__*/
|
|
4208
|
+
}, /*#__PURE__*/React__default["default"].createElement(SectionTag, {
|
|
4198
4209
|
story: story,
|
|
4199
4210
|
borderColor: SectionTagborderColor
|
|
4200
|
-
}), /*#__PURE__*/
|
|
4211
|
+
}), /*#__PURE__*/React__default["default"].createElement(Headline, {
|
|
4201
4212
|
story: story,
|
|
4202
4213
|
headerLevel: headerLevel,
|
|
4203
4214
|
premiumStoryIconConfig: config
|
|
4204
|
-
}), /*#__PURE__*/
|
|
4215
|
+
}), /*#__PURE__*/React__default["default"].createElement(AuthorWithTime, {
|
|
4205
4216
|
config: localizationConfig,
|
|
4206
4217
|
story: story,
|
|
4207
4218
|
isBottom: true,
|
|
4208
4219
|
prefix: prefix,
|
|
4209
4220
|
hideAuthorImage: hideAuthorImage
|
|
4210
|
-
}), /*#__PURE__*/
|
|
4221
|
+
}), /*#__PURE__*/React__default["default"].createElement(Subheadline, {
|
|
4211
4222
|
story: story
|
|
4212
4223
|
})));
|
|
4213
4224
|
};
|
|
4214
4225
|
|
|
4215
4226
|
DefaultStoryCard.propTypes = {
|
|
4216
|
-
story:
|
|
4217
|
-
border:
|
|
4218
|
-
isBottom:
|
|
4219
|
-
isHorizontal:
|
|
4220
|
-
aspectRatio:
|
|
4221
|
-
isHorizontalMobile:
|
|
4222
|
-
centerAlign:
|
|
4223
|
-
headerLevel:
|
|
4224
|
-
borderColor:
|
|
4225
|
-
hideAuthorImage:
|
|
4226
|
-
prefix:
|
|
4227
|
-
config:
|
|
4228
|
-
isHorizontalWithImageLast:
|
|
4227
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
4228
|
+
border: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string]),
|
|
4229
|
+
isBottom: PropTypes__default["default"].bool,
|
|
4230
|
+
isHorizontal: PropTypes__default["default"].bool,
|
|
4231
|
+
aspectRatio: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array]),
|
|
4232
|
+
isHorizontalMobile: PropTypes__default["default"].bool,
|
|
4233
|
+
centerAlign: PropTypes__default["default"].bool,
|
|
4234
|
+
headerLevel: PropTypes__default["default"].string,
|
|
4235
|
+
borderColor: PropTypes__default["default"].string,
|
|
4236
|
+
hideAuthorImage: PropTypes__default["default"].bool,
|
|
4237
|
+
prefix: PropTypes__default["default"].string,
|
|
4238
|
+
config: PropTypes__default["default"].object,
|
|
4239
|
+
isHorizontalWithImageLast: PropTypes__default["default"].bool
|
|
4229
4240
|
};
|
|
4230
4241
|
StoryCard.propTypes = {
|
|
4231
4242
|
/** The Story Object from the API response */
|
|
4232
|
-
story:
|
|
4233
|
-
children:
|
|
4243
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
4244
|
+
children: PropTypes__default["default"].node,
|
|
4234
4245
|
|
|
4235
4246
|
/** Flip the Story Card to Horizonal mode */
|
|
4236
|
-
isHorizontal:
|
|
4247
|
+
isHorizontal: PropTypes__default["default"].bool,
|
|
4237
4248
|
|
|
4238
4249
|
/** Add border to the Story Card */
|
|
4239
|
-
border:
|
|
4250
|
+
border: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string]),
|
|
4240
4251
|
// story card with background image
|
|
4241
|
-
useImageAsBackground:
|
|
4252
|
+
useImageAsBackground: PropTypes__default["default"].bool,
|
|
4242
4253
|
// story card content overlap with image
|
|
4243
|
-
bgImgContentOverlap:
|
|
4254
|
+
bgImgContentOverlap: PropTypes__default["default"].bool,
|
|
4244
4255
|
|
|
4245
4256
|
/** add aspect ratio for hero image */
|
|
4246
|
-
aspectRatio:
|
|
4257
|
+
aspectRatio: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array]),
|
|
4247
4258
|
|
|
4248
4259
|
/** add theme(dark /light/custom color) for storycard */
|
|
4249
|
-
theme:
|
|
4260
|
+
theme: PropTypes__default["default"].string,
|
|
4250
4261
|
|
|
4251
4262
|
/** flip the story card mobile design horizontal */
|
|
4252
|
-
isHorizontalMobile:
|
|
4263
|
+
isHorizontalMobile: PropTypes__default["default"].bool,
|
|
4253
4264
|
// make content center align in desktop and left align in mobile
|
|
4254
|
-
centerAlign:
|
|
4255
|
-
headerLevel:
|
|
4256
|
-
borderColor:
|
|
4265
|
+
centerAlign: PropTypes__default["default"].bool,
|
|
4266
|
+
headerLevel: PropTypes__default["default"].string,
|
|
4267
|
+
borderColor: PropTypes__default["default"].string,
|
|
4257
4268
|
// handle author image through storycard
|
|
4258
|
-
hideAuthorImage:
|
|
4269
|
+
hideAuthorImage: PropTypes__default["default"].bool,
|
|
4259
4270
|
// handle author prefix through storycard
|
|
4260
|
-
prefix:
|
|
4261
|
-
config:
|
|
4262
|
-
isHorizontalWithImageLast:
|
|
4271
|
+
prefix: PropTypes__default["default"].string,
|
|
4272
|
+
config: PropTypes__default["default"].object,
|
|
4273
|
+
isHorizontalWithImageLast: PropTypes__default["default"].bool
|
|
4263
4274
|
};
|
|
4264
4275
|
StoryCard.defaultProps = {
|
|
4265
4276
|
isHorizontal: false,
|
|
@@ -4275,20 +4286,20 @@ var Loading = function Loading(_ref) {
|
|
|
4275
4286
|
_ref.width;
|
|
4276
4287
|
_ref.height;
|
|
4277
4288
|
_ref.iconColor;
|
|
4278
|
-
return /*#__PURE__*/
|
|
4289
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4279
4290
|
className: "loading-m_loading-indicator__2Dlst"
|
|
4280
|
-
}, /*#__PURE__*/
|
|
4291
|
+
}, /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
4281
4292
|
width: "40",
|
|
4282
4293
|
height: "40",
|
|
4283
4294
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4284
4295
|
viewBox: "0 0 100 100",
|
|
4285
4296
|
preserveAspectRatio: "xMidYMid"
|
|
4286
|
-
}, /*#__PURE__*/
|
|
4297
|
+
}, /*#__PURE__*/React__default["default"].createElement("circle", {
|
|
4287
4298
|
cx: "84",
|
|
4288
4299
|
cy: "50",
|
|
4289
4300
|
r: "0",
|
|
4290
4301
|
fill: "currentColor"
|
|
4291
|
-
}, /*#__PURE__*/
|
|
4302
|
+
}, /*#__PURE__*/React__default["default"].createElement("animate", {
|
|
4292
4303
|
attributeName: "r",
|
|
4293
4304
|
values: "10;0;0;0;0",
|
|
4294
4305
|
keyTimes: "0;0.25;0.5;0.75;1",
|
|
@@ -4297,7 +4308,7 @@ var Loading = function Loading(_ref) {
|
|
|
4297
4308
|
dur: "2s",
|
|
4298
4309
|
repeatCount: "indefinite",
|
|
4299
4310
|
begin: "0s"
|
|
4300
|
-
}), /*#__PURE__*/
|
|
4311
|
+
}), /*#__PURE__*/React__default["default"].createElement("animate", {
|
|
4301
4312
|
attributeName: "cx",
|
|
4302
4313
|
values: "84;84;84;84;84",
|
|
4303
4314
|
keyTimes: "0;0.25;0.5;0.75;1",
|
|
@@ -4306,12 +4317,12 @@ var Loading = function Loading(_ref) {
|
|
|
4306
4317
|
dur: "2s",
|
|
4307
4318
|
repeatCount: "indefinite",
|
|
4308
4319
|
begin: "0s"
|
|
4309
|
-
})), /*#__PURE__*/
|
|
4320
|
+
})), /*#__PURE__*/React__default["default"].createElement("circle", {
|
|
4310
4321
|
cx: "84",
|
|
4311
4322
|
cy: "50",
|
|
4312
4323
|
r: ".709",
|
|
4313
4324
|
fill: "currentColor"
|
|
4314
|
-
}, /*#__PURE__*/
|
|
4325
|
+
}, /*#__PURE__*/React__default["default"].createElement("animate", {
|
|
4315
4326
|
attributeName: "r",
|
|
4316
4327
|
values: "0;10;10;10;0",
|
|
4317
4328
|
keyTimes: "0;0.25;0.5;0.75;1",
|
|
@@ -4320,7 +4331,7 @@ var Loading = function Loading(_ref) {
|
|
|
4320
4331
|
dur: "2s",
|
|
4321
4332
|
repeatCount: "indefinite",
|
|
4322
4333
|
begin: "-1s"
|
|
4323
|
-
}), /*#__PURE__*/
|
|
4334
|
+
}), /*#__PURE__*/React__default["default"].createElement("animate", {
|
|
4324
4335
|
attributeName: "cx",
|
|
4325
4336
|
values: "16;16;50;84;84",
|
|
4326
4337
|
keyTimes: "0;0.25;0.5;0.75;1",
|
|
@@ -4329,12 +4340,12 @@ var Loading = function Loading(_ref) {
|
|
|
4329
4340
|
dur: "2s",
|
|
4330
4341
|
repeatCount: "indefinite",
|
|
4331
4342
|
begin: "-1s"
|
|
4332
|
-
})), /*#__PURE__*/
|
|
4343
|
+
})), /*#__PURE__*/React__default["default"].createElement("circle", {
|
|
4333
4344
|
cx: "81.59",
|
|
4334
4345
|
cy: "50",
|
|
4335
4346
|
r: "10",
|
|
4336
4347
|
fill: "currentColor"
|
|
4337
|
-
}, /*#__PURE__*/
|
|
4348
|
+
}, /*#__PURE__*/React__default["default"].createElement("animate", {
|
|
4338
4349
|
attributeName: "r",
|
|
4339
4350
|
values: "0;10;10;10;0",
|
|
4340
4351
|
keyTimes: "0;0.25;0.5;0.75;1",
|
|
@@ -4343,7 +4354,7 @@ var Loading = function Loading(_ref) {
|
|
|
4343
4354
|
dur: "2s",
|
|
4344
4355
|
repeatCount: "indefinite",
|
|
4345
4356
|
begin: "-0.5s"
|
|
4346
|
-
}), /*#__PURE__*/
|
|
4357
|
+
}), /*#__PURE__*/React__default["default"].createElement("animate", {
|
|
4347
4358
|
attributeName: "cx",
|
|
4348
4359
|
values: "16;16;50;84;84",
|
|
4349
4360
|
keyTimes: "0;0.25;0.5;0.75;1",
|
|
@@ -4352,12 +4363,12 @@ var Loading = function Loading(_ref) {
|
|
|
4352
4363
|
dur: "2s",
|
|
4353
4364
|
repeatCount: "indefinite",
|
|
4354
4365
|
begin: "-0.5s"
|
|
4355
|
-
})), /*#__PURE__*/
|
|
4366
|
+
})), /*#__PURE__*/React__default["default"].createElement("circle", {
|
|
4356
4367
|
cx: "47.59",
|
|
4357
4368
|
cy: "50",
|
|
4358
4369
|
r: "10",
|
|
4359
4370
|
fill: "currentColor"
|
|
4360
|
-
}, /*#__PURE__*/
|
|
4371
|
+
}, /*#__PURE__*/React__default["default"].createElement("animate", {
|
|
4361
4372
|
attributeName: "r",
|
|
4362
4373
|
values: "0;10;10;10;0",
|
|
4363
4374
|
keyTimes: "0;0.25;0.5;0.75;1",
|
|
@@ -4366,7 +4377,7 @@ var Loading = function Loading(_ref) {
|
|
|
4366
4377
|
dur: "2s",
|
|
4367
4378
|
repeatCount: "indefinite",
|
|
4368
4379
|
begin: "0s"
|
|
4369
|
-
}), /*#__PURE__*/
|
|
4380
|
+
}), /*#__PURE__*/React__default["default"].createElement("animate", {
|
|
4370
4381
|
attributeName: "cx",
|
|
4371
4382
|
values: "16;16;50;84;84",
|
|
4372
4383
|
keyTimes: "0;0.25;0.5;0.75;1",
|
|
@@ -4375,12 +4386,12 @@ var Loading = function Loading(_ref) {
|
|
|
4375
4386
|
dur: "2s",
|
|
4376
4387
|
repeatCount: "indefinite",
|
|
4377
4388
|
begin: "0s"
|
|
4378
|
-
})), /*#__PURE__*/
|
|
4389
|
+
})), /*#__PURE__*/React__default["default"].createElement("circle", {
|
|
4379
4390
|
cx: "16",
|
|
4380
4391
|
cy: "50",
|
|
4381
4392
|
r: "9.291",
|
|
4382
4393
|
fill: "currentColor"
|
|
4383
|
-
}, /*#__PURE__*/
|
|
4394
|
+
}, /*#__PURE__*/React__default["default"].createElement("animate", {
|
|
4384
4395
|
attributeName: "r",
|
|
4385
4396
|
values: "0;0;10;10;10",
|
|
4386
4397
|
keyTimes: "0;0.25;0.5;0.75;1",
|
|
@@ -4389,7 +4400,7 @@ var Loading = function Loading(_ref) {
|
|
|
4389
4400
|
dur: "2s",
|
|
4390
4401
|
repeatCount: "indefinite",
|
|
4391
4402
|
begin: "0s"
|
|
4392
|
-
}), /*#__PURE__*/
|
|
4403
|
+
}), /*#__PURE__*/React__default["default"].createElement("animate", {
|
|
4393
4404
|
attributeName: "cx",
|
|
4394
4405
|
values: "16;16;16;50;84",
|
|
4395
4406
|
keyTimes: "0;0.25;0.5;0.75;1",
|
|
@@ -4401,9 +4412,9 @@ var Loading = function Loading(_ref) {
|
|
|
4401
4412
|
}))));
|
|
4402
4413
|
};
|
|
4403
4414
|
Loading.propTypes = {
|
|
4404
|
-
width:
|
|
4405
|
-
height:
|
|
4406
|
-
iconColor:
|
|
4415
|
+
width: PropTypes__default["default"].object,
|
|
4416
|
+
height: PropTypes__default["default"].object,
|
|
4417
|
+
iconColor: PropTypes__default["default"].object
|
|
4407
4418
|
};
|
|
4408
4419
|
|
|
4409
4420
|
var _styleModuleImportMap = {
|
|
@@ -4448,22 +4459,22 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
|
|
|
4448
4459
|
_config$slotConfig = config.slotConfig,
|
|
4449
4460
|
slotConfig = _config$slotConfig === void 0 ? [] : _config$slotConfig;
|
|
4450
4461
|
|
|
4451
|
-
var _useState = useState([]),
|
|
4462
|
+
var _useState = React.useState([]),
|
|
4452
4463
|
_useState2 = _slicedToArray(_useState, 2),
|
|
4453
4464
|
subCollectionStories = _useState2[0],
|
|
4454
4465
|
handleApiData = _useState2[1];
|
|
4455
4466
|
|
|
4456
|
-
var _useState3 = useState({}),
|
|
4467
|
+
var _useState3 = React.useState({}),
|
|
4457
4468
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
4458
4469
|
cachedStories = _useState4[0],
|
|
4459
4470
|
updateCachedStories = _useState4[1];
|
|
4460
4471
|
|
|
4461
|
-
var _useState5 = useState(0),
|
|
4472
|
+
var _useState5 = React.useState(0),
|
|
4462
4473
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
4463
4474
|
active = _useState6[0],
|
|
4464
4475
|
handleActive = _useState6[1];
|
|
4465
4476
|
|
|
4466
|
-
var _useState7 = useState(true),
|
|
4477
|
+
var _useState7 = React.useState(true),
|
|
4467
4478
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
4468
4479
|
loading = _useState8[0],
|
|
4469
4480
|
handleLoading = _useState8[1];
|
|
@@ -4519,7 +4530,7 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
|
|
|
4519
4530
|
}
|
|
4520
4531
|
|
|
4521
4532
|
_context.next = 7;
|
|
4522
|
-
return
|
|
4533
|
+
return axios__default["default"].get("/api/v1/collections/".concat(id, "?limit=7"));
|
|
4523
4534
|
|
|
4524
4535
|
case 7:
|
|
4525
4536
|
res = _context.sent;
|
|
@@ -4532,7 +4543,7 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
|
|
|
4532
4543
|
|
|
4533
4544
|
case 12:
|
|
4534
4545
|
memoizeStories(id, data);
|
|
4535
|
-
childCollectionItems = collectionToStories(data);
|
|
4546
|
+
childCollectionItems = components.collectionToStories(data);
|
|
4536
4547
|
handleLoading(false);
|
|
4537
4548
|
handleApiData(childCollectionItems);
|
|
4538
4549
|
_context.next = 21;
|
|
@@ -4554,11 +4565,11 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
|
|
|
4554
4565
|
return _fetchSubCollectionData.apply(this, arguments);
|
|
4555
4566
|
}
|
|
4556
4567
|
|
|
4557
|
-
useEffect(function (id) {
|
|
4568
|
+
React.useEffect(function (id) {
|
|
4558
4569
|
fetchSubCollectionData(id);
|
|
4559
4570
|
}, []);
|
|
4560
|
-
var dispatch = useDispatch();
|
|
4561
|
-
var qtConfig = useSelector(function (state) {
|
|
4571
|
+
var dispatch = reactRedux.useDispatch();
|
|
4572
|
+
var qtConfig = reactRedux.useSelector(function (state) {
|
|
4562
4573
|
return get_1(state, ["qt", "config"], {});
|
|
4563
4574
|
});
|
|
4564
4575
|
var url = generateNavigateSlug(getFilteredCollection[active], qtConfig);
|
|
@@ -4572,29 +4583,29 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
|
|
|
4572
4583
|
handleActive(activeIndex);
|
|
4573
4584
|
};
|
|
4574
4585
|
|
|
4575
|
-
return /*#__PURE__*/
|
|
4586
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4576
4587
|
className: "full-width-with-padding arrow-component",
|
|
4577
4588
|
"data-test-id": "astrology-collection",
|
|
4578
4589
|
style: {
|
|
4579
4590
|
backgroundColor: theme,
|
|
4580
4591
|
color: textColor
|
|
4581
4592
|
}
|
|
4582
|
-
}, /*#__PURE__*/
|
|
4593
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4583
4594
|
className: "astrology-collection-m_wrapper__ywsE4"
|
|
4584
|
-
}, /*#__PURE__*/
|
|
4595
|
+
}, /*#__PURE__*/React__default["default"].createElement(CollectionName, {
|
|
4585
4596
|
collection: collection,
|
|
4586
4597
|
collectionNameTemplate: collectionNameTemplate,
|
|
4587
4598
|
collectionNameBorderColor: collectionNameBorderColor
|
|
4588
|
-
}), collection.summary && /*#__PURE__*/
|
|
4599
|
+
}), collection.summary && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4589
4600
|
"data-test-id": "astrology-collection-summary",
|
|
4590
4601
|
className: _getClassName("collection-summary ".concat(textColor), _styleModuleImportMap)
|
|
4591
|
-
}, collection.summary), /*#__PURE__*/
|
|
4602
|
+
}, collection.summary), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4592
4603
|
className: "astrology-collection-m_tab__23HlB",
|
|
4593
4604
|
"data-test-id": "collection-tab"
|
|
4594
|
-
}, /*#__PURE__*/
|
|
4605
|
+
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
4595
4606
|
className: "astrology-collection-m_child-collections__2RMob"
|
|
4596
4607
|
}, getFilteredCollection.map(function (subCollections, index) {
|
|
4597
|
-
return /*#__PURE__*/
|
|
4608
|
+
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
4598
4609
|
key: "tab-".concat(index),
|
|
4599
4610
|
onClick: function onClick(event) {
|
|
4600
4611
|
return openChildCollectionItems(event, index, subCollections.id);
|
|
@@ -4602,32 +4613,32 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
|
|
|
4602
4613
|
"data-test-id": subCollections.name,
|
|
4603
4614
|
className: _getClassName("child-collection ".concat(textColor, " ").concat(index === active ? "open-subchild" : ""), _styleModuleImportMap)
|
|
4604
4615
|
}, subCollections.name);
|
|
4605
|
-
}))), /*#__PURE__*/
|
|
4616
|
+
}))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4606
4617
|
className: _getClassName(isAdWidgetEnabled ? "main-wrapper" : "main-wrapper-container", _styleModuleImportMap)
|
|
4607
|
-
}, /*#__PURE__*/
|
|
4618
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", null, loading ? /*#__PURE__*/React__default["default"].createElement(Loading, null) : /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4608
4619
|
className: "astrology-collection-m_subCollection-stories__2CcHk"
|
|
4609
|
-
}, items.length === 0 && /*#__PURE__*/
|
|
4620
|
+
}, items.length === 0 && /*#__PURE__*/React__default["default"].createElement("p", {
|
|
4610
4621
|
className: "astrology-collection-m_nomore-stories__1Rxb8"
|
|
4611
4622
|
}, "No more stories to load."), items.map(function (story, index) {
|
|
4612
|
-
return /*#__PURE__*/
|
|
4623
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4613
4624
|
className: "astrology-collection-m_card__20FnI",
|
|
4614
4625
|
key: "card-".concat(index)
|
|
4615
|
-
}, /*#__PURE__*/
|
|
4626
|
+
}, /*#__PURE__*/React__default["default"].createElement(StoryCard, {
|
|
4616
4627
|
story: story,
|
|
4617
4628
|
border: border,
|
|
4618
4629
|
theme: theme,
|
|
4619
4630
|
config: config
|
|
4620
|
-
}, /*#__PURE__*/
|
|
4631
|
+
}, /*#__PURE__*/React__default["default"].createElement(HeroImage, {
|
|
4621
4632
|
story: story,
|
|
4622
4633
|
aspectRatio: [[1, 1]]
|
|
4623
|
-
}), /*#__PURE__*/
|
|
4634
|
+
}), /*#__PURE__*/React__default["default"].createElement(Headline, {
|
|
4624
4635
|
story: story,
|
|
4625
4636
|
headerLevel: 6,
|
|
4626
4637
|
premiumStoryIconConfig: config
|
|
4627
4638
|
})));
|
|
4628
|
-
}))), isAdWidgetEnabled && /*#__PURE__*/
|
|
4639
|
+
}))), isAdWidgetEnabled && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4629
4640
|
className: "astrology-collection-m_ads__2XMEk"
|
|
4630
|
-
}, " ", adWidgetSlot)), items.length >= 12 && /*#__PURE__*/
|
|
4641
|
+
}, " ", adWidgetSlot)), items.length >= 12 && /*#__PURE__*/React__default["default"].createElement(LoadmoreButton, {
|
|
4631
4642
|
collection: getFilteredCollection[active],
|
|
4632
4643
|
template: footerButton,
|
|
4633
4644
|
config: config,
|
|
@@ -4639,16 +4650,16 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
|
|
|
4639
4650
|
};
|
|
4640
4651
|
AstrologyCollectionBase.propTypes = {
|
|
4641
4652
|
/** collection is the array of objects which is returning by API */
|
|
4642
|
-
collection:
|
|
4653
|
+
collection: PropTypes__default["default"].object.isRequired,
|
|
4643
4654
|
|
|
4644
4655
|
/** The config for the Row */
|
|
4645
|
-
config:
|
|
4656
|
+
config: PropTypes__default["default"].shape({
|
|
4646
4657
|
// background color of the row
|
|
4647
|
-
theme:
|
|
4648
|
-
border:
|
|
4649
|
-
collectionNameTemplate:
|
|
4650
|
-
footerButton:
|
|
4651
|
-
collectionNameBorderColor:
|
|
4658
|
+
theme: PropTypes__default["default"].string,
|
|
4659
|
+
border: PropTypes__default["default"].string,
|
|
4660
|
+
collectionNameTemplate: PropTypes__default["default"].string,
|
|
4661
|
+
footerButton: PropTypes__default["default"].string,
|
|
4662
|
+
collectionNameBorderColor: PropTypes__default["default"].string
|
|
4652
4663
|
})
|
|
4653
4664
|
};
|
|
4654
4665
|
AstrologyCollectionBase.defaultProps = {
|
|
@@ -4658,4 +4669,5 @@ AstrologyCollectionBase.defaultProps = {
|
|
|
4658
4669
|
};
|
|
4659
4670
|
var AstrologyCollection = StateProvider(AstrologyCollectionBase);
|
|
4660
4671
|
|
|
4661
|
-
|
|
4672
|
+
exports.AstrologyCollection = AstrologyCollection;
|
|
4673
|
+
exports.AstrologyCollectionBase = AstrologyCollectionBase;
|