@stokr/components-library 0.5.6 → 0.5.7

package/dist/components/DonutChart/DonutChart.js

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DonutChart = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var d3 = _interopRequireWildcard(require("d3"));
+var _DonutChart = require("./DonutChart.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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 DonutChart = /*#__PURE__*/function (_PureComponent) {
+  _inherits(DonutChart, _PureComponent);
+  var _super = _createSuper(DonutChart);
+  function DonutChart() {
+    var _this;
+    _classCallCheck(this, DonutChart);
+    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), "state", {
+      data: [],
+      key: 0
+    });
+    _defineProperty(_assertThisInitialized(_this), "createChart", function () {
+      if (!_this.chartEl) return;
+      var data = _this.state.data;
+      var width = 320;
+      var height = 320;
+      var pad = 10;
+      var thickness = 14;
+      var outerRadius = width / 2;
+      var innerRadius = outerRadius - thickness;
+      var padAngle = pad / (outerRadius - thickness / 2);
+      var customColors = data.map(function (item) {
+        return item.color;
+      });
+      var color = customColors[0] ? d3.scaleOrdinal(customColors) : d3.scaleOrdinal(d3.schemeCategory10);
+      var svg = d3.select(_this.chartEl).append('svg').attr('viewBox', "0 0 ".concat(width, " ").concat(height));
+      var chart = svg.append('g').attr('transform', "translate(".concat(width / 2, ", ").concat(height / 2, ")"));
+      var pie = d3.pie().value(function (d) {
+        return d.value;
+      }).sort(null).padAngle(padAngle);
+      var arc = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius);
+      function arcTween(a) {
+        var interp = d3.interpolate(this._current, a);
+        this._current = interp(1);
+        return function (time) {
+          return arc(interp(time));
+        };
+      }
+      function setD(d) {
+        this._current = d;
+      }
+      _this.drawDate = function (dataSet) {
+        // Join new data
+        var path = chart.selectAll('path').data(pie(dataSet));
+
+        // Update existing arcs
+        path.transition().ease(d3.easeQuadOut).duration(1000).attrTween('d', arcTween);
+
+        // Enter new arcs
+        path.enter().append('path').attr('fill', function (d, i) {
+          return color(i);
+        }).attr('d', arc).each(setD);
+      };
+
+      // set init data
+      _this.drawDate(data.map(function (datum) {
+        return _objectSpread(_objectSpread({}, datum), {}, {
+          value: 0
+        });
+      }));
+    });
+    _defineProperty(_assertThisInitialized(_this), "drawChart", function () {
+      var data = _this.props.data;
+      _this.drawDate(data);
+      _this.drawn = true;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onScroll", function (e) {
+      if (_this.drawn) return;
+      if (_this.chartEl.getBoundingClientRect().top < window.innerHeight) {
+        _this.drawChart();
+      }
+    });
+    return _this;
+  }
+  _createClass(DonutChart, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var data = this.props.data;
+      this.setState({
+        data: data
+      }, function () {
+        _this2.createChart();
+        window.addEventListener('scroll', _this2.onScroll);
+        _this2.onScroll();
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this3 = this;
+      var key = this.state.key;
+      var newData = this.props.data;
+      var prevData = prevProps.data;
+      if (newData && prevData && JSON.stringify(newData) !== JSON.stringify(prevData)) {
+        this.setState({
+          data: newData
+        }, function () {
+          _this3.drawn = false;
+          window.removeEventListener('scroll', _this3.onScroll);
+          _this3.setState({
+            key: key + 1
+          }, function () {
+            _this3.createChart();
+            window.addEventListener('scroll', _this3.onScroll);
+            _this3.onScroll();
+          });
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('scroll', this.onScroll);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+      var _this$props = this.props,
+        children = _this$props.children,
+        center = _this$props.center;
+      var key = this.state.key;
+      return /*#__PURE__*/_react.default.createElement(_DonutChart.Chart, {
+        ref: function ref(el) {
+          _this4.chartEl = el;
+        },
+        center: center,
+        key: key
+      }, /*#__PURE__*/_react.default.createElement(_DonutChart.Content, null, children));
+    }
+  }]);
+  return DonutChart;
+}(_react.PureComponent);
+exports.DonutChart = DonutChart;
+DonutChart.propTypes = {
+  children: _propTypes.default.node,
+  data: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _propTypes.default.number.isRequired,
+    name: _propTypes.default.string,
+    color: _propTypes.default.string
+  })).isRequired,
+  center: _propTypes.default.bool
+};
+DonutChart.defaultProps = {
+  children: null,
+  center: false
+};
+var _default = DonutChart;
+exports.default = _default;

