@twreporter/react-components 8.17.0-rc.1 → 8.17.0-rc.11

package/lib/listing-page/components/card-list.js

@@ -0,0 +1,165 @@
+"use strict";
+
+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 _card = require("../../card");
+
+var _isFetchingWrapper = _interopRequireDefault(require("../../is-fetching-wrapper"));
+
+var _divider = _interopRequireDefault(require("../../divider"));
+
+var _customizedLink = _interopRequireDefault(require("../../customized-link"));
+
+var _rwd = require("../../rwd");
+
+var _mockupSpec = _interopRequireDefault(require("../constants/mockup-spec"));
+
+var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _date = require("@twreporter/core/lib/utils/date");
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+var _forEach = _interopRequireDefault(require("lodash/forEach"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var _ = {
+  forEach: _forEach["default"],
+  get: _get["default"],
+  map: _map["default"]
+};
+var Card = /*#__PURE__*/(0, _styledComponents["default"])(_card.ArticleCard).withConfig({
+  displayName: "card-list__Card",
+  componentId: "yvf001-0"
+})(["width:100%;"]);
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "card-list__Container",
+  componentId: "yvf001-1"
+})(["display:flex;flex-direction:column;a{color:inherit;text-decoration:none;}"]);
+
+var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "card-list__Item",
+  componentId: "yvf001-2"
+})(["margin-bottom:24px;&:hover{opacity:0.7;}&:last-child{margin-bottom:0;}width:100%;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "%;\n  "])), _mockupSpec["default"].mobile.cardWidth / _mockupSpec["default"].mobile.maxWidth * 100));
+
+var StyledDivider = /*#__PURE__*/(0, _styledComponents["default"])(_divider["default"]).withConfig({
+  displayName: "card-list__StyledDivider",
+  componentId: "yvf001-3"
+})(["margin-top:24px;"]);
+
+var FlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "card-list__FlexItem",
+  componentId: "yvf001-4"
+})(["width:", "px;margin:0 auto;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;", " ", " ", ""], _mockupSpec["default"].hd.maxWidth, _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.maxWidth), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].tablet.maxWidth), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n    justify-content: center;\n  "]))));
+
+var Content = (0, _isFetchingWrapper["default"])(FlexItem);
+
+var CardList = function CardList(_ref) {
+  var _ref$data = _ref.data,
+      data = _ref$data === void 0 ? [] : _ref$data,
+      _ref$isFetching = _ref.isFetching,
+      isFetching = _ref$isFetching === void 0 ? false : _ref$isFetching,
+      _ref$showSpinner = _ref.showSpinner,
+      showSpinner = _ref$showSpinner === void 0 ? false : _ref$showSpinner,
+      _ref$releaseBranch = _ref.releaseBranch,
+      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch.BRANCH.master : _ref$releaseBranch;
+
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  var getFirstCategory = function getFirstCategory(categorySets) {
+    var res = '';
+
+    _.forEach(categorySets, function (_ref2) {
+      var category = _ref2.category,
+          subcategory = _ref2.subcategory;
+
+      if (category && category.name) {
+        res = category.name;
+        return false;
+      }
+    });
+
+    return res;
+  };
+
+  var listJSX = _.map(data, function (item) {
+    var id = item.id,
+        title = item.title,
+        slug = item.slug,
+        style = item.style;
+    var isInteractiveArticle = style === _theme.ARTICLE_THEME.interactive;
+    var link = {
+      to: "".concat(isInteractiveArticle ? _entityPath["default"].interactiveArticle : _entityPath["default"].article).concat(slug),
+      target: isInteractiveArticle ? '_blank' : ''
+    };
+    var articleCardProps = {
+      title: title,
+      description: _.get(item, 'og_description', ''),
+      image: {
+        alt: _.get(item, 'hero_image.description', ''),
+        src: _.get(item, 'hero_image.resized_targets.mobile.url') || _.get(item, 'og_image.resized_targets.mobile.url')
+      },
+      category: getFirstCategory(_.get(item, 'category_set', [])),
+      date: (0, _date.date2yyyymmdd)(_.get(item, 'published_date'), '/'),
+      releaseBranch: releaseBranch
+    };
+    return /*#__PURE__*/_react["default"].createElement(Item, {
+      key: id
+    }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(_rwd.DesktopAndAbove, null, /*#__PURE__*/_react["default"].createElement(Card, _extends({}, articleCardProps, {
+      size: _card.ArticleCard.Size.L
+    }))), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndBelow, null, /*#__PURE__*/_react["default"].createElement(Card, _extends({}, articleCardProps, {
+      size: _card.ArticleCard.Size.S
+    }))), /*#__PURE__*/_react["default"].createElement(StyledDivider, null)));
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Content, {
+    isFetching: isFetching,
+    showSpinner: showSpinner
+  }, listJSX));
+};
+
+CardList.propTypes = {
+  data: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string.isRequired,
+    title: _propTypes["default"].string.isRequired,
+    og_description: _propTypes["default"].string.isRequired,
+    hero_image: _propTypes["default"].object,
+    og_image: _propTypes["default"].object,
+    category_set: _propTypes["default"].array,
+    published_date: _propTypes["default"].string.isRequired,
+    slug: _propTypes["default"].string.isRequired,
+    style: _propTypes["default"].string
+  })),
+  isFetching: _propTypes["default"].bool,
+  showSpinner: _propTypes["default"].bool,
+  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES
+};
+var _default = CardList;
+exports["default"] = _default;

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

