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

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

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.article = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _articleCard = _interopRequireDefault(require("../components/article-card"));
+
+var _constants = require("../../storybook/constants");
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Card/Article',
+  component: _articleCard["default"],
+  argTypes: {
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE,
+    size: _constants.SIZE_STORYBOOK_ARG_TYPE
+  }
+};
+exports["default"] = _default;
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "articleCardstories__Container",
+  componentId: "q36nxb-0"
+})(["width:", "px;"], function (props) {
+  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'
+  },
+  releaseBranch: _releaseBranch.BRANCH.master
+};

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

@@ -11,11 +11,16 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _dialog = _interopRequireDefault(require("../components/dialog"));
 
+var _constants = require("../../storybook/constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   title: 'Card/Dialog',
-  component: _dialog["default"]
+  component: _dialog["default"],
+  argTypes: {
+    size: _constants.SIZE_STORYBOOK_ARG_TYPE
+  }
 };
 exports["default"] = _default;
 var StyledDialog = /*#__PURE__*/(0, _styledComponents["default"])(_dialog["default"]).withConfig({
@@ -30,7 +35,7 @@ var dialog = function dialog(args) {
 exports.dialog = dialog;
 dialog.args = {
   text: '登出',
-  size: 'S'
+  size: _dialog["default"].Size.S
 };
 dialog.parameters = {
   backgrounds: {

package/lib/checkbox/checkbox.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkbox = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Checkbox',
+  component: _["default"],
+  argTypes: {
+    value: {
+      defaultValue: false,
+      options: [true, false]
+    }
+  }
+};
+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);
+  }
+};

package/lib/checkbox/index.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Checkbox = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _paragraph = require("../text/paragraph");
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _excluded = ["value", "label", "disabled", "onChange"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+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; }
+
+var disableColor = _color.colorGrayscale.gray400;
+var activeColor = _color.colorGrayscale.gray800;
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "checkbox__Container",
+  componentId: "vzoxib-0"
+})(["display:flex;flex-direction:'row';"]);
+
+var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
+  displayName: "checkbox__Input",
+  componentId: "vzoxib-1"
+})(["width:0;height:0;opacity:0;z-index:-1;"]);
+
+var Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
+  displayName: "checkbox__Label",
+  componentId: "vzoxib-2"
+})(["display:block;position:relative;padding-left:25px;"]);
+
+var Indicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "checkbox__Indicator",
+  componentId: "vzoxib-3"
+})(["width:16px;height:16px;background:", ";position:absolute;top:0px;left:0px;border-color:", ";border-radius:2px;box-shadow:0 0 0 1px ", ";margin:3px 8px 0px 0px;&::after{content:'';position:absolute;display:none;}", ":checked + &::after{display:block;left:5px;top:0px;width:4px;height:10px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}"], function (props) {
+  return props.value ? props.disabled ? disableColor : activeColor : 'rgba(0, 0, 0, 0)';
+}, function (props) {
+  return props.disabled ? disableColor : activeColor;
+}, function (props) {
+  return props.disabled ? disableColor : activeColor;
+}, Input);
+
+var ColorP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
+  displayName: "checkbox__ColorP1",
+  componentId: "vzoxib-4"
+})(["color:", ";"], function (props) {
+  return props.disabled ? disableColor : activeColor;
+});
+
+var Checkbox = function Checkbox(_ref) {
+  var _ref$value = _ref.value,
+      value = _ref$value === void 0 ? false : _ref$value,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? '' : _ref$label,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var handleChange = function handleChange(e) {
+    onChange && onChange(e);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(Container, props, /*#__PURE__*/_react["default"].createElement(Label, null, label && /*#__PURE__*/_react["default"].createElement(ColorP1, {
+    text: label,
+    disabled: disabled
+  }), /*#__PURE__*/_react["default"].createElement(Input, {
+    type: "checkbox",
+    checked: value,
+    disabled: disabled,
+    onChange: handleChange
+  }), /*#__PURE__*/_react["default"].createElement(Indicator, {
+    value: value,
+    disabled: disabled
+  })));
+};
+
+exports.Checkbox = Checkbox;
+Checkbox.propTypes = {
+  value: _propTypes["default"].bool.isRequired,
+  label: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func.isRequired
+};
+var _default = Checkbox;
+exports["default"] = _default;

package/lib/divider.js

@@ -25,6 +25,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
+// direction enum
+var Direction = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
 var borderWidth = {
   vertical: [0, '1px', 0, 0],
   horizontal: ['1px', 0, 0, 0]
@@ -51,7 +56,7 @@ var DividerBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 
 var Divider = function Divider(_ref) {
   var _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
+      direction = _ref$direction === void 0 ? Direction.HORIZONTAL : _ref$direction,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react["default"].createElement(DividerBox, _extends({
@@ -60,7 +65,8 @@ var Divider = function Divider(_ref) {
 };
 
 Divider.propTypes = {
-  direction: _propTypes["default"].oneOf(['vertical', 'horizontal'])
+  direction: _propTypes["default"].oneOf(Object.values(Direction))
 };
+Divider.Direction = Direction;
 var _default = Divider;
 exports["default"] = _default;

package/lib/divider.stories.js

@@ -46,12 +46,12 @@ var divider = function divider(args) {
 
 exports.divider = divider;
 divider.args = {
-  direction: 'horizontal'
+  direction: _divider["default"].Direction.HORIZONTAL
 };
 
 var horizontal = function horizontal() {
   return /*#__PURE__*/_react["default"].createElement(_divider["default"], {
-    direction: "horizontal"
+    direction: _divider["default"].Direction.HORIZONTAL
   });
 };
 
@@ -64,7 +64,7 @@ horizontal.parameters = {
 
 var vertical = function vertical() {
   return /*#__PURE__*/_react["default"].createElement(VerticalContainer, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
-    direction: "vertical"
+    direction: _divider["default"].Direction.VERTICAL
   }));
 };
 

package/lib/icon/enum/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaType = exports.BookmarkType = exports.ArrowDirection = exports.IconType = void 0;
+var IconType = Object.freeze({
+  MASK: 'mask',
+  RAW: 'raw'
+});
+exports.IconType = IconType;
+var ArrowDirection = Object.freeze({
+  RIGHT: 'right',
+  LEFT: 'left',
+  UP: 'up',
+  DOWN: 'down'
+});
+exports.ArrowDirection = ArrowDirection;
+var BookmarkType = Object.freeze({
+  BASIC: 'basic',
+  ADD: 'add',
+  SAVED: 'saved'
+});
+exports.BookmarkType = BookmarkType;
+var MediaType = Object.freeze({
+  FACEBOOK: 'facebook',
+  INSTAGRAM: 'instagram',
+  MEDIUM: 'medium',
+  TWITTER: 'twitter',
+  YOUTUBE: 'youtube',
+  LINE: 'line',
+  GOOGLE: 'google'
+});
+exports.MediaType = MediaType;