@stokr/components-library 1.0.8 → 1.1.0

package/dist/components/NotificationContext/NotificationContext.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotificationProvider = exports.NotificationConsumer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _socket = _interopRequireDefault(require("socket.io-client"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 _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 NotificationContext = /*#__PURE__*/_react.default.createContext();
+var NotificationProvider = /*#__PURE__*/function (_Component) {
+  _inherits(NotificationProvider, _Component);
+  var _super = _createSuper(NotificationProvider);
+  function NotificationProvider() {
+    var _this;
+    _classCallCheck(this, NotificationProvider);
+    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), "socket", {});
+    _defineProperty(_assertThisInitialized(_this), "projectSocket", {});
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      notifications: [],
+      projectNotifications: []
+    });
+    _defineProperty(_assertThisInitialized(_this), "connectToSocket", function () {
+      var userId = _this.props.userId;
+      _this.socket = (0, _socket.default)(process.env.REACT_APP_NOTIFICATION_API_URL, {
+        path: '/notification'
+      });
+      _this.setSocketEvents();
+      _this.setState({
+        notifications: []
+      }, function () {
+        _this.socket.emit('login_to_socket', {
+          userId: userId
+        });
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "connectToProjectSocket", function () {
+      var projectId = _this.props.projectId;
+      _this.projectSocket = (0, _socket.default)(process.env.REACT_APP_NOTIFICATION_API_URL, {
+        path: '/notification'
+      });
+      _this.setProjectSocketEvents();
+      _this.setState({
+        projectNotifications: []
+      }, function () {
+        _this.projectSocket.emit('login_to_socket', {
+          userId: projectId
+        });
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "setSocketEvents", function () {
+      _this.socket.on('has_error', _this.onHasError);
+      _this.socket.on('notification', _this.onNotification);
+    });
+    _defineProperty(_assertThisInitialized(_this), "setProjectSocketEvents", function () {
+      _this.projectSocket.on('has_error', _this.onHasError);
+      _this.projectSocket.on('notification', _this.onProjectNotification);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onHasError", function (data) {
+      console.warn(data);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onNotification", function (notification) {
+      _this.setState(function (prevState) {
+        return {
+          notifications: [notification].concat(_toConsumableArray(prevState.notifications))
+        };
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onProjectNotification", function (notification) {
+      _this.setState(function (prevState) {
+        return {
+          projectNotifications: [notification].concat(_toConsumableArray(prevState.projectNotifications))
+        };
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "markAsRead", function (userNotificationId) {
+      var notifications = _this.state.notifications;
+      _this.socket.emit('mark_as_read', {
+        userNotificationId: userNotificationId
+      });
+      _this.setState({
+        notifications: notifications.filter(function (notificationItem) {
+          return notificationItem._id !== userNotificationId;
+        })
+      });
+    });
+    return _this;
+  }
+  _createClass(NotificationProvider, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props = this.props,
+        userId = _this$props.userId,
+        projectId = _this$props.projectId;
+      if (userId !== '') {
+        //this.connectToSocket();
+      }
+      if (projectId !== '') {
+        //this.connectToProjectSocket();
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props2 = this.props,
+        userId = _this$props2.userId,
+        projectId = _this$props2.projectId;
+      if (prevProps.userId === '' && userId !== '') {
+        //this.connectToSocket()
+      }
+      if (prevProps.projectId === '' && projectId !== '') {
+        this.connectToProjectSocket();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var children = this.props.children;
+      var _this$state = this.state,
+        notifications = _this$state.notifications,
+        projectNotifications = _this$state.projectNotifications;
+      return /*#__PURE__*/_react.default.createElement(NotificationContext.Provider, {
+        value: {
+          notifications: notifications.filter(function (notification) {
+            return !notification.isRead;
+          }),
+          projectNotifications: projectNotifications,
+          markAsRead: this.markAsRead
+        }
+      }, children);
+    }
+  }]);
+  return NotificationProvider;
+}(_react.Component);
+exports.NotificationProvider = NotificationProvider;
+NotificationProvider.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  userId: _propTypes.default.string,
+  projectId: _propTypes.default.string
+};
+NotificationProvider.defaultProps = {
+  userId: '',
+  projectId: ''
+};
+var NotificationConsumer = NotificationContext.Consumer;
+exports.NotificationConsumer = NotificationConsumer;

package/dist/components/NotificationContext/NotificationContext.stories.js

@@ -0,0 +1,33 @@
+// import React from 'react'
+// import { NotificationProvider } from './NotificationContext'
+// import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles'
+
+// export default {
+//   title: 'Components Library/NotificationContext',
+//   component: NotificationProvider,
+//   argTypes: {
+//     children: { type: 'node', required: true },
+//     userId: { type: 'string', defaultValue: '' },
+//     projectId: { type: 'string', defaultValue: '' },
+//   },
+// }
+
+// const Template = args => (
+//   <ComponentWrapper>
+//     <NotificationProvider {...args} />
+//   </ComponentWrapper>
+// )
+
+// export const NotificationContextDefault = Template.bind({})
+// NotificationContextDefault.args = {}
+
+// export const NotificationContextFull = Template.bind({})
+// NotificationContextFull.args = {
+//   children: 'Children, Node',
+//   userId: 'User ID',
+//   projectId: 'Project ID',
+// }
+
+// doublecheck:
+// Storybookgoes bust, cannot resolve socket.io
+"use strict";

package/dist/components/NotificationCounter/NotificationCounter.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NotificationCounter = 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 NotificationCounter = _styledComponents.default.span.withConfig({
+  displayName: "NotificationCounterstyles__NotificationCounter",
+  componentId: "sc-1pf66l9-0"
+})(["display:inline-block;vertical-align:middle;color:", ";background-color:", ";border-radius:50%;min-width:16px;height:16px;font-size:11px;font-weight:600;line-height:16px;text-align:center;", " ", " ", ""], function (props) {
+  return _theme.default.cWhite;
+}, function (props) {
+  return _theme.default.cWarning;
+}, function (props) {
+  return props.avatar && "\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  ";
+}, function (props) {
+  return props.mobile && "\n    position: absolute;\n    top: 5px;\n    right: 5px;\n    z-index: 1;\n  ";
+}, function (props) {
+  return props.mobileMenu && "\n    margin:0 5px;\n  ";
+});
+exports.NotificationCounter = NotificationCounter;
+var _default = NotificationCounter;
+exports.default = _default;

package/dist/components/Number/Number.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Number = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _SvgIcons = require("../SvgIcons");
+var _Number = require("./Number.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var getIcon = function getIcon(number) {
+  switch (number) {
+    case 1:
+      return /*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null);
+    case 2:
+      return /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null);
+    case 3:
+      return /*#__PURE__*/_react.default.createElement(_SvgIcons.ThreeSvg, null);
+    case 4:
+      return /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null);
+    default:
+      return null;
+  }
+};
+var Number = function Number(_ref) {
+  var number = _ref.number;
+  return /*#__PURE__*/_react.default.createElement(_Number.Container, null, getIcon(number));
+};
+exports.Number = Number;
+Number.propTypes = {
+  number: _propTypes.default.number.isRequired
+};
+var _default = Number;
+exports.default = _default;

package/dist/components/Number/Number.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.number = exports.default = exports.NumberTwo = exports.NumberThree = exports.NumberOne = exports.NumberFour = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SvgIcons = require("../SvgIcons");
+var _Number = require("./Number");
+var _Number2 = require("./Number.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Number',
+  component: _Number.Number
+};
+exports.default = _default;
+var number = function number() {
+  return /*#__PURE__*/_react.default.createElement(_Number.Number, null);
+};
+exports.number = number;
+var NumberOne = function NumberOne() {
+  return /*#__PURE__*/_react.default.createElement(_Number2.Container, null, /*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null));
+};
+exports.NumberOne = NumberOne;
+var NumberTwo = function NumberTwo() {
+  return /*#__PURE__*/_react.default.createElement(_Number2.Container, null, /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null));
+};
+exports.NumberTwo = NumberTwo;
+var NumberThree = function NumberThree() {
+  return /*#__PURE__*/_react.default.createElement(_Number2.Container, null, /*#__PURE__*/_react.default.createElement(_SvgIcons.ThreeSvg, null));
+};
+exports.NumberThree = NumberThree;
+var NumberFour = function NumberFour() {
+  return /*#__PURE__*/_react.default.createElement(_Number2.Container, null, /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null));
+};
+
+// doublecheck:
+
+//what about blue option?
+//could write this with argType cases/number
+exports.NumberFour = NumberFour;

package/dist/components/Number/Number.styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Container = 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: "Numberstyles__Container",
+  componentId: "sc-1g8h8k-0"
+})(["display:inline-block;vertical-align:top;width:24px;height:24px;padding:4px;background-color:", ";font-size:0;text-align:center;margin-right:12px;& > svg{display:inline-block;height:16px;width:auto;fill:", ";}"], function (props) {
+  return _theme.default.cWarning;
+}, function (props) {
+  return _theme.default.cWhite;
+});
+exports.Container = Container;
+var _default = Container;
+exports.default = _default;

package/dist/components/PageTransition/PageTransition.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PageTransition = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactTransitionGroup = require("react-transition-group");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 timeout = 300;
+var getTransitionStyles = {
+  entering: {
+    position: 'absolute',
+    opacity: 0
+  },
+  entered: {
+    transition: "opacity ".concat(timeout, "ms ease-in-out"),
+    opacity: 1
+  },
+  exiting: {
+    transition: "opacity ".concat(timeout, "ms ease-in-out"),
+    opacity: 0
+  }
+};
+var PageTransition = function PageTransition(props) {
+  var children = props.children,
+    location = props.location;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
+    key: location.pathname,
+    timeout: {
+      enter: timeout,
+      exit: timeout
+    }
+  }, function (status) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: _objectSpread({}, getTransitionStyles[status])
+    }, children);
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    id: "modalPortal"
+  }));
+};
+exports.PageTransition = PageTransition;
+PageTransition.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  location: _propTypes.default.instanceOf(Object).isRequired
+};
+var _default = PageTransition;
+exports.default = _default;

