@twreporter/react-components 8.17.0-rc.1 → 8.17.0-rc.11

package/lib/button/stories/link.stories.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.changeTextComponent = exports.link = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _getEnumArg = require("../../storybook/utils/get-enum-arg");
+
+var _link = _interopRequireDefault(require("../components/link"));
+
+var _paragraph = require("../../text/paragraph");
+
+var _headline = require("../../text/headline");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Button/Link',
+  component: _link["default"],
+  argTypes: {
+    type: (0, _getEnumArg.getRadioArg)(_link["default"].Type, _link["default"].Type.DEFAULT),
+    // textComponent is only for storybook showcase, not real props
+    textComponent: {
+      defaultValue: 'P2',
+      options: ['not assign', 'P2', 'H4'],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_link["default"], args);
+};
+
+var link = Template.bind({});
+exports.link = link;
+link.args = {
+  text: '文字',
+  type: _link["default"].Type.DEFAULT,
+  link: {
+    to: 'https://www.twreporter.org'
+  }
+};
+link.parameters = {
+  controls: {
+    exclude: ['textComponent']
+  }
+};
+
+var changeTextComponent = function changeTextComponent(args) {
+  if (args.textComponent === 'P2') {
+    args.TextComponent = _paragraph.P2;
+  }
+
+  if (args.textComponent === 'H4') {
+    args.TextComponent = _headline.H4;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_link["default"], args);
+};
+
+exports.changeTextComponent = changeTextComponent;
+changeTextComponent.args = {
+  text: '文字',
+  type: _link["default"].Type.DEFAULT,
+  textComponent: 'P2',
+  link: {
+    to: 'https://www.twreporter.org'
+  }
+};
+changeTextComponent.parameters = {
+  controls: {
+    exclude: ['TextComponent']
+  }
+};

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

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withArrowIcon = exports.pillButton = exports["default"] = void 0;
+exports.toggleIconDisplay = exports.pillButton = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _getEnumArg = require("../../storybook/utils/get-enum-arg");
+
 var _pillButton = _interopRequireDefault(require("../components/pillButton"));
 
 var _icon = require("../../icon");
 
-var _size = require("../constants/size");
-
-var _type = require("../constants/type");
+var _enums = require("../enums");
 
-var _theme = require("@twreporter/core/lib/constants/theme");
+var _constants = require("../../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -23,9 +23,23 @@ var _default = {
   title: 'Button/Pill Button',
   component: _pillButton["default"],
   argTypes: {
-    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
-    type: _type.TYPE_STORYBOOK_ARG_TYPE,
-    size: _size.SIZE_STORYBOOK_ARG_TYPE
+    theme: _constants.THEME_STORYBOOK_ARG_TYPE,
+    type: (0, _getEnumArg.getRadioArg)(_enums.Type, _enums.Type.PRIMARY),
+    size: _constants.SIZE_STORYBOOK_ARG_TYPE,
+    style: (0, _getEnumArg.getRadioArg)(_enums.Style, _enums.Style.BRAND),
+    // showLeft & showRight args are only for storybook check
+    showLeft: {
+      defaultValue: true,
+      control: {
+        type: 'boolean'
+      }
+    },
+    showRight: {
+      defaultValue: true,
+      control: {
+        type: 'boolean'
+      }
+    }
   }
 };
 exports["default"] = _default;
@@ -38,20 +52,37 @@ var pillButton = Template.bind({});
 exports.pillButton = pillButton;
 pillButton.args = {
   text: '文字',
-  size: _size.SIZE.S,
-  theme: _theme.THEME.normal,
-  type: _type.TYPE.primary,
+  size: _pillButton["default"].Size.S,
+  theme: _pillButton["default"].THEME.normal,
+  style: _pillButton["default"].Style.BRAND,
+  type: _pillButton["default"].Type.PRIMARY,
   disabled: false
 };
-var withArrowIcon = Template.bind({});
-exports.withArrowIcon = withArrowIcon;
-withArrowIcon.args = {
-  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-    direction: "right"
-  }),
+pillButton.parameters = {
+  controls: {
+    exclude: ['showLeft', 'showRight']
+  }
+};
+
+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: _size.SIZE.S,
-  theme: _theme.THEME.normal,
-  type: _type.TYPE.primary,
+  size: _pillButton["default"].Size.S,
+  theme: _pillButton["default"].THEME.normal,
+  style: _pillButton["default"].Style.BRAND,
+  type: _pillButton["default"].Type.PRIMARY,
   disabled: false
