@twreporter/universal-header 2.3.0 → 2.4.0-rc.1

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

@@ -0,0 +1,174 @@
+"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.MenuDropdownItem = exports.MenuSubItem = exports.MenuLinkItem = 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 _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 _excluded = ["text", "link"],
+    _excluded2 = ["text", "link"],
+    _excluded3 = ["text", "isActive"];
+
+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 _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 StyledP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
+  displayName: "hamburger-menu-item__StyledP1",
+  componentId: "t1lhbb-0"
+})([""]);
+var StyledP2 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
+  displayName: "hamburger-menu-item__StyledP2",
+  componentId: "t1lhbb-1"
+})([""]);
+
+var ItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu-item__ItemContainer",
+  componentId: "t1lhbb-2"
+})(["", "{padding:8px 32px;}cursor:pointer;color:", ";a{text-decoration:none;color:", ";}svg{background-color:", ";}&:hover{background-color:", ";}&:active{background-color:", ";}"], StyledP1, function (props) {
+  return props.color;
+}, function (props) {
+  return props.color;
+}, function (props) {
+  return props.color;
+}, function (props) {
+  return props.hoverBgColor;
+}, function (props) {
+  return props.activeBgColor;
+});
+
+var SubItemContainer = /*#__PURE__*/(0, _styledComponents["default"])(ItemContainer).withConfig({
+  displayName: "hamburger-menu-item__SubItemContainer",
+  componentId: "t1lhbb-3"
+})(["", "{padding:8px 32px 8px 48px;}"], StyledP2);
+var DropdownItemContainer = /*#__PURE__*/(0, _styledComponents["default"])(ItemContainer).withConfig({
+  displayName: "hamburger-menu-item__DropdownItemContainer",
+  componentId: "t1lhbb-4"
+})(["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 _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);
+
+  var _useContext = (0, _react.useContext)(_headerContext["default"]),
+      theme = _useContext.theme;
+
+  var _selectHamburgerItemT = (0, _theme.selectHamburgerItemTheme)(theme),
+      color = _selectHamburgerItemT.color,
+      hoverBgColor = _selectHamburgerItemT.hoverBgColor,
+      activeBgColor = _selectHamburgerItemT.activeBgColor;
+
+  return /*#__PURE__*/_react["default"].createElement(ItemContainer, _extends({
+    color: color,
+    hoverBgColor: hoverBgColor,
+    activeBgColor: activeBgColor
+  }, props), /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(StyledP1, {
+    text: text,
+    weight: "bold"
+  })));
+};
+
+exports.MenuLinkItem = MenuLinkItem;
+MenuLinkItem.propTypes = {
+  text: _propTypes["default"].string,
+  link: _propTypes["default"].object
+};
+
+var 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);
+
+  var _useContext2 = (0, _react.useContext)(_headerContext["default"]),
+      theme = _useContext2.theme;
+
+  var _selectHamburgerItemT2 = (0, _theme.selectHamburgerItemTheme)(theme),
+      color = _selectHamburgerItemT2.color,
+      hoverBgColor = _selectHamburgerItemT2.hoverBgColor,
+      activeBgColor = _selectHamburgerItemT2.activeBgColor;
+
+  return /*#__PURE__*/_react["default"].createElement(SubItemContainer, _extends({
+    color: color,
+    hoverBgColor: hoverBgColor,
+    activeBgColor: activeBgColor
+  }, props), /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(StyledP2, {
+    text: text,
+    weight: "bold"
+  })));
+};
+
+exports.MenuSubItem = MenuSubItem;
+MenuSubItem.propTypes = {
+  text: _propTypes["default"].string,
+  link: _propTypes["default"].object
+};
+
+var 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);
+
+  var _useContext3 = (0, _react.useContext)(_headerContext["default"]),
+      theme = _useContext3.theme,
+      releaseBranch = _useContext3.releaseBranch;
+
+  var _selectHamburgerItemT3 = (0, _theme.selectHamburgerItemTheme)(theme, isActive),
+      color = _selectHamburgerItemT3.color,
+      hoverBgColor = _selectHamburgerItemT3.hoverBgColor,
+      activeBgColor = _selectHamburgerItemT3.activeBgColor;
+
+  var iconRotateDeg = isActive ? '-180deg' : '0';
+  return /*#__PURE__*/_react["default"].createElement(DropdownItemContainer, _extends({
+    color: color,
+    hoverBgColor: hoverBgColor,
+    activeBgColor: activeBgColor,
+    rotate: iconRotateDeg
+  }, props), /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+    text: text,
+    weight: "bold"
+  }), /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+    direction: "down",
+    releaseBranch: releaseBranch
+  }));
+};
+
+exports.MenuDropdownItem = MenuDropdownItem;
+MenuDropdownItem.propTypes = {
+  text: _propTypes["default"].string,
+  isActive: _propTypes["default"].bool
+};

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

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.menuSubItem = exports.MenuDropdownItemExample = exports.menuLinkItem = exports["default"] = 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 _theme = require("@twreporter/core/lib/constants/theme");
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+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 = {
+  title: 'Hamburger/Item',
+  component: _hamburgerMenuItem.MenuLinkItem,
+  argTypes: {
+    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
+    releaseBranch: _releaseBranch.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 = function menuLinkItem(props) {
+  var theme = props.theme,
+      releaseBranch = props.releaseBranch;
+  var context = {
+    theme: theme,
+    releaseBranch: releaseBranch,
+    isLinkExternal: true
+  };
+
+  var _getBgColor = getBgColor(theme),
+      bgColor = _getBgColor.bgColor;
+
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
+    value: context
+  }, /*#__PURE__*/_react["default"].createElement(Container, {
+    bgColor: bgColor
+  }, /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuLinkItem, props)));
+};
+
+exports.menuLinkItem = menuLinkItem;
+menuLinkItem.args = {
+  text: '深度專題'
+};
+
+var MenuDropdownItemExample = function MenuDropdownItemExample(props) {
+  var _useArgs = (0, _clientApi.useArgs)(),
+      _useArgs2 = _slicedToArray(_useArgs, 2),
+      isActive = _useArgs2[0].isActive,
+      updateArgs = _useArgs2[1];
+
+  var theme = props.theme,
+      releaseBranch = props.releaseBranch,
+      text = props.text;
+  var context = {
+    theme: theme,
+    releaseBranch: releaseBranch,
+    isLinkExternal: true
+  };
+
+  var _getBgColor2 = getBgColor(theme),
+      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, {
+    bgColor: bgColor
+  }, /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuDropdownItem, {
+    text: text,
+    isActive: isActive,
+    onClick: handleClick
+  })));
+};
+
+exports.MenuDropdownItemExample = MenuDropdownItemExample;
+MenuDropdownItemExample.args = {
+  text: '議題',
+  isActive: false
+};
+
+var menuSubItem = function menuSubItem(props) {
+  var theme = props.theme;
+  var context = {
+    theme: theme,
+    isLinkExternal: true
+  };
+
+  var _getBgColor3 = getBgColor(theme),
+      bgColor = _getBgColor3.bgColor;
+
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
+    value: context
+  }, /*#__PURE__*/_react["default"].createElement(Container, {
+    bgColor: bgColor
+  }, /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuSubItem, props)));
+};
+
+exports.menuSubItem = menuSubItem;
+menuSubItem.args = {
+  text: '小標題'
+};

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

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _css = require("@twreporter/core/lib/utils/css");
+
+var _mobilePopUpModal = _interopRequireDefault(require("@twreporter/react-components/lib/mobile-pop-up-modal"));
+
+var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+
+var _themeOld = _interopRequireDefault(require("../utils/theme-old"));
+
+var _actionButtonOld = _interopRequireDefault(require("./action-button-old"));
+
+var _sloganOld = _interopRequireDefault(require("./slogan-old"));
+
+var _hamburgerIcons = _interopRequireDefault(require("./hamburger-icons"));
+
+var _channelsOld = _interopRequireDefault(require("./channels-old"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 styles = {
+  closeButtonHeight: {
+    mobile: 42,
+    // px
+    tablet: 60 // px
+
+  },
+  sloganMargin: {
+    mobile: [28, 0],
+    tablet: [38, 0]
+  },
+  channelMargin: {
+    mobile: [20, 0, 0, 0],
+    tablet: [40, 0, 0, 0]
+  },
+  serviceMargin: {
+    mobile: [16, 0, 22, 0],
+    tablet: [24, 0, 42, 0]
+  }
+};
+
+var MenuContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu-old__MenuContainer",
+  componentId: "ai0vhm-0"
+})(["background-color:", ";display:flex;flex-direction:column;justify-content:space-between;height:auto;min-height:100%;"], function (props) {
+  return props.bgColor;
+});
+
+var CloseContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu-old__CloseContainer",
+  componentId: "ai0vhm-1"
+})(["position:absolute;top:10px;right:10px;height:", "px;width:", "px;", ""], styles.closeButtonHeight.mobile, styles.closeButtonHeight.mobile, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n  "])), styles.closeButtonHeight.tablet, styles.closeButtonHeight.tablet));
+
+var FlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu-old__FlexBox",
+  componentId: "ai0vhm-2"
+})(["display:flex;flex-direction:column;align-items:center;"]);
+
+var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu-old__SloganContainer",
+  componentId: "ai0vhm-3"
+})(["margin:", ";", ""], (0, _css.arrayToCssShorthand)(styles.sloganMargin.mobile), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sloganMargin.tablet)));
+
+var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu-old__ActionContainer",
+  componentId: "ai0vhm-4"
+})(["width:100%;padding:0 30px;"]);
+
+var ChannelContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu-old__ChannelContainer",
+  componentId: "ai0vhm-5"
+})(["width:100%;margin:10px 0;margin:", ";", ""], (0, _css.arrayToCssShorthand)(styles.channelMargin.mobile), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.channelMargin.tablet)));
+
+var ServiceContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu-old__ServiceContainer",
+  componentId: "ai0vhm-6"
+})(["position:relative;bottom:0;display:flex;justify-content:center;align-items:center;width:100%;margin:", ";", ""], (0, _css.arrayToCssShorthand)(styles.serviceMargin.mobile), _mediaQuery["default"].tabletOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.serviceMargin.tablet)));
+
+var HamburgerMenu = function HamburgerMenu(_ref) {
+  var channels = _ref.channels,
+      services = _ref.services,
+      actions = _ref.actions,
+      handleClose = _ref.handleClose;
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
+    var theme = _ref2.theme;
+
+    var _themeUtils$selectHam = _themeOld["default"].selectHamburgerMenuTheme(theme),
+        bgColor = _themeUtils$selectHam.bgColor;
+
+    var CloseIcon = _themeOld["default"].selectIcons(theme).close;
+
+    var closeJSX = /*#__PURE__*/_react["default"].createElement(CloseContainer, {
+      onClick: handleClose
+    }, /*#__PURE__*/_react["default"].createElement(CloseIcon, null));
+
+    return /*#__PURE__*/_react["default"].createElement(_mobilePopUpModal["default"], null, /*#__PURE__*/_react["default"].createElement(MenuContainer, {
+      bgColor: bgColor
+    }, closeJSX, /*#__PURE__*/_react["default"].createElement(FlexBox, null, /*#__PURE__*/_react["default"].createElement(SloganContainer, null, /*#__PURE__*/_react["default"].createElement(_sloganOld["default"], {
+      themeFunction: _themeOld["default"].selectSloganHBTheme
+    })), /*#__PURE__*/_react["default"].createElement(ActionContainer, null, /*#__PURE__*/_react["default"].createElement(_actionButtonOld["default"], {
+      actions: actions,
+      direction: "column",
+      themeFunction: _themeOld["default"].selectActionButtonHBTheme,
+      callback: handleClose
+    })), /*#__PURE__*/_react["default"].createElement(ChannelContainer, null, /*#__PURE__*/_react["default"].createElement(_channelsOld["default"], {
+      data: channels,
+      direction: "column",
+      currentPathname: "",
+      themeFunction: _themeOld["default"].selectChannelHBTheme,
+      callback: handleClose
+    }))), /*#__PURE__*/_react["default"].createElement(ServiceContainer, null, /*#__PURE__*/_react["default"].createElement(_hamburgerIcons["default"], {
+      services: services,
+      callback: handleClose
+    }))));
+  });
+};
+
+HamburgerMenu.propTypes = {
+  channels: _propTypes["default"].array,
+  services: _propTypes["default"].array,
+  actions: _propTypes["default"].array,
+  handleClose: _propTypes["default"].func
+};
+HamburgerMenu.defaultProps = {
+  channels: [],
+  services: [],
+  actions: [],
+  handleClose: function handleClose() {}
+};
+var _default = HamburgerMenu;
+exports["default"] = _default;