@twreporter/react-components 8.15.0-rc.5 → 8.15.0-rc.7

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.15.0-rc.7](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.15.0-rc.6...@twreporter/react-components@8.15.0-rc.7) (2022-11-25)
+
+
+### Bug Fixes
+
+* add title bar to topic & refine style ([70bb908](https://github.com/twreporter/twreporter-npm-packages/commit/70bb908caca7a6e488cc714d842db0d322d4fe7f))
+* fix bookmark status bar style ([e26e9d1](https://github.com/twreporter/twreporter-npm-packages/commit/e26e9d1f73ecd5692625a6ea3002721e905604ea))
+* fix bookmark title style ([1359c67](https://github.com/twreporter/twreporter-npm-packages/commit/1359c6788e716cf43cba474b1d8f3142ed9c7f88))
+* fix bookmark width ([5887126](https://github.com/twreporter/twreporter-npm-packages/commit/588712652c7b3130ea2d535312fb7fc3a792740b))
+* fix topic content margin ([1c3aa52](https://github.com/twreporter/twreporter-npm-packages/commit/1c3aa52dbe4b123012f8bc5fd9b1a48f15e056d8))
+* fix topic page content width ([4e07fbb](https://github.com/twreporter/twreporter-npm-packages/commit/4e07fbb5bf6018a82494dfe511f0ce70c017dac8))
+* fix topic title margin ([5f85e69](https://github.com/twreporter/twreporter-npm-packages/commit/5f85e69ce3968828ff8ba3d7061e0200c99a0e3c))
+* refine tag page style ([62265b8](https://github.com/twreporter/twreporter-npm-packages/commit/62265b85cb4df93d69f876ff0cf2989601b238ba))
+* refine tag page style ([b9b3676](https://github.com/twreporter/twreporter-npm-packages/commit/b9b3676478c2aa8720b96c7e8affa30d515b2969))
+* remove unused import ([fff1a13](https://github.com/twreporter/twreporter-npm-packages/commit/fff1a13212c11fb2ac40935486942709096bac24))
+
+
+
+
+
+# [8.15.0-rc.6](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.15.0-rc.5...@twreporter/react-components@8.15.0-rc.6) (2022-11-25)
+
+
+### Bug Fixes
+
+* add constants file to manage prop types ([4841e86](https://github.com/twreporter/twreporter-npm-packages/commit/4841e868cad52cfd2168f0c146de30950e27c996))
+
+
+### Features
+
+* add mobile & tablet view for new info structure ([b0e158c](https://github.com/twreporter/twreporter-npm-packages/commit/b0e158c751230723626c9cb9de83641f0588c189))
+
+
+
+
+
 # [8.15.0-rc.5](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.15.0-rc.4...@twreporter/react-components@8.15.0-rc.5) (2022-11-07)
 
 

package/lib/bookmark-list/bookmarks.js

@@ -33,7 +33,7 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -52,12 +52,12 @@ var PageContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Column = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmarks__Column",
   componentId: "sc-1m95x6z-1"
-})(["margin:0 auto;width:97%;max-width:834px;", " ", ""], _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    max-width: 707px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n  "]))));
+})(["margin:0 auto;width:97%;max-width:922px;", " ", ""], _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    max-width: 698px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n  "]))));
 
 var StatusBar = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmarks__StatusBar",
   componentId: "sc-1m95x6z-2"
-})(["", " padding-bottom:64px;width:stretch;"], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-left: 1em;\n    padding-right: 1em;\n  "]))));
+})(["", " ", " padding-bottom:64px;width:stretch;"], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-left: 24px;\n    padding-right: 24px;\n    padding-bottom: 24px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-bottom: 32px;\n  "]))));
 
 var TitleContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmarks__TitleContainer",

package/lib/input/components/search-bar.js

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _theme = require("../utils/theme");
 
+var _type = require("../constants/type");
+
 var _icon = require("../../icon");
 
 var _button = require("../../button");
@@ -27,7 +29,7 @@ var _theme2 = require("@twreporter/core/lib/constants/theme");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _excluded = ["placeholder", "theme", "releaseBranch", "onSearch", "onClose", "handleBlur", "autofocus"];
+var _excluded = ["placeholder", "theme", "releaseBranch", "onSearch", "onClose", "handleBlur", "autofocus", "widthType"];
 
 var _templateObject, _templateObject2;
 
@@ -71,8 +73,12 @@ var InputContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Container = /*#__PURE__*/_styledComponents["default"].form.withConfig({
   displayName: "search-bar__Container",
   componentId: "sc-1mjh7mz-1"
-})(["display:flex;align-items:center;", "{", " ", "}"], InputContainer, function (props) {
+})(["display:flex;align-items:center;", " ", "{", " &,& > input{", "}", "}"], function (props) {
+  return props.widthType === 'stretch' ? 'width: 100%;' : '';
+}, InputContainer, function (props) {
   return props.focus ? "\n      background-color: ".concat(props.focusBgColor, ";\n      border: 1px solid ").concat(props.borderColor, ";\n    ") : '';
+}, function (props) {
+  return props.widthType === 'stretch' ? 'width: 100%;' : '';
 }, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      ", "\n    "])), function (props) {
   return props.focus ? "\n        background-color: ".concat(props.desktopBgColor, ";\n      ") : '';
 }));
@@ -110,6 +116,8 @@ var SearchBar = function SearchBar(_ref) {
       handleBlur = _ref$handleBlur === void 0 ? defaultFunc : _ref$handleBlur,
       _ref$autofocus = _ref.autofocus,
       autofocus = _ref$autofocus === void 0 ? true : _ref$autofocus,
+      _ref$widthType = _ref.widthType,
+      widthType = _ref$widthType === void 0 ? _type.WIDTH_TYPE.fit : _ref$widthType,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(''),
@@ -174,7 +182,8 @@ var SearchBar = function SearchBar(_ref) {
     focus: focus,
     focusBgColor: focusBgColor,
     desktopBgColor: desktopBgColor,
-    borderColor: borderColor
+    borderColor: borderColor,
+    widthType: widthType
   }, props), /*#__PURE__*/_react["default"].createElement(InputContainer, {
     bgColor: bgColor
   }, /*#__PURE__*/_react["default"].createElement(Input, {
@@ -205,7 +214,8 @@ SearchBar.propTypes = {
   onSearch: _propTypes["default"].func,
   onClose: _propTypes["default"].func,
   handleBlur: _propTypes["default"].func,
-  autofocus: _propTypes["default"].bool
+  autofocus: _propTypes["default"].bool,
+  widthType: _type.WIDTH_PROP_TYPE
 };
 var _default = SearchBar;
 exports["default"] = _default;

package/lib/input/constants/type.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WIDTH_PROP_TYPE = exports.WIDTH_TYPE = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var WIDTH_TYPE = {
+  fit: 'fit',
+  stretch: 'stretch'
+};
+exports.WIDTH_TYPE = WIDTH_TYPE;
+
+var WIDTH_PROP_TYPE = _propTypes["default"].oneOf([WIDTH_TYPE.fit, WIDTH_TYPE.stretch]);
+
+exports.WIDTH_PROP_TYPE = WIDTH_PROP_TYPE;

package/lib/input/stories/search-bar.stories.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _searchBar = _interopRequireDefault(require("../components/search-bar"));
 
+var _type = require("../constants/type");
+
 var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
 var _theme = require("@twreporter/core/lib/constants/theme");
@@ -48,5 +50,7 @@ searchBar.args = {
   theme: _theme.THEME.normal,
   releaseBranch: _releaseBranch.BRANCH.master,
   onSearch: onSearch,
-  onClose: onClose
+  onClose: onClose,
+  autofocus: false,
+  widthType: _type.WIDTH_TYPE.fit
 };

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

@@ -19,14 +19,14 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _date = require("@twreporter/core/lib/utils/date");
 
-var _font = require("@twreporter/core/lib/constants/font");
-
 var _mockupSpec = _interopRequireDefault(require("../constants/mockup-spec"));
 
-var _color = _interopRequireDefault(require("../constants/color"));
-
 var _listItem = _interopRequireDefault(require("./list-item"));
 
+var _pageContent = _interopRequireDefault(require("./page-content"));
+
+var _titleBar = require("../../title-bar");
+
 var _isFetchingWrapper = _interopRequireDefault(require("../../is-fetching-wrapper"));
 
 var _forEach = _interopRequireDefault(require("lodash/forEach"));
@@ -35,7 +35,7 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 
 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); }
 
@@ -71,20 +71,10 @@ var _ = {
   map: _map["default"]
 };
 
-var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "list__Container",
-  componentId: "sc-1olquk4-0"
-})(["margin:45px auto 0 auto;"]);
-
-var Header = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "list__Header",
-  componentId: "sc-1olquk4-1"
-})(["font-size:36px;font-weight:", ";color:", ";margin:0 auto 45px auto;text-align:center;", ""], _font.fontWeight.bold, _color["default"].darkDarkGray, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "%;\n    text-align: left;\n  "])), _mockupSpec["default"].mobile.cardWidth / _mockupSpec["default"].mobile.maxWidth * 100));
-
 var FlexItems = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list__FlexItems",
-  componentId: "sc-1olquk4-2"
-})(["width:", "px;margin:0 auto;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;> div:nth-child(odd){margin-right:", "px;}", " ", " ", ""], _mockupSpec["default"].hd.maxWidth, _mockupSpec["default"].marginBetweenItems, _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    > div:nth-child(odd) {\n      margin-right: 0;\n    }\n    justify-content: center;\n  "]))));
+  componentId: "sc-1olquk4-0"
+})(["width:", "px;margin:64px auto 0;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;> div:nth-child(odd){margin-right:", "px;}", " ", " ", ""], _mockupSpec["default"].hd.maxWidth, _mockupSpec["default"].marginBetweenItems, _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.maxWidth), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n    margin-top: 32px;\n  "])), _mockupSpec["default"].tablet.maxWidth), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    margin-top: 24px;\n    > div:nth-child(odd) {\n      margin-right: 0;\n    }\n    justify-content: center;\n  "]))));
 
 var Items = (0, _isFetchingWrapper["default"])(FlexItems);
 
@@ -153,9 +143,11 @@ var List = /*#__PURE__*/function (_PureComponent) {
         }));
       });
 
