@stokr/components-library 1.0.9 → 1.1.1

package/dist/components/LearnMorePage/LearnMoreItem.js

@@ -0,0 +1,75 @@
+"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.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Background = _interopRequireDefault(require("../Background/Background"));
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var _LearnMore = require("./LearnMore");
+var _LearnMoreItem = require("./LearnMoreItem.styles");
+var _LearnMoreShared = require("./LearnMore.shared.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var LearnMoreItem = function LearnMoreItem(_ref) {
+  var postItem = _ref.postItem,
+    activeTabObject = _ref.activeTabObject,
+    onMarkComplete = _ref.onMarkComplete;
+  return /*#__PURE__*/_react.default.createElement(_LearnMoreItem.ArticleWrapper, {
+    postType: postItem.postType
+  }, postItem.postType === 'video' && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.VideoCover, null, /*#__PURE__*/_react.default.createElement(_Background.default, {
+    src: postItem.cover
+  }, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.VideoPlay, null, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.VideoPlayIcon, null)))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingRight: true,
+    noPaddingBottom: true
+  }, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.VideoTitleRow, null, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.TitleText, {
+    postType: postItem.postType
+  }, /*#__PURE__*/_react.default.createElement("h3", null, postItem.title)), /*#__PURE__*/_react.default.createElement(_LearnMoreItem.CompleteWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    primary: !activeTabObject.complete,
+    secondary: activeTabObject.complete,
+    onClick: function onClick() {
+      return onMarkComplete(activeTabObject.id);
+    }
+  }, activeTabObject.complete ? 'Watched' : 'Mark as watched'), /*#__PURE__*/_react.default.createElement(_LearnMoreShared.CompleteMarkContainer, {
+    large: true,
+    inProgress: activeTabObject.inProgress,
+    complete: activeTabObject.complete
+  }, /*#__PURE__*/_react.default.createElement(_LearnMoreShared.CompleteMark, null))))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.ContentText, {
+    dangerouslySetInnerHTML: {
+      __html: postItem.content
+    }
+  }))), postItem.postType === 'text' && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingRight: true,
+    noPaddingBottom: true
+  }, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.TitleText, {
+    postType: postItem.postType
+  }, /*#__PURE__*/_react.default.createElement("h3", null, postItem.title))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.ContentText, {
+    dangerouslySetInnerHTML: {
+      __html: postItem.content
+    }
+  })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.CompleteWrapper, {
+    center: true
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    primary: !activeTabObject.complete,
+    secondary: activeTabObject.complete,
+    onClick: function onClick() {
+      return onMarkComplete(activeTabObject.id);
+    }
+  }, activeTabObject.complete ? 'Already Read' : 'Mark as read'), /*#__PURE__*/_react.default.createElement(_LearnMoreShared.CompleteMarkContainer, {
+    large: true,
+    inProgress: activeTabObject.inProgress,
+    complete: activeTabObject.complete
+  }, /*#__PURE__*/_react.default.createElement(_LearnMoreShared.CompleteMark, null))))));
+};
+LearnMoreItem.propTypes = {
+  postItem: _propTypes.default.shape(_LearnMore.learnMorePostPropTypes).isRequired,
+  activeTabObject: _propTypes.default.shape(_LearnMore.learnMoreCategoryPropTypes).isRequired,
+  onMarkComplete: _propTypes.default.func.isRequired
+};
+var _default = LearnMoreItem;
+exports.default = _default;

package/dist/components/LearnMorePage/LearnMoreItem.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LearnMoreItemFromPage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactTippy = require("react-tippy");
+var _LearnMoreItem = _interopRequireDefault(require("./LearnMoreItem"));
+var _global = _interopRequireDefault(require("styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/LearnMorePage/LearnMoreItem',
+  component: _LearnMoreItem.default,
+  argTypes: {
+    postItem: {
+      type: 'shape',
+      defaultValue: [],
+      required: true
+    },
+    activeTabObject: {
+      type: 'shape',
+      defaultValue: [],
+      required: true
+    },
+    onMarkComplete: {
+      type: 'function',
+      action: 'onMarkComplete'
+    }
+  }
+};
+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(_LearnMoreItem.default, args));
+};
+var LearnMoreItemFromPage = Template.bind({});
+exports.LearnMoreItemFromPage = LearnMoreItemFromPage;
+LearnMoreItemFromPage.args = {
+  postItem: [{
+    id: 'ID'
+  }, {
+    title: 'A Title'
+  }, {
+    excerpt: 'excerpt'
+  }, {
+    content: 'content'
+  }, {
+    postType: 'video or text'
+  }, {
+    cover: 'https://www.videoconverterfactory.com/glossary/imgs/video.jpg'
+  }, {
+    videoSrc: 'source'
+  }],
+  activeTabObject: [{
+    title: 'A Title'
+  }, {
+    inProgress: true
+  }, {
+    complete: 'content'
+  }, {
+    tooltip: /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, null)
+  }]
+};
+
+//doublecheck:
+// invisible SB