package/dist/components/Process/Process.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProcessWaiting = exports.ProcessSuccess = exports.ProcessFailed = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Process = _interopRequireDefault(require("./Process.styles"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Process',
+  component: _Process.default,
+  argTypes: {
+    waiting: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    success: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    failed: {
+      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(_Process.default, args)));
+};
+var ProcessWaiting = Template.bind({});
+exports.ProcessWaiting = ProcessWaiting;
+ProcessWaiting.args = {
+  waiting: true
+};
+var ProcessSuccess = Template.bind({});
+exports.ProcessSuccess = ProcessSuccess;
+ProcessSuccess.args = {
+  success: true
+};
+var ProcessFailed = Template.bind({});
+exports.ProcessFailed = ProcessFailed;
+ProcessFailed.args = {
+  failed: true
+};

package/dist/components/Process/Process.styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Process = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _processWaiting = _interopRequireDefault(require("../../static/images/process-waiting.gif"));
+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 Process = _styledComponents.default.div.withConfig({
+  displayName: "Processstyles__Process",
+  componentId: "sc-dvfica-0"
+})(["display:block;position:relative;font-size:11px;line-height:16px;text-transform:uppercase;padding-right:26px;color:", ";opacity:0.3;", " &:before{content:'';font-family:'Ionicons';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:19px;line-height:16px;display:block;width:16px;height:16px;position:absolute;top:50%;right:0;margin-top:-8px;", "}", " ", " ", ""], function (props) {
+  return _theme.default.cPrimary;
+}, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 20px;\n  "]))), _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      font-size: 24px;\n      line-height: 20px;\n      width: 20px;\n      height: 20px;\n      margin-top: -10px;\n    "]))), function (props) {
+  return props.waiting && "\n    opacity: 1;\n\n    &:before {\n      content: '';\n      background-repeat: no-repeat;\n      background-position: 50% 50%;\n      background-size: cover;\n      background-image: url(".concat(_processWaiting.default, ");\n    }\n  ");
+}, function (props) {
+  return props.success && "\n    opacity: 1;\n\n    &:before {\n      content: '\\f14a';\n      color: ".concat(_theme.default.cProgressDone, ";\n    }\n  ");
+}, function (props) {
+  return props.failed && "\n    opacity: 1;\n    color: ".concat(_theme.default.cWarning, ";\n\n    &:before {\n      content: '\\f14e';\n    }\n  ");
+});
+exports.Process = Process;
+var _default = Process; //left out of Merge, font-weight and p below only from IIS
+// font-weight: bold;
+// p {
+//   text-transform: initial;
+//   font-weight: initial;
+// }
+exports.default = _default;

