@twreporter/universal-header 3.0.3-rc.0 → 3.0.3-rc.2

package/lib/components/hamburger-footer.stories.js

@@ -4,25 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.footer = exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _hamburgerFooter = _interopRequireDefault(require("./hamburger-footer"));
-
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
-
 var _theme = require("@twreporter/core/lib/constants/theme");
-
 var _constants = require("../storybook/constants");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /* eslint-disable react/prop-types */
-
 /* eslint react/display-name:0 */
-var _default = {
+var _default = exports["default"] = {
   title: 'Hamburger/Footer',
   component: _hamburgerFooter["default"],
   argTypes: {
@@ -30,39 +21,33 @@ var _default = {
     releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
-exports["default"] = _default;
 var StyledFooter = /*#__PURE__*/(0, _styledComponents["default"])(_hamburgerFooter["default"]).withConfig({
   displayName: "hamburger-footerstories__StyledFooter",
   componentId: "sc-2581a8-0"
 })(["width:375px;background-color:", ";padding:16px 0;"], function (props) {
   return props.$bgColor;
 });
-
 var getBgColor = function getBgColor(theme) {
   if (theme === _theme.THEME.photography) {
     return {
       bgColor: 'linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #052142'
     };
   }
-
   return {
     bgColor: 'white'
   };
 };
-
-var footer = {
+var footer = exports.footer = {
   render: function render(props) {
     var theme = props.theme,
-        releaseBranch = props.releaseBranch;
+      releaseBranch = props.releaseBranch;
     var context = {
       theme: theme,
       releaseBranch: releaseBranch,
       isLinkExternal: true
     };
-
     var _getBgColor = getBgColor(theme),
-        bgColor = _getBgColor.bgColor;
-
+      bgColor = _getBgColor.bgColor;
     return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
       value: context
     }, /*#__PURE__*/_react["default"].createElement(StyledFooter, {
@@ -74,5 +59,4 @@ var footer = {
       "default": 'white'
     }
   }
-};
-exports.footer = footer;
+};

package/lib/components/hamburger-menu-item.js

@@ -1,52 +1,33 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuSubItem = exports.MenuLinkItem = exports.MenuDropdownItem = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
-
 var _theme = require("../utils/theme");
-
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
-
 var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
-
 var _icon = require("@twreporter/react-components/lib/icon");
-
 var _paragraph = require("@twreporter/react-components/lib/text/paragraph");
-
 var _button = require("@twreporter/react-components/lib/button/");
-
 var _excluded = ["text", "link"],
-    _excluded2 = ["text", "link"],
-    _excluded3 = ["text", "isActive"];
-
-var _templateObject;
-
+  _excluded2 = ["text", "link"],
+  _excluded3 = ["text", "isActive"];
+var _templateObject; // context
+// utils
+// @twreporter
 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var StyledP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
   displayName: "hamburger-menu-item__StyledP1",
   componentId: "t1lhbb-0"
@@ -55,7 +36,6 @@ var StyledP2 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).wit
   displayName: "hamburger-menu-item__StyledP2",
   componentId: "t1lhbb-1"
 })([""]);
-
 var ItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu-item__ItemContainer",
   componentId: "t1lhbb-2"
@@ -70,7 +50,6 @@ var ItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 }), function (props) {
   return props.$activeBgColor;
 });
