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

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.17.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.1...@twreporter/react-components@8.17.0-rc.2) (2023-04-12)
+
+**Note:** Version bump only for package @twreporter/react-components
+
+
+
+
+
+# [8.17.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.0...@twreporter/react-components@8.17.0-rc.1) (2023-03-09)
+
+**Note:** Version bump only for package @twreporter/react-components
+
+
+
+
+
 # [8.17.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.16.1-rc.1...@twreporter/react-components@8.17.0-rc.0) (2023-03-08)
 
 

package/lib/badge/index.js

@@ -26,10 +26,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "badge__Container",
   componentId: "sc-1mnvxli-0"
-})(["background:", ";padding:2px 4px;width:fit-content;"], function (props) {
+})(["background:", ";padding:2px 4px;width:fit-content;border-radius:2px;"], function (props) {
   return props.backgroundColor;
 });
 
+var ColorP2 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
+  displayName: "badge__ColorP2",
+  componentId: "sc-1mnvxli-1"
+})(["color:", ";"], function (props) {
+  return props.color;
+});
+
 var Badge = function Badge(_ref) {
   var _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
@@ -41,11 +48,9 @@ var Badge = function Badge(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({
     backgroundColor: backgroundColor
-  }, props), /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+  }, props), /*#__PURE__*/_react["default"].createElement(ColorP2, {
     text: text,
-    style: {
-      color: textColor
-    }
+    color: textColor
   }));
 };
 

package/lib/button/components/textButton.js

@@ -17,14 +17,14 @@ var _size = require("../utils/size");
 
 var _paragraph = require("../../text/paragraph");
 
+var _constants = require("../constants/");
+
 var _size2 = require("../constants/size");
 
 var _type = require("../constants/type");
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
-var _theme2 = require("@twreporter/core/lib/constants/theme");
-
 var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "type", "active", "disabled"];
 
 var _templateObject;
@@ -56,6 +56,13 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   return props.hoverColor;
 }));
 
+var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "textButton__IconContainer",
+  componentId: "sc-1lwyrq5-1"
+})(["display:flex;align-items:center;margin:", ";"], function (props) {
+  return props.isLeft ? '0 4px 0 0' : '0 0 0 4px';
+});
+
 var TextButton = function TextButton(_ref) {
   var _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
@@ -66,7 +73,7 @@ var TextButton = function TextButton(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _size2.SIZE.S : _ref$size,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? _theme2.THEME.normal : _ref$theme,
+      theme = _ref$theme === void 0 ? _constants.TEXT_BUTTON_THEME.normal : _ref$theme,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? _type.TYPE.primary : _ref$type,
       _ref$active = _ref.active,
@@ -103,7 +110,9 @@ var TextButton = function TextButton(_ref) {
     color: color,
     hoverColor: hoverColor,
     iconSize: iconSize
-  }, props), leftIconComponent, textJSX, rightIconComponent);
+  }, props), size === _size2.SIZE.L ? /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    isLeft: true
+  }, leftIconComponent) : leftIconComponent, textJSX, size === _size2.SIZE.L ? /*#__PURE__*/_react["default"].createElement(IconContainer, null, rightIconComponent) : rightIconComponent);
 };
 
 TextButton.propTypes = {
@@ -111,7 +120,7 @@ TextButton.propTypes = {
   rightIconComponent: _propTypes["default"].element,
   text: _propTypes["default"].string,
   size: _size2.SIZE_PROP_TYPES,
-  theme: _theme2.THEME_PROP_TYPES,
+  theme: _constants.TEXT_BUTTON_THEME_PROP_TYPES,
   type: _type.TYPE_PROP_TYPES,
   active: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool

package/lib/button/components/toggleButton.js

@@ -23,26 +23,31 @@ 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; }
 
+var ColorP2 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
+  displayName: "toggleButton__ColorP2",
+  componentId: "sc-183g3tk-0"
+})(["color:", ";white-space:nowrap;"], _color.colorGrayscale.gray600);
+
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "toggleButton__Container",
-  componentId: "sc-183g3tk-0"
+  componentId: "sc-183g3tk-1"
 })(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:42px;"]);
 
 var Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
   displayName: "toggleButton__Label",
-  componentId: "sc-183g3tk-1"
+  componentId: "sc-183g3tk-2"
 })(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);
 
 var Switch = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "toggleButton__Switch",
