@twreporter/react-components 8.7.1 → 8.8.0

package/lib/icon/index.js

@@ -0,0 +1,302 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Line = exports.Youtube = exports.Twitter = exports.Medium = exports.Instagram = exports.Facebook = exports.Loading = exports.Copy = exports.Topic = exports.Article = exports.Clock = exports.Text = exports.Share = exports.Home = exports.Member = exports.Search = exports.Cross = exports.Hamburger = exports.Bookmark = exports.Arrow = exports.Icon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+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); }
+
+var baseGCSDir = 'https://www.twreporter.org/assets/icon/';
+
+var IconContainer = /*#__PURE__*/_styledComponents["default"].svg.withConfig({
+  displayName: "icon__IconContainer",
+  componentId: "sc-4fv57p-0"
+})(["height:24px;width:24px;background-color:black;mask-image:url(", ");mask-size:cover;"], function (props) {
+  return props.src;
+});
+
+var Icon = function Icon(_ref) {
+  var _ref$filename = _ref.filename,
+      filename = _ref$filename === void 0 ? '' : _ref$filename,
+      _ref$releaseBranch = _ref.releaseBranch,
+      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch["default"].master : _ref$releaseBranch;
+  var src = "".concat(baseGCSDir).concat(releaseBranch, "/").concat(filename, ".svg");
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    alt: filename,
+    src: src
+  });
+};
+
+exports.Icon = Icon;
+Icon.propTypes = {
+  filename: _propTypes["default"].string,
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Arrow = function Arrow(_ref2) {
+  var _ref2$direction = _ref2.direction,
+      direction = _ref2$direction === void 0 ? 'right' : _ref2$direction,
+      releaseBranch = _ref2.releaseBranch;
+  var filename = "arrow_".concat(direction);
+  return /*#__PURE__*/_react["default"].createElement(Icon, {
+    filename: filename,
+    releaseBranch: releaseBranch
+  });
+};
+
+exports.Arrow = Arrow;
+Arrow.propTypes = {
+  direction: _propTypes["default"].oneOf(['right', 'left', 'up', 'down']),
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Bookmark = function Bookmark(_ref3) {
+  var _ref3$type = _ref3.type,
+      type = _ref3$type === void 0 ? 'basic' : _ref3$type,
+      releaseBranch = _ref3.releaseBranch;
+  var filename = "bookmark_".concat(type);
+  return /*#__PURE__*/_react["default"].createElement(Icon, {
+    filename: filename,
+    releaseBranch: releaseBranch
+  });
+};
+
+exports.Bookmark = Bookmark;
+Bookmark.propTypes = {
+  type: _propTypes["default"].oneOf(['basic', 'add', 'saved']),
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Hamburger = function Hamburger(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "hamburger"
+  }, args));
+};
+
+exports.Hamburger = Hamburger;
+Hamburger.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Cross = function Cross(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "cross"
+  }, args));
+};
+
+exports.Cross = Cross;
+Cross.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Search = function Search(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "search"
+  }, args));
+};
+
+exports.Search = Search;
+Search.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Member = function Member(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "member"
+  }, args));
+};
+
+exports.Member = Member;
+Member.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Home = function Home(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "home"
+  }, args));
+};
+
+exports.Home = Home;
+Home.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Share = function Share(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "share"
+  }, args));
+};
+
+exports.Share = Share;
+Share.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Text = function Text(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "text"
+  }, args));
+};
+
+exports.Text = Text;
+Text.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Clock = function Clock(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "clock"
+  }, args));
+};
+
+exports.Clock = Clock;
+Clock.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Article = function Article(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "article"
+  }, args));
+};
+
+exports.Article = Article;
+Article.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Topic = function Topic(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "topic"
+  }, args));
+};
+
+exports.Topic = Topic;
+Topic.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Copy = function Copy(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "copy"
+  }, args));
+};
+
+exports.Copy = Copy;
+Copy.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Loading = function Loading(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "loading"
+  }, args));
+};
+
+exports.Loading = Loading;
+Loading.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Facebook = function Facebook(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "facebook"
+  }, args));
+};
+
+exports.Facebook = Facebook;
+Facebook.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Instagram = function Instagram(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "instagram"
+  }, args));
+};
+
+exports.Instagram = Instagram;
+Instagram.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Medium = function Medium(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "medium"
+  }, args));
+};
+
+exports.Medium = Medium;
+Medium.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Twitter = function Twitter(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, {
+    filename: "twitter"
+  });
+};
+
+exports.Twitter = Twitter;
+Twitter.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Youtube = function Youtube(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, {
+    filename: "youtube"
+  });
+};
+
+exports.Youtube = Youtube;
+Youtube.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var Line = function Line(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, {
+    filename: "line"
+  });
+};
+
+exports.Line = Line;
+Line.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+var _default = {
+  Arrow: Arrow,
+  Article: Article,
+  Bookmark: Bookmark,
+  Clock: Clock,
+  Copy: Copy,
+  Cross: Cross,
+  Facebook: Facebook,
+  Hamburger: Hamburger,
+  Home: Home,
+  Instagram: Instagram,
+  Line: Line,
+  Loading: Loading,
+  Medium: Medium,
+  Member: Member,
+  Search: Search,
+  Share: Share,
+  Text: Text,
+  Topic: Topic,
+  Twitter: Twitter,
+  Youtube: Youtube
+};
+exports["default"] = _default;

