@twreporter/index-page 1.4.7 → 1.4.8-rc.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.8-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.7...@twreporter/index-page@1.4.8-rc.0) (2023-06-28)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
 ## [1.4.7](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.7-rc.9...@twreporter/index-page@1.4.7) (2023-06-21)
 
 **Note:** Version bump only for package @twreporter/index-page

package/lib/index.js

@@ -11,16 +11,12 @@ 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"));
 
 var _latestSection = _interopRequireDefault(require("./components/latest-section"));
 
-var _latestSectionOld = _interopRequireDefault(require("./components/latest-section-old"));
-
 var _latestTopic = _interopRequireDefault(require("./components/latest-topic"));
 
 var _newsLetterSection = _interopRequireDefault(require("./components/news-letter-section"));
@@ -37,21 +33,16 @@ var _searchBox = _interopRequireDefault(require("./components/search-box"));
 
 var _topicsSection = _interopRequireDefault(require("./components/topics-section"));
 
-var _featureFlag = require("@twreporter/core/lib/constants/feature-flag");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-// 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,
+    EditorPicks: _editorPicks["default"],
     InforgraphicSection: _infographicSection["default"],
     JuniorBoxSection: _juniorBoxSection["default"],
-    LatestSection: LatestSection,
+    LatestSection: _latestSection["default"],
     LatestTopicSection: _latestTopic["default"],
     NewsLetterSection: _newsLetterSection["default"],
     PhotographySection: _photographySection["default"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/index-page",
-  "version": "1.4.7",
+  "version": "1.4.8-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.10.0",
-    "@twreporter/react-components": "^8.18.0",
+    "@twreporter/core": "^1.10.1-rc.0",
+    "@twreporter/react-components": "^8.18.1-rc.0",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
     "react": "^16.3.0",
@@ -27,5 +27,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "8bb552690874aabe203b3c8205f725eef6285282"
+  "gitHead": "d0cdc973332d7c8b7e8d8bd4370e6b789961a1a0"
 }

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

@@ -1,488 +0,0 @@
-"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/latest-section-old.js

@@ -1,172 +0,0 @@
-"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 _categoryName = _interopRequireDefault(require("./common-utils/category-name"));
-
-var _imgWrapper = _interopRequireDefault(require("./common-utils/img-wrapper"));
-
-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 _get = _interopRequireDefault(require("lodash/get"));
-
-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) } })); }
-
-var _ = {
-  get: _get["default"]
-};
-var desktopMinWidth = _styleUtils.breakPoints.desktopMinWidth;
-var tabletMinWidth = _styleUtils.breakPoints.tabletMinWidth;
-var mobileMidWidth = '578px';
-var mobileSemiMidWidth = '414px';
-var mobileMinWidth = '320px';
-var mockup = {
-  img: {
-    sizes: {
-      desktop: '199px',
-      tablet: '160px',
-      mobile: '136px'
-    }
-  }
-};
-var headerPadding = {
-  desktop: '47px',
-  tablet: '34px',
-  mobile: '16px'
-};
-
-var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "latest-section-old__Container",
-  componentId: "sc-1ho0gdl-0"
-})(["background-color:", ";position:relative;", ""], _color["default"].lightGray, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 0;\n  "]))));
-
-var ContentContainer = /*#__PURE__*/(0, _styledComponents["default"])(_sectionContentWrapper["default"]).withConfig({
-  displayName: "latest-section-old__ContentContainer",
-  componentId: "sc-1ho0gdl-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));
-
-var ItemFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "latest-section-old__ItemFrame",
-  componentId: "sc-1ho0gdl-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);
-
-var ImageFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "latest-section-old__ImageFrame",
-  componentId: "sc-1ho0gdl-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);
-
-var ContentFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "latest-section-old__ContentFrame",
-  componentId: "sc-1ho0gdl-4"
-})(["margin:0 auto;"]);
-
-var Category = /*#__PURE__*/(0, _styledComponents["default"])(_categoryName["default"]).withConfig({
-  displayName: "latest-section-old__Category",
-  componentId: "sc-1ho0gdl-5"
-})(["height:16px;line-height:1.33;margin-top:12px;margin-bottom:4px;"]);
-
-var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "latest-section-old__Title",
-  componentId: "sc-1ho0gdl-6"
-})(["height:auto;font-size:16px;font-weight:", ";font-family:", ";color:", ";"], _font.fontWeight.bold, _font.fontFamily.title, _color["default"].darkGray);
-
-var LatestSection = /*#__PURE__*/function (_React$Component) {
-  _inherits(LatestSection, _React$Component);
-
-  var _super = _createSuper(LatestSection);
-
-  function LatestSection() {
-    _classCallCheck(this, LatestSection);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(LatestSection, [{
-    key: "render",
-    value: function render() {
-      var latestItems = this.props.data.map(function (item) {
-        var isExternal = _.get(item, 'is_external', false);
-
-        var href = (0, _getHref.getHref)(_.get(item, 'slug', 'error'), isExternal);
-
-        var imgObj = _.get(item, 'hero_image') || _.get(item, 'og_image');
-
-        return /*#__PURE__*/_react["default"].createElement(ItemFrame, {
-          key: _.get(item, 'id')
-        }, /*#__PURE__*/_react["default"].createElement(_twreporterLink["default"], {
-          href: href,
-          redirect: isExternal
-        }, /*#__PURE__*/_react["default"].createElement(ImageFrame, null, /*#__PURE__*/_react["default"].createElement(_imgWrapper["default"], {
-          alt: _.get(imgObj, 'description'),
-          src: _.get(imgObj, 'resized_targets.mobile.url'),
-          srcSet: _.get(imgObj, 'resized_targets'),
-          sizes: "(min-width: ".concat(desktopMinWidth, ") ").concat(mockup.img.sizes.desktop, ", ") + "(min-width: ".concat(tabletMinWidth, ") ").concat(mockup.img.sizes.tablet, ", ") + "".concat(mockup.img.sizes.mobile)
-        })), /*#__PURE__*/_react["default"].createElement(ContentFrame, null, /*#__PURE__*/_react["default"].createElement(Category, null, _.get(item, 'categories[0].name', '')), /*#__PURE__*/_react["default"].createElement(Title, null, _.get(item, 'title', '')))));
-      });
-      return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, latestItems));
-    }
-  }]);
-
-  return LatestSection;
-}(_react["default"].Component);
-
-LatestSection.defaultProps = {
-  data: [],
-  moduleMap: {}
-};
-LatestSection.propTypes = {
-  data: _propTypes["default"].arrayOf((0, _post["default"])())
-};
-var _default = LatestSection;
-exports["default"] = _default;