@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.
Files changed (152) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/lib/badge/badge.stories.js +3 -9
  3. package/lib/badge/index.js +8 -24
  4. package/lib/bookmark-list/bookmark.js +20 -69
  5. package/lib/bookmark-list/bookmarks.js +10 -40
  6. package/lib/bookmark-list/customized-link.js +4 -14
  7. package/lib/bookmark-list/image-wrapper.js +9 -36
  8. package/lib/bookmark-list/index.js +36 -91
  9. package/lib/bookmark-list/redirect-to-sign-in.js +1 -10
  10. package/lib/bookmark-list/stories/bookmark.stories.js +3 -9
  11. package/lib/bookmark-widget/index.js +91 -220
  12. package/lib/button/components/iconButton.js +15 -34
  13. package/lib/button/components/iconWithTextButton.js +16 -31
  14. package/lib/button/components/link.js +27 -45
  15. package/lib/button/components/menuButton.js +18 -38
  16. package/lib/button/components/pillButton.js +31 -60
  17. package/lib/button/components/textButton.js +29 -61
  18. package/lib/button/components/toggleButton.js +11 -31
  19. package/lib/button/enums/index.js +4 -7
  20. package/lib/button/index.js +5 -18
  21. package/lib/button/stories/iconButton.stories.js +4 -15
  22. package/lib/button/stories/iconWithTextButton.stories.js +4 -13
  23. package/lib/button/stories/link.stories.js +9 -27
  24. package/lib/button/stories/menuButton.stories.js +3 -10
  25. package/lib/button/stories/pillButton.stories.js +4 -15
  26. package/lib/button/stories/textButton.stories.js +4 -15
  27. package/lib/button/stories/toggleButton.stories.js +3 -8
  28. package/lib/button/utils/size.js +3 -8
  29. package/lib/button/utils/theme.js +11 -102
  30. package/lib/card/components/article-card.js +31 -59
  31. package/lib/card/components/dialog.js +7 -22
  32. package/lib/card/components/short-story.js +24 -44
  33. package/lib/card/index.js +2 -8
  34. package/lib/card/stories/articleCard.stories.js +3 -14
  35. package/lib/card/stories/dialog.stories.js +3 -11
  36. package/lib/card/stories/shortStory.stories.js +3 -16
  37. package/lib/checkbox/checkbox.stories.js +3 -8
  38. package/lib/checkbox/index.js +10 -31
  39. package/lib/color.stories.js +9 -34
  40. package/lib/confirmation/index.js +7 -29
  41. package/lib/customized-link.js +5 -18
  42. package/lib/divider.js +3 -19
  43. package/lib/divider.stories.js +5 -18
  44. package/lib/donation-link.js +2 -14
  45. package/lib/empty-state/enums/index.js +2 -3
  46. package/lib/empty-state/index.js +20 -41
  47. package/lib/empty-state/stories/empty-guide.stories.js +3 -11
  48. package/lib/error/index.js +3 -8
  49. package/lib/error/message.js +3 -44
  50. package/lib/footer/constants/links.js +10 -16
  51. package/lib/footer/footer.stories.js +3 -10
  52. package/lib/footer/index.js +5 -40
  53. package/lib/footer/link.js +15 -46
  54. package/lib/footer/logo.js +12 -32
  55. package/lib/hook/index.js +3 -18
  56. package/lib/hook/use-bookmark.js +21 -47
  57. package/lib/hook/use-font-face-observer.js +9 -24
  58. package/lib/hook/use-outside-click.js +4 -9
  59. package/lib/icon/enum/index.js +5 -9
  60. package/lib/icon/index.js +49 -105
  61. package/lib/icon/stories/arrow.stories.js +7 -16
  62. package/lib/icon/stories/article.stories.js +2 -7
  63. package/lib/icon/stories/bookmark.stories.js +6 -14
  64. package/lib/icon/stories/changeIconColor.stories.js +2 -12
  65. package/lib/icon/stories/clock.stories.js +2 -7
  66. package/lib/icon/stories/copy.stories.js +2 -7
  67. package/lib/icon/stories/cross.stories.js +2 -7
  68. package/lib/icon/stories/hamburger.stories.js +2 -7
  69. package/lib/icon/stories/home.stories.js +2 -7
  70. package/lib/icon/stories/letter.stories.js +2 -7
  71. package/lib/icon/stories/loading.stories.js +2 -7
  72. package/lib/icon/stories/member.stories.js +2 -7
  73. package/lib/icon/stories/printer.stories.js +2 -7
  74. package/lib/icon/stories/search.stories.js +2 -7
  75. package/lib/icon/stories/share.stories.js +2 -7
  76. package/lib/icon/stories/socialMedia.stories.js +2 -8
  77. package/lib/icon/stories/text.stories.js +2 -7
  78. package/lib/icon/stories/topic.stories.js +2 -7
  79. package/lib/image-with-fallback.js +22 -52
  80. package/lib/input/components/search-bar.js +40 -85
  81. package/lib/input/components/text-field.js +20 -40
  82. package/lib/input/enums/index.js +6 -8
  83. package/lib/input/index.js +2 -7
  84. package/lib/input/stories/search-bar.stories.js +3 -16
  85. package/lib/input/stories/text-field.stories.js +3 -14
  86. package/lib/input/utils/theme.js +2 -9
  87. package/lib/is-fetching-wrapper.js +16 -48
  88. package/lib/junior-link.js +6 -29
  89. package/lib/link-with-tracker.js +14 -47
  90. package/lib/listing-page/components/card-list.js +20 -51
  91. package/lib/listing-page/components/image.js +15 -46
  92. package/lib/listing-page/components/list-item.js +18 -65
  93. package/lib/listing-page/components/list.js +17 -61
  94. package/lib/listing-page/components/page-content.js +2 -12
  95. package/lib/listing-page/components/topics/index.js +26 -74
  96. package/lib/listing-page/components/topics/post-item.js +14 -47
  97. package/lib/listing-page/components/topics/posts.js +1 -10
  98. package/lib/listing-page/components/topics/section.js +3 -25
  99. package/lib/listing-page/components/topics/topic-item.js +17 -56
  100. package/lib/listing-page/constants/mockup-spec.js +2 -3
  101. package/lib/listing-page/constants/predefined-css.js +2 -10
  102. package/lib/listing-page/constants/prop-types.js +2 -7
  103. package/lib/listing-page/constants/topics.js +2 -3
  104. package/lib/listing-page/index.js +2 -8
  105. package/lib/listing-page/stories/cardList.stories.js +3 -10
  106. package/lib/logo/components/logo-footer.js +6 -21
  107. package/lib/logo/components/logo-header.js +7 -23
  108. package/lib/logo/components/logo-loading-fallback.js +4 -13
  109. package/lib/logo/components/logo-symbol.js +7 -23
  110. package/lib/logo/index.js +2 -9
  111. package/lib/logo/stories/logoFooter.stories.js +2 -8
  112. package/lib/logo/stories/logoHeader.stories.js +3 -9
  113. package/lib/logo/stories/logoLoadingFallback.stories.js +2 -8
  114. package/lib/logo/stories/logoSymbol.stories.js +3 -9
  115. package/lib/logo/utils/path.js +2 -9
  116. package/lib/material-icon.js +9 -17
  117. package/lib/mobile-member-role-card/index.js +22 -49
  118. package/lib/mobile-member-role-card/stories/member-role-card.stories.js +3 -12
  119. package/lib/mobile-pop-up-modal.js +10 -44
  120. package/lib/more.js +10 -37
  121. package/lib/pagination/index.js +17 -83
  122. package/lib/podcast-link.js +6 -29
  123. package/lib/rwd.js +6 -26
  124. package/lib/shared-enum.js +2 -3
  125. package/lib/side-bar/index.js +16 -59
  126. package/lib/simple-header/index.js +2 -12
  127. package/lib/simple-header/simpleHeader.stories.js +3 -8
  128. package/lib/snack-bar/components/snack-bar.js +9 -20
  129. package/lib/snack-bar/hooks/use-snack-bar.js +12 -25
  130. package/lib/snack-bar/index.js +2 -7
  131. package/lib/snack-bar/stories/snackBar.stories.js +12 -29
  132. package/lib/snack-bar/utils/theme.js +3 -9
  133. package/lib/storybook/constants/index.js +3 -11
  134. package/lib/storybook/utils/get-enum-arg.js +2 -5
  135. package/lib/table-of-contents/index.js +62 -128
  136. package/lib/text/constants/headline-type.js +5 -8
  137. package/lib/text/enums/index.js +3 -5
  138. package/lib/text/headline.js +14 -41
  139. package/lib/text/paragraph.js +13 -34
  140. package/lib/text/stories/headline.stories.js +8 -21
  141. package/lib/text/stories/paragraph.stories.js +6 -17
  142. package/lib/text/utils/webfonts.js +9 -22
  143. package/lib/title-bar/components/tab.js +27 -69
  144. package/lib/title-bar/components/title1.js +6 -17
  145. package/lib/title-bar/components/title2.js +7 -23
  146. package/lib/title-bar/index.js +2 -8
  147. package/lib/title-bar/stories/tab.stories.js +5 -12
  148. package/lib/title-bar/stories/title1.stories.js +5 -12
  149. package/lib/title-bar/stories/title2.stories.js +3 -11
  150. package/lib/utils/link-with-params.js +0 -5
  151. package/package.json +4 -4
  152. package/lib/hook/use-store.js +0 -46
