@stokr/components-library 1.0.8 → 1.1.0

package/dist/components/BasicTable/BasicTable.styles.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Value = exports.Table = exports.Row = exports.LabelWarning = exports.Label = exports.Caption = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _templateObject;
+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 Table = _styledComponents.default.div.withConfig({
+  displayName: "BasicTablestyles__Table",
+  componentId: "sc-11e8nyz-0"
+})(["display:block;border:1px solid ", ";", ""], function (props) {
+  return _theme.default.cLightGrey;
+}, function (props) {
+  return props.filled && "\n  background:  #e1e1e1; //".concat(function (props) {
+    return _theme.default.cLightGrey;
+  }, ";\n  ");
+});
+exports.Table = Table;
+var Row = _styledComponents.default.div.withConfig({
+  displayName: "BasicTablestyles__Row",
+  componentId: "sc-11e8nyz-1"
+})(["font-size:11px;line-height:24px;letter-spacing:2.1px;text-transform:uppercase;padding:16px 24px;display:block;", " & + &{border-top:1px solid ", ";}&:after{content:'';display:block;width:100%;height:0;clear:both;}", ""], _rwd.default.XLarge(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 16px 46px;\n  "]))), function (props) {
+  return _theme.default.cLightGrey;
+}, function (props) {
+  return props.smallPadding && "\n  padding:  14px 6px;\n  ";
+});
+exports.Row = Row;
+var Label = _styledComponents.default.div.withConfig({
+  displayName: "BasicTablestyles__Label",
+  componentId: "sc-11e8nyz-2"
+})(["float:left;max-width:50%;text-align:start;"]);
+exports.Label = Label;
+var Value = _styledComponents.default.div.withConfig({
+  displayName: "BasicTablestyles__Value",
+  componentId: "sc-11e8nyz-3"
+})(["float:right;display:grid;max-width:50%;"]);
+exports.Value = Value;
+var LabelWarning = _styledComponents.default.div.withConfig({
+  displayName: "BasicTablestyles__LabelWarning",
+  componentId: "sc-11e8nyz-4"
+})(["float:left;text-align:left;width:100%;color:#ee220d;line-height:16px;"]);
+exports.LabelWarning = LabelWarning;
+var Caption = _styledComponents.default.div.withConfig({
+  displayName: "BasicTablestyles__Caption",
+  componentId: "sc-11e8nyz-5"
+})(["text-transform:initial;font-size:11px;float:right;letter-spacing:0.6px;font-style:italic;"]);
+exports.Caption = Caption;

package/dist/components/Button/Button.stories.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ButtonSecondary = exports.ButtonNegative = exports.ButtonLong = exports.ButtonDisabled = exports.ButtonDefault = exports.ButtonCenter = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("./Button.styles"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _ButtonContainer = require("../ButtonContainer/ButtonContainer.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import { DoubleButtons } from '../DoubleButton/DoubleButton.styles'
+var _default = {
+  title: 'Components Library/Buttons/Button',
+  component: _Button.default,
+  argTypes: {
+    secondary: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    disabled: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    negative: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    center: {
+      type: 'boolean',
+      defaultValue: false
+    }
+    // outLine: { type: 'boolean', defaultValue: false },
+    // marginTop: { type: 'boolean', defaultValue: false },
+    // marginRight: { type: 'boolean', defaultValue: false },
+  }
+};
+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(_ButtonContainer.ButtonContainer, null, /*#__PURE__*/_react.default.createElement(_Button.default, args, "Button"))));
+};
+var ButtonDefault = Template.bind({});
+exports.ButtonDefault = ButtonDefault;
+ButtonDefault.args = {};
+var ButtonSecondary = Template.bind({});
+exports.ButtonSecondary = ButtonSecondary;
+ButtonSecondary.args = {
+  secondary: true
+};
+var ButtonDisabled = Template.bind({});
+exports.ButtonDisabled = ButtonDisabled;
+ButtonDisabled.args = {
+  disabled: true
+};
+var ButtonNegative = Template.bind({});
+exports.ButtonNegative = ButtonNegative;
+ButtonNegative.args = {
+  negative: true
+};
+var ButtonCenter = Template.bind({});
+exports.ButtonCenter = ButtonCenter;
+ButtonCenter.args = {
+  center: true
+};
+var ButtonLong = function ButtonLong(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_ButtonContainer.ButtonContainer, null, /*#__PURE__*/_react.default.createElement(_Button.default, args, "Much Longer Button Label")));
+};
+
+// export const DoubleButton = args => (
+//   <ComponentWrapper>
+//     <DoubleButtons />
+//   </ComponentWrapper>
+// )
+
+// doublecheck:
+//other props mentioned in Button.styles that are not in propTypes:
+//type, minWidth, fluid, onlyText, outLine, marginTop, isUpdates, isDone..
+// Doublebuttons not showing, cannot find use
+exports.ButtonLong = ButtonLong;