+};
+toggleIconDisplay.parameters = {
+  controls: {
+    exclude: ['leftIconComponent', 'rightIconComponent']
+  }
 };

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

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withArrowIcon = exports.textButton = exports["default"] = void 0;
+exports.toggleIconDisplay = exports.textButton = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _getEnumArg = require("../../storybook/utils/get-enum-arg");
+
 var _textButton = _interopRequireDefault(require("../components/textButton"));
 
 var _icon = require("../../icon");
 
-var _size = require("../constants/size");
-
-var _type = require("../constants/type");
+var _enums = require("../enums");
 
-var _constants = require("../constants");
+var _constants = require("../../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -23,15 +23,22 @@ var _default = {
   title: 'Button/Text Button',
   component: _textButton["default"],
   argTypes: {
-    theme: {
-      defaultValue: _constants.TEXT_BUTTON_THEME.normal,
-      options: Object.values(_constants.TEXT_BUTTON_THEME),
+    theme: _constants.THEME_STORYBOOK_ARG_TYPE,
+    type: (0, _getEnumArg.getRadioArg)(_enums.Type, _enums.Type.PRIMARY),
+    size: _constants.SIZE_STORYBOOK_ARG_TYPE,
+    // showLeft & showRight args are only for storybook check
+    showLeft: {
+      defaultValue: true,
       control: {
-        type: 'radio'
+        type: 'boolean'
       }
     },
-    type: _type.TYPE_STORYBOOK_ARG_TYPE,
-    size: _size.SIZE_STORYBOOK_ARG_TYPE
+    showRight: {
+      defaultValue: true,
+      control: {
+        type: 'boolean'
+      }
+    }
   }
 };
 exports["default"] = _default;
@@ -44,25 +51,47 @@ var textButton = Template.bind({});
 exports.textButton = textButton;
 textButton.args = {
   text: '文字',
-  size: _size.SIZE.S,
-  theme: _constants.TEXT_BUTTON_THEME.normal,
-  type: _type.TYPE.primary,
+  size: _textButton["default"].Size.S,
+  theme: _textButton["default"].THEME.normal,
+  type: _textButton["default"].Type.PRIMARY,
   active: false,
-  disabled: false
-};
-var withArrowIcon = Template.bind({});
-exports.withArrowIcon = withArrowIcon;
-withArrowIcon.args = {
+  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 = 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: _size.SIZE.S,
-  theme: _constants.TEXT_BUTTON_THEME.normal,
-  type: _type.TYPE.primary,
+  size: _textButton["default"].Size.S,
+  theme: _textButton["default"].THEME.normal,
+  type: _textButton["default"].Type.PRIMARY,
   active: false,
   disabled: false
+};
+toggleIconDisplay.parameters = {
+  controls: {
+    exclude: ['leftIconComponent', 'rightIconComponent']
+  }
 };

package/lib/button/utils/size.js

@@ -10,14 +10,14 @@ var getSizeStyle = function getSizeStyle(size) {
     case 'L':
       return {
         iconSize: '24px',
-        padding: '8px 24px'
+        padding: '8px 16px'
       };
 
     case 'S':
     default:
       return {
         iconSize: '18px',
-        padding: '4px 16px'
+        padding: '4px 12px'
       };
   }
 };

package/lib/button/utils/theme.js

@@ -7,12 +7,12 @@ exports["default"] = exports.getActiveTextButtonTheme = exports.getDisabledTextB
 
 var _color = require("@twreporter/core/lib/constants/color");
 
-var _theme = require("@twreporter/core/lib/constants/theme");
+var _enums = require("../enums");
 
-var _constants = require("../constants");
+var _theme = require("@twreporter/core/lib/constants/theme");
 
 // @twreporter