package/dist/components/ProfileBadge/ProfileBadge.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProfileBadge = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _earlyAdopter = _interopRequireDefault(require("../../static/images/early-adopter.png"));
+var _graduation = _interopRequireDefault(require("../../static/images/graduation.png"));
+var _ProfileBadge = require("./ProfileBadge.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Badge = _styledComponents.default.img.withConfig({
+  displayName: "ProfileBadge__Badge",
+  componentId: "sc-3y9ipg-0"
+})(["height:100px;@media screen and (max-width:1023px){height:80px;}"]);
+var GetBadge = function GetBadge(badge) {
+  if (badge === 'Graduation') {
+    return _graduation.default;
+  } else {
+    return _earlyAdopter.default;
+  }
+};
+var ProfileBadge = function ProfileBadge(_ref) {
+  var title = _ref.title,
+    icon = _ref.icon,
+    withIcon = _ref.withIcon,
+    color = _ref.color,
+    centerVertically = _ref.centerVertically;
+  return /*#__PURE__*/_react.default.createElement(_ProfileBadge.Wrapper, {
+    color: color
+  }, /*#__PURE__*/_react.default.createElement(_ProfileBadge.Title, {
+    centerVertically: centerVertically
+  }, title), icon, withIcon && /*#__PURE__*/_react.default.createElement(Badge, {
+    src: GetBadge(title),
+    alt: title + ' badge'
+  }));
+};
+exports.ProfileBadge = ProfileBadge;
+ProfileBadge.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  icon: _propTypes.default.node,
+  withIcon: _propTypes.default.bool,
+  color: _propTypes.default.string
+};
+ProfileBadge.defaultProps = {
+  icon: undefined,
+  withIcon: undefined,
+  color: 'white'
+};
+var _default = ProfileBadge;
+exports.default = _default;