package/dist/components/DonutChart/DonutChart.stories.js

@@ -0,0 +1,40 @@
+// import React from 'react'
+// import DonutChart from './DonutChart'
+// import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles'
+
+// export default {
+//   title: 'Components Library/DonutChart',
+//   component: DonutChart,
+//   argTypes: {
+//     children: { type: 'node', defaultValue: null },
+//     center: { type: 'boolean', defaultValue: false },
+//     data: {
+//       type: 'array',
+//       defaultValue: [{ value: '' }, { name: '' }, { color: '' }],
+//       required: true,
+//     },
+//   },
+// }
+
+// const Template = args => (
+//   <ComponentWrapper>
+//     <DonutChart {...args} />
+//   </ComponentWrapper>
+// )
+
+// export const DonutChartDefault = Template.bind({})
+// DonutChartDefault.args = {
+//   children: null,
+//   data: [
+//     {
+//       value: 'A Value',
+//       name: 'A Name',
+//       color: 'blue',
+//     },
+//   ],
+//   center: true,
+// }
+
+// doublecheck
+// cannot resolve d3
+"use strict";

package/dist/components/DonutChart/DonutChart.styles.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DonutChartValue = exports.DonutChartTrend = exports.DonutChartLabel = exports.DonutChartInfo = exports.Content = exports.Chart = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Chart = _styledComponents.default.div.withConfig({
+  displayName: "DonutChartstyles__Chart",
+  componentId: "sc-mlj05j-0"
+})(["position:relative;display:block;max-width:320px;& > svg{width:100%;height:auto;}", ""], function (props) {
+  return props.center && "\n    margin: 0 auto;\n  ";
+});
+exports.Chart = Chart;
+var thickness = '14px';
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "DonutChartstyles__Content",
+  componentId: "sc-mlj05j-1"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;top:", ";left:", ";right:", ";bottom:", ";text-align:center;"], thickness, thickness, thickness, thickness);
+exports.Content = Content;
+var DonutChartLabel = _styledComponents.default.p.withConfig({
+  displayName: "DonutChartstyles__DonutChartLabel",
+  componentId: "sc-mlj05j-2"
+})(["font-family:'Open Sans';font-size:11px;line-height:16px;letter-spacing:2px;text-transform:uppercase;padding:4px 0;margin:0;", ""], function (props) {
+  return props.strong && "\n    font-weight: bold;\n  ";
+});
+exports.DonutChartLabel = DonutChartLabel;
+var DonutChartValue = _styledComponents.default.h3.withConfig({
+  displayName: "DonutChartstyles__DonutChartValue",
+  componentId: "sc-mlj05j-3"
+})(["font-family:'Open Sans';font-weight:300;font-size:", ";line-height:58px;letter-spacing:2.4px;margin:0;padding:7px 0;margin-bottom:7px;"], function (_ref) {
+  var fontSize = _ref.fontSize;
+  return fontSize ? "".concat(fontSize, "px") : '55px';
+});
+exports.DonutChartValue = DonutChartValue;
+var DonutChartInfo = _styledComponents.default.p.withConfig({
+  displayName: "DonutChartstyles__DonutChartInfo",
+  componentId: "sc-mlj05j-4"
+})(["font-family:'Open Sans';font-weight:300;font-size:22px;line-height:28px;letter-spacing:0.8px;margin:0;"]);
+exports.DonutChartInfo = DonutChartInfo;
+var DonutChartTrend = _styledComponents.default.span.withConfig({
+  displayName: "DonutChartstyles__DonutChartTrend",
+  componentId: "sc-mlj05j-5"
+})(["display:inline-block;margin-left:8px;&:before{content:'\\f1fc';font-family:'Ionicons';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;-moz-osx-font-smoothing:grayscale;font-size:12px;line-height:12px;display:inline-block;vertical-align:middle;margin-top:-1px;width:12px;height:12px;margin-right:8px;}", " ", ""], function (props) {
+  return props.inc && "\n    color: ".concat(props.theme.cProgressDone, ";\n\n    &:before {\n      content: '\\f3d8';\n    }\n  ");
+}, function (props) {
+  return props.dec && "\n    color: ".concat(props.theme.cWarning, ";\n\n    &:before {\n      content: '\\f3d0';\n    }\n  ");
+});
+exports.DonutChartTrend = DonutChartTrend;