-
 var SubItemContainer = /*#__PURE__*/(0, _styledComponents["default"])(ItemContainer).withConfig({
   displayName: "hamburger-menu-item__SubItemContainer",
   componentId: "t1lhbb-3"
@@ -81,22 +60,18 @@ var DropdownItemContainer = /*#__PURE__*/(0, _styledComponents["default"])(ItemC
 })(["padding:8px 32px;display:flex;align-items:center;justify-content:space-between;svg{transform:rotate(", ");transition:all 300ms;}"], function (props) {
   return props.$rotate;
 });
-
-var MenuLinkItem = function MenuLinkItem(_ref) {
+var MenuLinkItem = exports.MenuLinkItem = function MenuLinkItem(_ref) {
   var _ref$text = _ref.text,
-      text = _ref$text === void 0 ? '' : _ref$text,
-      _ref$link = _ref.link,
-      link = _ref$link === void 0 ? {} : _ref$link,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    text = _ref$text === void 0 ? '' : _ref$text,
+    _ref$link = _ref.link,
+    link = _ref$link === void 0 ? {} : _ref$link,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_headerContext["default"]),
-      theme = _useContext.theme;
-
+    theme = _useContext.theme;
   var _selectHamburgerItemT = (0, _theme.selectHamburgerItemTheme)(theme),
-      color = _selectHamburgerItemT.color,
-      hoverBgColor = _selectHamburgerItemT.hoverBgColor,
-      activeBgColor = _selectHamburgerItemT.activeBgColor;
-
+    color = _selectHamburgerItemT.color,
+    hoverBgColor = _selectHamburgerItemT.hoverBgColor,
+    activeBgColor = _selectHamburgerItemT.activeBgColor;
   return /*#__PURE__*/_react["default"].createElement(_button.MenuButton, _extends({
     text: text,
     link: link,
@@ -106,28 +81,22 @@ var MenuLinkItem = function MenuLinkItem(_ref) {
     activeBgColor: activeBgColor
   }, props));
 };
-
-exports.MenuLinkItem = MenuLinkItem;
 MenuLinkItem.propTypes = {
   text: _propTypes["default"].string,
   link: _propTypes["default"].object
 };
-
-var MenuSubItem = function MenuSubItem(_ref2) {
+var MenuSubItem = exports.MenuSubItem = function MenuSubItem(_ref2) {
   var _ref2$text = _ref2.text,
-      text = _ref2$text === void 0 ? '' : _ref2$text,
-      _ref2$link = _ref2.link,
-      link = _ref2$link === void 0 ? {} : _ref2$link,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
+    text = _ref2$text === void 0 ? '' : _ref2$text,
+    _ref2$link = _ref2.link,
+    link = _ref2$link === void 0 ? {} : _ref2$link,
+    props = _objectWithoutProperties(_ref2, _excluded2);
   var _useContext2 = (0, _react.useContext)(_headerContext["default"]),
-      theme = _useContext2.theme;
-
+    theme = _useContext2.theme;
   var _selectHamburgerItemT2 = (0, _theme.selectHamburgerItemTheme)(theme),
-      color = _selectHamburgerItemT2.color,
-      hoverBgColor = _selectHamburgerItemT2.hoverBgColor,
-      activeBgColor = _selectHamburgerItemT2.activeBgColor;
-
+    color = _selectHamburgerItemT2.color,
+    hoverBgColor = _selectHamburgerItemT2.hoverBgColor,
+    activeBgColor = _selectHamburgerItemT2.activeBgColor;
   return /*#__PURE__*/_react["default"].createElement(SubItemContainer, _extends({
     $color: color,
     $hoverBgColor: hoverBgColor,
@@ -137,29 +106,23 @@ var MenuSubItem = function MenuSubItem(_ref2) {
     weight: "bold"
   })));
 };
-
-exports.MenuSubItem = MenuSubItem;
 MenuSubItem.propTypes = {
   text: _propTypes["default"].string,
   link: _propTypes["default"].object
 };
-
-var MenuDropdownItem = function MenuDropdownItem(_ref3) {
+var MenuDropdownItem = exports.MenuDropdownItem = function MenuDropdownItem(_ref3) {
   var _ref3$text = _ref3.text,
-      text = _ref3$text === void 0 ? '' : _ref3$text,
-      _ref3$isActive = _ref3.isActive,
-      isActive = _ref3$isActive === void 0 ? false : _ref3$isActive,
-      props = _objectWithoutProperties(_ref3, _excluded3);
-
+    text = _ref3$text === void 0 ? '' : _ref3$text,
+    _ref3$isActive = _ref3.isActive,
+    isActive = _ref3$isActive === void 0 ? false : _ref3$isActive,
+    props = _objectWithoutProperties(_ref3, _excluded3);
   var _useContext3 = (0, _react.useContext)(_headerContext["default"]),
-      theme = _useContext3.theme,
-      releaseBranch = _useContext3.releaseBranch;
-
+    theme = _useContext3.theme,
+    releaseBranch = _useContext3.releaseBranch;
   var _selectHamburgerItemT3 = (0, _theme.selectHamburgerItemTheme)(theme, isActive),
-      color = _selectHamburgerItemT3.color,
-      hoverBgColor = _selectHamburgerItemT3.hoverBgColor,
-      activeBgColor = _selectHamburgerItemT3.activeBgColor;
-
+    color = _selectHamburgerItemT3.color,
+    hoverBgColor = _selectHamburgerItemT3.hoverBgColor,
+    activeBgColor = _selectHamburgerItemT3.activeBgColor;
   var iconRotateDeg = isActive ? '-180deg' : '0';
   return /*#__PURE__*/_react["default"].createElement(DropdownItemContainer, _extends({
     $color: color,
@@ -174,8 +137,6 @@ var MenuDropdownItem = function MenuDropdownItem(_ref3) {
     releaseBranch: releaseBranch
   }));
 };
-
-exports.MenuDropdownItem = MenuDropdownItem;
 MenuDropdownItem.propTypes = {
   text: _propTypes["default"].string,
   isActive: _propTypes["default"].bool

package/lib/components/hamburger-menu-item.stories.js

@@ -4,36 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.menuSubItem = exports.menuLinkItem = exports["default"] = exports.MenuDropdownItemExample = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _clientApi = require("@storybook/client-api");
-
 var _hamburgerMenuItem = require("./hamburger-menu-item");
-
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
-
 var _constants = require("../storybook/constants");
-
 var _theme = require("@twreporter/core/lib/constants/theme");
-
 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 _default = {
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-disable react/prop-types */ /* eslint react/display-name:0 */ /* eslint react-hooks/rules-of-hooks:0 */
+var _default = exports["default"] = {
   title: 'Hamburger/Item',
   component: _hamburgerMenuItem.MenuLinkItem,
   argTypes: {
@@ -41,40 +26,33 @@ var _default = {
     releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
-exports["default"] = _default;
-
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu-itemstories__Container",
   componentId: "xfb28s-0"
 })(["width:375px;background-color:", ";padding:16px 0;box-shadow:0px 0px 24px rgba(0,0,0,0.1);"], function (props) {
   return props.$bgColor;
 });
-
 var getBgColor = function getBgColor(theme) {
   if (theme === _theme.THEME.photography) {
     return {
       bgColor: 'linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #052142'
     };
   }
-
   return {
     bgColor: 'white'
   };
 };
-
-var menuLinkItem = {
+var menuLinkItem = exports.menuLinkItem = {
   render: function render(props) {
     var theme = props.theme,
-        releaseBranch = props.releaseBranch;
+      releaseBranch = props.releaseBranch;
     var context = {
       theme: theme,
       releaseBranch: releaseBranch,
       isLinkExternal: true
     };
-
     var _getBgColor = getBgColor(theme),
-        bgColor = _getBgColor.bgColor;
-
+      bgColor = _getBgColor.bgColor;
     return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
       value: context
     }, /*#__PURE__*/_react["default"].createElement(Container, {
@@ -85,32 +63,27 @@ var menuLinkItem = {
     text: '深度專題'
   }
 };
-exports.menuLinkItem = menuLinkItem;
-var MenuDropdownItemExample = {
+var MenuDropdownItemExample = exports.MenuDropdownItemExample = {
   render: function render(props) {
     var _useArgs = (0, _clientApi.useArgs)(),
-        _useArgs2 = _slicedToArray(_useArgs, 2),
-        isActive = _useArgs2[0].isActive,
-        updateArgs = _useArgs2[1];
-
+      _useArgs2 = _slicedToArray(_useArgs, 2),
+      isActive = _useArgs2[0].isActive,
+      updateArgs = _useArgs2[1];
     var theme = props.theme,
-        releaseBranch = props.releaseBranch,
-        text = props.text;
+      releaseBranch = props.releaseBranch,
+      text = props.text;
     var context = {
       theme: theme,
       releaseBranch: releaseBranch,
       isLinkExternal: true
     };
-
     var _getBgColor2 = getBgColor(theme),
-        bgColor = _getBgColor2.bgColor;
-
+      bgColor = _getBgColor2.bgColor;
     var handleClick = function handleClick() {
       return updateArgs({
         isActive: !isActive
       });
     };
-
     return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
       value: context
     }, /*#__PURE__*/_react["default"].createElement(Container, {
@@ -126,18 +99,15 @@ var MenuDropdownItemExample = {
     isActive: false
   }
 };
-exports.MenuDropdownItemExample = MenuDropdownItemExample;
-var menuSubItem = {
+var menuSubItem = exports.menuSubItem = {
   render: function render(props) {
     var theme = props.theme;
     var context = {
       theme: theme,
       isLinkExternal: true
     };
-
     var _getBgColor3 = getBgColor(theme),
-        bgColor = _getBgColor3.bgColor;
-
+      bgColor = _getBgColor3.bgColor;
     return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
       value: context
     }, /*#__PURE__*/_react["default"].createElement(Container, {
@@ -147,5 +117,4 @@ var menuSubItem = {
   args: {
     text: '小標題'
   }
-};
-exports.menuSubItem = menuSubItem;
+};