package/dist/components/ProfileBadge/ProfileBadge.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProfileBadgeWithIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _addonViewport = require("@storybook/addon-viewport");
+var _ProfileBadge = require("./ProfileBadge");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Profile Badge',
+  component: _ProfileBadge.ProfileBadge,
+  argTypes: {
+    title: {
+      type: 'string',
+      required: true
+    },
+    icon: {
+      type: 'node',
+      defaultValue: undefined
+    },
+    color: {
+      type: 'string',
+      defaultValue: 'white'
+    },
+    withIcon: {
+      type: 'boolean',
+      defaultValue: undefined
+    }
+  },
+  parameters: {
+    backgrounds: {
+      default: 'grey'
+    }
+  }
+};
+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(_ProfileBadge.ProfileBadge, args)));
+};
+var ProfileBadgeWithIcon = Template.bind({});
+exports.ProfileBadgeWithIcon = ProfileBadgeWithIcon;
+ProfileBadgeWithIcon.args = {
+  title: 'A Title',
+  withIcon: true
+};

package/dist/components/ProfileBadge/ProfileBadge.styles.js

@@ -0,0 +1,32 @@
+"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.Wrapper = exports.Title = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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 _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 Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "ProfileBadgestyles__Wrapper",
+  componentId: "sc-191tkgo-0"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;flex-grow:1;padding:32px;", " ", " ", ""], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 12px;\n  "]))), function (props) {
+  return props.color === 'white' && "\n    color: ".concat(_theme.default.cBlack, ";\n    background-color: ").concat(_theme.default.cWhite, ";\n\n    svg {\n      stroke: ").concat(_theme.default.cBlack, ";\n    }\n  ");
+}, function (props) {
+  return props.color === 'red' && "\n    color: ".concat(_theme.default.cWhite, ";\n    background-color: ").concat(_theme.default.cWarning, ";\n\n    svg {\n      stroke: ").concat(_theme.default.cWhite, ";\n    }\n  ");
+});
+exports.Wrapper = Wrapper;
+var Title = _styledComponents.default.div.withConfig({
+  displayName: "ProfileBadgestyles__Title",
+  componentId: "sc-191tkgo-1"
+})(["font-size:11px;line-height:24px;letter-spacing:2.06px;text-transform:uppercase;margin-bottom:20px;", ""], function (_ref) {
+  var centerVertically = _ref.centerVertically;
+  return centerVertically && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      margin-bottom: 0;\n    "])));
+});
+exports.Title = Title;