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

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 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.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)
+
+
+### 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,64 @@
+"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;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,
+      _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(ColorP2, {
+    text: text,
+    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

@@ -17,15 +17,15 @@ 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", "iconComponent", "size", "theme", "type", "active", "disabled"];
+var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "type", "active", "disabled"];
 
 var _templateObject;
 
@@ -56,14 +56,24 @@ 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,
-      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,
-      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,
@@ -100,14 +110,17 @@ var TextButton = function TextButton(_ref) {
     color: color,
     hoverColor: hoverColor,
     iconSize: iconSize
-  }, props), textJSX, iconComponent);
+  }, 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 = {
-  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,
+  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

@@ -0,0 +1,92 @@
+"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 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-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-2"
+})(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);
+
+var Switch = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "toggleButton__Switch",
+  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-4"
+})(["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(ColorP2, {
+    text: value ? labelOn : labelOff
+  }), /*#__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/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/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

@@ -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
@@ -47,12 +53,15 @@ 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: '文字',
   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/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/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 _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 'normal':
+    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.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.colorBrand.heavy,

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/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

@@ -0,0 +1,32 @@
+"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 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, 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.1",
   "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": "8b5caea308bf4471059644072ca9edb78c4b6fde"
 }