@twreporter/react-components 8.7.1 → 8.8.0

package/lib/icon/stories/hamburger.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hamburger = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var master = _releaseBranch["default"].master,
+    staging = _releaseBranch["default"].staging,
+    preview = _releaseBranch["default"].preview,
+    release = _releaseBranch["default"].release;
+var _default = {
+  title: 'Icon/Hamburger',
+  component: _index.Hamburger,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var hamburger = function hamburger(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Hamburger, args);
+};
+
+exports.hamburger = hamburger;

package/lib/icon/stories/home.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.home = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var master = _releaseBranch["default"].master,
+    staging = _releaseBranch["default"].staging,
+    preview = _releaseBranch["default"].preview,
+    release = _releaseBranch["default"].release;
+var _default = {
+  title: 'Icon/Home',
+  component: _index.Home,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var home = function home(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Home, args);
+};
+
+exports.home = home;

package/lib/icon/stories/loading.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loading = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var master = _releaseBranch["default"].master,
+    staging = _releaseBranch["default"].staging,
+    preview = _releaseBranch["default"].preview,
+    release = _releaseBranch["default"].release;
+var _default = {
+  title: 'Icon/Loading',
+  component: _index.Loading,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var loading = function loading(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Loading, args);
+};
+
+exports.loading = loading;

package/lib/icon/stories/member.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.member = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var master = _releaseBranch["default"].master,
+    staging = _releaseBranch["default"].staging,
+    preview = _releaseBranch["default"].preview,
+    release = _releaseBranch["default"].release;
+var _default = {
+  title: 'Icon/Member',
+  component: _index.Member,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var member = function member(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Member, args);
+};
+
+exports.member = member;

package/lib/icon/stories/search.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.search = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var master = _releaseBranch["default"].master,
+    staging = _releaseBranch["default"].staging,
+    preview = _releaseBranch["default"].preview,
+    release = _releaseBranch["default"].release;
+var _default = {
+  title: 'Icon/Search',
+  component: _index.Search,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var search = function search(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Search, args);
+};
+
+exports.search = search;

package/lib/icon/stories/share.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.share = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var master = _releaseBranch["default"].master,
+    staging = _releaseBranch["default"].staging,
+    preview = _releaseBranch["default"].preview,
+    release = _releaseBranch["default"].release;
+var _default = {
+  title: 'Icon/Share',
+  component: _index.Share,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var share = function share(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Share, args);
+};
+
+exports.share = share;

