@twreporter/index-page 1.2.6-rc.2 → 1.2.7-rc.2

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.7-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.2.7-rc.1...@twreporter/index-page@1.2.7-rc.2) (2021-10-25)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
+## [1.2.7-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.2.7-rc.0...@twreporter/index-page@1.2.7-rc.1) (2021-10-20)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
+## [1.2.7-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.2.6...@twreporter/index-page@1.2.7-rc.0) (2021-10-20)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
+## [1.2.6](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.2.6-rc.2...@twreporter/index-page@1.2.6) (2021-10-12)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
 ## [1.2.6-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.2.6-rc.1...@twreporter/index-page@1.2.6-rc.2) (2021-10-07)
 
 **Note:** Version bump only for package @twreporter/index-page

package/lib/components/category-section.js

@@ -7,39 +7,41 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _styleUtils = require("../utils/style-utils");
-
-var _getHref = require("../utils/getHref");
+var _post = _interopRequireDefault(require("./prop-types/post"));
 
-var _bottomLink = _interopRequireDefault(require("./common-utils/bottom-link"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+var _react = _interopRequireDefault(require("react"));
 
-var _get = _interopRequireDefault(require("lodash/get"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _imgWrapper = _interopRequireDefault(require("./common-utils/img-wrapper"));
+var _sectionAnimationWrapper = _interopRequireDefault(require("./animations/section-animation-wrapper"));
 
-var _mobileFlexSwipeable = _interopRequireDefault(require("./mobile-flex-swipeable"));
+var _styleUtils = require("../utils/style-utils");
 
-var _mobileList = _interopRequireDefault(require("./common-utils/mobile-list"));
+var _getHref = require("../utils/getHref");
 
-var _post = _interopRequireDefault(require("./prop-types/post"));
+var _mobileFlexSwipeable = _interopRequireDefault(require("./mobile-flex-swipeable"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _bottomLink = _interopRequireDefault(require("./common-utils/bottom-link"));
 
-var _react = _interopRequireDefault(require("react"));
+var _mobileList = _interopRequireDefault(require("./common-utils/mobile-list"));
 
 var _section = _interopRequireDefault(require("./common-utils/section"));
 
-var _sectionAnimationWrapper = _interopRequireDefault(require("./animations/section-animation-wrapper"));
-
 var _sectionName = _interopRequireDefault(require("./common-utils/section-name"));
 
+var _twreporterLink = _interopRequireDefault(require("./common-utils/twreporter-link"));
+
+var _imgWrapper = _interopRequireDefault(require("./common-utils/img-wrapper"));
+
 var _sectionStrings = _interopRequireDefault(require("../constants/section-strings"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _color = _interopRequireDefault(require("../constants/color"));
 
-var _twreporterLink = _interopRequireDefault(require("./common-utils/twreporter-link"));
+var _font = _interopRequireDefault(require("../constants/font"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
@@ -73,7 +75,7 @@ var _ = {
 var desktopMinWidth = _styleUtils.breakPoints.desktopMinWidth;
 var tabletMinWidth = _styleUtils.breakPoints.tabletMinWidth;
 var mobileWidth = _styleUtils.breakPoints.mobileMaxWidth;
-var backgroundColor = '#e2e2e2';
+var backgroundColor = _color["default"].gray;
 var mockup = {
   mobile: {
     titleWidth: 209,
@@ -116,7 +118,7 @@ var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var CategoryName = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "category-section__CategoryName",
   componentId: "sc-1vfzdxm-5"
-})(["background-color:", ";width:100%;color:#4a4949;font-weight:", ";line-height:1.4;text-align:center;font-size:20px;padding-bottom:8px;"], backgroundColor, _fontWeight.sourceHanSansTC.bold);
+})(["background-color:", ";width:100%;color:", ";font-weight:", ";line-height:1.4;text-align:center;font-size:20px;padding-bottom:8px;"], backgroundColor, _color["default"].darkGray, _font["default"].weight.bold);
 
 var TextFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "category-section__TextFrame",
@@ -126,7 +128,7 @@ var TextFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "category-section__Title",
   componentId: "sc-1vfzdxm-7"
-})(["font-weight:", ";font-size:20px;color:#4a4949;line-height:1.4;width:92%;margin:0 auto;@media (max-width:", "){width:", "%;}"], _fontWeight.sourceHanSansTC.bold, mobileWidth, mockup.mobile.titleWidth / mockup.mobile.titleFrameWidth * 100);
+})(["font-family:", ";font-weight:", ";font-size:20px;color:", ";line-height:1.4;width:92%;margin:0 auto;@media (max-width:", "){width:", "%;}"], _font["default"].family.title, _font["default"].weight.bold, _color["default"].darkGray, mobileWidth, mockup.mobile.titleWidth / mockup.mobile.titleFrameWidth * 100);
 
 var More = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "category-section__More",

package/lib/components/common-utils/bottom-link.js

@@ -13,6 +13,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var DarkBgIcon = function DarkBgIcon(props) {
@@ -53,16 +55,12 @@ LinkIcon.defaultProps = {
   strokeLinecap: "round",
   strokeLinejoin: "round"
 };
-var colors = {
-  lightBlue: '#5eb2fe',
-  blue: '#5eb2fd'
-};
 
 var Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bottom-link__Wrapper",
   componentId: "r5njx2-0"
 })(["font-size:14px;color:", ";cursor:pointer;display:inline-block;> span{padding-right:7px;}svg{width:7px;margin-bottom:-1px;margin-left:7px;transition:0.3s all ease-out;}&:hover{> svg{transform:translateX(5px);}}"], function (props) {
-  return props.isDarkBg ? colors.lightBlue : colors.blue;
+  return props.isDarkBg ? _color["default"].lightBlue : _color["default"].blue;
 });
 
 exports.Wrapper = Wrapper;
@@ -71,7 +69,7 @@ var TextSpan = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "bottom-link__TextSpan",
   componentId: "r5njx2-1"
 })(["color:", ";"], function (props) {
-  return props.isDarkBg ? colors.lightBlue : colors.blue;
+  return props.isDarkBg ? _color["default"].lightBlue : _color["default"].blue;
 });
 
 exports.TextSpan = TextSpan;
@@ -80,7 +78,7 @@ var A = /*#__PURE__*/_styledComponents["default"].a.withConfig({
   displayName: "bottom-link__A",
   componentId: "r5njx2-2"
 })(["text-decoration:none;&:visited{color:", ";}"], function (props) {
-  return props.isDarkBg ? colors.lightBlue : colors.blue;
+  return props.isDarkBg ? _color["default"].lightBlue : _color["default"].blue;
 });
 
 exports.A = A;

package/lib/components/common-utils/category-name.js

@@ -7,12 +7,14 @@ exports["default"] = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var CategoryName = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "category-name__CategoryName",
   componentId: "a6uqyy-0"
-})(["color:#c4333e;font-size:12px;"]);
+})(["color:", ";font-size:12px;"], _color["default"].red);
 
 var _default = CategoryName;
 exports["default"] = _default;

