@stokr/components-library 1.0.9 → 1.1.1

package/dist/components/ToDoList/ToDoListTask.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ToDoListTaskReal = exports.ToDoListTaskOverview = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ToDoListTask = _interopRequireDefault(require("./ToDoListTask"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/ToDoList/ToDoListTask',
+  component: _ToDoListTask.default,
+  argTypes: {
+    title: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    message: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    state: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    icon: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    link: {
+      type: 'any',
+      defaultValue: undefined
+    },
+    tooltip: {
+      type: 'string',
+      defaultValue: ''
+    },
+    notificationCount: {
+      type: 'string',
+      defaultValue: ''
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_ToDoListTask.default, args)));
+};
+var ToDoListTaskReal = Template.bind({});
+exports.ToDoListTaskReal = ToDoListTaskReal;
+ToDoListTaskReal.args = {
+  title: 'Risk Questionaire',
+  message: 'You have read and understood the risks',
+  link: 'www.link.com',
+  state: 'approved',
+  tooltip: 'a tool tip for you',
+  notificationCount: '5'
+};
+var ToDoListTaskOverview = Template.bind({});
+exports.ToDoListTaskOverview = ToDoListTaskOverview;
+ToDoListTaskOverview.args = {
+  title: 'Task Title',
+  message: 'Task Message',
+  icon: 'Icon',
+  link: 'www.link.com',
+  tooltip: 'a tool-tip for you',
+  notificationCount: '5'
+};

package/dist/components/ToDoList/ToDoListTask.styles.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipBox = exports.TitleContainer = exports.Title = exports.State = exports.Notifications = exports.IconContainer = exports.Icon = exports.Content = exports.Container = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Icon = _interopRequireDefault(require("../Icon/Icon.style"));
+var _ToDoList = require("./ToDoList");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "ToDoListTaskstyles__Container",
+  componentId: "sc-lpyruk-0"
+})(["display:flex;height:56px;align-items:center;", " ", ""], function (props) {
+  return props.disabled && "\n    opacity:0.5;\n    cursor: context-menu;\n  ";
+}, function (props) {
+  return props.link && "\n    cursor:pointer;\n  ";
+});
+exports.Container = Container;
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "ToDoListTaskstyles__Content",
+  componentId: "sc-lpyruk-1"
+})(["display:flex;flex-direction:column;"]);
+exports.Content = Content;
+var TitleContainer = _styledComponents.default.div.withConfig({
+  displayName: "ToDoListTaskstyles__TitleContainer",
+  componentId: "sc-lpyruk-2"
+})(["display:flex;align-items:center;"]);
+exports.TitleContainer = TitleContainer;
+var Title = _styledComponents.default.div.withConfig({
+  displayName: "ToDoListTaskstyles__Title",
+  componentId: "sc-lpyruk-3"
+})(["font-size:16px;font-weight:600;line-height:24px;letter-spacing:0.6px;text-align:left;", " ", ""], function (props) {
+  return (props.state === _ToDoList.ToDoTaskState.IN_PROGRESS || props.state === _ToDoList.ToDoTaskState.APPROVED || props.state === _ToDoList.ToDoTaskState.NOT_AVAILABLE) && "\n    opacity: 0.3;\n  ";
+}, function (props) {
+  return props.link && "\n    opacity: 1;\n  ";
+});
+exports.Title = Title;
+var Notifications = _styledComponents.default.div.withConfig({
+  displayName: "ToDoListTaskstyles__Notifications",
+  componentId: "sc-lpyruk-4"
+})(["position:relative;right:-5px;width:16px;height:16px;color:#ffffff;font-size:11px;font-weight:700;line-height:16px;text-align:center;background-color:#ee220d;border-radius:50%;padding-left:0;"]);
+exports.Notifications = Notifications;
+var State = _styledComponents.default.p.withConfig({
+  displayName: "ToDoListTaskstyles__State",
+  componentId: "sc-lpyruk-5"
+})(["margin-top:3px;font-size:11px;line-height:16px;letter-spacing:0.4px;font-weight:300;text-align:left;opacity:0.6;"]);
+exports.State = State;
+var IconContainer = _styledComponents.default.div.withConfig({
+  displayName: "ToDoListTaskstyles__IconContainer",
+  componentId: "sc-lpyruk-6"
+})(["flex-shrink:0;width:23px;text-align:center;margin-right:10px;position:relative;top:-10px;"]);
+exports.IconContainer = IconContainer;
+var TooltipBox = _styledComponents.default.div.withConfig({
+  displayName: "ToDoListTaskstyles__TooltipBox",
+  componentId: "sc-lpyruk-7"
+})(["max-width:240px;text-align:left;"]);
+exports.TooltipBox = TooltipBox;
+var Icon = (0, _styledComponents.default)(_Icon.default).withConfig({
+  displayName: "ToDoListTaskstyles__Icon",
+  componentId: "sc-lpyruk-8"
+})(["font-size:20px;width:18px;text-align:center;", " ", " ", " ", " ", ""], function (props) {
+  return props.state === _ToDoList.ToDoTaskState.APPROVED && "\n    font-size: 13px;\n    color: ".concat(_colors.default.freshGreen, ";\n  ");
+}, function (props) {
+  return props.state === _ToDoList.ToDoTaskState.REJECTED && "\n    color: ".concat(_colors.default.orangishRed, ";\n  ");
+}, function (props) {
+  return props.state === _ToDoList.ToDoTaskState.IN_PROGRESS && "\n    opacity: 0.3;\n  ";
+}, function (props) {
+  return props.state === _ToDoList.ToDoTaskState.SKIPPED && "\n    font-size: 13px;\n  ";
+}, function (props) {
+  return props.state === _ToDoList.ToDoTaskState.NOT_AVAILABLE && "\n    font-size: 13px;\n    opacity: 0.3;\n  ";
+});
+exports.Icon = Icon;

