@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,9 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var PropTypes = require('prop-types');
|
|
7
|
+
var components = require('@quintype/components');
|
|
8
|
+
var Timeago = require('react-timeago');
|
|
9
|
+
var dateFnsTz = require('date-fns-tz');
|
|
10
|
+
var reactRedux = require('react-redux');
|
|
11
|
+
|
|
12
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
|
+
|
|
14
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
|
+
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
16
|
+
var Timeago__default = /*#__PURE__*/_interopDefaultLegacy(Timeago);
|
|
7
17
|
|
|
8
18
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
9
19
|
|
|
@@ -156,9 +166,9 @@ exports["default"] = _default;
|
|
|
156
166
|
|
|
157
167
|
var _getClassName = /*@__PURE__*/getDefaultExportFromCjs(getClassName);
|
|
158
168
|
|
|
159
|
-
var StateContext = /*#__PURE__*/createContext(); // eslint-disable-next-line react/display-name
|
|
169
|
+
var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
|
|
160
170
|
var useStateValue = function useStateValue() {
|
|
161
|
-
return useContext(StateContext);
|
|
171
|
+
return React.useContext(StateContext);
|
|
162
172
|
};
|
|
163
173
|
|
|
164
174
|
/**
|
|
@@ -2635,15 +2645,15 @@ var isEmpty = function isEmpty(value) {
|
|
|
2635
2645
|
return value == null || // From standard.js: Always use === - but value == null is allowed to check null || undefined
|
|
2636
2646
|
_typeof(value) === "object" && Object.entries(value).length === 0 && value.constructor === Object || typeof value === "string" && value.trim().length === 0;
|
|
2637
2647
|
};
|
|
2638
|
-
|
|
2639
|
-
"sketches-host":
|
|
2640
|
-
"cdn-name":
|
|
2641
|
-
"cdn-image":
|
|
2648
|
+
PropTypes__default["default"].shape({
|
|
2649
|
+
"sketches-host": PropTypes__default["default"].string,
|
|
2650
|
+
"cdn-name": PropTypes__default["default"].string,
|
|
2651
|
+
"cdn-image": PropTypes__default["default"].string
|
|
2642
2652
|
});
|
|
2643
|
-
|
|
2644
|
-
headline:
|
|
2645
|
-
"last-published-at":
|
|
2646
|
-
subheadline:
|
|
2653
|
+
PropTypes__default["default"].shape({
|
|
2654
|
+
headline: PropTypes__default["default"].string,
|
|
2655
|
+
"last-published-at": PropTypes__default["default"].number,
|
|
2656
|
+
subheadline: PropTypes__default["default"].string
|
|
2647
2657
|
});
|
|
2648
2658
|
var getStoryUrl = function getStoryUrl(story) {
|
|
2649
2659
|
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
|
|
@@ -2655,17 +2665,17 @@ var getTimeStamp = function getTimeStamp(date, _formatter) {
|
|
|
2655
2665
|
var timezone = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
|
|
2656
2666
|
|
|
2657
2667
|
if (timezone && template === "story") {
|
|
2658
|
-
var zonedTime = timezone && utcToZonedTime(date, timezone);
|
|
2659
|
-
var formatZonedTime = zonedTime && format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", {
|
|
2668
|
+
var zonedTime = timezone && dateFnsTz.utcToZonedTime(date, timezone);
|
|
2669
|
+
var formatZonedTime = zonedTime && dateFnsTz.format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", {
|
|
2660
2670
|
timeZone: timezone
|
|
2661
2671
|
});
|
|
2662
2672
|
var timeStamp = timestampToFormat("", "", "", date, config);
|
|
2663
|
-
return /*#__PURE__*/
|
|
2673
|
+
return /*#__PURE__*/React__default["default"].createElement("time", {
|
|
2664
2674
|
dateTime: formatZonedTime
|
|
2665
2675
|
}, timeStamp);
|
|
2666
2676
|
}
|
|
2667
2677
|
|
|
2668
|
-
return /*#__PURE__*/
|
|
2678
|
+
return /*#__PURE__*/React__default["default"].createElement(Timeago__default["default"], {
|
|
2669
2679
|
date: date,
|
|
2670
2680
|
formatter: function formatter(value, unit, suffix, date) {
|
|
2671
2681
|
return _formatter(value, unit, suffix, date, config);
|
|
@@ -2679,7 +2689,7 @@ var CrownIcon = function CrownIcon(_ref) {
|
|
|
2679
2689
|
_ref$color = _ref.color,
|
|
2680
2690
|
color = _ref$color === void 0 ? "#D8D8D8" : _ref$color,
|
|
2681
2691
|
positionTop = _ref.positionTop;
|
|
2682
|
-
return /*#__PURE__*/
|
|
2692
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
2683
2693
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2684
2694
|
width: width,
|
|
2685
2695
|
height: height,
|
|
@@ -2688,28 +2698,28 @@ var CrownIcon = function CrownIcon(_ref) {
|
|
|
2688
2698
|
position: "relative",
|
|
2689
2699
|
top: positionTop
|
|
2690
2700
|
}
|
|
2691
|
-
}, /*#__PURE__*/
|
|
2701
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
2692
2702
|
fill: "none",
|
|
2693
2703
|
fillRule: "evenodd",
|
|
2694
2704
|
stroke: "none",
|
|
2695
2705
|
strokeWidth: "1"
|
|
2696
|
-
}, /*#__PURE__*/
|
|
2706
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
2697
2707
|
transform: "translate(8 8)"
|
|
2698
|
-
}, /*#__PURE__*/
|
|
2708
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
2699
2709
|
d: "M0 0H24V24H0z"
|
|
2700
|
-
}), /*#__PURE__*/
|
|
2710
|
+
}), /*#__PURE__*/React__default["default"].createElement("g", {
|
|
2701
2711
|
fill: color,
|
|
2702
2712
|
fillRule: "nonzero",
|
|
2703
2713
|
transform: "translate(0 2)"
|
|
2704
|
-
}, /*#__PURE__*/
|
|
2714
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
2705
2715
|
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"
|
|
2706
2716
|
}))))));
|
|
2707
2717
|
};
|
|
2708
2718
|
CrownIcon.propTypes = {
|
|
2709
|
-
height:
|
|
2710
|
-
width:
|
|
2711
|
-
color:
|
|
2712
|
-
positionTop:
|
|
2719
|
+
height: PropTypes__default["default"].string,
|
|
2720
|
+
width: PropTypes__default["default"].string,
|
|
2721
|
+
color: PropTypes__default["default"].string,
|
|
2722
|
+
positionTop: PropTypes__default["default"].string
|
|
2713
2723
|
};
|
|
2714
2724
|
|
|
2715
2725
|
var KeyIcon = function KeyIcon(_ref) {
|
|
@@ -2718,7 +2728,7 @@ var KeyIcon = function KeyIcon(_ref) {
|
|
|
2718
2728
|
_ref$color = _ref.color,
|
|
2719
2729
|
color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
|
|
2720
2730
|
positionTop = _ref.positionTop;
|
|
2721
|
-
return /*#__PURE__*/
|
|
2731
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
2722
2732
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2723
2733
|
width: width,
|
|
2724
2734
|
height: height,
|
|
@@ -2727,16 +2737,16 @@ var KeyIcon = function KeyIcon(_ref) {
|
|
|
2727
2737
|
position: "relative",
|
|
2728
2738
|
top: positionTop
|
|
2729
2739
|
}
|
|
2730
|
-
}, /*#__PURE__*/
|
|
2740
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
2731
2741
|
fill: "none",
|
|
2732
2742
|
fillRule: "evenodd",
|
|
2733
2743
|
stroke: "none",
|
|
2734
2744
|
strokeWidth: "1"
|
|
2735
|
-
}, /*#__PURE__*/
|
|
2745
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
2736
2746
|
transform: "translate(8 8)"
|
|
2737
|
-
}, /*#__PURE__*/
|
|
2747
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
2738
2748
|
d: "M0 0H24V24H0z"
|
|
2739
|
-
}), /*#__PURE__*/
|
|
2749
|
+
}), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
2740
2750
|
fill: color,
|
|
2741
2751
|
fillRule: "nonzero",
|
|
2742
2752
|
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",
|
|
@@ -2744,10 +2754,10 @@ var KeyIcon = function KeyIcon(_ref) {
|
|
|
2744
2754
|
})))));
|
|
2745
2755
|
};
|
|
2746
2756
|
KeyIcon.propTypes = {
|
|
2747
|
-
height:
|
|
2748
|
-
width:
|
|
2749
|
-
color:
|
|
2750
|
-
positionTop:
|
|
2757
|
+
height: PropTypes__default["default"].string,
|
|
2758
|
+
width: PropTypes__default["default"].string,
|
|
2759
|
+
color: PropTypes__default["default"].string,
|
|
2760
|
+
positionTop: PropTypes__default["default"].string
|
|
2751
2761
|
};
|
|
2752
2762
|
|
|
2753
2763
|
var LockIcon = function LockIcon(_ref) {
|
|
@@ -2756,7 +2766,7 @@ var LockIcon = function LockIcon(_ref) {
|
|
|
2756
2766
|
_ref$color = _ref.color,
|
|
2757
2767
|
color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
|
|
2758
2768
|
positionTop = _ref.positionTop;
|
|
2759
|
-
return /*#__PURE__*/
|
|
2769
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
2760
2770
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2761
2771
|
width: width,
|
|
2762
2772
|
height: height,
|
|
@@ -2765,28 +2775,28 @@ var LockIcon = function LockIcon(_ref) {
|
|
|
2765
2775
|
position: "relative",
|
|
2766
2776
|
top: positionTop
|
|
2767
2777
|
}
|
|
2768
|
-
}, /*#__PURE__*/
|
|
2778
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
2769
2779
|
fill: "none",
|
|
2770
2780
|
fillRule: "evenodd",
|
|
2771
2781
|
stroke: "none",
|
|
2772
2782
|
strokeWidth: "1"
|
|
2773
|
-
}, /*#__PURE__*/
|
|
2783
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
2774
2784
|
transform: "translate(8 8)"
|
|
2775
|
-
}, /*#__PURE__*/
|
|
2785
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
2776
2786
|
d: "M0 0H24V24H0z"
|
|
2777
|
-
}), /*#__PURE__*/
|
|
2787
|
+
}), /*#__PURE__*/React__default["default"].createElement("g", {
|
|
2778
2788
|
fill: color,
|
|
2779
2789
|
fillRule: "nonzero",
|
|
2780
2790
|
transform: "translate(3)"
|
|
2781
|
-
}, /*#__PURE__*/
|
|
2791
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
2782
2792
|
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"
|
|
2783
2793
|
}))))));
|
|
2784
2794
|
};
|
|
2785
2795
|
LockIcon.propTypes = {
|
|
2786
|
-
height:
|
|
2787
|
-
width:
|
|
2788
|
-
color:
|
|
2789
|
-
positionTop:
|
|
2796
|
+
height: PropTypes__default["default"].string,
|
|
2797
|
+
width: PropTypes__default["default"].string,
|
|
2798
|
+
color: PropTypes__default["default"].string,
|
|
2799
|
+
positionTop: PropTypes__default["default"].string
|
|
2790
2800
|
};
|
|
2791
2801
|
|
|
2792
2802
|
var StarIcon = function StarIcon(_ref) {
|
|
@@ -2796,7 +2806,7 @@ var StarIcon = function StarIcon(_ref) {
|
|
|
2796
2806
|
color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
|
|
2797
2807
|
_ref$positionTop = _ref.positionTop,
|
|
2798
2808
|
positionTop = _ref$positionTop === void 0 ? "" : _ref$positionTop;
|
|
2799
|
-
return /*#__PURE__*/
|
|
2809
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
2800
2810
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2801
2811
|
width: width,
|
|
2802
2812
|
height: height,
|
|
@@ -2805,21 +2815,21 @@ var StarIcon = function StarIcon(_ref) {
|
|
|
2805
2815
|
position: "relative",
|
|
2806
2816
|
top: positionTop
|
|
2807
2817
|
}
|
|
2808
|
-
}, /*#__PURE__*/
|
|
2818
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
2809
2819
|
fill: "none",
|
|
2810
2820
|
fillRule: "evenodd",
|
|
2811
2821
|
stroke: "none",
|
|
2812
2822
|
strokeWidth: "1"
|
|
2813
|
-
}, /*#__PURE__*/
|
|
2823
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
2814
2824
|
fill: color,
|
|
2815
2825
|
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"
|
|
2816
2826
|
}))));
|
|
2817
2827
|
};
|
|
2818
2828
|
StarIcon.propTypes = {
|
|
2819
|
-
height:
|
|
2820
|
-
width:
|
|
2821
|
-
color:
|
|
2822
|
-
positionTop:
|
|
2829
|
+
height: PropTypes__default["default"].string,
|
|
2830
|
+
width: PropTypes__default["default"].string,
|
|
2831
|
+
color: PropTypes__default["default"].string,
|
|
2832
|
+
positionTop: PropTypes__default["default"].string
|
|
2823
2833
|
};
|
|
2824
2834
|
|
|
2825
2835
|
var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
|
|
@@ -2831,7 +2841,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
|
|
|
2831
2841
|
|
|
2832
2842
|
switch (iconType) {
|
|
2833
2843
|
case "crown":
|
|
2834
|
-
return /*#__PURE__*/
|
|
2844
|
+
return /*#__PURE__*/React__default["default"].createElement(CrownIcon, {
|
|
2835
2845
|
width: width,
|
|
2836
2846
|
height: height,
|
|
2837
2847
|
color: color,
|
|
@@ -2839,7 +2849,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
|
|
|
2839
2849
|
});
|
|
2840
2850
|
|
|
2841
2851
|
case "lock":
|
|
2842
|
-
return /*#__PURE__*/
|
|
2852
|
+
return /*#__PURE__*/React__default["default"].createElement(LockIcon, {
|
|
2843
2853
|
width: width,
|
|
2844
2854
|
height: height,
|
|
2845
2855
|
color: color,
|
|
@@ -2847,7 +2857,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
|
|
|
2847
2857
|
});
|
|
2848
2858
|
|
|
2849
2859
|
case "key":
|
|
2850
|
-
return /*#__PURE__*/
|
|
2860
|
+
return /*#__PURE__*/React__default["default"].createElement(KeyIcon, {
|
|
2851
2861
|
width: width,
|
|
2852
2862
|
height: height,
|
|
2853
2863
|
color: color,
|
|
@@ -2855,7 +2865,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
|
|
|
2855
2865
|
});
|
|
2856
2866
|
|
|
2857
2867
|
default:
|
|
2858
|
-
return /*#__PURE__*/
|
|
2868
|
+
return /*#__PURE__*/React__default["default"].createElement(StarIcon, {
|
|
2859
2869
|
width: width,
|
|
2860
2870
|
height: height,
|
|
2861
2871
|
color: color,
|
|
@@ -2864,21 +2874,21 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
|
|
|
2864
2874
|
}
|
|
2865
2875
|
};
|
|
2866
2876
|
PremiumStoryIcon.propTypes = {
|
|
2867
|
-
width:
|
|
2868
|
-
height:
|
|
2869
|
-
color:
|
|
2870
|
-
iconType:
|
|
2871
|
-
positionTop:
|
|
2877
|
+
width: PropTypes__default["default"].string,
|
|
2878
|
+
height: PropTypes__default["default"].string,
|
|
2879
|
+
color: PropTypes__default["default"].string,
|
|
2880
|
+
iconType: PropTypes__default["default"].string,
|
|
2881
|
+
positionTop: PropTypes__default["default"].string
|
|
2872
2882
|
};
|
|
2873
2883
|
|
|
2874
2884
|
function LiveIcon() {
|
|
2875
|
-
return /*#__PURE__*/
|
|
2885
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
2876
2886
|
className: "live-icon",
|
|
2877
2887
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2878
2888
|
width: "25",
|
|
2879
2889
|
height: "24",
|
|
2880
2890
|
viewBox: "0 0 25 24"
|
|
2881
|
-
}, /*#__PURE__*/
|
|
2891
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
2882
2892
|
fill: "#ff5858",
|
|
2883
2893
|
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"
|
|
2884
2894
|
}));
|
|
@@ -2935,37 +2945,37 @@ var Headline = function Headline(_ref) {
|
|
|
2935
2945
|
var wrapperClass = premiumStory ? "wrapper" : "";
|
|
2936
2946
|
var iconSize = "24px";
|
|
2937
2947
|
var enableLiveIcon = showLiveIcon && story["story-template"] === "live-blog" && !get_1(story, ["metadata", "is-closed"], false);
|
|
2938
|
-
return /*#__PURE__*/
|
|
2948
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
2939
2949
|
"data-test-id": "headline",
|
|
2940
2950
|
className: "arrow-component arr--headline " + _getClassName(wrapperClass, _styleModuleImportMap$a)
|
|
2941
|
-
}, premiumStory && /*#__PURE__*/
|
|
2951
|
+
}, premiumStory && /*#__PURE__*/React__default["default"].createElement(PremiumStoryIcon, {
|
|
2942
2952
|
width: iconSize,
|
|
2943
2953
|
height: iconSize,
|
|
2944
2954
|
color: iconColor,
|
|
2945
2955
|
iconType: iconStyle,
|
|
2946
2956
|
positionTop: positionHeadline()
|
|
2947
|
-
}), isLink ? /*#__PURE__*/
|
|
2957
|
+
}), isLink ? /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
2948
2958
|
href: getStoryUrl(story, "/".concat(story.slug)),
|
|
2949
2959
|
externalLink: isExternalStory(story),
|
|
2950
2960
|
"aria-label": "headline"
|
|
2951
|
-
}, /*#__PURE__*/
|
|
2961
|
+
}, /*#__PURE__*/React__default["default"].createElement(HeaderTag, {
|
|
2952
2962
|
className: _getClassName("headline ".concat(textColor), _styleModuleImportMap$a)
|
|
2953
|
-
}, enableLiveIcon && /*#__PURE__*/
|
|
2963
|
+
}, enableLiveIcon && /*#__PURE__*/React__default["default"].createElement(LiveIcon, null), headline)) : /*#__PURE__*/React__default["default"].createElement(HeaderTag, {
|
|
2954
2964
|
className: _getClassName("headline ".concat(textColor), _styleModuleImportMap$a)
|
|
2955
|
-
}, enableLiveIcon && /*#__PURE__*/
|
|
2965
|
+
}, enableLiveIcon && /*#__PURE__*/React__default["default"].createElement(LiveIcon, null), headline));
|
|
2956
2966
|
};
|
|
2957
2967
|
Headline.propTypes = {
|
|
2958
2968
|
/** The Story Object from the API response */
|
|
2959
|
-
story:
|
|
2969
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
2960
2970
|
|
|
2961
2971
|
/** Header tags ranging h1-h6, where h[headerLevel] */
|
|
2962
|
-
headerLevel:
|
|
2963
|
-
premiumStoryIconConfig:
|
|
2964
|
-
iconColor:
|
|
2965
|
-
iconType:
|
|
2966
|
-
enablePremiumStoryIcon:
|
|
2972
|
+
headerLevel: PropTypes__default["default"].string,
|
|
2973
|
+
premiumStoryIconConfig: PropTypes__default["default"].shape({
|
|
2974
|
+
iconColor: PropTypes__default["default"].string,
|
|
2975
|
+
iconType: PropTypes__default["default"].string,
|
|
2976
|
+
enablePremiumStoryIcon: PropTypes__default["default"].bool
|
|
2967
2977
|
}),
|
|
2968
|
-
isLink:
|
|
2978
|
+
isLink: PropTypes__default["default"].bool
|
|
2969
2979
|
};
|
|
2970
2980
|
Headline.defaultProps = {
|
|
2971
2981
|
headerLevel: "6",
|
|
@@ -2992,7 +3002,7 @@ var Subheadline = function Subheadline(_ref) {
|
|
|
2992
3002
|
var subheadline = forceShowAtom || get_1(config, ["showSubheadline"], true);
|
|
2993
3003
|
if (!subheadline) return null;
|
|
2994
3004
|
var textColor = getTextColor(config.theme);
|
|
2995
|
-
return /*#__PURE__*/
|
|
3005
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
2996
3006
|
style: {
|
|
2997
3007
|
WebkitLineClamp: lineClamp
|
|
2998
3008
|
},
|
|
@@ -3002,15 +3012,15 @@ var Subheadline = function Subheadline(_ref) {
|
|
|
3002
3012
|
};
|
|
3003
3013
|
Subheadline.propTypes = {
|
|
3004
3014
|
/** The Story Object from the API response */
|
|
3005
|
-
story:
|
|
3015
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
3006
3016
|
// Restricts the number of lines for subheadline.
|
|
3007
|
-
lineClamp:
|
|
3017
|
+
lineClamp: PropTypes__default["default"].number,
|
|
3008
3018
|
|
|
3009
3019
|
/** Number of characters to truncate the subheadline */
|
|
3010
|
-
truncateChars:
|
|
3011
|
-
clazzName:
|
|
3012
|
-
forceShowAtom:
|
|
3013
|
-
showFullContent:
|
|
3020
|
+
truncateChars: PropTypes__default["default"].number,
|
|
3021
|
+
clazzName: PropTypes__default["default"].string,
|
|
3022
|
+
forceShowAtom: PropTypes__default["default"].bool,
|
|
3023
|
+
showFullContent: PropTypes__default["default"].bool
|
|
3014
3024
|
};
|
|
3015
3025
|
Subheadline.defaultProps = {
|
|
3016
3026
|
forceShowAtom: false,
|
|
@@ -3036,18 +3046,18 @@ var TimeStamp = function TimeStamp(_ref) {
|
|
|
3036
3046
|
var time = story["last-published-at"] || story["first-published-at"];
|
|
3037
3047
|
var isBottomClasses = isBottom ? "bottom-fix" : "";
|
|
3038
3048
|
var textColor = getTextColor(configState.theme);
|
|
3039
|
-
return /*#__PURE__*/
|
|
3049
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isTime && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3040
3050
|
"data-test-id": "publish-time",
|
|
3041
3051
|
className: "time arr--publish-time " + _getClassName("time ".concat(textColor, " ").concat(isBottomClasses), _styleModuleImportMap$8)
|
|
3042
|
-
}, /*#__PURE__*/
|
|
3052
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3043
3053
|
className: "timestamp-m_time-wrapper__3O2lM"
|
|
3044
3054
|
}, getTimeStamp(time, formatter, config))));
|
|
3045
3055
|
};
|
|
3046
3056
|
TimeStamp.propTypes = {
|
|
3047
3057
|
/** The Story Object from the API response */
|
|
3048
|
-
story:
|
|
3049
|
-
isBottom:
|
|
3050
|
-
config:
|
|
3058
|
+
story: PropTypes__default["default"].object,
|
|
3059
|
+
isBottom: PropTypes__default["default"].bool,
|
|
3060
|
+
config: PropTypes__default["default"].object
|
|
3051
3061
|
};
|
|
3052
3062
|
|
|
3053
3063
|
var _styleModuleImportMap$7 = {
|
|
@@ -3090,10 +3100,10 @@ var AuthorBase = function AuthorBase(_ref) {
|
|
|
3090
3100
|
return null;
|
|
3091
3101
|
}
|
|
3092
3102
|
|
|
3093
|
-
return /*#__PURE__*/
|
|
3103
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3094
3104
|
"data-test-id": "author-image",
|
|
3095
3105
|
className: _getClassName("author-image ".concat(dir, "-image"), _styleModuleImportMap$7)
|
|
3096
|
-
}, /*#__PURE__*/
|
|
3106
|
+
}, /*#__PURE__*/React__default["default"].createElement("figure", null, avatarS3Key ? /*#__PURE__*/React__default["default"].createElement(components.ResponsiveImage, {
|
|
3097
3107
|
slug: avatarS3Key,
|
|
3098
3108
|
"aspect-ratio": [1, 1],
|
|
3099
3109
|
defaultWidth: 400,
|
|
@@ -3101,14 +3111,14 @@ var AuthorBase = function AuthorBase(_ref) {
|
|
|
3101
3111
|
auto: ["format", "compress"]
|
|
3102
3112
|
},
|
|
3103
3113
|
alt: authorName
|
|
3104
|
-
}) : /*#__PURE__*/
|
|
3114
|
+
}) : /*#__PURE__*/React__default["default"].createElement("img", {
|
|
3105
3115
|
src: avatarUrl
|
|
3106
3116
|
})));
|
|
3107
3117
|
};
|
|
3108
3118
|
|
|
3109
3119
|
var isPrefix = function isPrefix(dir) {
|
|
3110
3120
|
if (prefix) {
|
|
3111
|
-
return /*#__PURE__*/
|
|
3121
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3112
3122
|
className: "arr-author-prefix " + _getClassName("prefix ".concat(textColor), _styleModuleImportMap$7)
|
|
3113
3123
|
}, prefix);
|
|
3114
3124
|
}
|
|
@@ -3116,11 +3126,11 @@ var AuthorBase = function AuthorBase(_ref) {
|
|
|
3116
3126
|
return !hideAuthorImage && authorImage(dir);
|
|
3117
3127
|
};
|
|
3118
3128
|
|
|
3119
|
-
return /*#__PURE__*/
|
|
3129
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isAuthor && /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
3120
3130
|
href: "".concat(mountAt, "/author/") + slug,
|
|
3121
3131
|
"aria-label": "author-name",
|
|
3122
3132
|
className: "author-name arr-author-name arrow-component " + _getClassName("author ".concat(isBottomClasses), _styleModuleImportMap$7)
|
|
3123
|
-
}, isPrefix("ltr"), /*#__PURE__*/
|
|
3133
|
+
}, isPrefix("ltr"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3124
3134
|
"data-test-id": "author-name",
|
|
3125
3135
|
className: "author-name " + _getClassName("author-name ".concat(textColor), _styleModuleImportMap$7)
|
|
3126
3136
|
}, authorName || story["author-name"]), !prefix && isPrefix("rtl")));
|
|
@@ -3132,18 +3142,18 @@ function mapStateToProps(state) {
|
|
|
3132
3142
|
};
|
|
3133
3143
|
}
|
|
3134
3144
|
|
|
3135
|
-
var Author = connect(mapStateToProps)(AuthorBase);
|
|
3145
|
+
var Author = reactRedux.connect(mapStateToProps)(AuthorBase);
|
|
3136
3146
|
AuthorBase.propTypes = {
|
|
3137
3147
|
/** The Story Object from the API response */
|
|
3138
|
-
story:
|
|
3148
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
3139
3149
|
|
|
3140
3150
|
/** Hide Author Avatar Image */
|
|
3141
|
-
hideAuthorImage:
|
|
3151
|
+
hideAuthorImage: PropTypes__default["default"].bool,
|
|
3142
3152
|
// fix Author bottom of the storyCard
|
|
3143
|
-
isBottom:
|
|
3153
|
+
isBottom: PropTypes__default["default"].bool,
|
|
3144
3154
|
// fix prefix before the author name
|
|
3145
|
-
prefix:
|
|
3146
|
-
config:
|
|
3155
|
+
prefix: PropTypes__default["default"].string,
|
|
3156
|
+
config: PropTypes__default["default"].object
|
|
3147
3157
|
};
|
|
3148
3158
|
AuthorBase.defaultProps = {
|
|
3149
3159
|
hideAuthorImage: false,
|
|
@@ -3164,14 +3174,14 @@ var Dot = function Dot(_ref) {
|
|
|
3164
3174
|
height = _ref$height === void 0 ? "3px" : _ref$height,
|
|
3165
3175
|
_ref$color = _ref.color,
|
|
3166
3176
|
color = _ref$color === void 0 ? "light" : _ref$color;
|
|
3167
|
-
return /*#__PURE__*/
|
|
3177
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3168
3178
|
className: _getClassName(color, _styleModuleImportMap$6)
|
|
3169
|
-
}, /*#__PURE__*/
|
|
3179
|
+
}, /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
3170
3180
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3171
3181
|
width: width,
|
|
3172
3182
|
height: height,
|
|
3173
3183
|
viewBox: "0 0 3 3"
|
|
3174
|
-
}, /*#__PURE__*/
|
|
3184
|
+
}, /*#__PURE__*/React__default["default"].createElement("circle", {
|
|
3175
3185
|
cx: "87",
|
|
3176
3186
|
cy: "9",
|
|
3177
3187
|
r: "1",
|
|
@@ -3182,9 +3192,9 @@ var Dot = function Dot(_ref) {
|
|
|
3182
3192
|
};
|
|
3183
3193
|
Dot.propTypes = {
|
|
3184
3194
|
/** height , width and color of the dot icon */
|
|
3185
|
-
color:
|
|
3186
|
-
width:
|
|
3187
|
-
height:
|
|
3195
|
+
color: PropTypes__default["default"].string,
|
|
3196
|
+
width: PropTypes__default["default"].string,
|
|
3197
|
+
height: PropTypes__default["default"].string
|
|
3188
3198
|
};
|
|
3189
3199
|
|
|
3190
3200
|
var _styleModuleImportMap$5 = {
|
|
@@ -3200,22 +3210,22 @@ var Divider = function Divider(_ref) {
|
|
|
3200
3210
|
height = _ref$height === void 0 ? "10" : _ref$height,
|
|
3201
3211
|
_ref$color = _ref.color,
|
|
3202
3212
|
color = _ref$color === void 0 ? "light" : _ref$color;
|
|
3203
|
-
return /*#__PURE__*/
|
|
3213
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3204
3214
|
className: _getClassName(color, _styleModuleImportMap$5)
|
|
3205
|
-
}, /*#__PURE__*/
|
|
3215
|
+
}, /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
3206
3216
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3207
3217
|
width: width,
|
|
3208
3218
|
height: height
|
|
3209
|
-
}, /*#__PURE__*/
|
|
3219
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3210
3220
|
fill: "inherit",
|
|
3211
3221
|
d: "M0 0h1v10H0z"
|
|
3212
3222
|
})));
|
|
3213
3223
|
};
|
|
3214
3224
|
Divider.propTypes = {
|
|
3215
3225
|
/** height , width and color of the dot icon */
|
|
3216
|
-
color:
|
|
3217
|
-
width:
|
|
3218
|
-
height:
|
|
3226
|
+
color: PropTypes__default["default"].string,
|
|
3227
|
+
width: PropTypes__default["default"].string,
|
|
3228
|
+
height: PropTypes__default["default"].string
|
|
3219
3229
|
};
|
|
3220
3230
|
|
|
3221
3231
|
var _styleModuleImportMap$4 = {
|
|
@@ -3238,23 +3248,23 @@ var ReadTime = function ReadTime(_ref) {
|
|
|
3238
3248
|
var textColor = isLightTheme ? "light" : getTextColor(config.theme);
|
|
3239
3249
|
if (!showReadTime || !readTime) return null;
|
|
3240
3250
|
var timeToRead = get_1(opts, ["localizedTimeToRead"]) || "min read";
|
|
3241
|
-
return /*#__PURE__*/
|
|
3251
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3242
3252
|
"data-test-id": "read-time",
|
|
3243
3253
|
className: "arrow-component arr--read-time " + _getClassName("read-time-wrapper ".concat(textColor), _styleModuleImportMap$4)
|
|
3244
|
-
}, /*#__PURE__*/
|
|
3254
|
+
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
3245
3255
|
className: "read-time-indicator read-time-m_dot-indicator__3Sqh2"
|
|
3246
|
-
}, /*#__PURE__*/
|
|
3256
|
+
}, /*#__PURE__*/React__default["default"].createElement(Dot, {
|
|
3247
3257
|
color: textColor
|
|
3248
|
-
})), /*#__PURE__*/
|
|
3258
|
+
})), /*#__PURE__*/React__default["default"].createElement("span", null, readTime, " ", timeToRead)));
|
|
3249
3259
|
};
|
|
3250
3260
|
ReadTime.propTypes = {
|
|
3251
|
-
story:
|
|
3252
|
-
"read-time":
|
|
3261
|
+
story: PropTypes__default["default"].shape({
|
|
3262
|
+
"read-time": PropTypes__default["default"].number
|
|
3253
3263
|
}),
|
|
3254
|
-
opts:
|
|
3255
|
-
showReadTime:
|
|
3264
|
+
opts: PropTypes__default["default"].shape({
|
|
3265
|
+
showReadTime: PropTypes__default["default"].bool
|
|
3256
3266
|
}),
|
|
3257
|
-
isLightTheme:
|
|
3267
|
+
isLightTheme: PropTypes__default["default"].bool
|
|
3258
3268
|
};
|
|
3259
3269
|
|
|
3260
3270
|
var _styleModuleImportMap$3 = {
|
|
@@ -3285,33 +3295,33 @@ var AuthorWithTime = function AuthorWithTime(_ref) {
|
|
|
3285
3295
|
|
|
3286
3296
|
var getSeparator = function getSeparator() {
|
|
3287
3297
|
if (separator === "divider") {
|
|
3288
|
-
return /*#__PURE__*/
|
|
3298
|
+
return /*#__PURE__*/React__default["default"].createElement(Divider, {
|
|
3289
3299
|
color: textColor
|
|
3290
3300
|
});
|
|
3291
3301
|
}
|
|
3292
3302
|
|
|
3293
|
-
return /*#__PURE__*/
|
|
3303
|
+
return /*#__PURE__*/React__default["default"].createElement(Dot, {
|
|
3294
3304
|
color: textColor
|
|
3295
3305
|
});
|
|
3296
3306
|
};
|
|
3297
3307
|
|
|
3298
3308
|
var getTimeStamp = function getTimeStamp() {
|
|
3299
3309
|
if (!isTime) return null;
|
|
3300
|
-
return /*#__PURE__*/
|
|
3310
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isAuthor && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
3301
3311
|
className: "arr-separator " + _getClassName("".concat(seperatorStyle), _styleModuleImportMap$3)
|
|
3302
|
-
}, getSeparator()), /*#__PURE__*/
|
|
3312
|
+
}, getSeparator()), /*#__PURE__*/React__default["default"].createElement(TimeStamp, {
|
|
3303
3313
|
story: story,
|
|
3304
3314
|
config: config
|
|
3305
|
-
}), isReadTime && /*#__PURE__*/
|
|
3315
|
+
}), isReadTime && /*#__PURE__*/React__default["default"].createElement(ReadTime, {
|
|
3306
3316
|
story: story,
|
|
3307
3317
|
opts: config,
|
|
3308
3318
|
isLightTheme: isLightTheme
|
|
3309
3319
|
}));
|
|
3310
3320
|
};
|
|
3311
3321
|
|
|
3312
|
-
return /*#__PURE__*/
|
|
3322
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3313
3323
|
className: "arr--author-time " + _getClassName("author-time-wrapper ".concat(isBottomClasses), _styleModuleImportMap$3)
|
|
3314
|
-
}, isAuthor ? /*#__PURE__*/
|
|
3324
|
+
}, isAuthor ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Author, {
|
|
3315
3325
|
story: story,
|
|
3316
3326
|
isBottom: true,
|
|
3317
3327
|
hideAuthorImage: hideAuthorImage,
|
|
@@ -3319,19 +3329,19 @@ var AuthorWithTime = function AuthorWithTime(_ref) {
|
|
|
3319
3329
|
}), getTimeStamp()) : getTimeStamp());
|
|
3320
3330
|
};
|
|
3321
3331
|
AuthorWithTime.propTypes = {
|
|
3322
|
-
story:
|
|
3332
|
+
story: PropTypes__default["default"].object,
|
|
3323
3333
|
|
|
3324
3334
|
/** Style of separator between the Author & Timestamp */
|
|
3325
|
-
separator:
|
|
3335
|
+
separator: PropTypes__default["default"].oneOf(["dot", "divider"]),
|
|
3326
3336
|
|
|
3327
3337
|
/** hide the author image */
|
|
3328
|
-
hideAuthorImage:
|
|
3338
|
+
hideAuthorImage: PropTypes__default["default"].bool,
|
|
3329
3339
|
// fix author and time at the end
|
|
3330
|
-
isBottom:
|
|
3340
|
+
isBottom: PropTypes__default["default"].bool,
|
|
3331
3341
|
// fix prefix before the author name
|
|
3332
|
-
prefix:
|
|
3333
|
-
config:
|
|
3334
|
-
isLightTheme:
|
|
3342
|
+
prefix: PropTypes__default["default"].string,
|
|
3343
|
+
config: PropTypes__default["default"].object,
|
|
3344
|
+
isLightTheme: PropTypes__default["default"].bool
|
|
3335
3345
|
};
|
|
3336
3346
|
AuthorWithTime.defaultProps = {
|
|
3337
3347
|
separator: "dot",
|
|
@@ -3409,27 +3419,27 @@ var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
|
|
|
3409
3419
|
height = _ref$height === void 0 ? 30 : _ref$height,
|
|
3410
3420
|
_ref$iconColor = _ref.iconColor,
|
|
3411
3421
|
iconColor = _ref$iconColor === void 0 ? "#99B0CB" : _ref$iconColor;
|
|
3412
|
-
return /*#__PURE__*/
|
|
3422
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
3413
3423
|
width: width,
|
|
3414
3424
|
height: height,
|
|
3415
3425
|
viewBox: "0 0 102 76",
|
|
3416
3426
|
version: "1.1"
|
|
3417
|
-
}, /*#__PURE__*/
|
|
3427
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3418
3428
|
id: "demo-home-copy",
|
|
3419
3429
|
stroke: "none",
|
|
3420
3430
|
strokeWidth: "1",
|
|
3421
3431
|
fill: "none",
|
|
3422
3432
|
fillRule: "evenodd",
|
|
3423
3433
|
transform: "translate(-377.000000, -314.000000)"
|
|
3424
|
-
}, /*#__PURE__*/
|
|
3434
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3425
3435
|
id: "Group-13",
|
|
3426
3436
|
transform: "translate(377.000000, 314.000000)"
|
|
3427
|
-
}, /*#__PURE__*/
|
|
3437
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3428
3438
|
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",
|
|
3429
3439
|
id: "Combined-Shape",
|
|
3430
3440
|
fill: iconColor,
|
|
3431
3441
|
fillRule: "nonzero"
|
|
3432
|
-
}), /*#__PURE__*/
|
|
3442
|
+
}), /*#__PURE__*/React__default["default"].createElement("rect", {
|
|
3433
3443
|
id: "Rectangle-19",
|
|
3434
3444
|
stroke: iconColor,
|
|
3435
3445
|
strokeWidth: "3",
|
|
@@ -3441,24 +3451,24 @@ var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
|
|
|
3441
3451
|
}))));
|
|
3442
3452
|
};
|
|
3443
3453
|
ImageFallbackIcon.propTypes = {
|
|
3444
|
-
width:
|
|
3445
|
-
height:
|
|
3446
|
-
iconColor:
|
|
3454
|
+
width: PropTypes__default["default"].object,
|
|
3455
|
+
height: PropTypes__default["default"].object,
|
|
3456
|
+
iconColor: PropTypes__default["default"].object
|
|
3447
3457
|
};
|
|
3448
3458
|
|
|
3449
3459
|
var imageFallback = function imageFallback() {
|
|
3450
|
-
return /*#__PURE__*/
|
|
3460
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3451
3461
|
className: "arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"
|
|
3452
|
-
}, /*#__PURE__*/
|
|
3462
|
+
}, /*#__PURE__*/React__default["default"].createElement("figure", {
|
|
3453
3463
|
className: "arr--fallback-svg fallback-m_fallback-svg__tK9fL"
|
|
3454
|
-
}, /*#__PURE__*/
|
|
3464
|
+
}, /*#__PURE__*/React__default["default"].createElement(ImageFallbackIcon, null)));
|
|
3455
3465
|
};
|
|
3456
3466
|
|
|
3457
3467
|
var FallbackImage = function FallbackImage(_ref) {
|
|
3458
3468
|
var slug = _ref.slug;
|
|
3459
3469
|
|
|
3460
3470
|
if (slug) {
|
|
3461
|
-
return /*#__PURE__*/
|
|
3471
|
+
return /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
3462
3472
|
href: slug,
|
|
3463
3473
|
"aria-label": "image-fallback"
|
|
3464
3474
|
}, imageFallback());
|
|
@@ -3467,23 +3477,23 @@ var FallbackImage = function FallbackImage(_ref) {
|
|
|
3467
3477
|
}
|
|
3468
3478
|
};
|
|
3469
3479
|
FallbackImage.propTypes = {
|
|
3470
|
-
slug:
|
|
3480
|
+
slug: PropTypes__default["default"].string
|
|
3471
3481
|
};
|
|
3472
3482
|
|
|
3473
3483
|
var HyperLinkIcon = function HyperLinkIcon() {
|
|
3474
|
-
return /*#__PURE__*/
|
|
3484
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
3475
3485
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3476
3486
|
width: "36",
|
|
3477
3487
|
height: "28"
|
|
3478
|
-
}, /*#__PURE__*/
|
|
3488
|
+
}, /*#__PURE__*/React__default["default"].createElement("g", {
|
|
3479
3489
|
fill: "none",
|
|
3480
3490
|
fillRule: "evenodd"
|
|
3481
|
-
}, /*#__PURE__*/
|
|
3491
|
+
}, /*#__PURE__*/React__default["default"].createElement("rect", {
|
|
3482
3492
|
width: "36",
|
|
3483
3493
|
height: "28",
|
|
3484
3494
|
fill: "#3D6FCF",
|
|
3485
3495
|
rx: "4"
|
|
3486
|
-
}), /*#__PURE__*/
|
|
3496
|
+
}), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
3487
3497
|
stroke: "#FFF",
|
|
3488
3498
|
strokeLinecap: "round",
|
|
3489
3499
|
strokeLinejoin: "round",
|
|
@@ -3496,16 +3506,16 @@ var HyperLink = function HyperLink(_ref) {
|
|
|
3496
3506
|
var _ref$hyperLink = _ref.hyperLink,
|
|
3497
3507
|
hyperLink = _ref$hyperLink === void 0 ? "" : _ref$hyperLink;
|
|
3498
3508
|
if (!hyperLink) return null;
|
|
3499
|
-
return /*#__PURE__*/
|
|
3509
|
+
return /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
3500
3510
|
href: hyperLink,
|
|
3501
3511
|
"aria-label": "hyperlink-button",
|
|
3502
3512
|
className: "arr--hyperlink-button hyperlink-m_hyperlink-button__1CqWx",
|
|
3503
3513
|
target: "_blank",
|
|
3504
3514
|
rel: "noopener noreferrer"
|
|
3505
|
-
}, /*#__PURE__*/
|
|
3515
|
+
}, /*#__PURE__*/React__default["default"].createElement(HyperLinkIcon, null));
|
|
3506
3516
|
};
|
|
3507
3517
|
HyperLink.propTypes = {
|
|
3508
|
-
hyperLink:
|
|
3518
|
+
hyperLink: PropTypes__default["default"].string
|
|
3509
3519
|
};
|
|
3510
3520
|
|
|
3511
3521
|
var _styleModuleImportMap$2 = {
|
|
@@ -3541,7 +3551,7 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
3541
3551
|
StoryTemplateIcon = _config$StoryTemplate === void 0 ? function () {
|
|
3542
3552
|
return null;
|
|
3543
3553
|
} : _config$StoryTemplate;
|
|
3544
|
-
var showImagePlaceholder = useSelector(function (state) {
|
|
3554
|
+
var showImagePlaceholder = reactRedux.useSelector(function (state) {
|
|
3545
3555
|
return get_1(state, ["qt", "config", "showPlaceholder"]);
|
|
3546
3556
|
});
|
|
3547
3557
|
var getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
|
|
@@ -3577,37 +3587,37 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
3577
3587
|
var fallbackImage = function fallbackImage() {
|
|
3578
3588
|
if (!slug) {
|
|
3579
3589
|
if (fallbackImageUrl && !isStoryPageImage) {
|
|
3580
|
-
return /*#__PURE__*/
|
|
3590
|
+
return /*#__PURE__*/React__default["default"].createElement("figure", {
|
|
3581
3591
|
style: {
|
|
3582
3592
|
paddingTop: imagePadding + "%"
|
|
3583
3593
|
},
|
|
3584
3594
|
className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$2)
|
|
3585
|
-
}, /*#__PURE__*/
|
|
3595
|
+
}, /*#__PURE__*/React__default["default"].createElement("img", {
|
|
3586
3596
|
className: "qt-image",
|
|
3587
3597
|
"data-src": "".concat(fallbackImageUrl),
|
|
3588
3598
|
alt: "image-fallback"
|
|
3589
3599
|
}));
|
|
3590
3600
|
}
|
|
3591
3601
|
|
|
3592
|
-
return /*#__PURE__*/
|
|
3602
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, defaultFallback ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3593
3603
|
"data-test-id": "arr--fallback-hero-image",
|
|
3594
3604
|
style: {
|
|
3595
3605
|
paddingTop: imagePadding + "%"
|
|
3596
3606
|
},
|
|
3597
3607
|
className: "arr--fallback-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$2)
|
|
3598
|
-
}, /*#__PURE__*/
|
|
3608
|
+
}, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
|
|
3599
3609
|
storyTemplate: story["story-template"]
|
|
3600
|
-
}), /*#__PURE__*/
|
|
3610
|
+
}), /*#__PURE__*/React__default["default"].createElement(FallbackImage, null)) : null);
|
|
3601
3611
|
}
|
|
3602
3612
|
|
|
3603
|
-
return /*#__PURE__*/
|
|
3613
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("figure", {
|
|
3604
3614
|
style: {
|
|
3605
3615
|
paddingTop: imagePadding + "%"
|
|
3606
3616
|
},
|
|
3607
3617
|
className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$2)
|
|
3608
|
-
}, /*#__PURE__*/
|
|
3618
|
+
}, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
|
|
3609
3619
|
storyTemplate: story["story-template"]
|
|
3610
|
-
}), /*#__PURE__*/
|
|
3620
|
+
}), /*#__PURE__*/React__default["default"].createElement(components.ResponsiveHeroImage, {
|
|
3611
3621
|
story: story,
|
|
3612
3622
|
aspectRatio: imageAspectRatio,
|
|
3613
3623
|
defaultWidth: defaultWidth,
|
|
@@ -3616,15 +3626,15 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
3616
3626
|
auto: ["format", "compress"],
|
|
3617
3627
|
fit: "max"
|
|
3618
3628
|
}
|
|
3619
|
-
})), isStoryPageImage && hyperLink && /*#__PURE__*/
|
|
3629
|
+
})), isStoryPageImage && hyperLink && /*#__PURE__*/React__default["default"].createElement(HyperLink, {
|
|
3620
3630
|
hyperLink: hyperLink
|
|
3621
3631
|
}));
|
|
3622
3632
|
};
|
|
3623
3633
|
|
|
3624
|
-
return story && (isStoryPageImage ? /*#__PURE__*/
|
|
3634
|
+
return story && (isStoryPageImage ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3625
3635
|
"data-test-id": "arr--hero-image",
|
|
3626
3636
|
className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$2)
|
|
3627
|
-
}, fallbackImage()) : /*#__PURE__*/
|
|
3637
|
+
}, fallbackImage()) : /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
3628
3638
|
"data-test-id": "arr--hero-image",
|
|
3629
3639
|
href: getStoryUrl(story, "/".concat(story.slug)),
|
|
3630
3640
|
externalLink: isExternalStory(story),
|
|
@@ -3634,30 +3644,30 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
3634
3644
|
};
|
|
3635
3645
|
HeroImage.propTypes = {
|
|
3636
3646
|
/** The Story Object from the API response */
|
|
3637
|
-
story:
|
|
3647
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
3638
3648
|
|
|
3639
3649
|
/** Removes the Hero Image padding for the image to bleed over the margin */
|
|
3640
|
-
FullBleed:
|
|
3650
|
+
FullBleed: PropTypes__default["default"].bool,
|
|
3641
3651
|
|
|
3642
3652
|
/** The default width for the image, in case the browser does not support srcset */
|
|
3643
|
-
defaultWidth:
|
|
3653
|
+
defaultWidth: PropTypes__default["default"].number,
|
|
3644
3654
|
|
|
3645
3655
|
/** The list of available widths */
|
|
3646
|
-
widths:
|
|
3656
|
+
widths: PropTypes__default["default"].array,
|
|
3647
3657
|
// fatch the correct hero image
|
|
3648
|
-
aspectRatio:
|
|
3658
|
+
aspectRatio: PropTypes__default["default"].array,
|
|
3649
3659
|
// Hints for the browser to choose the best size
|
|
3650
3660
|
|
|
3651
3661
|
/** This prop is responsible for adding padding-right of the image and remove padding bottom of the image */
|
|
3652
|
-
isHorizontal:
|
|
3662
|
+
isHorizontal: PropTypes__default["default"].bool,
|
|
3653
3663
|
|
|
3654
3664
|
/** This prop is responsible for adding padding-bottom in desktop and padding-right in mobile */
|
|
3655
|
-
isHorizontalMobile:
|
|
3665
|
+
isHorizontalMobile: PropTypes__default["default"].bool,
|
|
3656
3666
|
// this prop is responsive for rendering fallback image on story page
|
|
3657
|
-
defaultFallback:
|
|
3658
|
-
isHorizontalWithImageLast:
|
|
3659
|
-
isStoryPageImage:
|
|
3660
|
-
config:
|
|
3667
|
+
defaultFallback: PropTypes__default["default"].bool,
|
|
3668
|
+
isHorizontalWithImageLast: PropTypes__default["default"].bool,
|
|
3669
|
+
isStoryPageImage: PropTypes__default["default"].bool,
|
|
3670
|
+
config: PropTypes__default["default"].object
|
|
3661
3671
|
};
|
|
3662
3672
|
HeroImage.defaultProps = {
|
|
3663
3673
|
FullBleed: true,
|
|
@@ -3707,22 +3717,22 @@ var SectionTag = function SectionTag(_ref) {
|
|
|
3707
3717
|
}
|
|
3708
3718
|
|
|
3709
3719
|
if (!isSection) return null;
|
|
3710
|
-
return /*#__PURE__*/
|
|
3720
|
+
return /*#__PURE__*/React__default["default"].createElement(components.Link, {
|
|
3711
3721
|
href: getUrl,
|
|
3712
3722
|
className: "arrow-component arr--section-name",
|
|
3713
3723
|
"aria-label": "section-name"
|
|
3714
|
-
}, /*#__PURE__*/
|
|
3724
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3715
3725
|
"data-test-id": "sectionTag",
|
|
3716
3726
|
style: {
|
|
3717
3727
|
backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : ""
|
|
3718
3728
|
},
|
|
3719
3729
|
className: "section-tag arrow-component " + _getClassName("".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap$1)
|
|
3720
|
-
}, templateStyle.includes("section-borderLeft") && /*#__PURE__*/
|
|
3730
|
+
}, templateStyle.includes("section-borderLeft") && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
3721
3731
|
className: "section-m_border-left__2oUyp",
|
|
3722
3732
|
style: {
|
|
3723
3733
|
color: sectionTagBorderColor
|
|
3724
3734
|
}
|
|
3725
|
-
}), section["display-name"] || section["name"], /*#__PURE__*/
|
|
3735
|
+
}), section["display-name"] || section["name"], /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3726
3736
|
className: "section-m_border-bottom__3cRoD",
|
|
3727
3737
|
style: {
|
|
3728
3738
|
backgroundColor: "".concat(template === "solid" ? "" : sectionTagBorderColor)
|
|
@@ -3731,13 +3741,13 @@ var SectionTag = function SectionTag(_ref) {
|
|
|
3731
3741
|
};
|
|
3732
3742
|
SectionTag.propTypes = {
|
|
3733
3743
|
/** The Story Object from the API response */
|
|
3734
|
-
story:
|
|
3744
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
3735
3745
|
|
|
3736
3746
|
/** The style template for section tag */
|
|
3737
|
-
template:
|
|
3738
|
-
borderColor:
|
|
3739
|
-
solidBorderColor:
|
|
3740
|
-
isLightTheme:
|
|
3747
|
+
template: PropTypes__default["default"].oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
|
|
3748
|
+
borderColor: PropTypes__default["default"].string,
|
|
3749
|
+
solidBorderColor: PropTypes__default["default"].string,
|
|
3750
|
+
isLightTheme: PropTypes__default["default"].bool
|
|
3741
3751
|
};
|
|
3742
3752
|
SectionTag.defaultProps = {
|
|
3743
3753
|
template: "",
|
|
@@ -3786,7 +3796,7 @@ var StoryCard = function StoryCard(_ref) {
|
|
|
3786
3796
|
prefix = _ref.prefix,
|
|
3787
3797
|
config = _ref.config,
|
|
3788
3798
|
isHorizontalWithImageLast = _ref.isHorizontalWithImageLast;
|
|
3789
|
-
if (!story || isEmpty(story)) return /*#__PURE__*/
|
|
3799
|
+
if (!story || isEmpty(story)) return /*#__PURE__*/React__default["default"].createElement("div", null);
|
|
3790
3800
|
var borderOptions = ["default", "full", "bottom", "boxShadow"];
|
|
3791
3801
|
var borderTemplate = borderOptions.includes(border) ? "border-".concat(border) : ""; // TODO optimize conditions
|
|
3792
3802
|
|
|
@@ -3796,7 +3806,7 @@ var StoryCard = function StoryCard(_ref) {
|
|
|
3796
3806
|
var bgImgContentOverlapClass = bgImgContentOverlap ? "content-overlap" : "";
|
|
3797
3807
|
var textColor = getTextColor(theme);
|
|
3798
3808
|
var horizontalMobileClasses = isHorizontalMobile ? "horizontal-mob" : "";
|
|
3799
|
-
var defaultStorycard = /*#__PURE__*/
|
|
3809
|
+
var defaultStorycard = /*#__PURE__*/React__default["default"].createElement(DefaultStoryCard, {
|
|
3800
3810
|
story: story,
|
|
3801
3811
|
aspectRatio: aspectRatio,
|
|
3802
3812
|
border: border,
|
|
@@ -3810,7 +3820,7 @@ var StoryCard = function StoryCard(_ref) {
|
|
|
3810
3820
|
config: config,
|
|
3811
3821
|
isHorizontalWithImageLast: isHorizontalWithImageLast
|
|
3812
3822
|
});
|
|
3813
|
-
return /*#__PURE__*/
|
|
3823
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3814
3824
|
"data-test-id": "story-card",
|
|
3815
3825
|
style: {
|
|
3816
3826
|
backgroundColor: theme,
|
|
@@ -3839,91 +3849,91 @@ var DefaultStoryCard = function DefaultStoryCard(_ref2) {
|
|
|
3839
3849
|
var SectionTagborderColor = rgbToHex(borderColor);
|
|
3840
3850
|
var _config$localizationC = config.localizationConfig,
|
|
3841
3851
|
localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC;
|
|
3842
|
-
return /*#__PURE__*/
|
|
3852
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isHorizontal ? /*#__PURE__*/React__default["default"].createElement(HeroImage, {
|
|
3843
3853
|
config: config,
|
|
3844
3854
|
story: story,
|
|
3845
3855
|
isHorizontal: true,
|
|
3846
3856
|
isHorizontalMobile: isHorizontalMobile,
|
|
3847
3857
|
aspectRatio: aspectRatio
|
|
3848
|
-
}) : isHorizontalWithImageLast ? /*#__PURE__*/
|
|
3858
|
+
}) : isHorizontalWithImageLast ? /*#__PURE__*/React__default["default"].createElement(HeroImage, {
|
|
3849
3859
|
config: config,
|
|
3850
3860
|
story: story,
|
|
3851
3861
|
isHorizontalWithImageLast: true,
|
|
3852
3862
|
isHorizontalMobile: isHorizontalMobile,
|
|
3853
3863
|
aspectRatio: aspectRatio
|
|
3854
|
-
}) : /*#__PURE__*/
|
|
3864
|
+
}) : /*#__PURE__*/React__default["default"].createElement(HeroImage, {
|
|
3855
3865
|
story: story,
|
|
3856
3866
|
config: config,
|
|
3857
3867
|
isHorizontalMobile: isHorizontalMobile,
|
|
3858
3868
|
aspectRatio: aspectRatio
|
|
3859
|
-
}), /*#__PURE__*/
|
|
3869
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3860
3870
|
className: "arr--story-content " + _getClassName("content ".concat(alignment), _styleModuleImportMap)
|
|
3861
|
-
}, /*#__PURE__*/
|
|
3871
|
+
}, /*#__PURE__*/React__default["default"].createElement(SectionTag, {
|
|
3862
3872
|
story: story,
|
|
3863
3873
|
borderColor: SectionTagborderColor
|
|
3864
|
-
}), /*#__PURE__*/
|
|
3874
|
+
}), /*#__PURE__*/React__default["default"].createElement(Headline, {
|
|
3865
3875
|
story: story,
|
|
3866
3876
|
headerLevel: headerLevel,
|
|
3867
3877
|
premiumStoryIconConfig: config
|
|
3868
|
-
}), /*#__PURE__*/
|
|
3878
|
+
}), /*#__PURE__*/React__default["default"].createElement(AuthorWithTime, {
|
|
3869
3879
|
config: localizationConfig,
|
|
3870
3880
|
story: story,
|
|
3871
3881
|
isBottom: true,
|
|
3872
3882
|
prefix: prefix,
|
|
3873
3883
|
hideAuthorImage: hideAuthorImage
|
|
3874
|
-
}), /*#__PURE__*/
|
|
3884
|
+
}), /*#__PURE__*/React__default["default"].createElement(Subheadline, {
|
|
3875
3885
|
story: story
|
|
3876
3886
|
})));
|
|
3877
3887
|
};
|
|
3878
3888
|
|
|
3879
3889
|
DefaultStoryCard.propTypes = {
|
|
3880
|
-
story:
|
|
3881
|
-
border:
|
|
3882
|
-
isBottom:
|
|
3883
|
-
isHorizontal:
|
|
3884
|
-
aspectRatio:
|
|
3885
|
-
isHorizontalMobile:
|
|
3886
|
-
centerAlign:
|
|
3887
|
-
headerLevel:
|
|
3888
|
-
borderColor:
|
|
3889
|
-
hideAuthorImage:
|
|
3890
|
-
prefix:
|
|
3891
|
-
config:
|
|
3892
|
-
isHorizontalWithImageLast:
|
|
3890
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
3891
|
+
border: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string]),
|
|
3892
|
+
isBottom: PropTypes__default["default"].bool,
|
|
3893
|
+
isHorizontal: PropTypes__default["default"].bool,
|
|
3894
|
+
aspectRatio: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array]),
|
|
3895
|
+
isHorizontalMobile: PropTypes__default["default"].bool,
|
|
3896
|
+
centerAlign: PropTypes__default["default"].bool,
|
|
3897
|
+
headerLevel: PropTypes__default["default"].string,
|
|
3898
|
+
borderColor: PropTypes__default["default"].string,
|
|
3899
|
+
hideAuthorImage: PropTypes__default["default"].bool,
|
|
3900
|
+
prefix: PropTypes__default["default"].string,
|
|
3901
|
+
config: PropTypes__default["default"].object,
|
|
3902
|
+
isHorizontalWithImageLast: PropTypes__default["default"].bool
|
|
3893
3903
|
};
|
|
3894
3904
|
StoryCard.propTypes = {
|
|
3895
3905
|
/** The Story Object from the API response */
|
|
3896
|
-
story:
|
|
3897
|
-
children:
|
|
3906
|
+
story: PropTypes__default["default"].object.isRequired,
|
|
3907
|
+
children: PropTypes__default["default"].node,
|
|
3898
3908
|
|
|
3899
3909
|
/** Flip the Story Card to Horizonal mode */
|
|
3900
|
-
isHorizontal:
|
|
3910
|
+
isHorizontal: PropTypes__default["default"].bool,
|
|
3901
3911
|
|
|
3902
3912
|
/** Add border to the Story Card */
|
|
3903
|
-
border:
|
|
3913
|
+
border: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string]),
|
|
3904
3914
|
// story card with background image
|
|
3905
|
-
useImageAsBackground:
|
|
3915
|
+
useImageAsBackground: PropTypes__default["default"].bool,
|
|
3906
3916
|
// story card content overlap with image
|
|
3907
|
-
bgImgContentOverlap:
|
|
3917
|
+
bgImgContentOverlap: PropTypes__default["default"].bool,
|
|
3908
3918
|
|
|
3909
3919
|
/** add aspect ratio for hero image */
|
|
3910
|
-
aspectRatio:
|
|
3920
|
+
aspectRatio: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array]),
|
|
3911
3921
|
|
|
3912
3922
|
/** add theme(dark /light/custom color) for storycard */
|
|
3913
|
-
theme:
|
|
3923
|
+
theme: PropTypes__default["default"].string,
|
|
3914
3924
|
|
|
3915
3925
|
/** flip the story card mobile design horizontal */
|
|
3916
|
-
isHorizontalMobile:
|
|
3926
|
+
isHorizontalMobile: PropTypes__default["default"].bool,
|
|
3917
3927
|
// make content center align in desktop and left align in mobile
|
|
3918
|
-
centerAlign:
|
|
3919
|
-
headerLevel:
|
|
3920
|
-
borderColor:
|
|
3928
|
+
centerAlign: PropTypes__default["default"].bool,
|
|
3929
|
+
headerLevel: PropTypes__default["default"].string,
|
|
3930
|
+
borderColor: PropTypes__default["default"].string,
|
|
3921
3931
|
// handle author image through storycard
|
|
3922
|
-
hideAuthorImage:
|
|
3932
|
+
hideAuthorImage: PropTypes__default["default"].bool,
|
|
3923
3933
|
// handle author prefix through storycard
|
|
3924
|
-
prefix:
|
|
3925
|
-
config:
|
|
3926
|
-
isHorizontalWithImageLast:
|
|
3934
|
+
prefix: PropTypes__default["default"].string,
|
|
3935
|
+
config: PropTypes__default["default"].object,
|
|
3936
|
+
isHorizontalWithImageLast: PropTypes__default["default"].bool
|
|
3927
3937
|
};
|
|
3928
3938
|
StoryCard.defaultProps = {
|
|
3929
3939
|
isHorizontal: false,
|
|
@@ -3935,4 +3945,4 @@ StoryCard.defaultProps = {
|
|
|
3935
3945
|
isHorizontalWithImageLast: false
|
|
3936
3946
|
};
|
|
3937
3947
|
|
|
3938
|
-
|
|
3948
|
+
exports.StoryCard = StoryCard;
|