@twreporter/universal-header 2.2.15-rc.2 → 2.3.0-rc.0

package/lib/components/icons.js

@@ -7,34 +7,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
-
-var _customizedLink = _interopRequireDefault(require("./customized-link"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
+var _querystring = _interopRequireDefault(require("querystring"));
 
-var _searchBox = _interopRequireDefault(require("./search-box"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _fonts = _interopRequireDefault(require("../constants/fonts"));
+var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
 var _links = _interopRequireDefault(require("../utils/links"));
 
-var _querystring = _interopRequireDefault(require("querystring"));
+var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _button = require("@twreporter/react-components/lib/button");
 
-var _theme = _interopRequireDefault(require("../utils/theme"));
+var _icon = require("@twreporter/react-components/lib/icon");
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _card = require("@twreporter/react-components/lib/card");
 
-var _map = _interopRequireDefault(require("lodash/map"));
+var _input = require("@twreporter/react-components/lib/input");
 
-var _templateObject;
+var _hook = require("@twreporter/react-components/lib/hook");
 
 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."); }
@@ -47,228 +47,194 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-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; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var _ = {
-  map: _map["default"]
-};
-var styles = {
-  iconContainerSize: 3 // em
-
-};
-
 var IconsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "icons__IconsContainer",
   componentId: "ay66zn-0"
-})(["position:relative;display:table;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+})(["display:flex;"]);
 
 var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "icons__IconContainer",
   componentId: "ay66zn-1"
-})(["font-size:", ";cursor:pointer;display:table-cell;width:", "em;height:", "em;line-height:1;position:relative;opacity:", ";transition:opacity 600ms ease;a{display:flex;}svg{opacity:1;position:absolute;height:100%;top:0;left:30%;z-index:1;}"], _fonts["default"].size.base, styles.iconContainerSize, styles.iconContainerSize, function (props) {
-  return props.isSearchOpened ? '0' : '1';
-});
+})(["position:relative;margin-right:16px;a{display:flex;}"]);
 
-var ShowOnHover = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "icons__ShowOnHover",
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons__Container",
   componentId: "ay66zn-2"
-})(["display:none;", ":hover &{display:block;}"], IconContainer);
+})(["opacity:", ";transition:opacity 300ms ease;"], function (props) {
+  return props.isSearchOpened ? '0' : '1';
+});
 
-var HideOnHover = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "icons__HideOnHover",
+var LogContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons__LogContainer",
   componentId: "ay66zn-3"
-})(["display:block;", ":hover &{display:none;}"], IconContainer);
+})(["display:flex;flex-direction:column;"]);
+
+var SearchContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons__SearchContainer",
+  componentId: "ay66zn-4"
+})(["opacity:", ";transition:opacity 300ms ease;position:absolute;right:0;top:-16px;z-index:", ";"], function (props) {
+  return props.isSearchOpened ? '1' : '0';
+}, function (props) {
+  return props.isSearchOpened ? 999 : -1;
+});
 
-var Icons = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(Icons, _React$PureComponent);
+var StyledDialog = /*#__PURE__*/(0, _styledComponents["default"])(_card.Dialog).withConfig({
+  displayName: "icons__StyledDialog",
+  componentId: "ay66zn-5"
+})(["opacity:", ";transition:opacity 100ms;position:absolute;top:24px;right:-16px;width:max-content;cursor:pointer;"], function (props) {
+  return props.showDialog ? '1' : '0';
+});
 
-  var _super = _createSuper(Icons);
+var LogInOutIcon = function LogInOutIcon() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showDialog = _useState2[0],
+      setShowDialog = _useState2[1];
 
