@stokr/components-library 2.3.21 → 2.3.22-beta.1

package/dist/components/BlogPost/BlogPost.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _BlogPost = require("./BlogPost.styles");
+var _Text = _interopRequireDefault(require("../Text/Text.styles"));
+var _breakdown = _interopRequireDefault(require("../breakdown"));
+var _excluded = ["layout", "category", "title", "description", "image", "date", "link", "CTAText"];
+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; }
+var BlogPost = function BlogPost(_ref) {
+  var _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'image-left' : _ref$layout,
+    category = _ref.category,
+    title = _ref.title,
+    description = _ref.description,
+    image = _ref.image,
+    date = _ref.date,
+    link = _ref.link,
+    _ref$CTAText = _ref.CTAText,
+    CTAText = _ref$CTAText === void 0 ? 'Read full' : _ref$CTAText,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_BlogPost.Container, _extends({
+    layout: layout
+  }, props), /*#__PURE__*/_react.default.createElement(_BlogPost.ImageWrapper, {
+    layout: layout
+  }, /*#__PURE__*/_react.default.createElement(_BlogPost.Image, {
+    src: image,
+    alt: title
+  })), /*#__PURE__*/_react.default.createElement(_BlogPost.Content, {
+    layout: layout
+  }, /*#__PURE__*/_react.default.createElement(_BlogPost.Category, null, category), /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, title), description && /*#__PURE__*/_react.default.createElement("p", null, description)), date && /*#__PURE__*/_react.default.createElement(_breakdown.default, null, date), /*#__PURE__*/_react.default.createElement(_BlogPost.StyledButton, {
+    transparent: true,
+    onClick: function onClick() {
+      return window.location.href = link;
+    }
+  }, CTAText)));
+};
+BlogPost.propTypes = {
+  layout: _propTypes.default.oneOf(['image-left', 'image-right', 'image-cover', 'image-fullscreen']),
+  category: _propTypes.default.string.isRequired,
+  title: _propTypes.default.string.isRequired,
+  description: _propTypes.default.string,
+  image: _propTypes.default.string.isRequired,
+  date: _propTypes.default.string,
+  link: _propTypes.default.string.isRequired
+};
+var _default = BlogPost;
+exports.default = _default;

