@stokr/components-library 0.5.6 → 0.5.7

package/dist/components/Modal/Modal.styles.js

@@ -0,0 +1,140 @@
+"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.ModalWrapper = exports.ModalTitle = exports.ModalSection = exports.ModalScroll = exports.ModalRoot = exports.ModalLinkWrap = exports.ModalLink = exports.ModalInnerWithBorder = exports.ModalInnerSmartContractAddress = exports.ModalInner = exports.ModalClose = exports.ModalBack = exports.Dimmer = exports.Box = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _reactRouterDom = require("react-router-dom");
+var _grid = _interopRequireDefault(require("styles/grid"));
+var _rwd = _interopRequireDefault(require("styles/rwd"));
+var _colors = _interopRequireDefault(require("styles/colors"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+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 ModalRoot = _styledComponents.default.div.withConfig({
+  displayName: "Modalstyles__ModalRoot",
+  componentId: "sc-9hc271-0"
+})(["z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;"]);
+exports.ModalRoot = ModalRoot;
+var Dimmer = _styledComponents.default.div.withConfig({
+  displayName: "Modalstyles__Dimmer",
+  componentId: "sc-9hc271-1"
+})(["position:relative;top:0;left:0;display:block;width:100%;height:100%;background-color:rgba(0,0,0,0.7);font-size:0;text-align:center;overflow-y:auto;", " &:after{content:'';display:inline-block;vertical-align:middle;height:100%;width:0;}"], function (props) {
+  return props.kyc && 'overflow: visible;';
+});
+exports.Dimmer = Dimmer;
+var Box = _styledComponents.default.div.withConfig({
+  displayName: "Modalstyles__Box",
+  componentId: "sc-9hc271-2"
+})(["display:inline-block;vertical-align:middle;position:relative;left:0;top:0;width:100%;background-color:", ";font-size:10px;text-align:left;box-shadow:0 2px 20px 0 rgba(0,0,0,0.1);", " ", " ", " ", " ", ""], _colors.default.white, function (props) {
+  return props.fullscreen && "\n    height: 90vh;\n  ";
+}, function (props) {
+  return props.kyc && "\n    width: 100vw;\n    height: 100vh;\n    max-width: 1024px!important;\n    max-height: 768px!important;\n  ";
+}, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: ", ";\n\n    ", "\n  "])), (0, _grid.default)(12), function (props) {
+  return props.thin && "\n      max-width: ".concat((0, _grid.default)(8), ";\n    ");
+}), _rwd.default.XLarge(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-width: ", ";\n\n    ", "\n  "])), (0, _grid.default)(8), function (props) {
+  return props.thin && "\n      max-width: ".concat((0, _grid.default)(6), ";\n    ");
+}), function (_ref) {
+  var isRegisterEntity = _ref.isRegisterEntity;
+  return isRegisterEntity && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      max-width: 55% !important;\n      height: 65vh;\n    "])));
+});
+exports.Box = Box;
+var ModalInnerSmartContractAddress = _styledComponents.default.input.withConfig({
+  displayName: "Modalstyles__ModalInnerSmartContractAddress",
+  componentId: "sc-9hc271-3"
+})(["color:", ";font-family:'Open Sans';font-size:14px;font-weight:400;text-align:left;margin-top:24px;width:100%;apperance:none;resize:none;border:none;outline:0;"], _colors.default.black);
+exports.ModalInnerSmartContractAddress = ModalInnerSmartContractAddress;
+var ModalInnerWithBorder = _styledComponents.default.div.withConfig({
+  displayName: "Modalstyles__ModalInnerWithBorder",
+  componentId: "sc-9hc271-4"
+})(["border-radius:10px;border:1px solid ", ";padding:25px 35px;margin-top:39px;", " ", " ", " ", " ", " ", " p{color:", ";font-size:14px;font-weight:300;letter-spacing:0.53px;line-height:22px;text-align:left;margin:0;}"], _colors.default.grey, function (props) {
+  return props.bottomRadius0 && "\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  ";
+}, function (props) {
+  return props.topRadius0 && "\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  ";
+}, function (props) {
+  return props.marginTop0 && "\n    margin-top: 0;\n  ";
+}, function (props) {
+  return props.bordderTopNone && "\n    border-top: 0;\n  ";
+}, function (props) {
+  return props.textAlignRight && "\n    text-align: right;\n  ";
+}, function (props) {
+  return props.paddingSmall && "\n    padding: 21px 25px;\n  ";
+}, _colors.default.black);
+exports.ModalInnerWithBorder = ModalInnerWithBorder;
+var ModalInner = _styledComponents.default.div.withConfig({
+  displayName: "Modalstyles__ModalInner",
+  componentId: "sc-9hc271-5"
+})(["width:100%;height:100%;padding:40px ", ";display:flex;flex-direction:column;", " ", " ", " ", " ", " ", " ", " ", " ", ""], (0, _grid.default)(1), function (props) {
+  return props.center && "\n    text-align: center;\n  ";
+}, function (props) {
+  return props.background && "\n    background-color: ".concat(_colors.default.grey, ";\n  ");
+}, function (props) {
+  return props.modalBot && "\n    background-color: ".concat(_colors.default.orangishRed, ";\n    color: ").concat(_colors.default.white, ";\n    flex-grow: 0 !important;\n    height: auto;\n  ");
+}, function (props) {
+  return props.modalTop && "\n    padding-bottom: 30px;\n  ";
+}, function (props) {
+  return props.center && "\n    justify-content: center;\n    align-items: center;\n  ";
+}, _rwd.default.Medium(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 53px ", ";\n\n    ", "\n\n    ", "\n\n    /* missing tiny */\n  "])), (0, _grid.default)(1, 12), function (props) {
+  return props.left && "\n      padding: 88px ".concat((0, _grid.default)(1, 12), ";\n    ");
+}, function (props) {
+  return props.modalTop && "\n      padding-bottom: 43px;\n      border-right: 1px solid ".concat(_colors.default.grey, ";\n    ");
+}), _rwd.default.XLarge(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding: 53px ", ";\n\n    ", "\n\n    ", "\n\n    /* missing tiny */\n  "])), (0, _grid.default)(1, 8), function (props) {
+  return props.left && "\n      padding: 88px ".concat((0, _grid.default)(1, 8), ";\n    ");
+}, function (props) {
+  return props.modalTop && "\n      padding-bottom: 53px;\n    ";
+}), function (props) {
+  return props.noPadding && "\n    padding: 0!important;\n  ";
+}, function (props) {
+  return props.noPaddingHorizontal && "\n    padding-left: 0!important;\n    padding-right: 0!important;\n  ";
+});
+exports.ModalInner = ModalInner;
+var ModalClose = _styledComponents.default.i.attrs({
+  className: 'ion ion-md-close'
+}).withConfig({
+  displayName: "Modalstyles__ModalClose",
+  componentId: "sc-9hc271-6"
+})(["z-index:4;position:absolute;top:0;right:0;width:40px;height:40px;text-align:center;cursor:pointer;color:", ";background-color:", ";transition:background-color 0.2s,color 0.2s;&:before{transition:transform 0.2s;font-size:24px;line-height:24px !important;width:24px;height:24px;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px;}&:hover{color:", ";background-color:", ";&:before{transform:rotate(-180deg);}}", ""], _colors.default.white, _colors.default.blue, _colors.default.black, _colors.default.white, _rwd.default.Medium(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 56px;\n    height: 56px;\n\n    &:before {\n      font-size: 27px;\n    }\n  "]))));
+exports.ModalClose = ModalClose;
+var ModalBack = _styledComponents.default.i.attrs({
+  className: 'ion ion-ios-arrow-back'
+}).withConfig({
+  displayName: "Modalstyles__ModalBack",
+  componentId: "sc-9hc271-7"
+})(["z-index:4;position:absolute;top:0;left:0;width:40px;height:40px;text-align:center;cursor:pointer;color:", ";background-color:transparent;transition:color 0.2s,opacity 0.2s,visibility 0.2s;", " &:before{transition:transform 0.2s;font-size:24px;line-height:24px !important;width:24px;height:24px;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px;}&:hover{color:", ";&:before{transform:translateX(-20%);}}", ""], _colors.default.black, function (props) {
+  return props.hide && "\n    opacity: 0;\n    visibility: hidden;\n  ";
+}, _colors.default.blue, _rwd.default.Medium(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 56px;\n    height: 56px;\n\n    &:before {\n      font-size: 27px;\n    }\n  "]))));
+exports.ModalBack = ModalBack;
+var ModalLinkWrap = _styledComponents.default.div.withConfig({
+  displayName: "Modalstyles__ModalLinkWrap",
+  componentId: "sc-9hc271-8"
+})(["position:relative;font-family:'Open Sans';font-weight:300;font-size:11px;line-height:14px;text-transform:uppercase;padding-left:18px;&:before{content:'\\f3d1';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:12px;line-height:8px;display:block;width:8px;height:8px;position:absolute;top:50%;left:0;margin-top:-4px;color:", ";}"], _colors.default.lighterGreen);
+exports.ModalLinkWrap = ModalLinkWrap;
+var ModalLink = (0, _styledComponents.default)(_reactRouterDom.Link).withConfig({
+  displayName: "Modalstyles__ModalLink",
+  componentId: "sc-9hc271-9"
+})(["display:inline-block;position:relative;cursor:pointer;color:inherit;&:before{content:'';display:block;width:0%;height:1px;position:absolute;top:100%;left:0;background-color:", ";transition:width 0.2s;}&:hover{&:before{width:100%;}}"], _colors.default.lighterGreen);
+exports.ModalLink = ModalLink;
+var ModalWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Modalstyles__ModalWrapper",
+  componentId: "sc-9hc271-10"
+})(["display:flex;flex-direction:column;height:100%;"]);
+exports.ModalWrapper = ModalWrapper;
+var ModalTitle = _styledComponents.default.div.withConfig({
+  displayName: "Modalstyles__ModalTitle",
+  componentId: "sc-9hc271-11"
+})(["font-family:'Open Sans';font-weight:800;font-size:22px;line-height:1.27em;letter-spacing:0.8px;text-transform:uppercase;"]);
+exports.ModalTitle = ModalTitle;
+var ModalScroll = _styledComponents.default.div.withConfig({
+  displayName: "Modalstyles__ModalScroll",
+  componentId: "sc-9hc271-12"
+})(["height:100%;overflow-y:auto;padding:0 12px;margin:0 -12px;", " &::-webkit-scrollbar{width:4px;}&::-webkit-scrollbar-track{background-color:", ";}&::-webkit-scrollbar-thumb{background-color:", ";}&::-webkit-scrollbar-thumb:window-inactive{background-color:", ";}"], _rwd.default.Large(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    padding: 0 32px;\n    margin: 0 -32px;\n  "]))), _colors.default.grey, _colors.default.orangishRed, _colors.default.orangishRedDark);
+exports.ModalScroll = ModalScroll;
+var ModalSection = _styledComponents.default.div.withConfig({
+  displayName: "Modalstyles__ModalSection",
+  componentId: "sc-9hc271-13"
+})(["& + &{padding-top:40px;", "}"], _rwd.default.Medium(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      padding-top: 53px;\n    "]))));
+exports.ModalSection = ModalSection;

package/dist/components/MultiProgressBar/MultiProgressBar.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MultiProgressBarPropTypes = exports.MultiProgressBar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _MultiProgressBar = require("./MultiProgressBar.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var MultiProgressBar = function MultiProgressBar(_ref) {
+  var backParts = _ref.backParts,
+    fillParts = _ref.fillParts,
+    fill = _ref.fill;
+  return /*#__PURE__*/_react.default.createElement(_MultiProgressBar.Bar, null, /*#__PURE__*/_react.default.createElement(_MultiProgressBar.BackBar, null, backParts.map(function (part) {
+    return /*#__PURE__*/_react.default.createElement(_MultiProgressBar.BarPart, {
+      key: part.label,
+      percent: part.value,
+      color: "back-".concat(part.label)
+    });
+  })), /*#__PURE__*/_react.default.createElement(_MultiProgressBar.FillProgress, {
+    percent: fill
+  }, /*#__PURE__*/_react.default.createElement(_MultiProgressBar.FillBar, {
+    percent: fill
+  }, fillParts.map(function (part) {
+    return /*#__PURE__*/_react.default.createElement(_MultiProgressBar.BarPart, {
+      key: part.label,
+      percent: part.value,
+      color: "fill-".concat(part.label)
+    });
+  }))));
+};
+exports.MultiProgressBar = MultiProgressBar;
+var MultiProgressBarPropTypes = {
+  backParts: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _propTypes.default.number.isRequired,
+    label: _propTypes.default.string.isRequired
+  })).isRequired,
+  fillParts: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _propTypes.default.number.isRequired,
+    label: _propTypes.default.string.isRequired
+  })).isRequired,
+  fill: _propTypes.default.number.isRequired
+};
+exports.MultiProgressBarPropTypes = MultiProgressBarPropTypes;
+MultiProgressBar.propTypes = MultiProgressBarPropTypes;
+var _default = MultiProgressBar;
+exports.default = _default;

