@twreporter/index-page 1.2.16 → 1.3.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.3.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.2.16...@twreporter/index-page@1.3.0-rc.0) (2022-07-20)
+
+
+### Features
+
+* **index-page:** add junior box section for index page ([4d697bf](https://github.com/twreporter/twreporter-npm-packages/commit/4d697bf0ae5e874011c06a99dbdefc8209ae1178))
+
+
+
+
+
 ## [1.2.16](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.2.16-rc.4...@twreporter/index-page@1.2.16) (2022-07-06)
 
 **Note:** Version bump only for package @twreporter/index-page

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

@@ -0,0 +1,132 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styleUtils = require("../utils/style-utils");
+
+var _app = _interopRequireDefault(require("../constants/app"));
+
+var _color = _interopRequireDefault(require("../constants/color"));
+
+var _juniorLink = _interopRequireDefault(require("@twreporter/react-components/lib/junior-link"));
+
+var _font = require("@twreporter/core/lib/constants/font");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+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: "junior-box-section__Container",
+  componentId: "sc-1yjyxv7-0"
+})(["background-image:url(", "/PodcastBox_Desktop.jpg);background-size:contain;padding-top:30px;padding-bottom:30px;", " ", " ", ""], _app["default"].assetsPath, _styleUtils.finalMedia.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-image: url(", "/PodcastBox_Mobile.jpg);\n    padding-top: 40px;\n    padding-bottom: 60px;\n  "])), _app["default"].assetsPath), _styleUtils.finalMedia.tablet(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-image: url(", "/PodcastBox_Tablet.jpg);\n  "])), _app["default"].assetsPath), _styleUtils.finalMedia.overDesktop(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-image: url(", "/PodcastBox_DesktopHD.jpg);\n  "])), _app["default"].assetsPath));
+
+var ContentContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "junior-box-section__ContentContainer",
+  componentId: "sc-1yjyxv7-1"
+})(["display:flex;justify-content:space-between;align-items:center;max-width:1024px;margin:0 auto;padding:0 100px;color:", ";font-family:", ";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"].black, _font.fontFamily["default"], _font.fontWeight.bold, _font.fontFamily.title, _styleUtils.finalMedia.overDesktop(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: 1440px;\n    padding: 0 219px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 110px;\n    p{\n      margin-top: 17px;\n    }\n  "]))), _styleUtils.finalMedia.mobile(_templateObject6 || (_templateObject6 = _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 CTAButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "junior-box-section__CTAButton",
+  componentId: "sc-1yjyxv7-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["default"].brown, _color["default"].white, _styleUtils.finalMedia.tablet(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      position: absolute;\n      right: 110px;\n      top: 9px;\n    "]))), _styleUtils.finalMedia.mobile(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      margin: 40px auto 0 auto;\n    "]))), _font.fontWeight.bold);
+
+var TextColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "junior-box-section__TextColumn",
+  componentId: "sc-1yjyxv7-3"
+})(["", ""], _styleUtils.finalMedia.desktop(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    max-width: 608px;\n  "]))));
+
+var Icon = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "junior-box-section__Icon",
+  componentId: "sc-1yjyxv7-4"
+})(["display:inline-block;margin-left:8.6px;width:7px;height:12px;"]);
+
+var JuniorBoxSection = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(JuniorBoxSection, _React$PureComponent);
+
+  var _super = _createSuper(JuniorBoxSection);
+
+  function JuniorBoxSection() {
+    _classCallCheck(this, JuniorBoxSection);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(JuniorBoxSection, [{
+    key: "render",
+    value: function render() {
+      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, "\u770B\u5152\u7AE5\u65B0\u805E\uFF0C\u8207\u5B69\u5B50\u5C0D\u8A71"), /*#__PURE__*/_react["default"].createElement("p", null, "\u5411\u5B69\u5B50\u89E3\u91CB\u91CD\u8981\u7684\u4E8B\u4EF6\u3001\u56B4\u8085\u7684\u8B70\u984C\uFF0C\u662F\u6C11\u4E3B\u793E\u6703\u5F88\u91CD\u8981\u7684\u4E8B\uFF0C\u4E5F\u662F\u300A\u5831\u5C0E\u8005\u300B\u8EAB\u70BA\u975E\u71DF\u5229\u5A92\u9AD4\u7684\u91CD\u8981\u8CAC\u4EFB\uFF0C\u8B93\u6211\u5011\u548C\u4F60\u4E00\u8D77\u5C0B\u627E\u5C0D\u8A71\u7684\u5951\u6A5F\u3002")), /*#__PURE__*/_react["default"].createElement(CTAButton, null, /*#__PURE__*/_react["default"].createElement(_juniorLink["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, "\u524D\u5F80\u95B1\u8B80", /*#__PURE__*/_react["default"].createElement(Icon, null, /*#__PURE__*/_react["default"].createElement(ArrowIcon, null)))))));
+    }
+  }]);
+
+  return JuniorBoxSection;
+}(_react["default"].PureComponent);
+
+var _default = JuniorBoxSection;
+exports["default"] = _default;

package/lib/index.js

@@ -13,6 +13,8 @@ var _editorPicks = _interopRequireDefault(require("./components/editor-picks"));
 
 var _infographicSection = _interopRequireDefault(require("./components/infographic-section"));
 
+var _juniorBoxSection = _interopRequireDefault(require("./components/junior-box-section"));
+
 var _latestSection = _interopRequireDefault(require("./components/latest-section"));
 
 var _latestTopic = _interopRequireDefault(require("./components/latest-topic"));
@@ -41,6 +43,7 @@ var _default = {
     DonationBoxSection: _donationBoxSection["default"],
     EditorPicks: _editorPicks["default"],
     InforgraphicSection: _infographicSection["default"],
+    JuniorBoxSection: _juniorBoxSection["default"],
     LatestSection: _latestSection["default"],
     LatestTopicSection: _latestTopic["default"],
     NewsLetterSection: _newsLetterSection["default"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/index-page",
-  "version": "1.2.16",
+  "version": "1.3.0-rc.0",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@twreporter/core": "^1.4.1",
-    "@twreporter/react-components": "^8.10.0",
+    "@twreporter/react-components": "^8.11.0-rc.0",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
     "react": "^16.3.0",
@@ -28,5 +28,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "675d3d3bd4bb0d2086d3b47ca3fe867cc084a26f"
+  "gitHead": "fd9df4910781396b141caba06abffb051c5b6500"
 }