package/lib/components/common-utils/hover-effect.js

@@ -9,12 +9,14 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styleUtils = require("../../utils/style-utils");
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var HoverEffect = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hover-effect__HoverEffect",
   componentId: "e7izmf-0"
-})(["cursor:pointer;text-decoration:none;color:#4a4949;@media (min-width:", "){&:hover{opacity:0.7;}transition:200ms opacity linear;}"], _styleUtils.breakPoints.tabletMinWidth);
+})(["cursor:pointer;text-decoration:none;color:", ";@media (min-width:", "){&:hover{opacity:0.7;}transition:200ms opacity linear;}"], _color["default"].darkGray, _styleUtils.breakPoints.tabletMinWidth);
 
 var _default = HoverEffect;
 exports["default"] = _default;

package/lib/components/common-utils/section-name.js

@@ -9,6 +9,8 @@ var _styleUtils = require("../../utils/style-utils");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _color = _interopRequireDefault(require("../../constants/color"));
+
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -18,7 +20,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var SectionName = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "section-name__SectionName",
   componentId: "ezov0u-0"
-})(["display:none;", ""], _styleUtils.finalMedia.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n    font-size: 12px;\n    position: absolute;\n    letter-spacing: 0.4px;\n    z-index: 3;\n    top: -8px;\n    left: 0;\n    right: 0;\n    text-align: center;\n    >span {\n      color: #fff;\n      padding-left: 5px;\n      padding-right: 5px;\n      background-color: #c3000b;\n    }\n  "]))));
+})(["display:none;", ""], _styleUtils.finalMedia.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n    font-size: 12px;\n    position: absolute;\n    letter-spacing: 0.4px;\n    z-index: 3;\n    top: -8px;\n    left: 0;\n    right: 0;\n    text-align: center;\n    >span {\n      color: ", ";\n      padding-left: 5px;\n      padding-right: 5px;\n      background-color: ", ";\n    }\n  "])), _color["default"].white, _color["default"].red));
 
 var _default = SectionName;
 exports["default"] = _default;

package/lib/components/donation-box-section.js

@@ -9,14 +9,16 @@ exports["default"] = void 0;
 
 var _styleUtils = require("../utils/style-utils");
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
-
 var _donationLink = _interopRequireDefault(require("@twreporter/react-components/lib/donation-link"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _color = _interopRequireDefault(require("../constants/color"));
+
+var _font = _interopRequireDefault(require("../constants/font"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -70,17 +72,17 @@ var mobileContentWidthPct = mockup.contentWidth / mockup.defaultWidth * 100;
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "donation-box-section__Container",
   componentId: "sc-1xxgww4-0"
-})(["background-color:#a67a44;padding-top:30px;padding-bottom:30px;", ""], _styleUtils.finalMedia.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 60px;\n  "]))));
+})(["background-color:", ";padding-top:30px;padding-bottom:30px;", ""], _color["default"].brown, _styleUtils.finalMedia.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 60px;\n  "]))));
 
 var ContentContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "donation-box-section__ContentContainer",
   componentId: "sc-1xxgww4-1"
-})(["display:flex;justify-content:space-between;align-items:center;max-width:1024px;margin:0 auto;padding:0 100px;color:#ffffff;h3{margin:0;font-size:32px;font-weight:", ";line-height:1.63;}p{margin-top:10px;font-size:14px;line-height:1.57;text-align:left;}", " ", " ", ""], _fontWeight.sourceHanSansTC.bold, _styleUtils.finalMedia.overDesktop(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-width: 1440px;\n    padding: 0 219px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 110px;\n    p{\n      margin-top: 17px;\n    }\n  "]))), _styleUtils.finalMedia.mobile(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: ", "%;\n    display: block;\n    text-align: center;\n    padding: 0;\n    h3{\n      font-size: 24px;\n      line-height: 2.17;\n    }\n    p{\n      margin-top: 0;\n    }\n  "])), mobileContentWidthPct));
+})(["display:flex;justify-content:space-between;align-items:center;max-width:1024px;margin:0 auto;padding:0 100px;color:", ";h3{margin:0;font-size:32px;font-weight:", ";font-family:", ";line-height:1.63;}p{margin-top:10px;font-size:14px;line-height:1.57;text-align:left;}", " ", " ", ""], _color["default"].white, _font["default"].weight.bold, _font["default"].family.title, _styleUtils.finalMedia.overDesktop(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-width: 1440px;\n    padding: 0 219px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 110px;\n    p{\n      margin-top: 17px;\n    }\n  "]))), _styleUtils.finalMedia.mobile(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: ", "%;\n    display: block;\n    text-align: center;\n    padding: 0;\n    h3{\n      font-size: 24px;\n      line-height: 2.17;\n    }\n    p{\n      margin-top: 0;\n    }\n  "])), mobileContentWidthPct));
 
 var DonateButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "donation-box-section__DonateButton",
   componentId: "sc-1xxgww4-2"