package/dist/components/MultiProgressBar/MultiProgressBar.stories.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MPBarMin30 = exports.MPBarMax70Fill65 = exports.MPBarAllparts = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _MultiProgressBar = _interopRequireDefault(require("./MultiProgressBar"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Multi Progress Bar',
+  component: _MultiProgressBar.default,
+  argTypes: {
+    backParts: {
+      type: 'array of shape',
+      defaultValue: [{
+        value: 0
+      }, {
+        label: ''
+      }]
+    },
+    fillParts: {
+      type: 'array of shape',
+      defaultValue: [{
+        value: 0
+      }, {
+        label: ''
+      }]
+    },
+    fill: {
+      type: 'number',
+      defaultValue: 0
+    }
+  }
+}; // backpart: minumum fill
+// fillparts: maximum fill
+// fill: fill between min and max
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_MultiProgressBar.default, args));
+};
+var MPBarMin30 = Template.bind({});
+exports.MPBarMin30 = MPBarMin30;
+MPBarMin30.args = {
+  backParts: [{
+    value: 30,
+    label: 'backparts - minumum fill'
+  }]
+};
+var MPBarMax70Fill65 = Template.bind({});
+exports.MPBarMax70Fill65 = MPBarMax70Fill65;
+MPBarMax70Fill65.args = {
+  fillParts: [{
+    value: 70,
+    label: 'fillparts - maximum fill'
+  }],
+  fill: 65
+};
+var MPBarAllparts = Template.bind({});
+exports.MPBarAllparts = MPBarAllparts;
+MPBarAllparts.args = {
+  backParts: [{
+    value: 7,
+    label: 'backparts - minumum fill'
+  }],
+  fillParts: [{
+    value: 60,
+    label: 'fillparts - maximum fill'
+  }],
+  fill: 50
+};

