@twreporter/index-page 1.4.4-rc.8 → 1.4.4

package/CHANGELOG.md

@@ -3,7 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [1.4.4-rc.8](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.7...@twreporter/index-page@1.4.4-rc.8) (2023-04-18)
+## [1.4.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.18...@twreporter/index-page@1.4.4) (2023-05-09)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
+## [1.4.4-rc.18](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.17...@twreporter/index-page@1.4.4-rc.18) (2023-05-09)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
+## [1.4.4-rc.17](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.16...@twreporter/index-page@1.4.4-rc.17) (2023-05-09)
+
+
+### Bug Fixes
+
+* index-page latest section style ([fa204ee](https://github.com/twreporter/twreporter-npm-packages/commit/fa204eedc123cd5d84f9e3f56cd44c169c7d1da1))
+
+
+
+
+
+## [1.4.4-rc.16](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.15...@twreporter/index-page@1.4.4-rc.16) (2023-05-08)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
+## [1.4.4-rc.15](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.14...@twreporter/index-page@1.4.4-rc.15) (2023-05-07)
+
+
+### Bug Fixes
+
+* editor pick section should show category_set info ([33e97dd](https://github.com/twreporter/twreporter-npm-packages/commit/33e97dd03554a132dd8d195a554e2fd2c705a12f))
+
+
+
+
+
+## [1.4.4-rc.14](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.13...@twreporter/index-page@1.4.4-rc.14) (2023-05-05)
 
 **Note:** Version bump only for package @twreporter/index-page
 
@@ -11,6 +57,50 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+## [1.4.4-rc.13](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.12...@twreporter/index-page@1.4.4-rc.13) (2023-05-05)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
+## [1.4.4-rc.12](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.11...@twreporter/index-page@1.4.4-rc.12) (2023-05-03)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
+## [1.4.4-rc.11](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.10...@twreporter/index-page@1.4.4-rc.11) (2023-04-28)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
+## [1.4.4-rc.10](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.9...@twreporter/index-page@1.4.4-rc.10) (2023-04-27)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
+## [1.4.4-rc.9](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.8...@twreporter/index-page@1.4.4-rc.9) (2023-04-24)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
+## [1.4.4-rc.8](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.7...@twreporter/index-page@1.4.4-rc.8) (2023-04-18)
+
+**Note:** Version bump only for package @twreporter/index-page
+
 ## [1.4.4-rc.7](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.4-rc.6...@twreporter/index-page@1.4.4-rc.7) (2023-04-17)
 
 **Note:** Version bump only for package @twreporter/index-page

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

@@ -0,0 +1,488 @@
+"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 _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 _editorPicksMobile = _interopRequireDefault(require("./editor-picks-mobile"));
+
+var _imgWrapper = _interopRequireDefault(require("./common-utils/img-wrapper"));
+
+var _categoryName = _interopRequireDefault(require("./common-utils/category-name"));
+
+var _sectionContentWrapper = _interopRequireDefault(require("./common-utils/section-content-wrapper"));
+
+var _twreporterLink = _interopRequireDefault(require("./common-utils/twreporter-link"));
+
+var _color = _interopRequireDefault(require("../constants/color"));
+
+var _font = require("@twreporter/core/lib/constants/font");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _clone = _interopRequireDefault(require("lodash/clone"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+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 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",
+    strokeWidth: "4",
+    stroke: "#C3000B",
+    fill: "none",
+    fillRule: "evenodd"
+  }));
+};
+
+LeftArrowIcon.defaultProps = {
+  width: "15",
+  height: "24",
+  viewBox: "0 0 15 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var RightArrowIcon = function RightArrowIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("title", null, "Right Arrow"), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M2 2.308l10 10-10 10",
+    strokeWidth: "4",
+    stroke: "#C3000B",
+    fill: "none",
+    fillRule: "evenodd"
+  }));
+};
+
+RightArrowIcon.defaultProps = {
+  width: "15",
+  height: "24",
+  viewBox: "0 0 15 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}; // @twreporter
+
+var _ = {
+  get: _get["default"],
+  clone: _clone["default"]
+};
+var mockup = {
+  img: {
+    sizes: {
+      desktop: '886px',
+      tablet: '450px',
+      mobile: '307px'
+    }
+  }
+};
+
+var swapArrayElements = function swapArrayElements(arr, indexA, indexB) {
+  if (Array.isArray(arr) && arr.length > 2) {
+    var newArr = _.clone(arr);
+
+    var tmp = newArr[indexA];
+    newArr[indexA] = newArr[indexB];
+    newArr[indexB] = tmp;
+    return newArr;
+  }
+
+  return arr;
+};
+
+var CarouselContainer = /*#__PURE__*/(0, _styledComponents["default"])(_sectionContentWrapper["default"]).withConfig({
+  displayName: "editor-picks-old__CarouselContainer",
+  componentId: "an7vum-0"
+})(["overflow-x:hidden;position:relative;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+
+var FlexContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "editor-picks-old__FlexContainer",
+  componentId: "an7vum-1"
+})(["position:relative;display:flex;height:932px;align-items:center;", ""], _mediaQuery["default"].desktopAndBelow(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: 702px;\n  "])))); // FlexItem is for moving Title
+
+
+var FlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "editor-picks-old__FlexItem",
+  componentId: "an7vum-2"
+})(["flex:0 0 20%;margin-right:20%;position:relative;transform:", ";transition:500ms transform ease-in,500ms margin-top ease-in;cursor:pointer;margin-top:", ";", " z-index:2;"], function (props) {
+  return props.selected !== 0 ? "translateX(-".concat((props.selected - 1) * 200, "%)") : 'translateX(200%)';
+}, function (props) {
+  return props.middle ? '-770px' : '16px';
+}, _mediaQuery["default"].desktopAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-top: ", ";\n  "])), function (props) {
+  return props.middle ? '-540px' : '16px';
+}));
+
+var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "editor-picks-old__ImgFrame",
+  componentId: "an7vum-3"
+})(["cursor:pointer;position:absolute;width:886px;height:570px;left:50%;top:236px;transform:translateX(-50%);", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 610px;\n    height: 391px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 450px;\n    height: 295px;\n  "]))));
+
+var Arrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "editor-picks-old__Arrow",
+  componentId: "an7vum-4"
+})(["cursor:pointer;position:absolute;top:480px;"]); // top: sideCategory + 27px
+
+
+var LeftArrow = /*#__PURE__*/(0, _styledComponents["default"])(Arrow).withConfig({
+  displayName: "editor-picks-old__LeftArrow",
+  componentId: "an7vum-5"
+})(["left:17%;display:", ";", " transition:0.2s display linear;"], function (props) {
+  return props.selected === 0 ? 'none' : 'inline';
+}, _mediaQuery["default"].desktopAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    top: 365px;\n  "]))));
+var RightArrow = /*#__PURE__*/(0, _styledComponents["default"])(Arrow).withConfig({
+  displayName: "editor-picks-old__RightArrow",
+  componentId: "an7vum-6"
+})(["right:17%;display:", ";", " transition:0.2s display linear;"], function (props) {
+  return props.selected === props.dataLength - 1 ? 'none' : 'inline';
+}, _mediaQuery["default"].desktopAndBelow(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    top: 365px;\n  "]))));
+var SideCategory = /*#__PURE__*/(0, _styledComponents["default"])(_categoryName["default"]).withConfig({
+  displayName: "editor-picks-old__SideCategory",
+  componentId: "an7vum-7"
+})(["text-align:center;height:16px;line-height:1.33;position:absolute;width:auto;transform:translateX(-50%);text-align:center;width:161px;height:16px;top:453px;left:", ";", ""], function (props) {
+  return props.left ? props.left : '0';
+}, _mediaQuery["default"].desktopAndBelow(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    top: 338px;\n  "]))));
+var MiddleCategory = /*#__PURE__*/(0, _styledComponents["default"])(_categoryName["default"]).withConfig({
+  displayName: "editor-picks-old__MiddleCategory",
+  componentId: "an7vum-8"
+})(["text-align:center;height:16px;line-height:1.33;position:absolute;top:", ";left:", ";width:auto;transform:translateX(-50%);text-align:center;width:161px;height:16px;"], function (props) {
+  return props.top ? props.top : '0';
+}, function (props) {
+  return props.left ? props.left : '0';
+});
+
+var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "editor-picks-old__Title",
+  componentId: "an7vum-9"
+})(["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;line-break:anywhere;", " ", ""], function (props) {
+  return props.middle ? "32px" : "16px";
+}, _font.fontWeight.bold, _font.fontFamily.title, _color["default"].darkGray, function (props) {
+  return props.middle ? '450px' : '150px';
+}, function (props) {
+  return props.middle ? '1.25' : '1.25';
+}, function (props) {
+  return props.middle ? '2.5' : '7.5';
+}, _mediaQuery["default"].desktopOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), function (props) {
+  return props.middle ? '450px' : '120px';
+}), _mediaQuery["default"].tabletAndBelow(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), function (props) {
+  return props.middle ? '450px' : '90px';
+}));
+
+var Description = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "editor-picks-old__Description",
+  componentId: "an7vum-10"
+})(["position:absolute;font-size:16px;width:450px;top:", ";left:", ";color:", ";transform:translateX(-50%);", ";", " z-index:2;"], function (props) {
+  return props.top ? props.top : '0';
+}, function (props) {
+  return props.left ? props.left : '0';
+}, _color["default"].darkGray, (0, _styleUtils.truncate)('absolute', 1.43, 2, 'white'), _mediaQuery["default"].tabletAndAbove(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    ", "\n    transition: .2s opacity linear;\n  "])), function (props) {
+  return props.ifHover ? 'opacity: 0.7;' : '';
+}));
+
+var HoverEffect = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "editor-picks-old__HoverEffect",
+  componentId: "an7vum-11"
+})(["cursor:pointer;text-decoration:none;color:", ";", ""], _color["default"].darkGray, _mediaQuery["default"].tabletAndAbove(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    ", "\n    transition: .2s opacity linear;\n  "])), function (props) {
+  return props.ifHover ? 'opacity: 0.7;' : 'opacity: 1;';
+}));
+
+var FadeInFadeOut = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "editor-picks-old__FadeInFadeOut",
+  componentId: "an7vum-12"
+})(["opacity:", ";z-index:", ";transition:150ms opacity ease-in-out;"], function (props) {
+  return props.isSelected ? '1' : '0';
+}, function (props) {
+  return props.isSelected ? '1' : '0';
+}); // this is a container
+
+
+var EditorPicks = /*#__PURE__*/function (_React$Component) {
+  _inherits(EditorPicks, _React$Component);
+
+  var _super = _createSuper(EditorPicks);
+
+  function EditorPicks(props) {
+    var _this;
+
+    _classCallCheck(this, EditorPicks);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      selected: 1,
+      ifHover: false
+    };
+    _this.onShiftToLeft = _this._onShiftToLeft.bind(_assertThisInitialized(_this));
+    _this.onShiftToRight = _this._onShiftToRight.bind(_assertThisInitialized(_this));
+    _this.handleOnMouseEnter = _this._handleOnMouseEnter.bind(_assertThisInitialized(_this));
+    _this.handleOnMouseLeave = _this._handleOnMouseLeave.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(EditorPicks, [{
+    key: "_onShiftToLeft",
+    value: function _onShiftToLeft() {
+      if (this.state.selected + 1 < this.props.data.length) {
+        this.setState({
+          selected: this.state.selected + 1
+        });
+      }
+    }
+  }, {
+    key: "_onShiftToRight",
+    value: function _onShiftToRight() {
+      if (this.state.selected > 0) {
+        this.setState({
+          selected: this.state.selected - 1
+        });
+      }
+    }
+  }, {
+    key: "_handleOnMouseEnter",
+    value: function _handleOnMouseEnter() {
+      this.setState({
+        ifHover: true
+      });
+    }
+  }, {
+    key: "_handleOnMouseLeave",
+    value: function _handleOnMouseLeave() {
+      this.setState({
+        ifHover: false
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var data = this.props.data;
+      var swappedData = swapArrayElements(data, 0, 1);
+
+      var getTruncate = function getTruncate(title) {
+        if (title.length > 25) {
+          return "".concat(title.slice(0, 24), "...");
+        }
+
+        return title;
+      };
+
+      var FlexItems = function () {
+        return swappedData.map(function (obj, i) {
+          var isExternal = _.get(obj, 'is_external', false);
+
+          var href = (0, _getHref.getHref)(_.get(obj, 'slug', 'error'), isExternal);
+          var propsMap = {
+            middle: false,
+            onClick: function onClick() {}
+          };
+
+          if (i === _this2.state.selected - 1) {
+            propsMap.onClick = _this2.onShiftToRight;
+          } else if (i === _this2.state.selected) {
+            propsMap.middle = true;
+
+            propsMap.onClick = function () {};
+          } else if (i === _this2.state.selected + 1) {
+            propsMap.onClick = _this2.onShiftToLeft;
+          }
+
+          return /*#__PURE__*/_react["default"].createElement(FlexItem, {
+            key: "key_".concat(obj.title),
+            middle: propsMap.middle,
+            selected: _this2.state.selected,
+            onClick: function onClick() {
+              propsMap.onClick("a/".concat(_.get(obj, 'slug', 'error')));
+            }
+          }, i === _this2.state.selected ? /*#__PURE__*/_react["default"].createElement(_twreporterLink["default"], {
+            href: href,
+            redirect: isExternal,
+            plain: true
+          }, /*#__PURE__*/_react["default"].createElement(HoverEffect, {
+            ifHover: _this2.state.ifHover
+          }, /*#__PURE__*/_react["default"].createElement(Title, {
+            middle: propsMap.middle,
+            onMouseOver: _this2.handleOnMouseEnter,
+            onMouseLeave: _this2.handleOnMouseLeave
+          }, /*#__PURE__*/_react["default"].createElement("div", null, propsMap.middle ? getTruncate(obj.title) : obj.title)))) : /*#__PURE__*/_react["default"].createElement(Title, {
+            middle: propsMap.middle
+          }, /*#__PURE__*/_react["default"].createElement("div", null, propsMap.middle ? getTruncate(obj.title) : obj.title)));
+        });
+      }();
+
+      var Types = function () {
+        // type: left, middle, right. description: middle
+        var propList = [{
+          position: 'left',
+          component: SideCategory,
+          propsForComponent: {
+            top: null,
+            left: '10%'
+          },
+          dataPath: 'categories[0].name'
+        }, {
+          position: 'middle',
+          component: MiddleCategory,
+          propsForComponent: {
+            top: '60px',
+            left: '50%'
+          },
+          dataPath: 'categories[0].name'
+        }, {
+          position: 'right',
+          middle: false,
+          component: SideCategory,
+          propsForComponent: {
+            top: null,
+            left: '90%'
+          },
+          dataPath: 'categories[0].name'
+        }, {
+          position: 'middle',
+          component: Description,
+          propsForComponent: {
+            top: '171px',
+            left: '50%'
+          },
+          dataPath: 'og_description'
+        }];
+        return propList.map(function (theProp) {
+          return swappedData.map(function (post, index) {
+            var isExternal = _.get(post, 'is_external', false);
+
+            var href = (0, _getHref.getHref)(_.get(post, 'slug', 'error'), isExternal);
+
+            var currentData = _.get(post, theProp.dataPath, '');
+
+            var selectDataToShow = {
+              left: _this2.state.selected - 1,
+              middle: _this2.state.selected,
+              right: _this2.state.selected + 1
+            };
+            var fadingStyle = {
+              opacity: index === selectDataToShow[theProp.position] ? '1' : '0',
+              zIndex: index === selectDataToShow[theProp.position] ? '1' : '0',
+              transition: 'opacity 150ms ease-in-out'
+            };
+            return /*#__PURE__*/_react["default"].createElement(FadeInFadeOut, {
+              key: _.get(post, 'id'),
+              isSelected: index === selectDataToShow[theProp.position]
+            }, theProp.dataPath === 'og_description' ? /*#__PURE__*/_react["default"].createElement(_twreporterLink["default"], {
+              href: href,
+              redirect: isExternal,
+              plain: true
+            }, /*#__PURE__*/_react["default"].createElement(theProp.component, {
+              ifHover: _this2.state.ifHover,
+              top: theProp.propsForComponent.top,
+              left: theProp.propsForComponent.left,
+              onMouseEnter: _this2.handleOnMouseEnter,
+              onMouseLeave: _this2.handleOnMouseLeave // Adds fade-in fade-out inline style for IE and Edge
+              ,
+              style: fadingStyle
+            }, currentData)) : /*#__PURE__*/_react["default"].createElement(theProp.component, {
+              top: theProp.propsForComponent.top,
+              left: theProp.propsForComponent.left // Adds fade-in fade-out inline style for IE and Edge
+              ,
+              style: fadingStyle
+            }, currentData));
+          });
+        });
+      }();
+
+      var Images = swappedData.map(function (post, index) {
+        var imgObj = _.get(post, 'hero_image') || _.get(post, 'og_image');
+
+        var isExternal = _.get(post, 'is_external', false);
+
+        var href = (0, _getHref.getHref)(_.get(post, 'slug', 'error'), isExternal);
+        var fadingStyle = {
+          opacity: _this2.state.selected === index ? '1' : '0',
+          zIndex: _this2.state.selected === index ? '1' : '0',
+          transition: 'opacity .5s linear'
+        };
+        return /*#__PURE__*/_react["default"].createElement(FadeInFadeOut, {
+          key: _.get(imgObj, 'id'),
+          isSelected: index === _this2.state.selected
+        }, /*#__PURE__*/_react["default"].createElement(_twreporterLink["default"], {
+          href: href,
+          redirect: isExternal,
+          plain: true
+        }, /*#__PURE__*/_react["default"].createElement(HoverEffect, {
+          ifHover: _this2.state.ifHover
+        }, /*#__PURE__*/_react["default"].createElement(ImgFrame, {
+          onMouseEnter: _this2.handleOnMouseEnter,
+          onMouseLeave: _this2.handleOnMouseLeave // Adds fade-in fade-out inline style for IE and Edge
+          ,
+          style: fadingStyle
+        }, /*#__PURE__*/_react["default"].createElement(_imgWrapper["default"], {
+          alt: _.get(imgObj, 'description'),
+          src: _.get(imgObj, 'resized_targets.tablet.url'),
+          srcSet: _.get(imgObj, 'resized_targets'),
+          sizes: "(min-width: ".concat(_styleUtils.breakPoints.desktopMinWidth, ") ").concat(mockup.img.sizes.desktop, ", ") + "(min-width: ".concat(_styleUtils.breakPoints.tabletMinWidth, ") ").concat(mockup.img.sizes.tablet, ", ") + "".concat(mockup.img.sizes.mobile)
+        })))));
+      });
+
+      var Arrows = function () {
+        return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(LeftArrow, {
+          onClick: _this2.onShiftToRight,
+          selected: _this2.state.selected
+        }, /*#__PURE__*/_react["default"].createElement(LeftArrowIcon, null)), /*#__PURE__*/_react["default"].createElement(RightArrow, {
+          onClick: _this2.onShiftToLeft,
+          selected: _this2.state.selected,
+          dataLength: _this2.props.data.length
+        }, /*#__PURE__*/_react["default"].createElement(RightArrowIcon, null)));
+      }();
+
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(CarouselContainer, null, /*#__PURE__*/_react["default"].createElement(FlexContainer, null, Types, Arrows, Images, FlexItems)), /*#__PURE__*/_react["default"].createElement(_editorPicksMobile["default"], {
+        data: this.props.data,
+        maxSwipableItems: 5
+      }));
+    }
+  }]);
+
+  return EditorPicks;
+}(_react["default"].Component);
+
+EditorPicks.defaultProps = {
+  data: []
+};
+EditorPicks.propTypes = {
+  data: _propTypes["default"].arrayOf((0, _post["default"])())
+};
+var _default = EditorPicks;
+exports["default"] = _default;