package/dist/components/LearnMorePage/LearnMoreItem.styles.js

@@ -0,0 +1,87 @@
+"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.VideoTitleRow = exports.VideoPlayIcon = exports.VideoPlay = exports.VideoCover = exports.TitleText = exports.ContentText = exports.CompleteWrapper = exports.ArticleWrapper = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Text = _interopRequireDefault(require("../Text/Text.styles"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var _Background = require("../Background/Background.styles");
+var _LearnMoreShared = require("./LearnMore.shared.styles");
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+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 ArticleWrapper = _styledComponents.default.div.withConfig({
+  displayName: "LearnMoreItemstyles__ArticleWrapper",
+  componentId: "sc-j18ifc-0"
+})(["padding:32px;position:relative;", " ", " ", " &::before{content:'';position:absolute;width:1px;background:", ";", " ", "}"], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 64px;\n  "]))), _rwd.default.XLarge(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: 128px;\n  "]))), function (props) {
+  return props.postType === 'text' && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      padding-right: 64px;\n\n      ", "\n\n      ", "\n    "])), _rwd.default.Large(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding-right: 128px;\n    "]))), _rwd.default.XLarge(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      padding-right: 224px;\n    "]))));
+}, function (props) {
+  return _theme.default.cGrey;
+}, function (props) {
+  return props.postType === 'video' && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      top: 32px;\n      left: 48px;\n      bottom: 0;\n\n      ", "\n\n      ", "\n\n      ", "\n    "])), _rwd.default.Medium(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        top: 64px;\n        left: 64px;\n      "]))), _rwd.default.Large(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        left: 96px;\n      "]))), _rwd.default.XLarge(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        top: 128px;\n        left: 160px;\n      "]))));
+}, function (props) {
+  return props.postType === 'text' && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      top: 0;\n      right: 48px;\n      bottom: 0;\n\n      ", "\n\n      ", "\n\n      ", "\n    "])), _rwd.default.Medium(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        right: 32px;\n      "]))), _rwd.default.Large(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        right: 96px;\n      "]))), _rwd.default.XLarge(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        right: 192px;\n      "]))));
+});
+exports.ArticleWrapper = ArticleWrapper;
+var VideoTitleRow = _styledComponents.default.div.withConfig({
+  displayName: "LearnMoreItemstyles__VideoTitleRow",
+  componentId: "sc-j18ifc-1"
+})(["display:flex;flex-direction:column;", ""], _rwd.default.XLarge(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    align-items: center;\n    flex-direction: row;\n  "]))));
+exports.VideoTitleRow = VideoTitleRow;
+var VideoCover = _styledComponents.default.div.withConfig({
+  displayName: "LearnMoreItemstyles__VideoCover",
+  componentId: "sc-j18ifc-2"
+})(["width:100%;", "{width:100%;padding-top:56.25%;}", "{position:absolute;top:50%;left:50%;width:auto;transform:translateY(-50%) translateX(-50%);}"], _Background.Container, _Background.Content);
+exports.VideoCover = VideoCover;
+var VideoPlay = _styledComponents.default.div.withConfig({
+  displayName: "LearnMoreItemstyles__VideoPlay",
+  componentId: "sc-j18ifc-3"
+})(["width:48px;height:48px;color:", ";background:", ";border-radius:50%;display:flex;align-items:center;justify-content:center;transition:0.3s background;&:hover{color:", ";background:", ";}"], function (props) {
+  return _theme.default.cWhite;
+}, function (props) {
+  return _theme.default.cWarning;
+}, function (props) {
+  return _theme.default.cWhite;
+}, function (props) {
+  return _theme.default.cWarningDark;
+});
+exports.VideoPlay = VideoPlay;
+var VideoPlayIcon = _styledComponents.default.i.attrs({
+  className: 'ion ion-md-play'
+}).withConfig({
+  displayName: "LearnMoreItemstyles__VideoPlayIcon",
+  componentId: "sc-j18ifc-4"
+})(["font-size:16px;"]);
+exports.VideoPlayIcon = VideoPlayIcon;
+var TitleText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "LearnMoreItemstyles__TitleText",
+  componentId: "sc-j18ifc-5"
+})(["position:relative;&::before{content:'';position:absolute;width:6px;background:", ";top:0;bottom:0;", " ", "}"], function (props) {
+  return _theme.default.cPrimary;
+}, function (props) {
+  return props.postType === 'video' && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        transform: translateX(1px);\n        left: -16px;\n\n        ", "\n      "])), _rwd.default.Medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        left: -32px;\n      "]))));
+}, function (props) {
+  return props.postType === 'text' && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n        transform: translateX(-1px);\n        right: -16px;\n\n        ", "\n      "])), _rwd.default.Medium(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        right: -32px;\n      "]))));
+});
+exports.TitleText = TitleText;
+var CompleteWrapper = _styledComponents.default.div.withConfig({
+  displayName: "LearnMoreItemstyles__CompleteWrapper",
+  componentId: "sc-j18ifc-6"
+})(["display:flex;flex-shrink:0;margin-left:auto;margin-top:24px;", " ", " ", "{flex-shrink:0;margin-left:16px;}", "{flex-shrink:0;}"], function (props) {
+  return props.center && "\n    justify-content: center;\n  ";
+}, _rwd.default.XLarge(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    margin-top: 0;\n  "]))), _LearnMoreShared.CompleteMarkContainer, _Button.default);
+exports.CompleteWrapper = CompleteWrapper;
+var ContentText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "LearnMoreItemstyles__ContentText",
+  componentId: "sc-j18ifc-7"
+})(["display:flex;flex-direction:column;h5{font-size:16px;letter-spacing:0.4px;font-weight:600;margin-bottom:16px;}img{max-width:100%;margin:32px auto;}ul{list-style:none;padding:0;margin:0;}li{font-family:'Open Sans';font-weight:300;font-size:16px;line-height:1.5em;letter-spacing:0.6px;padding-left:12px;position:relative;", " &::before{position:absolute;left:0;content:'\u2022';color:", ";}}"], _rwd.default.XLarge(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      font-size: 20px;\n    "]))), function (props) {
+  return _theme.default.cWarning;
+});
+exports.ContentText = ContentText;