package/dist/components/DoubleButton/DoubleButton.styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DoubleButtons = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _rwd = _interopRequireDefault(require("styles/rwd"));
+var _Button = _interopRequireDefault(require("components/Button/Button.styles"));
+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 DoubleButtons = _styledComponents.default.div.withConfig({
+  displayName: "DoubleButtonstyles__DoubleButtons",
+  componentId: "sc-13b0zge-0"
+})(["margin:-12px;", "{width:100%;margin:12px;}", ""], _Button.default, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n       flex-direction: ", ";\n\n    \n    ", " {\n      width: auto;\n      flex: 1;\n    }\n  "])), function (_ref) {
+  var column = _ref.column;
+  return column ? 'column' : 'row';
+}, _Button.default));
+exports.DoubleButtons = DoubleButtons;
+var _default = DoubleButtons;
+exports.default = _default;

package/dist/components/ErrorMessage/ErrorMessage.styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ErrorMessage = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var ErrorMessage = _styledComponents.default.p.withConfig({
+  displayName: "ErrorMessagestyles__ErrorMessage",
+  componentId: "sc-1b3bbc3-0"
+})(["color:#ee220d;font-size:12px;margin-top:20px;"]);
+exports.ErrorMessage = ErrorMessage;
+var _default = ErrorMessage; // unused component
+exports.default = _default;

package/dist/components/FAQ/FAQ.js

@@ -0,0 +1,65 @@
+"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.FAQ = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var scrollToElement = _interopRequireWildcard(require("scroll-to-element"));
+var _Text = _interopRequireDefault(require("components/Text/Text.styles"));
+var _FAQ = require("./FAQ.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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var FAQ = function FAQ(props) {
+  var items = props.items,
+    noScroll = props.noScroll;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  var onTitleClick = function onTitleClick(e, index) {
+    e.persist();
+    var newActiveIndex = activeIndex === index ? null : index;
+    setActiveIndex(newActiveIndex);
+    if (!noScroll && newActiveIndex !== null) {
+      scrollToElement(e.target.parentElement, {
+        duration: 300,
+        offset: 20
+      });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_FAQ.FaqItems, null, items.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_FAQ.FaqItem, {
+      key: item.title
+    }, /*#__PURE__*/_react.default.createElement(_FAQ.FaqTitle, {
+      isActive: activeIndex === index,
+      onClick: function onClick(e) {
+        return onTitleClick(e, index);
+      }
+    }, item.title, /*#__PURE__*/_react.default.createElement(_FAQ.FaqDropdownIcon, null)), /*#__PURE__*/_react.default.createElement(_FAQ.FaqContent, {
+      isOpened: activeIndex === index
+    }, typeof item.content === 'string' ? /*#__PURE__*/_react.default.createElement(_FAQ.FaqText, null, item.content) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("ul", null, item.content.map(function (answer) {
+      return /*#__PURE__*/_react.default.createElement("li", {
+        key: answer
+      }, answer);
+    }))))));
+  }));
+};
+exports.FAQ = FAQ;
+FAQ.propTypes = {
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string.isRequired,
+    content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]).isRequired
+  })).isRequired
+};
+var _default = FAQ;
+exports.default = _default;

