@twreporter/react-components 8.9.0-rc.3 → 8.9.0-rc.4

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.9.0-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.9.0-rc.3...@twreporter/react-components@8.9.0-rc.4) (2022-05-27)
+
+
+### Bug Fixes
+
+* address code review ([a0d5515](https://github.com/twreporter/twreporter-npm-packages/commit/a0d5515c4f1e8c11cbd1bd23880d4302af37b816))
+
+
+### Features
+
+* add IconButton, IconWithTextButton, Printer components ([819f246](https://github.com/twreporter/twreporter-npm-packages/commit/819f2461e0235826333544cae0d6e3a6115a1f8d))
+
+
+
+
+
 # [8.9.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.9.0-rc.2...@twreporter/react-components@8.9.0-rc.3) (2022-05-25)
 
 

package/lib/button/components/iconButton.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _theme = require("../utils/theme");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "iconButton__ButtonContainer",
+  componentId: "sc-1v7s35n-0"
+})(["cursor:pointer;display:flex;svg{width:24px;height:24px;background-color:", ";}", ""], function (props) {
+  return props.color;
+}, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover svg {\n      background-color: ", ";\n    }\n  "])), function (props) {
+  return props.hoverColor;
+}));
+
+var IconButton = function IconButton(_ref) {
+  var iconComponent = _ref.iconComponent,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'normal' : _ref$theme,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'primary' : _ref$type,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active;
+  var themeFunc = type === 'primary' ? _theme.getPrimaryIconButtonTheme : _theme.getSecondaryIconButtonTheme;
+
+  var _themeFunc = themeFunc(theme, active, disabled),
+      color = _themeFunc.color,
+      hoverColor = _themeFunc.hoverColor;
+
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    color: color,
+    hoverColor: hoverColor
+  }, iconComponent);
+};
+
+IconButton.propTypes = {
+  iconComponent: _propTypes["default"].elementType.isRequired,
+  theme: _propTypes["default"].oneOf(['normal', 'photography', 'transparent', 'index']),
+  type: _propTypes["default"].oneOf(['primary', 'secondary']),
+  disabled: _propTypes["default"].bool,
+  active: _propTypes["default"].bool
+};
+var _default = IconButton;
+exports["default"] = _default;

package/lib/button/components/iconWithTextButton.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _theme = require("../utils/theme");
+
+var _paragraph = require("../../text/paragraph");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "iconWithTextButton__ButtonContainer",
+  componentId: "sc-1f9d1q4-0"
+})(["cursor:pointer;display:flex;flex-direction:column;align-items:center;color:", ";svg{width:24px;height:24px;background-color:", ";}", ""], function (props) {
+  return props.color;
+}, function (props) {
+  return props.color;
+}, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover {\n      color: ", ";\n      svg {\n        background-color: ", ";\n      }\n    }\n  "])), function (props) {
+  return props.hoverColor;
+}, function (props) {
+  return props.hoverColor;
+}));
+
+var IconWithTextButton = function IconWithTextButton(_ref) {
+  var _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      iconComponent = _ref.iconComponent,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'normal' : _ref$theme,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active;
+
+  var _getIconWithTextButto = (0, _theme.getIconWithTextButtonTheme)(theme, active, disabled),
+      color = _getIconWithTextButto.color,
+      hoverColor = _getIconWithTextButto.hoverColor;
+
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    color: color,
+    hoverColor: hoverColor
+  }, iconComponent, /*#__PURE__*/_react["default"].createElement(_paragraph.P4, {
+    text: text,
+    weight: "bold"
+  }));
+};
+
+IconWithTextButton.propTypes = {
+  text: _propTypes["default"].string,
+  iconComponent: _propTypes["default"].elementType.isRequired,
+  theme: _propTypes["default"].oneOf(['normal', 'photography', 'transparent', 'index']),
+  disabled: _propTypes["default"].bool,
+  active: _propTypes["default"].bool
+};
+var _default = IconWithTextButton;
+exports["default"] = _default;

package/lib/button/index.js

