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

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.3.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.3.0-rc.0...@twreporter/universal-header@2.3.0-rc.1) (2022-10-21)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
+# [2.3.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.15-rc.2...@twreporter/universal-header@2.3.0-rc.0) (2022-10-12)
+
+
+### Bug Fixes
+
+* address review comment ([2cf0499](https://github.com/twreporter/twreporter-npm-packages/commit/2cf04990d34e0f26c7aee5519fb120ce99c12776))
+
+
+### Features
+
+* add new info structure desktop header ([855aa82](https://github.com/twreporter/twreporter-npm-packages/commit/855aa8288116610592452e66827f8421b9a99c7e))
+
+
+
+
+
 ## [2.2.15-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.15-rc.1...@twreporter/universal-header@2.2.15-rc.2) (2022-09-27)
 
 **Note:** Version bump only for package @twreporter/universal-header

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

@@ -0,0 +1,218 @@
+"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 _links = _interopRequireDefault(require("../utils/links"));
+
+var _theme = _interopRequireDefault(require("../utils/theme"));
+
+var _fonts = _interopRequireDefault(require("../constants/fonts"));
+
+var _actionsOld = require("../constants/actions-old");
+
+var _customizedLink = _interopRequireDefault(require("./customized-link"));
+
+var _css = require("@twreporter/core/lib/utils/css");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+var _excluded = ["actions", "direction"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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 = {
+  itemWidth: {
+    mobile: {
+      row: '48px',
+      column: '100%'
+    },
+    tablet: {
+      row: '70px',
+      column: '100%'
+    },
+    desktop: '70px'
+  },
+  itemHeight: {
+    mobile: {
+      row: 24,
+      // px
+      column: 40 // px
+
+    },
+    tablet: {
+      row: 30,
+      // px
+      column: 40 // px
+
+    },
+    desktop: 30 // px
+
+  },
+  itemMargin: {
+    row: [0, 0, 0, 10],
+    // px
+    column: [7, 0, 0, 0] // px
+
+  },
+  fontSize: {
+    mobile: {
+      row: _fonts["default"].size.small,
+      column: _fonts["default"].size.medium
+    },
+    tablet: {
+      row: _fonts["default"].size.base,
+      column: _fonts["default"].size.medium
+    },
+    desktop: _fonts["default"].size.base
+  }
+};
+
+var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "action-button-old__ActionsContainer",
+  componentId: "sc-1lcbmya-0"
+})(["display:flex;align-items:center;flex-direction:", ";width:100%;"], function (props) {
+  return props.direction;
+});
+
+var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "action-button-old__ActionContainer",
+  componentId: "sc-1lcbmya-1"
+})(["transition:opacity 0.1s;transition-delay:300ms;opacity:", ";pointer-events:", ";margin:", ";width:100%;&:first-child{margin-top:0;margin-left:0;}a,a:link,a:visited{color:", ";font-size:", ";font-weight:", ";", " ", "}"], function (props) {
+  return props.isActive ? 1 : 0;
+}, function (props) {
+  return props.isActive ? 'auto' : 'none';
+}, function (props) {
+  return (0, _css.arrayToCssShorthand)(styles.itemMargin[props.direction]);
+}, function (props) {
+  return props.color || 'white';
+}, styles.fontSize.desktop, _fonts["default"].weight.bold, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: default;\n      font-size: ", ";\n    "])), function (props) {
+  return styles.fontSize.tablet[props.direction];
+}), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: default;\n      font-size: ", ";\n    "])), function (props) {
+  return styles.fontSize.mobile[props.direction];
+}));
+
+var ActionItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "action-button-old__ActionItem",
+  componentId: "sc-1lcbmya-2"
+})(["background-color:", ";width:", ";max-width:316px;height:", "px;border-radius:50px;display:flex;align-items:center;justify-content:center;margin:0 auto;&:hover{background-color:", ";}", " ", ""], function (props) {
+  return props.bgColor || _color.colorBrand.heavy;
+}, styles.itemWidth.desktop, styles.itemHeight.desktop, function (props) {
+  return props.hoverBgColor || _color.colorBrand.heavy;
+}, _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", ";\n  "])), function (props) {
+  return styles.itemHeight.tablet[props.direction];
+}, function (props) {
+  return styles.itemWidth.tablet[props.direction];
+}), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", ";\n  "])), function (props) {
+  return styles.itemHeight.mobile[props.direction];
+}, function (props) {
+  return styles.itemWidth.mobile[props.direction];
+}));
+
+var ActionButtonItem = function ActionButtonItem(_ref) {
+  var _action$active;
+
+  var action = _ref.action,
+      direction = _ref.direction,
+      themeFunction = _ref.themeFunction,
+      callback = _ref.callback;
+  var actionKey = action.key;
+  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];
+
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
+    var theme = _ref2.theme;
+
+    var _themeFunction = themeFunction(theme),
+        color = _themeFunction.color,
+        bgColor = _themeFunction.bgColor,
+        hoverBgColor = _themeFunction.hoverBgColor;
+
+    return /*#__PURE__*/_react["default"].createElement(ActionContainer, {
+      color: color,
+      direction: direction,
+      isActive: isActive,
+      onClick: callback
+    }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], actionLink, /*#__PURE__*/_react["default"].createElement(ActionItem, {
+      direction: direction,
+      bgColor: bgColor,
+      hoverBgColor: hoverBgColor
+    }, actionLabel)));
+  });
+};
+
+ActionButtonItem.propTypes = {
+  action: _propTypes["default"].shape({
+    key: _propTypes["default"].string,
+    active: _propTypes["default"]["boolean"]
+  }),
+  direction: _propTypes["default"].string,
+  themeFunction: _propTypes["default"].func,
+  callback: _propTypes["default"].func
+};
+ActionButtonItem.defaultProps = {
+  action: {},
+  direction: 'row',
+  themeFunction: _theme["default"].selectActionButtonTheme,
+  callback: function callback() {}
+};
+
+var ActionButton = function ActionButton(_ref3) {
+  var actions = _ref3.actions,
+      direction = _ref3.direction,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(ActionsContainer, {
+    direction: direction
+  }, _.map(actions, function (action) {
+    return /*#__PURE__*/_react["default"].createElement(ActionButtonItem, _extends({
+      action: action,
+      direction: direction,
+      key: action.key
+    }, rest));
+  }));
+};
+
+ActionButton.propTypes = {
+  actions: _propTypes["default"].arrayOf(_propTypes["default"].shape(ActionButtonItem.propTypes)),
+  direction: _propTypes["default"].string,
+  themeFunction: _propTypes["default"].func,
+  callback: _propTypes["default"].func
+};
+ActionButton.defaultProps = {
+  actions: [],
+  direction: 'row',
+  themeFunction: _theme["default"].selectActionButtonTheme,
+  callback: function callback() {}
+};
+var _default = ActionButton;
+exports["default"] = _default;

