@twreporter/react-components 8.5.0-rc.1

package/lib/footer/logo.js

@@ -0,0 +1,92 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = _interopRequireDefault(require("./constants/styles"));
+
+var _paths = require("./constants/paths");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject, _templateObject2;
+
+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 Link = /*#__PURE__*/_styledComponents["default"].a.withConfig({
+  displayName: "logo__Link",
+  componentId: "sc-1lniyyi-0"
+})(["position:relative;cursor:pointer;text-decoration:none !important;"]);
+
+var StyledReporterLogo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "logo__StyledReporterLogo",
+  componentId: "sc-1lniyyi-1"
+})(["transform:translateX(-22px);width:", "px;height:", "px;img{width:100%;filter:grayscale(100%);opacity:", ";}img:hover{filter:none;opacity:1;}", " ", ""], _styles["default"].reporterLogo.width.mobile, _styles["default"].reporterLogo.height.mobile, _styles["default"].grayScaleOpacity.pureBlackWhiteSrc, _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n    height: ", "px;\n  "])), _styles["default"].reporterLogo.width.desktop, _styles["default"].reporterLogo.height.desktop), _mediaQuery["default"].hdOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transform: translateX(-25px);\n    width: ", "px;\n    height: ", "px;\n  "])), _styles["default"].reporterLogo.width.hd, _styles["default"].reporterLogo.height.hd));
+
+var Logo = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Logo, _React$PureComponent);
+
+  var _super = _createSuper(Logo);
+
+  function Logo() {
+    _classCallCheck(this, Logo);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Logo, [{
+    key: "render",
+    value: function render() {
+      var mainOrigin = this.props.mainOrigin;
+      return /*#__PURE__*/_react["default"].createElement(Link, {
+        href: mainOrigin
+      }, /*#__PURE__*/_react["default"].createElement(StyledReporterLogo, null, /*#__PURE__*/_react["default"].createElement("img", {
+        alt: "The Reporter Logo",
+        src: "".concat(_paths.assets, "logo-horizontal02.svg")
+      })));
+    }
+  }]);
+
+  return Logo;
+}(_react["default"].PureComponent);
+
+Logo.propTypes = {
+  mainOrigin: _propTypes["default"].string.isRequired
+};
+Logo.defaultProps = {
+  mainOrigin: ''
+};
+var _default = Logo;
+exports["default"] = _default;

package/lib/is-fetching-wrapper.js

@@ -0,0 +1,126 @@
+"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 _storageUrlProcessor = require("@twreporter/core/lib/utils/storage-url-processor");
+
+var storage = _interopRequireWildcard(require("@twreporter/core/lib/constants/storage"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _excluded = ["isFetching", "showSpinner"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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); }
+
+var spinnerLogoUrl = "".concat(storage.google.schema, "://").concat(storage.google.hostname, "/").concat(storage.google.bucket, "/images/spinner-logo.gif");
+
+var FetchingBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "is-fetching-wrapper__FetchingBlock",
+  componentId: "sc-1oo61h6-0"
+})(["position:relative;display:", ";min-height:100vh;width:100%;", ""], function (props) {
+  return props.isFetching ? 'block' : 'none';
+}, function (props) {
+  return props.showSpinner ? "\n      background-image: url(".concat((0, _storageUrlProcessor.replaceGCSUrlOrigin)(spinnerLogoUrl), ");\n      background-position: center;\n      background-repeat: no-repeat;\n    ") : '';
+});
+
+var TransitionBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "is-fetching-wrapper__TransitionBlock",
+  componentId: "sc-1oo61h6-1"
+})(["transition:opacity 1s ease-in-out;opacity:", ";"], function (props) {
+  return props.isFetching ? 0 : 1;
+});
+
+var FetchingWrapper = function FetchingWrapper(WrappedComponent) {
+  var Wrapper = /*#__PURE__*/function (_React$PureComponent) {
+    _inherits(Wrapper, _React$PureComponent);
+
+    var _super = _createSuper(Wrapper);
+
+    function Wrapper() {
+      _classCallCheck(this, Wrapper);
+
+      return _super.apply(this, arguments);
+    }
+
+    _createClass(Wrapper, [{
+      key: "render",
+      value: function render() {
+        // TODO make client customize FetchingBlock
+        var _this$props = this.props,
+            isFetching = _this$props.isFetching,
+            showSpinner = _this$props.showSpinner,
+            rest = _objectWithoutProperties(_this$props, _excluded);
+
+        if ( /*#__PURE__*/_react["default"].isValidElement(WrappedComponent)) {
+          return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(FetchingBlock, {
+            isFetching: isFetching,
+            showSpinner: showSpinner
+          }), /*#__PURE__*/_react["default"].createElement(TransitionBlock, {
+            isFetching: isFetching
+          }, WrappedComponent));
+        }
+
+        return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(FetchingBlock, {
+          isFetching: isFetching,
+          showSpinner: showSpinner
+        }), /*#__PURE__*/_react["default"].createElement(TransitionBlock, {
+          isFetching: isFetching
+        }, /*#__PURE__*/_react["default"].createElement(WrappedComponent, rest)));
+      }
+    }]);
+
+    return Wrapper;
+  }(_react["default"].PureComponent);
+
+  Wrapper.defaultProps = {
+    isFetching: false,
+    showSpinner: false // fetchingBlockStyles: '',
+
+  };
+  Wrapper.propTypes = {
+    isFetching: _propTypes["default"].bool,
+    showSpinner: _propTypes["default"].bool // fetchingBlockStyles:  PropTypes.string,
+
+  };
+  return Wrapper;
+};
+
+var _default = FetchingWrapper;
+exports["default"] = _default;

