@twreporter/react-components 8.17.0-rc.0 → 8.17.0-rc.10

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

@@ -15,34 +15,47 @@ var _path = _interopRequireDefault(require("../utils/path"));
 
 var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
+var _excluded = ["type", "releaseBranch"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-// utils
-// @twreporter
+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; }
+
 var LogoContainer = /*#__PURE__*/_styledComponents["default"].img.withConfig({
   displayName: "logo-header__LogoContainer",
   componentId: "rlga04-0"
 })([""]);
 
+var logoType = {
+  DEFAULT: 'default',
+  WHITE: 'white'
+};
+
 var LogoHeader = function LogoHeader(_ref) {
   var type = _ref.type,
-      releaseBranch = _ref.releaseBranch;
+      releaseBranch = _ref.releaseBranch,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var logoSrc = _path["default"].selectLogoPath('header', releaseBranch, type);
 
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, _extends({
     alt: "The Reporter Logo",
     src: logoSrc
-  }));
+  }, props)));
 };
 
 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 '';

package/lib/material-icon.js

@@ -0,0 +1,53 @@
+"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"));
+
+require("material-symbols/outlined.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var StyledSymbol = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  displayName: "material-icon__StyledSymbol",
+  componentId: "sc-1mjrid5-0"
+})(["font-variation-settings:", ";"], function (props) {
+  return "\n    'FILL': ".concat(props.fill, ",\n    'wght': ").concat(props.weight, ",\n    'GRAD': ").concat(props.grade, ",\n    'opsz': ").concat(props.size, "\n  ");
+});
+
+var MeterialSymbol = function MeterialSymbol(_ref) {
+  var icon = _ref.icon,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? false : _ref$fill,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? 400 : _ref$weight,
+      _ref$grade = _ref.grade,
+      grade = _ref$grade === void 0 ? 0 : _ref$grade,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+  var className = 'material-symbols-outlined';
+  return /*#__PURE__*/_react["default"].createElement(StyledSymbol, {
+    className: className,
+    fill: fill ? '0' : '1',
+    weight: weight,
+    grade: grade,
+    size: size
+  }, icon);
+};
+
+MeterialSymbol.propTypes = {
+  icon: _propTypes["default"].string.isRequired,
+  fill: _propTypes["default"].bool,
+  weight: _propTypes["default"].number,
+  grade: _propTypes["default"].number,
+  size: _propTypes["default"].number
+};
+var _default = MeterialSymbol;
+exports["default"] = _default;

package/lib/pagination/index.js

@@ -25,7 +25,7 @@ var _concat = _interopRequireDefault(require("lodash/concat"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -97,13 +97,16 @@ var styles = {
   },
   prevNextBtnPadding: [0, 20, 2, 20],
   ellipsisBoxPadding: [10, 6, 10, 6],
-  containerMargin: [58, 'auto', 50, 'auto']
+  containerMargin: {
+    "default": [64, 'auto', 120, 'auto'],
+    mobile: [32, 'auto', 64, 'auto']
+  }
 };
 
 var PaginationContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "pagination__PaginationContainer",
   componentId: "sc-17bqftr-0"
-})(["margin:", ";text-align:center;height:", "px;", ""], (0, _css.arrayToCssShorthand)(styles.containerMargin), styles.btnBoxSize.mobile, _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n  "])), styles.btnBoxSize.desktop));
+})(["margin:", ";text-align:center;height:", "px;", " ", ""], (0, _css.arrayToCssShorthand)(styles.containerMargin["default"]), styles.btnBoxSize.mobile, _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n  "])), styles.btnBoxSize.desktop), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.containerMargin.mobile)));
 
 var Boxes = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "pagination__Boxes",
@@ -122,13 +125,13 @@ var PageNumberBox = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConf
   return props.isCurrent ? _color["default"].brown : 'transparent';
 }, function (props) {
   return props.isCurrent ? _color["default"].white : _color["default"].brown;
-}, _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: ", ";\n  "])), function (props) {
+}, _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: ", ";\n  "])), function (props) {
   return props.isCurrent ? '' : 'none';
 }));
 var EllipsisBox = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig({
   displayName: "pagination__EllipsisBox",
   componentId: "sc-17bqftr-4"
-})(["cursor:default;padding:", ";", ""], (0, _css.arrayToCssShorthand)(styles.ellipsisBoxPadding), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+})(["cursor:default;padding:", ";", ""], (0, _css.arrayToCssShorthand)(styles.ellipsisBoxPadding), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 var PrevNextBtn = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig({
   displayName: "pagination__PrevNextBtn",
   componentId: "sc-17bqftr-5"

package/lib/shared-enum.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Size = void 0;
+var Size = Object.freeze({
+  S: 'S',
+  L: 'L'
+});
+exports.Size = Size;

package/lib/simple-header/index.js

@@ -18,8 +18,13 @@ var HeaderContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "sc-4xugf-0"
 })(["display:flex;flex-direction:row;justify-content:center;padding:16px 24px;"]);
 
+var Logo = /*#__PURE__*/(0, _styledComponents["default"])(_logo.LogoHeader).withConfig({
+  displayName: "simple-header__Logo",
+  componentId: "sc-4xugf-1"
+})(["width:144px;height:21px;"]);
+
 var SimpleHeader = function SimpleHeader(props) {
-  return /*#__PURE__*/_react["default"].createElement(HeaderContainer, props, /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, null));
+  return /*#__PURE__*/_react["default"].createElement(HeaderContainer, props, /*#__PURE__*/_react["default"].createElement(Logo, null));
 };
 
 exports.SimpleHeader = SimpleHeader;

package/lib/snack-bar/components/snack-bar.js

@@ -51,7 +51,8 @@ var SnackBar = function SnackBar(_ref) {
 
 SnackBar.propTypes = {
   text: _propTypes["default"].string,
-  theme: _theme2.THEME_PROP_TYPES
+  theme: _propTypes["default"].oneOf(Object.values(_theme2.THEME))
 };
+SnackBar.THEME = _theme2.THEME;
 var _default = SnackBar;
 exports["default"] = _default;

package/lib/snack-bar/stories/snackBar.stories.js

@@ -17,7 +17,7 @@ var _snackBar = _interopRequireDefault(require("../components/snack-bar"));
 
 var _button = require("../../button");
 
-var _theme = require("@twreporter/core/lib/constants/theme");
+var _constants = require("../../storybook/constants");
 
 var _random = _interopRequireDefault(require("lodash/random"));
 
@@ -25,7 +25,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 // hooks
 // components
-// @twreporter
+// storybook
 // lodash
 var _ = {
   random: _random["default"]
@@ -34,7 +34,7 @@ var _default = {
   title: 'Snack Bar',
   component: _snackBar["default"],
   argTypes: {
-    theme: _theme.THEME_STORYBOOK_ARG_TYPE
+    theme: _constants.THEME_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;
@@ -46,7 +46,7 @@ var snackBar = function snackBar(props) {
 exports.snackBar = snackBar;
 snackBar.args = {
   text: '系統作業文字',
-  theme: _theme.THEME.normal
+  theme: _snackBar["default"].THEME.normal
 };
 
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({