-var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled) {
+var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled, style) {
   if (disabled) {
     switch (theme) {
       case _theme.THEME.transparent:
@@ -53,18 +53,39 @@ var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled
     case _theme.THEME.normal:
     case _theme.THEME.index:
     default:
-      return {
-        color: _color.colorGrayscale.white,
-        bgColor: _color.colorBrand.heavy,
-        hoverColor: _color.colorGrayscale.white,
-        hoverBgColor: _color.colorBrand.dark
-      };
+      switch (style) {
+        case _enums.Style.DARK:
+          return {
+            color: _color.colorGrayscale.white,
+            bgColor: _color.colorGrayscale.gray800,
+            hoverColor: _color.colorGrayscale.white,
+            hoverBgColor: _color.colorGrayscale.black
+          };
+
+        case _enums.Style.LIGHT:
+          return {
+            color: _color.colorGrayscale.gray800,
+            bgColor: _color.colorGrayscale.white,
+            hoverColor: _color.colorGrayscale.gray800,
+            hoverBgColor: _color.colorGrayscale.gray200
+          };
+
+        case _enums.Style.BRAND:
+        default:
+          return {
+            color: _color.colorGrayscale.white,
+            bgColor: _color.colorBrand.heavy,
+            hoverColor: _color.colorGrayscale.white,
+            hoverBgColor: _color.colorBrand.dark
+          };
+      }
+
   }
 };
 
 exports.getFilledPillButtonTheme = getFilledPillButtonTheme;
 
-var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabled) {
+var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabled, style) {
   if (disabled) {
     switch (theme) {
       case _theme.THEME.transparent:
@@ -113,12 +134,33 @@ var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabl
     case _theme.THEME.normal:
     case _theme.THEME.index:
     default:
-      return {
-        color: _color.colorBrand.heavy,
-        bgColor: _color.colorBrand.heavy,
-        hoverColor: _color.colorBrand.dark,
-        hoverBgColor: _color.colorBrand.dark
-      };
+      switch (style) {
+        case _enums.Style.DARK:
+          return {
+            color: _color.colorGrayscale.gray800,
+            bgColor: _color.colorGrayscale.gray800,
+            hoverColor: _color.colorGrayscale.black,
+            hoverBgColor: _color.colorGrayscale.black
+          };
+
+        case _enums.Style.LIGHT:
+          return {
+            color: _color.colorGrayscale.gray800,
+            bgColor: _color.colorGrayscale.white,
+            hoverColor: _color.colorGrayscale.gray800,
+            hoverBgColor: _color.colorGrayscale.gray200
+          };
+
+        case _enums.Style.BRAND:
+        default:
+          return {
+            color: _color.colorBrand.heavy,
+            bgColor: _color.colorBrand.heavy,
+            hoverColor: _color.colorBrand.dark,
+            hoverBgColor: _color.colorBrand.dark
+          };
+      }
+
   }
 };
 
@@ -282,37 +324,37 @@ exports.getIconWithTextButtonTheme = getIconWithTextButtonTheme;
 
 var getPrimaryTextButtonTheme = function getPrimaryTextButtonTheme(theme) {
   switch (theme) {
-    case _constants.TEXT_BUTTON_THEME.photography:
+    case _theme.TEXT_BUTTON_THEME.photography:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorSupportive.main
       };
 
-    case _constants.TEXT_BUTTON_THEME.transparent:
+    case _theme.TEXT_BUTTON_THEME.transparent:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case _constants.TEXT_BUTTON_THEME.brand:
+    case _theme.TEXT_BUTTON_THEME.brand:
       return {
         color: _color.colorBrand.heavy,
         hoverColor: _color.colorBrand.dark
       };
 
-    case _constants.TEXT_BUTTON_THEME.dark:
+    case _theme.TEXT_BUTTON_THEME.dark:
       return {
         color: _color.colorGrayscale.gray800,
         hoverColor: _color.colorBrand.heavy
       };
 
-    case _constants.TEXT_BUTTON_THEME.light:
+    case _theme.TEXT_BUTTON_THEME.light:
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case _constants.TEXT_BUTTON_THEME.normal:
+    case _theme.TEXT_BUTTON_THEME.normal:
     default:
       return {
         color: _color.colorGrayscale.gray800,
@@ -325,37 +367,37 @@ exports.getPrimaryTextButtonTheme = getPrimaryTextButtonTheme;
 
 var getSecondaryTextButtonTheme = function getSecondaryTextButtonTheme(theme) {
   switch (theme) {
-    case _constants.TEXT_BUTTON_THEME.photography:
+    case _theme.TEXT_BUTTON_THEME.photography:
       return {
         color: _color.colorGrayscale.gray400,
         hoverColor: _color.colorSupportive.main
       };
 
-    case _constants.TEXT_BUTTON_THEME.transparent:
+    case _theme.TEXT_BUTTON_THEME.transparent:
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case _constants.TEXT_BUTTON_THEME.brand:
+    case _theme.TEXT_BUTTON_THEME.brand:
       return {
         color: _color.colorBrand.heavy,
         hoverColor: _color.colorBrand.dark
       };
 
-    case _constants.TEXT_BUTTON_THEME.dark:
+    case _theme.TEXT_BUTTON_THEME.dark:
       return {
         color: _color.colorGrayscale.gray800,
         hoverColor: _color.colorBrand.heavy
       };
 
-    case _constants.TEXT_BUTTON_THEME.light:
+    case _theme.TEXT_BUTTON_THEME.light:
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case _constants.TEXT_BUTTON_THEME.normal:
+    case _theme.TEXT_BUTTON_THEME.normal:
     default:
       return {
         color: _color.colorGrayscale.gray600,
@@ -368,22 +410,22 @@ exports.getSecondaryTextButtonTheme = getSecondaryTextButtonTheme;
 
 var getDisabledTextButtonTheme = function getDisabledTextButtonTheme(theme) {
   switch (theme) {
-    case _constants.TEXT_BUTTON_THEME.photography:
+    case _theme.TEXT_BUTTON_THEME.photography:
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.gray600
       };
 
-    case _constants.TEXT_BUTTON_THEME.transparent:
+    case _theme.TEXT_BUTTON_THEME.transparent:
       return {
         color: _color.colorGrayscale.gray200,
         hoverColor: _color.colorGrayscale.gray200
       };
 
-    case _constants.TEXT_BUTTON_THEME.brand:
-    case _constants.TEXT_BUTTON_THEME.dark:
-    case _constants.TEXT_BUTTON_THEME.light:
-    case _constants.TEXT_BUTTON_THEME.normal:
+    case _theme.TEXT_BUTTON_THEME.brand:
+    case _theme.TEXT_BUTTON_THEME.dark:
+    case _theme.TEXT_BUTTON_THEME.light:
+    case _theme.TEXT_BUTTON_THEME.normal:
     default:
       return {
         color: _color.colorGrayscale.gray400,
@@ -396,37 +438,37 @@ exports.getDisabledTextButtonTheme = getDisabledTextButtonTheme;
 
 var getActiveTextButtonTheme = function getActiveTextButtonTheme(theme) {
   switch (theme) {
-    case _constants.TEXT_BUTTON_THEME.photography:
+    case _theme.TEXT_BUTTON_THEME.photography:
       return {
         color: _color.colorSupportive.main,
         hoverColor: _color.colorSupportive.main
       };
 
-    case _constants.TEXT_BUTTON_THEME.transparent:
+    case _theme.TEXT_BUTTON_THEME.transparent:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorGrayscale.white
       };
 
-    case _constants.TEXT_BUTTON_THEME.brand:
+    case _theme.TEXT_BUTTON_THEME.brand:
       return {
-        color: _color.colorBrand.heavy,
+        color: _color.colorBrand.dark,
         hoverColor: _color.colorBrand.dark
       };
 
-    case _constants.TEXT_BUTTON_THEME.dark:
+    case _theme.TEXT_BUTTON_THEME.dark:
       return {
-        color: _color.colorGrayscale.gray800,
+        color: _color.colorBrand.heavy,
         hoverColor: _color.colorBrand.heavy
       };
 
-    case _constants.TEXT_BUTTON_THEME.light:
+    case _theme.TEXT_BUTTON_THEME.light:
       return {
-        color: _color.colorGrayscale.gray600,
+        color: _color.colorGrayscale.gray800,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case _constants.TEXT_BUTTON_THEME.normal:
+    case _theme.TEXT_BUTTON_THEME.normal:
     default:
       return {
         color: _color.colorBrand.heavy,