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

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.3.0...@twreporter/universal-header@2.4.0-rc.0) (2022-10-27)
+
+
+### Bug Fixes
+
+* address review comments & bugs ([ef8ffa1](https://github.com/twreporter/twreporter-npm-packages/commit/ef8ffa12fdad73f256f0e76a168a88899f27205f))
+* fix feature toggle & style ([9d615b1](https://github.com/twreporter/twreporter-npm-packages/commit/9d615b1091bf5762329f878f13c114cf1dce9912))
+* fix style & bug & naming ([7d824ab](https://github.com/twreporter/twreporter-npm-packages/commit/7d824abc5429b3505555aa174c038c67056abccb))
+
+
+### Features
+
+* add hamburger-footer component & story ([40cd9e7](https://github.com/twreporter/twreporter-npm-packages/commit/40cd9e73f23a9edf12bfe6211ef67f721c0cbca9))
+* add hamburger-menu component with story & feature toggle ([fc4c76b](https://github.com/twreporter/twreporter-npm-packages/commit/fc4c76bf98534d7b2f3fdf7695ae75adec1df510))
+* add hamburger-menu-item component & story ([604140b](https://github.com/twreporter/twreporter-npm-packages/commit/604140b7d388dbd1b1a35795b895bab963e26254))
+
+
+
+
+
+# [2.3.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.3.0-rc.2...@twreporter/universal-header@2.3.0) (2022-10-26)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
 # [2.3.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.3.0-rc.1...@twreporter/universal-header@2.3.0-rc.2) (2022-10-25)
 
 **Note:** Version bump only for package @twreporter/universal-header

package/lib/components/action-button-old.js

@@ -13,9 +13,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _links = _interopRequireDefault(require("../utils/links"));
+var _linksOld = _interopRequireDefault(require("../utils/links-old"));
 
-var _theme = _interopRequireDefault(require("../utils/theme"));
+var _themeOld = _interopRequireDefault(require("../utils/theme-old"));
 
 var _fonts = _interopRequireDefault(require("../constants/fonts"));
 
@@ -147,7 +147,7 @@ var ActionButtonItem = function ActionButtonItem(_ref) {
   var isActive = (_action$active = action.active) !== null && _action$active !== void 0 ? _action$active : true;
   var actionLabel = _actionsOld.actionLabels[actionKey];
 
-  var actionLink = _links["default"].getActionLinks()[actionKey];
+  var actionLink = _linksOld["default"].getActionLinks()[actionKey];
 
   return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
     var theme = _ref2.theme;
@@ -182,7 +182,7 @@ ActionButtonItem.propTypes = {
 ActionButtonItem.defaultProps = {
   action: {},
   direction: 'row',
-  themeFunction: _theme["default"].selectActionButtonTheme,
+  themeFunction: _themeOld["default"].selectActionButtonTheme,
   callback: function callback() {}
 };
 
@@ -211,7 +211,7 @@ ActionButton.propTypes = {
 ActionButton.defaultProps = {
   actions: [],
   direction: 'row',
-  themeFunction: _theme["default"].selectActionButtonTheme,
+  themeFunction: _themeOld["default"].selectActionButtonTheme,
   callback: function callback() {}
 };
 var _default = ActionButton;

package/lib/components/action-button.js

@@ -25,6 +25,8 @@ var _css = require("@twreporter/core/lib/utils/css");
 
 var _button = require("@twreporter/react-components/lib/button");
 
+var _theme = require("@twreporter/core/lib/constants/theme");
+
 var _map = _interopRequireDefault(require("lodash/map"));
 
 var _excluded = ["actions", "direction", "callback"];
@@ -89,6 +91,7 @@ var ActionButtonItem = function ActionButtonItem(_ref) {
   var _useContext = (0, _react.useContext)(_headerContext["default"]),
       theme = _useContext.theme;
 
+  var buttonTheme = direction === 'row' || theme === _theme.THEME.photography ? theme : _theme.THEME.noraml;
   var actionKey = action.key;
   var actionLabel = _actions.ACTION_LABEL[direction][actionKey];
   var actionLink = (0, _links.getActionLinks)()[actionKey];
@@ -99,7 +102,7 @@ var ActionButtonItem = function ActionButtonItem(_ref) {
     direction: direction
   }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], actionLink, /*#__PURE__*/_react["default"].createElement(StyledPillButton, {
     text: actionLabel,
-    theme: theme,
+    theme: buttonTheme,
     type: buttonType,
     size: buttonSize,
     direction: direction
@@ -123,14 +126,14 @@ var ActionButton = function ActionButton(_ref2) {
       callback = _ref2$callback === void 0 ? defaultFunc : _ref2$callback,
       rest = _objectWithoutProperties(_ref2, _excluded);
 
-  return /*#__PURE__*/_react["default"].createElement(ActionsContainer, {
+  return /*#__PURE__*/_react["default"].createElement(ActionsContainer, _extends({
     direction: direction
-  }, _.map(actions, function (action) {
-    return /*#__PURE__*/_react["default"].createElement(ActionButtonItem, _extends({
+  }, rest), _.map(actions, function (action) {
+    return /*#__PURE__*/_react["default"].createElement(ActionButtonItem, {
       action: action,
       direction: direction,
       key: action.key
-    }, rest));
+    });
   }));
 };
 

package/lib/components/channels-old.js

@@ -17,11 +17,11 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _theme = _interopRequireDefault(require("../utils/theme"));
+var _themeOld = _interopRequireDefault(require("../utils/theme-old"));
 
-var _propTypes2 = _interopRequireDefault(require("../constants/prop-types"));
+var _propTypesOld = _interopRequireDefault(require("../constants/prop-types-old"));
 
-var _channels = require("../constants/channels");
+var _channelsOld = require("../constants/channels-old");
 
 var _fonts = _interopRequireDefault(require("../constants/fonts"));
 
@@ -291,7 +291,7 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
       var channelType = channelItem.type;
       var channelLink = channelItem.link;
 
-      if (channelType === _channels.channelDropDownType) {
+      if (channelType === _channelsOld.channelDropDownType) {
         var _this$props = this.props,
             data = _this$props.data,
             direction = _this$props.direction;
@@ -318,7 +318,7 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
 
         var status = toShowDropdownMenu ? 'collapse' : 'expand';
 
-        var _themeUtils$selectIco = _slicedToArray(_theme["default"].selectIcons(theme)[status], 2),
+        var _themeUtils$selectIco = _slicedToArray(_themeOld["default"].selectIcons(theme)[status], 2),
             StatusIcon = _themeUtils$selectIco[0],
             StatusHoverIcon = _themeUtils$selectIco[1];
 
@@ -396,9 +396,9 @@ _defineProperty(Channels, "propTypes", {
   data: _propTypes["default"].arrayOf(_propTypes["default"].shape(_defineProperty({
     key: _propTypes["default"].string,
     label: _propTypes["default"].string,
-    link: _propTypes["default"].shape(_propTypes2["default"].link.propTypes),
+    link: _propTypes["default"].shape(_propTypesOld["default"].link.propTypes),
     pathname: _propTypes["default"].string,
-    type: _propTypes["default"].oneOf([_channels.channelDropDownType, _channels.channelLinkType])
+    type: _propTypes["default"].oneOf([_channelsOld.channelDropDownType, _channelsOld.channelLinkType])
   }, dropDownMenuKey, _dropDownMenu["default"].propTypes.data))),
   direction: _propTypes["default"].string,
   borderWidth: _propTypes["default"].array,
@@ -410,7 +410,7 @@ _defineProperty(Channels, "defaultProps", {
   data: [],
   direction: 'row',
   borderWidth: [0, 0, 0, 0],
-  themeFunction: _theme["default"].selectChannelTheme,
+  themeFunction: _themeOld["default"].selectChannelTheme,
   callback: function callback() {}
 });
 

package/lib/components/channels.js

@@ -9,6 +9,8 @@ exports["default"] = 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"));
@@ -27,13 +29,17 @@ var _divider = _interopRequireDefault(require("@twreporter/react-components/lib/
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
+var _excluded = ["onClickHambuger"];
+
 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 _ = {
   map: _map["default"]
@@ -55,7 +61,8 @@ var ChannelContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig(
 })(["display:flex;flex-direction:column;align-items:center;"]);
 
 var Channel = function Channel(_ref) {
-  var props = _extends({}, _ref);
+  var onClickHambuger = _ref.onClickHambuger,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var _useContext = (0, _react.useContext)(_headerContext["default"]),
       isLinkExternal = _useContext.isLinkExternal,
@@ -64,7 +71,8 @@ var Channel = function Channel(_ref) {
 
   var CategoryJsx = _.map(_categorySet.CATEGORY_ORDER, function (categoryKey) {
     var label = _categorySet.CATEGORY_LABEL[categoryKey];
-    var link = (0, _links.getCategoryLink)(isLinkExternal, releaseBranch, "categories/".concat(categoryKey));
+    var path = "/categories/".concat(categoryKey);
+    var link = (0, _links.getCategoryLink)(isLinkExternal, releaseBranch, path);
     return /*#__PURE__*/_react["default"].createElement(Item, {
       key: categoryKey
     }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(_button.TextButton, {
@@ -78,11 +86,15 @@ var Channel = function Channel(_ref) {
     releaseBranch: releaseBranch
   });
 
-  return /*#__PURE__*/_react["default"].createElement(ChannelContainer, props, /*#__PURE__*/_react["default"].createElement(_divider["default"], null), /*#__PURE__*/_react["default"].createElement(CategoryContainer, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+  return /*#__PURE__*/_react["default"].createElement(ChannelContainer, props, /*#__PURE__*/_react["default"].createElement(CategoryContainer, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
     iconComponent: hamburgerIcon,
-    theme: theme
+    theme: theme,
+    onClick: onClickHambuger
   }), CategoryJsx), /*#__PURE__*/_react["default"].createElement(_divider["default"], null));
 };
 
+Channel.propTypes = {
+  onClickHambuger: _propTypes["default"].func
+};
 var _default = Channel;
 exports["default"] = _default;

package/lib/components/drop-down-menu.js

@@ -19,7 +19,7 @@ var _fonts = _interopRequireDefault(require("../constants/fonts"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _propTypes2 = _interopRequireDefault(require("../constants/prop-types"));
+var _propTypes2 = require("../constants/prop-types");
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
@@ -135,7 +135,7 @@ _defineProperty(DropDownMenu, "propTypes", {
   data: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     key: _propTypes["default"].string,
     label: _propTypes["default"].string,
-    link: _propTypes["default"].shape(_propTypes2["default"].link.propTypes),
+    link: _propTypes["default"].shape(_propTypes2.LINK_PROP.propTypes),
     pathname: _propTypes["default"].string
   }))
 });

package/lib/components/hamburger-footer.js

@@ -0,0 +1,156 @@
+"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 _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _headerContext = _interopRequireWildcard(require("../contexts/header-context"));
+
+var _links = require("../utils/links");
+
+var _theme = require("../utils/theme");
+
+var _footer = require("../constants/footer");
+
+var _socialMedia = require("../constants/social-media");
+
+var _divider = _interopRequireDefault(require("@twreporter/react-components/lib/divider"));
+
+var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
+
+var _paragraph = require("@twreporter/react-components/lib/text/paragraph");
+
+var _button = require("@twreporter/react-components/lib/button");
+
+var _icon = require("@twreporter/react-components/lib/icon");
+
+var _theme2 = require("@twreporter/core/lib/constants/theme");
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+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); }
+
+var _ = {
+  map: _map["default"]
+};
+
+var FooterContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-footer__FooterContainer",
+  componentId: "i02xyc-0"
+})(["display:flex;flex-direction:column;"]);
+
+var LinkItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-footer__LinkItem",
+  componentId: "i02xyc-1"
+})(["padding:8px 32px;color:", ";&:hover{color:", ";background-color:", ";}&:active{color:", ";background-color:", ";}"], function (props) {
+  return props.color;
+}, function (props) {
+  return props.hoverColor;
+}, function (props) {
+  return props.hoverBgColor;
+}, function (props) {
+  return props.activeColor;
+}, function (props) {
+  return props.activeBgColor;
+});
+
+var LinkSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-footer__LinkSection",
+  componentId: "i02xyc-2"
+})(["display:flex;flex-direction:column;a{text-decoration:none;}"]);
+
+var IconItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-footer__IconItem",
+  componentId: "i02xyc-3"
+})(["margin-right:16px;&:last-child{margin-right:0;}"]);
+
+var SocialMediaSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-footer__SocialMediaSection",
+  componentId: "i02xyc-4"
+})(["display:flex;justify-content:center;"]);
+
+var DividerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-footer__DividerContainer",
+  componentId: "i02xyc-5"
+})(["margin:8px 32px 16px 32px;"]);
+
+var Footer = function Footer(_ref) {
+  var props = _extends({}, _ref);
+
+  var _useContext = (0, _react.useContext)(_headerContext["default"]),
+      theme = _useContext.theme,
+      releaseBranch = _useContext.releaseBranch,
+      isLinkExternal = _useContext.isLinkExternal;
+
+  var _useContext2 = (0, _react.useContext)(_headerContext.HamburgerContext),
+      closeHamburgerMenu = _useContext2.closeHamburgerMenu;
+
+  var footerTheme = theme === _theme2.THEME.transparent ? _theme2.THEME.normal : theme;
+
+  var _selectHamburgerFoote = (0, _theme.selectHamburgerFooterTheme)(footerTheme),
+      color = _selectHamburgerFoote.color,
+      hoverColor = _selectHamburgerFoote.hoverColor,
+      hoverBgColor = _selectHamburgerFoote.hoverBgColor,
+      activeColor = _selectHamburgerFoote.activeColor,
+      activeBgColor = _selectHamburgerFoote.activeBgColor;
+
+  var footerLinks = (0, _links.getFooterLinks)(isLinkExternal, releaseBranch);
+  var linkJSX = footerLinks ? /*#__PURE__*/_react["default"].createElement(LinkSection, null, _.map(_footer.FOOTER_ORDER, function (key) {
+    var link = footerLinks[key];
+    var label = _footer.FOOTER_LABEL[key];
+
+    if (!link || !label) {
+      return;
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, link, {
+      key: key,
+      onClick: closeHamburgerMenu
+    }), /*#__PURE__*/_react["default"].createElement(LinkItem, {
+      color: color,
+      hoverColor: hoverColor,
+      hoverBgColor: hoverBgColor,
+      activeColor: activeColor,
+      activeBgColor: activeBgColor
+    }, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+      text: label
+    })));
+  })) : null;
+  var socialMediaLinks = (0, _links.getSocialMediaLinks)();
+  var socialMediaJSX = socialMediaLinks ? /*#__PURE__*/_react["default"].createElement(SocialMediaSection, null, _.map(_socialMedia.SOCIAL_MEDIA_ORDER, function (key) {
+    var link = socialMediaLinks[key];
+
+    if (!link) {
+      return;
+    }
+
+    var Icon = /*#__PURE__*/_react["default"].createElement(_icon.SocialMedia, {
+      mediaType: key,
+      releaseBranch: releaseBranch
+    });
+
+    return /*#__PURE__*/_react["default"].createElement(IconItem, {
+      key: key
+    }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+      iconComponent: Icon,
+      theme: footerTheme
+    })));
+  })) : null;
+  return /*#__PURE__*/_react["default"].createElement(FooterContainer, props, linkJSX, /*#__PURE__*/_react["default"].createElement(DividerContainer, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], null)), socialMediaJSX);
+};
+
+var _default = Footer;
+exports["default"] = _default;

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

@@ -0,0 +1,75 @@
+"use strict";
+
+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 _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: 'Hamburger/Footer',
+  component: _hamburgerFooter["default"],
+  argTypes: {
+    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
+    releaseBranch: _releaseBranch.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 = function footer(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(StyledFooter, {
+    bgColor: bgColor
+  }));
+};
+
+exports.footer = footer;
+footer.parameters = {
+  backgrounds: {
+    "default": 'white'
+  }
+};

package/lib/components/hamburger-icons.js

@@ -13,13 +13,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _links = _interopRequireDefault(require("../utils/links"));
+var _linksOld = _interopRequireDefault(require("../utils/links-old"));
 
 var _querystring = _interopRequireDefault(require("querystring"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _theme = _interopRequireDefault(require("../utils/theme"));
+var _themeOld = _interopRequireDefault(require("../utils/theme-old"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
@@ -85,7 +85,7 @@ var Login = function Login(_ref) {
       destination: redirectURL
     });
 
-    window.location = _links["default"].getLoginLink(releaseBranch).to + '?' + query;
+    window.location = _linksOld["default"].getLoginLink(releaseBranch).to + '?' + query;
   };
 
   var handleClick = function handleClick(e, releaseBranch) {
@@ -98,7 +98,7 @@ var Login = function Login(_ref) {
     var releaseBranch = _ref2.releaseBranch,
         theme = _ref2.theme;
 
-    var _themeUtils$selectHam = _slicedToArray(_theme["default"].selectHamburgerServiceIcons(theme).login, 1),
+    var _themeUtils$selectHam = _slicedToArray(_themeOld["default"].selectHamburgerServiceIcons(theme).login, 1),
         LogInIcon = _themeUtils$selectHam[0];
 
     return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
@@ -126,7 +126,7 @@ var Logout = function Logout(_ref3) {
       destination: redirectURL
     });
 
-    window.location = _links["default"].getLogoutLink(releaseBranch).to + '?' + query;
+    window.location = _linksOld["default"].getLogoutLink(releaseBranch).to + '?' + query;
   };
 
   var handleClick = function handleClick(e, releaseBranch) {
@@ -139,7 +139,7 @@ var Logout = function Logout(_ref3) {
     var releaseBranch = _ref4.releaseBranch,
         theme = _ref4.theme;
 
-    var _themeUtils$selectHam2 = _slicedToArray(_theme["default"].selectHamburgerServiceIcons(theme).logout, 1),
+    var _themeUtils$selectHam2 = _slicedToArray(_themeOld["default"].selectHamburgerServiceIcons(theme).logout, 1),
         LogOutIcon = _themeUtils$selectHam2[0];
 
     return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
@@ -164,10 +164,10 @@ var Search = function Search(_ref5) {
         isLinkExternal = _ref6.isLinkExternal,
         theme = _ref6.theme;
 
-    var _themeUtils$selectHam3 = _slicedToArray(_theme["default"].selectHamburgerServiceIcons(theme).search, 1),
+    var _themeUtils$selectHam3 = _slicedToArray(_themeOld["default"].selectHamburgerServiceIcons(theme).search, 1),
         SearchIcon = _themeUtils$selectHam3[0];
 
-    var link = _links["default"].getSearchLink(isLinkExternal, releaseBranch);
+    var link = _linksOld["default"].getSearchLink(isLinkExternal, releaseBranch);
 
     return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, link, {
       onClick: callback
@@ -189,10 +189,10 @@ var Bookmark = function Bookmark(_ref7) {
         isLinkExternal = _ref8.isLinkExternal,
         theme = _ref8.theme;
 
-    var _themeUtils$selectHam4 = _slicedToArray(_theme["default"].selectHamburgerServiceIcons(theme).bookmark, 1),
+    var _themeUtils$selectHam4 = _slicedToArray(_themeOld["default"].selectHamburgerServiceIcons(theme).bookmark, 1),
         BookmarkIcon = _themeUtils$selectHam4[0];
 
-    var link = _links["default"].getBookmarksLink(isLinkExternal, releaseBranch);
+    var link = _linksOld["default"].getBookmarksLink(isLinkExternal, releaseBranch);
 
     return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, link, {
       onClick: callback
@@ -247,7 +247,7 @@ var HamburgerService = function HamburgerService(_ref9) {
   return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref10) {
     var theme = _ref10.theme;
 
-    var _themeUtils$selectHam5 = _theme["default"].selectHamburgerServiceTheme(theme),
+    var _themeUtils$selectHam5 = _themeOld["default"].selectHamburgerServiceTheme(theme),
         borderColor = _themeUtils$selectHam5.borderColor;
 
     return /*#__PURE__*/_react["default"].createElement(IconsContainer, {