@@ -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
- value = _ref$value === void 0 ? false : _ref$value,
65
- _ref$label = _ref.label,
66
- label = _ref$label === void 0 ? '' : _ref$label,
67
- _ref$disabled = _ref.disabled,
68
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
69
- _ref$onChange = _ref.onChange,
70
- onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
71
- props = _objectWithoutProperties(_ref, _excluded);
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;
@@ -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
- width = _ref.width,
105
- type = _ref.type,
106
- showColorText = _ref.showColorText,
107
- background = _ref.background;
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["default"] = _default;
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
- content = props.content,
96
- cancel = props.cancel,
97
- confirm = props.confirm,
98
- onConfirm = props.onConfirm,
99
- onCancel = props.onCancel,
100
- toShowWarningIcon = props.toShowWarningIcon;
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;
@@ -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
- isExternal = _ref$isExternal === void 0 ? true : _ref$isExternal,
27
- _ref$to = _ref.to,
28
- to = _ref$to === void 0 ? '' : _ref$to,
29
- rest = _objectWithoutProperties(_ref, _excluded);
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
- direction = _ref$direction === void 0 ? Direction.HORIZONTAL : _ref$direction,
60
- props = _objectWithoutProperties(_ref, _excluded);
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;
@@ -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.divider = divider;
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.horizontal = horizontal;
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
+ };
@@ -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
- props = _objectWithoutProperties(_ref, _excluded);
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
+ });