-      var headerTitle = catName || (tagName ? "#".concat(tagName) : '');
-      var headerJSX = headerTitle ? /*#__PURE__*/_react["default"].createElement(Header, null, headerTitle) : null;
-      return /*#__PURE__*/_react["default"].createElement(Container, null, headerJSX, /*#__PURE__*/_react["default"].createElement(Items, {
+      var headerTitle = catName || tagName;
+      var headerJSX = headerTitle ? /*#__PURE__*/_react["default"].createElement(_titleBar.TitleBar, {
+        title: headerTitle !== null && headerTitle !== void 0 ? headerTitle : ''
+      }) : null;
+      return /*#__PURE__*/_react["default"].createElement(_pageContent["default"], null, headerJSX, /*#__PURE__*/_react["default"].createElement(Items, {
         isFetching: isFetching,
         showSpinner: showSpinner
       }, listJSX));

package/lib/listing-page/components/{topics/page-content.js → page-content.js}

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _predefinedCss = require("../../constants/predefined-css");
+var _predefinedCss = require("../constants/predefined-css");
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
@@ -23,9 +23,9 @@ var styles = {
     // px
     mobile: 95,
     // %
-    tablet: 700,
+    tablet: 698,
     // px
-    desktop: 870 // px
+    desktop: 922 // px
 
   },
   titlePadding: 0,
@@ -37,7 +37,7 @@ var styles = {
 
 var PageContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "page-content__PageContent",
-  componentId: "sc-1x8tj4h-0"
+  componentId: "sc-10tix5l-0"
 })(["min-width:", "px;width:", "%;", " ", " margin:0 auto;", ""], styles.contentWidth.min, styles.contentWidth.mobile, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.contentWidth.tablet), _mediaQuery["default"].desktopAndAbove(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.contentWidth.desktop), _predefinedCss.resetLinkStyle);
 
 var _default = PageContent;

package/lib/listing-page/components/topics/index.js

@@ -19,7 +19,7 @@ var _postItem = _interopRequireDefault(require("./post-item"));
 
 var _topicItem = _interopRequireDefault(require("./topic-item"));
 
-var _pageContent = _interopRequireDefault(require("./page-content"));
+var _pageContent = _interopRequireDefault(require("../page-content"));
 
 var _section = require("./section");
 
@@ -29,6 +29,8 @@ var _color = _interopRequireDefault(require("../../constants/color"));
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _titleBar = require("@twreporter/react-components/lib/title-bar");
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
@@ -71,6 +73,8 @@ var NoData = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "sc-1n6udj1-0"
 })(["width:100%;font-size:16px;color:", ";font-weight:", ";text-align:center;"], _color["default"].darkGray, _font.fontWeight.normal);
 