-})(["a{width:116px;height:40px;border-radius:20px;background:#ffffff;border:none;color:#a67a44;font-size:16px;cursor:pointer;display:table;", " ", " span{display:table-cell;vertical-align:middle;text-align:center;font-weight:", ";}}"], _styleUtils.finalMedia.tablet(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: absolute;\n      right: 110px;\n      top: 9px;\n    "]))), _styleUtils.finalMedia.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin: 40px auto 0 auto;\n    "]))), _fontWeight.sourceHanSansTC.bold);
+})(["a{width:116px;height:40px;border-radius:20px;background:", ";border:none;color:", ";font-size:16px;cursor:pointer;display:table;", " ", " span{display:table-cell;vertical-align:middle;text-align:center;font-weight:", ";}}"], _color["default"].white, _color["default"].brown, _styleUtils.finalMedia.tablet(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: absolute;\n      right: 110px;\n      top: 9px;\n    "]))), _styleUtils.finalMedia.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin: 40px auto 0 auto;\n    "]))), _font["default"].weight.bold);
 
 var TextColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "donation-box-section__TextColumn",

package/lib/components/editor-picks-mobile.js

@@ -7,15 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _categoryName = _interopRequireDefault(require("./common-utils/category-name"));
+var _react = _interopRequireDefault(require("react"));
 