package/dist/components/Button/Button.styles.js

@@ -0,0 +1,83 @@
+"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.Button = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+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 Button = _styledComponents.default.button.attrs(function (props) {
+  return {
+    type: props.type || 'button'
+  };
+}).withConfig({
+  displayName: "Buttonstyles__Button",
+  componentId: "sc-1bxw8qq-0"
+})(["display:inline-block;height:auto;min-height:40px;max-width:100%;background-color:", ";border:1px solid ", ";font-weight:bold;font-size:12px;line-height:16px;color:", ";text-transform:uppercase;text-align:center;letter-spacing:2px;border-radius:28px;padding:11px 32px;margin:0;outline:0;vertical-align:baseline;text-shadow:none;user-select:none;cursor:pointer;transition:color .2s,background-color .2s,border-color .2s;", " ", " ", " ", " ", " ", " &:hover,&:focus,&:active{background-color:", ";border-color:", ";color:", ";}", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
+  return _theme.default.cPrimary;
+}, function (props) {
+  return _theme.default.cPrimary;
+}, function (props) {
+  return _theme.default.cWhite;
+}, function (_ref) {
+  var isUpdates = _ref.isUpdates,
+    isCancel = _ref.isCancel;
+  return isUpdates && isCancel && (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 11px 0;\n      margin-left: 32px;\n    "])));
+}, function (_ref2) {
+  var isUpdates = _ref2.isUpdates,
+    isDone = _ref2.isDone;
+  return isUpdates && isDone && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      margin-left: 32px;\n\n      @media screen and (max-width: 850px) {\n        padding: 11px 20px;\n      }\n    "])));
+}, function (_ref3) {
+  var withMarginBottom = _ref3.withMarginBottom;
+  return withMarginBottom && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-bottom: 32px;\n    "])));
+}, function (props) {
+  return props.minWidth && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      min-width: ", ";\n    "])), props.minWidth);
+}, function (props) {
+  return props.fluid && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      display: block;\n      width: 100%;\n      padding: 11px 12px;\n    "])));
+}, function (props) {
+  return props.center && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin-left: auto;\n      margin-right: auto;\n    "])));
+}, function (props) {
+  return _theme.default.cPrimaryDark;
+}, function (props) {
+  return _theme.default.cPrimaryDark;
+}, function (props) {
+  return _theme.default.cWhite;
+}, function (props) {
+  return props.secondary && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      background-color: ", ";\n      color: ", ";\n\n      &:hover,\n      &:focus,\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n        color: ", ";\n      }\n    "])), _theme.default.cWhite, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cWhite);
+}, function (props) {
+  return props.onlyText && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      border-color: transparent;\n      background-color: transparent;\n      color: ", ";\n\n      &:hover,\n      &:focus,\n      &:active {\n        background-color: transparent;\n        border-color: transparent;\n        color: ", ";\n      }\n    "])), _theme.default.cBlack, _theme.default.cPrimary);
+}, function (props) {
+  return props.disabled && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      opacity: 0.2;\n      cursor: default;\n      box-shadow: none !important;\n      pointer-events: none !important;\n\n      &:hover,\n      &:focus,\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n        color: ", ";\n      }\n    "])), _theme.default.cBlack, _theme.default.cWhite, _theme.default.cBlack, _theme.default.cPrimary, _theme.default.cPrimary, _theme.default.cWhite);
+}, function (props) {
+  return props.negative && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n\n      &:hover,\n      &:focus,\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n        color: ", ";\n      }\n    "])), _theme.default.cWarning, _theme.default.cWhite, _theme.default.cWarning, _theme.default.cWhite, _theme.default.cWarningDark, _theme.default.cWarningDark);
+}, function (props) {
+  return props.outline && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      border-color: ", ";\n      background-color: transparent;\n      color: ", ";\n\n      &:hover,\n      &:focus,\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n        color: ", ";\n      }\n    "])), _theme.default.cWhite, _theme.default.cWhite, _theme.default.cWhite, _theme.default.cWhite, _theme.default.cWarning);
+}, function (props) {
+  return props.marginTop && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      margin-top: ", ";\n    "])), props.marginTop);
+}, function (props) {
+  return props.marginRight && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      margin-right: ", ";\n    "])), props.marginRight);
+}, function (props) {
+  return props.isLoginMobile && "\n     margin-bottom: 20px;\n  width: 163.94px;\n    ";
+});
+exports.Button = Button;
+Button.propTypes = {
+  secondary: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  negative: _propTypes.default.bool,
+  center: _propTypes.default.bool
+};
+Button.defaultProps = {
+  secondary: false,
+  disabled: false,
+  negative: false,
+  center: false
+};
+var _default = Button;
+exports.default = _default;

