@twreporter/react-components 8.21.0-rc.0 → 8.21.0-rc.10

package/lib/button/stories/pillButton.stories.js

@@ -19,6 +19,7 @@ var _constants = require("../../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Button/Pill Button',
   component: _pillButton["default"],
@@ -43,48 +44,44 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_pillButton["default"], args);
+var pillButton = {
+  args: {
+    text: '文字',
+    size: _pillButton["default"].Size.S,
+    theme: _pillButton["default"].THEME.normal,
+    style: _pillButton["default"].Style.BRAND,
+    type: _pillButton["default"].Type.PRIMARY,
+    disabled: false,
+    loading: false
+  },
+  parameters: {
+    controls: {
+      exclude: ['showLeft', 'showRight']
+    }
+  }
 };
-
-var pillButton = Template.bind({});
 exports.pillButton = pillButton;
-pillButton.args = {
-  text: '文字',
-  size: _pillButton["default"].Size.S,
-  theme: _pillButton["default"].THEME.normal,
-  style: _pillButton["default"].Style.BRAND,
-  type: _pillButton["default"].Type.PRIMARY,
-  disabled: false,
-  loading: false
-};
-pillButton.parameters = {
-  controls: {
-    exclude: ['showLeft', 'showRight']
+var toggleIconDisplay = {
+  render: function render(args) {
+    args.leftIconComponent = args.showLeft ? /*#__PURE__*/_react["default"].createElement(_icon.Cross, null) : null;
+    args.rightIconComponent = args.showRight ? /*#__PURE__*/_react["default"].createElement(_icon.Cross, null) : null;
+    return /*#__PURE__*/_react["default"].createElement(_pillButton["default"], args);
+  },
+  args: {
+    showLeft: true,
+    showRight: true,
+    text: '文字',
+    size: _pillButton["default"].Size.S,
+    theme: _pillButton["default"].THEME.normal,
+    style: _pillButton["default"].Style.BRAND,
+    type: _pillButton["default"].Type.PRIMARY,
+    disabled: false,
+    loading: false
+  },
+  parameters: {
+    controls: {
+      exclude: ['leftIconComponent', 'rightIconComponent']
+    }
   }
 };
-
-var toggleIconDisplay = function toggleIconDisplay(args) {
-  args.leftIconComponent = args.showLeft ? /*#__PURE__*/_react["default"].createElement(_icon.Cross, null) : null;
-  args.rightIconComponent = args.showRight ? /*#__PURE__*/_react["default"].createElement(_icon.Cross, null) : null;
-  return /*#__PURE__*/_react["default"].createElement(_pillButton["default"], args);
-};
-
-exports.toggleIconDisplay = toggleIconDisplay;
-toggleIconDisplay.args = {
-  showLeft: true,
-  showRight: true,
-  text: '文字',
-  size: _pillButton["default"].Size.S,
-  theme: _pillButton["default"].THEME.normal,
-  style: _pillButton["default"].Style.BRAND,
-  type: _pillButton["default"].Type.PRIMARY,
-  disabled: false,
-  loading: false
-};
-toggleIconDisplay.parameters = {
-  controls: {
-    exclude: ['leftIconComponent', 'rightIconComponent']
-  }
-};
+exports.toggleIconDisplay = toggleIconDisplay;

package/lib/button/stories/textButton.stories.js

@@ -19,6 +19,7 @@ var _constants = require("../../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Button/Text Button',
   component: _textButton["default"],
@@ -43,58 +44,54 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_textButton["default"], args);
+var textButton = {
+  args: {
+    text: '文字',
+    size: _textButton["default"].Size.S,
+    theme: _textButton["default"].THEME.normal,
+    type: _textButton["default"].Type.PRIMARY,
+    style: _textButton["default"].Style.DARK,
+    active: false,
+    disabled: false,
+    leftIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+      direction: "left"
+    }),
+    rightIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+      direction: "right"
+    })
+  },
+  parameters: {
+    controls: {
+      exclude: ['showLeft', 'showRight']
+    }
+  }
 };