-  componentId: "sc-183g3tk-2"
+  componentId: "sc-183g3tk-3"
 })(["position:relative;width:40px;height:20px;background:", ";border-radius:20px;padding:0px;transition:100ms ease-in-out;&:before{transition:100ms ease-in-out;content:'';position:absolute;width:16px;height:16px;border-radius:20px;top:50%;left:2px;background:white;transform:translate(0,-50%);}"], function (props) {
   return props.disabled ? _color.colorGrayscale.gray400 : _color.colorGrayscale.gray600;
 });
 
 var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
   displayName: "toggleButton__Input",
-  componentId: "sc-183g3tk-3"
+  componentId: "sc-183g3tk-4"
 })(["opacity:0;position:absolute;&:checked + ", "{background:", ";&:before{transform:translate(20px,-50%);}}"], Switch, function (props) {
   return props.disabled ? _color.colorGrayscale.gray400 : _color.colorBrand.heavy;
 });
@@ -64,12 +69,8 @@ var ToggleButton = function ToggleButton(_ref) {
     onChange && onChange();
   };
 
-  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
-    text: value ? labelOn : labelOff,
-    style: {
-      color: _color.colorGrayscale.gray600,
-      whiteSpace: 'nowrap'
-    }
+  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ColorP2, {
+    text: value ? labelOn : labelOff
   }), /*#__PURE__*/_react["default"].createElement(Label, props, /*#__PURE__*/_react["default"].createElement(Input, {
     type: "checkbox",
     disabled: disabled,

package/lib/button/constants/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEXT_BUTTON_THEME_PROP_TYPES = exports.TEXT_BUTTON_THEME = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var TEXT_BUTTON_THEME = Object.freeze(_objectSpread(_objectSpread({}, _theme.THEME), {}, {
+  brand: 'brand',
+  dark: 'dark',
+  light: 'light'
+}));
+exports.TEXT_BUTTON_THEME = TEXT_BUTTON_THEME;
+
+var TEXT_BUTTON_THEME_PROP_TYPES = _propTypes["default"].oneOf(Object.values(TEXT_BUTTON_THEME));
+
+exports.TEXT_BUTTON_THEME_PROP_TYPES = TEXT_BUTTON_THEME_PROP_TYPES;

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

@@ -15,7 +15,7 @@ var _size = require("../constants/size");
 
 var _type = require("../constants/type");
 
-var _theme = require("@twreporter/core/lib/constants/theme");
+var _constants = require("../constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -23,7 +23,13 @@ var _default = {
   title: 'Button/Text Button',
   component: _textButton["default"],
   argTypes: {
-    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
+    theme: {
+      defaultValue: _constants.TEXT_BUTTON_THEME.normal,
+      options: Object.values(_constants.TEXT_BUTTON_THEME),
+      control: {
+        type: 'radio'
+      }
+    },
     type: _type.TYPE_STORYBOOK_ARG_TYPE,
     size: _size.SIZE_STORYBOOK_ARG_TYPE
   }
@@ -39,7 +45,7 @@ exports.textButton = textButton;
 textButton.args = {
   text: '文字',
   size: _size.SIZE.S,
-  theme: _theme.THEME.normal,
+  theme: _constants.TEXT_BUTTON_THEME.normal,
   type: _type.TYPE.primary,
   active: false,
   disabled: false
@@ -55,7 +61,7 @@ withArrowIcon.args = {
   }),
   text: '文字',
   size: _size.SIZE.S,
-  theme: _theme.THEME.normal,
+  theme: _constants.TEXT_BUTTON_THEME.normal,
   type: _type.TYPE.primary,
   active: false,
   disabled: false

package/lib/button/utils/theme.js

@@ -7,11 +7,15 @@ exports["default"] = exports.getActiveTextButtonTheme = exports.getDisabledTextB
 
 var _color = require("@twreporter/core/lib/constants/color");
 
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+var _constants = require("../constants");
+
 // @twreporter
 var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled) {
   if (disabled) {
     switch (theme) {
-      case 'transparent':
+      case _theme.THEME.transparent:
         return {
           color: _color.colorGrayscale.white,
           bgColor: _color.colorGrayscale.gray200,
@@ -30,7 +34,7 @@ var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled
   }
 
   switch (theme) {
-    case 'photography':
+    case _theme.THEME.photography:
       return {
         color: _color.colorPhoto.dark,
         bgColor: _color.colorSupportive.main,
@@ -38,7 +42,7 @@ var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled
         hoverBgColor: _color.colorSupportive.heavy
       };
 
-    case 'transparent':
+    case _theme.THEME.transparent:
       return {
         color: _color.colorGrayscale.gray600,
         bgColor: _color.colorGrayscale.white,
@@ -46,8 +50,8 @@ var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled
         hoverBgColor: _color.colorGrayscale.gray400
       };
 
-    case 'normal':
-    case 'index':
+    case _theme.THEME.normal:
+    case _theme.THEME.index:
     default:
       return {
         color: _color.colorGrayscale.white,
@@ -63,7 +67,7 @@ exports.getFilledPillButtonTheme = getFilledPillButtonTheme;
 var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabled) {
   if (disabled) {
     switch (theme) {
-      case 'transparent':
+      case _theme.THEME.transparent:
         return {
           color: _color.colorGrayscale.gray200,
           bgColor: _color.colorGrayscale.gray200,
@@ -71,7 +75,7 @@ var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabl
           hoverBgColor: _color.colorGrayscale.gray200
         };
 
-      case 'photography':
+      case _theme.THEME.photography:
         return {
           color: _color.colorGrayscale.gray600,
           bgColor: _color.colorGrayscale.gray200,
@@ -90,7 +94,7 @@ var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabl
   }
 
   switch (theme) {
-    case 'photography':
+    case _theme.THEME.photography:
       return {
         color: _color.colorSupportive.main,
         bgColor: _color.colorSupportive.main,
@@ -98,7 +102,7 @@ var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabl
         hoverBgColor: _color.colorSupportive.heavy
       };
 
-    case 'transparent':
+    case _theme.THEME.transparent:
       return {
         color: _color.colorGrayscale.white,
         bgColor: _color.colorGrayscale.white,
@@ -106,8 +110,8 @@ var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabl
         hoverBgColor: _color.colorGrayscale.gray600
       };
 
-    case 'normal':
-    case 'index':
+    case _theme.THEME.normal:
+    case _theme.THEME.index:
     default:
       return {
         color: _color.colorBrand.heavy,
@@ -131,37 +135,37 @@ var getPrimaryIconButtonTheme = function getPrimaryIconButtonTheme(theme, isActi
   var switchKey = isActive ? "".concat(theme, "-active") : theme;
 
   switch (switchKey) {
-    case 'photography':
+    case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorSupportive.main
       };
 
-    case 'photography-active':
+    case "".concat(_theme.THEME.photography, "-active"):
       return {
         color: _color.colorSupportive.main,
         hoverColor: _color.colorSupportive.main
       };
 
-    case 'transparent':
+    case _theme.THEME.transparent:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorGrayscale.gray200
       };
 
-    case 'transparent-active':
+    case "".concat(_theme.THEME.transparent, "-active"):
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorGrayscale.white
       };
 
-    case 'normal-active':
+    case "".concat(_theme.THEME.normal, "-active"):
       return {
         color: _color.colorBrand.heavy,
         hoverColor: _color.colorBrand.heavy
       };
 
-    case 'normal':
+    case _theme.THEME.normal:
     default:
       return {
         color: _color.colorGrayscale.gray600,
@@ -183,37 +187,37 @@ var getSecondaryIconButtonTheme = function getSecondaryIconButtonTheme(theme, is
   var switchKey = isActive ? "".concat(theme, "-active") : theme;
 
   switch (switchKey) {
-    case 'photography':
+    case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.gray400,
         hoverColor: _color.colorSupportive.main
       };
 
-    case 'photography-active':
+    case "".concat(_theme.THEME.photography, "-active"):
       return {
         color: _color.colorSupportive.main,
         hoverColor: _color.colorSupportive.main
       };
 
-    case 'transparent':
+    case _theme.THEME.transparent:
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.white
       };
 
-    case 'transparent-active':
+    case "".concat(_theme.THEME.transparent, "-active"):
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.gray600
       };
 
-    case 'normal-active':
+    case "".concat(_theme.THEME.normal, "-active"):
       return {
         color: _color.colorBrand.heavy,
         hoverColor: _color.colorBrand.heavy
       };
 
-    case 'normal':
+    case _theme.THEME.normal:
     default:
       return {
         color: _color.colorGrayscale.gray400,
@@ -235,37 +239,37 @@ var getIconWithTextButtonTheme = function getIconWithTextButtonTheme(theme, isAc
   var switchKey = isActive ? "".concat(theme, "-active") : theme;
 
   switch (switchKey) {
-    case 'photography':
+    case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.gray200,
         hoverColor: _color.colorSupportive.main
       };
 
-    case 'photography-active':
+    case "".concat(_theme.THEME.photography, "-active"):
       return {
         color: _color.colorSupportive.main,
         hoverColor: _color.colorSupportive.main
       };
 
-    case 'transparent':
+    case _theme.THEME.transparent:
       return {
         color: _color.colorGrayscale.gray100,
         hoverColor: _color.colorGrayscale.gray200
       };
 
-    case 'transparent-active':
+    case "".concat(_theme.THEME.transparent, "-active"):
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorGrayscale.white
       };
 
-    case 'normal-active':
+    case "".concat(_theme.THEME.normal, "-active"):
       return {
         color: _color.colorBrand.heavy,
         hoverColor: _color.colorBrand.heavy
       };
 
-    case 'normal':
+    case _theme.THEME.normal:
     default:
       return {
         color: _color.colorGrayscale.gray600,
@@ -278,19 +282,37 @@ exports.getIconWithTextButtonTheme = getIconWithTextButtonTheme;
 
 var getPrimaryTextButtonTheme = function getPrimaryTextButtonTheme(theme) {
   switch (theme) {
-    case 'photography':
+    case _constants.TEXT_BUTTON_THEME.photography:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorSupportive.main
       };
 
-    case 'transparent':
+    case _constants.TEXT_BUTTON_THEME.transparent:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case 'normal':
+    case _constants.TEXT_BUTTON_THEME.brand:
+      return {
+        color: _color.colorBrand.heavy,
+        hoverColor: _color.colorBrand.dark
+      };
+
+    case _constants.TEXT_BUTTON_THEME.dark:
+      return {
+        color: _color.colorGrayscale.gray800,
+        hoverColor: _color.colorBrand.heavy
+      };
+
+    case _constants.TEXT_BUTTON_THEME.light:
+      return {
+        color: _color.colorGrayscale.gray600,
+        hoverColor: _color.colorGrayscale.gray800
+      };
+
+    case _constants.TEXT_BUTTON_THEME.normal:
     default:
       return {
         color: _color.colorGrayscale.gray800,
@@ -303,19 +325,37 @@ exports.getPrimaryTextButtonTheme = getPrimaryTextButtonTheme;
 
 var getSecondaryTextButtonTheme = function getSecondaryTextButtonTheme(theme) {
   switch (theme) {
-    case 'photography':
+    case _constants.TEXT_BUTTON_THEME.photography:
       return {
         color: _color.colorGrayscale.gray400,
         hoverColor: _color.colorSupportive.main
       };
 
-    case 'transparent':
+    case _constants.TEXT_BUTTON_THEME.transparent:
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case 'normal':
+    case _constants.TEXT_BUTTON_THEME.brand:
+      return {
+        color: _color.colorBrand.heavy,
+        hoverColor: _color.colorBrand.dark
+      };
+
+    case _constants.TEXT_BUTTON_THEME.dark:
+      return {
+        color: _color.colorGrayscale.gray800,
+        hoverColor: _color.colorBrand.heavy
+      };
+
+    case _constants.TEXT_BUTTON_THEME.light:
+      return {
+        color: _color.colorGrayscale.gray600,
+        hoverColor: _color.colorGrayscale.gray800
+      };
+
+    case _constants.TEXT_BUTTON_THEME.normal:
     default:
       return {
         color: _color.colorGrayscale.gray600,
@@ -328,19 +368,22 @@ exports.getSecondaryTextButtonTheme = getSecondaryTextButtonTheme;
 
 var getDisabledTextButtonTheme = function getDisabledTextButtonTheme(theme) {
   switch (theme) {
-    case 'photography':
+    case _constants.TEXT_BUTTON_THEME.photography:
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.gray600
       };
 
-    case 'transparent':
+    case _constants.TEXT_BUTTON_THEME.transparent:
       return {
         color: _color.colorGrayscale.gray200,
         hoverColor: _color.colorGrayscale.gray200
       };
 
-    case 'normal':
+    case _constants.TEXT_BUTTON_THEME.brand:
+    case _constants.TEXT_BUTTON_THEME.dark:
+    case _constants.TEXT_BUTTON_THEME.light:
+    case _constants.TEXT_BUTTON_THEME.normal:
     default:
       return {
         color: _color.colorGrayscale.gray400,
@@ -353,19 +396,37 @@ exports.getDisabledTextButtonTheme = getDisabledTextButtonTheme;
 
 var getActiveTextButtonTheme = function getActiveTextButtonTheme(theme) {
   switch (theme) {
-    case 'photography':
+    case _constants.TEXT_BUTTON_THEME.photography:
       return {
         color: _color.colorSupportive.main,
         hoverColor: _color.colorSupportive.main
       };
 
-    case 'transparent':
+    case _constants.TEXT_BUTTON_THEME.transparent:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorGrayscale.white
       };
 
-    case 'normal':
+    case _constants.TEXT_BUTTON_THEME.brand:
+      return {
+        color: _color.colorBrand.dark,
+        hoverColor: _color.colorBrand.dark
+      };
+
+    case _constants.TEXT_BUTTON_THEME.dark:
+      return {
+        color: _color.colorBrand.heavy,
+        hoverColor: _color.colorBrand.heavy
+      };
+
+    case _constants.TEXT_BUTTON_THEME.light:
+      return {
+        color: _color.colorGrayscale.gray800,
+        hoverColor: _color.colorGrayscale.gray800
+      };
+
+    case _constants.TEXT_BUTTON_THEME.normal:
     default:
       return {
         color: _color.colorBrand.heavy,

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,77 @@
+"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 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:16px;height:16px;border:solid 1px;border-radius:2px;accent-color:", ";margin-left:0px;margin-right:8px;&:enabled:not(:checked){border-color:", ";background:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;}"], _color.colorGrayscale.gray800, _color.colorGrayscale.gray800);
+
+var ColorP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
+  displayName: "checkbox__ColorP1",
+  componentId: "vzoxib-2"
+})(["color:", ";"], function (props) {
+  return props.disabled ? _color.colorGrayscale.gray400 : _color.colorGrayscale.gray800;
+});
+
+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(Input, {
+    type: "checkbox",
+    checked: value,
+    disabled: disabled,
+    onChange: handleChange
+  }), label && /*#__PURE__*/_react["default"].createElement(ColorP1, {
+    text: label,
+    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/logo/components/logo-header.js

@@ -15,10 +15,16 @@ var _path = _interopRequireDefault(require("../utils/path"));
 
 var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
+var _excluded = ["type", "releaseBranch"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-// utils
-// @twreporter
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 LogoContainer = /*#__PURE__*/_styledComponents["default"].img.withConfig({
   displayName: "logo-header__LogoContainer",
   componentId: "rlga04-0"
@@ -26,14 +32,15 @@ var LogoContainer = /*#__PURE__*/_styledComponents["default"].img.withConfig({
 
 var LogoHeader = function LogoHeader(_ref) {
   var type = _ref.type,
-      releaseBranch = _ref.releaseBranch;
+      releaseBranch = _ref.releaseBranch,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var logoSrc = _path["default"].selectLogoPath('header', releaseBranch, type);
 
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, _extends({
     alt: "The Reporter Logo",
     src: logoSrc
-  }));
+  }, props)));
 };
 
 LogoHeader.propTypes = {

package/lib/simple-header/index.js

@@ -18,8 +18,13 @@ var HeaderContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "sc-4xugf-0"
 })(["display:flex;flex-direction:row;justify-content:center;padding:16px 24px;"]);
 
+var Logo = /*#__PURE__*/(0, _styledComponents["default"])(_logo.LogoHeader).withConfig({
+  displayName: "simple-header__Logo",
+  componentId: "sc-4xugf-1"
+})(["width:144px;height:21px;"]);
+
 var SimpleHeader = function SimpleHeader(props) {
-  return /*#__PURE__*/_react["default"].createElement(HeaderContainer, props, /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, null));
+  return /*#__PURE__*/_react["default"].createElement(HeaderContainer, props, /*#__PURE__*/_react["default"].createElement(Logo, null));
 };
 
 exports.SimpleHeader = SimpleHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.17.0-rc.0",
+  "version": "8.17.0-rc.2",
   "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": "3047acc88fedab0ebaf202df0901d2871b0644c2"
+  "gitHead": "498b86cff656356a619bc03ba371fde8399a2f99"
 }