-var _imgWrapper = _interopRequireDefault(require("./common-utils/img-wrapper"));
+var _reactSwipeable = _interopRequireDefault(require("react-swipeable"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _post = _interopRequireDefault(require("./prop-types/post"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _getHref = require("../utils/getHref");
+
+var _styleUtils = require("../utils/style-utils");
 
 var _mobileFlexSwipeable = _interopRequireDefault(require("./mobile-flex-swipeable"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _categoryName = _interopRequireDefault(require("./common-utils/category-name"));
 
-var _react = _interopRequireDefault(require("react"));
+var _imgWrapper = _interopRequireDefault(require("./common-utils/img-wrapper"));
 
 var _section = _interopRequireDefault(require("./common-utils/section"));
 
@@ -23,25 +33,17 @@ var _sectionName = _interopRequireDefault(require("./common-utils/section-name")
 
 var _swipableMixin = _interopRequireDefault(require("./common-utils/swipable-mixin"));
 
-var _reactSwipeable = _interopRequireDefault(require("react-swipeable"));
-
 var _twreporterLink = _interopRequireDefault(require("./common-utils/twreporter-link"));
 
-var _get = _interopRequireDefault(require("lodash/get"));
-
-var _post = _interopRequireDefault(require("./prop-types/post"));
-
 var _sectionStrings = _interopRequireDefault(require("../constants/section-strings"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _color = _interopRequireDefault(require("../constants/color"));
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
-
-var _getHref = require("../utils/getHref");
+var _font = _interopRequireDefault(require("../constants/font"));
 
 var _mobileMockupSpecification = require("../constants/mobile-mockup-specification");
 
-var _styleUtils = require("../utils/style-utils");
+var _get = _interopRequireDefault(require("lodash/get"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -81,7 +83,7 @@ var mockup = {
 var CarouselContainer = /*#__PURE__*/(0, _styledComponents["default"])(_section["default"]).withConfig({
   displayName: "editor-picks-mobile__CarouselContainer",
   componentId: "sc-666dlb-0"
-})(["padding-top:0;background:#ffffff;@media (min-width:", "){display:none;}"], _styleUtils.breakPoints.tabletMinWidth);
+})(["padding-top:0;background:", ";@media (min-width:", "){display:none;}"], _color["default"].white, _styleUtils.breakPoints.tabletMinWidth);
 
 var TextFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks-mobile__TextFrame",
@@ -96,17 +98,17 @@ var Category = /*#__PURE__*/(0, _styledComponents["default"])(_categoryName["def
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks-mobile__Title",
   componentId: "sc-666dlb-3"
-})(["top:50px;left:50%;transform:translateX(-50%);width:", "%;font-size:24px;font-weight:", ";color:#4a4949;position:absolute;"], _mobileMockupSpecification.itemWidthPct, _fontWeight.sourceHanSansTC.bold);
+})(["top:50px;left:50%;transform:translateX(-50%);width:", "%;font-size:24px;font-weight:", ";font-family:", ";color:", ";position:absolute;"], _mobileMockupSpecification.itemWidthPct, _font["default"].weight.bold, _font["default"].family.title, _color["default"].darkGray);
 
 var TitleSpan = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "editor-picks-mobile__TitleSpan",
   componentId: "sc-666dlb-4"
-})(["width:100%;height:3.99;", ";"], (0, _styleUtils.truncate)('absolute', 1.33, 3, "#ffffff", 'center'));
+})(["width:100%;height:3.99;", ";"], (0, _styleUtils.truncate)('absolute', 1.33, 3, _color["default"].white, 'center'));
 
 var Description = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks-mobile__Description",
   componentId: "sc-666dlb-5"
-})(["top:150px;left:50%;font-size:18px;transform:translateX(-50%);width:", "%;text-align:left;color:#4a4949;", ";"], _mobileMockupSpecification.itemWidthPct, (0, _styleUtils.truncate)('absolute', 1.43, 3, 'white'));
+})(["top:150px;left:50%;font-size:18px;transform:translateX(-50%);width:", "%;text-align:left;color:", ";", ";"], _mobileMockupSpecification.itemWidthPct, _color["default"].darkGray, (0, _styleUtils.truncate)('absolute', 1.43, 3, 'white'));
 
 var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks-mobile__ImgFrame",