package/dist/components/TransactionDetails/TransactionDetails.js

@@ -0,0 +1,46 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TransactionDetails = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _BasicTable = _interopRequireDefault(require("../BasicTable/BasicTable"));
+var _TransactionDetails = require("./TransactionDetails.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var TransactionDetails = function TransactionDetails(props) {
+  var data = props.data;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showDetails = _useState2[0],
+    setShowDetails = _useState2[1];
+  var toggleDetails = function toggleDetails() {
+    setShowDetails(!showDetails);
+  };
+  return /*#__PURE__*/_react.default.createElement(_TransactionDetails.Container, null, data.length > 0 ? /*#__PURE__*/_react.default.createElement(_TransactionDetails.Toggle, {
+    onClick: toggleDetails
+  }, showDetails ? 'hide details' : 'view details') : /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_TransactionDetails.DetailsCollapse, {
+    isOpened: showDetails
+  }, /*#__PURE__*/_react.default.createElement(_BasicTable.default, {
+    data: data
+  })));
+};
+exports.TransactionDetails = TransactionDetails;
+TransactionDetails.propTypes = {
+  data: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string,
+    value: _propTypes.default.string.isRequired
+  })).isRequired
+};
+var _default = TransactionDetails;
+exports.default = _default;

package/dist/components/TransactionDetails/TransactionDetails.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TransactionDetails4 = exports.TransactionDetails1 = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TransactionDetails = require("./TransactionDetails");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/TransactionDetails',
+  component: _TransactionDetails.TransactionDetails,
+  argTypes: {
+    data: [{
+      label: {
+        type: 'string'
+      }
+    }, {
+      value: {
+        type: 'string',
+        required: true
+      }
+    }],
+    required: true
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_TransactionDetails.TransactionDetails, args)));
+};
+var TransactionDetails1 = Template.bind({});
+exports.TransactionDetails1 = TransactionDetails1;
+TransactionDetails1.args = {
+  data: [{
+    label: 'This is a Label',
+    value: 'This is a value'
+  }]
+};
+var TransactionDetails4 = Template.bind({});
+exports.TransactionDetails4 = TransactionDetails4;
+TransactionDetails4.args = {
+  data: [{
+    label: 'This is a Label',
+    value: 'This is a value'
+  }, {
+    label: 'This is a Label too',
+    value: 'This is a value too'
+  }, {
+    label: 'This is Label three',
+    value: 'This is value three'
+  }, {
+    label: 'This is Label four',
+    value: 'This is value four'
+  }]
+};
+
+//doublecheck:
+// state?

package/dist/components/TransactionDetails/TransactionDetails.styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toggle = exports.DetailsCollapse = exports.Container = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactCollapse = require("react-collapse");
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "TransactionDetailsstyles__Container",
+  componentId: "sc-yhycqf-0"
+})(["display:block;position:relative;text-align:center;padding-top:8px;"]);
+exports.Container = Container;
+var Toggle = _styledComponents.default.button.withConfig({
+  displayName: "TransactionDetailsstyles__Toggle",
+  componentId: "sc-yhycqf-1"
+})(["display:inline-block;font-size:11px;line-height:16px;color:", ";transition:color 0.2s;outline:0;&:hover{color:", ";}"], function (props) {
+  return _theme.default.cGrey2;
+}, function (props) {
+  return _theme.default.cPrimary;
+});
+exports.Toggle = Toggle;
+var DetailsCollapse = (0, _styledComponents.default)(_reactCollapse.Collapse).withConfig({
+  displayName: "TransactionDetailsstyles__DetailsCollapse",
+  componentId: "sc-yhycqf-2"
+})(["opacity:0;transition:opacity 0.2s;margin-top:12px;", ""], function (props) {
+  return props.isOpened && "\n    opacity: 1;\n    border-bottom: 1px solid ".concat(_theme.default.cLightGrey, ";\n  ");
+});
+exports.DetailsCollapse = DetailsCollapse;