package/lib/components/editor-picks.js

@@ -354,7 +354,7 @@ var EditorPicks = /*#__PURE__*/function (_React$Component) {
             top: null,
             left: '10%'
           },
-          dataPath: 'categories[0].name'
+          dataPath: 'category_set[0].category.name'
         }, {
           position: 'middle',
           component: MiddleCategory,
@@ -362,7 +362,7 @@ var EditorPicks = /*#__PURE__*/function (_React$Component) {
             top: '60px',
             left: '50%'
           },
-          dataPath: 'categories[0].name'
+          dataPath: 'category_set[0].category.name'
         }, {
           position: 'right',
           middle: false,
@@ -371,7 +371,7 @@ var EditorPicks = /*#__PURE__*/function (_React$Component) {
             top: null,
             left: '90%'
           },
-          dataPath: 'categories[0].name'
+          dataPath: 'category_set[0].category.name'
         }, {
           position: 'middle',
           component: Description,

package/lib/components/latest-section.js

@@ -35,7 +35,7 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -79,7 +79,6 @@ var mockup = {
   }
 };
 var headerPadding = {
-  desktop: '47px',
   tablet: '34px',
   mobile: '16px'
 };
@@ -92,19 +91,19 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var ContentContainer = /*#__PURE__*/(0, _styledComponents["default"])(_sectionContentWrapper["default"]).withConfig({
   displayName: "latest-section__ContentContainer",
   componentId: "hzxpx3-1"
-})(["display:flex;padding:30px ", ";overflow-x:hidden;justify-content:center;", " ", ""], headerPadding.desktop, _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: 30px ", ";\n  "])), headerPadding.tablet), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 30px ", ";\n  "])), headerPadding.mobile));
+})(["display:flex;padding:30px 0;overflow-x:hidden;justify-content:center;", " ", " ", " ", ""], _mediaQuery["default"].hdOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-width: 1280px;\n    transform: translateX(8px); // side-bar width / 2\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 30px 32px 30px 48px; // side-bar width 16px\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 30px ", ";\n  "])), headerPadding.tablet), _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding: 30px ", ";\n  "])), headerPadding.mobile));
 
 var ItemFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "latest-section__ItemFrame",
   componentId: "hzxpx3-2"
-})(["width:199px;padding:0;margin-left:30px;&:first-child{margin:0;}", " ", " ", " @media (max-width:", "){&:nth-child(4){display:none;}}@media (max-width:", "){&:nth-child(3){display:none;}}@media (max-width:", "){width:136px;margin-left:16px;}"], _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 130px;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    &:nth-child(6) {\n      display: none;\n    }\n    &:nth-child(5) {\n      display: none;\n    }\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 160px;\n    margin-left: 20px;\n  "]))), mobileMidWidth, mobileSemiMidWidth, mobileMinWidth);
+})(["width:199px;padding:0;margin-left:30px;&:first-child{margin:0;}", " ", " ", " @media (max-width:", "){&:nth-child(4){display:none;}}@media (max-width:", "){&:nth-child(3){display:none;}}@media (max-width:", "){width:136px;margin-left:16px;}"], _mediaQuery["default"].desktopOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 130px;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    &:nth-child(6) {\n      display: none;\n    }\n    &:nth-child(5) {\n      display: none;\n    }\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 160px;\n    margin-left: 20px;\n  "]))), mobileMidWidth, mobileSemiMidWidth, mobileMinWidth);
 
 var ImageFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "latest-section__ImageFrame",
   componentId: "hzxpx3-3"
 })(["width:100%;height:128px;background:", ";background-size:cover;background-position:center;display:block;", " ", " ", " @media (max-width:", "){height:93px;}@media (max-width:", "){height:88px;}"], function (props) {
   return props.background ? "url(".concat(props.background, ")") : 'backgroun-image';
-}, _mediaQuery["default"].desktopOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    height: 90px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    height: 110px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    height: 100px;\n  "]))), mobileSemiMidWidth, mobileMinWidth);
+}, _mediaQuery["default"].desktopOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    height: 90px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    height: 110px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    height: 100px;\n  "]))), mobileSemiMidWidth, mobileMinWidth);
 
 var ContentFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "latest-section__ContentFrame",