@@ -9,13 +9,31 @@ Object.defineProperty(exports, "PillButton", {
     return _pillButton["default"];
   }
 });
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function get() {
+    return _iconButton["default"];
+  }
+});
+Object.defineProperty(exports, "IconWithTextButton", {
+  enumerable: true,
+  get: function get() {
+    return _iconWithTextButton["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _pillButton = _interopRequireDefault(require("./components/pillButton"));
 
+var _iconButton = _interopRequireDefault(require("./components/iconButton"));
+
+var _iconWithTextButton = _interopRequireDefault(require("./components/iconWithTextButton"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
-  PillButton: _pillButton["default"]
+  PillButton: _pillButton["default"],
+  IconButton: _iconButton["default"],
+  IconWithTextButton: _iconWithTextButton["default"]
 };
 exports["default"] = _default;

package/lib/button/stories/iconButton.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shareButton = exports.iconButton = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _iconButton = _interopRequireDefault(require("../components/iconButton"));
+
+var _icon = require("../../icon");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Button/Icon Button',
+  component: _iconButton["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_iconButton["default"], args);
+};
+
+var iconButton = Template.bind({});
+exports.iconButton = iconButton;
+iconButton.args = {
+  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+    direction: "down"
+  }),
+  theme: 'normal',
+  type: 'primary',
+  disabled: false,
+  active: false
+};
+var shareButton = Template.bind({});
+exports.shareButton = shareButton;
+shareButton.args = {
+  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Share, null),
+  theme: 'normal',
+  type: 'primary',
+  disabled: false,
+  active: false
+};

package/lib/button/stories/iconWithTextButton.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shareButton = exports.iconWithTextButton = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _iconWithTextButton = _interopRequireDefault(require("../components/iconWithTextButton"));
+
+var _icon = require("../../icon");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Button/Icon With Text Button',
+  component: _iconWithTextButton["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_iconWithTextButton["default"], args);
+};
+
+var iconWithTextButton = Template.bind({});
+exports.iconWithTextButton = iconWithTextButton;
+iconWithTextButton.args = {
+  text: '文字',
+  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+    direction: "down"
+  }),
+  theme: 'normal',
+  disabled: false,
+  active: false
+};
+var shareButton = Template.bind({});
+exports.shareButton = shareButton;
+shareButton.args = {
+  text: '分享',
+  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Share, null),
+  theme: 'normal',
+  disabled: false,
+  active: false
+};

package/lib/button/utils/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.getOutlinePillButtonTheme = exports.getFilledPillButtonTheme = void 0;
+exports["default"] = exports.getIconWithTextButtonTheme = exports.getSecondaryIconButtonTheme = exports.getPrimaryIconButtonTheme = exports.getOutlinePillButtonTheme = exports.getFilledPillButtonTheme = void 0;
 
 var _color = require("@twreporter/core/lib/constants/color");
 
@@ -111,8 +111,167 @@ var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabl
 };
 
 exports.getOutlinePillButtonTheme = getOutlinePillButtonTheme;
