@stokr/components-library 0.6.7 → 0.6.9

package/dist/components/AnalyticGraphs/Analytic.styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChartContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var colorTheme = function colorTheme(props) {
+  return {
+    blue: {
+      primary: _theme.default.cPrimary,
+      dark: _theme.default.cPrimaryDark
+    },
+    red: {
+      primary: _theme.default.cWarning,
+      dark: _theme.default.cWarningDark
+    }
+  };
+};
+var ChartContainer = (0, _styledComponents.default)(_ComponentWrapper.default).withConfig({
+  displayName: "Analyticstyles__ChartContainer",
+  componentId: "sc-wgv3ti-0"
+})([".slick-arrow{width:64px;height:48px;background:", ";z-index:10;transition:0.3s ease background;margin-top:10px;&:hover,&:focus{background:", ";&::before{color:", " !important;}}}.slick-arrow.slick-prev{top:auto;left:auto;bottom:0;right:64px;transform:translateY(100%);}.slick-arrow.slick-next{top:auto;left:auto;bottom:0;right:0;transform:translateY(100%);border-left:1px solid ", ";}"], function (props) {
+  return colorTheme(props)[props.colorTheme].primary;
+}, function (props) {
+  return colorTheme(props)[props.colorTheme].dark;
+}, function (props) {
+  return _theme.default.cWhite;
+}, function (props) {
+  return colorTheme(props)[props.colorTheme].dark;
+});
+exports.ChartContainer = ChartContainer;
+var _default = ChartContainer;
+exports.default = _default;

package/dist/components/BackButton/BackButton.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BackButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _BackButton = require("./BackButton.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var BackButton = function BackButton(_ref) {
+  var children = _ref.children,
+    to = _ref.to,
+    href = _ref.href;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, href ? /*#__PURE__*/_react.default.createElement(_BackButton.StyledBackButtonExternal, {
+    href: href
+  }, /*#__PURE__*/_react.default.createElement(_BackButton.BackButtonIcon, null), children) : to ? /*#__PURE__*/_react.default.createElement(_BackButton.StyledBackButton, {
+    to: to
+  }, /*#__PURE__*/_react.default.createElement(_BackButton.BackButtonIcon, null), children) : /*#__PURE__*/_react.default.createElement(_BackButton.StyledWindowBackButton, {
+    onClick: function onClick() {
+      return window.history.back();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_BackButton.BackButtonIcon, null), children));
+};
+exports.BackButton = BackButton;
+BackButton.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  to: _propTypes.default.string,
+  href: _propTypes.default.string
+};
+var _default = BackButton;
+exports.default = _default;

package/dist/components/BackButton/BackButton.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BackButtonDefault = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BackButton = require("./BackButton");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Buttons/BackButton',
+  component: _BackButton.BackButton,
+  argTypes: {
+    children: {
+      type: 'node',
+      required: true
+    },
+    to: {
+      type: 'string'
+    },
+    href: {
+      type: 'string'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_BackButton.BackButton, args));
+};
+var BackButtonDefault = Template.bind({});
+exports.BackButtonDefault = BackButtonDefault;
+BackButtonDefault.args = {};
+
+//back button by default links to any page visited before

