@twreporter/react-article-components - npm Package Compare versions

Comparing version 1.0.6-beta.1 to 1.0.6-beta.2

CHANGELOG.md

@@ -13,2 +13,10 @@ # CHANGELOG
 - Support `extend`, `normal`, `fullscreen` and `small` leading block with default theme
+
+#### Photo Theme(article:v2:photo) Support
+
+- Provide `primary`, `secondary` and `base` colors for photo theme
+- Support `extend`, `normal`, `fullscreen` and `small` leading block with photo theme
+
+#### UIManager
+
 - Introduce `UIManager(src/managers/ui-manager.js)` to handle theme and layout
@@ -15,0 +23,0 @@

dist/components/article-page.js

@@ -74,5 +74,15 @@ "use strict";
 
-function _templateObject16() {
+function _templateObject17() {
   var data = _taggedTemplateLiteral(["\n    width: 730px;\n  "]);
 
+  _templateObject17 = function _templateObject17() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject16() {
+  var data = _taggedTemplateLiteral(["\n    width: 550px;\n  "]);
+
   _templateObject16 = function _templateObject16() {
@@ -86,3 +96,3 @@ return data;
 function _templateObject15() {
-  var data = _taggedTemplateLiteral(["\n    width: 550px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    width: 100%;\n  "]);
 
@@ -97,3 +107,3 @@ _templateObject15 = function _templateObject15() {
 function _templateObject14() {
-  var data = _taggedTemplateLiteral(["\n    width: 100%;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    margin-top: 30px;\n  "]);
 
@@ -108,3 +118,3 @@ _templateObject14 = function _templateObject14() {
 function _templateObject13() {
-  var data = _taggedTemplateLiteral(["\n    margin-top: 30px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    margin-top: 20px;\n  "]);
 
@@ -119,3 +129,3 @@ _templateObject13 = function _templateObject13() {
 function _templateObject12() {
-  var data = _taggedTemplateLiteral(["\n    margin-top: 20px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    display: none;\n  "]);
 
@@ -130,3 +140,3 @@ _templateObject12 = function _templateObject12() {
 function _templateObject11() {
-  var data = _taggedTemplateLiteral(["\n    display: none;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding-top: 60px;\n    padding-bottom: 60px;\n  "]);
 
@@ -141,3 +151,3 @@ _templateObject11 = function _templateObject11() {
 function _templateObject10() {
-  var data = _taggedTemplateLiteral(["\n    padding-top: 60px;\n    padding-bottom: 60px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 60px;\n  "]);
 
@@ -152,3 +162,3 @@ _templateObject10 = function _templateObject10() {
 function _templateObject9() {
-  var data = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 60px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    width: 250px;\n    left: 53px;\n  "]);
 
@@ -163,3 +173,3 @@ _templateObject9 = function _templateObject9() {
 function _templateObject8() {
-  var data = _taggedTemplateLiteral(["\n    width: 250px;\n    left: 53px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    width: 180px;\n    left: 28px;\n  "]);
 
@@ -174,3 +184,3 @@ _templateObject8 = function _templateObject8() {
 function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n    width: 180px;\n    left: 28px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    position: absolute;\n    height: 100%;\n  "]);
 
@@ -185,3 +195,3 @@ _templateObject7 = function _templateObject7() {
 function _templateObject6() {
-  var data = _taggedTemplateLiteral(["\n    position: absolute;\n    height: 100%;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    display: none;\n  "]);
 
@@ -196,3 +206,3 @@ _templateObject6 = function _templateObject6() {
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n    display: none;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    max-width: 1440px;\n    margin: 0 auto;\n  "]);
 
@@ -207,3 +217,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n    max-width: 1440px;\n    margin: 0 auto;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    max-width: 1024px;\n    margin: 0 auto;\n  "]);
 
@@ -218,3 +228,3 @@ _templateObject4 = function _templateObject4() {
 function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n    max-width: 1024px;\n    margin: 0 auto;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding-top: 55px;\n  "]);
 
@@ -229,3 +239,3 @@ _templateObject3 = function _templateObject3() {
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n    padding-top: 55px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding-top: 60px;\n  "]);
 
@@ -240,3 +250,3 @@ _templateObject2 = function _templateObject2() {
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n    padding-top: 60px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    ", "\n  "]);
 
@@ -276,2 +286,11 @@ _templateObject = function _templateObject() {
 
+var SeprationLine =
+/*#__PURE__*/
+_styledComponents["default"].div.withConfig({
+  displayName: "article-page__SeprationLine",
+  componentId: "sc-1wuywdb-2"
+})(["", ""], _mediaQuery["default"].tabletAndAbove(_templateObject(), function (props) {
+  return props.visible ? (0, _styledComponents.css)(["position:relative;width:calc(100% + 20px);left:-10px;border-bottom:solid 1px #e2e2e2;padding-bottom:60px;"]) : (0, _styledComponents.css)(["padding-bottom:30px;"]);
+}));
+
 var BodyBackground =
@@ -281,6 +300,6 @@ /*#__PURE__*/
   displayName: "article-page__BodyBackground",
-  componentId: "sc-1wuywdb-2"
+  componentId: "sc-1wuywdb-3"
 })(["width:100%;background-color:", ";", " ", ""], function (props) {
   return props.theme.colors.base.background;
-}, _mediaQuery["default"].desktopOnly(_templateObject()), _mediaQuery["default"].hdOnly(_templateObject2()));
+}, _mediaQuery["default"].desktopOnly(_templateObject2()), _mediaQuery["default"].hdOnly(_templateObject3()));
 
@@ -291,4 +310,4 @@ var BodyBlock =
   displayName: "article-page__BodyBlock",
-  componentId: "sc-1wuywdb-3"
-})(["position:relative;width:100%;", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject3()), _mediaQuery["default"].hdOnly(_templateObject4()));
+  componentId: "sc-1wuywdb-4"
+})(["position:relative;width:100%;", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject4()), _mediaQuery["default"].hdOnly(_templateObject5()));
 
@@ -299,4 +318,4 @@ var DesktopAsideBlock =
   displayName: "article-page__DesktopAsideBlock",
-  componentId: "sc-1wuywdb-4"
-})(["", " ", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject5()), _mediaQuery["default"].desktopAndAbove(_templateObject6()), _mediaQuery["default"].desktopOnly(_templateObject7()), _mediaQuery["default"].hdOnly(_templateObject8()));
+  componentId: "sc-1wuywdb-5"
+})(["", " ", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject6()), _mediaQuery["default"].desktopAndAbove(_templateObject7()), _mediaQuery["default"].desktopOnly(_templateObject8()), _mediaQuery["default"].hdOnly(_templateObject9()));
 
@@ -307,4 +326,4 @@ var MetadataAndToolsBlock =
   displayName: "article-page__MetadataAndToolsBlock",
-  componentId: "sc-1wuywdb-5"
-})(["", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject9()), _mediaQuery["default"].tabletOnly(_templateObject10()), _mediaQuery["default"].desktopAndAbove(_templateObject11()));
+  componentId: "sc-1wuywdb-6"
+})(["", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject10()), _mediaQuery["default"].tabletOnly(_templateObject11()), _mediaQuery["default"].desktopAndAbove(_templateObject12()));
 
@@ -315,4 +334,4 @@ var ToolsBlock =
   displayName: "article-page__ToolsBlock",
-  componentId: "sc-1wuywdb-6"
-})(["", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject12()), _mediaQuery["default"].tabletOnly(_templateObject13()));
+  componentId: "sc-1wuywdb-7"
+})(["", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject13()), _mediaQuery["default"].tabletOnly(_templateObject14()));
 
@@ -323,4 +342,4 @@ var ContentBlock =
   displayName: "article-page__ContentBlock",
-  componentId: "sc-1wuywdb-7"
-})(["margin:0 auto;", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject14()), _mediaQuery["default"].desktopOnly(_templateObject15()), _mediaQuery["default"].hdOnly(_templateObject16()));
+  componentId: "sc-1wuywdb-8"
+})(["margin:0 auto;", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject15()), _mediaQuery["default"].desktopOnly(_templateObject16()), _mediaQuery["default"].hdOnly(_templateObject17()));
 
@@ -331,3 +350,3 @@ var RelatedBlock =
   displayName: "article-page__RelatedBlock",
-  componentId: "sc-1wuywdb-8"
+  componentId: "sc-1wuywdb-9"
 })(["margin:80px auto 0 auto;"]);
@@ -582,3 +601,5 @@ var _fontLevel = {
         }
-      }, _react["default"].createElement(BackgroundBlock, null, _react["default"].createElement(LeadingComponent, leadingProps), _react["default"].createElement(BodyBackground, null, _react["default"].createElement(BodyBlock, null, _react["default"].createElement(_mobileAside["default"], {
+      }, _react["default"].createElement(BackgroundBlock, null, _react["default"].createElement(LeadingComponent, leadingProps), _react["default"].createElement(SeprationLine, {
+        visible: uiManager.toRenderSeparationLineBetweenLeadingAndBody()
+      }), _react["default"].createElement(BodyBackground, null, _react["default"].createElement(BodyBlock, null, _react["default"].createElement(_mobileAside["default"], {
         backToTopic: backToTopic,
@@ -585,0 +606,0 @@ ref: this.mobileAsideRef

dist/components/aside/metadata.js

@@ -211,3 +211,13 @@ "use strict";
   componentId: "sc-1c3910m-12"
-})(["border:solid 1px #808080;border-radius:50px;padding:5px 10px 5px 10px;font-size:14px;font-weight:normal;color:#808080;margin-bottom:10px;margin-right:10px;&:before{content:'#';}&:hover{background-color:#fff;}"]);
+})(["border-style:solid;border-width:1px;border-color:", ";border-radius:50px;padding:5px 10px 5px 10px;font-size:14px;font-weight:normal;color:", ";margin-bottom:10px;margin-right:10px;&:before{content:'#';}&:hover{color:", ";border-color:", ";background-color:", ";}"], function (props) {
+  return props.theme.colors.base.button.border.color;
+}, function (props) {
+  return props.theme.colors.base.button.text.color;
+}, function (props) {
+  return props.theme.colors.base.button.hover.text.color;
+}, function (props) {
+  return props.theme.colors.base.button.hover.border.color;
+}, function (props) {
+  return props.theme.colors.base.button.hover.background.color;
+});
 
@@ -214,0 +224,0 @@ var TagsSection =

dist/components/body/annotation.js

@@ -100,3 +100,3 @@ "use strict";
   componentId: "sc-5e8oaw-4"
-})(["display:", ";background:#fff;font-size:", "px;line-height:1.43;letter-spacing:0.5px;font-weight:", ";border-top:2px solid ", ";padding:25px 11px;animation:", " 300ms ease;"], function (props) {
+})(["display:", ";background:#fff;font-size:", "px;line-height:2.11;letter-spacing:0.5px;color:#494949;font-weight:", ";border-top:2px solid ", ";padding:25px 11px;margin-bottom:10px;animation:", " 300ms ease;"], function (props) {
   return props.isExpanded ? 'block' : 'none';
@@ -103,0 +103,0 @@ }, function (props) {

dist/components/body/infobox.js

@@ -120,5 +120,3 @@ "use strict";
   componentId: "sc-1rp3uhy-0"
-})(["", " color:", ";line-height:1.9;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 auto 21px auto;"], widthCSS, function (props) {
-  return props.theme.colors.base.text;
-}, _typography["default"].font.weight.bold, function (props) {
+})(["", " color:#494949;line-height:1.9;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 auto 21px auto;"], widthCSS, _typography["default"].font.weight.bold, function (props) {
   return props.theme.fontSizeOffset + 20;
@@ -132,5 +130,3 @@ });
   componentId: "sc-1rp3uhy-1"
-})(["", " color:", ";line-height:1.75;letter-spacing:0.5px;font-weight:", ";font-size:", "px;margin:0 auto;"], widthCSS, function (props) {
-  return props.theme.colors.base.text;
-}, _typography["default"].font.weight.normal, function (props) {
+})(["", " color:#494949;line-height:1.75;letter-spacing:0.5px;font-weight:", ";font-size:", "px;margin:0 auto;"], widthCSS, _typography["default"].font.weight.normal, function (props) {
   return props.theme.fontSizeOffset + 16;
@@ -137,0 +133,0 @@ });

dist/components/donation-box.js

@@ -93,7 +93,5 @@ "use strict";
   componentId: "sc-1uszvr7-1"
-})(["display:inline-block;background:", ";padding-right:2px;box-shadow:5px 15px 0 #fff inset;font-size:22px;font-weight:", ";color:", ";margin-bottom:15px;", ""], function (props) {
+})(["display:inline-block;background:", ";padding-right:2px;box-shadow:5px 15px 0 #fff inset;font-size:22px;font-weight:", ";color:#262626;margin-bottom:15px;", ""], function (props) {
   return props.theme.colors.secondary.background;
-}, _typography["default"].font.weight.bold, function (props) {
-  return props.theme.colors.base.text;
-}, _mediaQuery["default"].mobileOnly(_templateObject2()));
+}, _typography["default"].font.weight.bold, _mediaQuery["default"].mobileOnly(_templateObject2()));
 