package/dist/components/MultiProgressBar/MultiProgressBar.styles.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FillProgress = exports.FillBar = exports.BarPart = exports.Bar = exports.BackBar = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Bar = _styledComponents.default.div.withConfig({
+  displayName: "MultiProgressBarstyles__Bar",
+  componentId: "sc-1sn65pk-0"
+})(["width:100%;position:relative;display:block;height:10px;background-color:#004bb7;border-radius:5px;overflow:hidden;"]);
+exports.Bar = Bar;
+var BackBar = _styledComponents.default.div.withConfig({
+  displayName: "MultiProgressBarstyles__BackBar",
+  componentId: "sc-1sn65pk-1"
+})(["z-index:0;position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:4px;overflow:hidden;"]);
+exports.BackBar = BackBar;
+var FillBar = _styledComponents.default.div.withConfig({
+  displayName: "MultiProgressBarstyles__FillBar",
+  componentId: "sc-1sn65pk-2"
+})(["z-index:1;position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:4px;overflow:hidden;transition:transform 0.3s;transform:translateX(100%);", ""], function (props) {
+  return props.percent && "\n    transform: translateX(".concat(100 - props.percent, "%);\n  ");
+});
+exports.FillBar = FillBar;
+var FillProgress = _styledComponents.default.div.withConfig({
+  displayName: "MultiProgressBarstyles__FillProgress",
+  componentId: "sc-1sn65pk-3"
+})(["z-index:1;position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:4px;overflow:hidden;transition:transform 0.3s;transform:translateX(-100%);", ""], function (props) {
+  return props.percent && "\n    transform: translateX(".concat(props.percent - 100, "%);\n  ");
+});
+exports.FillProgress = FillProgress;
+var BarPart = _styledComponents.default.div.withConfig({
+  displayName: "MultiProgressBarstyles__BarPart",
+  componentId: "sc-1sn65pk-4"
+})(["display:block;height:100%;float:left;background-color:#000;transition:width 0.3s;", " ", ""], function (props) {
+  return "\n    width: ".concat(props.percent || 0, "%;\n  ");
+}, function (props) {
+  return props.color && "\n    ".concat(props.color === 'back-empty' ? "\n      background-color: transparent;\n    " : '', "\n    ").concat(props.color === 'back-minimum' ? "\n      background-color: #4a90e2;\n    " : '', "\n    ").concat(props.color === 'back-disabled' ? "\n      background-color: #4a90e2;\n      background-image: repeating-linear-gradient(-45deg, #004bb7, #004bb7 2px, #4a90e2 2px, #4a90e2 5px);\n    " : '', "\n    ").concat(props.color === 'fill-empty' ? "\n      background-color: transparent;\n    " : '', "\n    ").concat(props.color === 'fill-minimum' ? "\n      background-color: #fff;\n    " : '', "\n    ").concat(props.color === 'fill-minimum-grey' ? "\n      background-color: #e1e1e1;\n    " : '', "\n    ").concat(props.color === 'fill-bought' ? "\n      background-color: #69bd53;\n      background-image: linear-gradient(to left, #a9ef9c, #69bd53);\n    " : '', "\n  ");
+});
+exports.BarPart = BarPart;