package/dist/components/FAQ/FAQ.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FAQExample = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FAQ = require("./FAQ");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/FAQ',
+  component: _FAQ.FAQ,
+  argTypes: {
+    // item: { type: 'string', defaultValue: 'FAQ Item' },
+    items: {
+      type: 'array of shapes',
+      required: true,
+      defaultValue: []
+      // title: { type: 'string', required: true, defaultValue: 'Default Title' },
+      // content: {
+      //   type: 'string',
+      //   required: true,
+      //   defaultValue: 'Default Content',
+      // },
+    },
+
+    onTitleClick: {
+      action: 'titleClick',
+      type: 'function'
+    },
+    scrollToElement: {
+      action: 'scroll',
+      type: 'function'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_FAQ.FAQ, args));
+};
+var FAQExample = Template.bind({});
+exports.FAQExample = FAQExample;
+FAQExample.args = {
+  items: [{
+    title: 'What kind of Ventures can be found on STOKR?',
+    content: 'You can find startups and small to medium sized companies led by motivated and qualified founders, committed to making a positive impact. Ventures are selected based on their business model and have various risk levels.'
+  }, {
+    title: 'What can I invest with?',
+    content: "Investors can invest via Bitcoin (BTC), Liquid Bitcoin (L-BTC), Ether (ETH) and stable coins such as Gemini Dollar (GUSD) and USD Tether (USDT). If you're not into cryptocurrencies, you can simply do a SEPA transfer and invest with Euro."
+  }, {
+    title: 'List that for me (only SUF)',
+    content: ['Bitcoin (BTC)', 'Liquid Bitcoin (L-BTC)', 'Ether (ETH)', 'stable coins such as Gemini Dollar (GUSD) and USD Tether (USDT)', "If you're not into cryptocurrencies, you can simply do a SEPA transfer and invest with Euro."]
+  }]
+};
+
+// simple:
+// export const FAQExample = () => (
+//   <ComponentWrapper>
+//     <FAQ
+//       items={[
+//         { title: 'example title', content: 'some content' },
+//         { title: 'example title 2', content: [1, 2, 3, 4, 5] },
+//       ]}
+//     />
+//   </ComponentWrapper>
+// )
+
+//doublecheck:
+
+// state (activeIndex), mapping, shape,  scroll, activeIndex
+// actions not firing, maybe cause not props
+// map over items (item,index)?
+// cannot fill in own text (control) as title and content are part of items shape

package/dist/components/FAQ/FAQ.styles.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FaqTitle = exports.FaqText = exports.FaqItems = exports.FaqItem = exports.FaqDropdownIcon = exports.FaqContent = 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 FaqItems = _styledComponents.default.div.withConfig({
+  displayName: "FAQstyles__FaqItems",
+  componentId: "sc-dtvahh-0"
+})(["position:relative;"]);
+exports.FaqItems = FaqItems;
+var FaqItem = _styledComponents.default.div.withConfig({
+  displayName: "FAQstyles__FaqItem",
+  componentId: "sc-dtvahh-1"
+})(["& + &{margin-top:30px;}"]);
+exports.FaqItem = FaqItem;
+var FaqTitle = _styledComponents.default.button.withConfig({
+  displayName: "FAQstyles__FaqTitle",
+  componentId: "sc-dtvahh-2"
+})(["display:block;width:100%;position:relative;font-family:'Open Sans';font-weight:600;font-size:16px;line-height:24px;letter-spacing:0.4px;color:", ";padding:0;margin:0;outline:0;border:none;padding-right:30px;text-align:left;transition:color 0.2s;&:hover{color:inherit;}", ""], function (props) {
+  return _theme.default.cBlack;
+}, function (props) {
+  return props.isActive && "\n    ".concat(FaqDropdownIcon, " {\n      transform: rotate(180deg);\n    }\n  ");
+});
+exports.FaqTitle = FaqTitle;
+var FaqDropdownIcon = _styledComponents.default.i.attrs({
+  className: 'ion ion-ios-arrow-down'
+}).withConfig({
+  displayName: "FAQstyles__FaqDropdownIcon",
+  componentId: "sc-dtvahh-3"
+})(["width:14px;height:20px;font-size:20px;position:absolute;top:50%;right:0;margin-top:-10px;transform:rotate(0);transition:0.3s transform;"]);
+exports.FaqDropdownIcon = FaqDropdownIcon;
+var FaqContent = (0, _styledComponents.default)(_reactCollapse.Collapse).withConfig({
+  displayName: "FAQstyles__FaqContent",
+  componentId: "sc-dtvahh-4"
+})(["opacity:0;transition:opacity 0.2s;", ""], function (props) {
+  return props.isOpened && "\n    opacity: 1;\n  ";
+});
+exports.FaqContent = FaqContent;
+var FaqText = _styledComponents.default.div.withConfig({
+  displayName: "FAQstyles__FaqText",
+  componentId: "sc-dtvahh-5"
+})(["padding:0;padding-top:30px;padding-bottom:10px;font-weight:300;font-size:16px;line-height:24px;letter-spacing:0.4px;"]);
+exports.FaqText = FaqText;