package/lib/link-with-tracker.js

@@ -0,0 +1,153 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _excluded = ["clickActionName", "href", "to", "rel", "target"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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); }
+
+var _ = {
+  get: _get["default"]
+};
+var eventAction = 'Click';
+var hitType = 'event';
+var keysToBeTracked = ['Enter', 'NumpadEnter', 'Space'];
+
+var TrackedLink = /*#__PURE__*/function (_PureComponent) {
+  _inherits(TrackedLink, _PureComponent);
+
+  var _super = _createSuper(TrackedLink);
+
+  function TrackedLink(props) {
+    var _this;
+
+    _classCallCheck(this, TrackedLink);
+
+    _this = _super.call(this, props);
+    _this.sendClickTrackingEvent = _this.sendClickTrackingEvent.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(TrackedLink, [{
+    key: "isKeyToBeTracked",
+    value: function isKeyToBeTracked(keyCode) {
+      return keysToBeTracked.some(function (keyToBeTracked) {
+        return keyCode === keyToBeTracked;
+      });
+    }
+  }, {
+    key: "sendClickTrackingEvent",
+    value: function sendClickTrackingEvent(e) {
+      if (e.code && !this.isKeyToBeTracked(e.code)) return;
+      var clickActionName = this.props.clickActionName || 'undefined-click-action';
+
+      var url = _.get(window, 'location.href', 'null');
+
+      var eventLabel = "[".concat(clickActionName, "]: ").concat(url);
+
+      if (typeof gtag === 'function') {
+        try {
+          gtag(hitType, eventAction, {
+            event_label: eventLabel
+          });
+        } catch (err) {
+          console.log('gtag error', err); // eslint-disable-line no-console
+        }
+      } else if (typeof ga === 'function') {
+        try {
+          ga('send', {
+            hitType: hitType,
+            eventAction: eventAction,
+            eventLabel: eventLabel
+          });
+        } catch (err) {
+          console.log('ga error', err); // eslint-disable-line no-console
+        }
+      } else {
+        console.log('No `gtag` or `ga` instance exists to send the link clicked event.'); // eslint-disable-line no-console
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          clickActionName = _this$props.clickActionName,
+          href = _this$props.href,
+          to = _this$props.to,
+          rel = _this$props.rel,
+          target = _this$props.target,
+          elseProps = _objectWithoutProperties(_this$props, _excluded);
+
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/anchor-has-content
+        _react["default"].createElement("a", _extends({
+          href: href || to,
+          onMouseDown: this.sendClickTrackingEvent,
+          onKeyDown: this.sendClickTrackingEvent,
+          rel: rel || (target === '_blank' ? 'noopener noreferrer' : ''),
+          target: target
+        }, elseProps))
+      );
+    }
+  }]);
+
+  return TrackedLink;
+}(_react.PureComponent);
+
+exports["default"] = TrackedLink;
+TrackedLink.propTypes = {
+  clickActionName: _propTypes["default"].string,
+  href: _propTypes["default"].string,
+  to: _propTypes["default"].string,
+  rel: _propTypes["default"].string,
+  target: _propTypes["default"].string
+};
+TrackedLink.defaultProps = {
+  clickActionName: '',
+  href: '',
+  to: '',
+  rel: '',
+  target: '_self'
+};

package/lib/listing-page/components/image.js

@@ -0,0 +1,185 @@
+"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 _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _storageUrlProcessor = require("@twreporter/core/lib/utils/storage-url-processor");
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+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); }
+
+var LogoIcon = function LogoIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("title", null, "Fill 1"), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M5 112.563a5.001 5.001 0 0 1-5-5V4.999C0 3.298.866 1.713 2.298.794A5.003 5.003 0 0 1 7.08.451l42.724 19.521a5 5 0 0 1-4.156 9.097L10 12.783V99.78l49.843-22.775V32.014a5 5 0 0 1 3.669-4.82l37.105-10.247a4.999 4.999 0 0 1 6.331 4.819v67.44a5.003 5.003 0 0 1-6.142 4.868l-20.106-4.716a5 5 0 0 1 2.284-9.736l13.965 3.275V28.332L69.844 35.82v44.4a5 5 0 0 1-2.922 4.549L7.078 112.11a4.996 4.996 0 0 1-2.079.451",
+    fill: "#DBDCDC",
+    fillRule: "evenodd"
+  }));
+};
+
+LogoIcon.defaultProps = {
+  width: "107",
+  height: "113",
+  viewBox: "0 0 107 113",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var _ = {
+  get: _get["default"]
+};
+
+var ImgContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "image__ImgContainer",
+  componentId: "iof1ou-0"
+})(["width:100%;height:100%;position:relative;"]);
+
+var ImgObjectFit = /*#__PURE__*/(0, _styledComponents["default"])(ImgContainer).withConfig({
+  displayName: "image__ImgObjectFit",
+  componentId: "iof1ou-1"
+})(["opacity:", ";transition:opacity 1s ease;> img{width:100%;height:100%;object-fit:cover;}"], function (props) {
+  return props.opacity;
+});
+var ImgFallback = /*#__PURE__*/(0, _styledComponents["default"])(ImgContainer).withConfig({
+  displayName: "image__ImgFallback",
+  componentId: "iof1ou-2"
+})(["background-size:cover;background-image:", ";background-position:center center;"], function (props) {
+  return "url(".concat((0, _storageUrlProcessor.replaceGCSUrlOrigin)(_.get(props, 'url')), ")");
+}); // Vertically and horizontally centering
+
+var LogoCenteringBlock = /*#__PURE__*/(0, _styledComponents["default"])(ImgContainer).withConfig({
+  displayName: "image__LogoCenteringBlock",
+  componentId: "iof1ou-3"
+})(["position:absolute;justify-content:center;align-items:center;background-color:#fff;display:", ";"], function (props) {
+  return props.display;
+});
+
+var Image = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Image, _React$PureComponent);
+
+  var _super = _createSuper(Image);
+
+  function Image(props) {
+    var _this;
+
+    _classCallCheck(this, Image);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      isObjectFit: true,
+      isImgOnLoad: false
+    };
+    _this.handleImgOnLoad = _this._handleImgOnLoad.bind(_assertThisInitialized(_this));
+    _this.imgNode = null;
+    return _this;
+  }
+
+  _createClass(Image, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setState({
+        isObjectFit: 'objectFit' in _.get(document, 'documentElement.style')
+      }); // Check if img is already loaded, and cached on the browser.
+      // If cached, React.img won't trigger onLoad event.
+      // Hence, we need to trigger re-rendering.
+
+      if (this.imgNode) {
+        this.setState({
+          isImgOnLoad: this.imgNode.complete
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnMount",
+    value: function componentWillUnMount() {
+      this.imgNode = null;
+    }
+  }, {
+    key: "_handleImgOnLoad",
+    value: function _handleImgOnLoad() {
+      this.setState({
+        isImgOnLoad: true
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          src = _this$props.src,
+          alt = _this$props.alt,
+          srcSet = _this$props.srcSet;
+      var _this$state = this.state,
+          isObjectFit = _this$state.isObjectFit,
+          isImgOnLoad = _this$state.isImgOnLoad;
+      var logoDisplay = 'flex';
+
+      if (!isObjectFit) {
+        logoDisplay = 'none';
+      } else if (isImgOnLoad) {
+        logoDisplay = 'none';
+      }
+
+      var ImgJSX = isObjectFit ? /*#__PURE__*/_react["default"].createElement(ImgObjectFit, {
+        opacity: isImgOnLoad ? 1 : 0
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        ref: function ref(node) {
+          _this2.imgNode = node;
+        },
+        alt: alt,
+        src: (0, _storageUrlProcessor.replaceGCSUrlOrigin)(src),
+        srcSet: srcSet,
+        onLoad: this.handleImgOnLoad
+      })) : /*#__PURE__*/_react["default"].createElement(ImgFallback, {
+        url: (0, _storageUrlProcessor.replaceGCSUrlOrigin)(src)
+      });
+      return /*#__PURE__*/_react["default"].createElement(ImgContainer, null, /*#__PURE__*/_react["default"].createElement(LogoCenteringBlock, {
+        display: logoDisplay
+      }, /*#__PURE__*/_react["default"].createElement(LogoIcon, null)), ImgJSX);
+    }
+  }]);
+
+  return Image;
+}(_react["default"].PureComponent);
+
+Image.defaultProps = {
+  alt: '',
+  src: '',
+  srcSet: ''
+};
+Image.propTypes = {
+  alt: _propTypes["default"].string,
+  src: _propTypes["default"].string.isRequired,
+  srcSet: _propTypes["default"].string
+};
+var _default = Image;
+exports["default"] = _default;