-
-var textButton = Template.bind({});
 exports.textButton = textButton;
-textButton.args = {
-  text: '文字',
-  size: _textButton["default"].Size.S,
-  theme: _textButton["default"].THEME.normal,
-  type: _textButton["default"].Type.PRIMARY,
-  style: _textButton["default"].Style.DARK,
-  active: false,
-  disabled: false,
-  leftIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-    direction: "left"
-  }),
-  rightIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-    direction: "right"
-  })
-};
-textButton.parameters = {
-  controls: {
-    exclude: ['showLeft', 'showRight']
+var toggleIconDisplay = {
+  render: function render(args) {
+    args.leftIconComponent = args.showLeft ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+      direction: "left"
+    }) : null;
+    args.rightIconComponent = args.showRight ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+      direction: "right"
+    }) : null;
+    return /*#__PURE__*/_react["default"].createElement(_textButton["default"], args);
+  },
+  args: {
+    showLeft: true,
+    showRight: true,
+    text: '文字',
+    size: _textButton["default"].Size.S,
+    theme: _textButton["default"].THEME.normal,
+    type: _textButton["default"].Type.PRIMARY,
+    style: _textButton["default"].Style.DARK,
+    active: false,
+    disabled: false
+  },
+  parameters: {
+    controls: {
+      exclude: ['leftIconComponent', 'rightIconComponent']
+    }
   }
 };
-
-var toggleIconDisplay = function toggleIconDisplay(args) {
-  args.leftIconComponent = args.showLeft ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-    direction: "left"
-  }) : null;
-  args.rightIconComponent = args.showRight ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-    direction: "right"
-  }) : null;
-  return /*#__PURE__*/_react["default"].createElement(_textButton["default"], args);
-};
-
-exports.toggleIconDisplay = toggleIconDisplay;
-toggleIconDisplay.args = {
-  showLeft: true,
-  showRight: true,
-  text: '文字',
-  size: _textButton["default"].Size.S,
-  theme: _textButton["default"].THEME.normal,
-  type: _textButton["default"].Type.PRIMARY,
-  style: _textButton["default"].Style.DARK,
-  active: false,
-  disabled: false
-};
-toggleIconDisplay.parameters = {
-  controls: {
-    exclude: ['leftIconComponent', 'rightIconComponent']
-  }
-};
+exports.toggleIconDisplay = toggleIconDisplay;

