@twreporter/universal-header 2.4.0-rc.5 → 2.4.0-rc.7

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 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.7](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.4.0-rc.6...@twreporter/universal-header@2.4.0-rc.7) (2022-11-25)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
+# [2.4.0-rc.6](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.4.0-rc.5...@twreporter/universal-header@2.4.0-rc.6) (2022-11-25)
+
+
+### Bug Fixes
+
+* add constants file to manage prop types ([4841e86](https://github.com/twreporter/twreporter-npm-packages/commit/4841e868cad52cfd2168f0c146de30950e27c996))
+* move action button storybook arg types in constants ([c4c066f](https://github.com/twreporter/twreporter-npm-packages/commit/c4c066f540628686478d44662a7c177021f52c59))
+* remove unnecessary parantheses ([13df7e4](https://github.com/twreporter/twreporter-npm-packages/commit/13df7e49084d1e2f895ee7ebce4349c77a0810c2))
+* update `latest` page path ([a592546](https://github.com/twreporter/twreporter-npm-packages/commit/a5925467548d33179b8b9122f0c3c83ad61e1fcd))
+
+
+### Features
+
+* add mobile & tablet view for new info structure ([b0e158c](https://github.com/twreporter/twreporter-npm-packages/commit/b0e158c751230723626c9cb9de83641f0588c189))
+
+
+
+
+
 # [2.4.0-rc.5](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.4.0-rc.4...@twreporter/universal-header@2.4.0-rc.5) (2022-11-07)
 
 

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

@@ -0,0 +1,169 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+
+var _links = require("../utils/links");
+
+var _actions = require("../constants/actions");
+
+var _actionItemTypes = require("../constants/action-item-types");
+
+var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
+
+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", "textType", "buttonWidth", "buttonSize", "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; }
+
+var _ = {
+  map: _map["default"]
+}; // global var
+
+var defaultFunc = function defaultFunc() {};
+
+var styles = {
+  itemMargin: {
+    row: [0, 0, 0, 16],
+    // px
+    column: [16, 0, 0, 0] // px
+
+  }
+};
+var StyledPillButton = /*#__PURE__*/(0, _styledComponents["default"])(_button.PillButton).withConfig({
+  displayName: "action-button-item__StyledPillButton",
+  componentId: "z0zuf3-0"
+})(["justify-content:center;", ""], function (props) {
+  return props.buttonWidth === 'stretch' ? 'width: auto;' : '';
+});
+
+var ActionItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "action-button-item__ActionItem",
+  componentId: "z0zuf3-1"
+})(["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]);
+});
+
+var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "action-button-item__ActionsContainer",
+  componentId: "z0zuf3-2"
+})(["display:flex;align-items:center;flex-direction:", ";&,", ",a{", "}"], function (props) {
+  return props.direction;
+}, ActionItem, function (props) {
+  return props.buttonWidth === 'stretch' ? 'width: 100%;' : '';
+});
+
+var ActionButtonItem = function ActionButtonItem(_ref) {
+  var _ref$action = _ref.action,
+      action = _ref$action === void 0 ? {} : _ref$action,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? _actionItemTypes.DIRECTION_TYPE.row : _ref$direction,
+      _ref$textType = _ref.textType,
+      textType = _ref$textType === void 0 ? _actionItemTypes.TEXT_TYPE.brief : _ref$textType,
+      _ref$buttonWidth = _ref.buttonWidth,
+      buttonWidth = _ref$buttonWidth === void 0 ? _actionItemTypes.BUTTON_WIDTH_TYPE.fit : _ref$buttonWidth,
+      _ref$buttonSize = _ref.buttonSize,
+      buttonSize = _ref$buttonSize === void 0 ? _actionItemTypes.BUTTON_SIZE_TYPE.S : _ref$buttonSize,
+      _ref$callback = _ref.callback,
+      callback = _ref$callback === void 0 ? defaultFunc : _ref$callback;
+
+  var _useContext = (0, _react.useContext)(_headerContext["default"]),
+      theme = _useContext.theme;
+
+  var buttonTheme = direction === _actionItemTypes.DIRECTION_TYPE.row || theme === _theme.THEME.photography ? theme : _theme.THEME.noraml;
+  var actionKey = action.key;
+  var actionLabel = _actions.ACTION_LABEL[textType][actionKey];
+  var actionLink = (0, _links.getActionLinks)()[actionKey];
+  var buttonType = _actions.ACTION_BUTTON_TYPE[actionKey];
+  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: buttonTheme,
+    type: buttonType,
+    size: buttonSize,
+    buttonWidth: buttonWidth
+  })));
+};
+
+ActionButtonItem.propTypes = {
+  action: _propTypes["default"].shape({
+    key: _propTypes["default"].string
+  }),
+  direction: _actionItemTypes.DIRECTION_PROP_TYPE,
+  textType: _actionItemTypes.TEXT_PROP_TYPE,
+  buttonWidth: _actionItemTypes.BUTTON_WIDTH_PROP_TYPE,
+  buttonSize: _actionItemTypes.BUTTON_SIZE_PROP_TYPE,
+  callback: _propTypes["default"].func
+};
+
+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 ? _actionItemTypes.DIRECTION_TYPE.row : _ref2$direction,
+      _ref2$textType = _ref2.textType,
+      textType = _ref2$textType === void 0 ? _actionItemTypes.TEXT_TYPE.brief : _ref2$textType,
+      _ref2$buttonWidth = _ref2.buttonWidth,
+      buttonWidth = _ref2$buttonWidth === void 0 ? _actionItemTypes.BUTTON_WIDTH_TYPE.fit : _ref2$buttonWidth,
+      _ref2$buttonSize = _ref2.buttonSize,
+      buttonSize = _ref2$buttonSize === void 0 ? _actionItemTypes.BUTTON_SIZE_TYPE.S : _ref2$buttonSize,
+      _ref2$callback = _ref2.callback,
+      callback = _ref2$callback === void 0 ? defaultFunc : _ref2$callback,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(ActionsContainer, _extends({
+    direction: direction,
+    buttonWidth: buttonWidth
+  }, rest), _.map(actions, function (action) {
+    return /*#__PURE__*/_react["default"].createElement(ActionButtonItem, {
+      action: action,
+      direction: direction,
+      textType: textType,
+      buttonWidth: buttonWidth,
+      buttonSize: buttonSize,
+      key: action.key
+    });
+  }));
+};
+
+ActionButton.propTypes = {
+  actions: _propTypes["default"].arrayOf(ActionButtonItem.propTypes.action),
+  direction: ActionButtonItem.propTypes.direction,
+  textType: ActionButtonItem.propTypes.textType,
+  buttonWidth: ActionButtonItem.propTypes.buttonWidth,
+  buttonSize: ActionButtonItem.propTypes.buttonSize,
+  callback: _propTypes["default"].func
+};
+var _default = ActionButton;
+exports["default"] = _default;