package/dist/components/Newsletter/Newsletter.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Newsletter = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _fetchDataPublic = _interopRequireDefault(require("api/fetchDataPublic"));
+var _Newsletter = require("./Newsletter.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 Newsletter = /*#__PURE__*/function (_React$Component) {
+  _inherits(Newsletter, _React$Component);
+  var _super = _createSuper(Newsletter);
+  function Newsletter() {
+    var _this;
+    _classCallCheck(this, Newsletter);
+    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", {
+      name: '',
+      email: '',
+      errorName: '',
+      errorEmail: '',
+      submitSuccess: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
+      var _e$target = e.target,
+        name = _e$target.name,
+        value = _e$target.value;
+      _this.setState(_defineProperty({}, name, value));
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function (e) {
+      e.preventDefault();
+      var _this$state = _this.state,
+        name = _this$state.name,
+        email = _this$state.email;
+      var errorName;
+      var errorEmail;
+      if (!name) {
+        errorName = "Oops, this can't be blank";
+      } else {
+        errorName = '';
+      }
+      if (!email) {
+        errorEmail = "Oops, this can't be blank";
+      } else if (!/.+@.+\..+/.test(email)) {
+        errorEmail = "Oops, that's not a valid address";
+      } else {
+        errorEmail = '';
+      }
+
+      // Only submit of fields are properly filled
+      if (!errorEmail && !errorName) {
+        try {
+          (0, _fetchDataPublic.default)('emails/subscribe', {
+            name: name,
+            email: email,
+            listName: 'newsletter'
+          });
+          _this.setState({
+            name: '',
+            email: '',
+            errorName: '',
+            errorEmail: '',
+            submitSuccess: true
+          });
+          setTimeout(function () {
+            _this.setState({
+              submitSuccess: false
+            });
+          }, 5000);
+        } catch (e) {
+          console.log("\n### ERROR ADDING SUBSCRIBER ###\n\n".concat(e));
+        }
+      } else {
+        _this.setState({
+          errorName: errorName,
+          errorEmail: errorEmail
+        });
+      }
+    });
+    return _this;
+  }
+  _createClass(Newsletter, [{
+    key: "render",
+    value: function render() {
+      var _this$state2 = this.state,
+        submitSuccess = _this$state2.submitSuccess,
+        name = _this$state2.name,
+        email = _this$state2.email,
+        errorName = _this$state2.errorName,
+        errorEmail = _this$state2.errorEmail;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Newsletter.Subscribe, null, /*#__PURE__*/_react.default.createElement(_Newsletter.LayoutWrapper, {
+        noBorder: true,
+        minimal: true
+      }, /*#__PURE__*/_react.default.createElement(_Newsletter.Container, {
+        compact: true
+      }, /*#__PURE__*/_react.default.createElement(_Newsletter.SubscribeTitle, {
+        as: "h3"
+      }, "SIGN UP FOR THE STOKR NEWSLETTER"), /*#__PURE__*/_react.default.createElement(_Newsletter.SubscribeForm, null, /*#__PURE__*/_react.default.createElement(_Newsletter.SubscribeInputBox, null, /*#__PURE__*/_react.default.createElement(_Newsletter.SubscribeInput, {
+        name: "name",
+        type: "text",
+        placeholder: "Your Name",
+        value: name,
+        onChange: this.handleChange
+      }), errorName && /*#__PURE__*/_react.default.createElement(_Newsletter.SubscribeInputError, null, errorName)), /*#__PURE__*/_react.default.createElement(_Newsletter.SubscribeInputBox, null, /*#__PURE__*/_react.default.createElement(_Newsletter.SubscribeInput, {
+        name: "email",
+        type: "mail",
+        placeholder: "Your Email",
+        value: email,
+        onChange: this.handleChange
+      }), errorEmail && /*#__PURE__*/_react.default.createElement(_Newsletter.SubscribeInputError, null, errorEmail)), /*#__PURE__*/_react.default.createElement(_Newsletter.SubscribeSubmit, {
+        submitSuccess: submitSuccess,
+        transparent: true,
+        onClick: this.handleSubmit
+      }, submitSuccess ? 'Success!' : 'Submit'))))));
+    }
+  }]);
+  return Newsletter;
+}(_react.default.Component);
+exports.Newsletter = Newsletter;
+var _default = Newsletter;
+exports.default = _default;