package/dist/components/ButtonContainer/ButtonContainer.styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ButtonContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var ButtonContainer = _styledComponents.default.div.withConfig({
+  displayName: "ButtonContainerstyles__ButtonContainer",
+  componentId: "sc-1no5512-0"
+})(["align-items:center;display:flex;justify-content:center;", " ", "{min-width:150px;max-width:300px;}@media screen and (max-width:767px){flex-direction:column;", "{min-width:150px;max-width:400px;}}"], function (props) {
+  return props.flexColumn && "\n    flex-direction:column;\n  ";
+}, _Button.default, _Button.default);
+exports.ButtonContainer = ButtonContainer;
+var _default = ButtonContainer;
+exports.default = _default;

package/dist/components/CapitalRaisedSummary/CapitalRaisedSummery.stories.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CapitalRaisedSum = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CaptialRaisedSummary = _interopRequireDefault(require("./CaptialRaisedSummary"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import Checkbox, { CheckboxPropTypes } from '../Checkbox/Checkbox'
+var _default = {
+  title: 'Components Library/Capital Raised Summary',
+  component: _CaptialRaisedSummary.default,
+  argTypes: {
+    capital: {
+      type: 'number',
+      defaultValue: 0,
+      required: true
+    },
+    multiProgressBar: {
+      type: 'shape',
+      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(_CaptialRaisedSummary.default, args)));
+};
+var CapitalRaisedSum = Template.bind({});
+exports.CapitalRaisedSum = CapitalRaisedSum;
+CapitalRaisedSum.args = {
+  capital: 150,
+  multiProgressBar: {
+    backParts: [{
+      value: 7,
+      label: 'backparts - minumum fill'
+    }],
+    fillParts: [{
+      value: 60,
+      label: 'fillparts - maximum fill'
+    }]
+  }
+};

package/dist/components/CapitalRaisedSummary/CaptialRaisedSummary.js

@@ -0,0 +1,34 @@
+"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.CaptialRaisedSummary = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactCountup = _interopRequireDefault(require("react-countup"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _MultiProgressBar = _interopRequireWildcard(require("../MultiProgressBar/MultiProgressBar"));
+var _CaptialRaisedSummary = require("./CaptialRaisedSummary.styles");
+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 }; }
+var CaptialRaisedSummary = function CaptialRaisedSummary(_ref) {
+  var capital = _ref.capital,
+    multiProgressBar = _ref.multiProgressBar;
+  return /*#__PURE__*/_react.default.createElement(_CaptialRaisedSummary.Wrapper, null, /*#__PURE__*/_react.default.createElement(_CaptialRaisedSummary.Title, null, "CAPITAL RAISED"), /*#__PURE__*/_react.default.createElement(_CaptialRaisedSummary.Amount, null, /*#__PURE__*/_react.default.createElement(_reactCountup.default, {
+    end: capital,
+    prefix: "\u20AC ",
+    duration: 0.01,
+    separator: ","
+  })), /*#__PURE__*/_react.default.createElement(_MultiProgressBar.default, multiProgressBar));
+};
+exports.CaptialRaisedSummary = CaptialRaisedSummary;
+CaptialRaisedSummary.propTypes = {
+  capital: _propTypes.default.number.isRequired,
+  multiProgressBar: _propTypes.default.shape(_MultiProgressBar.MultiProgressBarPropTypes).isRequired
+};
+var _default = CaptialRaisedSummary; //MERGE:
+//check IIS for better logic, yet unmerged
+//only IIS is used, so replace, but context is unresolved
+exports.default = _default;

