@twreporter/react-components 8.16.1-rc.1 → 8.17.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 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.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)
+
+
+### Bug Fixes
+
+* add badge storybook ([6e9fe23](https://github.com/twreporter/twreporter-npm-packages/commit/6e9fe2340c68948c9ad75345fe0fe77fead16153))
+* add disable to toggle ([ab57603](https://github.com/twreporter/twreporter-npm-packages/commit/ab5760396e957dd723cc2936bc20fe07fe0a6fb9))
+* add icon position & color set to text button ([38cda1c](https://github.com/twreporter/twreporter-npm-packages/commit/38cda1cf43291fa6b59cafac4c4a594f33102885))
+* add prop to header ([978d2a7](https://github.com/twreporter/twreporter-npm-packages/commit/978d2a758537f6bfba98390c4bbfb1cff0b09e19))
+* add rest props ([25ca8eb](https://github.com/twreporter/twreporter-npm-packages/commit/25ca8eba3f865dbbfd5394a6e03d1d1bc5349e41))
+* add simple header ([54fa27a](https://github.com/twreporter/twreporter-npm-packages/commit/54fa27a2a24fe63b896357638f4bb1e388a38592))
+* center p ([9f80c1b](https://github.com/twreporter/twreporter-npm-packages/commit/9f80c1b6c0e541c892a5d728df0635e054733141))
+* fix badge color issue ([7df7316](https://github.com/twreporter/twreporter-npm-packages/commit/7df731601bf03da1dfb1ff6ba3af3a6dfd6eb493))
+* fix color issue of text button ([3f27a81](https://github.com/twreporter/twreporter-npm-packages/commit/3f27a81b8794c2ea493d8ffbff41d055ff6f6a8a))
+* fix headline naming ([e7c14c7](https://github.com/twreporter/twreporter-npm-packages/commit/e7c14c73636f27de9681600a8b6bf27741f9d28b))
+* fix icon issue of text button ([018e609](https://github.com/twreporter/twreporter-npm-packages/commit/018e6094c2e27cc79162b17e0d93dd276009825f))
+* fix toggle & add storybook ([400ab71](https://github.com/twreporter/twreporter-npm-packages/commit/400ab71146ebed19e24bab9be6e5c663922101f3))
+* fix toggle size ([58ffa04](https://github.com/twreporter/twreporter-npm-packages/commit/58ffa0410c6f569bf650445507613a72f573c6ce))
+* fix toggle style ([4cfe224](https://github.com/twreporter/twreporter-npm-packages/commit/4cfe22485956ecb2cfef297d5a71c41b0cafdbc7))
+* fix toggle style ([c997bbe](https://github.com/twreporter/twreporter-npm-packages/commit/c997bbeb97bf96b478b9da598da02c4a4fbb9f87))
+* fix toggle text color ([a4b7471](https://github.com/twreporter/twreporter-npm-packages/commit/a4b7471d6789f07a41215a6a83618f9875cffb2b))
+* refactor headerline, paragraph with hoc ([9a30a36](https://github.com/twreporter/twreporter-npm-packages/commit/9a30a367c2f4b2734da4e2bd95aa7f71464fb5a9))
+* refine a little bit ([4b6cfcd](https://github.com/twreporter/twreporter-npm-packages/commit/4b6cfcda60d25a7934c0a5feb5478c4b8dab1337))
+* remove badge storybook category ([0fea1f5](https://github.com/twreporter/twreporter-npm-packages/commit/0fea1f56ab151afc4e8e96e61aa2b4e5a31b3a25))
+* remove checkbox ([ccfb810](https://github.com/twreporter/twreporter-npm-packages/commit/ccfb81045cfc1ee5896a9b61e7dc17a5e7d6c466))
+* remove unnecessary folder ([e9fdc17](https://github.com/twreporter/twreporter-npm-packages/commit/e9fdc170cf48d0cf852ecca57671545aaa923bb8))
+* rename toggle label prop ([1b79fa6](https://github.com/twreporter/twreporter-npm-packages/commit/1b79fa63d7098f1d348ee4cf500be6a21e36ca3b))
+* simplify return of paragraph ([3f9efd5](https://github.com/twreporter/twreporter-npm-packages/commit/3f9efd5f3d2bb1e5233607e09ae74567bf148a1f))
+
+
+### Features
+
+* add badge, toggle, checkbox ([bdf2b16](https://github.com/twreporter/twreporter-npm-packages/commit/bdf2b1687789db61540d5b060890eefffcd34b2a))
+
+
+
+
+
 ## [8.16.1-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.16.1-rc.0...@twreporter/react-components@8.16.1-rc.1) (2023-03-07)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/badge/badge.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.badge = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Badge',
+  component: _["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], args);
+};
+
+var badge = Template.bind({});
+exports.badge = badge;
+badge.args = {
+  text: '不定期',
+  textColor: _color.colorBrand.heavy,
+  backgroundColor: 'white'
+};

package/lib/badge/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Badge = 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 _excluded = ["text", "textColor", "backgroundColor"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "badge__Container",
+  componentId: "sc-1mnvxli-0"
+})(["background:", ";padding:2px 4px;width:fit-content;"], function (props) {
+  return props.backgroundColor;
+});
+
+var Badge = function Badge(_ref) {
+  var _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      _ref$textColor = _ref.textColor,
+      textColor = _ref$textColor === void 0 ? 'black' : _ref$textColor,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? 'white' : _ref$backgroundColor,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(Container, _extends({
+    backgroundColor: backgroundColor
+  }, props), /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+    text: text,
+    style: {
+      color: textColor
+    }
+  }));
+};
+
+exports.Badge = Badge;
+Badge.propTypes = {
+  text: _propTypes["default"].string.isRequired,
+  textColor: _propTypes["default"].string,
+  backgroundColor: _propTypes["default"].string
+};
+var _default = Badge;
+exports["default"] = _default;

package/lib/button/components/textButton.js

@@ -25,7 +25,7 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _theme2 = require("@twreporter/core/lib/constants/theme");
 
-var _excluded = ["text", "iconComponent", "size", "theme", "type", "active", "disabled"];
+var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "type", "active", "disabled"];
 
 var _templateObject;
 
@@ -59,7 +59,10 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var TextButton = function TextButton(_ref) {
   var _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
-      iconComponent = _ref.iconComponent,
+      _ref$leftIconComponen = _ref.leftIconComponent,
+      leftIconComponent = _ref$leftIconComponen === void 0 ? null : _ref$leftIconComponen,
+      _ref$rightIconCompone = _ref.rightIconComponent,
+      rightIconComponent = _ref$rightIconCompone === void 0 ? null : _ref$rightIconCompone,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _size2.SIZE.S : _ref$size,
       _ref$theme = _ref.theme,
@@ -100,11 +103,12 @@ var TextButton = function TextButton(_ref) {
     color: color,
     hoverColor: hoverColor,
     iconSize: iconSize
-  }, props), textJSX, iconComponent);
+  }, props), leftIconComponent, textJSX, rightIconComponent);
 };
 
 TextButton.propTypes = {
-  iconComponent: _propTypes["default"].element,
+  leftIconComponent: _propTypes["default"].element,
+  rightIconComponent: _propTypes["default"].element,
   text: _propTypes["default"].string,
   size: _size2.SIZE_PROP_TYPES,
   theme: _theme2.THEME_PROP_TYPES,

package/lib/button/components/toggleButton.js

@@ -0,0 +1,91 @@
+"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 _paragraph = require("../../text/paragraph");
+
+var _excluded = ["value", "labelOn", "labelOff", "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: "toggleButton__Container",
+  componentId: "sc-183g3tk-0"
+})(["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"
+})(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);
+
+var Switch = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "toggleButton__Switch",
+  componentId: "sc-183g3tk-2"
+})(["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"
+})(["opacity:0;position:absolute;&:checked + ", "{background:", ";&:before{transform:translate(20px,-50%);}}"], Switch, function (props) {
+  return props.disabled ? _color.colorGrayscale.gray400 : _color.colorBrand.heavy;
+});
+
+var ToggleButton = function ToggleButton(_ref) {
+  var _ref$value = _ref.value,
+      value = _ref$value === void 0 ? false : _ref$value,
+      _ref$labelOn = _ref.labelOn,
+      labelOn = _ref$labelOn === void 0 ? '' : _ref$labelOn,
+      _ref$labelOff = _ref.labelOff,
+      labelOff = _ref$labelOff === void 0 ? '' : _ref$labelOff,
+      _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();
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+    text: value ? labelOn : labelOff,
+    style: {
+      color: _color.colorGrayscale.gray600,
+      whiteSpace: 'nowrap'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(Label, props, /*#__PURE__*/_react["default"].createElement(Input, {
+    type: "checkbox",
+    disabled: disabled,
+    checked: value,
+    onChange: handleChange
+  }), /*#__PURE__*/_react["default"].createElement(Switch, {
+    disabled: disabled
+  })));
+};
+
+ToggleButton.propTypes = {
+  value: _propTypes["default"].bool.isRequired,
+  labelOn: _propTypes["default"].string,
+  labelOff: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func.isRequired
+};
+var _default = ToggleButton;
+exports["default"] = _default;

package/lib/button/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "TextButton", {
     return _textButton["default"];
   }
 });
+Object.defineProperty(exports, "ToggleButton", {
+  enumerable: true,
+  get: function get() {
+    return _toggleButton["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _pillButton = _interopRequireDefault(require("./components/pillButton"));
@@ -37,12 +43,15 @@ var _iconWithTextButton = _interopRequireDefault(require("./components/iconWithT
 
 var _textButton = _interopRequireDefault(require("./components/textButton"));
 
+var _toggleButton = _interopRequireDefault(require("./components/toggleButton"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   PillButton: _pillButton["default"],
   IconButton: _iconButton["default"],
   IconWithTextButton: _iconWithTextButton["default"],
-  TextButton: _textButton["default"]
+  TextButton: _textButton["default"],
+  ToggleButton: _toggleButton["default"]
 };
 exports["default"] = _default;

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

@@ -47,7 +47,10 @@ textButton.args = {
 var withArrowIcon = Template.bind({});
 exports.withArrowIcon = withArrowIcon;
 withArrowIcon.args = {
-  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+  leftIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+    direction: "left"
+  }),
+  rightIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
     direction: "right"
   }),
   text: '文字',

package/lib/button/stories/toggleButton.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleButton = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _toggleButton = _interopRequireDefault(require("../components/toggleButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Button/Toggle Button',
+  component: _toggleButton["default"],
+  argTypes: {
+    value: {
+      defaultValue: false,
+      options: [true, false]
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_toggleButton["default"], args);
+};
+
+var toggleButton = Template.bind({});
+exports.toggleButton = toggleButton;
+toggleButton.args = {
+  value: false,
+  labelOn: '已訂閱',
+  labelOff: '未訂閱',
+  disabled: false,
+  onChange: function onChange() {}
+};

package/lib/icon/index.js

@@ -14,7 +14,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
 var _excluded = ["filename", "releaseBranch"],
-    _excluded2 = ["mediaType"];
+    _excluded2 = ["direction", "releaseBranch"],
+    _excluded3 = ["mediaType"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -56,12 +57,14 @@ Icon.propTypes = {
 var Arrow = function Arrow(_ref2) {
   var _ref2$direction = _ref2.direction,
       direction = _ref2$direction === void 0 ? 'right' : _ref2$direction,
-      releaseBranch = _ref2.releaseBranch;
+      releaseBranch = _ref2.releaseBranch,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
   var filename = "arrow_".concat(direction);
-  return /*#__PURE__*/_react["default"].createElement(Icon, {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
     filename: filename,
     releaseBranch: releaseBranch
-  });
+  }, props));
 };
 
 exports.Arrow = Arrow;
@@ -298,7 +301,7 @@ Line.propTypes = {
 
 var SocialMedia = function SocialMedia(_ref4) {
   var mediaType = _ref4.mediaType,
-      args = _objectWithoutProperties(_ref4, _excluded2);
+      args = _objectWithoutProperties(_ref4, _excluded3);
 
   return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
     filename: mediaType

package/lib/simple-header/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SimpleHeader = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _logo = require("../logo");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var HeaderContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "simple-header__HeaderContainer",
+  componentId: "sc-4xugf-0"
+})(["display:flex;flex-direction:row;justify-content:center;padding:16px 24px;"]);
+
+var SimpleHeader = function SimpleHeader(props) {
+  return /*#__PURE__*/_react["default"].createElement(HeaderContainer, props, /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, null));
+};
+
+exports.SimpleHeader = SimpleHeader;
+var _default = SimpleHeader;
+exports["default"] = _default;

package/lib/simple-header/simpleHeader.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.simpleHeader = 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: 'Header/Simple Header',
+  component: _["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], args);
+};
+
+var simpleHeader = Template.bind({});
+exports.simpleHeader = simpleHeader;
+simpleHeader.args = {};

package/lib/text/headline.js

@@ -17,10 +17,18 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _excluded = ["text", "type", "className"];
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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; }
+
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var DefaultContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -65,131 +73,44 @@ var H6Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContaine
   return props.fontFamily;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 14px;\n  "]))));
 
-var H1 = function H1(_ref) {
-  var _ref$text = _ref.text,
-      text = _ref$text === void 0 ? '' : _ref$text,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? _headlineType.TYPE["default"] : _ref$type,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className;
-  var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
-  return /*#__PURE__*/_react["default"].createElement(H1Container, {
-    fontFamily: fontFamily,
-    className: className
-  }, text);
+var withContainer = function withContainer(HeadlineContainer) {
+  var headline = function headline(_ref) {
+    var _ref$text = _ref.text,
+        text = _ref$text === void 0 ? '' : _ref$text,
+        _ref$type = _ref.type,
+        type = _ref$type === void 0 ? _headlineType.TYPE["default"] : _ref$type,
+        _ref$className = _ref.className,
+        className = _ref$className === void 0 ? '' : _ref$className,
+        props = _objectWithoutProperties(_ref, _excluded);
+
+    var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
+    return /*#__PURE__*/_react["default"].createElement(HeadlineContainer, _extends({
+      fontFamily: fontFamily,
+      className: className
+    }, props), text);
+  };
+
+  headline.displayName = 'headline';
+  headline.propTypes = {
+    text: _propTypes["default"].string,
+    type: _headlineType.TYPE_PROP_TYPES,
+    className: _propTypes["default"].string
+  };
+  return headline;
 };
 
+var H1 = withContainer(H1Container);
 exports.H1 = H1;
-H1.propTypes = {
-  text: _propTypes["default"].string,
-  type: _headlineType.TYPE_PROP_TYPES,
-  className: _propTypes["default"].string
-};
-
-var H2 = function H2(_ref2) {
-  var _ref2$text = _ref2.text,
-      text = _ref2$text === void 0 ? '' : _ref2$text,
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? _headlineType.TYPE["default"] : _ref2$type,
-      _ref2$className = _ref2.className,
-      className = _ref2$className === void 0 ? '' : _ref2$className;
-  var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
-  return /*#__PURE__*/_react["default"].createElement(H2Container, {
-    fontFamily: fontFamily,
-    className: className
-  }, text);
-};
-
+var H2 = withContainer(H2Container);
 exports.H2 = H2;
-H2.propTypes = {
-  text: _propTypes["default"].string,
-  type: _headlineType.TYPE_PROP_TYPES,
-  className: _propTypes["default"].string
-};
-
-var H3 = function H3(_ref3) {
-  var _ref3$text = _ref3.text,
-      text = _ref3$text === void 0 ? '' : _ref3$text,
-      _ref3$type = _ref3.type,
-      type = _ref3$type === void 0 ? _headlineType.TYPE["default"] : _ref3$type,
-      _ref3$className = _ref3.className,
-      className = _ref3$className === void 0 ? '' : _ref3$className;
-  var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
-  return /*#__PURE__*/_react["default"].createElement(H3Container, {
-    fontFamily: fontFamily,
-    className: className
-  }, text);
-};
-
+var H3 = withContainer(H3Container);
 exports.H3 = H3;
-H3.propTypes = {
-  text: _propTypes["default"].string,
-  type: _headlineType.TYPE_PROP_TYPES,
-  className: _propTypes["default"].string
-};
-
-var H4 = function H4(_ref4) {
-  var _ref4$text = _ref4.text,
-      text = _ref4$text === void 0 ? '' : _ref4$text,
-      _ref4$type = _ref4.type,
-      type = _ref4$type === void 0 ? _headlineType.TYPE["default"] : _ref4$type,
-      _ref4$className = _ref4.className,
-      className = _ref4$className === void 0 ? '' : _ref4$className;
-  var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
-  return /*#__PURE__*/_react["default"].createElement(H4Container, {
-    fontFamily: fontFamily,
-    className: className
-  }, text);
-};
-
+var H4 = withContainer(H4Container);
 exports.H4 = H4;
-H4.propTypes = {
-  text: _propTypes["default"].string,
-  type: _headlineType.TYPE_PROP_TYPES,
-  className: _propTypes["default"].string
-};
-
-var H5 = function H5(_ref5) {
-  var _ref5$text = _ref5.text,
-      text = _ref5$text === void 0 ? '' : _ref5$text,
-      _ref5$type = _ref5.type,
-      type = _ref5$type === void 0 ? _headlineType.TYPE["default"] : _ref5$type,
-      _ref5$className = _ref5.className,
-      className = _ref5$className === void 0 ? '' : _ref5$className;
-  var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
-  return /*#__PURE__*/_react["default"].createElement(H5Container, {
-    fontFamily: fontFamily,
-    className: className
-  }, text);
-};
-
+var H5 = withContainer(H5Container);
 exports.H5 = H5;
-H5.propTypes = {
-  text: _propTypes["default"].string,
-  type: _headlineType.TYPE_PROP_TYPES,
-  className: _propTypes["default"].string
-};
-
-var H6 = function H6(_ref6) {
-  var _ref6$text = _ref6.text,
-      text = _ref6$text === void 0 ? '' : _ref6$text,
-      _ref6$type = _ref6.type,
-      type = _ref6$type === void 0 ? _headlineType.TYPE["default"] : _ref6$type,
-      _ref6$className = _ref6.className,
-      className = _ref6$className === void 0 ? '' : _ref6$className;
-  var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
-  return /*#__PURE__*/_react["default"].createElement(H6Container, {
-    fontFamily: fontFamily,
-    className: className
-  }, text);
-};
-
+var H6 = withContainer(H6Container);
 exports.H6 = H6;
-H6.propTypes = {
-  text: _propTypes["default"].string,
-  type: _headlineType.TYPE_PROP_TYPES,
-  className: _propTypes["default"].string
-};
 var _default = {
   H1: H1,
   H2: H2,

package/lib/text/paragraph.js

@@ -15,12 +15,20 @@ var _fontWeight = require("./constants/font-weight");
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _excluded = ["text", "weight", "className"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 defaultContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "paragraph__defaultContainer",
   componentId: "sc-1aejhao-0"
-})(["font-weight:", ";font-family:", ";line-height:150%;"], function (props) {
+})(["font-weight:", ";font-family:", ";line-height:150%;display:flex;align-items:center;"], function (props) {
   return _font.fontWeight[props.weight];
 }, _font.fontFamily["default"]);
 
@@ -41,85 +49,39 @@ var P4Container = /*#__PURE__*/(0, _styledComponents["default"])(defaultContaine
   componentId: "sc-1aejhao-4"
 })(["font-size:10px;"]);
 
-var P1 = function P1(_ref) {
-  var _ref$text = _ref.text,
-      text = _ref$text === void 0 ? '' : _ref$text,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? _fontWeight.WEIGHT.normal : _ref$weight,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className;
-  return /*#__PURE__*/_react["default"].createElement(P1Container, {
-    weight: weight,
-    className: className
-  }, text);
+var withContainer = function withContainer(ParagraphContainer) {
+  var paragraph = function paragraph(_ref) {
+    var _ref$text = _ref.text,
+        text = _ref$text === void 0 ? '' : _ref$text,
+        _ref$weight = _ref.weight,
+        weight = _ref$weight === void 0 ? _fontWeight.WEIGHT.normal : _ref$weight,
+        _ref$className = _ref.className,
+        className = _ref$className === void 0 ? '' : _ref$className,
+        props = _objectWithoutProperties(_ref, _excluded);
+
+    return /*#__PURE__*/_react["default"].createElement(ParagraphContainer, _extends({
+      weight: weight,
+      className: className
+    }, props), text);
+  };
+
+  paragraph.displayName = 'paragraph';
+  paragraph.propTypes = {
+    text: _propTypes["default"].string,
+    weight: _fontWeight.WEIGHT_PROP_TYPES,
+    className: _propTypes["default"].string
+  };
+  return paragraph;
 };
 
+var P1 = withContainer(P1Container);
 exports.P1 = P1;
-P1.propTypes = {
-  text: _propTypes["default"].string,
-  weight: _fontWeight.WEIGHT_PROP_TYPES,
-  className: _propTypes["default"].string
-};
-
-var P2 = function P2(_ref2) {
-  var _ref2$text = _ref2.text,
-      text = _ref2$text === void 0 ? '' : _ref2$text,
-      _ref2$weight = _ref2.weight,
-      weight = _ref2$weight === void 0 ? _fontWeight.WEIGHT.normal : _ref2$weight,
-      _ref2$className = _ref2.className,
-      className = _ref2$className === void 0 ? '' : _ref2$className;
-  return /*#__PURE__*/_react["default"].createElement(P2Container, {
-    weight: weight,
-    className: className
-  }, text);
-};
-
+var P2 = withContainer(P2Container);
 exports.P2 = P2;
-P2.propTypes = {
-  text: _propTypes["default"].string,
-  weight: _fontWeight.WEIGHT_PROP_TYPES,
-  className: _propTypes["default"].string
-};
-
-var P3 = function P3(_ref3) {
-  var _ref3$text = _ref3.text,
-      text = _ref3$text === void 0 ? '' : _ref3$text,
-      _ref3$weight = _ref3.weight,
-      weight = _ref3$weight === void 0 ? _fontWeight.WEIGHT.normal : _ref3$weight,
-      _ref3$className = _ref3.className,
-      className = _ref3$className === void 0 ? '' : _ref3$className;
-  return /*#__PURE__*/_react["default"].createElement(P3Container, {
-    weight: weight,
-    className: className
-  }, text);
-};
-
+var P3 = withContainer(P3Container);
 exports.P3 = P3;
-P3.propTypes = {
-  text: _propTypes["default"].string,
-  weight: _fontWeight.WEIGHT_PROP_TYPES,
-  className: _propTypes["default"].string
-};
-
-var P4 = function P4(_ref4) {
-  var _ref4$text = _ref4.text,
-      text = _ref4$text === void 0 ? '' : _ref4$text,
-      _ref4$weight = _ref4.weight,
-      weight = _ref4$weight === void 0 ? _fontWeight.WEIGHT.normal : _ref4$weight,
-      _ref4$className = _ref4.className,
-      className = _ref4$className === void 0 ? '' : _ref4$className;
-  return /*#__PURE__*/_react["default"].createElement(P4Container, {
-    weight: weight,
-    className: className
-  }, text);
-};
-
+var P4 = withContainer(P4Container);
 exports.P4 = P4;
-P4.propTypes = {
-  text: _propTypes["default"].string,
-  weight: _fontWeight.WEIGHT_PROP_TYPES,
-  className: _propTypes["default"].string
-};
 var _default = {
   P1: P1,
   P2: P2,

package/package.json

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