@stokr/components-library 1.0.8 → 1.1.0

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("../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,55 @@
+"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");
+var _global = _interopRequireDefault(require("../../styles/global"));
+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(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__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

package/dist/components/Footer/Footer.styles.js

@@ -0,0 +1,74 @@
+"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.StyledFooter = exports.PoweredWrap = exports.Powered = exports.PartnerWrap = exports.Partner = exports.FooterNav = exports.FooterInner = exports.CopyrightWrap = exports.Copyright = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _grid = _interopRequireDefault(require("../../styles/grid"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+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 StyledFooter = _styledComponents.default.footer.withConfig({
+  displayName: "Footerstyles__StyledFooter",
+  componentId: "sc-12rq6gz-0"
+})(["z-index:15;position:relative;", " ", " ", " @media screen and (max-width:991px){height:auto;}", " ", ""], function (props) {
+  return props.color === 'primary' && (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n\n      ", "\n    "])), _colors.default.white, _colors.default.blue, _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      box-shadow: inset 0 1px 0 0 ", ";\n    "])), _colors.default.blueDark));
+}, function (props) {
+  return props.color === 'red' && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n\n      ", "\n    "])), _colors.default.white, _colors.default.rustyRed, _rwd.default.Medium(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      box-shadow: inset 0 1px 0 0 ", ";\n      padding: 0 65px;\n    "])), _colors.default.rustyRed));
+}, _rwd.default.Medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 65px;\n  "]))), function (props) {
+  return props.hasSidebar && "\n padding: 0px !important;\n  transition: 0.3s padding;\n  ";
+}, function (props) {
+  return props.isSidebarExpanded && "\n    padding-left:200px !important;\n  ";
+});
+exports.StyledFooter = StyledFooter;
+var FooterInner = _styledComponents.default.div.withConfig({
+  displayName: "Footerstyles__FooterInner",
+  componentId: "sc-12rq6gz-1"
+})(["padding:24px 0;justify-content:space-between;", " ", " @media screen and (max-width:991px){flex-direction:column;padding:56px 65px;}"], function (props) {
+  return props.hasSidebar && "\n    padding: 24px ".concat((0, _grid.default)(1), ";\n  ");
+}, _rwd.default.Medium(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding: 20px 0;\n    display: flex;\n    align-items: center;\n    height: 100%;\n\n     ", "\n  "])), function (props) {
+  return props.hasSidebar && "\n      padding: 20px ".concat((0, _grid.default)(1), ";\n      ");
+}));
+exports.FooterInner = FooterInner;
+var CopyrightWrap = _styledComponents.default.div.withConfig({
+  displayName: "Footerstyles__CopyrightWrap",
+  componentId: "sc-12rq6gz-2"
+})(["text-align:center;", ""], _rwd.default.Medium(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    flex: 2;\n  "]))));
+exports.CopyrightWrap = CopyrightWrap;
+var PartnerWrap = _styledComponents.default.div.withConfig({
+  displayName: "Footerstyles__PartnerWrap",
+  componentId: "sc-12rq6gz-3"
+})(["text-align:center;", " @media screen and (max-width:991px){text-align:center;margin-bottom:25px;}"], _rwd.default.Medium(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    // flex: 2;\n    text-align: left;\n  "]))));
+exports.PartnerWrap = PartnerWrap;
+var PoweredWrap = _styledComponents.default.div.withConfig({
+  displayName: "Footerstyles__PoweredWrap",
+  componentId: "sc-12rq6gz-4"
+})(["margin-top:10px;text-align:center;text-transform:uppercase;letter-spacing:2.1px;line-height:1.8;font-weight:400;font-size:10px;", " @media screen and (max-width:991px){text-align:center;}"], _rwd.default.Medium(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    text-align: left;\n  "]))));
+exports.PoweredWrap = PoweredWrap;
+var FooterNav = _styledComponents.default.nav.withConfig({
+  displayName: "Footerstyles__FooterNav",
+  componentId: "sc-12rq6gz-5"
+})(["display:block;font-size:0;padding-top:6px;padding-bottom:30px;", " ul{display:block;margin:0;padding:0;margin-left:-32px;}li{display:inline-block;vertical-align:middle;margin-left:32px;}a{position:relative;display:block;font-size:12px;line-height:16px;letter-spacing:2px;text-transform:uppercase;padding:2px 0;&:before{content:'';display:block;height:2px;width:100%;position:absolute;top:100%;left:0;background-color:", ";opacity:0;transform:translateY(8px);transition:opacity 0.2s,transform 0.2s;}&:hover{&:before{opacity:1;transform:translateY(0);}}", "}"], _rwd.default.Medium(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding-top: 0;\n    padding-bottom: 0;\n  "]))), _colors.default.white, _rwd.default.Medium(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      font-size: 9px;\n      line-height: 16px;\n    "]))));
+exports.FooterNav = FooterNav;
+var Partner = _styledComponents.default.span.withConfig({
+  displayName: "Footerstyles__Partner",
+  componentId: "sc-12rq6gz-6"
+})(["text-transform:uppercase;font-size:10px;font-weight:400;line-height:1.8;letter-spacing:2.1px;img{margin-bottom:4px;}@media screen and (max-width:560px){line-height:20px;}"]);
+exports.Partner = Partner;
+var Copyright = _styledComponents.default.span.withConfig({
+  displayName: "Footerstyles__Copyright",
+  componentId: "sc-12rq6gz-7"
+})(["img{margin-bottom:4px;}"]);
+exports.Copyright = Copyright;
+var Powered = _styledComponents.default.div.withConfig({
+  displayName: "Footerstyles__Powered",
+  componentId: "sc-12rq6gz-8"
+})(["display:flex;flex-direction:column;align-items:self-start;span{vertical-align:middle;text-transform:uppercase;-webkit-letter-spacing:2.1px;-moz-letter-spacing:2.1px;-ms-letter-spacing:2.1px;letter-spacing:2.1px;line-height:10x;white-space:nowrap;color:inherit;}a{display:inline-block;vertical-align:middle;margin-left:4px;transition:opacity 0.2s;&:hover{opacity:0.5;}}img{position:relative;}@media screen and (max-width:991px){align-items:center;}"]);
+exports.Powered = Powered;

package/dist/components/Footer/FooterLayout.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.footerGroups = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _FooterMenu = _interopRequireDefault(require("./FooterMenu"));
+var _Newsletter = _interopRequireDefault(require("../Newsletter/Newsletter"));
+var _Footer = _interopRequireDefault(require("./Footer"));
+var _globalVariables = require("../../constants/globalVariables");
+var _excluded = ["withNewsLetter", "withFooterMenu", "color", "jobOpeningsNumber", "lemonWayLogo"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function FooterLayout(_ref) {
+  var _ref$withNewsLetter = _ref.withNewsLetter,
+    withNewsLetter = _ref$withNewsLetter === void 0 ? true : _ref$withNewsLetter,
+    _ref$withFooterMenu = _ref.withFooterMenu,
+    withFooterMenu = _ref$withFooterMenu === void 0 ? true : _ref$withFooterMenu,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'red' : _ref$color,
+    _ref$jobOpeningsNumbe = _ref.jobOpeningsNumber,
+    jobOpeningsNumber = _ref$jobOpeningsNumbe === void 0 ? 0 : _ref$jobOpeningsNumbe,
+    lemonWayLogo = _ref.lemonWayLogo,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, withFooterMenu && /*#__PURE__*/_react.default.createElement(_FooterMenu.default, {
+    groups: footerGroups,
+    jobOpeningsNumber: jobOpeningsNumber
+  }), withNewsLetter && /*#__PURE__*/_react.default.createElement(_Newsletter.default, null), /*#__PURE__*/_react.default.createElement(_Footer.default, _extends({
+    color: color,
+    lemonwayLogo: lemonWayLogo
+  }, props)));
+}
+FooterLayout.propTypes = {
+  withNewsLetter: _propTypes.default.bool,
+  withFooterMenu: _propTypes.default.bool,
+  color: _propTypes.default.oneOf(['primary', 'red']),
+  jobOpeningsNumber: _propTypes.default.number,
+  lemonwayLogo: _propTypes.default.string
+};
+var _default = FooterLayout;
+exports.default = _default;
+var footerGroups = [{
+  name: 'New to STOKR',
+  collapse: true,
+  items: [{
+    name: 'Products',
+    url: "".concat(_globalVariables.platformURL, "/products")
+  }, {
+    name: '101s',
+    url: "".concat(_globalVariables.platformURL, "/101")
+  }, {
+    name: 'Support',
+    url: 'https://stokr.zendesk.com/',
+    external: true
+  }, {
+    name: 'STOKE POST',
+    url: "".concat(_globalVariables.platformURL, "/stoke-post")
+  }]
+}, {
+  name: 'About us',
+  collapse: true,
+  items: [{
+    name: 'Team',
+    url: "".concat(_globalVariables.platformURL, "/team")
+  }, {
+    name: 'Careers',
+    url: "".concat(_globalVariables.platformURL, "/careers"),
+    showNumber: true
+  }, {
+    name: 'Memberships',
+    url: "".concat(_globalVariables.platformURL, "/memberships")
+  }, {
+    name: 'Press Releases',
+    url: "".concat(_globalVariables.platformURL, "/press-releases")
+  }]
+}, {
+  name: 'General',
+  collapse: true,
+  items: [{
+    name: 'Legal',
+    url: "".concat(_globalVariables.platformURL, "/legal")
+  }, {
+    name: 'Privacy Terms',
+    url: "".concat(_globalVariables.platformURL, "/privacy")
+  }, {
+    name: 'Cookie policy',
+    url: "".concat(_globalVariables.platformURL, "/cookie-policy")
+  }, {
+    name: 'AFFILIATE PROGRAM',
+    url: 'https://stokr.tapfiliate.com',
+    external: true
+  }]
+}, {
+  name: 'Let’s connect',
+  social: true,
+  items: [{
+    name: 'linkedin',
+    url: 'https://www.linkedin.com/company/stokr/'
+  }, {
+    name: 'twitter',
+    url: 'https://twitter.com/stokr_io'
+  }, {
+    name: 'telegram',
+    url: 'https://t.me/joinchat/G2o5yBCe7FiYvv1YiZhNZg'
+  },
+  // {
+  //   name: 'medium',
+  //   url: 'https://medium.com/sicos-publication',
+  // },
+  {
+    name: 'youtube',
+    url: 'https://www.youtube.com/channel/UCUuQtRhbcFcU4xeTrDl3iQQ'
+  }]
+}];
+exports.footerGroups = footerGroups;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FooterLayoutfirst = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FooterLayout = _interopRequireDefault(require("./FooterLayout"));
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Footer',
+  component: _FooterLayout.default,
+  argTypes: {
+    // color: {
+    //   options: ['primary', 'red'],
+    //   control: { type: '' },
+    // },
+  }
+};
+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(_FooterLayout.default, args));
+};
+var FooterLayoutfirst = Template.bind({});
+exports.FooterLayoutfirst = FooterLayoutfirst;
+FooterLayoutfirst.args = {};
+
+// export const FooterRed = Template.bind({})
+// FooterRed.args = {
+//   color: 'red',
+// }

