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

package/dist/components/BlogPost/BlogPost.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.BlogPost = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _BlogPost = require("./BlogPost.styles");
@@ -35,13 +35,14 @@ var BlogPost = function BlogPost(_ref) {
     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, {
+  }, /*#__PURE__*/_react.default.createElement(_BlogPost.Category, null, category), /*#__PURE__*/_react.default.createElement(_BlogPost.TextWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, title), description && /*#__PURE__*/_react.default.createElement("p", null, description))), /*#__PURE__*/_react.default.createElement(_BlogPost.BottomRow, null, 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)));
+  }, CTAText))));
 };
+exports.BlogPost = BlogPost;
 BlogPost.propTypes = {
   layout: _propTypes.default.oneOf(['image-left', 'image-right', 'image-cover', 'image-fullscreen']),
   category: _propTypes.default.string.isRequired,

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

@@ -86,7 +86,7 @@ ImageCover.args = _objectSpread(_objectSpread({}, ImageLeft.args), {}, {
 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  "]))));
+})(["display:grid;grid-template-columns:1fr;gap:3rem;", ";", ";"], _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, 50%);\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];
@@ -96,7 +96,7 @@ var getLayoutPattern = function getLayoutPattern(index) {
 var samplePosts = [{
   layout: 'image-cover',
   category: 'BITCOIN MINING',
-  title: 'Bitcoin Mining: A Series - Part 1',
+  title: 'STOKR RECEIVES BaFin APPROVAL FOR THE FIRST BITCOIN-BASED STO IN GERMANY',
   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',
@@ -112,9 +112,11 @@ var samplePosts = [{
 }, {
   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',
+  title: "T8 REASONS TO ",
+  //USE BTCPAY SERVER FOR YOUR WEBSITE'S BITCOIN PAYMENTS`,
+  // description:
+  //   'Learn about the journey of Bitcoin mining and its various phases.',
+  image: 'https://res.cloudinary.com/stokr/image/upload/v1627569252/STOKE_POST/version1_yb4tck.png',
   date: '03 MAR 2022',
   link: '/blog/post-3'
 }, {
@@ -122,7 +124,7 @@ var samplePosts = [{
   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',
+  image: 'https://res.cloudinary.com/stokr/image/upload/v1626798409/STOKE_POST/IMG_0324_rbvypv.png',
   date: '04 MAR 2022',
   link: '/blog/post-4'
 }, {

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

@@ -4,13 +4,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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;
+exports.TextWrapper = exports.StyledButton = exports.ImageWrapper = exports.Image = exports.Content = exports.Container = exports.Category = exports.BottomRow = 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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; }
@@ -48,7 +48,7 @@ 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) {
+})(["flex:", ";padding:", ";display:flex;flex-direction:column;gap:12px;word-break:break-word;position:", ";", " ", ""], function (_ref6) {
   var layout = _ref6.layout;
   return layout === 'image-cover' || layout === 'image-fullscreen' ? '0' : '1';
 }, function (_ref7) {
@@ -60,30 +60,25 @@ var Content = _styledComponents.default.div.withConfig({
 }, 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  "]))));
+}, _rwd.default.Medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    gap: 24px;\n    padding: 32px; \n  "]))));
 exports.Content = Content;
-var Category = (0, _styledComponents.default)(_breakdown.default).withConfig({
-  displayName: "BlogPoststyles__Category",
+var TextWrapper = _styledComponents.default.div.withConfig({
+  displayName: "BlogPoststyles__TextWrapper",
   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",
+})(["flex:1;overflow:hidden;display:flex;flex-direction:column;max-height:70%;h3{margin:0;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;max-height:100%;-webkit-line-clamp:unset;}p{margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;", "}"], _rwd.default.Medium(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      -webkit-line-clamp: 3;\n    "]))));
+exports.TextWrapper = TextWrapper;
+var BottomRow = _styledComponents.default.div.withConfig({
+  displayName: "BlogPoststyles__BottomRow",
   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",
+})(["display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:auto;width:100%;"]);
+exports.BottomRow = BottomRow;
+var Category = (0, _styledComponents.default)(_breakdown.default).withConfig({
+  displayName: "BlogPoststyles__Category",
   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;
+})(["font-weight:500 !important;", ""], _rwd.default.Mobile(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\n     //margin-bottom: 24px;\n  "]))));
+exports.Category = Category;
 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);
+  componentId: "sc-16n0gty-7"
+})(["opacity:0;transition:opacity 0.3s ease;", ":hover &{opacity:1;}"], Container);
 exports.StyledButton = StyledButton;

package/dist/components/TabsNav/TabNav.js

@@ -7,15 +7,20 @@ exports.default = exports.TabNav = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TabsNav = require("./TabsNav.styles");
+var _excluded = ["children", "isActive", "onClick"];
 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 TabNav = function TabNav(_ref) {
   var children = _ref.children,
     isActive = _ref.isActive,
-    onClick = _ref.onClick;
-  return /*#__PURE__*/_react.default.createElement(_TabsNav.StyledTab, {
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_TabsNav.StyledTab, _extends({
     onClick: onClick,
     isActive: isActive
-  }, /*#__PURE__*/_react.default.createElement(_TabsNav.LinkText, null, children));
+  }, props), /*#__PURE__*/_react.default.createElement(_TabsNav.LinkText, null, children));
 };
 exports.TabNav = TabNav;
 TabNav.propTypes = {

package/dist/components/TabsNav/TabsNav.js

@@ -23,8 +23,14 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 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 TabsNav = function TabsNav(_ref) {
   var children = _ref.children,
-    activeTab = _ref.activeTab;
-  return /*#__PURE__*/_react.default.createElement(_TabsNav.StyledTabs, null, /*#__PURE__*/_react.default.createElement(_TabsNav.Scroll, null, /*#__PURE__*/_react.default.createElement(_TabsNav.TabsWrapper, null, _react.default.Children.map(children, function (child) {
+    activeTab = _ref.activeTab,
+    noBorderBottom = _ref.noBorderBottom,
+    noWrapperPadding = _ref.noWrapperPadding;
+  return /*#__PURE__*/_react.default.createElement(_TabsNav.StyledTabs, {
+    noBorderBottom: noBorderBottom
+  }, /*#__PURE__*/_react.default.createElement(_TabsNav.Scroll, null, /*#__PURE__*/_react.default.createElement(_TabsNav.TabsWrapper, {
+    noWrapperPadding: noWrapperPadding
+  }, _react.default.Children.map(children, function (child) {
     if (! /*#__PURE__*/_react.default.isValidElement(child)) return null;
     return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
       isActive: child.props.tabId === activeTab
@@ -34,7 +40,9 @@ var TabsNav = function TabsNav(_ref) {
 exports.TabsNav = TabsNav;
 TabsNav.propTypes = {
   children: _propTypes.default.node.isRequired,
-  activeTab: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  activeTab: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  noBorderBottom: _propTypes.default.bool,
+  noWrapperPadding: _propTypes.default.bool
 };
 TabsNav.defaultProps = {
   activeTab: 0

package/dist/components/TabsNav/TabsNav.styles.js

@@ -13,8 +13,8 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var StyledTabs = _styledComponents.default.div.withConfig({
   displayName: "TabsNavstyles__StyledTabs",
   componentId: "sc-opeopg-0"
-})(["position:relative;border-bottom:1px solid ", ";"], function (props) {
-  return _theme.default.cLightGrey;
+})(["position:relative;border-bottom:1px solid ", ";", ""], _theme.default.cLightGrey, function (props) {
+  return props.noBorderBottom && "\n    border-bottom: none;\n  ";
 });
 exports.StyledTabs = StyledTabs;
 var Scroll = _styledComponents.default.div.withConfig({
@@ -25,7 +25,9 @@ exports.Scroll = Scroll;
 var TabsWrapper = _styledComponents.default.div.withConfig({
   displayName: "TabsNavstyles__TabsWrapper",
   componentId: "sc-opeopg-2"
-})(["position:relative;white-space:nowrap;padding:12px 0;", ""], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 24px;\n  "]))));
+})(["position:relative;white-space:nowrap;padding:12px 0;", " ", ""], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 24px;\n  "]))), function (props) {
+  return props.noWrapperPadding && "\n    padding: 0 !important;\n  ";
+});
 exports.TabsWrapper = TabsWrapper;
 var LinkText = _styledComponents.default.span.withConfig({
   displayName: "TabsNavstyles__LinkText",

package/dist/index.js

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

package/package.json

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