package/lib/index.js

@@ -11,6 +11,8 @@ var _donationBoxSection = _interopRequireDefault(require("./components/donation-
 
 var _editorPicks = _interopRequireDefault(require("./components/editor-picks"));
 
+var _editorPicksOld = _interopRequireDefault(require("./components/editor-picks-old"));
+
 var _infographicSection = _interopRequireDefault(require("./components/infographic-section"));
 
 var _juniorBoxSection = _interopRequireDefault(require("./components/junior-box-section"));
@@ -41,11 +43,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 // feature toggle
 var LatestSection = _featureFlag.ENABLE_NEW_INFO_ARCH ? _latestSection["default"] : _latestSectionOld["default"];
+var EditorPicks = _featureFlag.ENABLE_NEW_INFO_ARCH ? _editorPicks["default"] : _editorPicksOld["default"];
 var _default = {
   components: {
     CategorySection: _categorySection["default"],
     DonationBoxSection: _donationBoxSection["default"],
-    EditorPicks: _editorPicks["default"],
+    EditorPicks: EditorPicks,
     InforgraphicSection: _infographicSection["default"],
     JuniorBoxSection: _juniorBoxSection["default"],
     LatestSection: LatestSection,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/index-page",
-  "version": "1.4.4-rc.8",
+  "version": "1.4.4",
   "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.9.0-rc.0",
-    "@twreporter/react-components": "^8.17.0-rc.6",
+    "@twreporter/core": "^1.9.0",
+    "@twreporter/react-components": "^8.17.0",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
     "react": "^16.3.0",
@@ -27,5 +27,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "06d73321c9a5faf2cb6aac855a6c9eca59d4d59d"
+  "gitHead": "9dfafcb33035b713b397e10d001ba09eafe6eefb"
 }