+
+var getPrimaryIconButtonTheme = function getPrimaryIconButtonTheme(theme, isActive, isDisabled) {
+  if (isDisabled) {
+    return {
+      color: _color.colorGrayscale.gray400,
+      hoverColor: _color.colorGrayscale.gray400
+    };
+  }
+
+  var switchKey = isActive ? "".concat(theme, "-active") : theme;
+
+  switch (switchKey) {
+    case 'photography':
+      return {
+        color: _color.colorGrayscale.white,
+        hoverColor: _color.colorSupportive.main
+      };
+
+    case 'photography-active':
+      return {
+        color: _color.colorSupportive.main,
+        hoverColor: _color.colorSupportive.main
+      };
+
+    case 'transparent':
+      return {
+        color: _color.colorGrayscale.white,
+        hoverColor: _color.colorGrayscale.gray200
+      };
+
+    case 'transparent-active':
+      return {
+        color: _color.colorGrayscale.white,
+        hoverColor: _color.colorGrayscale.white
+      };
+
+    case 'normal-active':
+      return {
+        color: _color.colorBrand.heavy,
+        hoverColor: _color.colorBrand.heavy
+      };
+
+    case 'normal':
+    default:
+      return {
+        color: _color.colorGrayscale.gray600,
+        hoverColor: _color.colorGrayscale.gray800
+      };
+  }
+};
+
+exports.getPrimaryIconButtonTheme = getPrimaryIconButtonTheme;
+
+var getSecondaryIconButtonTheme = function getSecondaryIconButtonTheme(theme, isActive, isDisabled) {
+  if (isDisabled) {
+    return {
+      color: _color.colorGrayscale.gray400,
+      hoverColor: _color.colorGrayscale.gray400
+    };
+  }
+
+  var switchKey = isActive ? "".concat(theme, "-active") : theme;
+
+  switch (switchKey) {
+    case 'photography':
+      return {
+        color: _color.colorGrayscale.gray400,
+        hoverColor: _color.colorSupportive.main
+      };
+
+    case 'photography-active':
+      return {
+        color: _color.colorSupportive.main,
+        hoverColor: _color.colorSupportive.main
+      };
+
+    case 'transparent':
+      return {
+        color: _color.colorGrayscale.gray600,
+        hoverColor: _color.colorGrayscale.white
+      };
+
+    case 'transparent-active':
+      return {
+        color: _color.colorGrayscale.gray600,
+        hoverColor: _color.colorGrayscale.gray600
+      };
+
+    case 'normal-active':
+      return {
+        color: _color.colorBrand.heavy,
+        hoverColor: _color.colorBrand.heavy
+      };
+
+    case 'normal':
+    default:
+      return {
+        color: _color.colorGrayscale.gray400,
+        hoverColor: _color.colorGrayscale.gray600
+      };
+  }
+};
+
+exports.getSecondaryIconButtonTheme = getSecondaryIconButtonTheme;
+
+var getIconWithTextButtonTheme = function getIconWithTextButtonTheme(theme, isActive, isDisabled) {
+  if (isDisabled) {
+    return {
+      color: _color.colorGrayscale.gray400,
+      hoverColor: _color.colorGrayscale.gray400
+    };
+  }
+
+  var switchKey = isActive ? "".concat(theme, "-active") : theme;
+
+  switch (switchKey) {
+    case 'photography':
+      return {
+        color: _color.colorGrayscale.gray100,
+        hoverColor: _color.colorSupportive.main
+      };
+
+    case 'photography-active':
+      return {
+        color: _color.colorSupportive.main,
+        hoverColor: _color.colorSupportive.main
+      };
+
+    case 'transparent':
+      return {
+        color: _color.colorGrayscale.gray100,
+        hoverColor: _color.colorGrayscale.gray200
+      };
+
+    case 'transparent-active':
+      return {
+        color: _color.colorGrayscale.white,
+        hoverColor: _color.colorGrayscale.white
+      };
+
+    case 'normal-active':
+      return {
+        color: _color.colorBrand.heavy,
+        hoverColor: _color.colorBrand.heavy
+      };
+
+    case 'normal':
+    default:
+      return {
+        color: _color.colorGrayscale.gray600,
+        hoverColor: _color.colorBrand.heavy
+      };
+  }
+};
+
+exports.getIconWithTextButtonTheme = getIconWithTextButtonTheme;
 var _default = {
   getFilledPillButtonTheme: getFilledPillButtonTheme,
-  getOutlinePillButtonTheme: getOutlinePillButtonTheme
+  getOutlinePillButtonTheme: getOutlinePillButtonTheme,
+  getPrimaryIconButtonTheme: getPrimaryIconButtonTheme,
+  getSecondaryIconButtonTheme: getSecondaryIconButtonTheme,
+  getIconWithTextButtonTheme: getIconWithTextButtonTheme
 };
 exports["default"] = _default;

package/lib/icon/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Line = exports.Youtube = exports.Twitter = exports.Medium = exports.Instagram = exports.Facebook = exports.Loading = exports.Copy = exports.Topic = exports.Article = exports.Clock = exports.Text = exports.Share = exports.Home = exports.Member = exports.Search = exports.Cross = exports.Hamburger = exports.Bookmark = exports.Arrow = exports.Icon = void 0;
+exports["default"] = exports.Line = exports.Youtube = exports.Twitter = exports.Medium = exports.Instagram = exports.Facebook = exports.Printer = exports.Loading = exports.Copy = exports.Topic = exports.Article = exports.Clock = exports.Text = exports.Share = exports.Home = exports.Member = exports.Search = exports.Cross = exports.Hamburger = exports.Bookmark = exports.Arrow = exports.Icon = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -212,6 +212,17 @@ Loading.propTypes = {
   releaseBranch: _propTypes2["default"].releaseBranch
 };
 
+var Printer = function Printer(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "printer"
+  }, args));
+};
+
+exports.Printer = Printer;
+Printer.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
 var Facebook = function Facebook(args) {
   return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
     filename: "facebook"
@@ -290,6 +301,7 @@ var _default = {
   Instagram: Instagram,
   Line: Line,
   Loading: Loading,
+  Printer: Printer,
   Medium: Medium,
   Member: Member,
   Search: Search,

package/lib/icon/stories/printer.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.printer = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var master = _releaseBranch["default"].master,
+    staging = _releaseBranch["default"].staging,
+    preview = _releaseBranch["default"].preview,
+    release = _releaseBranch["default"].release;
+var _default = {
+  title: 'Icon/Printer',
+  component: _index.Printer,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var printer = function printer(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Printer, args);
+};
+
+exports.printer = printer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.9.0-rc.3",
+  "version": "8.9.0-rc.4",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "f28ff3c27805258ded3260f382d88978ad1ab14e"
+  "gitHead": "6cb23fc834f432e3b1a45decaf5ff5a7b7f77400"
 }