package/dist/components/BlogPost/BlogPost.stories.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageRight = exports.ImageLeft = exports.ImageCover = exports.GridExample = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = _interopRequireDefault(require("react"));
+var _BlogPost = _interopRequireDefault(require("./BlogPost"));
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 _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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var _default = {
+  title: 'Components Library/BlogPost',
+  component: _BlogPost.default,
+  argTypes: {
+    layout: {
+      control: 'select',
+      options: ['image-left', 'image-right', 'image-cover'],
+      defaultValue: 'image-left'
+    },
+    category: {
+      control: 'text'
+    },
+    title: {
+      control: 'text'
+    },
+    description: {
+      control: 'text'
+    },
+    image: {
+      control: 'text'
+    },
+    date: {
+      control: 'text'
+    },
+    link: {
+      control: 'text'
+    }
+  }
+};
+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("div", {
+    style: {
+      maxWidth: '1200px',
+      margin: '0 auto',
+      padding: '20px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_BlogPost.default, args)));
+};
+var ImageLeft = Template.bind({});
+exports.ImageLeft = ImageLeft;
+ImageLeft.args = {
+  layout: 'image-left',
+  category: 'BITCOIN MINING',
+  title: 'Bitcoin Mining: A Series - Part 1: The Ups, Downs and Rebounds',
+  description: "It's the moment you have all been waiting for! Trading for the BMN token is now fully live and active on the Bitfinex Securities Exchange.",
+  image: 'https://res.cloudinary.com/stokr/image/upload/v1574418924/1_hoz9ve.jpg',
+  date: '01 MAR 2022',
+  link: '/blog/bitcoin-mining-series-part-1'
+};
+
+//https://res.cloudinary.com/stokr/image/upload/v1694077746/cld-sample-2.jpg
+//https://res.cloudinary.com/stokr/image/upload/v1713792627/STOKE_POST/stos-an-alternative-way-of-fundraising-for-business_xqx6zu.jpg
+
+var ImageRight = Template.bind({});
+exports.ImageRight = ImageRight;
+ImageRight.args = _objectSpread(_objectSpread({}, ImageLeft.args), {}, {
+  layout: 'image-right'
+});
+var ImageCover = Template.bind({});
+exports.ImageCover = ImageCover;
+ImageCover.args = _objectSpread(_objectSpread({}, ImageLeft.args), {}, {
+  layout: 'image-cover'
+});
+var GridLayout = _styledComponents.default.div.withConfig({
+  displayName: "BlogPoststories__GridLayout",
+  componentId: "sc-1hqbvxb-0"
+})(["display:grid;grid-template-columns:1fr;gap:4rem;", ";", ";"], _rwd.default.Mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    gap: 6rem;\n  "]))), _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    gap: 10rem 4rem;\n    grid-template-columns: repeat(2, 1fr);\n  "]))));
+var LAYOUTS = [['image-cover', 'image-right', 'image-left', 'image-cover', 'image-cover', 'image-right', 'image-fullscreen'], ['image-cover', 'image-left', 'image-right', 'image-cover', 'image-cover', 'image-left', 'image-fullscreen']];
+var getLayoutPattern = function getLayoutPattern(index) {
+  return LAYOUTS[Math.floor(index / 7) % 2][index % 7];
+};
+
+// Sample blog posts data
+var samplePosts = [{
+  layout: 'image-cover',
+  category: 'BITCOIN MINING',
+  title: 'Bitcoin Mining: A Series - Part 1',
+  description: "It's the moment you have all been waiting for! Trading for the BMN token is now fully live.",
+  image: 'https://res.cloudinary.com/stokr/image/upload/v1574418924/1_hoz9ve.jpg',
+  date: '01 MAR 2022',
+  link: '/blog/post-1'
+}, {
+  layout: 'image-left',
+  category: 'BITCOIN MINING',
+  title: 'BMN Now Open for Trade',
+  description: 'Trading for the BMN token is now fully live and active on the Bitfinex Securities Exchange.',
+  image: 'https://res.cloudinary.com/stokr/image/upload/v1694077746/cld-sample-2.jpg',
+  date: '02 MAR 2022',
+  link: '/blog/post-2'
+}, {
+  layout: 'image-right',
+  category: 'BITCOIN MINING',
+  title: 'The Ups, Downs and Rebounds',
+  description: 'Learn about the journey of Bitcoin mining and its various phases.',
+  image: 'https://res.cloudinary.com/stokr/image/upload/v1713792627/STOKE_POST/stos-an-alternative-way-of-fundraising-for-business_xqx6zu.jpg',
+  date: '03 MAR 2022',
+  link: '/blog/post-3'
+}, {
+  layout: 'image-cover',
+  category: 'BITCOIN MINING',
+  title: 'Future of Mining',
+  description: 'Exploring what lies ahead for Bitcoin mining technology.',
+  image: 'https://res.cloudinary.com/stokr/image/upload/v1574418924/1_hoz9ve.jpg',
+  date: '04 MAR 2022',
+  link: '/blog/post-4'
+}, {
+  layout: 'image-left',
+  category: 'BITCOIN MINING',
+  title: 'BMN Now Open for Trade',
+  description: 'Trading for the BMN token is now fully live and active on the Bitfinex Securities Exchange.',
+  image: 'https://res.cloudinary.com/stokr/image/upload/v1694077746/cld-sample-2.jpg',
+  date: '02 MAR 2022',
+  link: '/blog/post-2'
+}, {
+  layout: 'image-right',
+  category: 'BITCOIN MINING',
+  title: 'The Ups, Downs and Rebounds',
+  description: 'Learn about the journey of Bitcoin mining and its various phases.',
+  image: 'https://res.cloudinary.com/stokr/image/upload/v1713792627/STOKE_POST/stos-an-alternative-way-of-fundraising-for-business_xqx6zu.jpg',
+  date: '03 MAR 2022',
+  link: '/blog/post-3'
+}, {
+  layout: 'image-cover',
+  category: 'BITCOIN MINING',
+  title: 'Bitcoin Mining: A Series - Part 1',
+  description: "It's the moment you have all been waiting for! Trading for the BMN token is now fully live.",
+  image: 'https://res.cloudinary.com/stokr/image/upload/v1574418924/1_hoz9ve.jpg',
+  date: '01 MAR 2022',
+  link: '/blog/post-1'
+}];
+var GridExample = function GridExample(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxWidth: '1700px',
+      margin: '0 auto'
+    }
+  }, /*#__PURE__*/_react.default.createElement(GridLayout, null, samplePosts.map(function (post, index) {
+    return /*#__PURE__*/_react.default.createElement(_BlogPost.default, _extends({
+      key: index
+    }, post, {
+      layout: getLayoutPattern(index)
+    }));
+  }))));
+};
+exports.GridExample = GridExample;

package/dist/components/BlogPost/BlogPost.styles.js