package/dist/components/Footer/Footer.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Footer = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _Grid = require("components/Grid/Grid.styles");
+var _sicosLogo = _interopRequireDefault(require("./sicos-logo.svg"));
+var _Footer = require("./Footer.styles");
+var _lemonway = _interopRequireDefault(require("./lemonway.png"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Footer = function Footer(_ref) {
+  var color = _ref.color,
+    _ref$lemonwayLogo = _ref.lemonwayLogo,
+    lemonwayLogo = _ref$lemonwayLogo === void 0 ? _lemonway.default : _ref$lemonwayLogo,
+    _ref$hasSidebar = _ref.hasSidebar,
+    hasSidebar = _ref$hasSidebar === void 0 ? false : _ref$hasSidebar,
+    isSidebarExpanded = _ref.isSidebarExpanded;
+  return /*#__PURE__*/_react.default.createElement(_Footer.StyledFooter, {
+    color: color,
+    isSidebarExpanded: isSidebarExpanded,
+    hasSidebar: hasSidebar
+  }, /*#__PURE__*/_react.default.createElement(_Grid.Wrapper, null, /*#__PURE__*/_react.default.createElement(_Footer.FooterInner, {
+    hasSidebar: hasSidebar
+  }, /*#__PURE__*/_react.default.createElement(_Footer.PartnerWrap, null, /*#__PURE__*/_react.default.createElement(_Footer.Partner, null, "STOKR is a virtual asset service provider (VASP), ", /*#__PURE__*/_react.default.createElement("br", null), ' ', /*#__PURE__*/_react.default.createElement("a", {
+    href: "https://searchentities.apps.cssf.lu/search-entities/search?&st=advanced&entType=VAP&entDate=2020-08-01",
+    title: "registered",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    style: {
+      textDecoration: 'underline',
+      color: 'white'
+    }
+  }, "registered"), ' ', "with the Luxembourg regulator CSSF.")), /*#__PURE__*/_react.default.createElement(_Footer.PoweredWrap, null, /*#__PURE__*/_react.default.createElement(_Footer.Powered, null, /*#__PURE__*/_react.default.createElement("div", null, "Partner of", ' ', /*#__PURE__*/_react.default.createElement("a", {
+    href: "http://www.lemonway.com/",
+    title: "Lemon Way - Payment Institution for the new economy",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    style: {
+      color: 'white',
+      textDecoration: 'none'
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    style: {
+      verticalAlign: 'middle'
+    },
+    src: lemonwayLogo,
+    height: 20,
+    width: 20,
+    alt: "Lemonway logo"
+  }), ' ', "LEMONWAY"), ". A European payment institution ", /*#__PURE__*/_react.default.createElement("br", null), " accredited in France by the ACPR (CIB 16568).")), /*#__PURE__*/_react.default.createElement(_Footer.Copyright, null, "Copyright ", new Date().getFullYear(), " STOKR. All rights reserved.")))));
+};
+exports.Footer = Footer;
+Footer.propTypes = {
+  color: _propTypes.default.oneOf(['primary', 'red']),
+  lemonwayLogo: _propTypes.default.string,
+  hasSidebar: _propTypes.default.bool,
+  isSidebarExpanded: _propTypes.default.bool
+};
+Footer.defaultProps = {
+  color: 'primary'
+};
+var _default = Footer;
+exports.default = _default;

package/dist/components/Footer/Footer.stories.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FooterRedWithSidebar = exports.FooterRed = exports.FooterPrimary = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Footer = require("./Footer");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Footer',
+  component: _Footer.Footer,
+  argTypes: {
+    color: {
+      options: ['primary', 'red'],
+      control: {
+        type: ''
+      },
+      hasSidebar: {
+        type: 'boolean',
+        default: false
+      },
+      isSidebarExpanded: {
+        type: 'boolean',
+        default: false
+      }
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Footer.Footer, args);
+};
+var FooterPrimary = Template.bind({});
+exports.FooterPrimary = FooterPrimary;
+FooterPrimary.args = {};
+var FooterRed = Template.bind({});
+exports.FooterRed = FooterRed;
+FooterRed.args = {
+  color: 'red'
+};
+var FooterRedWithSidebar = Template.bind({});
+exports.FooterRedWithSidebar = FooterRedWithSidebar;
+FooterRedWithSidebar.args = {
+  color: 'red',
+  hasSidebar: true,
+  isSidebarExpanded: true
+};
+
+// export const footerprimary = () => <Footer color="primary"></Footer>
+// export const footerred = () => <Footer color="red"></Footer>
+
+//doublecheck:
+// padding missing for primary in Footer.styles