@@ -41,6 +41,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+/* Notice: this component is deprecated.
+ * Please migrate to use @twerporter/react-components/lib/image-with-fallback.js
+ */
 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",

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

@@ -21,6 +21,8 @@ var _date = require("@twreporter/core/lib/utils/date");
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _theme = require("@twreporter/core/lib/constants/theme");
+
 var _mockupSpec = _interopRequireDefault(require("../constants/mockup-spec"));
 
 var _color = _interopRequireDefault(require("../constants/color"));
@@ -107,16 +109,17 @@ var List = /*#__PURE__*/function (_PureComponent) {
           catName = _this$props.catName,
           tagName = _this$props.tagName,
           isFetching = _this$props.isFetching,
-          showSpinner = _this$props.showSpinner;
+          showSpinner = _this$props.showSpinner,
+          showCategory = _this$props.showCategory;
       var listJSX = [];
 
       _.forEach(data, function (item) {
         var style = _.get(item, 'style');
 
-        var slug = _.get(item, 'slug'); // TODO extract interactive as to a const file
-
+        var slug = _.get(item, 'slug');
 
-        var to = style === 'interactive' ? _entityPath["default"].interactiveArticle + slug : _entityPath["default"].article + slug;
+        var isInteractiveArticle = style === _theme.ARTICLE_THEME.interactive;
+        var to = "".concat(isInteractiveArticle ? _entityPath["default"].interactiveArticle : _entityPath["default"].article).concat(slug);
 
         var tags = _.map(_.get(item, 'tags'), function (tag) {
           if (_.get(tag, 'name') === tagName) {
@@ -143,12 +146,12 @@ var List = /*#__PURE__*/function (_PureComponent) {
             // In cases which do not have `hero_image`, display `og_image` as fallback.
             src: _.get(item, 'hero_image.resized_targets.mobile.url') || _.get(item, 'og_image.resized_targets.mobile.url')
           },
-          category: _.get(item, 'categories.0.name', ''),
+          category: showCategory && _.get(item, 'category_set.0.category.name', ''),
           pubDate: (0, _date.date2yyyymmdd)(_.get(item, 'published_date', ''), '.'),
           tags: tags,
           link: {
             to: to,
-            target: style === 'interactive' ? '_blank' : ''
+            target: isInteractiveArticle ? '_blank' : ''
           }
         }));
       });
@@ -170,7 +173,8 @@ List.defaultProps = {
   catName: '',
   tagName: '',
   isFetching: false,
-  showSpinner: false
+  showSpinner: false,
+  showCategory: false
 };
 List.propTypes = {
   data: _propTypes["default"].arrayOf(_propTypes["default"].shape({
@@ -186,7 +190,8 @@ List.propTypes = {
   tagName: _propTypes["default"].string,
   catName: _propTypes["default"].string,
   isFetching: _propTypes["default"].bool,
-  showSpinner: _propTypes["default"].bool
+  showSpinner: _propTypes["default"].bool,
+  showCategory: _propTypes["default"].bool
 };
 var _default = List;
 exports["default"] = _default;

package/lib/listing-page/constants/prop-types.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ARTICLE_PROP_TYPES = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var ARTICLE_PROP_TYPES = _propTypes["default"].shape({
+  id: _propTypes["default"].string.isRequired,
+  title: _propTypes["default"].string.isRequired,
+  og_description: _propTypes["default"].string.isRequired,
+  hero_image: _propTypes["default"].object.isRequired,
+  categories: _propTypes["default"].array,
+  category_set: _propTypes["default"].array,
+  published_date: _propTypes["default"].string.isRequired,
+  slug: _propTypes["default"].string.isRequired,
+  tags: _propTypes["default"].array,
+  style: _propTypes["default"].string
+});
+
+exports.ARTICLE_PROP_TYPES = ARTICLE_PROP_TYPES;

package/lib/listing-page/index.js

@@ -15,16 +15,25 @@ Object.defineProperty(exports, "List", {
     return _list["default"];
   }
 });
+Object.defineProperty(exports, "CardList", {
+  enumerable: true,
+  get: function get() {
+    return _cardList["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _topics = _interopRequireDefault(require("./components/topics"));
 
 var _list = _interopRequireDefault(require("./components/list"));
 
+var _cardList = _interopRequireDefault(require("./components/card-list"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   TopicsList: _topics["default"],
-  List: _list["default"]
+  List: _list["default"],
+  CardList: _cardList["default"]
 };
 exports["default"] = _default;

package/lib/listing-page/stories/cardList.stories.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.card = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _cardList = _interopRequireDefault(require("../components/card-list"));
+
+var _constants = require("../../storybook/constants");
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'List/Card',
+  component: _cardList["default"],
+  argTypes: {
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
+  }
+};
+exports["default"] = _default;
+
+var card = function card(args) {
+  return /*#__PURE__*/_react["default"].createElement(_cardList["default"], args);
+};
+
+exports.card = card;
+card.args = {
+  data: [{
+    id: '12345',
+    title: '文章標題文章標題文章標題文章標題文章標題文章標題文章標題文章標題',
+    og_description: '文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述',
+    category_set: [{
+      category: {
+        name: '主分類'
+      },
+      subcategory: {
+        name: '子分類'
+      }
+    }],
+    published_date: '2023-02-12T16:00:00Z',
+    hero_image: {
+      description: 'test'
+    },
+    slug: 'this-is-a-test-article'
+  }, {
+    id: '12347',
+    title: '文章標題',
+    og_description: '文章描述',
+    published_date: '2023-02-12T16:00:00Z',
+    hero_image: {
+      description: 'test'
+    },
+    slug: 'this-is-a-test-article-3'
+  }, {
+    id: '12346',
+    title: '文章標題文章標題文章標題文章標題文章標題文章標題文章標題文章標題',
+    og_description: '文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述',
+    category_set: [{
+      category: {
+        name: '主分類'
+      },
+      subcategory: {
+        name: '子分類'
+      }
+    }],
+    published_date: '2023-02-12T16:00:00Z',
+    hero_image: {
+      description: 'test',
+      resized_targets: {
+        mobile: {
+          url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png'
+        }
+      }
+    },
+    slug: 'this-is-a-test-article-2'
+  }],
+  releaseBranch: _releaseBranch.BRANCH.master
+};

package/lib/logo/components/logo-header.js

@@ -30,6 +30,11 @@ var LogoContainer = /*#__PURE__*/_styledComponents["default"].img.withConfig({
   componentId: "rlga04-0"
 })([""]);
 
+var logoType = {
+  DEFAULT: 'default',
+  WHITE: 'white'
+};
+
 var LogoHeader = function LogoHeader(_ref) {
   var type = _ref.type,
       releaseBranch = _ref.releaseBranch,
@@ -44,12 +49,13 @@ var LogoHeader = function LogoHeader(_ref) {
 };
 
 LogoHeader.propTypes = {
-  type: _propTypes["default"].oneOf(['default', 'white']),
+  type: _propTypes["default"].oneOf(Object.values(logoType)),
   releaseBranch: _releaseBranch.BRANCH_PROP_TYPES
 };
 LogoHeader.defaultProps = {
-  type: 'default',
+  type: logoType.DEFAULT,
   releaseBranch: _releaseBranch.BRANCH.master
 };
+LogoHeader.Type = logoType;
 var _default = LogoHeader;
 exports["default"] = _default;

package/lib/logo/components/logo-loading-fallback.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _path = _interopRequireDefault(require("../utils/path"));
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// utils
+// @twreporter
+var LogoContainer = /*#__PURE__*/_styledComponents["default"].img.withConfig({
+  displayName: "logo-loading-fallback__LogoContainer",
+  componentId: "sc-12r72it-0"
+})([""]);
+
+var LogoFallback = function LogoFallback(_ref) {
+  var releaseBranch = _ref.releaseBranch;
+
+  var logoSrc = _path["default"].selectLogoPath('loading-fallback', releaseBranch);
+
+  return /*#__PURE__*/_react["default"].createElement(LogoContainer, {
+    alt: "The Reporter Loading Fallback",
+    src: logoSrc
+  });
+};
+
+LogoFallback.propTypes = {
+  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES
+};
+LogoFallback.defaultProps = {
+  releaseBranch: _releaseBranch.BRANCH.master
+};
+var _default = LogoFallback;
+exports["default"] = _default;

package/lib/logo/components/logo-symbol.js

@@ -30,9 +30,15 @@ var LogoContainer = /*#__PURE__*/_styledComponents["default"].img.withConfig({
   componentId: "dea8w0-0"
 })([""]);
 
+var logoType = {
+  DEFAULT: 'default',
+  BLACK: 'black',
+  WHITE: 'white'
+};
+
 var LogoSymbol = function LogoSymbol(_ref) {
   var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
+      type = _ref$type === void 0 ? logoType.DEFAULT : _ref$type,
       _ref$releaseBranch = _ref.releaseBranch,
       releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch.BRANCH.master : _ref$releaseBranch,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -46,8 +52,9 @@ var LogoSymbol = function LogoSymbol(_ref) {
 };
 
 LogoSymbol.propTypes = {
-  type: _propTypes["default"].oneOf(['default', 'black', 'white']),
+  type: _propTypes["default"].oneOf(Object.values(logoType)),
   releaseBranch: _releaseBranch.BRANCH_PROP_TYPES
 };
+LogoSymbol.Type = logoType;
 var _default = LogoSymbol;
 exports["default"] = _default;

package/lib/logo/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "LogoSymbol", {
     return _logoSymbol["default"];
   }
 });
+Object.defineProperty(exports, "LogoFallback", {
+  enumerable: true,
+  get: function get() {
+    return _logoLoadingFallback["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _logoHeader = _interopRequireDefault(require("./components/logo-header"));
@@ -29,11 +35,14 @@ var _logoFooter = _interopRequireDefault(require("./components/logo-footer"));
 
 var _logoSymbol = _interopRequireDefault(require("./components/logo-symbol"));
 
+var _logoLoadingFallback = _interopRequireDefault(require("./components/logo-loading-fallback"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   LogoHeader: _logoHeader["default"],
   LogoFooter: _logoFooter["default"],
-  LogoSymbol: _logoSymbol["default"]
+  LogoSymbol: _logoSymbol["default"],
+  LogoFallback: _logoLoadingFallback["default"]
 };
 exports["default"] = _default;

package/lib/logo/stories/logoFooter.stories.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _logoFooter = _interopRequireDefault(require("../components/logo-footer"));
 
-var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+var _constants = require("../../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -17,7 +17,7 @@ var _default = {
   title: 'Logo/Footer',
   component: _logoFooter["default"],
   argTypes: {
-    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;

package/lib/logo/stories/logoHeader.stories.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _logoHeader = _interopRequireDefault(require("../components/logo-header"));
 
-var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+var _constants = require("../../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -17,7 +17,7 @@ var _default = {
   title: 'Logo/Header',
   component: _logoHeader["default"],
   argTypes: {
-    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;
@@ -28,5 +28,5 @@ var header = function header(args) {
 
 exports.header = header;
 header.args = {
-  type: 'default'
+  type: _logoHeader["default"].Type.DEFAULT
 };

package/lib/logo/stories/logoLoadingFallback.stories.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fallback = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _logoLoadingFallback = _interopRequireDefault(require("../components/logo-loading-fallback"));
+
+var _constants = require("../../storybook/constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Logo/Fallback',
+  component: _logoLoadingFallback["default"],
+  argTypes: {
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
+  }
+};
+exports["default"] = _default;
+
+var fallback = function fallback(args) {
+  return /*#__PURE__*/_react["default"].createElement(_logoLoadingFallback["default"], args);
+};
+
+exports.fallback = fallback;

package/lib/logo/stories/logoSymbol.stories.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _logoSymbol = _interopRequireDefault(require("../components/logo-symbol"));
 
-var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+var _constants = require("../../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -17,7 +17,7 @@ var _default = {
   title: 'Logo/Symbol',
   component: _logoSymbol["default"],
   argTypes: {
-    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;
@@ -28,5 +28,5 @@ var symbol = function symbol(args) {
 
 exports.symbol = symbol;
 symbol.args = {
-  type: 'default'
+  type: _logoSymbol["default"].Type.DEFAULT
 };

package/lib/logo/utils/path.js

@@ -30,6 +30,11 @@ function selectLogoPath(logoType, branch, type) {
         return path[type];
       }
 
+    case 'loading-fallback':
+      {
+        return "".concat(baseGCSDir, "logo-loading-fallback.").concat(branch, ".svg");
+      }
+
     default:
       {
         return '';