@twreporter/react-components 8.11.1 → 8.12.0

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.12.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.12.0-rc.1...@twreporter/react-components@8.12.0) (2022-08-11)
+
+**Note:** Version bump only for package @twreporter/react-components
+
+
+
+
+
+# [8.12.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.12.0-rc.0...@twreporter/react-components@8.12.0-rc.1) (2022-08-10)
+
+
+### Bug Fixes
+
+* add releaseBranch props for icon component ([bad00f5](https://github.com/twreporter/twreporter-npm-packages/commit/bad00f59878b08d15d52a58ac876f1fb210d101b))
+* address code review ([13aad8e](https://github.com/twreporter/twreporter-npm-packages/commit/13aad8ec84d702af53be830d1ecdb482c15efd3a))
+* remove DesktopTab in TitleTab component ([cde0983](https://github.com/twreporter/twreporter-npm-packages/commit/cde098305d6bdf9ebe847aebf9d70f253520608c))
+
+
+### Features
+
+* add title bar component for design guideline ([b96bdde](https://github.com/twreporter/twreporter-npm-packages/commit/b96bdde414bf068eb9521a627ce0414eb95867e2))
+
+
+
+
+
+# [8.12.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.11.1...@twreporter/react-components@8.12.0-rc.0) (2022-08-10)
+
+
+### Bug Fixes
+
+* **react-components:** add callback as dep of use-font-observer-hook ([9f91ce9](https://github.com/twreporter/twreporter-npm-packages/commit/9f91ce928b0e94c8b29600f44438ea37f45e5c03))
+
+
+### Features
+
+* **react-components:** add NotoSansTC fontface ([046cdb5](https://github.com/twreporter/twreporter-npm-packages/commit/046cdb501b5133fb120cf66401929145ad2c79da))
+* **react-components:** add use-font-face-observer hook ([f2ffa6d](https://github.com/twreporter/twreporter-npm-packages/commit/f2ffa6d9215737046d246aa34dd468a2ff0d15f2))
+* **react-components:** export font files as `fontGCSFiles` ([a8b940c](https://github.com/twreporter/twreporter-npm-packages/commit/a8b940c796dc039cb769f09b8d6bcc0002a22bcf))
+
+
+
+
+
 ## [8.11.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.11.1-rc.0...@twreporter/react-components@8.11.1) (2022-08-09)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/customized-link.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _excluded = ["isExternal", "to"];
+
+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; }
+
+var CustomizedLink = function CustomizedLink(_ref) {
+  var isExternal = _ref.isExternal,
+      to = _ref.to,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  if (isExternal) {
+    return /*#__PURE__*/_react["default"].createElement("a", _extends({
+      href: to
+    }, rest));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, _extends({
+    to: to
+  }, rest));
+};
+
+CustomizedLink.propTypes = {
+  isExternal: _propTypes["default"].bool,
+  to: _propTypes["default"].string
+};
+CustomizedLink.defaultProps = {
+  isExternal: true,
+  to: ''
+};
+var _default = CustomizedLink;
+exports["default"] = _default;

package/lib/hook/index.js

@@ -9,13 +9,22 @@ Object.defineProperty(exports, "useOutsideClick", {
     return _useOutsideClick["default"];
   }
 });
+Object.defineProperty(exports, "useFontFaceObserver", {
+  enumerable: true,
+  get: function get() {
+    return _useFontFaceObserver["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _useOutsideClick = _interopRequireDefault(require("./use-outside-click"));
 
+var _useFontFaceObserver = _interopRequireDefault(require("./use-font-face-observer"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
-  useOutsideClick: _useOutsideClick["default"]
+  useOutsideClick: _useOutsideClick["default"],
+  useFontFaceObserver: _useFontFaceObserver["default"]
 };
 exports["default"] = _default;

package/lib/hook/use-font-face-observer.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _fontfaceobserverEs = _interopRequireDefault(require("fontfaceobserver-es"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var useFontFaceObserver = function useFontFaceObserver() {
+  var fontFaces = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var callback = arguments.length > 1 ? arguments[1] : undefined;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isResolved = _useState2[0],
+      setIsResolved = _useState2[1];
+
+  var fontFacesString = JSON.stringify(fontFaces);
+  (0, _react.useEffect)(function () {
+    var promises = JSON.parse(fontFacesString).map(function (_ref) {
+      var family = _ref.family,
+          weight = _ref.weight,
+          style = _ref.style,
+          stretch = _ref.stretch;
+      return new _fontfaceobserverEs["default"](family, {
+        weight: weight,
+        style: style,
+        stretch: stretch
+      }).load('測試文字');
+    });
+    Promise.all(promises).then(function () {
+      if (typeof callback !== 'function') {
+        return;
+      }
+
+      callback();
+      return setIsResolved(true);
+    })["catch"](function (e) {
+      // eslint-disable-next-line no-console
+      console.error("An error occurred during font loading");
+      console.log(e);
+    });
+  }, [fontFacesString, callback]);
+  return isResolved;
+};
+
+var _default = useFontFaceObserver;
+exports["default"] = _default;

package/lib/text/utils/webfonts.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _font = require("@twreporter/core/lib/constants/font");
+
+var _forEach = _interopRequireDefault(require("lodash/forEach"));
+
+var _keys = _interopRequireDefault(require("lodash/keys"));
+
+var _reduce = _interopRequireDefault(require("lodash/reduce"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _ = {
+  forEach: _forEach["default"],
+  keys: _keys["default"],
+  reduce: _reduce["default"]
+};
+var baseGCSDir = 'https://www.twreporter.org/assets/font/';
+var fileExt = '.woff2';
+
+var gcsFontFolder = _defineProperty({}, _font.fonts.notoSansTC, 'NotoSansTC');
+
+var fontWeightKeys = _.keys(_font.fontWeight); // add @font-face to global style to use self-hosted font for performance reasons, to be more precise please check the issue below:
+// https://twreporter-org.atlassian.net/browse/TWREPORTER-318?atlOrigin=eyJpIjoiNjg4OTQ2MWU2MGIxNGEzMGE0NDY2ZDNmZGRhOWExZDEiLCJwIjoiaiJ9
+
+
+var getFontFaces = function getFontFaces(_ref) {
+  var font = _ref.font,
+      folder = _ref.folder;
+
+  var fontFaceCSSTemplate = function fontFaceCSSTemplate(_ref2) {
+    var fontWeightKey = _ref2.fontWeightKey;
+    return "\n    @font-face {\n      font-family: \"".concat(font, "\";\n      font-weight: ").concat(_font.fontWeight[fontWeightKey], ";\n      font-display: swap;\n      src: url(\"").concat(baseGCSDir).concat(folder, "/").concat(fontWeightKey).concat(fileExt, "\");\n    }\n  ");
+  };
+
+  return _.reduce(fontWeightKeys, function (fontFaces, fontWeightKey) {
+    return fontFaces + fontFaceCSSTemplate({
+      fontWeightKey: fontWeightKey
+    });
+  }, '');
+};
+
+var fontFaces = _defineProperty({}, _font.fonts.notoSansTC, getFontFaces({
+  font: _font.fonts.notoSansTC,
+  folder: gcsFontFolder[_font.fonts.notoSansTC]
+}));
+
+var fontGCSFiles = [];
+
+_.forEach(fontFaces, function (fontFace, font) {
+  _.forEach(fontWeightKeys, function (fontWeightKey) {
+    fontGCSFiles.push("".concat(baseGCSDir).concat(gcsFontFolder[font], "/").concat(fontWeightKey).concat(fileExt));
+  });
+});
+
+var _default = {
+  fontFaces: fontFaces,
+  fontGCSFiles: fontGCSFiles
+};
+exports["default"] = _default;

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

@@ -0,0 +1,48 @@
+"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 _headline = require("../../text/headline");
+
+var _paragraph = require("../../text/paragraph");
+
+var _divider = _interopRequireDefault(require("../../divider"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// component
+var BarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bar__BarContainer",
+  componentId: "sc-18ncllq-0"
+})(["display:flex;width:100%;flex-direction:column;& > div{margin-bottom:16px;&:last-child{margin-bottom:0;}}"]);
+
+var TitleBar = function TitleBar(_ref) {
+  var _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === void 0 ? '' : _ref$subtitle;
+  return /*#__PURE__*/_react["default"].createElement(BarContainer, null, /*#__PURE__*/_react["default"].createElement(_headline.H1, {
+    text: title
+  }), /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+    text: subtitle,
+    weight: "bold"
+  }), /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+    direction: "horizontal"
+  }));
+};
+
+TitleBar.propTypes = {
+  title: _propTypes["default"].string,
+  subtitle: _propTypes["default"].string
+};
+var _default = TitleBar;
+exports["default"] = _default;

package/lib/title-bar/components/tab.js

@@ -0,0 +1,197 @@
+"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 = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _headline = require("../../text/headline");
+
+var _paragraph = require("../../text/paragraph");
+
+var _divider = _interopRequireDefault(require("../../divider"));
+
+var _customizedLink = _interopRequireDefault(require("../../customized-link"));
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _excluded = ["tab"];
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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; }
+
+// const
+var gradientMask = 'linear-gradient(to left, rgba(241, 241, 241, 0), #F1F1F1 48px)';
+
+var tabPropType = _propTypes["default"].shape({
+  text: _propTypes["default"].string,
+  link: _propTypes["default"].string,
+  isExternal: _propTypes["default"]["boolean"],
+  isActive: _propTypes["default"]["boolean"]
+});
+
+var BarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tab__BarContainer",
+  componentId: "ywb8e-0"
+})(["display:flex;width:100%;flex-direction:column;& > div{margin-bottom:16px;&:last-child{margin-bottom:0;}}"]);
+
+var TabItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tab__TabItemContainer",
+  componentId: "ywb8e-1"
+})(["display:flex;flex-shrink:0;color:", ";a{color:unset;text-decoration:none;}"], function (props) {
+  return props.isActive ? _color.colorBrand.heavy : 'inherit';
+});
+
+var MobileTabContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tab__MobileTabContainer",
+  componentId: "ywb8e-2"
+})(["display:flex;overflow:scroll;scrollbar-width:none;&::-webkit-scrollbar{display:none;}-webkit-mask-image:", ";& > div{margin-right:24px;}"], function (props) {
+  return props.showGradientMask ? gradientMask : 'none';
+});
+
+var TabItem = function TabItem(_ref) {
+  var _ref$tab = _ref.tab,
+      tab = _ref$tab === void 0 ? {} : _ref$tab,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var text = tab.text,
+      link = tab.link,
+      isExternal = tab.isExternal,
+      isActive = tab.isActive;
+  return /*#__PURE__*/_react["default"].createElement(TabItemContainer, _extends({
+    isActive: isActive
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
+    to: link,
+    isExternal: isExternal
+  }, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+    text: text,
+    weight: "bold"
+  })));
+};
+
+TabItem.propTypes = {
+  tab: tabPropType
+};
+
+var useScrollStatus = function useScrollStatus(setShowNext) {
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (ref.current.scrollWidth > ref.current.clientWidth) {
+      // scrollbar occur
+      setShowNext(true);
+    }
+  }, [ref, setShowNext]);
+  (0, _react.useEffect)(function () {
+    var refEle = ref.current;
+
+    var handleScroll = function handleScroll(event) {
+      if (refEle.offsetWidth + refEle.scrollLeft >= refEle.scrollWidth) {
+        // scroll to end
+        setShowNext(false);
+      } else {
+        setShowNext(true);
+      }
+    };
+
+    refEle.addEventListener('scroll', handleScroll);
+    return function () {
+      refEle.removeEventListener('scroll', handleScroll);
+    };
+  }, [ref, setShowNext]);
+  return ref;
+};
+
+var MobileTab = function MobileTab(_ref2) {
+  var _ref2$tabs = _ref2.tabs,
+      tabs = _ref2$tabs === void 0 ? [] : _ref2$tabs,
+      _ref2$activeTabIndex = _ref2.activeTabIndex,
+      activeTabIndex = _ref2$activeTabIndex === void 0 ? 0 : _ref2$activeTabIndex;
+
+  var _useState = (0, _react.useState)(activeTabIndex),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeIndex = _useState2[0],
+      setActiveIndex = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showGradientMask = _useState4[0],
+      setShowGradientMask = _useState4[1];
+
+  var ref = useScrollStatus(setShowGradientMask);
+  var tabJSX = tabs.map(function (tab, index) {
+    tab.isActive = index === activeIndex;
+
+    var handleClick = function handleClick() {
+      setActiveIndex(index);
+    };
+
+    return /*#__PURE__*/_react["default"].createElement(TabItem, {
+      key: index,
+      tab: tab,
+      onClick: handleClick
+    });
+  });
+  return /*#__PURE__*/_react["default"].createElement(MobileTabContainer, {
+    ref: ref,
+    showGradientMask: showGradientMask
+  }, tabJSX);
+};
+
+MobileTab.propTypes = {
+  tabs: _propTypes["default"].arrayOf(tabPropType),
+  activeTabIndex: _propTypes["default"].number
+};
+
+var TitleTab = function TitleTab(_ref3) {
+  var _ref3$title = _ref3.title,
+      title = _ref3$title === void 0 ? '' : _ref3$title,
+      _ref3$tabs = _ref3.tabs,
+      tabs = _ref3$tabs === void 0 ? [] : _ref3$tabs,
+      _ref3$activeTabIndex = _ref3.activeTabIndex,
+      activeTabIndex = _ref3$activeTabIndex === void 0 ? 0 : _ref3$activeTabIndex;
+  return /*#__PURE__*/_react["default"].createElement(BarContainer, null, /*#__PURE__*/_react["default"].createElement(_headline.H1, {
+    text: title
+  }), /*#__PURE__*/_react["default"].createElement(MobileTab, {
+    tabs: tabs,
+    activeTabIndex: activeTabIndex
+  }), /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+    direction: "horizontal"
+  }));
+};
+
+TitleTab.propTypes = {
+  title: _propTypes["default"].string,
+  tabs: _propTypes["default"].arrayOf(tabPropType),
+  activeTabIndex: _propTypes["default"].number
+};
+var _default = TitleTab;
+exports["default"] = _default;

package/lib/title-bar/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TitleBar", {
+  enumerable: true,
+  get: function get() {
+    return _bar["default"];
+  }
+});
+Object.defineProperty(exports, "TitleTab", {
+  enumerable: true,
+  get: function get() {
+    return _tab["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _bar = _interopRequireDefault(require("./components/bar"));
+
+var _tab = _interopRequireDefault(require("./components/tab"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  TitleBar: _bar["default"],
+  TitleTab: _tab["default"]
+};
+exports["default"] = _default;

package/lib/title-bar/stories/bar.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bookmarkBar = exports.tagBar = exports.bar = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _bar = _interopRequireDefault(require("../components/bar"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Title Bar/Bar',
+  component: _bar["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_bar["default"], args);
+};
+
+var bar = Template.bind({});
+exports.bar = bar;
+bar.args = {
+  title: '標題',
+  subtitle: '副標'
+};
+var tagBar = Template.bind({});
+exports.tagBar = tagBar;
+tagBar.args = {
+  title: 'Tag'
+};
+var bookmarkBar = Template.bind({});
+exports.bookmarkBar = bookmarkBar;
+bookmarkBar.args = {
+  title: '我的書籤',
+  subtitle: '全部 55'
+};

package/lib/title-bar/stories/tab.stories.js

@@ -0,0 +1,277 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.animalTab = exports.humanRightsTab = exports.tab = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tab = _interopRequireDefault(require("../components/tab"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Title Bar/Tab',
+  component: _tab["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_tab["default"], args);
+};
+
+var tab = Template.bind({});
+exports.tab = tab;
+tab.args = {
+  title: '主分類',
+  tabs: [{
+    text: '子分類1',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '子分類2',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '子分類3',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '子分類4',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '子分類5',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '子分類6',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }]
+};
+var humanRightsTab = Template.bind({});
+exports.humanRightsTab = humanRightsTab;
+humanRightsTab.args = {
+  title: '人權司法',
+  tabs: [{
+    text: '全部',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '性別',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '勞動',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '移工與移民',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '居住正義',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '轉型正義',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '精神疾病',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '司法改革',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '數位人權',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }]
+};
+var animalTab = Template.bind({});
+exports.animalTab = animalTab;
+animalTab.args = {
+  title: '動物',
+  tabs: [{
+    text: '長頸鹿',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '海豚',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '猴子',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '熊貓',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '刺蝟',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '天竺鼠',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '比目魚',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '眼鏡蛇',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '虎鯨',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '台北樹蛙',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '雨傘節',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '獨角獸',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '蠑螈',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '珊瑚蟲',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '老鼠',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '皮卡丘',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '犀牛',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '馬來膜',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '孔雀',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '臺灣黑熊',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '黑面琵鷺',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '大笨鳥',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '麻雀',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '綠繡眼',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '五色鳥',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '赤腹松鼠',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '狐蒙',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '無尾熊',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '鼴鼠',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '福壽螺',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '羊駝',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '孔雀魚',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '紅嘴灰鵯',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '津田氏竹節蟲',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '田鼠',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '曙光鳳蝶',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '雙髻鯊',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '北極熊',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '人面蜘蛛',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '吳郭魚',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '狐狸',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '黃鶯',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '燕子',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }, {
+    text: '鴿子',
+    isExternal: true,
+    link: 'https://www.google.com'
+  }]
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.11.1",
+  "version": "8.12.0",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -15,8 +15,9 @@
     "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
-    "@twreporter/core": "^1.4.2",
+    "@twreporter/core": "^1.5.0",
     "@twreporter/redux": "^7.2.2",
+    "fontfaceobserver-es": "^3.3.3",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
     "memoize-one": "^5.0.5",
@@ -43,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "18008e631123e851e1a31dc054918e2a1973514b"
+  "gitHead": "9cca19bcfce6ed53c6eeb5582b917b2c74ad9908"
 }