package/lib/components/action-button.js

@@ -1,11 +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 _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -13,183 +15,113 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _links = _interopRequireDefault(require("../utils/links"));
-
-var _theme = _interopRequireDefault(require("../utils/theme"));
-
-var _fonts = _interopRequireDefault(require("../constants/fonts"));
+var _links = require("../utils/links");
 
 var _actions = require("../constants/actions");
 
-var _customizedLink = _interopRequireDefault(require("./customized-link"));
+var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
 
 var _css = require("@twreporter/core/lib/utils/css");
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
-
-var _color = require("@twreporter/core/lib/constants/color");
+var _button = require("@twreporter/react-components/lib/button");
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _excluded = ["actions", "direction"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["actions", "direction", "callback"];
 
 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; }
 
-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"]
-};
+}; // global var
+
+var defaultFunc = function defaultFunc() {};
+
 var styles = {
-  itemWidth: {
-    mobile: {
-      row: '48px',
-      column: '100%'
-    },
-    tablet: {
-      row: '70px',
-      column: '100%'
-    },
-    desktop: '70px'
-  },
-  itemHeight: {
-    mobile: {
-      row: 24,
-      // px
-      column: 40 // px
-
-    },
-    tablet: {
-      row: 30,
-      // px
-      column: 40 // px
-
-    },
-    desktop: 30 // px
-
-  },
   itemMargin: {
-    row: [0, 0, 0, 10],
+    row: [0, 0, 0, 16],
     // px
-    column: [7, 0, 0, 0] // px
-
-  },
-  fontSize: {
-    mobile: {
-      row: _fonts["default"].size.small,
-      column: _fonts["default"].size.medium
-    },
-    tablet: {
-      row: _fonts["default"].size.base,
-      column: _fonts["default"].size.medium
-    },
-    desktop: _fonts["default"].size.base
+    column: [16, 0, 0, 0] // px
+
   }
 };
-
-var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "action-button__ActionsContainer",
+var StyledPillButton = /*#__PURE__*/(0, _styledComponents["default"])(_button.PillButton).withConfig({
+  displayName: "action-button__StyledPillButton",
   componentId: "sc-4wc24t-0"
-})(["display:flex;align-items:center;flex-direction:", ";width:100%;"], function (props) {
-  return props.direction;
+})(["justify-content:center;", ""], function (props) {
+  return props.direction === 'column' ? 'width: auto;' : '';
 });
 