package/dist/components/BackButton/BackButton.styles.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledWindowBackButton = exports.StyledBackButtonExternal = exports.StyledBackButtonClick = exports.StyledBackButton = exports.ForwardButtonIcon = exports.BackButtonIcon = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactRouterDom = require("react-router-dom");
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var BackButtonIcon = _styledComponents.default.i.attrs({
+  className: 'ion ion-ios-arrow-back'
+}).withConfig({
+  displayName: "BackButtonstyles__BackButtonIcon",
+  componentId: "sc-1uhreks-0"
+})(["font-size:16px;position:absolute;left:0;color:", ";transform:translateX(0);transition:0.3s color,0.3s transform;"], function (props) {
+  return _theme.default.cBlack;
+});
+exports.BackButtonIcon = BackButtonIcon;
+var ForwardButtonIcon = _styledComponents.default.i.attrs({
+  className: 'ion ion-ios-arrow-forward'
+}).withConfig({
+  displayName: "BackButtonstyles__ForwardButtonIcon",
+  componentId: "sc-1uhreks-1"
+})(["font-size:16px;position:absolute;right:0;color:", ";transform:translateX(0);transition:0.3s color,0.3s transform;"], function (props) {
+  return _theme.default.cBlack;
+});
+exports.ForwardButtonIcon = ForwardButtonIcon;
+var StyledBackButton = (0, _styledComponents.default)(_reactRouterDom.Link).withConfig({
+  displayName: "BackButtonstyles__StyledBackButton",
+  componentId: "sc-1uhreks-2"
+})(["display:block;font-size:11px;line-height:16px;letter-spacing:2px;color:", ";position:relative;padding-left:16px;transition:0.3s color;&:hover{color:", ";", "{transform:translateX(-4px);color:", ";}}"], function (props) {
+  return _theme.default.cBlack;
+}, function (props) {
+  return _theme.default.cPrimaryDark;
+}, BackButtonIcon, function (props) {
+  return _theme.default.cPrimaryDark;
+});
+exports.StyledBackButton = StyledBackButton;
+var StyledBackButtonExternal = _styledComponents.default.a.withConfig({
+  displayName: "BackButtonstyles__StyledBackButtonExternal",
+  componentId: "sc-1uhreks-3"
+})(["display:block;font-size:11px;line-height:16px;letter-spacing:2px;color:", ";position:relative;padding-left:16px;transition:0.3s color;&:hover{color:", ";", "{transform:translateX(-4px);color:", ";}}"], function (props) {
+  return _theme.default.cBlack;
+}, function (props) {
+  return _theme.default.cPrimaryDark;
+}, BackButtonIcon, function (props) {
+  return _theme.default.cPrimaryDark;
+});
+exports.StyledBackButtonExternal = StyledBackButtonExternal;
+var StyledWindowBackButton = _styledComponents.default.span.withConfig({
+  displayName: "BackButtonstyles__StyledWindowBackButton",
+  componentId: "sc-1uhreks-4"
+})(["display:block;font-size:11px;line-height:16px;cursor:pointer;letter-spacing:2px;color:", ";position:relative;padding-left:16px;transition:0.3s color;&:hover{color:", ";", "{transform:translateX(-4px);color:", ";}}"], function (props) {
+  return _theme.default.cBlack;
+}, function (props) {
+  return _theme.default.cPrimaryDark;
+}, BackButtonIcon, function (props) {
+  return _theme.default.cPrimaryDark;
+});
+exports.StyledWindowBackButton = StyledWindowBackButton;
+var StyledBackButtonClick = _styledComponents.default.div.withConfig({
+  displayName: "BackButtonstyles__StyledBackButtonClick",
+  componentId: "sc-1uhreks-5"
+})(["display:block;font-size:11px;line-height:16px;letter-spacing:2px;color:", ";position:relative;padding-left:16px;transition:0.3s color;cursor:pointer;", " &:hover{color:", ";", "{transform:translateX(-4px);color:", ";}", "{transform:translateX(4px);color:", ";}}"], function (props) {
+  return _theme.default.cBlack;
+}, function (props) {
+  return props.forward && "\n    padding-right: 16px;\n  ";
+}, function (props) {
+  return _theme.default.cPrimaryDark;
+}, BackButtonIcon, function (props) {
+  return _theme.default.cPrimaryDark;
+}, ForwardButtonIcon, function (props) {
+  return _theme.default.cPrimaryDark;
+});
+exports.StyledBackButtonClick = StyledBackButtonClick;

package/dist/components/Background/Background.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Background = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Background = require("./Background.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Background = function Background(props) {
+  var children = props.children,
+    src = props.src,
+    mobileRatio = props.mobileRatio,
+    investmentOpportunities = props.investmentOpportunities,
+    withPadding = props.withPadding,
+    contain = props.contain,
+    caption = props.caption;
+  return /*#__PURE__*/_react.default.createElement(_Background.Container, {
+    mobileRatio: mobileRatio,
+    investmentOpportunities: investmentOpportunities
+  }, /*#__PURE__*/_react.default.createElement(_Background.Wrap, null, /*#__PURE__*/_react.default.createElement(_Background.Img, {
+    src: src,
+    alt: "background",
+    contain: contain,
+    withPadding: withPadding,
+    investmentOpportunities: investmentOpportunities
+  })), caption && /*#__PURE__*/_react.default.createElement(_Background.Caption, {
+    withPadding: withPadding
+  }, caption), /*#__PURE__*/_react.default.createElement(_Background.Content, null, children));
+};
+exports.Background = Background;
+Background.propTypes = {
+  src: _propTypes.default.string.isRequired,
+  mobileRatio: _propTypes.default.string,
+  // example: '16:9'
+  children: _propTypes.default.node,
+  caption: _propTypes.default.string
+};
+Background.defaultProps = {
+  mobileRatio: '',
+  children: /*#__PURE__*/_react.default.createElement("div", null)
+};
+var _default = Background;
+exports.default = _default;