@@ -0,0 +1,89 @@
+"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.Title = exports.StyledButton = exports.ImageWrapper = exports.Image = exports.Description = exports.Date = exports.Content = exports.Container = exports.Category = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var _breakdown = _interopRequireDefault(require("../breakdown"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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: "BlogPoststyles__Container",
+  componentId: "sc-16n0gty-0"
+})(["position:relative;display:flex;flex-direction:", ";background:", ";height:100%;min-height:300px;max-height:500px;", ""], function (_ref) {
+  var layout = _ref.layout;
+  return layout === 'image-right' ? 'column-reverse' : 'column';
+}, _theme.default.cWhite, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n    flex-direction: ", ";\n\n     ", "\n  "])), function (_ref2) {
+  var layout = _ref2.layout;
+  return layout === 'image-cover' || layout === 'image-fullscreen' ? 'column' : layout === 'image-right' ? 'row-reverse' : 'row';
+}, function (_ref3) {
+  var layout = _ref3.layout;
+  return layout === 'image-fullscreen' && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n         grid-column: 1 / -1;\n       "])));
+}));
+exports.Container = Container;
+var ImageWrapper = _styledComponents.default.div.withConfig({
+  displayName: "BlogPoststyles__ImageWrapper",
+  componentId: "sc-16n0gty-1"
+})(["position:relative;flex:", ";overflow:hidden;", ""], function (_ref4) {
+  var layout = _ref4.layout;
+  return layout === 'image-cover' || layout === 'image-fullscreen' ? '1' : '0 0 50%';
+}, function (_ref5) {
+  var layout = _ref5.layout;
+  return (layout === 'image-cover' || layout === 'image-fullscreen') && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      &:after {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0, 0, 0, 0.4);\n        transition: background 0.3s ease;\n      }\n    "])));
+});
+exports.ImageWrapper = ImageWrapper;
+var Image = _styledComponents.default.img.withConfig({
+  displayName: "BlogPoststyles__Image",
+  componentId: "sc-16n0gty-2"
+})(["width:100%;height:100%;object-fit:cover;"]);
+exports.Image = Image;
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "BlogPoststyles__Content",
+  componentId: "sc-16n0gty-3"
+})(["flex:", ";padding:", ";display:flex;flex-direction:column;gap:12px;position:", ";", " ", ""], function (_ref6) {
+  var layout = _ref6.layout;
+  return layout === 'image-cover' || layout === 'image-fullscreen' ? '0' : '1';
+}, function (_ref7) {
+  var layout = _ref7.layout;
+  return layout === 'image-cover' || layout === 'image-fullscreen' ? '32px' : '32px 0';
+}, function (_ref8) {
+  var layout = _ref8.layout;
+  return layout === 'image-cover' || layout === 'image-fullscreen' ? 'absolute' : 'relative';
+}, function (_ref9) {
+  var layout = _ref9.layout;
+  return (layout === 'image-cover' || layout === 'image-fullscreen') && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      bottom: 0;\n      left: 0;\n      right: 0;\n      color: ", ";\n    "])), _theme.default.cWhite);
+}, _rwd.default.Medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\n    gap:24px;\n    padding: 32px; \n  "]))));
+exports.Content = Content;
+var Category = (0, _styledComponents.default)(_breakdown.default).withConfig({
+  displayName: "BlogPoststyles__Category",
+  componentId: "sc-16n0gty-4"
+})(["font-weight:500 !important;", ""], _rwd.default.Mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\n     //margin-bottom: 24px;\n  "]))));
+exports.Category = Category;
+var Title = _styledComponents.default.h2.withConfig({
+  displayName: "BlogPoststyles__Title",
+  componentId: "sc-16n0gty-5"
+})(["font-size:24px;margin:0 0 16px;font-weight:700;"]);
+exports.Title = Title;
+var Description = _styledComponents.default.p.withConfig({
+  displayName: "BlogPoststyles__Description",
+  componentId: "sc-16n0gty-6"
+})(["font-size:16px;line-height:1.5;margin:0;"]);
+exports.Description = Description;
+var Date = _styledComponents.default.div.withConfig({
+  displayName: "BlogPoststyles__Date",
+  componentId: "sc-16n0gty-7"
+})(["font-size:14px;margin-top:16px;opacity:0.7;"]);
+exports.Date = Date;
+var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "BlogPoststyles__StyledButton",
+  componentId: "sc-16n0gty-8"
+})(["position:absolute;bottom:32px;right:32px;opacity:0;transition:opacity 0.3s ease;", ":hover &{opacity:1;}"], Container);
+exports.StyledButton = StyledButton;

package/dist/index.js

@@ -1322,4 +1322,15 @@ Object.keys(_logo).forEach(function (key) {
       return _logo[key];
     }
   });
+});
+var _BlogPost = require("./components/BlogPost/BlogPost");
+Object.keys(_BlogPost).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BlogPost[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _BlogPost[key];
+    }
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.21",
+  "version": "2.3.22-beta.1",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",