-var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "action-button__ActionContainer",
+var ActionItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "action-button__ActionItem",
   componentId: "sc-4wc24t-1"
-})(["transition:opacity 0.1s;transition-delay:300ms;opacity:", ";pointer-events:", ";margin:", ";width:100%;&:first-child{margin-top:0;margin-left:0;}a,a:link,a:visited{color:", ";font-size:", ";font-weight:", ";", " ", "}"], function (props) {
-  return props.isActive ? 1 : 0;
-}, function (props) {
-  return props.isActive ? 'auto' : 'none';
-}, function (props) {
+})(["display:flex;align-items:center;justify-content:center;margin:", ";&:first-child{margin-top:0;margin-left:0;}a{text-decoration:none;}"], function (props) {
   return (0, _css.arrayToCssShorthand)(styles.itemMargin[props.direction]);
-}, function (props) {
-  return props.color || 'white';
-}, styles.fontSize.desktop, _fonts["default"].weight.bold, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: default;\n      font-size: ", ";\n    "])), function (props) {
-  return styles.fontSize.tablet[props.direction];
-}), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: default;\n      font-size: ", ";\n    "])), function (props) {
-  return styles.fontSize.mobile[props.direction];
-}));
+});
 
-var ActionItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "action-button__ActionItem",
+var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "action-button__ActionsContainer",
   componentId: "sc-4wc24t-2"
-})(["background-color:", ";width:", ";max-width:316px;height:", "px;border-radius:50px;display:flex;align-items:center;justify-content:center;margin:0 auto;&:hover{background-color:", ";}", " ", ""], function (props) {
-  return props.bgColor || _color.colorBrand.heavy;
-}, styles.itemWidth.desktop, styles.itemHeight.desktop, function (props) {
-  return props.hoverBgColor || _color.colorBrand.heavy;
-}, _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", ";\n  "])), function (props) {
-  return styles.itemHeight.tablet[props.direction];
-}, function (props) {
-  return styles.itemWidth.tablet[props.direction];
-}), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", ";\n  "])), function (props) {
-  return styles.itemHeight.mobile[props.direction];
-}, function (props) {
-  return styles.itemWidth.mobile[props.direction];
-}));
+})(["display:flex;align-items:center;flex-direction:", ";&,", ",a{", "}"], function (props) {
+  return props.direction;
+}, ActionItem, function (props) {
+  return props.direction === 'column' ? 'width: 100%;' : '';
+});
 
 var ActionButtonItem = function ActionButtonItem(_ref) {
-  var _action$active;
-
-  var action = _ref.action,
-      direction = _ref.direction,
-      themeFunction = _ref.themeFunction,
-      callback = _ref.callback;
-  var actionKey = action.key;
-  var isActive = (_action$active = action.active) !== null && _action$active !== void 0 ? _action$active : true;
-  var actionLabel = _actions.actionLabels[actionKey];
+  var _ref$action = _ref.action,
+      action = _ref$action === void 0 ? {} : _ref$action,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+      _ref$callback = _ref.callback,
+      callback = _ref$callback === void 0 ? defaultFunc : _ref$callback;
 
-  var actionLink = _links["default"].getActionLinks()[actionKey];
+  var _useContext = (0, _react.useContext)(_headerContext["default"]),
+      theme = _useContext.theme;
 
-  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
-    var theme = _ref2.theme;
-
-    var _themeFunction = themeFunction(theme),
-        color = _themeFunction.color,
-        bgColor = _themeFunction.bgColor,
-        hoverBgColor = _themeFunction.hoverBgColor;
-
-    return /*#__PURE__*/_react["default"].createElement(ActionContainer, {
-      color: color,
-      direction: direction,
-      isActive: isActive,
-      onClick: callback
-    }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], actionLink, /*#__PURE__*/_react["default"].createElement(ActionItem, {
-      direction: direction,
-      bgColor: bgColor,
-      hoverBgColor: hoverBgColor
-    }, actionLabel)));
-  });
+  var actionKey = action.key;
+  var actionLabel = _actions.ACTION_LABEL[direction][actionKey];
+  var actionLink = (0, _links.getActionLinks)()[actionKey];
+  var buttonType = _actions.ACTION_BUTTON_TYPE[actionKey];
+  var buttonSize = direction === 'column' ? 'L' : 'S';
+  return /*#__PURE__*/_react["default"].createElement(ActionItem, {
+    onClick: callback,
+    direction: direction
+  }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], actionLink, /*#__PURE__*/_react["default"].createElement(StyledPillButton, {
+    text: actionLabel,
+    theme: theme,
+    type: buttonType,
+    size: buttonSize,
+    direction: direction
+  })));
 };
 
 ActionButtonItem.propTypes = {
   action: _propTypes["default"].shape({
-    key: _propTypes["default"].string,
-    active: _propTypes["default"]["boolean"]
+    key: _propTypes["default"].string
   }),
-  direction: _propTypes["default"].string,
-  themeFunction: _propTypes["default"].func,
+  direction: _propTypes["default"].oneOf(['row', 'column']),
   callback: _propTypes["default"].func
 };
