@twreporter/universal-header 3.0.3-rc.0 → 3.0.3-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/lib/actions/auth.js +9 -25
- package/lib/actions/error-action-creators.js +6 -20
- package/lib/components/action-button-item.js +41 -71
- package/lib/components/action-button-item.stories.js +7 -24
- package/lib/components/action-button.js +19 -46
- package/lib/components/channels.js +16 -52
- package/lib/components/channels.stories.js +4 -13
- package/lib/components/customized-link.js +3 -16
- package/lib/components/drop-down-menu.js +10 -52
- package/lib/components/hamburger-footer.js +20 -59
- package/lib/components/hamburger-footer.stories.js +5 -21
- package/lib/components/hamburger-menu-item.js +36 -75
- package/lib/components/hamburger-menu-item.stories.js +17 -48
- package/lib/components/hamburger-menu.js +41 -125
- package/lib/components/hamburger-menu.stories.js +4 -16
- package/lib/components/header.js +28 -100
- package/lib/components/header.stories.js +7 -16
- package/lib/components/icons.js +27 -86
- package/lib/components/icons.stories.js +5 -17
- package/lib/components/slogan.js +7 -24
- package/lib/components/slogan.stories.js +3 -12
- package/lib/components/tab-bar.js +21 -48
- package/lib/components/tab-bar.stories.js +4 -16
- package/lib/constants/action-item-types.js +13 -36
- package/lib/constants/action-types.js +2 -3
- package/lib/constants/actions.js +9 -13
- package/lib/constants/categories.js +5 -9
- package/lib/constants/channels.js +16 -27
- package/lib/constants/colors.js +2 -3
- package/lib/constants/external-links.js +1 -2
- package/lib/constants/fonts.js +2 -5
- package/lib/constants/footer.js +11 -18
- package/lib/constants/hamburger-menu.js +2 -3
- package/lib/constants/prop-types.js +5 -12
- package/lib/constants/slogan.js +1 -2
- package/lib/constants/social-media.js +2 -4
- package/lib/constants/theme.js +2 -3
- package/lib/containers/header.js +108 -200
- package/lib/contexts/header-context.js +2 -7
- package/lib/index.js +3 -9
- package/lib/reducers/auth.js +2 -13
- package/lib/reducers/index.js +1 -6
- package/lib/standalone-header.js +14 -45
- package/lib/storybook/constants/index.js +2 -8
- package/lib/storybook/utils/get-enum-arg.js +2 -5
- package/lib/utils/animations.js +2 -9
- package/lib/utils/icon.js +4 -83
- package/lib/utils/jwt.js +3 -10
- package/lib/utils/links.js +10 -55
- package/lib/utils/theme.js +8 -42
- package/package.json +7 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.3-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@3.0.3-rc.1...@twreporter/universal-header@3.0.3-rc.2) (2024-06-19)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @twreporter/universal-header
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [3.0.3-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@3.0.3-rc.0...@twreporter/universal-header@3.0.3-rc.1) (2024-06-18)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @twreporter/universal-header
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [3.0.3-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@3.0.2...@twreporter/universal-header@3.0.3-rc.0) (2024-06-18)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @twreporter/universal-header
|
package/lib/actions/auth.js
CHANGED
|
@@ -5,22 +5,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
exports.getAccessToken = getAccessToken;
|
|
8
|
-
|
|
9
8
|
var _actionTypes = _interopRequireDefault(require("../constants/action-types"));
|
|
10
|
-
|
|
11
9
|
var _axios = _interopRequireDefault(require("axios"));
|
|
12
|
-
|
|
13
10
|
var _errorActionCreators = _interopRequireDefault(require("./error-action-creators"));
|
|
14
|
-
|
|
15
11
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
16
|
-
|
|
17
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
18
|
-
|
|
19
13
|
// lodash
|
|
14
|
+
|
|
20
15
|
var _ = {
|
|
21
16
|
get: _get["default"]
|
|
22
17
|
};
|
|
23
18
|
var timeout = 5000;
|
|
19
|
+
|
|
24
20
|
/**
|
|
25
21
|
* Send POST method request with Cookie in the headers
|
|
26
22
|
* to fetch the access_token.
|
|
@@ -28,7 +24,6 @@ var timeout = 5000;
|
|
|
28
24
|
* @param {string} [cookieList] - cookieList contains `id_token` cookie
|
|
29
25
|
* @return {Function} returned function will get executed by the Redux Thunk middleware
|
|
30
26
|
*/
|
|
31
|
-
|
|
32
27
|
function getAccessToken(cookieList) {
|
|
33
28
|
/**
|
|
34
29
|
* @param {Function} dispatch - Redux store dispatch function
|
|
@@ -37,29 +32,24 @@ function getAccessToken(cookieList) {
|
|
|
37
32
|
*/
|
|
38
33
|
return function (dispatch, getState) {
|
|
39
34
|
var state = getState();
|
|
40
|
-
|
|
41
35
|
var apiOrigin = _.get(state, 'origins.api', '');
|
|
42
|
-
|
|
43
36
|
var url = "".concat(apiOrigin, "/v2/auth/token");
|
|
44
37
|
var headers = {};
|
|
45
|
-
|
|
46
38
|
if (cookieList) {
|
|
47
39
|
headers.Cookie = cookieList;
|
|
48
40
|
}
|
|
49
|
-
|
|
50
41
|
var options = {
|
|
51
42
|
timeout: timeout,
|
|
52
43
|
headers: headers,
|
|
53
44
|
withCredentials: true
|
|
54
45
|
};
|
|
55
|
-
|
|
56
46
|
var interceptor = _axios["default"].interceptors.request.use(function (config) {
|
|
57
47
|
var method = config.method,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
48
|
+
url = config.url,
|
|
49
|
+
headers = config.headers,
|
|
50
|
+
data = config.data,
|
|
51
|
+
withCredentials = config.withCredentials,
|
|
52
|
+
timeout = config.timeout;
|
|
63
53
|
dispatch({
|
|
64
54
|
type: _actionTypes["default"].REQUEST_AUTH,
|
|
65
55
|
payload: {
|
|
@@ -73,12 +63,9 @@ function getAccessToken(cookieList) {
|
|
|
73
63
|
body: data
|
|
74
64
|
}
|
|
75
65
|
});
|
|
76
|
-
|
|
77
66
|
_axios["default"].interceptors.request.eject(interceptor);
|
|
78
|
-
|
|
79
67
|
return config;
|
|
80
68
|
});
|
|
81
|
-
|
|
82
69
|
return _axios["default"].post(url, null, options).then(function (axiosRes) {
|
|
83
70
|
var successAction = {
|
|
84
71
|
type: _actionTypes["default"].AUTH_SUCCESS,
|
|
@@ -92,14 +79,11 @@ function getAccessToken(cookieList) {
|
|
|
92
79
|
return successAction;
|
|
93
80
|
})["catch"](function (err) {
|
|
94
81
|
var failAction = _errorActionCreators["default"].axios(err, _actionTypes["default"].AUTH_FAILURE);
|
|
95
|
-
|
|
96
82
|
dispatch(failAction);
|
|
97
83
|
return Promise.reject(failAction);
|
|
98
84
|
});
|
|
99
85
|
};
|
|
100
86
|
}
|
|
101
|
-
|
|
102
|
-
var _default = {
|
|
87
|
+
var _default = exports["default"] = {
|
|
103
88
|
getAccessToken: getAccessToken
|
|
104
|
-
};
|
|
105
|
-
exports["default"] = _default;
|
|
89
|
+
};
|
|
@@ -4,19 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
|
|
8
7
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
9
|
-
|
|
10
8
|
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
11
|
-
|
|
12
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
|
-
|
|
14
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
15
|
-
|
|
10
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } // lodash
|
|
16
11
|
var _ = {
|
|
17
12
|
get: _get["default"],
|
|
18
13
|
merge: _merge["default"]
|
|
19
14
|
};
|
|
15
|
+
|
|
20
16
|
/**
|
|
21
17
|
* Refine Axios config to remain the infomative properties.
|
|
22
18
|
* @param {Object} axiosConfig - config provied by Axios
|
|
@@ -37,7 +33,6 @@ var _ = {
|
|
|
37
33
|
* For other removed properties,
|
|
38
34
|
* see https://github.com/axios/axios#request-config
|
|
39
35
|
*/
|
|
40
|
-
|
|
41
36
|
function refineAxiosConfig(axiosConfig) {
|
|
42
37
|
if (_typeof(axiosConfig) === 'object' && axiosConfig !== null) {
|
|
43
38
|
return {
|
|
@@ -63,9 +58,9 @@ function refineAxiosConfig(axiosConfig) {
|
|
|
63
58
|
proxy: axiosConfig.proxy
|
|
64
59
|
};
|
|
65
60
|
}
|
|
66
|
-
|
|
67
61
|
return {};
|
|
68
62
|
}
|
|
63
|
+
|
|
69
64
|
/**
|
|
70
65
|
* Axios Error object
|
|
71
66
|
* @typedef {Error} AxiosError
|
|
@@ -101,17 +96,12 @@ function refineAxiosConfig(axiosConfig) {
|
|
|
101
96
|
* @param {AxiosError} err - Axios Error object
|
|
102
97
|
* @return {RefinedAxiosError}
|
|
103
98
|
*/
|
|
104
|
-
|
|
105
|
-
|
|
106
99
|
function refineAxiosError(err) {
|
|
107
100
|
var config = refineAxiosConfig(_.get(err, 'config'));
|
|
108
101
|
var data = null;
|
|
109
102
|
var statusCode = 500; // internal server error
|
|
110
|
-
|
|
111
103
|
var headers = null;
|
|
112
|
-
|
|
113
104
|
var message = _.get(err, 'message');
|
|
114
|
-
|
|
115
105
|
if (err.response) {
|
|
116
106
|
data = _.get(err, 'response.data');
|
|
117
107
|
statusCode = _.get(err, 'response.status');
|
|
@@ -121,7 +111,6 @@ function refineAxiosError(err) {
|
|
|
121
111
|
} else {
|
|
122
112
|
message = 'An error occured when setting up the request: ' + message;
|
|
123
113
|
}
|
|
124
|
-
|
|
125
114
|
var refinedErr = new Error(message);
|
|
126
115
|
refinedErr.name = 'AxiosError';
|
|
127
116
|
refinedErr.data = data;
|
|
@@ -130,6 +119,7 @@ function refineAxiosError(err) {
|
|
|
130
119
|
refinedErr.config = config;
|
|
131
120
|
return refinedErr;
|
|
132
121
|
}
|
|
122
|
+
|
|
133
123
|
/**
|
|
134
124
|
* error action type definition
|
|
135
125
|
* @typedef {Object} ErrorAction
|
|
@@ -143,8 +133,6 @@ function refineAxiosError(err) {
|
|
|
143
133
|
* @param {string} failActionType
|
|
144
134
|
* @returns {ErrorAction}
|
|
145
135
|
*/
|
|
146
|
-
|
|
147
|
-
|
|
148
136
|
function createAxiosErrorAction() {
|
|
149
137
|
var err = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
150
138
|
var failActionType = arguments.length > 1 ? arguments[1] : undefined;
|
|
@@ -155,8 +143,6 @@ function createAxiosErrorAction() {
|
|
|
155
143
|
}
|
|
156
144
|
};
|
|
157
145
|
}
|
|
158
|
-
|
|
159
|
-
var _default = {
|
|
146
|
+
var _default = exports["default"] = {
|
|
160
147
|
axios: createAxiosErrorAction
|
|
161
|
-
};
|
|
162
|
-
exports["default"] = _default;
|
|
148
|
+
};
|
|
@@ -1,78 +1,58 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(
|
|
4
|
-
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
|
|
14
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
|
-
|
|
16
11
|
var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
|
|
17
|
-
|
|
18
12
|
var _links = require("../utils/links");
|
|
19
|
-
|
|
20
13
|
var _actions = require("../constants/actions");
|
|
21
|
-
|
|
22
14
|
var _actionItemTypes = require("../constants/action-item-types");
|
|
23
|
-
|
|
24
15
|
var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
|
|
25
|
-
|
|
26
16
|
var _css = require("@twreporter/core/lib/utils/css");
|
|
27
|
-
|
|
28
17
|
var _button = require("@twreporter/react-components/lib/button");
|
|
29
|
-
|
|
30
18
|
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
31
|
-
|
|
32
19
|
var _map = _interopRequireDefault(require("lodash/map"));
|
|
33
|
-
|
|
34
20
|
var _excluded = ["actions", "direction", "textType", "buttonWidth", "buttonSize", "callback", "isForHambuger"];
|
|
35
|
-
|
|
36
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
37
|
-
|
|
38
|
-
function
|
|
39
|
-
|
|
40
|
-
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; }
|
|
41
|
-
|
|
22
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
23
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
42
24
|
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; }
|
|
43
|
-
|
|
44
25
|
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; }
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
26
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } // util
|
|
27
|
+
// constant
|
|
28
|
+
// @twreporter
|
|
29
|
+
// lodash
|
|
48
30
|
var _ = {
|
|
49
31
|
map: _map["default"]
|
|
50
|
-
};
|
|
32
|
+
};
|
|
51
33
|
|
|
34
|
+
// global var
|
|
52
35
|
var defaultFunc = function defaultFunc() {};
|
|
53
|
-
|
|
54
36
|
var styles = {
|
|
55
37
|
itemMargin: {
|
|
56
38
|
row: [0, 0, 0, 16],
|
|
57
39
|
// px
|
|
58
40
|
column: [16, 0, 0, 0] // px
|
|
59
|
-
|
|
60
41
|
}
|
|
61
42
|
};
|
|
43
|
+
|
|
62
44
|
var StyledPillButton = /*#__PURE__*/(0, _styledComponents["default"])(_button.PillButton).withConfig({
|
|
63
45
|
displayName: "action-button-item__StyledPillButton",
|
|
64
46
|
componentId: "z0zuf3-0"
|
|
65
47
|
})(["justify-content:center;", ""], function (props) {
|
|
66
48
|
return props.$buttonWidth === 'stretch' ? 'width: auto !important;' : '';
|
|
67
49
|
});
|
|
68
|
-
|
|
69
50
|
var ActionItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
70
51
|
displayName: "action-button-item__ActionItem",
|
|
71
52
|
componentId: "z0zuf3-1"
|
|
72
53
|
})(["display:flex;align-items:center;justify-content:center;margin:", ";&:first-child{margin-top:0;margin-left:0;}a{text-decoration:none;}"], function (props) {
|
|
73
54
|
return (0, _css.arrayToCssShorthand)(styles.itemMargin[props.$direction]);
|
|
74
55
|
});
|
|
75
|
-
|
|
76
56
|
var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
77
57
|
displayName: "action-button-item__ActionsContainer",
|
|
78
58
|
componentId: "z0zuf3-2"
|
|
@@ -81,30 +61,26 @@ var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig(
|
|
|
81
61
|
}, ActionItem, function (props) {
|
|
82
62
|
return props.$buttonWidth === 'stretch' ? 'width: 100%;' : '';
|
|
83
63
|
});
|
|
84
|
-
|
|
85
64
|
var ActionButtonItem = function ActionButtonItem(_ref) {
|
|
86
65
|
var _ref$action = _ref.action,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
66
|
+
action = _ref$action === void 0 ? {} : _ref$action,
|
|
67
|
+
_ref$direction = _ref.direction,
|
|
68
|
+
direction = _ref$direction === void 0 ? _actionItemTypes.DIRECTION_TYPE.row : _ref$direction,
|
|
69
|
+
_ref$textType = _ref.textType,
|
|
70
|
+
textType = _ref$textType === void 0 ? _actionItemTypes.TEXT_TYPE.brief : _ref$textType,
|
|
71
|
+
_ref$buttonWidth = _ref.buttonWidth,
|
|
72
|
+
buttonWidth = _ref$buttonWidth === void 0 ? _actionItemTypes.BUTTON_WIDTH_TYPE.fit : _ref$buttonWidth,
|
|
73
|
+
_ref$buttonSize = _ref.buttonSize,
|
|
74
|
+
buttonSize = _ref$buttonSize === void 0 ? _actionItemTypes.BUTTON_SIZE_TYPE.S : _ref$buttonSize,
|
|
75
|
+
_ref$callback = _ref.callback,
|
|
76
|
+
callback = _ref$callback === void 0 ? defaultFunc : _ref$callback,
|
|
77
|
+
_ref$isForHambuger = _ref.isForHambuger,
|
|
78
|
+
isForHambuger = _ref$isForHambuger === void 0 ? false : _ref$isForHambuger;
|
|
101
79
|
var _useContext = (0, _react.useContext)(_headerContext["default"]),
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
80
|
+
theme = _useContext.theme,
|
|
81
|
+
isLinkExternal = _useContext.isLinkExternal,
|
|
82
|
+
releaseBranch = _useContext.releaseBranch;
|
|
106
83
|
var buttonTheme;
|
|
107
|
-
|
|
108
84
|
if (isForHambuger) {
|
|
109
85
|
if (theme === _theme.THEME.transparent) {
|
|
110
86
|
buttonTheme = _theme.THEME.normal;
|
|
@@ -114,7 +90,6 @@ var ActionButtonItem = function ActionButtonItem(_ref) {
|
|
|
114
90
|
} else {
|
|
115
91
|
buttonTheme = theme;
|
|
116
92
|
}
|
|
117
|
-
|
|
118
93
|
var actionKey = action.key;
|
|
119
94
|
var actionId = action.id;
|
|
120
95
|
var actionLabel = _actions.ACTION_LABEL[textType][actionKey];
|
|
@@ -133,7 +108,6 @@ var ActionButtonItem = function ActionButtonItem(_ref) {
|
|
|
133
108
|
$buttonWidth: buttonWidth
|
|
134
109
|
})));
|
|
135
110
|
};
|
|
136
|
-
|
|
137
111
|
ActionButtonItem.propTypes = {
|
|
138
112
|
action: _propTypes["default"].shape({
|
|
139
113
|
key: _propTypes["default"].string
|
|
@@ -145,24 +119,22 @@ ActionButtonItem.propTypes = {
|
|
|
145
119
|
callback: _propTypes["default"].func,
|
|
146
120
|
isForHambuger: _propTypes["default"].bool
|
|
147
121
|
};
|
|
148
|
-
|
|
149
122
|
var ActionButton = function ActionButton(_ref2) {
|
|
150
123
|
var _ref2$actions = _ref2.actions,
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
124
|
+
actions = _ref2$actions === void 0 ? [] : _ref2$actions,
|
|
125
|
+
_ref2$direction = _ref2.direction,
|
|
126
|
+
direction = _ref2$direction === void 0 ? _actionItemTypes.DIRECTION_TYPE.row : _ref2$direction,
|
|
127
|
+
_ref2$textType = _ref2.textType,
|
|
128
|
+
textType = _ref2$textType === void 0 ? _actionItemTypes.TEXT_TYPE.brief : _ref2$textType,
|
|
129
|
+
_ref2$buttonWidth = _ref2.buttonWidth,
|
|
130
|
+
buttonWidth = _ref2$buttonWidth === void 0 ? _actionItemTypes.BUTTON_WIDTH_TYPE.fit : _ref2$buttonWidth,
|
|
131
|
+
_ref2$buttonSize = _ref2.buttonSize,
|
|
132
|
+
buttonSize = _ref2$buttonSize === void 0 ? _actionItemTypes.BUTTON_SIZE_TYPE.S : _ref2$buttonSize,
|
|
133
|
+
_ref2$callback = _ref2.callback,
|
|
134
|
+
callback = _ref2$callback === void 0 ? defaultFunc : _ref2$callback,
|
|
135
|
+
_ref2$isForHambuger = _ref2.isForHambuger,
|
|
136
|
+
isForHambuger = _ref2$isForHambuger === void 0 ? false : _ref2$isForHambuger,
|
|
137
|
+
rest = _objectWithoutProperties(_ref2, _excluded);
|
|
166
138
|
return /*#__PURE__*/_react["default"].createElement(ActionsContainer, _extends({
|
|
167
139
|
$direction: direction,
|
|
168
140
|
$buttonWidth: buttonWidth
|
|
@@ -179,7 +151,6 @@ var ActionButton = function ActionButton(_ref2) {
|
|
|
179
151
|
});
|
|
180
152
|
}));
|
|
181
153
|
};
|
|
182
|
-
|
|
183
154
|
ActionButton.propTypes = {
|
|
184
155
|
actions: _propTypes["default"].arrayOf(ActionButtonItem.propTypes.action),
|
|
185
156
|
direction: ActionButtonItem.propTypes.direction,
|
|
@@ -189,5 +160,4 @@ ActionButton.propTypes = {
|
|
|
189
160
|
callback: _propTypes["default"].func,
|
|
190
161
|
isForHambuger: _propTypes["default"].bool
|
|
191
162
|
};
|
|
192
|
-
var _default = ActionButton;
|
|
193
|
-
exports["default"] = _default;
|
|
163
|
+
var _default = exports["default"] = ActionButton;
|
|
@@ -4,26 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.transparentTheme = exports.photographyTheme = exports.hamburger = exports["default"] = exports.actionButton = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
-
|
|
12
9
|
var _actionButtonItem = _interopRequireDefault(require("./action-button-item"));
|
|
13
|
-
|
|
14
10
|
var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
|
|
15
|
-
|
|
16
11
|
var _actionItemTypes = require("../constants/action-item-types");
|
|
17
|
-
|
|
18
12
|
var _constants = require("../storybook/constants");
|
|
19
|
-
|
|
20
13
|
var _theme = require("@twreporter/core/lib/constants/theme");
|
|
21
|
-
|
|
22
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
var _default = {
|
|
15
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } /* eslint-disable react/prop-types */ /* eslint react/display-name:0 */
|
|
16
|
+
var _default = exports["default"] = {
|
|
27
17
|
title: 'Action Button',
|
|
28
18
|
component: _actionButtonItem["default"],
|
|
29
19
|
argTypes: {
|
|
@@ -34,19 +24,16 @@ var _default = {
|
|
|
34
24
|
buttonSize: _actionItemTypes.BUTTON_SIZE_STORYBOOK_ARG_TYPE
|
|
35
25
|
}
|
|
36
26
|
};
|
|
37
|
-
exports["default"] = _default;
|
|
38
|
-
|
|
39
27
|
var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
40
28
|
displayName: "action-button-itemstories__Container",
|
|
41
29
|
componentId: "sc-1bpjnxr-0"
|
|
42
30
|
})(["max-width:500px;width:100%;"]);
|
|
43
|
-
|
|
44
31
|
var defaultActions = [{
|
|
45
32
|
key: 'newsLetter'
|
|
46
33
|
}, {
|
|
47
34
|
key: 'support'
|
|
48
35
|
}];
|
|
49
|
-
var actionButton = {
|
|
36
|
+
var actionButton = exports.actionButton = {
|
|
50
37
|
render: function render(props) {
|
|
51
38
|
var theme = props.theme;
|
|
52
39
|
var context = {
|
|
@@ -61,8 +48,7 @@ var actionButton = {
|
|
|
61
48
|
actions: defaultActions
|
|
62
49
|
}
|
|
63
50
|
};
|
|
64
|
-
exports.
|
|
65
|
-
var photographyTheme = {
|
|
51
|
+
var photographyTheme = exports.photographyTheme = {
|
|
66
52
|
render: function render(props) {
|
|
67
53
|
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
68
54
|
value: {
|
|
@@ -83,8 +69,7 @@ var photographyTheme = {
|
|
|
83
69
|
}
|
|
84
70
|
}
|
|
85
71
|
};
|
|
86
|
-
exports.
|
|
87
|
-
var transparentTheme = {
|
|
72
|
+
var transparentTheme = exports.transparentTheme = {
|
|
88
73
|
render: function render(props) {
|
|
89
74
|
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
90
75
|
value: {
|
|
@@ -105,8 +90,7 @@ var transparentTheme = {
|
|
|
105
90
|
}
|
|
106
91
|
}
|
|
107
92
|
};
|
|
108
|
-
exports.
|
|
109
|
-
var hamburger = {
|
|
93
|
+
var hamburger = exports.hamburger = {
|
|
110
94
|
render: function render(props) {
|
|
111
95
|
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
112
96
|
value: {
|
|
@@ -132,5 +116,4 @@ var hamburger = {
|
|
|
132
116
|
exclude: ['actions', 'callback', 'direction', 'textType', 'buttonWidth', 'buttonSize']
|
|
133
117
|
}
|
|
134
118
|
}
|
|
135
|
-
};
|
|
136
|
-
exports.hamburger = hamburger;
|
|
119
|
+
};
|
|
@@ -1,70 +1,50 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(
|
|
4
|
-
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.MobileHeaderAction = exports.MobileHamburgerAction = exports.DesktopHeaderAction = exports.DesktopHamburgerAction = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
9
|
var _actions = require("../constants/actions");
|
|
13
|
-
|
|
14
10
|
var _actionItemTypes = require("../constants/action-item-types");
|
|
15
|
-
|
|
16
11
|
var _headerContext = require("../contexts/header-context");
|
|
17
|
-
|
|
18
12
|
var _actionButtonItem = _interopRequireDefault(require("./action-button-item"));
|
|
19
|
-
|
|
20
13
|
var _map = _interopRequireDefault(require("lodash/map"));
|
|
21
|
-
|
|
22
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
|
-
|
|
24
|
-
function
|
|
25
|
-
|
|
26
|
-
function
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
17
|
+
function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
|
|
18
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } // constant
|
|
19
|
+
// context
|
|
20
|
+
// components
|
|
21
|
+
// lodash
|
|
30
22
|
var _ = {
|
|
31
23
|
map: _map["default"]
|
|
32
24
|
};
|
|
33
|
-
|
|
34
25
|
var getActionProps = function getActionProps(type) {
|
|
35
26
|
return _.map(_actions.ACTION_ORDER[type], function (item) {
|
|
36
27
|
return item;
|
|
37
28
|
});
|
|
38
29
|
};
|
|
39
|
-
|
|
40
|
-
var
|
|
41
|
-
var props = _extends({}, _ref);
|
|
42
|
-
|
|
30
|
+
var DesktopHeaderAction = exports.DesktopHeaderAction = function DesktopHeaderAction(_ref) {
|
|
31
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
43
32
|
var actionProps = getActionProps('desktop');
|
|
44
33
|
return /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], _extends({
|
|
45
34
|
actions: actionProps
|
|
46
35
|
}, props));
|
|
47
36
|
};
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
var MobileHeaderAction = function MobileHeaderAction(_ref2) {
|
|
52
|
-
var props = _extends({}, _ref2);
|
|
53
|
-
|
|
37
|
+
var MobileHeaderAction = exports.MobileHeaderAction = function MobileHeaderAction(_ref2) {
|
|
38
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
|
|
54
39
|
var actionProps = getActionProps('mobile');
|
|
55
40
|
return /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], _extends({
|
|
56
41
|
actions: actionProps
|
|
57
42
|
}, props));
|
|
58
43
|
};
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
var DesktopHamburgerAction = function DesktopHamburgerAction(_ref3) {
|
|
63
|
-
var props = _extends({}, _ref3);
|
|
64
|
-
|
|
44
|
+
var DesktopHamburgerAction = exports.DesktopHamburgerAction = function DesktopHamburgerAction(_ref3) {
|
|
45
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
|
|
65
46
|
var _useContext = (0, _react.useContext)(_headerContext.HamburgerContext),
|
|
66
|
-
|
|
67
|
-
|
|
47
|
+
closeHamburgerMenu = _useContext.closeHamburgerMenu;
|
|
68
48
|
var actionProps = getActionProps('hamburger');
|
|
69
49
|
return /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], _extends({
|
|
70
50
|
actions: actionProps,
|
|
@@ -76,15 +56,10 @@ var DesktopHamburgerAction = function DesktopHamburgerAction(_ref3) {
|
|
|
76
56
|
callback: closeHamburgerMenu
|
|
77
57
|
}, props));
|
|
78
58
|
};
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
var MobileHamburgerAction = function MobileHamburgerAction(_ref4) {
|
|
83
|
-
var props = _extends({}, _ref4);
|
|
84
|
-
|
|
59
|
+
var MobileHamburgerAction = exports.MobileHamburgerAction = function MobileHamburgerAction(_ref4) {
|
|
60
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
|
|
85
61
|
var _useContext2 = (0, _react.useContext)(_headerContext.HamburgerContext),
|
|
86
|
-
|
|
87
|
-
|
|
62
|
+
closeHamburgerMenu = _useContext2.closeHamburgerMenu;
|
|
88
63
|
var actionProps = getActionProps('hamburger');
|
|
89
64
|
return /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], _extends({
|
|
90
65
|
actions: actionProps,
|
|
@@ -94,6 +69,4 @@ var MobileHamburgerAction = function MobileHamburgerAction(_ref4) {
|
|
|
94
69
|
isForHambuger: true,
|
|
95
70
|
callback: closeHamburgerMenu
|
|
96
71
|
}, props));
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
exports.MobileHamburgerAction = MobileHamburgerAction;
|
|
72
|
+
};
|