package/dist/components/Newsletter/Newsletter.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NewsletterStokr = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Newsletter = _interopRequireDefault(require("./Newsletter"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Newsletter',
+  component: _Newsletter.default
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Newsletter.default, args);
+};
+var NewsletterStokr = Template.bind({});
+exports.NewsletterStokr = NewsletterStokr;

package/dist/components/Newsletter/Newsletter.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.SubscribeTitle = exports.SubscribeSubmit = exports.SubscribeInputError = exports.SubscribeInputBox = exports.SubscribeInput = exports.SubscribeForm = exports.Subscribe = exports.LayoutWrapper = exports.Container = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _rwd = _interopRequireWildcard(require("styles/rwd"));
+var sc = _interopRequireWildcard(require("constants/style"));
+var _Button = _interopRequireDefault(require("components/Button/Button.styles"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+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 withMarginsCss = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-left: ", "px;\n  padding-right: ", "px;\n\n  ", "\n  ", "\n"])), sc.BASE_MARGIN * 2, sc.BASE_MARGIN * 2, _rwd.rwdMax.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: 0 ", "px;\n  "])), sc.BASE_MARGIN * 2), _rwd.rwdMax.Mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 0 ", "px;\n  "])), sc.BASE_MARGIN * 2));
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "Newsletterstyles__Container",
+  componentId: "sc-53m39a-0"
+})(["", ";padding:", ";padding:", ";"], function (_ref) {
+  var compact = _ref.compact;
+  return !compact && withMarginsCss;
+}, function (_ref2) {
+  var isMobile = _ref2.isMobile;
+  return isMobile && '52px 32px 56px !important';
+}, function (_ref3) {
+  var noPaddingHorizontal = _ref3.noPaddingHorizontal;
+  return noPaddingHorizontal && '52px 0px 56px !important';
+});
+exports.Container = Container;
+var LayoutWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Newsletterstyles__LayoutWrapper",
+  componentId: "sc-53m39a-1"
+})(["display:flex;min-height:", ";flex-direction:column;position:relative;max-width:", "px;margin-left:auto;margin-right:auto;width:100%;", " ", " ", ""], function (_ref4) {
+  var notFullHeight = _ref4.notFullHeight;
+  return notFullHeight ? 'unset' : '100vh';
+}, sc.MAX_WIDTH, _rwd.default.Large(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border-right: 1px solid ", ";\n    border-left: 1px solid ", ";\n  "])), sc.GRAY_BASE_HEX, sc.GRAY_BASE_HEX), function (_ref5) {
+  var minimal = _ref5.minimal;
+  return minimal && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      min-height: 0;\n    "])));
+}, function (_ref6) {
+  var noBorder = _ref6.noBorder;
+  return noBorder && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      border: none !important;\n    "])));
+});
+exports.LayoutWrapper = LayoutWrapper;
+var Subscribe = _styledComponents.default.div.withConfig({
+  displayName: "Newsletterstyles__Subscribe",
+  componentId: "sc-53m39a-2"
+})(["padding:72px 65px 68px;background-color:", ";", ""], sc.RED_BASE_HEX, _rwd.rwdMax.MLarge(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    padding: 68px ", "px;\n  "])), sc.BASE_MARGIN * 2));
+exports.Subscribe = Subscribe;
+var SubscribeTitle = _styledComponents.default.h3.withConfig({
+  displayName: "Newsletterstyles__SubscribeTitle",
+  componentId: "sc-53m39a-3"
+})(["color:white;font-family:'Open Sans','Helvetica','Helvetica Neue',sans-serif;font-size:22px;font-weight:800;font-style:normal;font-stretch:normal;line-height:1.27;letter-spacing:0.8px;margin:0 0 60px;"]);
+exports.SubscribeTitle = SubscribeTitle;
+var SubscribeInputBox = _styledComponents.default.div.withConfig({
+  displayName: "Newsletterstyles__SubscribeInputBox",
+  componentId: "sc-53m39a-4"
+})(["display:flex;flex-direction:column;flex:1 0 auto;position:relative;"]);
+exports.SubscribeInputBox = SubscribeInputBox;
+var SubscribeInput = _styledComponents.default.input.withConfig({
+  displayName: "Newsletterstyles__SubscribeInput",
+  componentId: "sc-53m39a-5"
+})(["text-transform:initial;letter-spacing:2.1px;font-size:11px;white-space:nowrap;line-height:2.18;color:white;font-weight:400;flex:1 0 auto;margin-right:56px;padding:8px 0;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.2);outline:none;", " &::-webkit-input-placeholder{color:white;text-transform:uppercase;}&::-moz-placeholder{color:white;text-transform:uppercase;}&::placeholder{color:white;text-transform:uppercase;}"], _rwd.rwdMax.MLarge(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin-right: 0;\n    display: block;\n    width: 100%;\n    margin-bottom: 36px;\n  "]))));
+exports.SubscribeInput = SubscribeInput;
+var SubscribeInputError = _styledComponents.default.p.withConfig({
+  displayName: "Newsletterstyles__SubscribeInputError",
+  componentId: "sc-53m39a-6"
+})(["color:white;font-size:9px;font-weight:400;letter-spacing:1.8px;margin:9px 0;position:absolute;text-transform:uppercase;top:39px;"]);
+exports.SubscribeInputError = SubscribeInputError;
+var SubscribeSubmit = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "Newsletterstyles__SubscribeSubmit",
+  componentId: "sc-53m39a-7"
+})(["padding-left:40px;padding-right:40px;background:", ";font-size:11px;display:flex;justify-content:center;width:136px;", " &&&&{border-color:white;color:white;&:hover{background:", ";color:", ";}&:active,&:focus{background:", ";color:", ";}}", ""], sc.RED_BASE_HEX, _rwd.rwdMax.MLarge(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    margin: 0 auto 0;\n    display: block;\n    padding-left: 48px;\n    padding-right: 48px;\n    width: unset;\n  "]))), sc.WHITE_HEX, sc.RED_BASE_HEX, sc.RED_BASE_HEX, sc.WHITE_HEX, function (_ref7) {
+  var submitSuccess = _ref7.submitSuccess;
+  return submitSuccess && "\n      background: ".concat(sc.WHITE_HEX, " !important;\n      color: ").concat(sc.RED_BASE_HEX, " !important;\n      pointer-events: none;\n  ");
+});
+exports.SubscribeSubmit = SubscribeSubmit;
+var SubscribeForm = _styledComponents.default.form.withConfig({
+  displayName: "Newsletterstyles__SubscribeForm",
+  componentId: "sc-53m39a-8"
+})(["display:flex;", ""], _rwd.rwdMax.MLarge(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    display: block;\n  "]))));
+exports.SubscribeForm = SubscribeForm;