package/lib/components/{action-button.stories.js → action-button-item.stories.js}

@@ -9,10 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _actionButton = _interopRequireDefault(require("./action-button"));
+var _actionButtonItem = _interopRequireDefault(require("./action-button-item"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
+var _actionItemTypes = require("../constants/action-item-types");
+
 var _theme = require("@twreporter/core/lib/constants/theme");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -20,23 +22,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 /* eslint-disable react/prop-types */
 var _default = {
   title: 'Action Button',
-  component: _actionButton["default"],
+  component: _actionButtonItem["default"],
   argTypes: {
     theme: _theme.THEME_STORYBOOK_ARG_TYPE,
-    direction: {
-      defaultValue: 'row',
-      options: ['row', 'column'],
-      control: {
-        type: 'radio'
-      }
-    }
+    direction: _actionItemTypes.DIRECTION_STORYBOOK_ARG_TYPE,
+    textType: _actionItemTypes.TEXT_STORYBOOK_ARG_TYPE,
+    buttonWidth: _actionItemTypes.BUTTON_WIDTH_STORYBOOK_ARG_TYPE,
+    buttonSize: _actionItemTypes.BUTTON_SIZE_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;
 
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "action-buttonstories__Container",
-  componentId: "dkic70-0"
+  displayName: "action-button-itemstories__Container",
+  componentId: "sc-1bpjnxr-0"
 })(["max-width:500px;width:100%;"]);
 
 var defaultActions = [{
@@ -52,7 +51,7 @@ var actionButton = function actionButton(props) {
   };
   return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
     value: context
-  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], props)));
+  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], props)));
 };
 
 exports.actionButton = actionButton;
@@ -65,7 +64,7 @@ var photographyTheme = function photographyTheme(props) {
     value: {
       theme: _theme.THEME.photography
     }
-  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], props)));
+  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], props)));
 };
 
 exports.photographyTheme = photographyTheme;
@@ -86,7 +85,7 @@ var transparentTheme = function transparentTheme(props) {
     value: {
       theme: _theme.THEME.transparent
     }
-  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], props)));
+  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], props)));
 };
 
 exports.transparentTheme = transparentTheme;
@@ -105,21 +104,24 @@ transparentTheme.parameters = {
 var hamburger = function hamburger(props) {
   return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
     value: {
-      theme: _theme.THEME.normal
+      theme: props.theme
     }
-  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], props)));
+  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], props)));
 };
 
 exports.hamburger = hamburger;
 hamburger.args = {
   actions: defaultActions,
-  direction: 'column'
+  direction: _actionItemTypes.DIRECTION_TYPE.column,
+  textType: _actionItemTypes.TEXT_TYPE.full,
+  buttonWidth: _actionItemTypes.BUTTON_WIDTH_TYPE.stretch,
+  buttonSize: _actionItemTypes.BUTTON_SIZE_TYPE.L
 };
 hamburger.parameters = {
   backgrounds: {
     "default": 'white'
   },
   controls: {
-    exclude: ['actions', 'callback', 'theme']
+    exclude: ['actions', 'callback', 'direction', 'textType', 'buttonWidth', 'buttonSize']
   }
 };

