@stokr/components-library 0.5.6 → 0.5.8

package/dist/components/BarChart/BarChart.stories.js

@@ -0,0 +1,47 @@
+// import React from 'react'
+// import { BarChart } from './BarChart'
+// import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles'
+
+// export default {
+//   title: 'Components Library/BarChart',
+//   component: BarChart,
+//   argTypes: {
+//     data: {
+//       type: 'array of shape',
+//       defaultValue: [{ value: 0 }, { name: '' }, { tooltip: '' }],
+//       required: true,
+//     },
+//     value: { type: 'number', required: true },
+//     name: { type: 'string' },
+//     tooltip: { type: 'string or node' },
+//     id: { type: 'string', required: true },
+//     title: { type: 'string', defaultValue: '' },
+//     colorTheme: { type: 'string', defaultValue: 'default' },
+//   },
+// }
+
+// const Template = args => (
+//   <ComponentWrapper>
+//     <BarChart {...args} />
+//   </ComponentWrapper>
+// )
+
+// export const BarChartDefault = Template.bind({})
+// BarChartDefault.args = {}
+
+// export const BarChartFull = Template.bind({})
+// BarChartFull.args = {
+//   data: [
+//     {
+//       value: 1560,
+//       name: 'Name',
+//       colorThem: 'red',
+//     },
+//   ],
+//   id: 'Identity',
+//   title: 'A Title',
+// }
+
+// doublecheck:
+// d3 causing SB to crash. cannot resolve
+"use strict";

package/dist/components/BarChart/BarChart.styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TooltipWrapper = exports.ChartTitle = exports.Chart = exports.BarChartTooltip = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _theme = _interopRequireDefault(require("styles/theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Chart = _styledComponents.default.div.withConfig({
+  displayName: "BarChartstyles__Chart",
+  componentId: "sc-2ptm80-0"
+})(["position:relative;display:block;width:100%;height:auto;overflow:hidden;.axisX,.axisY{& > path{stroke:#e1e1e1;}.tick{text{font-family:'Open Sans';font-weight:600;font-size:14px;line-height:20px;color:", ";}line{stroke:none;}}}.axisY{& > path{stroke:none;}}.gridX,.gridY{& > path{stroke:none;}}.gridX{.tick line{stroke:none;}}.gridY{.tick line{stroke:#dfe5f1;}}"], function (props) {
+  return _theme.default.cGrey2;
+});
+exports.Chart = Chart;
+var _default = Chart;
+exports.default = _default;
+var TooltipWrapper = _styledComponents.default.div.withConfig({
+  displayName: "BarChartstyles__TooltipWrapper",
+  componentId: "sc-2ptm80-1"
+})(["position:absolute;top:0;left:0;pointer-events:none;"]);
+exports.TooltipWrapper = TooltipWrapper;
+var BarChartTooltip = _styledComponents.default.div.withConfig({
+  displayName: "BarChartstyles__BarChartTooltip",
+  componentId: "sc-2ptm80-2"
+})(["font-size:10px;min-width:40px;& > h3{font-weight:400;font-family:'Open Sans';font-size:16px;margin:0;padding:0;}& > p{color:#79ca65;font-family:'Open Sans';font-size:11px;text-transform:uppercase;}"]);
+exports.BarChartTooltip = BarChartTooltip;
+var ChartTitle = _styledComponents.default.div.withConfig({
+  displayName: "BarChartstyles__ChartTitle",
+  componentId: "sc-2ptm80-3"
+})(["font-family:'Open Sans';font-size:12px;line-height:20px;text-align:center;letter-spacing:2px;text-transform:uppercase;padding:0;margin:0;"]);
+exports.ChartTitle = ChartTitle;

package/dist/components/BarChartLegend/BarChartLegend.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BarChartLegend = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var d3 = _interopRequireWildcard(require("d3"));
+var _BarChartLegend = require("./BarChartLegend.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(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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 gradients = {
+  default: {
+    start: '#0050ca',
+    end: '#0050ca'
+  },
+  red: {
+    start: '#f24f45',
+    end: '#ee220d'
+  },
+  blue: {
+    start: '#6a97e0',
+    end: '#0050ca'
+  }
+};
+var BarChartLegend = /*#__PURE__*/function (_PureComponent) {
+  _inherits(BarChartLegend, _PureComponent);
+  var _super = _createSuper(BarChartLegend);
+  function BarChartLegend() {
+    var _this;
+    _classCallCheck(this, BarChartLegend);
+    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), "createChart", function () {
+      if (!_this.barEl) return;
+      var _this$props = _this.props,
+        id = _this$props.id,
+        colorTheme = _this$props.colorTheme;
+      var width = 50;
+      var thickness = 6;
+      var radius = thickness / 2;
+      _this.svg = d3.select(_this.barEl).append('svg').attr('width', width).attr('height', thickness);
+      _this.defs = _this.svg.append('defs');
+
+      // #region gradient
+      _this.gradient = _this.defs.append('linearGradient').attr('id', "".concat(id, "-barChartLegend-gradient")).attr('x1', '0%').attr('x2', '100%').attr('y1', '50%').attr('y2', '50%');
+      _this.gradient.append('stop').attr('class', 'start').attr('offset', '0%').attr('stop-color', gradients[colorTheme].start).attr('stop-opacity', 1);
+      _this.gradient.append('stop').attr('class', 'end').attr('offset', '100%').attr('stop-color', gradients[colorTheme].end).attr('stop-opacity', 1);
+      // #endregion gradient
+
+      // #region bars
+      _this.bar = _this.svg.append('path').attr('class', 'bar').style('fill', "url(#".concat(id, "-barChartLegend-gradient)")).attr('d', function (item) {
+        return "\n        M 0 0\n        A ".concat(radius, " ").concat(radius, " 0 0 1 ").concat(radius, " ").concat(-radius, "\n        H ").concat(width - radius, "\n        A ").concat(radius, " ").concat(radius, " 0 0 1 ").concat(width, " 0\n        A ").concat(radius, " ").concat(radius, " 0 0 1 ").concat(width - radius, " ").concat(radius, "\n        H ").concat(radius, "\n        A ").concat(radius, " ").concat(radius, " 0 0 1 0 0 \n        Z\n      ");
+      }).attr('transform', "translate(0, ".concat(radius, ")"));
+      // #endregion bars
+    });
+    return _this;
+  }
+  _createClass(BarChartLegend, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.createChart();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var label = this.props.label;
+      return /*#__PURE__*/_react.default.createElement(_BarChartLegend.Container, null, /*#__PURE__*/_react.default.createElement(_BarChartLegend.Bar, {
+        ref: function ref(el) {
+          _this2.barEl = el;
+        }
+      }), /*#__PURE__*/_react.default.createElement(_BarChartLegend.Label, null, label));
+    }
+  }]);
+  return BarChartLegend;
+}(_react.PureComponent);
+exports.BarChartLegend = BarChartLegend;
+BarChartLegend.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  colorTheme: _propTypes.default.oneOf(['default', 'red', 'blue'])
+};
+BarChartLegend.defaultProps = {
+  colorTheme: 'default'
+};
+var _default = BarChartLegend;
+exports.default = _default;