-  function Icons(props) {
-    var _this;
+  var _useContext = (0, _react.useContext)(_headerContext["default"]),
+      releaseBranch = _useContext.releaseBranch,
+      theme = _useContext.theme,
+      isAuthed = _useContext.isAuthed;
 
-    _classCallCheck(this, Icons);
+  var onClickIcon = function onClickIcon(e) {
+    e.preventDefault();
 
-    _this = _super.call(this, props);
+    if (isAuthed) {
+      setShowDialog(!showDialog);
+      return;
+    }
 
-    _defineProperty(_assertThisInitialized(_this), "_handleLogIconClick", function (e, isAuthed, releaseBranch) {
-      e.preventDefault();
-      var redirectURL = window.location.href;
+    var redirectURL = window.location.href;
 
-      var query = _querystring["default"].stringify({
-        destination: redirectURL
-      });
+    var query = _querystring["default"].stringify({
+      destination: redirectURL
+    });
 
-      if (isAuthed) {
-        window.location = _links["default"].getLogoutLink(releaseBranch).to + '?' + query;
-        return;
-      }
+    window.location = _links["default"].getLogoutLink(releaseBranch).to + '?' + query;
+  };
 
-      window.location = _links["default"].getLoginLink(releaseBranch).to + '?' + query;
+  var onClickLogOut = function onClickLogOut(e) {
+    e.preventDefault();
+    var redirectURL = window.location.href;
+
+    var query = _querystring["default"].stringify({
+      destination: redirectURL
     });
 
-    _this.state = {
-      isSearchOpened: false
-    };
-    _this._closeSearchBox = _this._closeSearchBox.bind(_assertThisInitialized(_this));
-    _this._handleClickSearch = _this._handleClickSearch.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(Icons, [{
-    key: "_closeSearchBox",
-    value: function _closeSearchBox() {
-      this.setState({
-        isSearchOpened: false
-      });
-    }
-  }, {
-    key: "_handleClickSearch",
-    value: function _handleClickSearch(e) {
-      e.preventDefault();
-      this.setState({
-        isSearchOpened: true
-      });
+    window.location = _links["default"].getLoginLink(releaseBranch).to + '?' + query;
+  };
+
+  var closeDialog = function closeDialog() {
+    return setShowDialog(false);
+  };
+
+  var ref = (0, _hook.useOutsideClick)(closeDialog);
+
+  var Icon = /*#__PURE__*/_react["default"].createElement(_icon.Member, {
+    releaseBranch: releaseBranch
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    key: "login"
+  }, /*#__PURE__*/_react["default"].createElement(LogContainer, {
+    onClick: onClickIcon,
+    ref: ref
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: Icon,
+    theme: theme
+  }), /*#__PURE__*/_react["default"].createElement(StyledDialog, {
+    text: "\u767B\u51FA",
+    size: "L",
+    showDialog: showDialog,
+    onClick: onClickLogOut
+  })));
+};
+
+var SearchIcon = function SearchIcon() {
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isSearchOpened = _useState4[0],
+      setSearchOpened = _useState4[1];
+
+  var _useContext2 = (0, _react.useContext)(_headerContext["default"]),
+      isLinkExternal = _useContext2.isLinkExternal,
+      releaseBranch = _useContext2.releaseBranch,
+      theme = _useContext2.theme;
+
+  var closeSearchBox = function closeSearchBox() {
+    setSearchOpened(false);
+  };
+
+  var handleClickSearch = function handleClickSearch(e) {
+    e.preventDefault();
+    setSearchOpened(true);
+
+    if (!ref.current) {
+      return;
     }
-  }, {
-    key: "_prepareIconJsx",
-    value: function _prepareIconJsx(service) {
-      var _this2 = this;
-
-      var isSearchOpened = this.state.isSearchOpened;
-
-      var Login = /*#__PURE__*/_react["default"].createElement(IconContainer, {
-        isSearchOpened: isSearchOpened,
-        key: "login"
-      }, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref) {
-        var releaseBranch = _ref.releaseBranch,
-            theme = _ref.theme;
-
-        var _themeUtils$selectSer = _slicedToArray(_theme["default"].selectServiceIcons(theme).login, 2),
-            LogInIcon = _themeUtils$selectSer[0],
-            LogInHoverIcon = _themeUtils$selectSer[1];
-
-        return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
-          onClick: function onClick(e) {
-            _this2._handleLogIconClick(e, false, releaseBranch);
-          }
-        }, /*#__PURE__*/_react["default"].createElement(HideOnHover, null, /*#__PURE__*/_react["default"].createElement(LogInIcon, null)), /*#__PURE__*/_react["default"].createElement(ShowOnHover, null, /*#__PURE__*/_react["default"].createElement(LogInHoverIcon, null)));
-      }));
-
-      var Logout = /*#__PURE__*/_react["default"].createElement(IconContainer, {
-        isSearchOpened: isSearchOpened,
-        key: "logout"
-      }, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
-        var releaseBranch = _ref2.releaseBranch,
-            theme = _ref2.theme;
-
-        var _themeUtils$selectSer2 = _slicedToArray(_theme["default"].selectServiceIcons(theme).logout, 2),
-            LogOutIcon = _themeUtils$selectSer2[0],
-            LogOutHoverIcon = _themeUtils$selectSer2[1];
-
-        return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
-          onClick: function onClick(e) {
-            _this2._handleLogIconClick(e, true, releaseBranch);
-          }
-        }, /*#__PURE__*/_react["default"].createElement(HideOnHover, null, /*#__PURE__*/_react["default"].createElement(LogOutIcon, null)), /*#__PURE__*/_react["default"].createElement(ShowOnHover, null, /*#__PURE__*/_react["default"].createElement(LogOutHoverIcon, null)));
-      }));
-
-      var Search = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-        key: "search"
-      }, /*#__PURE__*/_react["default"].createElement(IconContainer, {
-        onClick: this._handleClickSearch,
-        isSearchOpened: isSearchOpened
-      }, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref3) {
-        var theme = _ref3.theme;
-
-        var _themeUtils$selectSer3 = _slicedToArray(_theme["default"].selectServiceIcons(theme).search, 2),
-            SearchIcon = _themeUtils$selectSer3[0],
-            SearchHoverIcon = _themeUtils$selectSer3[1];
-
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(HideOnHover, null, /*#__PURE__*/_react["default"].createElement(SearchIcon, null)), /*#__PURE__*/_react["default"].createElement(ShowOnHover, null, /*#__PURE__*/_react["default"].createElement(SearchHoverIcon, null)));
-      })), /*#__PURE__*/_react["default"].createElement(_searchBox["default"], {
-        isSearchOpened: isSearchOpened,
-        closeSearchBox: this._closeSearchBox
-      }));
-
-      var Bookmark = /*#__PURE__*/_react["default"].createElement(IconContainer, {
-        isSearchOpened: isSearchOpened,
-        key: "bookmark"
-      }, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref4) {
-        var releaseBranch = _ref4.releaseBranch,
-            isLinkExternal = _ref4.isLinkExternal,
-            theme = _ref4.theme;
-
-        var _themeUtils$selectSer4 = _slicedToArray(_theme["default"].selectServiceIcons(theme).bookmark, 2),
-            BookmarkIcon = _themeUtils$selectSer4[0],
-            BookmarkHoverIcon = _themeUtils$selectSer4[1];
-
-        var link = _links["default"].getBookmarksLink(isLinkExternal, releaseBranch);
-
-        return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(HideOnHover, null, /*#__PURE__*/_react["default"].createElement(BookmarkIcon, null)), /*#__PURE__*/_react["default"].createElement(ShowOnHover, null, /*#__PURE__*/_react["default"].createElement(BookmarkHoverIcon, null)));
-      }));
-
-      switch (service) {
-        case 'login':
-          return Login;
-
-        case 'logout':
-          return Logout;
-
-        case 'search':
-          return Search;
-
-        case 'bookmarks':
-          return Bookmark;
-
-        default:
-          return null;
-      }
+
+    var input = ref.current.getElementsByTagName('INPUT')[0];
+
+    if (input) {
+      input.focus();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var services = this.props.services;
-      return /*#__PURE__*/_react["default"].createElement(IconsContainer, null, _.map(services, function (service) {
-        return _this3._prepareIconJsx(service.key);
-      }));
+  };
+
+  var onSearch = function onSearch(keywords) {
+    if (!window) {
+      return;
     }
-  }]);
 