+var topicTitleText = '深度專題';
+
 var Topics = /*#__PURE__*/function (_Component) {
   _inherits(Topics, _Component);
 
@@ -164,9 +168,11 @@ var Topics = /*#__PURE__*/function (_Component) {
 
         topTopicName = _.get(topics, [0, 'topic_name'], '');
         topicUrl = _.get(topics, [0, 'linkTo'], '');
-        topSectionJSX = [/*#__PURE__*/_react["default"].createElement(_section.SectionTitle, {
-          key: "top-title"
-        }, _topics.TEXT.SECTION_TITLE_FEATURED), /*#__PURE__*/_react["default"].createElement(_section.TopSectionContent, {
+        topSectionJSX = [/*#__PURE__*/_react["default"].createElement(_titleBar.TitleBar, {
+          key: "top-title",
+          title: topicTitleText,
+          subtitle: _topics.TEXT.SECTION_TITLE_FEATURED
+        }), /*#__PURE__*/_react["default"].createElement(_section.TopSectionContent, {
           key: "top-section",
           topicName: topTopicName,
           topicUrl: topicUrl
@@ -176,7 +182,10 @@ var Topics = /*#__PURE__*/function (_Component) {
       }
 
       var WrappedListSectionContent = (0, _isFetchingWrapper["default"])( /*#__PURE__*/_react["default"].createElement(_section.ListSectionContent, null, listedTopicsJSX));
-      return /*#__PURE__*/_react["default"].createElement(_pageContent["default"], null, topSectionJSX, isFetching && isFirstPage ? null : /*#__PURE__*/_react["default"].createElement(_section.SectionTitle, null, _topics.TEXT.SECTION_TITLE_OTHERS), /*#__PURE__*/_react["default"].createElement(WrappedListSectionContent, {
+      return /*#__PURE__*/_react["default"].createElement(_pageContent["default"], null, topSectionJSX, isFetching && isFirstPage ? null : /*#__PURE__*/_react["default"].createElement(_titleBar.TitleBar, {
+        title: topicTitleText,
+        subtitle: _topics.TEXT.SECTION_TITLE_OTHERS
+      }), /*#__PURE__*/_react["default"].createElement(WrappedListSectionContent, {
         isFetching: isFetching,
         showSpinner: showSpinner
       }));

package/lib/listing-page/components/topics/section.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SectionTitle = exports.ListSectionContent = exports.TopSectionContent = void 0;
+exports.ListSectionContent = exports.TopSectionContent = void 0;
 
 var _reactRouterDom = require("react-router-dom");
 
@@ -50,13 +50,14 @@ var styles = {
   goToTopicMargin: [20, 'auto', 0, 'auto'],
   goToTopicPadding: [14, 0, 14, 0],
   sectionMargin: {
-    mobile: [0, 0, 35, 0],
-    tablet: [0, 0, 42, 0],
-    desktop: [0, 0, 60, 0]
+    mobile: [24, 0, 36, 0],
+    tablet: [32, 0, 64, 0],
+    desktop: [64, 0, 64, 0]
   },
   titleMargin: {
     mobile: [0, 0, 24, 0],
-    tablet: [0, 0, 42, 0]
+    tablet: [0, 0, 32, 0],
+    desktop: [0, 0, 64, 0]
   },
   titlePadding: [16, 0, 16, 0]
 };
@@ -65,21 +66,14 @@ var StyledLink = /*#__PURE__*/(0, _styledComponents["default"])(_reactRouterDom.
   componentId: "sc-125nvxn-0"
 })(["", " display:block;margin:", ";"], _predefinedCss.resetLinkStyle, (0, _css.arrayToCssShorthand)(styles.goToTopicMargin));
 
-var SectionTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "section__SectionTitle",
-  componentId: "sc-125nvxn-1"
-})(["width:100%;border-bottom:2px solid ", ";padding:", ";color:", ";font-size:18px;font-weight:", ";line-height:1;margin:", ";", ""], _color["default"].gray, (0, _css.arrayToCssShorthand)(styles.titlePadding), _color["default"].darkGray, _font.fontWeight.bold, (0, _css.arrayToCssShorthand)(styles.titleMargin.mobile), _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.titleMargin.tablet)));
-
-exports.SectionTitle = SectionTitle;
-
 var SectionContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "section__SectionContent",
-  componentId: "sc-125nvxn-2"
-})(["width:100%;margin:", ";", " ", ""], (0, _css.arrayToCssShorthand)(styles.sectionMargin.mobile), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sectionMargin.tablet)), _mediaQuery["default"].desktopAndAbove(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sectionMargin.desktop)));
+  componentId: "sc-125nvxn-1"
+})(["width:100%;", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sectionMargin.mobile)), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sectionMargin.tablet)), _mediaQuery["default"].desktopAndAbove(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sectionMargin.desktop)));
 
 var GoToTopic = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "section__GoToTopic",