package/dist/components/CapitalRaisedSummary/CaptialRaisedSummary.styles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Title = exports.Amount = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _templateObject, _templateObject2;
+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 Wrapper = (0, _styledComponents.default)(_ComponentWrapper.default).withConfig({
+  displayName: "CaptialRaisedSummarystyles__Wrapper",
+  componentId: "sc-1608cnu-0"
+})(["background:", ";display:flex;flex-direction:column;justify-content:center;height:100%;margin-top:-1px;"], function (props) {
+  return _theme.default.cPrimary;
+});
+exports.Wrapper = Wrapper;
+var Title = _styledComponents.default.div.withConfig({
+  displayName: "CaptialRaisedSummarystyles__Title",
+  componentId: "sc-1608cnu-1"
+})(["font-size:11px;line-height:20px;letter-spacing:2px;margin-bottom:14px;color:", ";"], function (props) {
+  return _theme.default.cWhite;
+});
+exports.Title = Title;
+var Amount = _styledComponents.default.div.withConfig({
+  displayName: "CaptialRaisedSummarystyles__Amount",
+  componentId: "sc-1608cnu-2"
+})(["font-size:34px;line-height:40px;font-weight:300;margin-bottom:20px;letter-spacing:2px;color:", ";white-space:nowrap;", " ", ""], function (props) {
+  return _theme.default.cWhite;
+}, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 28px;\n  "]))), _rwd.default.Large(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-size: 34px;\n  "]))));
+exports.Amount = Amount;