-ActionButtonItem.defaultProps = {
-  action: {},
-  direction: 'row',
-  themeFunction: _theme["default"].selectActionButtonTheme,
-  callback: function callback() {}
-};
 
-var ActionButton = function ActionButton(_ref3) {
-  var actions = _ref3.actions,
-      direction = _ref3.direction,
-      rest = _objectWithoutProperties(_ref3, _excluded);
+var ActionButton = function ActionButton(_ref2) {
+  var _ref2$actions = _ref2.actions,
+      actions = _ref2$actions === void 0 ? [] : _ref2$actions,
+      _ref2$direction = _ref2.direction,
+      direction = _ref2$direction === void 0 ? 'row' : _ref2$direction,
+      _ref2$callback = _ref2.callback,
+      callback = _ref2$callback === void 0 ? defaultFunc : _ref2$callback,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
   return /*#__PURE__*/_react["default"].createElement(ActionsContainer, {
     direction: direction
@@ -203,16 +135,9 @@ var ActionButton = function ActionButton(_ref3) {
 };
 
 ActionButton.propTypes = {
-  actions: _propTypes["default"].arrayOf(_propTypes["default"].shape(ActionButtonItem.propTypes)),
-  direction: _propTypes["default"].string,
-  themeFunction: _propTypes["default"].func,
+  actions: _propTypes["default"].arrayOf(ActionButtonItem.propTypes.action),
+  direction: ActionButtonItem.propTypes.direction,
   callback: _propTypes["default"].func
 };
-ActionButton.defaultProps = {
-  actions: [],
-  direction: 'row',
-  themeFunction: _theme["default"].selectActionButtonTheme,
-  callback: function callback() {}
-};
 var _default = ActionButton;
 exports["default"] = _default;

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

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hamburger = exports.transparentTheme = exports.photographyTheme = exports.actionButton = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _actionButton = _interopRequireDefault(require("./action-button"));
+
+var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable react/prop-types */
+var _default = {
+  title: 'Action Button',
+  component: _actionButton["default"],
+  argTypes: {
+    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
+    direction: {
+      defaultValue: 'row',
+      options: ['row', 'column'],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "action-buttonstories__Container",
+  componentId: "dkic70-0"
+})(["max-width:500px;width:100%;"]);
+
+var defaultActions = [{
+  key: 'newsLetter'
+}, {
+  key: 'support'
+}];
+
+var actionButton = function actionButton(props) {
+  var theme = props.theme;
+  var context = {
+    theme: theme
+  };
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
+    value: context
+  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], props)));
+};
+
+exports.actionButton = actionButton;
+actionButton.args = {
+  actions: defaultActions
+};
+
+var photographyTheme = function photographyTheme(props) {
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
+    value: {
+      theme: _theme.THEME.photography
+    }
+  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], props)));
+};
+
+exports.photographyTheme = photographyTheme;
+photographyTheme.args = {
+  actions: defaultActions
+};
+photographyTheme.parameters = {
+  backgrounds: {
+    "default": _theme.THEME.photography
+  },
+  controls: {
+    exclude: ['actions', 'callback', 'theme']
+  }
+};
+
+var transparentTheme = function transparentTheme(props) {
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
+    value: {
+      theme: _theme.THEME.transparent
+    }
+  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], props)));
+};
+
+exports.transparentTheme = transparentTheme;
+transparentTheme.args = {
+  actions: defaultActions
+};
+transparentTheme.parameters = {
+  backgrounds: {
+    "default": _theme.THEME.transparent
+  },
+  controls: {
+    exclude: ['actions', 'callback', 'theme']
+  }
+};
+
+var hamburger = function hamburger(props) {
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
+    value: {
+      theme: _theme.THEME.normal
+    }
+  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], props)));
+};
+
+exports.hamburger = hamburger;
+hamburger.args = {
+  actions: defaultActions,
+  direction: 'column'
+};
+hamburger.parameters = {
+  backgrounds: {
+    "default": 'white'
+  },
+  controls: {
+    exclude: ['actions', 'callback', 'theme']
+  }
+};