@twreporter/universal-header 2.7.4-rc.3 → 2.8.0-rc.1
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 +19 -0
- package/lib/components/action-button-item.stories.js +72 -72
- package/lib/components/channels.stories.js +15 -13
- package/lib/components/hamburger-footer.stories.js +25 -22
- package/lib/components/hamburger-menu-item.stories.js +77 -76
- package/lib/components/hamburger-menu.stories.js +24 -21
- package/lib/components/header.stories.js +27 -25
- package/lib/components/icons.stories.js +17 -14
- package/lib/components/slogan.stories.js +12 -10
- package/lib/components/tab-bar.stories.js +15 -12
- package/package.json +17 -14
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
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
|
+
# [2.8.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.8.0-rc.0...@twreporter/universal-header@2.8.0-rc.1) (2023-11-14)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @twreporter/universal-header
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [2.8.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.7.4-rc.3...@twreporter/universal-header@2.8.0-rc.0) (2023-11-14)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* upgrade universal-header storybook to v7 ([0590db4](https://github.com/twreporter/twreporter-npm-packages/commit/0590db47349a17b619447ac3409c6b0b3dc344a8))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [2.7.4-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.7.4-rc.2...@twreporter/universal-header@2.7.4-rc.3) (2023-11-13)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @twreporter/universal-header
|
|
@@ -46,87 +46,87 @@ var defaultActions = [{
|
|
|
46
46
|
}, {
|
|
47
47
|
key: 'support'
|
|
48
48
|
}];
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
49
|
+
var actionButton = {
|
|
50
|
+
render: function render(props) {
|
|
51
|
+
var theme = props.theme;
|
|
52
|
+
var context = {
|
|
53
|
+
theme: theme
|
|
54
|
+
};
|
|
55
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
56
|
+
value: context
|
|
57
|
+
}, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], props)));
|
|
58
|
+
},
|
|
59
|
+
args: {
|
|
60
|
+
actions: defaultActions
|
|
61
|
+
}
|
|
58
62
|
};
|
|
59
|
-
|
|
60
63
|
exports.actionButton = actionButton;
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
var photographyTheme = {
|
|
65
|
+
render: function render(props) {
|
|
66
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
67
|
+
value: {
|
|
68
|
+
theme: _theme.THEME.photography
|
|
69
|
+
}
|
|
70
|
+
}, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], props)));
|
|
71
|
+
},
|
|
72
|
+
args: {
|
|
73
|
+
actions: defaultActions
|
|
74
|
+
},
|
|
75
|
+
parameters: {
|
|
76
|
+
backgrounds: {
|
|
77
|
+
"default": _theme.THEME.photography
|
|
78
|
+
},
|
|
79
|
+
controls: {
|
|
80
|
+
exclude: ['actions', 'callback', 'theme']
|
|
69
81
|
}
|
|
70
|
-
}
|
|
82
|
+
}
|
|
71
83
|
};
|
|
72
|
-
|
|
73
84
|
exports.photographyTheme = photographyTheme;
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
85
|
+
var transparentTheme = {
|
|
86
|
+
render: function render(props) {
|
|
87
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
88
|
+
value: {
|
|
89
|
+
theme: _theme.THEME.transparent
|
|
90
|
+
}
|
|
91
|
+
}, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], props)));
|
|
80
92
|
},
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
93
|
+
args: {
|
|
94
|
+
actions: defaultActions
|
|
95
|
+
},
|
|
96
|
+
parameters: {
|
|
97
|
+
backgrounds: {
|
|
98
|
+
"default": _theme.THEME.transparent
|
|
99
|
+
},
|
|
100
|
+
controls: {
|
|
101
|
+
exclude: ['actions', 'callback', 'theme']
|
|
90
102
|
}
|
|
91
|
-
}
|
|
103
|
+
}
|
|
92
104
|
};
|
|
93
|
-
|
|
94
105
|
exports.transparentTheme = transparentTheme;
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
106
|
+
var hamburger = {
|
|
107
|
+
render: function render(props) {
|
|
108
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
109
|
+
value: {
|
|
110
|
+
theme: props.theme
|
|
111
|
+
}
|
|
112
|
+
}, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], _extends({
|
|
113
|
+
isForHambuger: true
|
|
114
|
+
}, props))));
|
|
101
115
|
},
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
109
|
-
value: {
|
|
110
|
-
theme: props.theme
|
|
111
|
-
}
|
|
112
|
-
}, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_actionButtonItem["default"], _extends({
|
|
113
|
-
isForHambuger: true
|
|
114
|
-
}, props))));
|
|
115
|
-
};
|
|
116
|
-
|
|
117
|
-
exports.hamburger = hamburger;
|
|
118
|
-
hamburger.args = {
|
|
119
|
-
actions: defaultActions,
|
|
120
|
-
direction: _actionItemTypes.DIRECTION_TYPE.column,
|
|
121
|
-
textType: _actionItemTypes.TEXT_TYPE.full,
|
|
122
|
-
buttonWidth: _actionItemTypes.BUTTON_WIDTH_TYPE.stretch,
|
|
123
|
-
buttonSize: _actionItemTypes.BUTTON_SIZE_TYPE.L
|
|
124
|
-
};
|
|
125
|
-
hamburger.parameters = {
|
|
126
|
-
backgrounds: {
|
|
127
|
-
"default": 'white'
|
|
116
|
+
args: {
|
|
117
|
+
actions: defaultActions,
|
|
118
|
+
direction: _actionItemTypes.DIRECTION_TYPE.column,
|
|
119
|
+
textType: _actionItemTypes.TEXT_TYPE.full,
|
|
120
|
+
buttonWidth: _actionItemTypes.BUTTON_WIDTH_TYPE.stretch,
|
|
121
|
+
buttonSize: _actionItemTypes.BUTTON_SIZE_TYPE.L
|
|
128
122
|
},
|
|
129
|
-
|
|
130
|
-
|
|
123
|
+
parameters: {
|
|
124
|
+
backgrounds: {
|
|
125
|
+
"default": 'white'
|
|
126
|
+
},
|
|
127
|
+
controls: {
|
|
128
|
+
exclude: ['actions', 'callback', 'direction', 'textType', 'buttonWidth', 'buttonSize']
|
|
129
|
+
}
|
|
131
130
|
}
|
|
132
|
-
};
|
|
131
|
+
};
|
|
132
|
+
exports.hamburger = hamburger;
|
|
@@ -16,6 +16,8 @@ var _constants = require("../storybook/constants");
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
17
|
|
|
18
18
|
/* eslint-disable react/prop-types */
|
|
19
|
+
|
|
20
|
+
/* eslint react/display-name:0 */
|
|
19
21
|
var _default = {
|
|
20
22
|
title: 'Channel',
|
|
21
23
|
component: _channels["default"],
|
|
@@ -25,18 +27,18 @@ var _default = {
|
|
|
25
27
|
}
|
|
26
28
|
};
|
|
27
29
|
exports["default"] = _default;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
30
|
+
var channel = {
|
|
31
|
+
render: function render(props) {
|
|
32
|
+
var theme = props.theme,
|
|
33
|
+
releaseBranch = props.releaseBranch;
|
|
34
|
+
var context = {
|
|
35
|
+
theme: theme,
|
|
36
|
+
releaseBranch: releaseBranch,
|
|
37
|
+
isLinkExternal: true
|
|
38
|
+
};
|
|
39
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
40
|
+
value: context
|
|
41
|
+
}, /*#__PURE__*/_react["default"].createElement(_channels["default"], null));
|
|
42
|
+
}
|
|
40
43
|
};
|
|
41
|
-
|
|
42
44
|
exports.channel = channel;
|
|
@@ -20,6 +20,8 @@ var _constants = require("../storybook/constants");
|
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
21
21
|
|
|
22
22
|
/* eslint-disable react/prop-types */
|
|
23
|
+
|
|
24
|
+
/* eslint react/display-name:0 */
|
|
23
25
|
var _default = {
|
|
24
26
|
title: 'Hamburger/Footer',
|
|
25
27
|
component: _hamburgerFooter["default"],
|
|
@@ -48,28 +50,29 @@ var getBgColor = function getBgColor(theme) {
|
|
|
48
50
|
};
|
|
49
51
|
};
|
|
50
52
|
|
|
51
|
-
var footer =
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
var _getBgColor = getBgColor(theme),
|
|
61
|
-
bgColor = _getBgColor.bgColor;
|
|
53
|
+
var footer = {
|
|
54
|
+
render: function render(props) {
|
|
55
|
+
var theme = props.theme,
|
|
56
|
+
releaseBranch = props.releaseBranch;
|
|
57
|
+
var context = {
|
|
58
|
+
theme: theme,
|
|
59
|
+
releaseBranch: releaseBranch,
|
|
60
|
+
isLinkExternal: true
|
|
61
|
+
};
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}, /*#__PURE__*/_react["default"].createElement(StyledFooter, {
|
|
66
|
-
bgColor: bgColor
|
|
67
|
-
}));
|
|
68
|
-
};
|
|
63
|
+
var _getBgColor = getBgColor(theme),
|
|
64
|
+
bgColor = _getBgColor.bgColor;
|
|
69
65
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
66
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
67
|
+
value: context
|
|
68
|
+
}, /*#__PURE__*/_react["default"].createElement(StyledFooter, {
|
|
69
|
+
bgColor: bgColor
|
|
70
|
+
}));
|
|
71
|
+
},
|
|
72
|
+
parameters: {
|
|
73
|
+
backgrounds: {
|
|
74
|
+
"default": 'white'
|
|
75
|
+
}
|
|
74
76
|
}
|
|
75
|
-
};
|
|
77
|
+
};
|
|
78
|
+
exports.footer = footer;
|
|
@@ -62,89 +62,90 @@ var getBgColor = function getBgColor(theme) {
|
|
|
62
62
|
};
|
|
63
63
|
};
|
|
64
64
|
|
|
65
|
-
var menuLinkItem =
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
var _getBgColor = getBgColor(theme),
|
|
75
|
-
bgColor = _getBgColor.bgColor;
|
|
65
|
+
var menuLinkItem = {
|
|
66
|
+
render: function render(props) {
|
|
67
|
+
var theme = props.theme,
|
|
68
|
+
releaseBranch = props.releaseBranch;
|
|
69
|
+
var context = {
|
|
70
|
+
theme: theme,
|
|
71
|
+
releaseBranch: releaseBranch,
|
|
72
|
+
isLinkExternal: true
|
|
73
|
+
};
|
|
76
74
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
75
|
+
var _getBgColor = getBgColor(theme),
|
|
76
|
+
bgColor = _getBgColor.bgColor;
|
|
77
|
+
|
|
78
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
79
|
+
value: context
|
|
80
|
+
}, /*#__PURE__*/_react["default"].createElement(Container, {
|
|
81
|
+
bgColor: bgColor
|
|
82
|
+
}, /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuLinkItem, props)));
|
|
83
|
+
},
|
|
84
|
+
args: {
|
|
85
|
+
text: '深度專題'
|
|
86
|
+
}
|
|
82
87
|
};
|
|
83
|
-
|
|
84
88
|
exports.menuLinkItem = menuLinkItem;
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
releaseBranch: releaseBranch,
|
|
101
|
-
isLinkExternal: true
|
|
102
|
-
};
|
|
89
|
+
var MenuDropdownItemExample = {
|
|
90
|
+
render: function render(props) {
|
|
91
|
+
var _useArgs = (0, _clientApi.useArgs)(),
|
|
92
|
+
_useArgs2 = _slicedToArray(_useArgs, 2),
|
|
93
|
+
isActive = _useArgs2[0].isActive,
|
|
94
|
+
updateArgs = _useArgs2[1];
|
|
95
|
+
|
|
96
|
+
var theme = props.theme,
|
|
97
|
+
releaseBranch = props.releaseBranch,
|
|
98
|
+
text = props.text;
|
|
99
|
+
var context = {
|
|
100
|
+
theme: theme,
|
|
101
|
+
releaseBranch: releaseBranch,
|
|
102
|
+
isLinkExternal: true
|
|
103
|
+
};
|
|
103
104
|
|
|
104
|
-
|
|
105
|
-
|
|
105
|
+
var _getBgColor2 = getBgColor(theme),
|
|
106
|
+
bgColor = _getBgColor2.bgColor;
|
|
106
107
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
108
|
+
var handleClick = function handleClick() {
|
|
109
|
+
return updateArgs({
|
|
110
|
+
isActive: !isActive
|
|
111
|
+
});
|
|
112
|
+
};
|
|
112
113
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
114
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
115
|
+
value: context
|
|
116
|
+
}, /*#__PURE__*/_react["default"].createElement(Container, {
|
|
117
|
+
bgColor: bgColor
|
|
118
|
+
}, /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuDropdownItem, {
|
|
119
|
+
text: text,
|
|
120
|
+
isActive: isActive,
|
|
121
|
+
onClick: handleClick
|
|
122
|
+
})));
|
|
123
|
+
},
|
|
124
|
+
args: {
|
|
125
|
+
text: '議題',
|
|
126
|
+
isActive: false
|
|
127
|
+
}
|
|
122
128
|
};
|
|
123
|
-
|
|
124
129
|
exports.MenuDropdownItemExample = MenuDropdownItemExample;
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
var context = {
|
|
133
|
-
theme: theme,
|
|
134
|
-
isLinkExternal: true
|
|
135
|
-
};
|
|
136
|
-
|
|
137
|
-
var _getBgColor3 = getBgColor(theme),
|
|
138
|
-
bgColor = _getBgColor3.bgColor;
|
|
130
|
+
var menuSubItem = {
|
|
131
|
+
render: function render(props) {
|
|
132
|
+
var theme = props.theme;
|
|
133
|
+
var context = {
|
|
134
|
+
theme: theme,
|
|
135
|
+
isLinkExternal: true
|
|
136
|
+
};
|
|
139
137
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
138
|
+
var _getBgColor3 = getBgColor(theme),
|
|
139
|
+
bgColor = _getBgColor3.bgColor;
|
|
140
|
+
|
|
141
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
142
|
+
value: context
|
|
143
|
+
}, /*#__PURE__*/_react["default"].createElement(Container, {
|
|
144
|
+
bgColor: bgColor
|
|
145
|
+
}, /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuSubItem, props)));
|
|
146
|
+
},
|
|
147
|
+
args: {
|
|
148
|
+
text: '小標題'
|
|
149
|
+
}
|
|
145
150
|
};
|
|
146
|
-
|
|
147
|
-
exports.menuSubItem = menuSubItem;
|
|
148
|
-
menuSubItem.args = {
|
|
149
|
-
text: '小標題'
|
|
150
|
-
};
|
|
151
|
+
exports.menuSubItem = menuSubItem;
|
|
@@ -16,6 +16,8 @@ var _constants = require("../storybook/constants");
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
17
|
|
|
18
18
|
/* eslint-disable react/prop-types */
|
|
19
|
+
|
|
20
|
+
/* eslint react/display-name:0 */
|
|
19
21
|
var _default = {
|
|
20
22
|
title: 'Hamburger/Menu',
|
|
21
23
|
component: _hamburgerMenu["default"],
|
|
@@ -32,25 +34,26 @@ var onClose = function onClose() {
|
|
|
32
34
|
return (_window = window) === null || _window === void 0 ? void 0 : _window.alert('click close !');
|
|
33
35
|
};
|
|
34
36
|
|
|
35
|
-
var menu =
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
37
|
+
var menu = {
|
|
38
|
+
render: function render(props) {
|
|
39
|
+
var theme = props.theme,
|
|
40
|
+
releaseBranch = props.releaseBranch;
|
|
41
|
+
var context = {
|
|
42
|
+
theme: theme,
|
|
43
|
+
releaseBranch: releaseBranch,
|
|
44
|
+
isLinkExternal: true
|
|
45
|
+
};
|
|
46
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
47
|
+
value: context
|
|
48
|
+
}, /*#__PURE__*/_react["default"].createElement(_hamburgerMenu["default"], props));
|
|
49
|
+
},
|
|
50
|
+
args: {
|
|
51
|
+
handleClose: onClose
|
|
52
|
+
},
|
|
53
|
+
parameter: {
|
|
54
|
+
controls: {
|
|
55
|
+
exclude: ['handleClose']
|
|
56
|
+
}
|
|
55
57
|
}
|
|
56
|
-
};
|
|
58
|
+
};
|
|
59
|
+
exports.menu = menu;
|
|
@@ -16,6 +16,8 @@ var _constants = require("../storybook/constants");
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
17
|
|
|
18
18
|
/* eslint-disable react/prop-types */
|
|
19
|
+
|
|
20
|
+
/* eslint react/display-name:0 */
|
|
19
21
|
var _default = {
|
|
20
22
|
title: 'Header/Universal',
|
|
21
23
|
component: _header["default"],
|
|
@@ -43,29 +45,29 @@ var _default = {
|
|
|
43
45
|
}
|
|
44
46
|
};
|
|
45
47
|
exports["default"] = _default;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
exclude: ['pathname']
|
|
48
|
+
var universal = {
|
|
49
|
+
render: function render(props) {
|
|
50
|
+
var theme = props.theme,
|
|
51
|
+
releaseBranch = props.releaseBranch,
|
|
52
|
+
toUseNarrow = props.toUseNarrow,
|
|
53
|
+
hideHeader = props.hideHeader,
|
|
54
|
+
isAuthed = props.isAuthed;
|
|
55
|
+
var context = {
|
|
56
|
+
theme: theme,
|
|
57
|
+
releaseBranch: releaseBranch,
|
|
58
|
+
toUseNarrow: toUseNarrow,
|
|
59
|
+
hideHeader: hideHeader,
|
|
60
|
+
isAuthed: isAuthed,
|
|
61
|
+
isLinkExternal: true
|
|
62
|
+
};
|
|
63
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
64
|
+
value: context
|
|
65
|
+
}, /*#__PURE__*/_react["default"].createElement(_header["default"], null));
|
|
66
|
+
},
|
|
67
|
+
parameters: {
|
|
68
|
+
controls: {
|
|
69
|
+
exclude: ['pathname']
|
|
70
|
+
}
|
|
70
71
|
}
|
|
71
|
-
};
|
|
72
|
+
};
|
|
73
|
+
exports.universal = universal;
|
|
@@ -18,6 +18,8 @@ var _constants = require("../storybook/constants");
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
19
|
|
|
20
20
|
/* eslint-disable react/prop-types */
|
|
21
|
+
|
|
22
|
+
/* eslint react/display-name:0 */
|
|
21
23
|
var _default = {
|
|
22
24
|
title: 'Icons/Desktop',
|
|
23
25
|
component: _icons["default"],
|
|
@@ -39,19 +41,20 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
39
41
|
componentId: "sc-19z8cko-0"
|
|
40
42
|
})(["transform:translateX(300px);"]);
|
|
41
43
|
|
|
42
|
-
var desktop =
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
44
|
+
var desktop = {
|
|
45
|
+
render: function render(props) {
|
|
46
|
+
var isAuthed = props.isAuthed,
|
|
47
|
+
theme = props.theme,
|
|
48
|
+
releaseBranch = props.releaseBranch;
|
|
49
|
+
var context = {
|
|
50
|
+
isAuthed: isAuthed,
|
|
51
|
+
theme: theme,
|
|
52
|
+
releaseBranch: releaseBranch,
|
|
53
|
+
isLinkExternal: true
|
|
54
|
+
};
|
|
55
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
56
|
+
value: context
|
|
57
|
+
}, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_icons["default"], null)));
|
|
58
|
+
}
|
|
55
59
|
};
|
|
56
|
-
|
|
57
60
|
exports.desktop = desktop;
|
|
@@ -16,6 +16,8 @@ var _constants = require("../storybook/constants");
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
17
|
|
|
18
18
|
/* eslint-disable react/prop-types */
|
|
19
|
+
|
|
20
|
+
/* eslint react/display-name:0 */
|
|
19
21
|
var _default = {
|
|
20
22
|
title: 'Slogan',
|
|
21
23
|
component: _slogan["default"],
|
|
@@ -24,15 +26,15 @@ var _default = {
|
|
|
24
26
|
}
|
|
25
27
|
};
|
|
26
28
|
exports["default"] = _default;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
var slogan = {
|
|
30
|
+
render: function render(props) {
|
|
31
|
+
var theme = props.theme;
|
|
32
|
+
var context = {
|
|
33
|
+
theme: theme
|
|
34
|
+
};
|
|
35
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
36
|
+
value: context
|
|
37
|
+
}, /*#__PURE__*/_react["default"].createElement(_slogan["default"], null));
|
|
38
|
+
}
|
|
36
39
|
};
|
|
37
|
-
|
|
38
40
|
exports.slogan = slogan;
|
|
@@ -18,6 +18,8 @@ var _constants = require("../storybook/constants");
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
19
|
|
|
20
20
|
/* eslint-disable react/prop-types */
|
|
21
|
+
|
|
22
|
+
/* eslint react/display-name:0 */
|
|
21
23
|
var _default = {
|
|
22
24
|
title: 'Tab Bar',
|
|
23
25
|
component: _tabBar["default"],
|
|
@@ -33,17 +35,18 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
33
35
|
componentId: "paqbaf-0"
|
|
34
36
|
})(["width:320px;"]);
|
|
35
37
|
|
|
36
|
-
var tabBar =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
38
|
+
var tabBar = {
|
|
39
|
+
render: function render(props) {
|
|
40
|
+
var theme = props.theme,
|
|
41
|
+
releaseBranch = props.releaseBranch;
|
|
42
|
+
var context = {
|
|
43
|
+
theme: theme,
|
|
44
|
+
releaseBranch: releaseBranch,
|
|
45
|
+
isLinkExternal: true
|
|
46
|
+
};
|
|
47
|
+
return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
|
|
48
|
+
value: context
|
|
49
|
+
}, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_tabBar["default"], null)));
|
|
50
|
+
}
|
|
47
51
|
};
|
|
48
|
-
|
|
49
52
|
exports.tabBar = tabBar;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@twreporter/universal-header",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.8.0-rc.1",
|
|
4
4
|
"description": "Universal header of TWReporter sites",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
"build": "make build",
|
|
9
9
|
"dev": "make dev",
|
|
10
10
|
"prepublishOnly": "make build",
|
|
11
|
-
"storybook": "
|
|
12
|
-
"build-storybook": "build
|
|
11
|
+
"storybook": "storybook dev -p 3000",
|
|
12
|
+
"build-storybook": "storybook build"
|
|
13
13
|
},
|
|
14
14
|
"repository": "https://github.com/twreporter/twreporter-npm-packages.git",
|
|
15
15
|
"author": "twreporter <developer@twreporter.org>",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"license": "MIT",
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@twreporter/core": "^1.14.0-rc.0",
|
|
24
|
-
"@twreporter/react-components": "^8.21.0-rc.
|
|
24
|
+
"@twreporter/react-components": "^8.21.0-rc.5",
|
|
25
25
|
"lodash": "^4.17.11",
|
|
26
26
|
"prop-types": "^15.6.2",
|
|
27
27
|
"querystring": "^0.2.0",
|
|
@@ -38,15 +38,18 @@
|
|
|
38
38
|
],
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@babel/core": "^7.19.1",
|
|
41
|
-
"@
|
|
42
|
-
"@
|
|
43
|
-
"@storybook/addon-
|
|
44
|
-
"@storybook/addon-
|
|
45
|
-
"@storybook/
|
|
46
|
-
"@storybook/
|
|
47
|
-
"@storybook/
|
|
48
|
-
"@storybook/
|
|
49
|
-
"
|
|
41
|
+
"@babel/preset-env": "^7.23.2",
|
|
42
|
+
"@babel/preset-react": "^7.22.15",
|
|
43
|
+
"@storybook/addon-actions": "7.0.0",
|
|
44
|
+
"@storybook/addon-essentials": "7.0.0",
|
|
45
|
+
"@storybook/addon-interactions": "7.0.0",
|
|
46
|
+
"@storybook/addon-links": "7.0.0",
|
|
47
|
+
"@storybook/addon-mdx-gfm": "7.0.0",
|
|
48
|
+
"@storybook/react": "7.0.0",
|
|
49
|
+
"@storybook/react-webpack5": "7.0.0",
|
|
50
|
+
"@storybook/testing-library": "^0.2.2",
|
|
51
|
+
"babel-loader": "^8.2.5",
|
|
52
|
+
"react-dom": "16.8.6"
|
|
50
53
|
},
|
|
51
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "6038acbe32dfda4f0cc8888635d540c9aa0c4c0d"
|
|
52
55
|
}
|