package/dist/components/TransactionInfo/TransactionInfo.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TransactionInfo = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _TransactionInfo = require("./TransactionInfo.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var TransactionInfo = function TransactionInfo(_ref) {
+  var value1 = _ref.value1,
+    unit1 = _ref.unit1,
+    name1 = _ref.name1,
+    owner1 = _ref.owner1,
+    value2 = _ref.value2,
+    unit2 = _ref.unit2,
+    name2 = _ref.name2,
+    owner2 = _ref.owner2,
+    green = _ref.green,
+    red = _ref.red;
+  return /*#__PURE__*/_react.default.createElement(_TransactionInfo.Container, null, /*#__PURE__*/_react.default.createElement(_TransactionInfo.Account, null, /*#__PURE__*/_react.default.createElement(_TransactionInfo.Name, {
+    green: green,
+    red: red
+  }, "".concat(name1, " ").concat(owner1)), /*#__PURE__*/_react.default.createElement(_TransactionInfo.Value, {
+    green: green,
+    red: red
+  }, "".concat(unit1, " ").concat(value1))), /*#__PURE__*/_react.default.createElement(_TransactionInfo.TransferIcon, null), /*#__PURE__*/_react.default.createElement(_TransactionInfo.Account, null, /*#__PURE__*/_react.default.createElement(_TransactionInfo.Name, {
+    green: green,
+    red: red
+  }, "".concat(name2, " ").concat(owner2)), /*#__PURE__*/_react.default.createElement(_TransactionInfo.Value, {
+    green: green,
+    red: red
+  }, "".concat(unit2, " ").concat(value2))));
+};
+exports.TransactionInfo = TransactionInfo;
+TransactionInfo.propTypes = {
+  value1: _propTypes.default.string,
+  unit1: _propTypes.default.string,
+  name1: _propTypes.default.string,
+  owner1: _propTypes.default.string,
+  value2: _propTypes.default.string,
+  unit2: _propTypes.default.string,
+  name2: _propTypes.default.string,
+  owner2: _propTypes.default.string
+};
+TransactionInfo.defaultProps = {
+  value1: '',
+  unit1: '',
+  name1: '',
+  owner1: '',
+  value2: '',
+  unit2: '',
+  name2: '',
+  owner2: ''
+};
+var _default = TransactionInfo;
+exports.default = _default;

package/dist/components/TransactionInfo/TransactionInfo.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TransactionInfoExample = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TransactionInfo = require("./TransactionInfo");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/TransactionInfo',
+  component: _TransactionInfo.TransactionInfo,
+  argTypes: {
+    value1: {
+      type: 'string',
+      defaultValue: ''
+    },
+    unit1: {
+      type: 'string',
+      defaultValue: ''
+    },
+    name1: {
+      type: 'string',
+      defaultValue: ''
+    },
+    owner1: {
+      type: 'string',
+      defaultValue: ''
+    },
+    value2: {
+      type: 'string',
+      defaultValue: ''
+    },
+    unit2: {
+      type: 'string',
+      defaultValue: ''
+    },
+    name2: {
+      type: 'string',
+      defaultValue: ''
+    },
+    owner2: {
+      type: 'string',
+      defaultValue: ''
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_TransactionInfo.TransactionInfo, args)));
+};
+var TransactionInfoExample = Template.bind({});
+exports.TransactionInfoExample = TransactionInfoExample;
+TransactionInfoExample.args = {
+  value1: 'value 1',
+  unit1: 'unit 1',
+  name1: 'name 1',
+  owner1: 'owner 1',
+  value2: 'value 2',
+  unit2: 'unit 2',
+  name2: 'name 2',
+  owner2: 'owner 2'
+};