package/lib/icon/stories/socialMedia.stories.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.socialMedia = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
+
+var _index = require("../index");
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var master = _releaseBranch["default"].master,
+    staging = _releaseBranch["default"].staging,
+    preview = _releaseBranch["default"].preview,
+    release = _releaseBranch["default"].release;
+
+var SocialMedia = function SocialMedia(_ref) {
+  var mediaType = _ref.mediaType,
+      releaseBranch = _ref.releaseBranch;
+  return /*#__PURE__*/_react["default"].createElement(_index.Icon, {
+    filename: mediaType,
+    releaseBranch: releaseBranch
+  });
+};
+
+SocialMedia.propTypes = {
+  mediaType: _propTypes["default"].oneOf(['facebook', 'instagram', 'medium', 'twitter', 'youtube', 'line']),
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+var _default = {
+  title: 'Icon/Social Media',
+  component: SocialMedia,
+  argTypes: {
+    mediaType: {
+      defaultValue: 'facebook',
+      options: ['facebook', 'instagram', 'medium', 'twitter', 'youtube', 'line'],
+      control: {
+        type: 'radio'
+      }
+    },
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var socialMedia = function socialMedia(args) {
+  return /*#__PURE__*/_react["default"].createElement(SocialMedia, args);
+};
+
+exports.socialMedia = socialMedia;

package/lib/icon/stories/text.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.text = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var master = _releaseBranch["default"].master,
+    staging = _releaseBranch["default"].staging,
+    preview = _releaseBranch["default"].preview,
+    release = _releaseBranch["default"].release;
+var _default = {
+  title: 'Icon/Text',
+  component: _index.Text,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var text = function text(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Text, args);
+};
+
+exports.text = text;

package/lib/icon/stories/topic.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.topic = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var master = _releaseBranch["default"].master,
+    staging = _releaseBranch["default"].staging,
+    preview = _releaseBranch["default"].preview,
+    release = _releaseBranch["default"].release;
+var _default = {
+  title: 'Icon/Topic',
+  component: _index.Topic,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var topic = function topic(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Topic, args);
+};
+
+exports.topic = topic;

package/lib/logo/components/logo-footer.js

@@ -38,7 +38,7 @@ var LogoFooter = function LogoFooter(_ref) {
 LogoFooter.propTypes = {
   releaseBranch: _propTypes["default"].releaseBranch
 };
-LogoFooter.deafaultProps = {
+LogoFooter.defaultProps = {
   releaseBranch: _releaseBranch["default"].master
 };
 var _default = LogoFooter;

package/lib/logo/components/logo-header.js

@@ -59,10 +59,10 @@ var LogoHeader = function LogoHeader(_ref) {
 };
 
 LogoHeader.propTypes = {
-  type: _propTypes["default"].string,
+  type: _propTypes["default"].oneOf(['default', 'white']),
   releaseBranch: _propTypes2["default"].releaseBranch
 };
-LogoHeader.deafaultProps = {
+LogoHeader.defaultProps = {
   type: 'default',
   releaseBranch: _releaseBranch["default"].master
 };

package/lib/logo/stories/logoFooter.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.footer = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _logoFooter = _interopRequireDefault(require("../components/logo-footer"));
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Logo/Footer',
+  component: _logoFooter["default"],
+  argTypes: {
+    releaseBranch: {
+      defaultValue: _releaseBranch["default"].master,
+      options: [_releaseBranch["default"].master, _releaseBranch["default"].staging, _releaseBranch["default"].preview, _releaseBranch["default"].release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var footer = function footer(args) {
+  return /*#__PURE__*/_react["default"].createElement(_logoFooter["default"], args);
+};
+
+exports.footer = footer;

package/lib/logo/stories/logoHeader.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.header = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _logoHeader = _interopRequireDefault(require("../components/logo-header"));
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Logo/Header',
+  component: _logoHeader["default"],
+  argTypes: {
+    releaseBranch: {
+      defaultValue: _releaseBranch["default"].master,
+      options: [_releaseBranch["default"].master, _releaseBranch["default"].staging, _releaseBranch["default"].preview, _releaseBranch["default"].release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var header = function header(args) {
+  return /*#__PURE__*/_react["default"].createElement(_logoHeader["default"], args);
+};
+
+exports.header = header;
+header.args = {
+  type: 'default'
+};

package/lib/text/headline.js

@@ -0,0 +1,177 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _font = require("@twreporter/core/lib/constants/font");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var titleDefaultFont = /*#__PURE__*/(0, _styledComponents.css)(["font-weight:", ";"], _font.fontWeight.bold);
+
+var H1Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "headline__H1Container",
+  componentId: "axdp97-0"
+})(["", " line-height:125%;font-size:36px;font-family:", ";", ""], titleDefaultFont, function (props) {
+  return props.type === 'default' ? _font.fontFamily["default"] : _font.fontFamily.title;
+}, _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 32px;\n  "]))));
+
+var H2Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "headline__H2Container",
+  componentId: "axdp97-1"
+})(["", " line-height:125%;font-size:32px;font-family:", ";", ""], titleDefaultFont, function (props) {
+  return props.type === 'default' ? _font.fontFamily["default"] : _font.fontFamily.title;
+}, _mediaQuery["default"].tabletAndBelow(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-size: 24px;\n  "]))));
+
+var H3Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "headline__H3Container",
+  componentId: "axdp97-2"
+})(["", " line-height:150%;font-size:28px;font-family:", ";", ""], titleDefaultFont, function (props) {
+  return props.type === 'default' ? _font.fontFamily["default"] : _font.fontFamily.title;
+}, _mediaQuery["default"].tabletAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 20px;\n  "]))));
+
+var H4Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "headline__H4Container",
+  componentId: "axdp97-3"
+})(["", " line-height:150%;font-size:22px;font-family:", ";", ""], titleDefaultFont, function (props) {
+  return props.type === 'default' ? _font.fontFamily["default"] : _font.fontFamily.title;
+}, _mediaQuery["default"].tabletAndBelow(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 18px;\n  "]))));
+
+var H5Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "headline__H5Container",
+  componentId: "axdp97-4"
+})(["", " line-height:150%;font-size:18px;font-family:", ";", ""], titleDefaultFont, function (props) {
+  return props.type === 'default' ? _font.fontFamily["default"] : _font.fontFamily.title;
+}, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 16px;\n  "]))));
+
+var H6Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "headline__H6Container",
+  componentId: "axdp97-5"
+})(["", " line-height:150%;font-size:16px;font-family:", ";", ""], titleDefaultFont, function (props) {
+  return props.type === 'default' ? _font.fontFamily["default"] : _font.fontFamily.title;
+}, _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 ? 'default' : _ref$type;
+  return /*#__PURE__*/_react["default"].createElement(H1Container, {
+    type: type
+  }, text);
+};
+
+exports.H1 = H1;
+H1.propTypes = {
+  text: _propTypes["default"].string,
+  type: _propTypes["default"].oneOf(['default', 'article'])
+};
+
+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 ? 'default' : _ref2$type;
+  return /*#__PURE__*/_react["default"].createElement(H2Container, {
+    type: type
+  }, text);
+};
+
+exports.H2 = H2;
+H2.propTypes = {
+  text: _propTypes["default"].string,
+  type: _propTypes["default"].oneOf(['default', 'article'])
+};
+
+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 ? 'default' : _ref3$type;
+  return /*#__PURE__*/_react["default"].createElement(H3Container, {
+    type: type
+  }, text);
+};
+
+exports.H3 = H3;
+H3.propTypes = {
+  text: _propTypes["default"].string,
+  type: _propTypes["default"].oneOf(['default', 'article'])
+};
+
+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 ? 'default' : _ref4$type;
+  return /*#__PURE__*/_react["default"].createElement(H4Container, {
+    type: type
+  }, text);
+};
+
+exports.H4 = H4;
+H4.propTypes = {
+  text: _propTypes["default"].string,
+  type: _propTypes["default"].oneOf(['default', 'article'])
+};
+
+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 ? 'default' : _ref5$type;
+  return /*#__PURE__*/_react["default"].createElement(H5Container, {
+    type: type
+  }, text);
+};
+
+exports.H5 = H5;
+H5.propTypes = {
+  text: _propTypes["default"].string,
+  type: _propTypes["default"].oneOf(['default', 'article'])
+};
+
+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 ? 'default' : _ref6$type;
+  return /*#__PURE__*/_react["default"].createElement(H6Container, {
+    type: type
+  }, text);
+};
+
+exports.H6 = H6;
+H6.propTypes = {
+  text: _propTypes["default"].string,
+  type: _propTypes["default"].oneOf(['default', 'article'])
+};
+var _default = {
+  H1: H1,
+  H2: H2,
+  H3: H3,
+  H4: H4,
+  H5: H5,
+  H6: H6
+};
+exports["default"] = _default;