@twreporter/react-components 9.0.2 → 9.1.0-rc.0
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 +22 -0
- package/lib/badge/badge.stories.js +3 -9
- package/lib/badge/index.js +8 -24
- package/lib/bookmark-list/bookmark.js +20 -69
- package/lib/bookmark-list/bookmarks.js +10 -40
- package/lib/bookmark-list/customized-link.js +4 -14
- package/lib/bookmark-list/image-wrapper.js +9 -36
- package/lib/bookmark-list/index.js +36 -91
- package/lib/bookmark-list/redirect-to-sign-in.js +1 -10
- package/lib/bookmark-list/stories/bookmark.stories.js +3 -9
- package/lib/bookmark-widget/index.js +91 -220
- package/lib/button/components/iconButton.js +15 -34
- package/lib/button/components/iconWithTextButton.js +16 -31
- package/lib/button/components/link.js +27 -45
- package/lib/button/components/menuButton.js +18 -38
- package/lib/button/components/pillButton.js +31 -60
- package/lib/button/components/textButton.js +29 -61
- package/lib/button/components/toggleButton.js +11 -31
- package/lib/button/enums/index.js +4 -7
- package/lib/button/index.js +5 -18
- package/lib/button/stories/iconButton.stories.js +4 -15
- package/lib/button/stories/iconWithTextButton.stories.js +4 -13
- package/lib/button/stories/link.stories.js +9 -27
- package/lib/button/stories/menuButton.stories.js +3 -10
- package/lib/button/stories/pillButton.stories.js +4 -15
- package/lib/button/stories/textButton.stories.js +4 -15
- package/lib/button/stories/toggleButton.stories.js +3 -8
- package/lib/button/utils/size.js +3 -8
- package/lib/button/utils/theme.js +11 -102
- package/lib/card/components/article-card.js +31 -59
- package/lib/card/components/dialog.js +7 -22
- package/lib/card/components/short-story.js +24 -44
- package/lib/card/index.js +2 -8
- package/lib/card/stories/articleCard.stories.js +3 -14
- package/lib/card/stories/dialog.stories.js +3 -11
- package/lib/card/stories/shortStory.stories.js +3 -16
- package/lib/checkbox/checkbox.stories.js +3 -8
- package/lib/checkbox/index.js +10 -31
- package/lib/color.stories.js +9 -34
- package/lib/confirmation/index.js +7 -29
- package/lib/customized-link.js +5 -18
- package/lib/divider.js +3 -19
- package/lib/divider.stories.js +5 -18
- package/lib/donation-link.js +2 -14
- package/lib/empty-state/enums/index.js +2 -3
- package/lib/empty-state/index.js +20 -41
- package/lib/empty-state/stories/empty-guide.stories.js +3 -11
- package/lib/error/index.js +3 -8
- package/lib/error/message.js +3 -44
- package/lib/footer/constants/links.js +10 -16
- package/lib/footer/footer.stories.js +3 -10
- package/lib/footer/index.js +5 -40
- package/lib/footer/link.js +15 -46
- package/lib/footer/logo.js +12 -32
- package/lib/hook/index.js +3 -18
- package/lib/hook/use-bookmark.js +21 -47
- package/lib/hook/use-font-face-observer.js +9 -24
- package/lib/hook/use-outside-click.js +4 -9
- package/lib/icon/enum/index.js +5 -9
- package/lib/icon/index.js +49 -105
- package/lib/icon/stories/arrow.stories.js +7 -16
- package/lib/icon/stories/article.stories.js +2 -7
- package/lib/icon/stories/bookmark.stories.js +6 -14
- package/lib/icon/stories/changeIconColor.stories.js +2 -12
- package/lib/icon/stories/clock.stories.js +2 -7
- package/lib/icon/stories/copy.stories.js +2 -7
- package/lib/icon/stories/cross.stories.js +2 -7
- package/lib/icon/stories/hamburger.stories.js +2 -7
- package/lib/icon/stories/home.stories.js +2 -7
- package/lib/icon/stories/letter.stories.js +2 -7
- package/lib/icon/stories/loading.stories.js +2 -7
- package/lib/icon/stories/member.stories.js +2 -7
- package/lib/icon/stories/printer.stories.js +2 -7
- package/lib/icon/stories/search.stories.js +2 -7
- package/lib/icon/stories/share.stories.js +2 -7
- package/lib/icon/stories/socialMedia.stories.js +2 -8
- package/lib/icon/stories/text.stories.js +2 -7
- package/lib/icon/stories/topic.stories.js +2 -7
- package/lib/image-with-fallback.js +22 -52
- package/lib/input/components/search-bar.js +40 -85
- package/lib/input/components/text-field.js +20 -40
- package/lib/input/enums/index.js +6 -8
- package/lib/input/index.js +2 -7
- package/lib/input/stories/search-bar.stories.js +3 -16
- package/lib/input/stories/text-field.stories.js +3 -14
- package/lib/input/utils/theme.js +2 -9
- package/lib/is-fetching-wrapper.js +16 -48
- package/lib/junior-link.js +6 -29
- package/lib/link-with-tracker.js +14 -47
- package/lib/listing-page/components/card-list.js +20 -51
- package/lib/listing-page/components/image.js +15 -46
- package/lib/listing-page/components/list-item.js +18 -65
- package/lib/listing-page/components/list.js +17 -61
- package/lib/listing-page/components/page-content.js +2 -12
- package/lib/listing-page/components/topics/index.js +26 -74
- package/lib/listing-page/components/topics/post-item.js +14 -47
- package/lib/listing-page/components/topics/posts.js +1 -10
- package/lib/listing-page/components/topics/section.js +3 -25
- package/lib/listing-page/components/topics/topic-item.js +17 -56
- package/lib/listing-page/constants/mockup-spec.js +2 -3
- package/lib/listing-page/constants/predefined-css.js +2 -10
- package/lib/listing-page/constants/prop-types.js +2 -7
- package/lib/listing-page/constants/topics.js +2 -3
- package/lib/listing-page/index.js +2 -8
- package/lib/listing-page/stories/cardList.stories.js +3 -10
- package/lib/logo/components/logo-footer.js +6 -21
- package/lib/logo/components/logo-header.js +7 -23
- package/lib/logo/components/logo-loading-fallback.js +4 -13
- package/lib/logo/components/logo-symbol.js +7 -23
- package/lib/logo/index.js +2 -9
- package/lib/logo/stories/logoFooter.stories.js +2 -8
- package/lib/logo/stories/logoHeader.stories.js +3 -9
- package/lib/logo/stories/logoLoadingFallback.stories.js +2 -8
- package/lib/logo/stories/logoSymbol.stories.js +3 -9
- package/lib/logo/utils/path.js +2 -9
- package/lib/material-icon.js +9 -17
- package/lib/mobile-member-role-card/index.js +22 -49
- package/lib/mobile-member-role-card/stories/member-role-card.stories.js +3 -12
- package/lib/mobile-pop-up-modal.js +10 -44
- package/lib/more.js +10 -37
- package/lib/pagination/index.js +17 -83
- package/lib/podcast-link.js +6 -29
- package/lib/rwd.js +6 -26
- package/lib/shared-enum.js +2 -3
- package/lib/side-bar/index.js +16 -59
- package/lib/simple-header/index.js +2 -12
- package/lib/simple-header/simpleHeader.stories.js +3 -8
- package/lib/snack-bar/components/snack-bar.js +9 -20
- package/lib/snack-bar/hooks/use-snack-bar.js +12 -25
- package/lib/snack-bar/index.js +2 -7
- package/lib/snack-bar/stories/snackBar.stories.js +12 -29
- package/lib/snack-bar/utils/theme.js +3 -9
- package/lib/storybook/constants/index.js +3 -11
- package/lib/storybook/utils/get-enum-arg.js +2 -5
- package/lib/table-of-contents/index.js +62 -128
- package/lib/text/constants/headline-type.js +5 -8
- package/lib/text/enums/index.js +3 -5
- package/lib/text/headline.js +14 -41
- package/lib/text/paragraph.js +13 -34
- package/lib/text/stories/headline.stories.js +8 -21
- package/lib/text/stories/paragraph.stories.js +6 -17
- package/lib/text/utils/webfonts.js +9 -22
- package/lib/title-bar/components/tab.js +27 -69
- package/lib/title-bar/components/title1.js +6 -17
- package/lib/title-bar/components/title2.js +7 -23
- package/lib/title-bar/index.js +2 -8
- package/lib/title-bar/stories/tab.stories.js +5 -12
- package/lib/title-bar/stories/title1.stories.js +5 -12
- package/lib/title-bar/stories/title2.stories.js +3 -11
- package/lib/utils/link-with-params.js +0 -5
- package/package.json +4 -4
- package/lib/hook/use-store.js +0 -46
package/lib/checkbox/index.js
CHANGED
|
@@ -4,43 +4,29 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = exports.Checkbox = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
-
|
|
14
10
|
var _paragraph = require("../text/paragraph");
|
|
15
|
-
|
|
16
11
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
17
|
-
|
|
18
12
|
var _excluded = ["value", "label", "disabled", "onChange"];
|
|
19
|
-
|
|
20
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
21
|
-
|
|
22
14
|
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; }
|
|
23
|
-
|
|
24
15
|
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; }
|
|
25
|
-
|
|
26
16
|
var disableColor = _color.colorGrayscale.gray400;
|
|
27
17
|
var activeColor = _color.colorGrayscale.gray800;
|
|
28
|
-
|
|
29
18
|
var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
30
19
|
displayName: "checkbox__Container",
|
|
31
20
|
componentId: "vzoxib-0"
|
|
32
21
|
})(["display:flex;flex-direction:'row';"]);
|
|
33
|
-
|
|
34
22
|
var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
|
|
35
23
|
displayName: "checkbox__Input",
|
|
36
24
|
componentId: "vzoxib-1"
|
|
37
25
|
})(["width:0;height:0;opacity:0;z-index:-1;"]);
|
|
38
|
-
|
|
39
26
|
var Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
|
|
40
27
|
displayName: "checkbox__Label",
|
|
41
28
|
componentId: "vzoxib-2"
|
|
42
29
|
})(["display:block;position:relative;padding-left:25px;"]);
|
|
43
|
-
|
|
44
30
|
var Indicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
45
31
|
displayName: "checkbox__Indicator",
|
|
46
32
|
componentId: "vzoxib-3"
|
|
@@ -51,29 +37,25 @@ var Indicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
51
37
|
}, function (props) {
|
|
52
38
|
return props.$disabled ? disableColor : activeColor;
|
|
53
39
|
}, Input);
|
|
54
|
-
|
|
55
40
|
var ColorP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
|
|
56
41
|
displayName: "checkbox__ColorP1",
|
|
57
42
|
componentId: "vzoxib-4"
|
|
58
43
|
})(["color:", ";"], function (props) {
|
|
59
44
|
return props.$disabled ? disableColor : activeColor;
|
|
60
45
|
});
|
|
61
|
-
|
|
62
|
-
var Checkbox = function Checkbox(_ref) {
|
|
46
|
+
var Checkbox = exports.Checkbox = function Checkbox(_ref) {
|
|
63
47
|
var _ref$value = _ref.value,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
48
|
+
value = _ref$value === void 0 ? false : _ref$value,
|
|
49
|
+
_ref$label = _ref.label,
|
|
50
|
+
label = _ref$label === void 0 ? '' : _ref$label,
|
|
51
|
+
_ref$disabled = _ref.disabled,
|
|
52
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
53
|
+
_ref$onChange = _ref.onChange,
|
|
54
|
+
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
55
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
73
56
|
var handleChange = function handleChange(e) {
|
|
74
57
|
onChange && onChange(e);
|
|
75
58
|
};
|
|
76
|
-
|
|
77
59
|
return /*#__PURE__*/_react["default"].createElement(Container, props, /*#__PURE__*/_react["default"].createElement(Label, null, label && /*#__PURE__*/_react["default"].createElement(ColorP1, {
|
|
78
60
|
text: label,
|
|
79
61
|
$disabled: disabled
|
|
@@ -87,13 +69,10 @@ var Checkbox = function Checkbox(_ref) {
|
|
|
87
69
|
$disabled: disabled
|
|
88
70
|
})));
|
|
89
71
|
};
|
|
90
|
-
|
|
91
|
-
exports.Checkbox = Checkbox;
|
|
92
72
|
Checkbox.propTypes = {
|
|
93
73
|
value: _propTypes["default"].bool.isRequired,
|
|
94
74
|
label: _propTypes["default"].string,
|
|
95
75
|
disabled: _propTypes["default"].bool,
|
|
96
76
|
onChange: _propTypes["default"].func.isRequired
|
|
97
77
|
};
|
|
98
|
-
var _default = Checkbox;
|
|
99
|
-
exports["default"] = _default;
|
|
78
|
+
var _default = exports["default"] = Checkbox;
|
package/lib/color.stories.js
CHANGED
|
@@ -4,41 +4,31 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = exports.colorSet = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
-
|
|
14
10
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
15
|
-
|
|
16
11
|
var _getEnumArg = require("./storybook/utils/get-enum-arg");
|
|
17
|
-
|
|
18
12
|
var _paragraph = require("./text/paragraph");
|
|
19
|
-
|
|
20
13
|
var _map = _interopRequireDefault(require("lodash/map"));
|
|
21
|
-
|
|
22
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
|
-
|
|
24
15
|
/* eslint react/display-name:0 */
|
|
16
|
+
|
|
25
17
|
// lodash
|
|
18
|
+
|
|
26
19
|
var _ = {
|
|
27
20
|
map: _map["default"]
|
|
28
21
|
};
|
|
29
|
-
|
|
30
22
|
var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
31
23
|
displayName: "colorstories__Container",
|
|
32
24
|
componentId: "sc-1icwolq-0"
|
|
33
25
|
})(["display:flex;width:100vw;height:100vh;background-color:", ";"], function (props) {
|
|
34
26
|
return props.$background;
|
|
35
27
|
});
|
|
36
|
-
|
|
37
28
|
var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
38
29
|
displayName: "colorstories__Box",
|
|
39
30
|
componentId: "sc-1icwolq-1"
|
|
40
31
|
})(["display:flex;align-items:center;justify-content:center;flex-direction:column;"]);
|
|
41
|
-
|
|
42
32
|
var Color = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
43
33
|
displayName: "colorstories__Color",
|
|
44
34
|
componentId: "sc-1icwolq-2"
|
|
@@ -49,7 +39,6 @@ var Color = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
49
39
|
}, function (props) {
|
|
50
40
|
return props.$color;
|
|
51
41
|
});
|
|
52
|
-
|
|
53
42
|
var P2Gray600 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
|
|
54
43
|
displayName: "colorstories__P2Gray600",
|
|
55
44
|
componentId: "sc-1icwolq-3"
|
|
@@ -70,43 +59,33 @@ var ColorSetEnum = {
|
|
|
70
59
|
SEMANTIC: 'semantic',
|
|
71
60
|
PINK_ARTICLE: 'pink_article'
|
|
72
61
|
};
|
|
73
|
-
|
|
74
62
|
var getColorSet = function getColorSet(type) {
|
|
75
63
|
switch (type) {
|
|
76
64
|
case ColorSetEnum.BRAND:
|
|
77
65
|
return _color.colorBrand;
|
|
78
|
-
|
|
79
66
|
case ColorSetEnum.GRAYSCALE:
|
|
80
67
|
return _color.colorGrayscale;
|
|
81
|
-
|
|
82
68
|
case ColorSetEnum.OPACITY:
|
|
83
69
|
return _color.colorOpacity;
|
|
84
|
-
|
|
85
70
|
case ColorSetEnum.PHOTO:
|
|
86
71
|
return _color.colorPhoto;
|
|
87
|
-
|
|
88
72
|
case ColorSetEnum.PODCAST:
|
|
89
73
|
return _color.colorPodcast;
|
|
90
|
-
|
|
91
74
|
case ColorSetEnum.SUPPORTIVE:
|
|
92
75
|
return _color.colorSupportive;
|
|
93
|
-
|
|
94
76
|
case ColorSetEnum.SEMANTIC:
|
|
95
77
|
return _color.COLOR_SEMANTIC;
|
|
96
|
-
|
|
97
78
|
case ColorSetEnum['PINK_ARTICLE']:
|
|
98
79
|
return _color.COLOR_PINK_ARTICLE;
|
|
99
80
|
}
|
|
100
81
|
};
|
|
101
|
-
|
|
102
82
|
var ColorSet = function ColorSet(_ref) {
|
|
103
83
|
var height = _ref.height,
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
84
|
+
width = _ref.width,
|
|
85
|
+
type = _ref.type,
|
|
86
|
+
showColorText = _ref.showColorText,
|
|
87
|
+
background = _ref.background;
|
|
108
88
|
var colorSet = getColorSet(type);
|
|
109
|
-
|
|
110
89
|
var colorBoxes = _.map(colorSet, function (color, key) {
|
|
111
90
|
return /*#__PURE__*/_react["default"].createElement(Box, {
|
|
112
91
|
key: "".concat(type, "-").concat(key)
|
|
@@ -121,12 +100,10 @@ var ColorSet = function ColorSet(_ref) {
|
|
|
121
100
|
$show: showColorText
|
|
122
101
|
}));
|
|
123
102
|
});
|
|
124
|
-
|
|
125
103
|
return /*#__PURE__*/_react["default"].createElement(Container, {
|
|
126
104
|
$background: background
|
|
127
105
|
}, colorBoxes);
|
|
128
106
|
};
|
|
129
|
-
|
|
130
107
|
ColorSet.propTypes = {
|
|
131
108
|
background: _propTypes["default"].string,
|
|
132
109
|
height: _propTypes["default"].string,
|
|
@@ -134,7 +111,7 @@ ColorSet.propTypes = {
|
|
|
134
111
|
type: _propTypes["default"].oneOf(Object.values(ColorSetEnum)),
|
|
135
112
|
showColorText: _propTypes["default"].bool
|
|
136
113
|
};
|
|
137
|
-
var _default = {
|
|
114
|
+
var _default = exports["default"] = {
|
|
138
115
|
title: 'Color',
|
|
139
116
|
component: ColorSet,
|
|
140
117
|
argTypes: {
|
|
@@ -147,8 +124,7 @@ var _default = {
|
|
|
147
124
|
}
|
|
148
125
|
}
|
|
149
126
|
};
|
|
150
|
-
exports
|
|
151
|
-
var colorSet = {
|
|
127
|
+
var colorSet = exports.colorSet = {
|
|
152
128
|
args: {
|
|
153
129
|
height: '100px',
|
|
154
130
|
width: '100px',
|
|
@@ -156,5 +132,4 @@ var colorSet = {
|
|
|
156
132
|
showColorText: true,
|
|
157
133
|
background: _color.colorGrayscale.gray100
|
|
158
134
|
}
|
|
159
|
-
};
|
|
160
|
-
exports.colorSet = colorSet;
|
|
135
|
+
};
|
|
@@ -4,25 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
-
|
|
14
10
|
var _font = require("@twreporter/core/lib/constants/font");
|
|
15
|
-
|
|
16
11
|
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
17
|
-
|
|
18
12
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
19
|
-
|
|
20
13
|
var _templateObject, _templateObject2, _templateObject3;
|
|
21
|
-
|
|
22
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
|
-
|
|
24
15
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
25
|
-
|
|
26
16
|
// assets
|
|
27
17
|
var WarningSign = function WarningSign(props) {
|
|
28
18
|
return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("title", null, "deletebm"), /*#__PURE__*/_react["default"].createElement("g", {
|
|
@@ -36,41 +26,34 @@ var WarningSign = function WarningSign(props) {
|
|
|
36
26
|
fill: "#FFF"
|
|
37
27
|
})));
|
|
38
28
|
};
|
|
39
|
-
|
|
40
29
|
WarningSign.defaultProps = {
|
|
41
30
|
width: "32",
|
|
42
31
|
height: "30",
|
|
43
32
|
viewBox: "0 0 32 30",
|
|
44
33
|
xmlns: "http://www.w3.org/2000/svg"
|
|
45
34
|
}; // @twreporter
|
|
46
|
-
|
|
47
35
|
var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
48
36
|
displayName: "confirmation__Container",
|
|
49
37
|
componentId: "ypuqpw-0"
|
|
50
38
|
})(["width:100%;height:100vh;position:fixed;top:0;left:0;z-index:5;background-color:", ";"], _color.colorGrayscale.gray600);
|
|
51
|
-
|
|
52
39
|
var Dialog = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
53
40
|
displayName: "confirmation__Dialog",
|
|
54
41
|
componentId: "ypuqpw-1"
|
|
55
42
|
})(["width:", ";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:75px 60px 58px 60px;background-color:", ";text-align:center;", ""], function (props) {
|
|
56
43
|
return props.$width;
|
|
57
44
|
}, _color.colorGrayscale.white, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n padding: 47px 17px 37px 17px;\n "]))));
|
|
58
|
-
|
|
59
45
|
var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
60
46
|
displayName: "confirmation__Content",
|
|
61
47
|
componentId: "ypuqpw-2"
|
|
62
48
|
})(["width:100%;margin-bottom:52px;font-size:20px;font-weight:", ";", ""], _font.fontWeight.bold, _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 16px;\n "]))));
|
|
63
|
-
|
|
64
49
|
var FuncitonArea = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
65
50
|
displayName: "confirmation__FuncitonArea",
|
|
66
51
|
componentId: "ypuqpw-3"
|
|
67
52
|
})([""]);
|
|
68
|
-
|
|
69
53
|
var FunctionButton = /*#__PURE__*/_styledComponents["default"].button.withConfig({
|
|
70
54
|
displayName: "confirmation__FunctionButton",
|
|
71
55
|
componentId: "ypuqpw-4"
|
|
72
56
|
})(["cursor:pointer;font-weight:", ";font-size:18px;width:127px;height:46.7px;border-radius:40px;background-color:transparent;outline:0;", " letter-spacing:1.6px;"], _font.fontWeight.bold, _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 16px;\n "]))));
|
|
73
|
-
|
|
74
57
|
var Cancel = /*#__PURE__*/(0, _styledComponents["default"])(FunctionButton).withConfig({
|
|
75
58
|
displayName: "confirmation__Cancel",
|
|
76
59
|
componentId: "ypuqpw-5"
|
|
@@ -79,25 +62,22 @@ var Confirm = /*#__PURE__*/(0, _styledComponents["default"])(FunctionButton).wit
|
|
|
79
62
|
displayName: "confirmation__Confirm",
|
|
80
63
|
componentId: "ypuqpw-6"
|
|
81
64
|
})(["border:solid 2px currentcolor;color:", ";"], _color.colorBrand.heavy);
|
|
82
|
-
|
|
83
65
|
var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
84
66
|
displayName: "confirmation__IconContainer",
|
|
85
67
|
componentId: "ypuqpw-7"
|
|
86
68
|
})(["display:inline-block;position:relative;top:8px;margin-right:10px;"]);
|
|
87
|
-
|
|
88
69
|
var TextContainer = /*#__PURE__*/_styledComponents["default"].span.withConfig({
|
|
89
70
|
displayName: "confirmation__TextContainer",
|
|
90
71
|
componentId: "ypuqpw-8"
|
|
91
72
|
})(["letter-spacing:2.6px;"]);
|
|
92
|
-
|
|
93
73
|
var Confirmation = function Confirmation(props) {
|
|
94
74
|
var width = props.width,
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
75
|
+
content = props.content,
|
|
76
|
+
cancel = props.cancel,
|
|
77
|
+
confirm = props.confirm,
|
|
78
|
+
onConfirm = props.onConfirm,
|
|
79
|
+
onCancel = props.onCancel,
|
|
80
|
+
toShowWarningIcon = props.toShowWarningIcon;
|
|
101
81
|
var iconJSX = toShowWarningIcon ? /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(WarningSign, null)) : null;
|
|
102
82
|
return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Dialog, {
|
|
103
83
|
$width: width
|
|
@@ -107,7 +87,6 @@ var Confirmation = function Confirmation(props) {
|
|
|
107
87
|
onClick: onConfirm
|
|
108
88
|
}, confirm))));
|
|
109
89
|
};
|
|
110
|
-
|
|
111
90
|
Confirmation.defaultProps = {
|
|
112
91
|
content: '',
|
|
113
92
|
cancel: 'Cancel',
|
|
@@ -124,5 +103,4 @@ Confirmation.propTypes = {
|
|
|
124
103
|
onCancel: _propTypes["default"].func.isRequired,
|
|
125
104
|
toShowWarningIcon: _propTypes["default"].bool
|
|
126
105
|
};
|
|
127
|
-
var _default = Confirmation;
|
|
128
|
-
exports["default"] = _default;
|
|
106
|
+
var _default = exports["default"] = Confirmation;
|
package/lib/customized-link.js
CHANGED
|
@@ -4,44 +4,31 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _reactRouterDom = require("react-router-dom");
|
|
13
|
-
|
|
14
10
|
var _excluded = ["isExternal", "to"];
|
|
15
|
-
|
|
16
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
|
-
|
|
18
12
|
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); }
|
|
19
|
-
|
|
20
13
|
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; }
|
|
21
|
-
|
|
22
14
|
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; }
|
|
23
|
-
|
|
24
15
|
var CustomizedLink = function CustomizedLink(_ref) {
|
|
25
16
|
var _ref$isExternal = _ref.isExternal,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
17
|
+
isExternal = _ref$isExternal === void 0 ? true : _ref$isExternal,
|
|
18
|
+
_ref$to = _ref.to,
|
|
19
|
+
to = _ref$to === void 0 ? '' : _ref$to,
|
|
20
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
31
21
|
if (isExternal) {
|
|
32
22
|
return /*#__PURE__*/_react["default"].createElement("a", _extends({
|
|
33
23
|
href: to
|
|
34
24
|
}, rest));
|
|
35
25
|
}
|
|
36
|
-
|
|
37
26
|
return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, _extends({
|
|
38
27
|
to: to
|
|
39
28
|
}, rest));
|
|
40
29
|
};
|
|
41
|
-
|
|
42
30
|
CustomizedLink.propTypes = {
|
|
43
31
|
isExternal: _propTypes["default"].bool,
|
|
44
32
|
to: _propTypes["default"].string
|
|
45
33
|
};
|
|
46
|
-
var _default = CustomizedLink;
|
|
47
|
-
exports["default"] = _default;
|
|
34
|
+
var _default = exports["default"] = CustomizedLink;
|
package/lib/divider.js
CHANGED
|
@@ -4,27 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
-
|
|
14
10
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
15
|
-
|
|
16
11
|
var _css = require("@twreporter/core/lib/utils/css");
|
|
17
|
-
|
|
18
12
|
var _excluded = ["direction"];
|
|
19
|
-
|
|
20
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
21
|
-
|
|
22
14
|
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); }
|
|
23
|
-
|
|
24
15
|
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; }
|
|
25
|
-
|
|
26
16
|
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; }
|
|
27
|
-
|
|
28
17
|
// direction enum
|
|
29
18
|
var Direction = {
|
|
30
19
|
HORIZONTAL: 'horizontal',
|
|
@@ -42,7 +31,6 @@ var width = {
|
|
|
42
31
|
vertical: 0,
|
|
43
32
|
horizontal: '100%'
|
|
44
33
|
};
|
|
45
|
-
|
|
46
34
|
var DividerBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
47
35
|
displayName: "divider__DividerBox",
|
|
48
36
|
componentId: "nohqp6-0"
|
|
@@ -53,20 +41,16 @@ var DividerBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
53
41
|
}, function (props) {
|
|
54
42
|
return width[props.$direction];
|
|
55
43
|
});
|
|
56
|
-
|
|
57
44
|
var Divider = function Divider(_ref) {
|
|
58
45
|
var _ref$direction = _ref.direction,
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
46
|
+
direction = _ref$direction === void 0 ? Direction.HORIZONTAL : _ref$direction,
|
|
47
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
62
48
|
return /*#__PURE__*/_react["default"].createElement(DividerBox, _extends({
|
|
63
49
|
$direction: direction
|
|
64
50
|
}, props));
|
|
65
51
|
};
|
|
66
|
-
|
|
67
52
|
Divider.propTypes = {
|
|
68
53
|
direction: _propTypes["default"].oneOf(Object.values(Direction))
|
|
69
54
|
};
|
|
70
55
|
Divider.Direction = Direction;
|
|
71
|
-
var _default = Divider;
|
|
72
|
-
exports["default"] = _default;
|
|
56
|
+
var _default = exports["default"] = Divider;
|
package/lib/divider.stories.js
CHANGED
|
@@ -4,44 +4,34 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.vertical = exports.horizontal = exports.divider = exports["default"] = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
var _divider = _interopRequireDefault(require("./divider"));
|
|
11
|
-
|
|
12
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
-
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
|
-
|
|
16
11
|
/* eslint react/display-name:0 */
|
|
17
|
-
var _default = {
|
|
12
|
+
var _default = exports["default"] = {
|
|
18
13
|
title: 'Divider/Line',
|
|
19
14
|
component: _divider["default"]
|
|
20
15
|
};
|
|
21
|
-
exports["default"] = _default;
|
|
22
16
|
var flexDirection = {
|
|
23
17
|
vertical: 'row',
|
|
24
18
|
horizontal: 'column'
|
|
25
19
|
};
|
|
26
|
-
|
|
27
20
|
var FlexContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
28
21
|
displayName: "dividerstories__FlexContainer",
|
|
29
22
|
componentId: "sc-166xqvx-0"
|
|
30
23
|
})(["display:flex;flex-direction:", ";align-items:center;justify-content:space-between;height:250px;width:250px;"], function (props) {
|
|
31
24
|
return flexDirection[props.direction];
|
|
32
25
|
});
|
|
33
|
-
|
|
34
26
|
var Cube = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
35
27
|
displayName: "dividerstories__Cube",
|
|
36
28
|
componentId: "sc-166xqvx-1"
|
|
37
29
|
})(["height:100px;width:100px;background-color:#aaa;"]);
|
|
38
|
-
|
|
39
30
|
var VerticalContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
40
31
|
displayName: "dividerstories__VerticalContainer",
|
|
41
32
|
componentId: "sc-166xqvx-2"
|
|
42
33
|
})(["height:200px;"]);
|
|
43
|
-
|
|
44
|
-
var divider = {
|
|
34
|
+
var divider = exports.divider = {
|
|
45
35
|
render: function render(args) {
|
|
46
36
|
return /*#__PURE__*/_react["default"].createElement(FlexContainer, args, /*#__PURE__*/_react["default"].createElement(Cube, null), /*#__PURE__*/_react["default"].createElement(_divider["default"], args), /*#__PURE__*/_react["default"].createElement(Cube, null));
|
|
47
37
|
},
|
|
@@ -49,8 +39,7 @@ var divider = {
|
|
|
49
39
|
direction: _divider["default"].Direction.HORIZONTAL
|
|
50
40
|
}
|
|
51
41
|
};
|
|
52
|
-
exports.
|
|
53
|
-
var horizontal = {
|
|
42
|
+
var horizontal = exports.horizontal = {
|
|
54
43
|
render: function render() {
|
|
55
44
|
return /*#__PURE__*/_react["default"].createElement(_divider["default"], {
|
|
56
45
|
direction: _divider["default"].Direction.HORIZONTAL
|
|
@@ -62,8 +51,7 @@ var horizontal = {
|
|
|
62
51
|
}
|
|
63
52
|
}
|
|
64
53
|
};
|
|
65
|
-
exports.
|
|
66
|
-
var vertical = {
|
|
54
|
+
var vertical = exports.vertical = {
|
|
67
55
|
render: function render() {
|
|
68
56
|
return /*#__PURE__*/_react["default"].createElement(VerticalContainer, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
|
|
69
57
|
direction: _divider["default"].Direction.VERTICAL
|
|
@@ -74,5 +62,4 @@ var vertical = {
|
|
|
74
62
|
exclude: ['direction']
|
|
75
63
|
}
|
|
76
64
|
}
|
|
77
|
-
};
|
|
78
|
-
exports.vertical = vertical;
|
|
65
|
+
};
|
package/lib/donation-link.js
CHANGED
|
@@ -4,27 +4,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var _externalLinks = _interopRequireDefault(require("@twreporter/core/lib/constants/external-links"));
|
|
13
|
-
|
|
14
10
|
var _excluded = ["children"];
|
|
15
|
-
|
|
16
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
|
-
|
|
18
12
|
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); }
|
|
19
|
-
|
|
20
13
|
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; }
|
|
21
|
-
|
|
22
14
|
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; }
|
|
23
|
-
|
|
24
15
|
var DonationLink = function DonationLink(_ref) {
|
|
25
16
|
var children = _ref.children,
|
|
26
|
-
|
|
27
|
-
|
|
17
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
28
18
|
var donationURL = _externalLinks["default"].donation;
|
|
29
19
|
return /*#__PURE__*/_react["default"].createElement("a", _extends({
|
|
30
20
|
href: donationURL,
|
|
@@ -32,9 +22,7 @@ var DonationLink = function DonationLink(_ref) {
|
|
|
32
22
|
rel: "noopener noreferrer"
|
|
33
23
|
}, props), children);
|
|
34
24
|
};
|
|
35
|
-
|
|
36
25
|
DonationLink.propTypes = {
|
|
37
26
|
children: _propTypes["default"].node
|
|
38
27
|
};
|
|
39
|
-
var _default = DonationLink;
|
|
40
|
-
exports["default"] = _default;
|
|
28
|
+
var _default = exports["default"] = DonationLink;
|
|
@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.Style = void 0;
|
|
7
|
-
var Style = Object.freeze({
|
|
7
|
+
var Style = exports.Style = Object.freeze({
|
|
8
8
|
DEFAULT: 'default',
|
|
9
9
|
PENCIL: 'pencil',
|
|
10
10
|
UNDER_CONSTRUCTION: 'under_construction'
|
|
11
|
-
});
|
|
12
|
-
exports.Style = Style;
|
|
11
|
+
});
|