-  componentId: "sc-125nvxn-3"
+  componentId: "sc-125nvxn-2"
 })(["color:", ";text-align:center;line-height:1;padding:", ";span{display:inline-block;max-width:400px;", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0.1px;font-size:16px;font-weight:", ";}svg{height:16px;vertical-align:baseline;margin-left:0.5em;}"], _color["default"].blue, (0, _css.arrayToCssShorthand)(styles.goToTopicPadding), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      max-width: 290px;\n    "]))), _font.fontWeight.normal);
 
 var TopSectionContent = function TopSectionContent(props) {

package/lib/rwd.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabletAndAbove = exports.TabletAndBelow = exports.DesktopAndAbove = exports.MobileOnly = exports.DesktopOnly = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var DesktopOnly = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "rwd__DesktopOnly",
+  componentId: "gntj1s-0"
+})(["display:none;", ""], _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n  "]))));
+
+exports.DesktopOnly = DesktopOnly;
+
+var MobileOnly = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "rwd__MobileOnly",
+  componentId: "gntj1s-1"
+})(["display:none;", ""], _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: block;\n  "]))));
+
+exports.MobileOnly = MobileOnly;
+
+var DesktopAndAbove = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "rwd__DesktopAndAbove",
+  componentId: "gntj1s-2"
+})(["display:none;", ""], _mediaQuery["default"].desktopAndAbove(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: block;\n  "]))));
+
+exports.DesktopAndAbove = DesktopAndAbove;
+
+var TabletAndBelow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "rwd__TabletAndBelow",
+  componentId: "gntj1s-3"
+})(["display:none;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: block;\n  "]))));
+
+exports.TabletAndBelow = TabletAndBelow;
+
+var TabletAndAbove = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "rwd__TabletAndAbove",
+  componentId: "gntj1s-4"
+})(["display:none;", ""], _mediaQuery["default"].tabletAndAbove(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: block;\n  "]))));
+
+exports.TabletAndAbove = TabletAndAbove;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.15.0-rc.5",
+  "version": "8.15.0-rc.7",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "bf226b81aae93197d4cad8519a574ef6f85acc9b"
+  "gitHead": "cbe1101c3a42d3869970fafb01cc40776ab0d2d2"
 }