package/dist/components/TransactionInfo/TransactionInfo.styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Value = exports.TransferIcon = exports.Name = exports.Container = exports.Account = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "TransactionInfostyles__Container",
+  componentId: "sc-8iuxfi-0"
+})(["display:flex;align-items:center;"]);
+exports.Container = Container;
+var Account = _styledComponents.default.div.withConfig({
+  displayName: "TransactionInfostyles__Account",
+  componentId: "sc-8iuxfi-1"
+})([""]);
+exports.Account = Account;
+var TransferIcon = _styledComponents.default.div.attrs({
+  className: 'ion'
+}).withConfig({
+  displayName: "TransactionInfostyles__TransferIcon",
+  componentId: "sc-8iuxfi-2"
+})(["width:16px;height:19px;position:relative;margin:auto;&::before,&::after{font-size:28px;position:absolute;left:0;}&::before{content:'\f117';color:", ";top:-7px;}&::after{content:'\f119';color:", ";top:2px;}"], function (props) {
+  return _theme.default.cSuccess;
+}, function (props) {
+  return _theme.default.cWarning;
+});
+exports.TransferIcon = TransferIcon;
+var Value = _styledComponents.default.div.withConfig({
+  displayName: "TransactionInfostyles__Value",
+  componentId: "sc-8iuxfi-3"
+})(["font-size:22px;font-weight:300;line-height:28px;letter-spacing:0.8px;", " ", ""], function (props) {
+  return props.green && (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), _colors.default.progressGreen);
+}, function (props) {
+  return props.red && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), _colors.default.orangishRed);
+});
+exports.Value = Value;
+var Name = _styledComponents.default.div.withConfig({
+  displayName: "TransactionInfostyles__Name",
+  componentId: "sc-8iuxfi-4"
+})(["font-size:13px;line-height:16px;letter-spacing:0.4px;font-style:italic;margin-bottom:3px;", " ", ""], function (props) {
+  return props.green && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), _colors.default.progressGreen);
+}, function (props) {
+  return props.red && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), _colors.default.orangishRed);
+});
+exports.Name = Name;

package/dist/components/TwoFactorModal/TwoFactorModal.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TwoFactorModal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _formik = require("formik");
+var Yup = _interopRequireWildcard(require("yup"));
+var _Modal = require("../Modal/Modal");
+var _Form = _interopRequireWildcard(require("../Form/Form"));
+var _Text = _interopRequireDefault(require("../Text/Text.styles"));
+var _Input = _interopRequireDefault(require("../Input/Input"));
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var _Grid = require("../Grid/Grid.styles");
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var TwoFactorModal = /*#__PURE__*/function (_PureComponent) {
+  _inherits(TwoFactorModal, _PureComponent);
+  var _super = _createSuper(TwoFactorModal);
+  function TwoFactorModal() {
+    var _this;
+    _classCallCheck(this, TwoFactorModal);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "initialValues", {
+      fa2code: ''
+    });
+    _defineProperty(_assertThisInitialized(_this), "validationSchema", Yup.object().shape({
+      fa2code: Yup.string().required('Token is required')
+    }));
+    return _this;
+  }
+  _createClass(TwoFactorModal, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        isModalOpen = _this$props.isModalOpen,
+        onModalClose = _this$props.onModalClose,
+        onFormSend = _this$props.onFormSend;
+      return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+        isOpen: isModalOpen,
+        onClose: onModalClose
+      }, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+        modalTop: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Two Factor Authentication"), /*#__PURE__*/_react.default.createElement("p", null, 'Please log in to engage in our community & invest in exciting opportunities.'))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+        modalBot: true
+      })), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+        initialValues: this.initialValues,
+        validationSchema: this.validationSchema,
+        onSubmit: onFormSend
+      }, function (_ref) {
+        var values = _ref.values,
+          errors = _ref.errors,
+          touched = _ref.touched,
+          handleBlur = _ref.handleBlur,
+          setFieldValue = _ref.setFieldValue,
+          setFieldTouched = _ref.setFieldTouched;
+        var onChangeWithTouch = function onChangeWithTouch(e) {
+          var field = e.target;
+          setFieldValue(field.name, field.value, false);
+          setFieldTouched(field.name);
+        };
+        var submitDisabled = !touched.fa2code || !!errors.fa2code;
+        return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+          noPadding: true
+        }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+          id: "two-factor",
+          name: "fa2code",
+          type: "text",
+          label: "Token",
+          value: values.fa2code,
+          onChange: onChangeWithTouch,
+          onBlur: handleBlur,
+          error: !!errors.fa2code,
+          touched: !!touched.fa2code
+        }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
+          show: errors.fa2code && touched.fa2code
+        }, errors.fa2code))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+          noPaddingBottom: true,
+          noPaddingHorizontal: true
+        }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+          type: "submit",
+          fluid: true,
+          disabled: submitDisabled
+        }, "Login")));
+      })))));
+    }
+  }]);
+  return TwoFactorModal;
+}(_react.PureComponent);
+exports.TwoFactorModal = TwoFactorModal;
+TwoFactorModal.propTypes = {
+  isModalOpen: _propTypes.default.bool.isRequired,
+  onModalClose: _propTypes.default.func.isRequired,
+  onFormSend: _propTypes.default.func.isRequired
+};
+var _default = TwoFactorModal;
+exports.default = _default;