package/lib/icon/stories/arrow.stories.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.down = exports.up = exports.left = exports.right = exports.arrow = 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/Arrow',
+  component: _index.Arrow,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Arrow, args);
+};
+
+var arrow = Template.bind({});
+exports.arrow = arrow;
+arrow.args = {
+  direction: 'right'
+};
+var right = Template.bind({});
+exports.right = right;
+right.parameters = {
+  controls: {
+    exclude: ['direction']
+  }
+};
+right.args = {
+  direction: 'right'
+};
+var left = Template.bind({});
+exports.left = left;
+left.parameters = {
+  controls: {
+    exclude: ['direction']
+  }
+};
+left.args = {
+  direction: 'left'
+};
+var up = Template.bind({});
+exports.up = up;
+up.parameters = {
+  controls: {
+    exclude: ['direction']
+  }
+};
+up.args = {
+  direction: 'up'
+};
+var down = Template.bind({});
+exports.down = down;
+down.parameters = {
+  controls: {
+    exclude: ['direction']
+  }
+};
+down.args = {
+  direction: 'down'
+};

package/lib/icon/stories/article.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.article = 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/Article',
+  component: _index.Article,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var article = function article(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Article, args);
+};
+
+exports.article = article;

package/lib/icon/stories/bookmark.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.saved = exports.add = exports.basic = exports.bookmark = 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/Bookmark',
+  component: _index.Bookmark,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Bookmark, args);
+};
+
+var bookmark = Template.bind({});
+exports.bookmark = bookmark;
+bookmark.args = {
+  type: 'basic'
+};
+var basic = Template.bind({});
+exports.basic = basic;
+basic.parameters = {
+  controls: {
+    exclude: ['type']
+  }
+};
+basic.args = {
+  type: 'basic'
+};
+var add = Template.bind({});
+exports.add = add;
+add.parameters = {
+  controls: {
+    exclude: ['type']
+  }
+};
+add.args = {
+  type: 'add'
+};
+var saved = Template.bind({});
+exports.saved = saved;
+saved.parameters = {
+  controls: {
+    exclude: ['type']
+  }
+};
+saved.args = {
+  type: 'saved'
+};

package/lib/icon/stories/changeIconColor.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.changeIconColor = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _index = require("../index");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "changeIconColorstories__IconContainer",
+  componentId: "qv69ol-0"
+})(["svg{background-color:", ";}"], function (props) {
+  return props.color;
+});
+
+var ChangeIconColor = function ChangeIconColor(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    color: color
+  }, /*#__PURE__*/_react["default"].createElement(_index.Article, null));
+};
+
+ChangeIconColor.propTypes = {
+  color: _propTypes["default"].string
+};
+var _default = {
+  title: 'Icon/Change Icon Color',
+  component: ChangeIconColor,
+  argTypes: {
+    color: {
+      control: {
+        type: 'color',
+        presetColors: ['red', 'green']
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var changeIconColor = function changeIconColor(args) {
+  return /*#__PURE__*/_react["default"].createElement(ChangeIconColor, args);
+};
+
+exports.changeIconColor = changeIconColor;

package/lib/icon/stories/clock.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clock = 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/Clock',
+  component: _index.Clock,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var clock = function clock(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Clock, args);
+};
+
+exports.clock = clock;

package/lib/icon/stories/copy.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.copy = 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/Copy',
+  component: _index.Copy,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var copy = function copy(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Copy, args);
+};
+
+exports.copy = copy;

package/lib/icon/stories/cross.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cross = 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/Cross',
+  component: _index.Cross,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var cross = function cross(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Cross, args);
+};
+
+exports.cross = cross;