package/lib/button/stories/toggleButton.stories.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toggleButton = exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _toggleButton = _interopRequireDefault(require("../components/toggleButton"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -22,17 +20,13 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_toggleButton["default"], args);
+var toggleButton = {
+  args: {
+    value: false,
+    labelOn: '已訂閱',
+    labelOff: '未訂閱',
+    disabled: false,
+    onChange: function onChange() {}
+  }
 };
-
-var toggleButton = Template.bind({});
-exports.toggleButton = toggleButton;
-toggleButton.args = {
-  value: false,
-  labelOn: '已訂閱',
-  labelOff: '未訂閱',
-  disabled: false,
-  onChange: function onChange() {}
-};
+exports.toggleButton = toggleButton;

package/lib/button/utils/theme.js

@@ -37,7 +37,7 @@ var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled
     case _theme.THEME.photography:
       return {
         color: _color.colorPhoto.dark,
-        bgColor: _color.colorSupportive.main,
+        bgColor: _color.colorSupportive.pastel,
         hoverColor: _color.colorGrayscale.white,
         hoverBgColor: _color.colorSupportive.heavy
       };
@@ -117,8 +117,8 @@ var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabl
   switch (theme) {
     case _theme.THEME.photography:
       return {
-        color: _color.colorSupportive.main,
-        bgColor: _color.colorSupportive.main,
+        color: _color.colorSupportive.pastel,
+        bgColor: _color.colorSupportive.pastel,
         hoverColor: _color.colorSupportive.heavy,
         hoverBgColor: _color.colorSupportive.heavy
       };
@@ -180,13 +180,13 @@ var getPrimaryIconButtonTheme = function getPrimaryIconButtonTheme(theme, isActi
     case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.white,
-        hoverColor: _color.colorSupportive.main
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case "".concat(_theme.THEME.photography, "-active"):
       return {
-        color: _color.colorSupportive.main,
-        hoverColor: _color.colorSupportive.main
+        color: _color.colorSupportive.pastel,
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case _theme.THEME.transparent:
@@ -232,13 +232,13 @@ var getSecondaryIconButtonTheme = function getSecondaryIconButtonTheme(theme, is
     case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.gray400,
-        hoverColor: _color.colorSupportive.main
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case "".concat(_theme.THEME.photography, "-active"):
       return {
-        color: _color.colorSupportive.main,
-        hoverColor: _color.colorSupportive.main
+        color: _color.colorSupportive.pastel,
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case _theme.THEME.transparent:
@@ -284,13 +284,13 @@ var getIconWithTextButtonTheme = function getIconWithTextButtonTheme(theme, isAc
     case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.gray200,
-        hoverColor: _color.colorSupportive.main
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case "".concat(_theme.THEME.photography, "-active"):
       return {
-        color: _color.colorSupportive.main,
-        hoverColor: _color.colorSupportive.main
+        color: _color.colorSupportive.pastel,
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case _theme.THEME.transparent:
@@ -327,7 +327,7 @@ var getPrimaryTextButtonTheme = function getPrimaryTextButtonTheme(theme, style)
     case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.white,
-        hoverColor: _color.colorSupportive.main
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case _theme.THEME.transparent:
@@ -369,7 +369,7 @@ var getSecondaryTextButtonTheme = function getSecondaryTextButtonTheme(theme, st
     case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.gray400,
-        hoverColor: _color.colorSupportive.main
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case _theme.THEME.transparent:
@@ -435,8 +435,8 @@ var getActiveTextButtonTheme = function getActiveTextButtonTheme(theme, style) {
   switch (theme) {
     case _theme.THEME.photography:
       return {
-        color: _color.colorSupportive.main,
-        hoverColor: _color.colorSupportive.main
+        color: _color.colorSupportive.pastel,
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case _theme.THEME.transparent:

package/lib/card/stories/articleCard.stories.js

@@ -17,6 +17,7 @@ var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Card/Article',
   component: _articleCard["default"],
@@ -34,22 +35,23 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   return props.size === _articleCard["default"].Size.S ? '343' : '878';
 });
 
-var article = function article(args) {
-  return /*#__PURE__*/_react["default"].createElement(Container, {
-    size: args.size
-  }, /*#__PURE__*/_react["default"].createElement(_articleCard["default"], args));
-};
-
-exports.article = article;
-article.args = {
-  size: _articleCard["default"].Size.L,
-  title: '文章標題文章標題文章標題文章標題文章標題文章標題文章標題文章標題',
-  description: '文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述',
-  category: '主分類',
-  date: '2022/01/01',
-  image: {
-    src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png',
-    alt: 'test'
+var article = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(Container, {
+      size: args.size
+    }, /*#__PURE__*/_react["default"].createElement(_articleCard["default"], args));
   },
-  releaseBranch: _releaseBranch.BRANCH.master
-};
+  args: {
+    size: _articleCard["default"].Size.L,
+    title: '文章標題文章標題文章標題文章標題文章標題文章標題文章標題文章標題',
+    description: '文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述',
+    category: '主分類',
+    date: '2022/01/01',
+    image: {
+      src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png',
+      alt: 'test'
+    },
+    releaseBranch: _releaseBranch.BRANCH.master
+  }
+};
+exports.article = article;

package/lib/card/stories/dialog.stories.js

@@ -15,6 +15,7 @@ var _constants = require("../../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Card/Dialog',
   component: _dialog["default"],
@@ -27,18 +28,18 @@ var StyledDialog = /*#__PURE__*/(0, _styledComponents["default"])(_dialog["defau
   displayName: "dialogstories__StyledDialog",
   componentId: "sc-1h10bts-0"
 })(["width:fit-content;"]);
-
-var dialog = function dialog(args) {
-  return /*#__PURE__*/_react["default"].createElement(StyledDialog, args);
-};
-
-exports.dialog = dialog;
-dialog.args = {
-  text: '登出',
-  size: _dialog["default"].Size.S
-};
-dialog.parameters = {
-  backgrounds: {
-    "default": 'normal'
+var dialog = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(StyledDialog, args);
+  },
+  args: {
+    text: '登出',
+    size: _dialog["default"].Size.S
+  },
+  parameters: {
+    backgrounds: {
+      "default": 'normal'
+    }
   }
-};
+};
+exports.dialog = dialog;

package/lib/checkbox/checkbox.stories.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.checkbox = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _ = _interopRequireDefault(require("."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -22,18 +20,14 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_["default"], args);
-};
-
-var checkbox = Template.bind({});
-exports.checkbox = checkbox;
-checkbox.args = {
-  label: '藝術',
-  value: false,
-  disabled: false,
-  onChange: function onChange(e) {
-    console.log('callback', e.target.checked);
+var checkbox = {
+  args: {
+    label: '藝術',
+    value: false,
+    disabled: false,
+    onChange: function onChange(e) {
+      console.log('callback', e.target.checked);
+    }
   }
-};
+};
+exports.checkbox = checkbox;

package/lib/divider.stories.js

@@ -13,6 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Divider/Line',
   component: _divider["default"]
@@ -40,37 +41,38 @@ var VerticalContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig
   componentId: "sc-166xqvx-2"
 })(["height:200px;"]);
 
-var divider = function divider(args) {
-  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));
+var divider = {
+  render: function render(args) {
+    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));
+  },
+  args: {
+    direction: _divider["default"].Direction.HORIZONTAL
+  }
 };
-
 exports.divider = divider;
-divider.args = {
-  direction: _divider["default"].Direction.HORIZONTAL
-};
-
-var horizontal = function horizontal() {
-  return /*#__PURE__*/_react["default"].createElement(_divider["default"], {
-    direction: _divider["default"].Direction.HORIZONTAL
-  });
+var horizontal = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+      direction: _divider["default"].Direction.HORIZONTAL
+    });
+  },
+  parameters: {
+    controls: {
+      exclude: ['direction']
+    }
+  }
 };
-
 exports.horizontal = horizontal;
-horizontal.parameters = {
-  controls: {
-    exclude: ['direction']
+var vertical = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(VerticalContainer, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+      direction: _divider["default"].Direction.VERTICAL
+    }));
+  },
+  parameters: {
+    controls: {
+      exclude: ['direction']
+    }
   }
 };
-
-var vertical = function vertical() {
-  return /*#__PURE__*/_react["default"].createElement(VerticalContainer, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
-    direction: _divider["default"].Direction.VERTICAL
-  }));
-};
-
-exports.vertical = vertical;
-vertical.parameters = {
-  controls: {
-    exclude: ['direction']
-  }
-};
+exports.vertical = vertical;

package/lib/empty-state/stories/empty-guide.stories.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.emptyState = exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _index = _interopRequireDefault(require("../index"));
 
 var _enums = require("../enums");
@@ -26,17 +24,14 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var emptyState = function emptyState(args) {
-  return /*#__PURE__*/_react["default"].createElement(_index["default"], args);
+var emptyState = {
+  args: {
+    title: '文字',
+    showGuide: true,
+    guide: '文字文字',
+    showButton: true,
+    buttonText: '按鈕',
+    buttonUrl: '/'
+  }
 };
-
-exports.emptyState = emptyState;
-emptyState.args = {
-  title: '文字',
-  showGuide: true,
-  guide: '文字文字',
-  showButton: true,
-  buttonText: '按鈕',
-  buttonUrl: '/'
-};
+exports.emptyState = emptyState;