package/dist/components/Footer/FooterMenu.js

@@ -0,0 +1,117 @@
+"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.socialSvg = exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactCollapse = require("react-collapse");
+var _SvgIcons = require("../SvgIcons");
+var _FooterMenu = require("./FooterMenu.styles");
+var _customHooks = require("../../utils/customHooks");
+var _rwd = require("../../styles/rwd");
+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 _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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var CollapseWrapper = function CollapseWrapper(_ref) {
+  var children = _ref.children,
+    collapse = _ref.collapse,
+    isOpened = _ref.isOpened;
+  return collapse ? /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
+    isOpened: isOpened
+  }, children) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children);
+};
+CollapseWrapper.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  collapse: _propTypes.default.bool,
+  isOpened: _propTypes.default.bool
+};
+CollapseWrapper.defaultProps = {
+  collapse: false,
+  isOpened: false
+};
+var socialSvg = {
+  linkedin: /*#__PURE__*/_react.default.createElement(_SvgIcons.SocialLinkedIn, null),
+  instagram: /*#__PURE__*/_react.default.createElement(_SvgIcons.SocialInstagram, null),
+  twitter: /*#__PURE__*/_react.default.createElement(_SvgIcons.SocialTwitter, null),
+  facebook: /*#__PURE__*/_react.default.createElement(_SvgIcons.SocialFacebook, null),
+  telegram: /*#__PURE__*/_react.default.createElement(_SvgIcons.SocialTelegram, null),
+  //medium: <SocialMedium />,
+  youtube: /*#__PURE__*/_react.default.createElement(_SvgIcons.SocialYoutube, null),
+  reddit: /*#__PURE__*/_react.default.createElement(_SvgIcons.SocialReddit, null)
+};
+exports.socialSvg = socialSvg;
+var FooterMenu = function FooterMenu(_ref2) {
+  var groups = _ref2.groups,
+    _ref2$jobOpeningsNumb = _ref2.jobOpeningsNumber,
+    jobOpeningsNumber = _ref2$jobOpeningsNumb === void 0 ? 0 : _ref2$jobOpeningsNumb;
+  var _React$useState = _react.default.useState(groups.map(function () {
+      return true;
+    })),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    activeGroups = _React$useState2[0],
+    setactiveGroups = _React$useState2[1];
+  var isMobile = (0, _customHooks.useMobileView)(_rwd.sizes.MLarge);
+  var toggleGroup = function toggleGroup(key) {
+    var activeGroupsCopy = _toConsumableArray(activeGroups);
+    activeGroupsCopy[key] = !activeGroupsCopy[key];
+    setactiveGroups(activeGroupsCopy);
+  };
+  return /*#__PURE__*/_react.default.createElement(_FooterMenu.Container, null, /*#__PURE__*/_react.default.createElement(_FooterMenu.Groups, null, groups.map(function (group, groupKey) {
+    return /*#__PURE__*/_react.default.createElement(_FooterMenu.Group, {
+      key: group.name,
+      onClick: function onClick() {
+        return toggleGroup(groupKey);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_FooterMenu.TitleContainer, null, /*#__PURE__*/_react.default.createElement(_FooterMenu.Title, {
+      collapse: group.collapse
+    }, group.name), isMobile && !group.social && /*#__PURE__*/_react.default.createElement(_FooterMenu.ArrowDown, {
+      isOpened: activeGroups[groupKey]
+    })), /*#__PURE__*/_react.default.createElement(CollapseWrapper, {
+      collapse: isMobile && group.collapse,
+      isOpened: activeGroups[groupKey]
+    }, /*#__PURE__*/_react.default.createElement(_FooterMenu.Items, {
+      social: group.social
+    }, group.social ? group.items.map(function (item) {
+      return /*#__PURE__*/_react.default.createElement(_FooterMenu.Item, {
+        key: item.name,
+        social: true
+      }, /*#__PURE__*/_react.default.createElement(_FooterMenu.SocialLink, {
+        href: item.url,
+        icon: item.name,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, socialSvg[item.name]));
+    }) : group.items.map(function (item) {
+      return /*#__PURE__*/_react.default.createElement(_FooterMenu.Item, {
+        key: item.name
+      }, /*#__PURE__*/_react.default.createElement(_FooterMenu.Link, {
+        target: item.external ? '_blank' : '',
+        href: item.url,
+        rel: "noopener noreferrer"
+      }, item.name), item.showNumber && jobOpeningsNumber > 0 && /*#__PURE__*/_react.default.createElement(_FooterMenu.HiringTotalNumber, {
+        style: {
+          marginLeft: '4px'
+        }
+      }, jobOpeningsNumber));
+    }))));
+  })));
+};
+FooterMenu.propTypes = {
+  groups: _propTypes.default.arrayOf(Object).isRequired,
+  jobOpeningsNumber: _propTypes.default.number
+};
+var _default = FooterMenu;
+exports.default = _default;

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

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FooterMenu1 = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FooterMenu = _interopRequireDefault(require("./FooterMenu"));
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Footer',
+  component: _FooterMenu.default,
+  argTypes: {
+    // color: {
+    //   options: ['primary', 'red'],
+    //   control: { type: '' },
+    // },
+    groups: {
+      type: 'array',
+      defaultValue: []
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_FooterMenu.default, args));
+};
+var FooterMenu1 = Template.bind({});
+exports.FooterMenu1 = FooterMenu1;
+FooterMenu1.args = {
+  groups: [{
+    name: 'New to STOKR',
+    collapse: true,
+    items: [{
+      name: 'Products',
+      url: 'https://stokr.info/products'
+    }, {
+      name: '101s',
+      url: 'https://stokr.info/101'
+    },
+    /* {
+              name: 'Subscribe',
+              url: 'https://stokr.info/subscribe',
+            }, */
+    {
+      name: 'Support',
+      url: 'https://stokr.zendesk.com/',
+      external: true
+    }, {
+      name: 'STOKE POST',
+      url: 'https://stokr.info/stoke-post'
+    }]
+  }, {
+    name: 'About us',
+    collapse: true,
+    items: [{
+      name: 'Team',
+      url: 'https://stokr.info/team'
+    }, {
+      name: 'Careers',
+      url: 'https://stokr.info/careers',
+      showNumber: true
+    }, {
+      name: 'Memberships',
+      url: 'https://stokr.info/memberships'
+    }, {
+      name: 'Press Releases',
+      url: 'https://stokr.info/press-releases'
+    }]
+  }, {
+    name: 'General',
+    collapse: true,
+    items: [{
+      name: 'Legal',
+      url: 'https://stokr.info/legal'
+    }, {
+      name: 'Privacy Terms',
+      url: 'https://stokr.info/privacy'
+    }, {
+      name: 'Cookie policy',
+      url: 'https://stokr.info/cookie-policy'
+    }, {
+      name: 'AFFILIATE PROGRAM',
+      url: 'https://stokr.tapfiliate.com',
+      external: true
+    }]
+  }, {
+    name: 'Let’s connect',
+    social: true,
+    items: [{
+      name: 'linkedin',
+      url: 'https://www.linkedin.com/company/stokr/'
+    }, {
+      name: 'instagram',
+      url: 'https://www.instagram.com/stokr_media'
+    }, {
+      name: 'twitter',
+      url: 'https://twitter.com/stokr_io'
+    }, {
+      name: 'facebook',
+      url: 'https://web.facebook.com/STOKR-696540447399052/'
+    }, {
+      name: 'telegram',
+      url: 'https://t.me/joinchat/G2o5yBCe7FiYvv1YiZhNZg'
+    },
+    // {
+    //   name: 'medium',
+    //   url: 'https://medium.com/sicos-publication',
+    // },
+    {
+      name: 'youtube',
+      url: 'https://www.youtube.com/channel/UCUuQtRhbcFcU4xeTrDl3iQQ'
+    }]
+  }]
+};
+
+// export const footerprimary = () => <Footer color="primary"></Footer>
+// export const footerred = () => <Footer color="red"></Footer>
+
+//doublecheck:
+// padding missing for primary in Footer.styles