package/dist/components/LearnMoreSection/LearnMore.js

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LearnMoreSection = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactCollapse = require("react-collapse");
+var _TabsNav = _interopRequireDefault(require("../TabsNav/TabsNav"));
+var _Grid = require("../Grid/Grid.styles");
+var _Tabs = _interopRequireWildcard(require("../Tabs/Tabs"));
+var _Text = _interopRequireDefault(require("../Text/Text.styles"));
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _LearnMoreCarousel = _interopRequireDefault(require("../LearnMoreCarousel/LearnMoreCarousel"));
+var _LearnMoreCarousel2 = require("../LearnMoreCarousel/LearnMoreCarousel.styles");
+var _rwd = require("../../styles/rwd");
+var _LearnMore = require("../LearnMorePage/LearnMore");
+var _LearnMore2 = require("./LearnMore.styles");
+var _LearnMoreItem = _interopRequireDefault(require("./LearnMoreItem"));
+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 _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 LearnMoreSection = /*#__PURE__*/function (_PureComponent) {
+  _inherits(LearnMoreSection, _PureComponent);
+  var _super = _createSuper(LearnMoreSection);
+  function LearnMoreSection() {
+    var _this;
+    _classCallCheck(this, LearnMoreSection);
+    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", {
+      activeTab: 0,
+      isMobile: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "onTabChange", function (tabId) {
+      _this.setState({
+        activeTab: tabId
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onResize", function () {
+      clearTimeout(_this.timeout);
+      _this.timeout = setTimeout(_this.onResizeTimeout, 200);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onResizeTimeout", function () {
+      _this.setState({
+        isMobile: _this.checkIsMobile()
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "checkIsMobile", function () {
+      return !window.matchMedia((0, _rwd.getMedia)('Medium')).matches;
+    });
+    _defineProperty(_assertThisInitialized(_this), "getItemsForSubcategories", function (subcategories) {
+      var items = _this.props.items;
+      return subcategories.map(function (subcategory) {
+        return items.find(function (item) {
+          return item.id === subcategory.id;
+        });
+      });
+    });
+    return _this;
+  }
+  _createClass(LearnMoreSection, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var categories = this.props.categories;
+      if (categories[0]) {
+        this.onTabChange(categories[0].id);
+      }
+      window.addEventListener('resize', this.onResize);
+      this.onResizeTimeout();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.onResize);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var categories = this.props.categories;
+      var _this$state = this.state,
+        activeTab = _this$state.activeTab,
+        isMobile = _this$state.isMobile;
+      return isMobile ? /*#__PURE__*/_react.default.createElement(_LearnMore2.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, null, /*#__PURE__*/_react.default.createElement(_LearnMore2.TitleContainer, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement(_LearnMore2.SidebarSubHeading, null, "INVESTMENT OPPORTUNITIES"), /*#__PURE__*/_react.default.createElement("h3", null, "DISCOVER INVESTMENTS"))), categories.map(function (category) {
+        var items = _this2.getItemsForSubcategories(category.subcategories);
+        return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+          noPadding: true,
+          borderTop: true,
+          key: category.id
+        }, /*#__PURE__*/_react.default.createElement(_LearnMore2.TabTitle, {
+          onClick: function onClick() {
+            return _this2.onTabChange(category.id);
+          }
+        }, category.title, /*#__PURE__*/_react.default.createElement(_LearnMore2.Arrow, {
+          isOpened: activeTab === category.id
+        })), /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
+          isOpened: activeTab === category.id
+        }, /*#__PURE__*/_react.default.createElement(_LearnMoreCarousel.default, {
+          dots: true,
+          isMobile: true
+        }, items.map(function (item) {
+          return /*#__PURE__*/_react.default.createElement(_LearnMoreCarousel2.LearnMoreSlide, {
+            key: item.id
+          }, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.default, {
+            key: item.id,
+            title: item.title,
+            content: item.excerpt,
+            coverSrc: item.cover,
+            postType: item.postType,
+            link: item.url,
+            videoSrc: item.videoSrc,
+            category: item.category
+          }));
+        }))));
+      })))) : /*#__PURE__*/_react.default.createElement(_LearnMore2.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 5,
+        style: {
+          height: 'auto'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_LearnMore2.TitleContainer, {
+        borderRight: true,
+        borderBottom: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+        responsiveFont: true
+      }, /*#__PURE__*/_react.default.createElement(_LearnMore2.SidebarSubHeading, null, "INVESTMENT OPPORTUNITIES"), /*#__PURE__*/_react.default.createElement("h3", null, "DISCOVER INVESTMENTS"))), /*#__PURE__*/_react.default.createElement(_TabsNav.default, {
+        activeTab: activeTab
+      }, categories.map(function (category) {
+        return /*#__PURE__*/_react.default.createElement(_LearnMore2.TabNav, {
+          key: category.id,
+          borderBottom: true,
+          borderRight: true,
+          tabId: category.id,
+          isActive: activeTab === category.id,
+          onClick: function onClick() {
+            return _this2.onTabChange(category.id);
+          }
+        }, /*#__PURE__*/_react.default.createElement(_LearnMore2.TabArrow, null), category.title);
+      })), /*#__PURE__*/_react.default.createElement(_LearnMore2.TitleContainer, {
+        borderRight: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 11
+      }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+        activeTab: activeTab
+      }, categories.map(function (category) {
+        var items = _this2.getItemsForSubcategories(category.subcategories);
+        return /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+          tabId: category.id,
+          key: category.id
+        }, /*#__PURE__*/_react.default.createElement(_LearnMoreCarousel.default, {
+          arrows: true,
+          dots: true
+        }, items.map(function (item) {
+          return /*#__PURE__*/_react.default.createElement(_LearnMoreCarousel2.LearnMoreSlide, {
+            key: item.id
+          }, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.default, {
+            key: item.id,
+            title: item.title,
+            content: item.excerpt,
+            coverSrc: item.cover,
+            postType: item.postType,
+            link: item.url,
+            videoSrc: item.videoSrc,
+            category: item.category
+          }));
+        }), /*#__PURE__*/_react.default.createElement(_LearnMoreCarousel2.LearnMoreSlide, null)));
+      })))));
+    }
+  }]);
+  return LearnMoreSection;
+}(_react.PureComponent);
+exports.LearnMoreSection = LearnMoreSection;
+LearnMoreSection.propTypes = {
+  items: _propTypes.default.arrayOf(_propTypes.default.shape(_LearnMore.learnMorePostPropTypes)).isRequired,
+  categories: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _LearnMore.learnMoreCategoryPropTypes), {}, {
+    subcategories: _propTypes.default.arrayOf(_propTypes.default.shape(_LearnMore.learnMoreCategoryPropTypes))
+  }))).isRequired
+};
+var _default = LearnMoreSection;
+exports.default = _default;

