@twreporter/index-page 2.1.9 → 2.2.0-rc.0

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _font = require("@twreporter/core/lib/constants/font");
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _color = require("@twreporter/core/lib/constants/color");
+var _externalLinks = _interopRequireDefault(require("@twreporter/core/lib/constants/external-links"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+// assets
+var ArrowIcon = function ArrowIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("title", null, "ic/chevron_right"), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("path", {
+    id: "a",
+    d: "M2 0L.59 1.41 5.17 6 .59 10.59 2 12l6-6z"
+  })), /*#__PURE__*/_react["default"].createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react["default"].createElement("mask", {
+    id: "b",
+    fill: "#fff"
+  }, /*#__PURE__*/_react["default"].createElement("use", {
+    xlinkHref: "#a"
+  })), /*#__PURE__*/_react["default"].createElement("g", {
+    mask: "url(#b)",
+    fill: "#FFF"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M-8-6h24v24H-8z"
+  }))));
+};
+ArrowIcon.defaultProps = {
+  width: "8",
+  height: "12",
+  viewBox: "0 0 8 12",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink"
+}; // @twreporter
+var mockup = {
+  defaultWidth: 320,
+  contentWidth: 238
+};
+var mobileContentWidthPct = mockup.contentWidth / mockup.defaultWidth * 100;
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "new-donation-box-section__Container",
+  componentId: "sc-19q3hlt-0"
+})(["background-color:", ";padding-top:30px;padding-bottom:30px;", ""], _color.colorGrayscale.black, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 60px;\n  "]))));
+var ContentContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "new-donation-box-section__ContentContainer",
+  componentId: "sc-19q3hlt-1"
+})(["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.colorGrayscale.white, _font.fontWeight.bold, _font.fontFamily.title, _mediaQuery["default"].hdOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-width: 1440px;\n    padding: 0 219px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 110px;\n    p{\n      margin-top: 17px;\n    }\n  "]))), _mediaQuery["default"].mobileOnly(_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: "new-donation-box-section__DonateButton",
+  componentId: "sc-19q3hlt-2"
+})(["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.colorGrayscale.white, _color.colorBrand.heavy, _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: absolute;\n      right: 110px;\n      top: 9px;\n    "]))), _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin: 40px auto 0 auto;\n    "]))), _font.fontWeight.bold);
+var TextColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "new-donation-box-section__TextColumn",
+  componentId: "sc-19q3hlt-3"
+})(["", ""], _mediaQuery["default"].desktopOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    max-width: 608px;\n  "]))));
+var Icon = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "new-donation-box-section__Icon",
+  componentId: "sc-19q3hlt-4"
+})(["display:inline-block;margin-left:8.6px;width:7px;height:12px;"]);
+var DonateInfo = /*#__PURE__*/_react["default"].createElement("span", null, "\u770B\u898B\u6539\u8B8A", /*#__PURE__*/_react["default"].createElement(Icon, null, /*#__PURE__*/_react["default"].createElement(ArrowIcon, null)));
+var DonationBoxSection = function DonationBoxSection() {
+  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(TextColumn, null, /*#__PURE__*/_react["default"].createElement("h3", null, "\u8D0A\u52A9\u5831\u5C0E\u8005\u7684\u4E0B\u4E00\u500B\u5341\u5E74"), /*#__PURE__*/_react["default"].createElement("p", null, "\u81EA2015\u5E749\u6708\uFF0C\u300A\u5831\u5C0E\u8005\u300B\u9760\u793E\u6703\u5927\u773E\u7684\u8D0A\u52A9\u8D70\u5230\u4E86\u4ECA\u5929\uFF0C\u9080\u60A8\u4E00\u8D77\u898B\u8B49\u6211\u5011\u8D70\u904E\u7684\u8DEF\uFF0C\u4E26\u4E14\u652F\u6301\u6211\u5011\u5EA6\u904E\u4E0B\u4E00\u500B\u5341\u5E74\u7684\u6311\u6230\u3002")), /*#__PURE__*/_react["default"].createElement(DonateButton, null, /*#__PURE__*/_react["default"].createElement("a", {
+    href: _externalLinks["default"].tenYearAnniversary,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, DonateInfo))));
+};
+var _default = exports["default"] = DonationBoxSection;

package/lib/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _featureFlag = require("@twreporter/core/lib/constants/feature-flag");
 var _categorySection = _interopRequireDefault(require("./components/category-section"));
 var _donationBoxSection = _interopRequireDefault(require("./components/donation-box-section"));
 var _editorPicks = _interopRequireDefault(require("./components/editor-picks"));
@@ -16,11 +17,12 @@ var _podcastBoxSection = _interopRequireDefault(require("./components/podcast-bo
 var _reviews = _interopRequireDefault(require("./components/reviews"));
 var _scrollFadein = _interopRequireDefault(require("./components/animations/scroll-fadein"));
 var _topicsSection = _interopRequireDefault(require("./components/topics-section"));
+var _newDonationBoxSection = _interopRequireDefault(require("./components/new-donation-box-section"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var _default = exports["default"] = {
   components: {
     CategorySection: _categorySection["default"],
-    DonationBoxSection: _donationBoxSection["default"],
+    DonationBoxSection: _featureFlag.TEN_YEAR_ANNIVERSARY ? _newDonationBoxSection["default"] : _donationBoxSection["default"],
     EditorPicks: _editorPicks["default"],
     InforgraphicSection: _infographicSection["default"],
     JuniorBoxSection: _juniorBoxSection["default"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/index-page",
-  "version": "2.1.9",
+  "version": "2.2.0-rc.0",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -12,8 +12,8 @@
     "prepublishOnly": "make build"
   },
   "dependencies": {
-    "@twreporter/core": "^1.26.0",
-    "@twreporter/react-components": "^9.8.1",
+    "@twreporter/core": "^1.27.0-rc.1",
+    "@twreporter/react-components": "^9.8.2-rc.1",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
     "react": "^18.2.0",
@@ -29,5 +29,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "f9f14e25aa5ea94e330213559cc84c7bfc1d8ca7"
+  "gitHead": "3b2aeed8de855191d21b49b8df861026a27c95ea"
 }