@twreporter/react-article-components 2.3.1-rc.0 → 2.4.0-rc.0
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/lib/components/article-page.js +5 -5
- package/lib/components/aside/desktop-tools.js +2 -2
- package/lib/components/aside/mobile-tool-bar.js +13 -13
- package/lib/components/aside/utils/theme.js +3 -6
- package/lib/components/body/annotation.js +11 -9
- package/lib/components/body/audio/control-button.js +7 -7
- package/lib/components/body/audio/index.js +4 -4
- package/lib/components/body/audio/seek-bar.js +4 -4
- package/lib/components/body/blockquote.js +13 -11
- package/lib/components/body/brief.js +13 -10
- package/lib/components/body/centered-quote.js +10 -8
- package/lib/components/body/embedded-code.js +16 -10
- package/lib/components/body/headings.js +4 -4
- package/lib/components/body/image-diff.js +5 -5
- package/lib/components/body/infobox.js +4 -4
- package/lib/components/body/multimedia.js +4 -4
- package/lib/components/body/paragraph.js +2 -2
- package/lib/components/body/slideshow/index.js +4 -4
- package/lib/components/leading/embedded.js +149 -0
- package/lib/components/leading/index.js +3 -1
- package/lib/components/leading/normal.js +3 -3
- package/lib/components/related/card.js +4 -4
- package/lib/components/related/index.js +4 -4
- package/lib/components/related/list.js +5 -5
- package/lib/components/separation-curve.js +6 -6
- package/lib/constants/css.js +7 -7
- package/lib/constants/prop-types/leading.js +3 -0
- package/lib/managers/layout-manager.js +7 -3
- package/lib/managers/theme-manager.js +4 -5
- package/lib/managers/ui-manager.js +3 -3
- package/package.json +6 -6
- package/lib/constants/theme.js +0 -16
|
@@ -11,9 +11,9 @@ var _multimedia = _interopRequireDefault(require("./multimedia"));
|
|
|
11
11
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _slider = _interopRequireWildcard(require("./slider"));
|
|
14
|
-
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
15
14
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
16
15
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
16
|
+
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
17
17
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
18
18
|
var _templateObject, _templateObject2, _templateObject3; // lodash
|
|
19
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -59,11 +59,11 @@ var getResponsiveBackground = function getResponsiveBackground(imageSetPropKey)
|
|
|
59
59
|
};
|
|
60
60
|
var sharedStyleOfIndicatorPointer = /*#__PURE__*/(0, _styledComponents.css)(["padding-top:4px;text-align:center;font-size:12px;display:block;position:absolute;top:0;width:24px;height:24px;background:", ";color:", ";"], _color.colorGrayscale.white, function (props) {
|
|
61
61
|
switch (props.theme.name) {
|
|
62
|
-
case _theme
|
|
62
|
+
case _theme.ARTICLE_THEME.v2.photo:
|
|
63
63
|
return _color.colorSupportive.heavy;
|
|
64
|
-
case _theme
|
|
64
|
+
case _theme.ARTICLE_THEME.v2.pink:
|
|
65
65
|
return _color.COLOR_PINK_ARTICLE.pink;
|
|
66
|
-
case _theme
|
|
66
|
+
case _theme.ARTICLE_THEME.v2["default"]:
|
|
67
67
|
default:
|
|
68
68
|
return _color.colorSupportive.main;
|
|
69
69
|
}
|
|
@@ -71,7 +71,7 @@ var sharedStyleOfIndicatorPointer = /*#__PURE__*/(0, _styledComponents.css)(["pa
|
|
|
71
71
|
var ImageContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
72
72
|
displayName: "image-diff__ImageContainer",
|
|
73
73
|
componentId: "sc-1y1eq1w-0"
|
|
74
|
-
})(["overflow:hidden;position:relative;width:100%;padding-bottom:", ";>div{position:absolute;top:0;left:0;width:100%;height:100%;}", ",", "{background-repeat:no-repeat;background-size:auto 100%;background-position:left center;}", "{", "}", "{", "}", "{width:3px;background:", ";&::after{content
|
|
74
|
+
})(["overflow:hidden;position:relative;width:100%;padding-bottom:", ";> div{position:absolute;top:0;left:0;width:100%;height:100%;}", ",", "{background-repeat:no-repeat;background-size:auto 100%;background-position:left center;}", "{", "}", "{", "}", "{width:3px;background:", ";&::after{content:'", "';", " left:0;transform:translateX(-100%);border-radius:0 0 0 100%;text-align:right;padding-right:3px;}&::before{content:'", "';", " right:0;transform:translateX(100%);border-radius:0 0 100% 0;text-align:left;padding-left:3px;}}"], function (props) {
|
|
75
75
|
return "".concat(100 * props.$heightWidthRatio, "%");
|
|
76
76
|
}, _slider.Progress, _slider.Rail, _slider.Progress, getResponsiveBackground('leftImageSet'), _slider.Rail, getResponsiveBackground('rightImageSet'), _slider.Indicator, _color.colorGrayscale.white, unicodeToString('25C4'), sharedStyleOfIndicatorPointer, unicodeToString('25BA'), sharedStyleOfIndicatorPointer);
|
|
77
77
|
var ImageDiff = exports["default"] = /*#__PURE__*/function (_PureComponent) {
|
|
@@ -11,11 +11,11 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
11
11
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
12
12
|
var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
|
|
13
13
|
var _css = _interopRequireDefault(require("../../constants/css"));
|
|
14
|
-
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
15
14
|
var _typography = _interopRequireDefault(require("../../constants/typography"));
|
|
16
15
|
var _anchor = require("../../constants/anchor");
|
|
17
16
|
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
18
17
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
18
|
+
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
19
19
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // constants
|
|
20
20
|
// twreporter
|
|
21
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -58,11 +58,11 @@ var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
58
58
|
});
|
|
59
59
|
function getContainerStyles(themeName) {
|
|
60
60
|
switch (themeName) {
|
|
61
|
-
case _theme
|
|
61
|
+
case _theme.ARTICLE_THEME.v2.photo:
|
|
62
62
|
return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.colorSupportive.heavy);
|
|
63
|
-
case _theme
|
|
63
|
+
case _theme.ARTICLE_THEME.v2.pink:
|
|
64
64
|
return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.COLOR_PINK_ARTICLE.pink);
|
|
65
|
-
case _theme
|
|
65
|
+
case _theme.ARTICLE_THEME.v2["default"]:
|
|
66
66
|
default:
|
|
67
67
|
return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.colorSupportive.main);
|
|
68
68
|
}
|
|
@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports["default"] = void 0;
|
|
8
8
|
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
9
9
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
10
|
-
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
11
10
|
var _typography = _interopRequireDefault(require("../../constants/typography"));
|
|
12
11
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
12
|
+
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
13
13
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
14
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
15
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
@@ -65,11 +65,11 @@ var mockup = {
|
|
|
65
65
|
|
|
66
66
|
function getCaptionStyles(themeName) {
|
|
67
67
|
switch (themeName) {
|
|
68
|
-
case _theme
|
|
68
|
+
case _theme.ARTICLE_THEME.v2.photo:
|
|
69
69
|
return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color.colorGrayscale.gray300, _color.colorGrayscale.gray400);
|
|
70
|
-
case _theme
|
|
70
|
+
case _theme.ARTICLE_THEME.v2.pink:
|
|
71
71
|
return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color.colorGrayscale.gray700, _color.COLOR_PINK_ARTICLE.pink);
|
|
72
|
-
case _theme
|
|
72
|
+
case _theme.ARTICLE_THEME.v2["default"]:
|
|
73
73
|
default:
|
|
74
74
|
return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color.colorGrayscale.gray700, _color.colorSupportive.main);
|
|
75
75
|
}
|
|
@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
12
|
+
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
12
13
|
var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
|
|
13
14
|
var _css = _interopRequireDefault(require("../../constants/css"));
|
|
14
|
-
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
15
15
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
16
16
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
17
17
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
@@ -32,7 +32,7 @@ var P = /*#__PURE__*/_styledComponents["default"].p.withConfig({
|
|
|
32
32
|
return props.$forTrackingSection ? "font-size: ".concat(props.theme.fontSizeOffset + 16, "px") : '';
|
|
33
33
|
}, function (props) {
|
|
34
34
|
switch (props.theme.name) {
|
|
35
|
-
case _theme
|
|
35
|
+
case _theme.ARTICLE_THEME.v2.photo:
|
|
36
36
|
return (0, _styledComponents.css)(["strong{color:", ";}"], _color.colorGrayscale.gray300);
|
|
37
37
|
default:
|
|
38
38
|
return '';
|
|
@@ -14,9 +14,9 @@ var _map = _interopRequireDefault(require("lodash/map"));
|
|
|
14
14
|
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
|
|
15
15
|
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
16
16
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
17
|
-
var _theme = _interopRequireDefault(require("../../../constants/theme"));
|
|
18
17
|
var _typography = _interopRequireDefault(require("../../../constants/typography"));
|
|
19
18
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
19
|
+
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
20
20
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
|
|
21
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
22
22
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
@@ -219,11 +219,11 @@ var SlideshowFlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig(
|
|
|
219
219
|
}, _mediaQuery["default"].tabletAndBelow(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n width: 100%;\n "]))), _mediaQuery["default"].desktopOnly(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), mockup.desktop.container.width), _mediaQuery["default"].hdOnly(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), mockup.hd.container.width));
|
|
220
220
|
function getSlideshowFlexBoxStyles(themeName) {
|
|
221
221
|
switch (themeName) {
|
|
222
|
-
case _theme
|
|
222
|
+
case _theme.ARTICLE_THEME.v2.photo:
|
|
223
223
|
return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}"], PrevButton, _color.colorGrayscale.gray400, ImageNumberCircle, _color.colorSupportive.main, _color.COLOR_PINK_ARTICLE.darkBlue, ImageNumber, _color.COLOR_PINK_ARTICLE.darkBlue);
|
|
224
|
-
case _theme
|
|
224
|
+
case _theme.ARTICLE_THEME.v2.pink:
|
|
225
225
|
return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}"], PrevButton, _color.colorGrayscale.gray300, ImageNumberCircle, _color.COLOR_PINK_ARTICLE.pink, _color.colorGrayscale.white, ImageNumber, _color.colorGrayscale.white);
|
|
226
|
-
case _theme
|
|
226
|
+
case _theme.ARTICLE_THEME.v2["default"]:
|
|
227
227
|
default:
|
|
228
228
|
return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}"], PrevButton, _color.colorGrayscale.gray300, ImageNumberCircle, _color.colorSupportive.main, _color.colorGrayscale.white, ImageNumber, _color.colorGrayscale.white);
|
|
229
229
|
}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
10
|
+
var _reactRouterDom = require("react-router-dom");
|
|
11
|
+
var _headline = require("@twreporter/react-components/lib/text/headline");
|
|
12
|
+
var _paragraph = require("@twreporter/react-components/lib/text/paragraph");
|
|
13
|
+
var _color = require("@twreporter/core/lib/constants/color");
|
|
14
|
+
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
15
|
+
var _leading = _interopRequireDefault(require("../../constants/prop-types/leading"));
|
|
16
|
+
var _embeddedCode = _interopRequireDefault(require("../body/embedded-code"));
|
|
17
|
+
var _map = _interopRequireDefault(require("lodash/map"));
|
|
18
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10; // @twreporter
|
|
19
|
+
// constants
|
|
20
|
+
// component
|
|
21
|
+
// lodash
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
24
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
25
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
26
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
27
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
28
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
29
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
30
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
31
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
32
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
33
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
34
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
35
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
36
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
37
|
+
var _ = {
|
|
38
|
+
map: _map["default"]
|
|
39
|
+
};
|
|
40
|
+
var EmbeddedBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
41
|
+
displayName: "embedded__EmbeddedBlock",
|
|
42
|
+
componentId: "sc-1uuttwk-0"
|
|
43
|
+
})(["max-width:100%;max-height:100%;"]);
|
|
44
|
+
var ContentBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
45
|
+
displayName: "embedded__ContentBlock",
|
|
46
|
+
componentId: "sc-1uuttwk-1"
|
|
47
|
+
})(["width:100%;display:flex;margin-top:16px;margin-bottom:64px;justify-content:space-between;", " ", " ", " ", ""], _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 1280px;\n margin: 16px auto 64px;\n "]))), _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 0 48px;\n "]))), _mediaQuery["default"].tabletAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex-direction: column;\n width: 66.7%;\n margin: 16px auto 64px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n padding: 0 24px;\n "]))));
|
|
48
|
+
var TitleBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
49
|
+
displayName: "embedded__TitleBlock",
|
|
50
|
+
componentId: "sc-1uuttwk-2"
|
|
51
|
+
})(["display:flex;flex-direction:column;gap:16px;order:1;", " ", " ", ""], _mediaQuery["default"].hdOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: 940px;\n "]))), _mediaQuery["default"].desktopOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width:calc(740px + (50% - 550px));\n "]))), _mediaQuery["default"].tabletAndBelow(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n order: 2;\n "]))));
|
|
52
|
+
var CaptionBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
53
|
+
displayName: "embedded__CaptionBlock",
|
|
54
|
+
componentId: "sc-1uuttwk-3"
|
|
55
|
+
})(["order:2;", " ", " ", ""], _mediaQuery["default"].hdOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 265px;\n "]))), _mediaQuery["default"].desktopOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 180px;\n "]))), _mediaQuery["default"].tabletAndBelow(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n order: 1;\n margin-bottom: 32px;\n "]))));
|
|
56
|
+
var Caption = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
|
|
57
|
+
displayName: "embedded__Caption",
|
|
58
|
+
componentId: "sc-1uuttwk-4"
|
|
59
|
+
})(["color:", ";"], _color.colorGrayscale.gray600);
|
|
60
|
+
var Title = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H1).withConfig({
|
|
61
|
+
displayName: "embedded__Title",
|
|
62
|
+
componentId: "sc-1uuttwk-5"
|
|
63
|
+
})(["color:", ";"], _color.colorGrayscale.gray800);
|
|
64
|
+
var SubTitle = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H5).withConfig({
|
|
65
|
+
displayName: "embedded__SubTitle",
|
|
66
|
+
componentId: "sc-1uuttwk-6"
|
|
67
|
+
})(["color:", ";"], _color.colorGrayscale.gray800);
|
|
68
|
+
var TopicTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
69
|
+
displayName: "embedded__TopicTitle",
|
|
70
|
+
componentId: "sc-1uuttwk-7"
|
|
71
|
+
})(["padding:8px 10px;color:", ";border:1px solid ", ";width:fit-content;cursor:pointer;"], _color.colorSupportive.heavy, _color.colorSupportive.main);
|
|
72
|
+
var spin = /*#__PURE__*/(0, _styledComponents.keyframes)(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
|
|
73
|
+
var Loader = /*#__PURE__*/_styledComponents["default"].span.withConfig({
|
|
74
|
+
displayName: "embedded__Loader",
|
|
75
|
+
componentId: "sc-1uuttwk-8"
|
|
76
|
+
})(["width:32px;height:32px;border:2px solid ", ";border-top-color:", ";border-radius:50%;display:inline-block;box-sizing:border-box;animation:", " 1s linear infinite;"], _color.colorGrayscale.gray400, _color.colorGrayscale.gray600, spin);
|
|
77
|
+
var LoaderContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
78
|
+
displayName: "embedded__LoaderContainer",
|
|
79
|
+
componentId: "sc-1uuttwk-9"
|
|
80
|
+
})(["width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;"]);
|
|
81
|
+
var Embedded = function Embedded(_ref) {
|
|
82
|
+
var title = _ref.title,
|
|
83
|
+
subtitle = _ref.subtitle,
|
|
84
|
+
topicHref = _ref.topicHref,
|
|
85
|
+
shortTitle = _ref.shortTitle,
|
|
86
|
+
isTopicPublished = _ref.isTopicPublished,
|
|
87
|
+
embedded = _ref.embedded;
|
|
88
|
+
var navigate = (0, _reactRouterDom.useHistory)();
|
|
89
|
+
var _useState = (0, _react.useState)(''),
|
|
90
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
91
|
+
captionText = _useState2[0],
|
|
92
|
+
setCaptionText = _useState2[1];
|
|
93
|
+
var _useState3 = (0, _react.useState)(),
|
|
94
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
95
|
+
embeddedCode = _useState4[0],
|
|
96
|
+
setEmbeddedCode = _useState4[1];
|
|
97
|
+
var _useState5 = (0, _react.useState)(true),
|
|
98
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
99
|
+
isLoading = _useState6[0],
|
|
100
|
+
setIsLoading = _useState6[1];
|
|
101
|
+
var onTopicClick = function onTopicClick() {
|
|
102
|
+
navigate.push(topicHref);
|
|
103
|
+
};
|
|
104
|
+
(0, _react.useEffect)(function () {
|
|
105
|
+
if (embedded.length > 0) {
|
|
106
|
+
_.map(embedded, function (code) {
|
|
107
|
+
switch (code.type) {
|
|
108
|
+
case 'embedded-code':
|
|
109
|
+
case 'embeddedCode':
|
|
110
|
+
case 'embeddedcode':
|
|
111
|
+
var content = code.content;
|
|
112
|
+
if (content.length > 0) {
|
|
113
|
+
var caption = content[0].caption;
|
|
114
|
+
if (caption) {
|
|
115
|
+
setCaptionText(caption);
|
|
116
|
+
}
|
|
117
|
+
setEmbeddedCode(code);
|
|
118
|
+
}
|
|
119
|
+
break;
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
var handleLoad = function handleLoad() {
|
|
124
|
+
setIsLoading(false);
|
|
125
|
+
};
|
|
126
|
+
window.addEventListener('load', handleLoad);
|
|
127
|
+
return function () {
|
|
128
|
+
window.removeEventListener('load', handleLoad);
|
|
129
|
+
};
|
|
130
|
+
}, []);
|
|
131
|
+
if (isLoading) return /*#__PURE__*/_react["default"].createElement(LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(Loader, null));
|
|
132
|
+
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(EmbeddedBlock, null, /*#__PURE__*/_react["default"].createElement(_embeddedCode["default"], {
|
|
133
|
+
data: embeddedCode,
|
|
134
|
+
showCaption: !captionText
|
|
135
|
+
})), /*#__PURE__*/_react["default"].createElement(ContentBlock, null, /*#__PURE__*/_react["default"].createElement(TitleBlock, null, isTopicPublished && shortTitle ? /*#__PURE__*/_react["default"].createElement(TopicTitle, {
|
|
136
|
+
onClick: onTopicClick
|
|
137
|
+
}, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
|
|
138
|
+
text: shortTitle,
|
|
139
|
+
weight: _paragraph.P2.Weight.BOLD
|
|
140
|
+
})) : null, subtitle && /*#__PURE__*/_react["default"].createElement(SubTitle, {
|
|
141
|
+
text: subtitle
|
|
142
|
+
}), /*#__PURE__*/_react["default"].createElement(Title, {
|
|
143
|
+
text: title
|
|
144
|
+
})), captionText ? /*#__PURE__*/_react["default"].createElement(CaptionBlock, null, /*#__PURE__*/_react["default"].createElement(Caption, {
|
|
145
|
+
text: captionText
|
|
146
|
+
})) : null));
|
|
147
|
+
};
|
|
148
|
+
Embedded.propTypes = _objectSpread({}, _leading["default"].embedded);
|
|
149
|
+
var _default = exports["default"] = Embedded;
|
|
@@ -9,11 +9,13 @@ var _fullscreen = _interopRequireDefault(require("./fullscreen"));
|
|
|
9
9
|
var _normal = _interopRequireDefault(require("./normal"));
|
|
10
10
|
var _pink = _interopRequireDefault(require("./pink"));
|
|
11
11
|
var _small = _interopRequireDefault(require("./small"));
|
|
12
|
+
var _embedded = _interopRequireDefault(require("./embedded"));
|
|
12
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
14
|
var _default = exports["default"] = {
|
|
14
15
|
Extend: _extend["default"],
|
|
15
16
|
Fullscreen: _fullscreen["default"],
|
|
16
17
|
Normal: _normal["default"],
|
|
17
18
|
Pink: _pink["default"],
|
|
18
|
-
Small: _small["default"]
|
|
19
|
+
Small: _small["default"],
|
|
20
|
+
Embedded: _embedded["default"]
|
|
19
21
|
};
|
|
@@ -10,11 +10,11 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
10
10
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
11
11
|
var _imgWithPlaceholder = _interopRequireDefault(require("../img-with-placeholder"));
|
|
12
12
|
var _leading = _interopRequireDefault(require("../../constants/prop-types/leading"));
|
|
13
|
-
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
14
13
|
var _typography = _interopRequireDefault(require("../../constants/typography"));
|
|
15
14
|
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
16
15
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
17
16
|
var _headline = require("@twreporter/react-components/lib/text/headline");
|
|
17
|
+
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
18
18
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
19
19
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21; // components
|
|
20
20
|
// constants
|
|
@@ -78,9 +78,9 @@ var BackgroundBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
78
78
|
}, _mediaQuery["default"].hdOnly(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n padding-top: 100px;\n "]))), _mediaQuery["default"].desktopOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n padding-top: 48px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n padding-top: 32px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n padding-top: 30px;\n "]))));
|
|
79
79
|
function getBackgroundBlockStyles(themeName) {
|
|
80
80
|
switch (themeName) {
|
|
81
|
-
case _theme
|
|
81
|
+
case _theme.ARTICLE_THEME.v2.photo:
|
|
82
82
|
return (0, _styledComponents.css)(["background-color:", ";", "{color:", ";}", "{color:", ";border-color:", ";}", ",", "{color:", ";}"], _color.COLOR_PINK_ARTICLE.darkBlue, FigCaption, _color.colorGrayscale.gray600, Topic, _color.colorSupportive.main, _color.colorSupportive.heavy, Subtitle, Title, _color.colorGrayscale.gray300);
|
|
83
|
-
case _theme
|
|
83
|
+
case _theme.ARTICLE_THEME.v2["default"]:
|
|
84
84
|
default:
|
|
85
85
|
return (0, _styledComponents.css)(["background-color:", ";", "{color:", ";}", "{color:", ";border-color:", ";}", ",", "{color:", ";}"], _color.colorGrayscale.gray100, FigCaption, _color.colorGrayscale.gray600, Topic, _color.colorSupportive.heavy, _color.colorSupportive.main, Subtitle, Title, _color.colorGrayscale.gray800);
|
|
86
86
|
}
|
|
@@ -12,9 +12,9 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
|
|
|
12
12
|
var _related = _interopRequireDefault(require("../../constants/prop-types/related"));
|
|
13
13
|
var _react = _interopRequireDefault(require("react"));
|
|
14
14
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
15
|
-
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
16
15
|
var _typography = _interopRequireDefault(require("../../constants/typography"));
|
|
17
16
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
17
|
+
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
18
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
|
|
19
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
20
20
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
@@ -87,11 +87,11 @@ var Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
87
87
|
}, _mediaQuery["default"].tabletAndBelow(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n height: auto;\n width: 100%;\n min-height: 152px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n "]))), _mediaQuery["default"].desktopOnly(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), _mockup["default"].desktop.thumbnail.width), _mediaQuery["default"].hdOnly(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), _mockup["default"].hd.thumbnail.width));
|
|
88
88
|
function getBlockStyles(themeName) {
|
|
89
89
|
switch (themeName) {
|
|
90
|
-
case _theme
|
|
90
|
+
case _theme.ARTICLE_THEME.v2.photo:
|
|
91
91
|
return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color.colorSupportive.main, Title, _color.colorGrayscale.gray300, StyledImg, _color.colorGrayscale.gray400);
|
|
92
|
-
case _theme
|
|
92
|
+
case _theme.ARTICLE_THEME.v2.pink:
|
|
93
93
|
return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color.COLOR_PINK_ARTICLE.darkPink, Title, _color.colorGrayscale.gray800, StyledImg, _color.colorGrayscale.gray200);
|
|
94
|
-
case _theme
|
|
94
|
+
case _theme.ARTICLE_THEME.v2["default"]:
|
|
95
95
|
default:
|
|
96
96
|
return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color.colorSupportive.heavy, Title, _color.colorGrayscale.gray800, StyledImg, _color.colorGrayscale.gray200);
|
|
97
97
|
}
|
|
@@ -9,10 +9,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
11
11
|
var _list = _interopRequireDefault(require("./list"));
|
|
12
|
-
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
13
12
|
var _typography = _interopRequireDefault(require("../../constants/typography"));
|
|
14
13
|
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
15
14
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
15
|
+
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
16
16
|
var _debounce = _interopRequireDefault(require("lodash/debounce"));
|
|
17
17
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
18
18
|
var _map = _interopRequireDefault(require("lodash/map"));
|
|
@@ -56,10 +56,10 @@ var Descriptor = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
56
56
|
componentId: "sc-1m76x7g-1"
|
|
57
57
|
})(["", " ", " ", " ", " ", " ", " ", ""], function (props) {
|
|
58
58
|
switch (props.theme.name) {
|
|
59
|
-
case _theme
|
|
59
|
+
case _theme.ARTICLE_THEME.v2.photo:
|
|
60
60
|
return (0, _styledComponents.css)(["color:", ";", ""], _color.colorGrayscale.gray600, _mediaQuery["default"].desktopAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-color: ", ";\n &::after {\n border-color: ", ";\n }\n "])), _color.colorGrayscale.gray400, _color.colorGrayscale.gray400));
|
|
61
|
-
case _theme
|
|
62
|
-
case _theme
|
|
61
|
+
case _theme.ARTICLE_THEME.v2.pink:
|
|
62
|
+
case _theme.ARTICLE_THEME.v2["default"]:
|
|
63
63
|
default:
|
|
64
64
|
return (0, _styledComponents.css)(["color:", ";", ""], _color.colorGrayscale.gray600, _mediaQuery["default"].desktopAndAbove(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-color: ", ";\n &::after {\n border-color: ", ";\n }\n "])), _color.colorGrayscale.gray300, _color.colorGrayscale.gray300));
|
|
65
65
|
}
|
|
@@ -11,11 +11,11 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
11
11
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
12
12
|
var _mockup = _interopRequireDefault(require("./mockup"));
|
|
13
13
|
var _card = _interopRequireDefault(require("./card"));
|
|
14
|
-
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
15
14
|
var _related = _interopRequireDefault(require("../../constants/prop-types/related"));
|
|
16
15
|
var _typography = _interopRequireDefault(require("../../constants/typography"));
|
|
17
16
|
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
18
17
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
18
|
+
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
19
19
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
20
20
|
var _map = _interopRequireDefault(require("lodash/map"));
|
|
21
21
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // components
|
|
@@ -47,10 +47,10 @@ var _ = {
|
|
|
47
47
|
var fadeIn = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{opacity:0;}to{opacity:1;}"]);
|
|
48
48
|
var selectButtonColors = function selectButtonColors(theme) {
|
|
49
49
|
switch (theme) {
|
|
50
|
-
case _theme
|
|
50
|
+
case _theme.ARTICLE_THEME.v2.photo:
|
|
51
51
|
return (0, _styledComponents.css)(["color:", ";background-color:", "1a;&:hover{color:", ";background-color:", ";}"], _color.colorGrayscale.gray300, _color.colorGrayscale.white, _color.colorGrayscale.white, _color.colorGrayscale.gray400);
|
|
52
|
-
case _theme
|
|
53
|
-
case _theme
|
|
52
|
+
case _theme.ARTICLE_THEME.v2.pink:
|
|
53
|
+
case _theme.ARTICLE_THEME.v2["default"]:
|
|
54
54
|
default:
|
|
55
55
|
return (0, _styledComponents.css)(["color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray300, _color.colorGrayscale.gray800, _color.colorGrayscale.gray400);
|
|
56
56
|
}
|
|
@@ -72,7 +72,7 @@ var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
72
72
|
componentId: "uykdc6-2"
|
|
73
73
|
})(["border-style:solid;border-width:0 0.5px 0.5px 0;border-color:", ";margin-bottom:40px;animation:", " 400ms ease-in-out;", " ", " ", " ", " ", ""], function (props) {
|
|
74
74
|
switch (props.theme.name) {
|
|
75
|
-
case _theme
|
|
75
|
+
case _theme.ARTICLE_THEME.v2.photo:
|
|
76
76
|
return _color.colorGrayscale.gray400;
|
|
77
77
|
default:
|
|
78
78
|
return _color.colorGrayscale.gray300;
|
|
@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports["default"] = SeparationCurve;
|
|
7
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
10
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
-
var
|
|
10
|
+
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
12
11
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
13
|
-
var
|
|
12
|
+
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
13
|
+
var _templateObject; // @twreporter
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
15
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
16
16
|
var Separation = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
@@ -18,11 +18,11 @@ var Separation = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
18
18
|
componentId: "s2ekrq-0"
|
|
19
19
|
})(["width:192px;margin:40px auto;", " >svg>path{fill:", ";}"], _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 270px;\n "]))), function (props) {
|
|
20
20
|
switch (props.theme.name) {
|
|
21
|
-
case _theme
|
|
21
|
+
case _theme.ARTICLE_THEME.v2.pink:
|
|
22
22
|
return _color.COLOR_PINK_ARTICLE.pink;
|
|
23
|
-
case _theme
|
|
23
|
+
case _theme.ARTICLE_THEME.v2.photo:
|
|
24
24
|
return _color.colorSupportive.heavy;
|
|
25
|
-
case _theme
|
|
25
|
+
case _theme.ARTICLE_THEME.v2["default"]:
|
|
26
26
|
default:
|
|
27
27
|
return _color.colorSupportive.main;
|
|
28
28
|
}
|
package/lib/constants/css.js
CHANGED
|
@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
var _styledComponents = require("styled-components");
|
|
8
|
-
var _theme = _interopRequireDefault(require("./theme"));
|
|
9
8
|
var _typography = _interopRequireDefault(require("./typography"));
|
|
10
9
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
10
|
+
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
12
12
|
function getParagraphTextStyles(themeName) {
|
|
13
13
|
switch (themeName) {
|
|
14
|
-
case _theme
|
|
14
|
+
case _theme.ARTICLE_THEME.v2.photo:
|
|
15
15
|
return (0, _styledComponents.css)(["color:", ";"], _color.colorGrayscale.gray300);
|
|
16
|
-
case _theme
|
|
17
|
-
case _theme
|
|
16
|
+
case _theme.ARTICLE_THEME.v2.pink:
|
|
17
|
+
case _theme.ARTICLE_THEME.v2["default"]:
|
|
18
18
|
default:
|
|
19
19
|
return (0, _styledComponents.css)(["color:", ";"], _color.colorGrayscale.gray800);
|
|
20
20
|
}
|
|
@@ -26,11 +26,11 @@ var paragraphText = /*#__PURE__*/(0, _styledComponents.css)(["", " font-size:",
|
|
|
26
26
|
}, _typography["default"].font.weight.normal);
|
|
27
27
|
function getLinkChildrenStyles(themeName) {
|
|
28
28
|
switch (themeName) {
|
|
29
|
-
case _theme
|
|
29
|
+
case _theme.ARTICLE_THEME.v2.photo:
|
|
30
30
|
return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color.colorSupportive.main, _color.colorGrayscale.gray400, _color.colorSupportive.main);
|
|
31
|
-
case _theme
|
|
31
|
+
case _theme.ARTICLE_THEME.v2.pink:
|
|
32
32
|
return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color.COLOR_PINK_ARTICLE.blue, _color.colorGrayscale.gray300, _color.COLOR_PINK_ARTICLE.blue);
|
|
33
|
-
case _theme
|
|
33
|
+
case _theme.ARTICLE_THEME.v2["default"]:
|
|
34
34
|
default:
|
|
35
35
|
return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color.colorSupportive.heavy, _color.colorGrayscale.gray300, _color.colorSupportive.heavy);
|
|
36
36
|
}
|
|
@@ -38,5 +38,8 @@ var _default = exports["default"] = {
|
|
|
38
38
|
tiny: _imgWithPlaceholder["default"].imagePropType,
|
|
39
39
|
mobile: _imgWithPlaceholder["default"].imagePropType
|
|
40
40
|
})
|
|
41
|
+
}),
|
|
42
|
+
embedded: _objectSpread(_objectSpread({}, leading), {}, {
|
|
43
|
+
embedded: _propTypes["default"].object
|
|
41
44
|
})
|
|
42
45
|
};
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
var _leading = _interopRequireDefault(require("../components/leading"));
|
|
8
8
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
9
|
-
var _theme =
|
|
9
|
+
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
11
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
12
12
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
@@ -54,9 +54,12 @@ var LayoutManager = exports["default"] = /*#__PURE__*/function () {
|
|
|
54
54
|
}, {
|
|
55
55
|
key: "getLeadingComponent",
|
|
56
56
|
value: function getLeadingComponent() {
|
|
57
|
-
if (this.theme === _theme
|
|
57
|
+
if (this.theme === _theme.ARTICLE_THEME.v2.pink) {
|
|
58
58
|
return _leading["default"].Pink;
|
|
59
59
|
}
|
|
60
|
+
if (this.theme === _theme.ARTICLE_THEME.v2.embedded) {
|
|
61
|
+
return _leading["default"].Embedded;
|
|
62
|
+
}
|
|
60
63
|
switch (_.get(this.post, 'hero_image_size')) {
|
|
61
64
|
case 'extend':
|
|
62
65
|
return _leading["default"].Extend;
|
|
@@ -114,7 +117,8 @@ var LayoutManager = exports["default"] = /*#__PURE__*/function () {
|
|
|
114
117
|
portraitPoster: {
|
|
115
118
|
tiny: _.get(post, 'leading_image_portrait.resized_targets.tiny'),
|
|
116
119
|
mobile: _.get(post, 'leading_image_portrait.resized_targets.mobile')
|
|
117
|
-
}
|
|
120
|
+
},
|
|
121
|
+
embedded: _.get(post, 'leading_embedded.api_data', [])
|
|
118
122
|
};
|
|
119
123
|
}
|
|
120
124
|
}]);
|
|
@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
var _theme2 =
|
|
7
|
+
var _theme2 = require("@twreporter/core/lib/constants/theme");
|
|
8
8
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
9
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
10
9
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
11
10
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
12
11
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
@@ -92,15 +91,15 @@ var ThemeManager = exports["default"] = /*#__PURE__*/function () {
|
|
|
92
91
|
var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
93
92
|
var _theme = theme || this.theme;
|
|
94
93
|
switch (_theme) {
|
|
95
|
-
case _theme2
|
|
94
|
+
case _theme2.ARTICLE_THEME.v2.pink:
|
|
96
95
|
{
|
|
97
96
|
return ThemeManager.colors.pink;
|
|
98
97
|
}
|
|
99
|
-
case _theme2
|
|
98
|
+
case _theme2.ARTICLE_THEME.v2.photo:
|
|
100
99
|
{
|
|
101
100
|
return ThemeManager.colors.photo;
|
|
102
101
|
}
|
|
103
|
-
case _theme2
|
|
102
|
+
case _theme2.ARTICLE_THEME.v2["default"]:
|
|
104
103
|
default:
|
|
105
104
|
{
|
|
106
105
|
return ThemeManager.colors["default"];
|