@@ -105,5 +103,3 @@ var Text =
   componentId: "sc-1uszvr7-2"
-})(["font-size:16px;line-height:1.75;color:", ";"], function (props) {
-  return props.theme.colors.base.text;
-});
+})(["font-size:16px;line-height:1.75;color:#262626;"]);
 
@@ -110,0 +106,0 @@ var Donate =

dist/components/leading/normal.js

 "use strict";
 
-function _templateObject20() {
+function _templateObject19() {
   var data = _taggedTemplateLiteral(["", ""]);
 
-  _templateObject20 = function _templateObject20() {
+  _templateObject19 = function _templateObject19() {
     return data;
@@ -38,6 +38,6 @@ };
 
-function _templateObject19() {
+function _templateObject18() {
   var data = _taggedTemplateLiteral(["\n        width: ", "px;\n      "]);
 
-  _templateObject19 = function _templateObject19() {
+  _templateObject18 = function _templateObject18() {
     return data;
@@ -49,6 +49,6 @@ };
 
-function _templateObject18() {
+function _templateObject17() {
   var data = _taggedTemplateLiteral(["\n        width: ", "px;\n      "]);
 
-  _templateObject18 = function _templateObject18() {
+  _templateObject17 = function _templateObject17() {
     return data;
@@ -60,6 +60,6 @@ };
 
-function _templateObject17() {
+function _templateObject16() {
   var data = _taggedTemplateLiteral(["\n        width: calc(", "/768*100%);\n      "]);
 
-  _templateObject17 = function _templateObject17() {
+  _templateObject16 = function _templateObject16() {
     return data;
@@ -71,6 +71,6 @@ };
 
-function _templateObject16() {
+function _templateObject15() {
   var data = _taggedTemplateLiteral(["\n        margin: 0 auto;\n      "]);
 
-  _templateObject16 = function _templateObject16() {
+  _templateObject15 = function _templateObject15() {
     return data;
@@ -82,6 +82,6 @@ };
 
-function _templateObject15() {
+function _templateObject14() {
   var data = _taggedTemplateLiteral(["\n        position: relative;\n        left: -10px;\n        /* 20px is border-(right|left) width of body */\n        width: calc(100% + 20px);\n      "]);
 
-  _templateObject15 = function _templateObject15() {
+  _templateObject14 = function _templateObject14() {
     return data;
@@ -111,15 +111,5 @@ };
 
-function _templateObject14() {
+function _templateObject13() {
   var data = _taggedTemplateLiteral(["\n    margin-top: 20px;\n  "]);
 
-  _templateObject14 = function _templateObject14() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject13() {
-  var data = _taggedTemplateLiteral(["\n    margin-left: calc(15/768*100%);\n    margin-right: calc(15/768*100%);\n  "]);
-
   _templateObject13 = function _templateObject13() {
@@ -133,3 +123,3 @@ return data;
 function _templateObject12() {
-  var data = _taggedTemplateLiteral(["\n    margin-left: calc(6/375*100%);\n    margin-right: calc(6/375*100%);\n  "]);
+  var data = _taggedTemplateLiteral(["\n    margin-left: calc(15/768*100%);\n    margin-right: calc(15/768*100%);\n  "]);
 
@@ -144,3 +134,3 @@ _templateObject12 = function _templateObject12() {
 function _templateObject11() {
-  var data = _taggedTemplateLiteral(["\n    font-size: 14px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    margin-left: calc(6/375*100%);\n    margin-right: calc(6/375*100%);\n  "]);
 
@@ -155,3 +145,3 @@ _templateObject11 = function _templateObject11() {
 function _templateObject10() {
-  var data = _taggedTemplateLiteral(["\n    line-height: 2.1;\n    font-size: 20px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    font-size: 14px;\n  "]);
 
@@ -166,3 +156,3 @@ _templateObject10 = function _templateObject10() {
 function _templateObject9() {
-  var data = _taggedTemplateLiteral(["\n    font-size: 16px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    line-height: 2.1;\n    font-size: 20px;\n  "]);
 
@@ -177,3 +167,3 @@ _templateObject9 = function _templateObject9() {
 function _templateObject8() {
-  var data = _taggedTemplateLiteral(["\n    margin-top: 20px;\n    margin-bottom: 30px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    font-size: 16px;\n  "]);
 
@@ -188,3 +178,3 @@ _templateObject8 = function _templateObject8() {
 function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n    font-size: 42px;\n    line-height: 1.38;\n    margin-top: 30px;\n    margin-bottom: 60px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    margin-top: 20px;\n    margin-bottom: 30px;\n  "]);
 
@@ -199,3 +189,3 @@ _templateObject7 = function _templateObject7() {
 function _templateObject6() {
-  var data = _taggedTemplateLiteral(["\n    font-size: 34px;\n    margin-top: 30px;\n    margin-bottom: 40px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    font-size: 42px;\n    line-height: 1.38;\n    margin-top: 30px;\n    margin-bottom: 60px;\n  "]);
 
@@ -210,3 +200,3 @@ _templateObject6 = function _templateObject6() {
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n    width: 718px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    font-size: 34px;\n    margin-top: 30px;\n    margin-bottom: 40px;\n  "]);
 
@@ -221,3 +211,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n    width: calc(513/768*100%);\n  "]);
+  var data = _taggedTemplateLiteral(["\n    width: 718px;\n  "]);
 
@@ -232,3 +222,3 @@ _templateObject4 = function _templateObject4() {
 function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n    width: calc(327/375*100%);\n  "]);
+  var data = _taggedTemplateLiteral(["\n    width: calc(513/768*100%);\n  "]);
 
@@ -243,3 +233,3 @@ _templateObject3 = function _templateObject3() {
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n    position: relative;\n    /* 20px is border-(right|left) width of body */\n    width: calc(100% + 20px);\n    left: -10px;\n    padding-bottom: 60px;\n    border-bottom: solid 1px #e2e2e2;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    width: calc(327/375*100%);\n  "]);
 
@@ -274,3 +264,5 @@ _templateObject2 = function _templateObject2() {
   componentId: "qpgeb2-0"
-})(["background-color:#f1f1f1;padding-top:60px;"]);
+})(["background-color:", ";padding-top:60px;"], function (props) {
+  return props.theme.colors.base.background;
+});
 
@@ -282,3 +274,3 @@ var ContentBlock =
   componentId: "qpgeb2-1"
-})(["letter-spacing:0.4px;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject()), _mediaQuery["default"].tabletAndAbove(_templateObject2()));
+})(["letter-spacing:0.4px;", ""], _mediaQuery["default"].mobileOnly(_templateObject()));
 
@@ -290,3 +282,3 @@ var TextBlock =
   componentId: "qpgeb2-2"
-})(["margin:0 auto;", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject3()), _mediaQuery["default"].tabletOnly(_templateObject4()), _mediaQuery["default"].desktopAndAbove(_templateObject5()));
+})(["margin:0 auto;", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject2()), _mediaQuery["default"].tabletOnly(_templateObject3()), _mediaQuery["default"].desktopAndAbove(_templateObject4()));
 
@@ -300,3 +292,3 @@ var Title =
   return props.theme.colors.base.text;
-}, _mediaQuery["default"].mobileOnly(_templateObject6()), _mediaQuery["default"].tabletAndAbove(_templateObject7()));
+}, _mediaQuery["default"].mobileOnly(_templateObject5()), _mediaQuery["default"].tabletAndAbove(_templateObject6()));
 
@@ -310,3 +302,3 @@ var Subtitle =
   return props.theme.colors.base.text;
-}, _mediaQuery["default"].tabletAndBelow(_templateObject8()), _mediaQuery["default"].mobileOnly(_templateObject9()), _mediaQuery["default"].tabletAndAbove(_templateObject10()));
+}, _mediaQuery["default"].tabletAndBelow(_templateObject7()), _mediaQuery["default"].mobileOnly(_templateObject8()), _mediaQuery["default"].tabletAndAbove(_templateObject9()));
 
@@ -340,3 +332,3 @@ var Topic =
   return props.theme.colors.base.lightText;
-}, _mediaQuery["default"].tabletAndBelow(_templateObject11()), _mediaQuery["default"].mobileOnly(_templateObject12()), _mediaQuery["default"].tabletAndAbove(_templateObject13()), _mediaQuery["default"].hdOnly(_templateObject14()));
+}, _mediaQuery["default"].tabletAndBelow(_templateObject10()), _mediaQuery["default"].mobileOnly(_templateObject11()), _mediaQuery["default"].tabletAndAbove(_templateObject12()), _mediaQuery["default"].hdOnly(_templateObject13()));
 
@@ -365,3 +357,3 @@ var NormalLeading =
     value: function getFigureCSS() {
-      return (0, _styledComponents.css)(["", " ", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject15()), _mediaQuery["default"].tabletAndAbove(_templateObject16()), _mediaQuery["default"].tabletOnly(_templateObject17(), this.figureWidth.tablet), _mediaQuery["default"].desktopOnly(_templateObject18(), this.figureWidth.desktop), _mediaQuery["default"].hdOnly(_templateObject19(), this.figureWidth.hd));
+      return (0, _styledComponents.css)(["", " ", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject14()), _mediaQuery["default"].tabletAndAbove(_templateObject15()), _mediaQuery["default"].tabletOnly(_templateObject16(), this.figureWidth.tablet), _mediaQuery["default"].desktopOnly(_templateObject17(), this.figureWidth.desktop), _mediaQuery["default"].hdOnly(_templateObject18(), this.figureWidth.hd));
     }
@@ -407,4 +399,4 @@ }, {
 
-var _StyledFigure = (0, _styledComponents["default"])(Figure)(_templateObject20(), function (p) {
+var _StyledFigure = (0, _styledComponents["default"])(Figure)(_templateObject19(), function (p) {
   return p._css;
 });

dist/components/related/card.js

@@ -233,5 +233,3 @@ "use strict";
   componentId: "uveoih-5"
-})(["position:absolute;left:0;bottom:15px;> p{display:none;}&:hover{width:100%;&::before{position:absolute;content:'';left:18px;top:100%;width:100%;height:12px;border-width:0 0 0 1px;border-style:solid;border-color:#afafaf;}> p{display:block;position:absolute;z-index:1;font-size:14px;line-height:1.43;color:", ";background-color:#fff;padding:15px;border-radius:4px;margin-top:12px;}}", ""], function (props) {
-  return props.theme.colors.base.lightText;
-}, _mediaQuery["default"].tabletAndBelow(_templateObject12()));
+})(["position:absolute;left:0;bottom:15px;> p{display:none;}&:hover{width:100%;&::before{position:absolute;content:'';left:18px;top:100%;width:100%;height:12px;border-width:0 0 0 1px;border-style:solid;border-color:#afafaf;}> p{display:block;position:absolute;z-index:1;font-size:14px;line-height:1.43;color:#808080;background-color:#fff;padding:15px;border-radius:4px;margin-top:12px;}}", ""], _mediaQuery["default"].tabletAndBelow(_templateObject12()));
 
@@ -243,5 +241,3 @@ var DescBT =
   componentId: "uveoih-6"
-})(["display:inline-block;font-size:14px;font-weight:", ";color:", ";background-color:#f1f1f1;border-radius:12.5px;line-height:1;padding:5px 10px;&::before{content:'\u7C21\u4ECB';}"], _typography["default"].font.weight.bold, function (props) {
-  return props.theme.colors.base.lightText;
-});
+})(["display:inline-block;font-size:14px;font-weight:", ";color:#808080;line-height:1;padding:5px 10px;&::before{content:'\u66F4\u591A\u5167\u5BB9';}"], _typography["default"].font.weight.bold);
 
@@ -248,0 +244,0 @@ var DescInfo =

dist/managers/theme-manager.js

@@ -51,3 +51,24 @@ "use strict";
   lightText: '#808080',
-  button: '#808080',
+  button: {
+    text: {
+      color: '#808080'
+    },
+    border: {
+      color: '#808080'
+    },
+    background: {
+      color: 'initial'
+    },
+    hover: {
+      text: {
+        color: '#808080'
+      },
+      border: {
+        color: '#808080'
+      },
+      background: {
+        color: '#fff'
+      }
+    }
+  },
   line: '#afafaf',
@@ -89,2 +110,6 @@ background: '#f4f4f4'
         case _theme2["default"].article.v2.photo:
+          {
+            return ThemeManager.colors.photo;
+          }
+
         case _theme2["default"].article.v2["default"]:
@@ -126,2 +151,39 @@ default:
     })
+  },
+  photo: {
+    primary: {
+      text: '#a67a44',
+      accent: '#a67a44',
+      support: '#d0a67d',
+      background: '#08192d'
+    },
+    secondary: secondaryColorSet,
+    base: {
+      text: 'rgba(255, 255, 255, 0.8)',
+      lightText: 'rgba(255, 255, 255, 0.5)',
+      button: {
+        text: {
+          color: '#808080'
+        },
+        border: {
+          color: '#808080'
+        },
+        background: {
+          color: 'initial'
+        },
+        hover: {
+          text: {
+            color: '#fff'
+          },
+          border: {
+            color: '#fff'
+          },
+          background: {
+            color: 'initial'
+          }
+        }
+      },
+      line: 'rgba(216, 216, 216, 0.2)',
+      background: '#08192d'
+    }
   }
@@ -128,0 +190,0 @@ /**

dist/managers/ui-manager.js

@@ -113,2 +113,11 @@ "use strict";
     }
+  }, {
+    key: "toRenderSeparationLineBetweenLeadingAndBody",
+    value: function toRenderSeparationLineBetweenLeadingAndBody() {
+      if (this.getTheme() === _theme["default"].article.v2["default"]) {
+        return true;
+      }
+
+      return false;
+    }
   }]);
@@ -115,0 +124,0 @@

package.json

 {
   "name": "@twreporter/react-article-components",
-  "version": "1.0.6-beta.1",
+  "version": "1.0.6-beta.2",
   "description": "The Reporter react article components, which are used in article page",
@@ -5,0 +5,0 @@ "main": "dist/components/article-page.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

300875

increased by0.7%

Lines of code

6095

increased by1.31%

No dependency changes