package/dist/components/LearnMoreSection/LearnMore.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LearnMoreDefault = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LearnMore = require("./LearnMore");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles'
+var _default = {
+  title: 'Components Library/LearnMoreSection/LearnMore',
+  component: _LearnMore.LearnMore,
+  argTypes: {
+    items: {
+      type: 'array of shape',
+      defaultValue: [],
+      required: true
+    },
+    categories: {
+      type: 'array of shape',
+      defaultValue: [],
+      required: true
+    }
+  }
+};
+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(_LearnMore.LearnMore, args));
+};
+var LearnMoreDefault = Template.bind({});
+exports.LearnMoreDefault = LearnMoreDefault;
+LearnMoreDefault.args = {};

package/dist/components/LearnMoreSection/LearnMore.styles.js

@@ -0,0 +1,73 @@
+"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.TitleContainer = exports.TabTitle = exports.TabNav = exports.TabArrow = exports.SliderWrapper = exports.SidebarSubHeading = exports.Container = exports.Arrow = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _TabsNav = require("../TabsNav/TabsNav.styles");
+var _templateObject;
+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 Container = _styledComponents.default.div.withConfig({
+  displayName: "LearnMorestyles__Container",
+  componentId: "sc-aj1pda-0"
+})(["width:100%;overflow:hidden;", "{padding:0 !important;}", "{border-bottom:none;}"], _TabsNav.TabsWrapper, _TabsNav.StyledTabs);
+exports.Container = Container;
+var TabNav = (0, _styledComponents.default)(_ComponentWrapper.default).withConfig({
+  displayName: "LearnMorestyles__TabNav",
+  componentId: "sc-aj1pda-1"
+})(["font-size:11px;font-weight:700;text-transform:uppercase;cursor:pointer;height:104px;letter-spacing:0.6px;line-height:1.5;padding:44px 64px !important;", ""], function (props) {
+  return props.isActive && (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      border-right: none !important;\n\n      &::before {\n        content: '';\n        width: 8px;\n        position: absolute;\n        left: 0;\n        top: 0;\n        bottom: 0;\n        background: ", ";\n      }\n    "])), props.theme.cWarning);
+});
+exports.TabNav = TabNav;
+var TabArrow = _styledComponents.default.i.attrs({
+  className: 'ion ion-ios-arrow-forward'
+}).withConfig({
+  displayName: "LearnMorestyles__TabArrow",
+  componentId: "sc-aj1pda-2"
+})(["color:", ";margin-right:15px;"], function (props) {
+  return props.theme.cWarning;
+});
+exports.TabArrow = TabArrow;
+var SliderWrapper = _styledComponents.default.div.withConfig({
+  displayName: "LearnMorestyles__SliderWrapper",
+  componentId: "sc-aj1pda-3"
+})(["width:100%;.slick-arrow{width:64px;height:48px;background:", ";z-index:10;transition:0.3s ease background;&:hover,&:focus{background:", ";&::before{color:", " !important;}}}.slick-arrow.slick-prev{top:auto;left:auto;bottom:0;right:64px;transform:translate(0);}.slick-arrow.slick-next{top:auto;left:auto;bottom:0;right:0;transform:translate(0);border-left:1px solid ", ";}.slick-dots{width:auto;right:164px;height:36px;bottom:0;}"], function (props) {
+  return props.theme.cWarning;
+}, function (props) {
+  return props.theme.cWarningDark;
+}, function (props) {
+  return props.theme.cWhite;
+}, function (props) {
+  return props.theme.cWarningDark;
+});
+exports.SliderWrapper = SliderWrapper;
+var TitleContainer = (0, _styledComponents.default)(_ComponentWrapper.default).withConfig({
+  displayName: "LearnMorestyles__TitleContainer",
+  componentId: "sc-aj1pda-4"
+})(["height:100%;display:flex;align-items:center;flex-grow:1;"]);
+exports.TitleContainer = TitleContainer;
+var TabTitle = _styledComponents.default.div.withConfig({
+  displayName: "LearnMorestyles__TabTitle",
+  componentId: "sc-aj1pda-5"
+})(["padding:42px 36px;display:flex;justify-content:space-between;font-weight:700;text-transform:uppercase;position:relative;font-size:11px;line-height:20px;letter-spacing:0.6px;"]);
+exports.TabTitle = TabTitle;
+var Arrow = _styledComponents.default.i.attrs({
+  className: 'ion ion-ios-arrow-down'
+}).withConfig({
+  displayName: "LearnMorestyles__Arrow",
+  componentId: "sc-aj1pda-6"
+})(["&&&{position:absolute;top:50%;right:32px;transition:0.3s transform;transform:rotate(0);text-align:center;font-size:16px;line-height:16px;height:16px;margin-top:-8px;", "}"], function (props) {
+  return props.isOpened && "\n      transform: rotate(180deg);\n    ";
+});
+exports.Arrow = Arrow;
+var SidebarSubHeading = _styledComponents.default.div.withConfig({
+  displayName: "LearnMorestyles__SidebarSubHeading",
+  componentId: "sc-aj1pda-7"
+})(["font-size:11px;line-height:24px;letter-spacing:2.1px;text-transform:uppercase;margin-bottom:20px;"]);
+exports.SidebarSubHeading = SidebarSubHeading;

package/dist/components/LearnMoreSection/LearnMoreItem.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LearnMoreItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactRouterDom = require("react-router-dom");
+var _Background = _interopRequireDefault(require("../Background/Background"));
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var _LearnMoreItem = require("./LearnMoreItem.styles");
+var _LearnMore = require("./LearnMore.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var LearnMoreItem = function LearnMoreItem(_ref) {
+  var title = _ref.title,
+    content = _ref.content,
+    link = _ref.link,
+    coverSrc = _ref.coverSrc,
+    postType = _ref.postType,
+    videoSrc = _ref.videoSrc,
+    category = _ref.category;
+  var navigate = (0, _reactRouterDom.useNavigate)();
+  return /*#__PURE__*/_react.default.createElement(_LearnMoreItem.Container, null, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.Cover, null, /*#__PURE__*/_react.default.createElement(_Background.default, {
+    src: coverSrc,
+    investmentOpportunities: true
+  })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true,
+    noPaddingBottom: true
+  }, /*#__PURE__*/_react.default.createElement(_LearnMore.SidebarSubHeading, null, category), /*#__PURE__*/_react.default.createElement(_LearnMoreItem.Title, null, title)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true,
+    noPaddingBottom: true
+  }, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.Content, null, content)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true,
+    noPaddingBottom: true
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: function onClick() {
+      return navigate(link);
+    }
+  }, title === 'ARTID' || title === 'INFINITE-FLEET' || title === 'BLOCKSTREAM MINING' || title === 'MAZZANTI AUTOMOBILI' ? 'FULL DETAILS' : "I'M INTERESTED")));
+};
+exports.LearnMoreItem = LearnMoreItem;
+LearnMoreItem.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  content: _propTypes.default.string.isRequired,
+  link: _propTypes.default.string.isRequired,
+  coverSrc: _propTypes.default.string.isRequired,
+  postType: _propTypes.default.string.isRequired
+};
+var _default = LearnMoreItem;
+exports.default = _default;