-  return Icons;
-}(_react["default"].PureComponent);
+    window.location = "".concat(_links["default"].getSearchLink(isLinkExternal, releaseBranch).to, "?q=").concat(keywords);
+  };
+
+  var Icon = /*#__PURE__*/_react["default"].createElement(_icon.Search, {
+    releaseBranch: releaseBranch
+  });
+
+  var ref = (0, _hook.useOutsideClick)(closeSearchBox);
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    ref: ref,
+    key: "search"
+  }, /*#__PURE__*/_react["default"].createElement(Container, {
+    onClick: handleClickSearch,
+    isSearchOpened: isSearchOpened
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: Icon,
+    theme: theme
+  })), /*#__PURE__*/_react["default"].createElement(SearchContainer, {
+    isSearchOpened: isSearchOpened
+  }, /*#__PURE__*/_react["default"].createElement(_input.SearchBar, {
+    placeholder: "\u95DC\u9375\u5B57\u641C\u5C0B",
+    theme: theme,
+    onClose: closeSearchBox,
+    onSearch: onSearch
+  })));
+};
 
-_defineProperty(Icons, "propTypes", {
-  services: _propTypes["default"].array
-});
+var BookmarkIcon = function BookmarkIcon() {
+  var _useContext3 = (0, _react.useContext)(_headerContext["default"]),
+      releaseBranch = _useContext3.releaseBranch,
+      isLinkExternal = _useContext3.isLinkExternal,
+      theme = _useContext3.theme;
 
-_defineProperty(Icons, "defaultProps", {
-  services: []
-});
+  var link = _links["default"].getBookmarksLink(isLinkExternal, releaseBranch);
+
+  var Icon = /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+    releaseBranch: releaseBranch
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    key: "bookmark"
+  }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: Icon,
+    theme: theme
+  })));
+};
+
+var Icons = function Icons() {
+  return /*#__PURE__*/_react["default"].createElement(IconsContainer, null, /*#__PURE__*/_react["default"].createElement(SearchIcon, null), /*#__PURE__*/_react["default"].createElement(BookmarkIcon, null), /*#__PURE__*/_react["default"].createElement(LogInOutIcon, null));
+};
 
 var _default = Icons;
 exports["default"] = _default;