package/lib/components/action-button.js

@@ -1,146 +1,83 @@
 "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 _propTypes = _interopRequireDefault(require("prop-types"));
+exports.MobileHamburgerAction = exports.DesktopHamburgerAction = exports.MobileHeaderAction = exports.DesktopHeaderAction = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
-
-var _links = require("../utils/links");
+var _react = _interopRequireDefault(require("react"));
 
 var _actions = require("../constants/actions");
 
-var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
-
-var _css = require("@twreporter/core/lib/utils/css");
+var _actionItemTypes = require("../constants/action-item-types");
 
-var _button = require("@twreporter/react-components/lib/button");
-
-var _theme = require("@twreporter/core/lib/constants/theme");
+var _actionButtonItem = _interopRequireDefault(require("./action-button-item"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-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; }
-
 var _ = {
   map: _map["default"]
-}; // global var
+};
 
-var defaultFunc = function defaultFunc() {};
+var getActionProps = function getActionProps(type) {
+  return _.map(_actions.ACTION_ORDER[type], function (key) {
+    return {
+      key: key
+    };
+  });
+};
 
-var styles = {
-  itemMargin: {
-    row: [0, 0, 0, 16],
-    // px
-    column: [16, 0, 0, 0] // px
+var DesktopHeaderAction = function DesktopHeaderAction(_ref) {
+  var props = _extends({}, _ref);
 
-  }
+  var actionProps = getActionProps('desktop');
+  return /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], _extends({
+    actions: actionProps
+  }, props));
 };
-var StyledPillButton = /*#__PURE__*/(0, _styledComponents["default"])(_button.PillButton).withConfig({
-  displayName: "action-button__StyledPillButton",
-  componentId: "sc-4wc24t-0"
-})(["justify-content:center;", ""], function (props) {
-  return props.direction === 'column' ? 'width: auto;' : '';
-});
 
-var ActionItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "action-button__ActionItem",
-  componentId: "sc-4wc24t-1"
-})(["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]);
-});
+exports.DesktopHeaderAction = DesktopHeaderAction;
 
-var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "action-button__ActionsContainer",
-  componentId: "sc-4wc24t-2"
-})(["display:flex;align-items:center;flex-direction:", ";&,", ",a{", "}"], function (props) {
-  return props.direction;
-}, ActionItem, function (props) {
-  return props.direction === 'column' ? 'width: 100%;' : '';
-});
+var MobileHeaderAction = function MobileHeaderAction(_ref2) {
+  var props = _extends({}, _ref2);
 
-var ActionButtonItem = function ActionButtonItem(_ref) {
-  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 _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];
-  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: buttonTheme,
-    type: buttonType,
-    size: buttonSize,
-    direction: direction
-  })));
+  var actionProps = getActionProps('mobile');
+  return /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], _extends({
+    actions: actionProps
+  }, props));
 };
 
-ActionButtonItem.propTypes = {
-  action: _propTypes["default"].shape({
-    key: _propTypes["default"].string
-  }),
-  direction: _propTypes["default"].oneOf(['row', 'column']),
-  callback: _propTypes["default"].func
-};
+exports.MobileHeaderAction = MobileHeaderAction;
+
+var DesktopHamburgerAction = function DesktopHamburgerAction(_ref3) {
+  var props = _extends({}, _ref3);
 
-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, _extends({
-    direction: direction
-  }, rest), _.map(actions, function (action) {
-    return /*#__PURE__*/_react["default"].createElement(ActionButtonItem, {
-      action: action,
-      direction: direction,
-      key: action.key
-    });
-  }));
+  var actionProps = getActionProps('hamburger');
+  return /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], _extends({
+    actions: actionProps,
+    direction: _actionItemTypes.DIRECTION_TYPE.column,
+    textType: _actionItemTypes.TEXT_TYPE.full,
+    buttonWidth: _actionItemTypes.BUTTON_WIDTH_TYPE.stretch,
+    buttonSize: _actionItemTypes.BUTTON_SIZE_TYPE.L
+  }, props));
 };
 
-ActionButton.propTypes = {
-  actions: _propTypes["default"].arrayOf(ActionButtonItem.propTypes.action),
-  direction: ActionButtonItem.propTypes.direction,
-  callback: _propTypes["default"].func
+exports.DesktopHamburgerAction = DesktopHamburgerAction;
+
+var MobileHamburgerAction = function MobileHamburgerAction(_ref4) {
+  var props = _extends({}, _ref4);
+
+  var actionProps = getActionProps('hamburger');
+  return /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], _extends({
+    actions: actionProps,
+    textType: _actionItemTypes.TEXT_TYPE.full,
+    buttonWidth: _actionItemTypes.BUTTON_WIDTH_TYPE.stretch,
+    buttonSize: _actionItemTypes.BUTTON_SIZE_TYPE.L
+  }, props));
 };
-var _default = ActionButton;
-exports["default"] = _default;
+
+exports.MobileHamburgerAction = MobileHamburgerAction;