package/lib/components/editor-picks.js

@@ -7,33 +7,35 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _categoryName = _interopRequireDefault(require("./common-utils/category-name"));
+var _react = _interopRequireDefault(require("react"));
 
-var _sectionContentWrapper = _interopRequireDefault(require("./common-utils/section-content-wrapper"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _editorPicksMobile = _interopRequireDefault(require("./editor-picks-mobile"));
+var _post = _interopRequireDefault(require("./prop-types/post"));
 
-var _imgWrapper = _interopRequireDefault(require("./common-utils/img-wrapper"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _getHref = require("../utils/getHref");
 
-var _react = _interopRequireDefault(require("react"));
+var _styleUtils = require("../utils/style-utils");
 
-var _twreporterLink = _interopRequireDefault(require("./common-utils/twreporter-link"));
+var _editorPicksMobile = _interopRequireDefault(require("./editor-picks-mobile"));
 
-var _clone = _interopRequireDefault(require("lodash/clone"));
+var _imgWrapper = _interopRequireDefault(require("./common-utils/img-wrapper"));
 
-var _get = _interopRequireDefault(require("lodash/get"));
+var _categoryName = _interopRequireDefault(require("./common-utils/category-name"));
 
-var _post = _interopRequireDefault(require("./prop-types/post"));
+var _sectionContentWrapper = _interopRequireDefault(require("./common-utils/section-content-wrapper"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _twreporterLink = _interopRequireDefault(require("./common-utils/twreporter-link"));
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+var _color = _interopRequireDefault(require("../constants/color"));
 
-var _getHref = require("../utils/getHref");
+var _font = _interopRequireDefault(require("../constants/font"));
 
-var _styleUtils = require("../utils/style-utils");
+var _clone = _interopRequireDefault(require("lodash/clone"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -61,6 +63,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
+// assets
 var LeftArrowIcon = function LeftArrowIcon(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("title", null, "Left Arrow"), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M13 2.308l-10 10 10 10",
@@ -93,6 +96,11 @@ RightArrowIcon.defaultProps = {
   height: "24",
   viewBox: "0 0 15 24",
   xmlns: "http://www.w3.org/2000/svg"
+}; // lodash
+
+var _ = {
+  get: _get["default"],
+  clone: _clone["default"]
 };
 var mockup = {
   img: {
@@ -103,10 +111,6 @@ var mockup = {
     }
   }
 };
-var _ = {
-  get: _get["default"],
-  clone: _clone["default"]
-};
 
 var swapArrayElements = function swapArrayElements(arr, indexA, indexB) {
   if (Array.isArray(arr) && arr.length > 2) {
@@ -184,9 +188,9 @@ var MiddleCategory = /*#__PURE__*/(0, _styledComponents["default"])(_categoryNam
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__Title",
   componentId: "sc-1bdfw2o-9"
-})(["font-size:", ";font-weight:", ";color:#4a4949;width:", ";position:absolute;text-align:center;line-height:", ";max-height:", ";top:0;left:50%;transform:translateX(-50%);overflow:hidden;", " ", ""], function (props) {
+})(["font-size:", ";font-weight:", ";font-family:", ";color:", ";width:", ";position:absolute;text-align:center;line-height:", ";max-height:", ";top:0;left:50%;transform:translateX(-50%);overflow:hidden;", " ", ""], function (props) {
   return props.middle ? "32px" : "16px";
-}, _fontWeight.sourceHanSansTC.bold, function (props) {
+}, _font["default"].weight.bold, _font["default"].family.title, _color["default"].darkGray, function (props) {
   return props.middle ? '450px' : '150px';
 }, function (props) {
   return props.middle ? '1.25' : '1.25';
@@ -201,18 +205,18 @@ var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Description = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__Description",
   componentId: "sc-1bdfw2o-10"
-})(["position:absolute;font-size:16px;width:450px;top:", ";left:", ";color:#4a4949;transform:translateX(-50%);", ";@media (min-width:", "){", " transition:.2s opacity linear;}z-index:2;"], function (props) {
+})(["position:absolute;font-size:16px;width:450px;top:", ";left:", ";color:", ";transform:translateX(-50%);", ";@media (min-width:", "){", " transition:.2s opacity linear;}z-index:2;"], function (props) {
   return props.top ? props.top : '0';
 }, function (props) {
   return props.left ? props.left : '0';
-}, (0, _styleUtils.truncate)('absolute', 1.43, 2, 'white'), _styleUtils.breakPoints.tabletMinWidth, function (props) {
+}, _color["default"].darkGray, (0, _styleUtils.truncate)('absolute', 1.43, 2, 'white'), _styleUtils.breakPoints.tabletMinWidth, function (props) {
   return props.ifHover ? 'opacity: 0.7;' : '';
 });
 
 var HoverEffect = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__HoverEffect",
   componentId: "sc-1bdfw2o-11"
-})(["cursor:pointer;text-decoration:none;color:#4a4949;@media (min-width:", "){", " transition:.2s opacity linear;}"], _styleUtils.breakPoints.tabletMinWidth, function (props) {
+})(["cursor:pointer;text-decoration:none;color:", ";@media (min-width:", "){", " transition:.2s opacity linear;}"], _color["default"].darkGray, _styleUtils.breakPoints.tabletMinWidth, function (props) {
   return props.ifHover ? 'opacity: 0.7;' : 'opacity: 1;';
 });
 

package/lib/components/infographic-section.js

@@ -5,6 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _post = _interopRequireDefault(require("./prop-types/post"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styleUtils = require("../utils/style-utils");
+
+var _getHref = require("../utils/getHref");
+
 var _bottomLink = _interopRequireDefault(require("./common-utils/bottom-link"));
 
 var _categoryName = _interopRequireDefault(require("./common-utils/category-name"));
@@ -15,10 +27,6 @@ var _mobileFlexSwipeable = _interopRequireDefault(require("./mobile-flex-swipeab
 
 var _mobileList = _interopRequireDefault(require("./common-utils/mobile-list"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
 var _section = _interopRequireDefault(require("./common-utils/section"));
 
 var _sectionAnimationWrapper = _interopRequireDefault(require("./animations/section-animation-wrapper"));
@@ -27,19 +35,13 @@ var _sectionName = _interopRequireDefault(require("./common-utils/section-name")
 
 var _twreporterLink = _interopRequireDefault(require("./common-utils/twreporter-link"));
 
-var _get = _interopRequireDefault(require("lodash/get"));
-
-var _post = _interopRequireDefault(require("./prop-types/post"));
-
 var _sectionStrings = _interopRequireDefault(require("../constants/section-strings"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _styleUtils = require("../utils/style-utils");
+var _color = _interopRequireDefault(require("../constants/color"));
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+var _font = _interopRequireDefault(require("../constants/font"));
 
-var _getHref = require("../utils/getHref");
+var _get = _interopRequireDefault(require("lodash/get"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
@@ -88,7 +90,7 @@ var mockup = {
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infographic-section__Container",
   componentId: "sc-2fohll-0"
-})(["background-color:#f2f2f2;"]);
+})(["background-color:", ";"], _color["default"].lightGray);
 
 var UpperList = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infographic-section__UpperList",
@@ -112,12 +114,12 @@ var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var WordBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infographic-section__WordBlock",
   componentId: "sc-2fohll-5"
-})(["background-color:#fff;width:430px;min-height:115px;padding:8px 20px 15px 12px;", " ", " ", ""], _styleUtils.finalMedia.desktop(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 290px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin: 0 auto;\n    width: 220px;\n  "]))), _styleUtils.finalMedia.mobile(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n  "]))));
+})(["background-color:", ";width:430px;min-height:115px;padding:8px 20px 15px 12px;", " ", " ", ""], _color["default"].white, _styleUtils.finalMedia.desktop(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 290px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin: 0 auto;\n    width: 220px;\n  "]))), _styleUtils.finalMedia.mobile(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n  "]))));
 
 var Title = /*#__PURE__*/_styledComponents["default"].h3.withConfig({
   displayName: "infographic-section__Title",
   componentId: "sc-2fohll-6"
-})(["margin:0;font-weight:", ";font-size:20px;color:#4a4a4a;@media (min-width:", "){", ";}", ""], _fontWeight.sourceHanSansTC.bold, _styleUtils.breakPoints.desktopMinWidth, (0, _styleUtils.truncate)('relative', 1.4, 2, '#fff'), _styleUtils.finalMedia.tablet(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    font-size: 16px;\n    ", ";\n  "])), (0, _styleUtils.truncate)('relative', 1.4, 3, '#fff')));
+})(["margin:0;font-weight:", ";font-family:", ";font-size:20px;color:", ";@media (min-width:", "){", ";}", ""], _font["default"].weight.bold, _font["default"].family.title, _color["default"].darkGray, _styleUtils.breakPoints.desktopMinWidth, (0, _styleUtils.truncate)('relative', 1.4, 2, _color["default"].white), _styleUtils.finalMedia.tablet(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    font-size: 16px;\n    ", ";\n  "])), (0, _styleUtils.truncate)('relative', 1.4, 3, _color["default"].white)));
 
 var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infographic-section__ImgFrame",

package/lib/components/latest-section.js

@@ -7,29 +7,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _categoryName = _interopRequireDefault(require("./common-utils/category-name"));
-
-var _imgWrapper = _interopRequireDefault(require("./common-utils/img-wrapper"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
+var _post = _interopRequireDefault(require("./prop-types/post"));
 
-var _sectionContentWrapper = _interopRequireDefault(require("./common-utils/section-content-wrapper"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _twreporterLink = _interopRequireDefault(require("./common-utils/twreporter-link"));
+var _getHref = require("../utils/getHref");
 
-var _get = _interopRequireDefault(require("lodash/get"));
+var _styleUtils = require("../utils/style-utils");
 
-var _post = _interopRequireDefault(require("./prop-types/post"));
+var _categoryName = _interopRequireDefault(require("./common-utils/category-name"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _imgWrapper = _interopRequireDefault(require("./common-utils/img-wrapper"));
 
-var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+var _sectionContentWrapper = _interopRequireDefault(require("./common-utils/section-content-wrapper"));
 
-var _getHref = require("../utils/getHref");
+var _twreporterLink = _interopRequireDefault(require("./common-utils/twreporter-link"));
 
-var _styleUtils = require("../utils/style-utils");
+var _color = _interopRequireDefault(require("../constants/color"));
+
+var _font = _interopRequireDefault(require("../constants/font"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
@@ -84,7 +86,7 @@ var headerPadding = {
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "latest-section__Container",
   componentId: "hzxpx3-0"
-})(["background-color:#f2f2f2;position:relative;", ""], _styleUtils.finalMedia.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 0;\n  "]))));
+})(["background-color:", ";position:relative;", ""], _color["default"].lightGray, _styleUtils.finalMedia.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 0;\n  "]))));
 
 var ContentContainer = /*#__PURE__*/(0, _styledComponents["default"])(_sectionContentWrapper["default"]).withConfig({
   displayName: "latest-section__ContentContainer",
@@ -116,7 +118,7 @@ var Category = /*#__PURE__*/(0, _styledComponents["default"])(_categoryName["def
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "latest-section__Title",
   componentId: "hzxpx3-6"
-})(["height:auto;font-size:16px;font-weight:", ";color:#4a4949;"], _fontWeight.sourceHanSansTC.bold);
+})(["height:auto;font-size:16px;font-weight:", ";font-family:", ";color:", ";"], _font["default"].weight.bold, _font["default"].family.title, _color["default"].darkGray);
 
 var LatestSection = /*#__PURE__*/function (_React$Component) {
   _inherits(LatestSection, _React$Component);