package/dist/components/BarChartLegend/BarChartLegend.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Label = exports.Container = exports.Bar = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _theme = _interopRequireDefault(require("styles/theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "BarChartLegendstyles__Container",
+  componentId: "sc-442fg9-0"
+})(["position:relative;font-size:0;padding:2px 0;"]);
+exports.Container = Container;
+var Bar = _styledComponents.default.div.withConfig({
+  displayName: "BarChartLegendstyles__Bar",
+  componentId: "sc-442fg9-1"
+})(["z-index:1;position:relative;display:inline-block;vertical-align:middle;width:50px;margin-right:-50px;"]);
+exports.Bar = Bar;
+var Label = _styledComponents.default.div.withConfig({
+  displayName: "BarChartLegendstyles__Label",
+  componentId: "sc-442fg9-2"
+})(["z-index:0;position:relative;display:inline-block;vertical-align:middle;padding-left:70px;max-width:100%;color:", ";font-size:11px;line-height:16px;"], function (props) {
+  return _theme.default.cGrey2;
+});
+exports.Label = Label;

package/dist/components/BasicTable/BasicTable.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BasicTable = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _BasicTable = require("./BasicTable.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var BasicTable = function BasicTable(_ref) {
+  var data = _ref.data,
+    filled = _ref.filled,
+    smallPadding = _ref.smallPadding;
+  return /*#__PURE__*/_react.default.createElement(_BasicTable.Table, {
+    filled: filled
+  }, data.map(function (item, itemKey) {
+    return /*#__PURE__*/_react.default.createElement(_BasicTable.Row, {
+      key: item.label,
+      smallPadding: smallPadding
+    }, /*#__PURE__*/_react.default.createElement(_BasicTable.Label, null, item.label), /*#__PURE__*/_react.default.createElement(_BasicTable.Value, null, item.value, /*#__PURE__*/_react.default.createElement(_BasicTable.Caption, null, item.valueDescription)), item.labelwarning ? /*#__PURE__*/_react.default.createElement(_BasicTable.LabelWarning, null, item.labelwarning) : '');
+  }));
+};
+exports.BasicTable = BasicTable;
+BasicTable.propTypes = {
+  data: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.string.isRequired
+  })).isRequired
+};
+var _default = BasicTable;
+exports.default = _default;

package/dist/components/BasicTable/BasicTable.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BasicTableSeveral = exports.BasicTableExample = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BasicTable = _interopRequireDefault(require("./BasicTable"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Basic Table',
+  component: _BasicTable.default,
+  argTypes: {
+    data: {
+      type: 'array of shape with two strings',
+      required: true,
+      defaultValue: [{
+        lable: ''
+      }]
+    },
+    filled: {
+      defaultValue: ''
+    },
+    smallPadding: {
+      defaultValue: ''
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_BasicTable.default, args));
+};
+var BasicTableExample = Template.bind({});
+exports.BasicTableExample = BasicTableExample;
+BasicTableExample.args = {
+  data: [{
+    lable: 'table lable',
+    value: 'a value'
+  }]
+};
+var BasicTableSeveral = Template.bind({});
+exports.BasicTableSeveral = BasicTableSeveral;
+BasicTableSeveral.args = {
+  data: [{
+    lable: 'table lable',
+    value: 'a value'
+  }, {
+    lable: 'table lable 1',
+    value: 'another value'
+  }, {
+    lable: 'table lable 2',
+    value: 'and another'
+  }, {
+    lable: 'table lable 3',
+    value: 'value'
+  }]
+};
+
+//doublecheck:
+// why is lable not showing?
+// took out {value:''} from default data array
+// because since merge it includes a caption component that breaks SB

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,79 @@
+"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("components/Button/Button.styles"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _ButtonContainer = require("../ButtonContainer/ButtonContainer.styles");
+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(_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(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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("components/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,45 @@
+"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");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import Checkbox, { CheckboxPropTypes } from 'components/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(_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(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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("components/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;