package/dist/components/ChartBox/ChartBox.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChartBox = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _Text = _interopRequireDefault(require("../Text/Text.styles"));
+var _ChartBox = require("./ChartBox.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import Select from "components/Input/Select";
+// import DonutChart from "components/DonutChart/DonutChart";
+// import {
+//   DonutChartLabel,
+//   DonutChartValue,
+//   DonutChartInfo,
+//   DonutChartTrend
+// } from "components/DonutChart/DonutChart.styles";
+// import ChartLegend from "components/ChartLegend/ChartLegend";
+// import  from "components//";
+
+// import { Container, Chart, Legend, SelectWrapper } from "./ChartBox.styles";
+
+// const example = (
+//   <
+//     data={[
+//       { label: "Token balance", value: "TYK 300" },
+//       { label: "Token price", value: "€ 2.50" },
+//       { label: "Token value", value: "€ 750" },
+//       { label: "Distributions", value: "€ 150" },
+//       { label: "ROI", value: "20.0%" }
+//     ]}
+//   />
+// );
+
+var ChartBox = function ChartBox() {
+  return /*#__PURE__*/_react.default.createElement(_ChartBox.Container, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    center: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h4", null, "No Investments yet..."))));
+};
+exports.ChartBox = ChartBox;
+var _default = ChartBox;
+exports.default = _default;

package/dist/components/ChartBox/ChartBox.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.chartBoxEmpty = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ChartBox = require("./ChartBox");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Chart Box/Chart Box',
+  component: _ChartBox.ChartBox
+};
+exports.default = _default;
+var chartBoxEmpty = function chartBoxEmpty() {
+  return /*#__PURE__*/_react.default.createElement(_ChartBox.ChartBox, null);
+};
+
+//ChartBox the component is pretty much commented out
+exports.chartBoxEmpty = chartBoxEmpty;

package/dist/components/ChartBox/ChartBox.styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectWrapper = exports.Legend = exports.Container = exports.Chart = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _templateObject, _templateObject2, _templateObject3;
+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 Container = _styledComponents.default.div.withConfig({
+  displayName: "ChartBoxstyles__Container",
+  componentId: "sc-1h5ta2j-0"
+})(["position:relative;font-size:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 0;text-align:left;width:100%;", " @media screen and (max-width:767px){width:100%;}"], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: start;\n    padding: 64px 0;\n    flex-direction: row;\n  "]))));
+exports.Container = Container;
+var Chart = _styledComponents.default.div.withConfig({
+  displayName: "ChartBoxstyles__Chart",
+  componentId: "sc-1h5ta2j-1"
+})(["display:block;"]);
+exports.Chart = Chart;
+var Legend = _styledComponents.default.div.withConfig({
+  displayName: "ChartBoxstyles__Legend",
+  componentId: "sc-1h5ta2j-2"
+})(["display:block;width:100%;padding-top:64px;", " ", ""], _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: auto;\n    flex-grow: 1;\n    padding-top: 0;\n    padding-left: 64px;\n\n    ", "\n  "])), function (props) {
+  return props.spaceTop && "\n      padding-top: 104px;\n    ";
+}), _rwd.default.Large(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    max-width: 768px;\n  "]))));
+exports.Legend = Legend;
+var SelectWrapper = _styledComponents.default.div.withConfig({
+  displayName: "ChartBoxstyles__SelectWrapper",
+  componentId: "sc-1h5ta2j-3"
+})(["padding-bottom:64px;"]);
+exports.SelectWrapper = SelectWrapper;

package/dist/components/ChartBox/ChartBoxDistribution.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChartBoxDistribution = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _Text = _interopRequireDefault(require("../Text/Text.styles"));
+var _ChartBox = require("./ChartBox.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import Select from '../Input/Select';
+// import DonutChart from '../DonutChart/DonutChart';
+// import {
+//   DonutChartLabel, DonutChartValue,
+// } from '../DonutChart/DonutChart.styles';
+// import ChartLegend from '../ChartLegend/ChartLegend';
+
+// import {
+//   Container, Chart, Legend, SelectWrapper,
+// } from './ChartBox.styles';
+
+var ChartBoxDistribution = function ChartBoxDistribution() {
+  return /*#__PURE__*/_react.default.createElement(_ChartBox.Container, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    center: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h4", null, "No Distributions yet..."))));
+};
+exports.ChartBoxDistribution = ChartBoxDistribution;
+var _default = ChartBoxDistribution;
+exports.default = _default;

package/dist/components/ChartBox/ChartBoxDistribution.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.chartBoxDistributionEmpty = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ChartBoxDistribution = require("./ChartBoxDistribution");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Chart Box/Chart Box Distribution',
+  component: _ChartBoxDistribution.ChartBoxDistribution
+};
+exports.default = _default;
+var chartBoxDistributionEmpty = function chartBoxDistributionEmpty() {
+  return /*#__PURE__*/_react.default.createElement(_ChartBoxDistribution.ChartBoxDistribution, null);
+};
+
+//ChartBox the component is pretty much commented out
+//Legend
+exports.chartBoxDistributionEmpty = chartBoxDistributionEmpty;

package/dist/components/ChartLegend/ChartLegend.js

@@ -0,0 +1,62 @@
+"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.ChartLegend = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactCollapse = require("react-collapse");
+var _ChartLegend = require("./ChartLegend.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 ChartLegend = function ChartLegend(props) {
+  var data = props.data;
+  var _useState = (0, _react.useState)(data.map(function () {
+      return false;
+    })),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeItems = _useState2[0],
+    setActiveItems = _useState2[1];
+  var toggleItem = function toggleItem(key) {
+    var newActiveItems = data.map(function (item, itemKey) {
+      return itemKey === key ? !activeItems[itemKey] : activeItems[itemKey];
+    });
+    setActiveItems(newActiveItems);
+  };
+  return /*#__PURE__*/_react.default.createElement(_ChartLegend.Items, null, data.map(function (item, itemKey) {
+    return /*#__PURE__*/_react.default.createElement(_ChartLegend.Item, {
+      key: item.name
+    }, /*#__PURE__*/_react.default.createElement(_ChartLegend.Head, {
+      onClick: function onClick() {
+        return toggleItem(itemKey);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ChartLegend.ColorLabel, {
+      itemColor: item.color
+    }), /*#__PURE__*/_react.default.createElement(_ChartLegend.NameCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, null, item.name), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.subname)), /*#__PURE__*/_react.default.createElement(_ChartLegend.ValueCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, null, item.value), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.info)), item.details && /*#__PURE__*/_react.default.createElement(_ChartLegend.Arrow, {
+      isOpened: activeItems[itemKey]
+    })), item.details && /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
+      isOpened: activeItems[itemKey]
+    }, /*#__PURE__*/_react.default.createElement(_ChartLegend.Body, null, item.details)));
+  }));
+};
+exports.ChartLegend = ChartLegend;
+ChartLegend.propTypes = {
+  data: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _propTypes.default.number.isRequired,
+    name: _propTypes.default.string,
+    color: _propTypes.default.string,
+    subname: _propTypes.default.string,
+    info: _propTypes.default.string
+  })).isRequired
+};
+var _default = ChartLegend;
+exports.default = _default;