package/lib/components/icons.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.desktop = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _icons = _interopRequireDefault(require("./icons"));
+
+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 }; }
+
+/* eslint-disable react/prop-types */
+var _default = {
+  title: 'Icons/Desktop',
+  component: _icons["default"],
+  argTypes: {
+    isAuthed: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
+    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+  }
+};
+exports["default"] = _default;
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "iconsstories__Container",
+  componentId: "sc-19z8cko-0"
+})(["transform:translateX(300px);"]);
+
+var desktop = function desktop(props) {
+  var isAuthed = props.isAuthed,
+      theme = props.theme,
+      releaseBranch = props.releaseBranch;
+  var context = {
+    isAuthed: isAuthed,
+    theme: theme,
+    releaseBranch: releaseBranch,
+    isLinkExternal: true
+  };
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
+    value: context
+  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_icons["default"], null)));
+};
+
+exports.desktop = desktop;

package/lib/components/slogan-old.js

@@ -0,0 +1,57 @@
+"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 _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+
+var _slogan = _interopRequireDefault(require("../constants/slogan"));
+
+var _fonts = _interopRequireDefault(require("../constants/fonts"));
+
+var _theme = _interopRequireDefault(require("../utils/theme"));
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var style = {
+  fontSize: {
+    desktop: _fonts["default"].size.base
+  }
+};
+
+var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "slogan-old__SloganContainer",
+  componentId: "sc-1e1jc39-0"
+})(["color:", ";font-size:", ";font-family:", ";display:flex;align-items:center;cursor:default;"], function (props) {
+  return props.color || _color.colorGrayscale.gray900;
+}, style.fontSize.desktop, _fonts["default"].family.serif);
+
+var Slogan = function Slogan(_ref) {
+  var themeFunction = _ref.themeFunction;
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
+    var theme = _ref2.theme;
+    var color = themeFunction(theme);
+    return /*#__PURE__*/_react["default"].createElement(SloganContainer, {
+      color: color
+    }, _slogan["default"]);
+  });
+};
+
+Slogan.propTypes = {
+  themeFunction: _propTypes["default"].func
+};
+Slogan.defaultProps = {
+  themeFunction: _theme["default"].selectSloganTheme
+};
+var _default = Slogan;
+exports["default"] = _default;

package/lib/components/slogan.js

@@ -1,13 +1,13 @@
 "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 = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -15,43 +15,36 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"
 
 var _slogan = _interopRequireDefault(require("../constants/slogan"));
 
-var _fonts = _interopRequireDefault(require("../constants/fonts"));
-
-var _theme = _interopRequireDefault(require("../utils/theme"));
+var _theme = require("../utils/theme");
 
-var _color = require("@twreporter/core/lib/constants/color");
+var _font = require("@twreporter/core/lib/constants/font");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var style = {
-  fontSize: {
-    desktop: _fonts["default"].size.base
-  }
-};
+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); }
 
 var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slogan__SloganContainer",
   componentId: "sc-1eoofl8-0"
-})(["color:", ";font-size:", ";font-family:", ";display:flex;align-items:center;cursor:default;"], function (props) {
-  return props.color || _color.colorGrayscale.gray900;
-}, style.fontSize.desktop, _fonts["default"].family.serif);
+})(["color:", ";display:flex;align-items:center;cursor:default;font-family:", ";font-weight:", ";"], function (props) {
+  return props.color;
+}, _font.fontFamily.title, _font.fontWeight.bold);
 
 var Slogan = function Slogan(_ref) {
-  var themeFunction = _ref.themeFunction;
-  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
-    var theme = _ref2.theme;
-    var color = themeFunction(theme);
-    return /*#__PURE__*/_react["default"].createElement(SloganContainer, {
-      color: color
-    }, _slogan["default"]);
-  });
-};
+  var props = _extends({}, _ref);
 
-Slogan.propTypes = {
-  themeFunction: _propTypes["default"].func
-};
-Slogan.defaultProps = {
-  themeFunction: _theme["default"].selectSloganTheme
+  var _useContext = (0, _react.useContext)(_headerContext["default"]),
+      theme = _useContext.theme;
+
+  var color = (0, _theme.selectSloganThemeNew)(theme);
+  return /*#__PURE__*/_react["default"].createElement(SloganContainer, _extends({
+    color: color
+  }, props), _slogan["default"]);
 };
+
 var _default = Slogan;
 exports["default"] = _default;