@twreporter/react-components 8.7.1 → 8.8.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.8.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.7.1...@twreporter/react-components@8.8.0-rc.0) (2022-05-03)
+
+
+### Bug Fixes
+
+* add line height setting to paragraph component ([1390dcf](https://github.com/twreporter/twreporter-npm-packages/commit/1390dcf811b5475337381ce99f2b9b5a1bfe05bc))
+* add transparent theme ([cc149fe](https://github.com/twreporter/twreporter-npm-packages/commit/cc149feafaab69924f4152cf34b869b58710ec6d))
+* fix code review ([462795c](https://github.com/twreporter/twreporter-npm-packages/commit/462795c4bf9259e8896db41117e2d7354e435848))
+* fix headline line height ([0dc0834](https://github.com/twreporter/twreporter-npm-packages/commit/0dc0834d771e9795ec77d55585a4957712d6efa4))
+* fix text syle to use P1, P2 component ([026b47e](https://github.com/twreporter/twreporter-npm-packages/commit/026b47e8e355967f6d1a281670ee3f5aaf57640c))
+
+
+### Features
+
+* add storybook & designed component ([a6fa216](https://github.com/twreporter/twreporter-npm-packages/commit/a6fa2168f10298f40de425316df79e16bb68d325))
+
+
+
+
+
 ## [8.7.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.7.1-rc.0...@twreporter/react-components@8.7.1) (2022-04-29)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/button/components/pillButton.js

@@ -0,0 +1,107 @@
+"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 _icon = require("../../icon");
+
+var _paragraph = require("../../text/paragraph");
+
+var _theme = require("../utils/theme");
+
+var _size = require("../utils/size");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// utils
+var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "pillButton__ButtonContainer",
+  componentId: "xa7tsy-0"
+})(["width:fit-content;display:flex;align-items:center;border-radius:40px;background-color:", ";border-color:", ";border-style:solid;border-width:1px;color:", ";padding:", ";cursor:pointer;svg{margin-left:4px;height:", ";width:", ";background-color:", ";}&:hover{color:", ";background-color:", ";border-color:", ";svg{background-color:", ";}}"], function (props) {
+  return props.type === 'primary' ? props.bgColor : 'transparent';
+}, function (props) {
+  return props.bgColor;
+}, function (props) {
+  return props.color;
+}, function (props) {
+  return props.padding;
+}, function (props) {
+  return props.iconSize;
+}, function (props) {
+  return props.iconSize;
+}, function (props) {
+  return props.color;
+}, function (props) {
+  return props.hoverColor;
+}, function (props) {
+  return props.type === 'primary' ? props.hoverBgColor : 'transparent';
+}, function (props) {
+  return props.hoverBgColor;
+}, function (props) {
+  return props.hoverColor;
+});
+
+var PillButton = function PillButton(_ref) {
+  var _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'S' : _ref$size,
+      _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$withIcon = _ref.withIcon,
+      withIcon = _ref$withIcon === void 0 ? false : _ref$withIcon,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var themeFunc = type === 'primary' ? _theme.getFilledPillButtonTheme : _theme.getOutlinePillButtonTheme;
+
+  var _themeFunc = themeFunc(theme, disabled),
+      color = _themeFunc.color,
+      bgColor = _themeFunc.bgColor,
+      hoverColor = _themeFunc.hoverColor,
+      hoverBgColor = _themeFunc.hoverBgColor;
+
+  var _getSizeStyle = (0, _size.getSizeStyle)(size),
+      padding = _getSizeStyle.padding,
+      iconSize = _getSizeStyle.iconSize;
+
+  var iconJSX = withIcon ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+    direction: "right"
+  }) : '';
+  var textJSX = size === 'S' ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+    text: text,
+    weight: "bold"
+  }) : /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+    text: text,
+    weight: "bold"
+  });
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    type: type,
+    padding: padding,
+    color: color,
+    bgColor: bgColor,
+    iconSize: iconSize,
+    hoverColor: hoverColor,
+    hoverBgColor: hoverBgColor
+  }, textJSX, iconJSX);
+};
+
+PillButton.propTypes = {
+  text: _propTypes["default"].string,
+  size: _propTypes["default"].oneOf(['S', 'L']),
+  theme: _propTypes["default"].oneOf(['transparent', 'normal', 'photography', 'index']),
+  type: _propTypes["default"].oneOf(['primary', 'secondary']),
+  withIcon: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool
+};
+var _default = PillButton;
+exports["default"] = _default;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pillButton = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _pillButton = _interopRequireDefault(require("../components/pillButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Button/Pill Button',
+  component: _pillButton["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_pillButton["default"], args);
+};
+
+var pillButton = Template.bind({});
+exports.pillButton = pillButton;
+pillButton.args = {
+  text: '文字',
+  size: 'S',
+  theme: 'normal',
+  type: 'primary',
+  withIcon: true,
+  disabled: false
+};

package/lib/button/utils/size.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.getSizeStyle = void 0;
+
+var getSizeStyle = function getSizeStyle(size) {
+  switch (size) {
+    case 'L':
+      return {
+        iconSize: '24px',
+        padding: '8px 24px'
+      };
+
+    case 'S':
+    default:
+      return {
+        iconSize: '18px',
+        padding: '4px 16px'
+      };
+  }
+};
+
+exports.getSizeStyle = getSizeStyle;
+var _default = {
+  getSizeStyle: getSizeStyle
+};
+exports["default"] = _default;

package/lib/button/utils/theme.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.getOutlinePillButtonTheme = exports.getFilledPillButtonTheme = void 0;
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+// @twreporter
+var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled) {
+  if (disabled) {
+    return {
+      color: _color.colorGrayscale.white,
+      bgColor: _color.colorGrayscale.gray400,
+      hoverColor: _color.colorGrayscale.white,
+      hoverBgColor: _color.colorGrayscale.gray400
+    };
+  }
+
+  switch (theme) {
+    case 'photography':
+      return {
+        color: _color.colorPhoto.dark,
+        bgColor: _color.colorSupportive.main,
+        hoverColor: _color.colorGrayscale.white,
+        hoverBgColor: _color.colorSupportive.heavy
+      };
+
+    case 'transparent':
+      return {
+        color: _color.colorGrayscale.gray600,
+        bgColor: _color.colorGrayscale.white,
+        hoverColor: _color.colorGrayscale.white,
+        hoverBgColor: _color.colorGrayscale.gray200
+      };
+
+    case 'normal':
+    case 'index':
+    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) {
+  if (disabled) {
+    return {
+      color: _color.colorGrayscale.gray400,
+      bgColor: _color.colorGrayscale.gray400,
+      hoverColor: _color.colorGrayscale.gray400,
+      hoverBgColor: _color.colorGrayscale.gray400
+    };
+  }
+
+  switch (theme) {
+    case 'photography':
+      return {
+        color: _color.colorSupportive.main,
+        bgColor: _color.colorSupportive.main,
+        hoverColor: _color.colorSupportive.heavy,
+        hoverBgColor: _color.colorSupportive.heavy
+      };
+
+    case 'transparent':
+      return {
+        color: _color.colorGrayscale.white,
+        bgColor: _color.colorGrayscale.white,
+        hoverColor: _color.colorGrayscale.white,
+        hoverBgColor: _color.colorGrayscale.white
+      };
+
+    case 'normal':
+    case 'index':
+    default:
+      return {
+        color: _color.colorBrand.heavy,
+        bgColor: _color.colorBrand.heavy,
+        hoverColor: _color.colorBrand.dark,
+        hoverBgColor: _color.colorBrand.dark
+      };
+  }
+};
+
+exports.getOutlinePillButtonTheme = getOutlinePillButtonTheme;
+var _default = {
+  getFilledPillButtonTheme: getFilledPillButtonTheme,
+  getOutlinePillButtonTheme: getOutlinePillButtonTheme
+};
+exports["default"] = _default;

package/lib/divider.js

@@ -0,0 +1,56 @@
+"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 _color = require("@twreporter/core/lib/constants/color");
+
+var _css = require("@twreporter/core/lib/utils/css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var borderWidth = {
+  vertical: [0, '1px', 0, 0],
+  horizontal: ['1px', 0, 0, 0]
+};
+var height = {
+  vertical: '100%',
+  horizontal: 0
+};
+var width = {
+  vertical: 0,
+  horizontal: '100%'
+};
+
+var DividerBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "divider__DividerBox",
+  componentId: "nohqp6-0"
+})(["border-width:", ";border-style:solid;border-color:", ";height:", ";width:", ";"], function (props) {
+  return (0, _css.arrayToCssShorthand)(borderWidth[props.direction]);
+}, _color.colorGrayscale.gray300, function (props) {
+  return height[props.direction];
+}, function (props) {
+  return width[props.direction];
+});
+
+var Divider = function Divider(_ref) {
+  var _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+  return /*#__PURE__*/_react["default"].createElement(DividerBox, {
+    direction: direction
+  });
+};
+
+Divider.propTypes = {
+  direction: _propTypes["default"].oneOf(['vertical', 'horizontal'])
+};
+var _default = Divider;
+exports["default"] = _default;

package/lib/divider.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.vertical = exports.horizontal = exports.divider = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _divider = _interopRequireDefault(require("./divider"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Divider/Line',
+  component: _divider["default"]
+};
+exports["default"] = _default;
+var flexDirection = {
+  vertical: 'row',
+  horizontal: 'column'
+};
+
+var FlexContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "dividerstories__FlexContainer",
+  componentId: "sc-166xqvx-0"
+})(["display:flex;flex-direction:", ";align-items:center;justify-content:space-between;height:250px;width:250px;"], function (props) {
+  return flexDirection[props.direction];
+});
+
+var Cube = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "dividerstories__Cube",
+  componentId: "sc-166xqvx-1"
+})(["height:100px;width:100px;background-color:#aaa;"]);
+
+var VerticalContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "dividerstories__VerticalContainer",
+  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));
+};
+
+exports.divider = divider;
+divider.args = {
+  direction: 'horizontal'
+};
+
+var horizontal = function horizontal() {
+  return /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+    direction: "horizontal"
+  });
+};
+
+exports.horizontal = horizontal;
+horizontal.parameters = {
+  controls: {
+    exclude: ['direction']
+  }
+};
+
+var vertical = function vertical() {
+  return /*#__PURE__*/_react["default"].createElement(VerticalContainer, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+    direction: "vertical"
+  }));
+};
+
+exports.vertical = vertical;
+vertical.parameters = {
+  controls: {
+    exclude: ['direction']
+  }
+};