package/dist/components/Background/Background.stories.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BackgroundMobile2 = exports.BackgroundMobile = exports.BackgroundDefault = void 0;
+var _addonViewport = require("@storybook/addon-viewport");
+var _react = _interopRequireDefault(require("react"));
+var _Background = require("./Background");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Background',
+  component: _Background.Background,
+  argTypes: {
+    src: {
+      type: 'string',
+      required: true,
+      defaultValue: 'https://www.cookingclassy.com/wp-content/uploads/2014/06/chocolate-chip-cookie-16.jpg'
+    },
+    mobileRatio: {
+      type: 'string',
+      defaultValue: ''
+    },
+    children: {
+      type: 'node',
+      defaultValue: /*#__PURE__*/_react.default.createElement("div", null)
+    },
+    investmentOpportunities: {
+      type: 'node'
+    },
+    caption: {
+      type: 'string',
+      defaultValue: ''
+    }
+  },
+  parameters: {
+    viewport: {
+      viewports: _addonViewport.INITIAL_VIEWPORTS,
+      defaultViewport: ''
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Background.Background, args, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+};
+var BackgroundDefault = Template.bind({});
+exports.BackgroundDefault = BackgroundDefault;
+BackgroundDefault.args = {};
+BackgroundDefault.parameters = {
+  viewport: {
+    defaultViewport: 'reset viewport'
+  }
+};
+var BackgroundMobile = Template.bind({});
+exports.BackgroundMobile = BackgroundMobile;
+BackgroundMobile.args = {
+  mobileRatio: '16:9',
+  children: /*#__PURE__*/_react.default.createElement("div", null)
+};
+BackgroundMobile.parameters = {
+  viewport: {
+    defaultViewport: 'iphonex'
+  }
+};
+var BackgroundMobile2 = Template.bind({});
+exports.BackgroundMobile2 = BackgroundMobile2;
+BackgroundMobile2.args = {
+  mobileRatio: '16:9',
+  contain: true,
+  withPadding: true,
+  caption: 'AMP ID at the top right of your SideSwap wallet.'
+};
+BackgroundMobile2.parameters = {
+  viewport: {
+    defaultViewport: 'iphonex'
+  }
+};

package/dist/components/Background/Background.styles.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrap = exports.Video = exports.Img = exports.Image = exports.Content = exports.Container = exports.Caption = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "Backgroundstyles__Container",
+  componentId: "sc-1pfq4ec-0"
+})(["position:relative;width:100%;height:100%;font-size:0;", " &:after{", "}", ""], function (props) {
+  if (!props.mobileRatio) return '';
+  var ratio = props.mobileRatio.split(':');
+  var percent = 100 * ratio[1] / ratio[0];
+  return "\n      &:after {\n        z-index: 0;\n        content: '';\n        position: relative;\n        display: inline-block;\n        vertical-align: top;\n        width: 100%;\n        height: 100%;\n        padding-top: ".concat(percent, "%;\n        margin-left: -100%;\n      }\n    ");
+}, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: none;\n    "]))), function (props) {
+  return props.investmentOpportunities && "\n    padding-top: 33% !important;\n  ";
+});
+exports.Container = Container;
+var Wrap = _styledComponents.default.div.withConfig({
+  displayName: "Backgroundstyles__Wrap",
+  componentId: "sc-1pfq4ec-1"
+})(["z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;& > div{height:100%;}"]);
+
+// // Concerning MERGE:
+// // differences from Img SUF below, left out of merge. Visually gave extra padding to background
+// const Img
+// export const Img = styled.img`
+//   top: 50%;
+//   left: 50%;
+//   height: auto;
+//   padding: 20px;
+//   transform: translate(-50%, -50%);
+// // same as others:
+//   position: absolute;
+//   width: 100%;
+//   object-fit: cover;
+//   object-position: center center;
+exports.Wrap = Wrap;
+var Caption = _styledComponents.default.div.withConfig({
+  displayName: "Backgroundstyles__Caption",
+  componentId: "sc-1pfq4ec-2"
+})(["font-size:11px;position:absolute;bottom:-25px;", ""], function (props) {
+  return props.withPadding && "\n    bottom: -12px;\n  ";
+});
+exports.Caption = Caption;
+var Img = _styledComponents.default.img.withConfig({
+  displayName: "Backgroundstyles__Img",
+  componentId: "sc-1pfq4ec-3"
+})(["position:absolute;width:100%;object-fit:cover;object-position:center center;top:0;left:0;height:100%;", " ", " ", ""], function (props) {
+  return props.investmentOpportunities && "\n    height: 100%;\n  ";
+}, function (props) {
+  return props.withPadding && "\n    padding: 20px;\n  ";
+}, function (props) {
+  return props.contain && "\n    object-fit:contain;\n  ";
+});
+exports.Img = Img;
+var Video = _styledComponents.default.video.withConfig({
+  displayName: "Backgroundstyles__Video",
+  componentId: "sc-1pfq4ec-4"
+})(["object-fit:cover;width:100%;height:100%;"]);
+exports.Video = Video;
+var Image = _styledComponents.default.img.withConfig({
+  displayName: "Backgroundstyles__Image",
+  componentId: "sc-1pfq4ec-5"
+})(["min-width:100%;min-height:100%;width:auto;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);
+exports.Image = Image;
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "Backgroundstyles__Content",
+  componentId: "sc-1pfq4ec-6"
+})(["z-index:2;position:relative;display:inline-block;vertical-align:top;width:100%;font-size:10px;"]);
+exports.Content = Content;