@stokr/components-library 2.3.22-beta.6 → 2.3.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -43,7 +43,9 @@ var BlogPost = function BlogPost(_ref) {
43
43
  alt: title
44
44
  })), /*#__PURE__*/_react.default.createElement(_BlogPost.Content, {
45
45
  layout: layout
46
- }, /*#__PURE__*/_react.default.createElement(_BlogPost.Category, null, category), /*#__PURE__*/_react.default.createElement(_BlogPost.TextWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, title), description && layout !== 'image-fullscreen' && layout !== 'image-cover' && /*#__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, {
46
+ }, /*#__PURE__*/_react.default.createElement(_BlogPost.Category, {
47
+ category: category
48
+ }, category), /*#__PURE__*/_react.default.createElement(_BlogPost.TextWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, title), description && layout !== 'image-fullscreen' && layout !== 'image-cover' && /*#__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, {
47
49
  transparent: true,
48
50
  onClick: function onClick() {
49
51
  if (link && !_onClick) window.location.href = link;
@@ -107,7 +107,7 @@ var samplePosts = [{
107
107
  link: '/blog/post-1'
108
108
  }, {
109
109
  layout: 'image-left',
110
- category: 'BITCOIN MINING',
110
+ category: 'PODCAST',
111
111
  title: 'What Is Portfolio Diversification and What Does A Diversified Portfolio Look Like? What Is Portfolio Diversification and What Does A Diversified Portfolio Look Like?What Is Portfolio Diversification and What Does A Diversified Portfolio Look Like?',
112
112
  description: 'Trading for the BMN token is now fully live and active on the Bitfinex Securities Exchange.Trading for the BMN token is now fully live and active on the Bitfinex Securities Exchange.Trading for the BMN token is now fully live and active on the Bitfinex Securities Exchange.',
113
113
  image: 'https://res.cloudinary.com/stokr/image/upload/v1694077746/cld-sample-2.jpg',
@@ -23,7 +23,7 @@ var Content = _styledComponents.default.div.withConfig({
23
23
  return layout === 'image-cover' || layout === 'image-fullscreen' ? '0' : '1';
24
24
  }, function (_ref2) {
25
25
  var layout = _ref2.layout;
26
- return layout === 'image-cover' || layout === 'image-fullscreen' ? '24px' : '16px 0';
26
+ return layout === 'image-cover' || layout === 'image-fullscreen' ? '16px' : '16px 0';
27
27
  }, function (_ref3) {
28
28
  var layout = _ref3.layout;
29
29
  return layout === 'image-cover' || layout === 'image-fullscreen' ? 'absolute' : 'relative';
@@ -41,14 +41,11 @@ exports.Content = Content;
41
41
  var Container = _styledComponents.default.div.withConfig({
42
42
  displayName: "BlogPoststyles__Container",
43
43
  componentId: "sc-16n0gty-1"
44
- })(["position:relative;display:flex;flex-direction:", ";background:", ";height:100%;min-height:400px;max-height:540px;transition:all 0.3s ease;", " ", " ", ""], function (_ref7) {
44
+ })(["position:relative;display:flex;flex-direction:column;background:", ";height:100%;min-height:400px;max-height:540px;transition:all 0.3s ease;", " ", " ", ""], _theme.default.cWhite, _rwd.default.Medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\n flex-direction: ", ";\n min-height: 500px;\n\n ", "\n "])), function (_ref7) {
45
45
  var layout = _ref7.layout;
46
- return layout === 'image-right' ? 'column-reverse' : 'column';
47
- }, _theme.default.cWhite, _rwd.default.Medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\n flex-direction: ", ";\n min-height: 500px;\n\n ", "\n "])), function (_ref8) {
48
- var layout = _ref8.layout;
49
46
  return layout === 'image-cover' || layout === 'image-fullscreen' ? 'column' : layout === 'image-right' ? 'row-reverse' : 'row';
50
- }, function (_ref9) {
51
- var layout = _ref9.layout;
47
+ }, function (_ref8) {
48
+ var layout = _ref8.layout;
52
49
  return layout === 'image-fullscreen' && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n grid-column: 1 / -1;\n "])));
53
50
  }), _rwd.default.XLarge(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n min-height: 540px;\n "]))), function (props) {
54
51
  return props.withHoverBg && "\n cursor:pointer;\n &:hover {\n box-shadow: 0 0 0 10px #fafafa;\n\n ".concat((props.layout === 'image-right' || props.layout === 'image-left') && "\n ".concat(Content, " {\n background-color: #fafafa;\n }\n "), "\n }\n ");
@@ -57,11 +54,11 @@ exports.Container = Container;
57
54
  var ImageWrapper = _styledComponents.default.div.withConfig({
58
55
  displayName: "BlogPoststyles__ImageWrapper",
59
56
  componentId: "sc-16n0gty-2"
60
- })(["position:relative;flex:", ";overflow:hidden;", ""], function (_ref10) {
61
- var layout = _ref10.layout;
57
+ })(["position:relative;flex:", ";overflow:hidden;", ""], function (_ref9) {
58
+ var layout = _ref9.layout;
62
59
  return layout === 'image-cover' || layout === 'image-fullscreen' ? '1' : '0 0 50%';
63
- }, function (_ref11) {
64
- var layout = _ref11.layout;
60
+ }, function (_ref10) {
61
+ var layout = _ref10.layout;
65
62
  return (layout === 'image-cover' || layout === 'image-fullscreen') && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _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 "])));
66
63
  });
67
64
  exports.ImageWrapper = ImageWrapper;
@@ -78,12 +75,15 @@ exports.TextWrapper = TextWrapper;
78
75
  var BottomRow = _styledComponents.default.div.withConfig({
79
76
  displayName: "BlogPoststyles__BottomRow",
80
77
  componentId: "sc-16n0gty-5"
81
- })(["display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:auto;width:100%;"]);
78
+ })(["display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:auto;width:100%;gap:12px;"]);
82
79
  exports.BottomRow = BottomRow;
83
80
  var Category = (0, _styledComponents.default)(_breakdown.default).withConfig({
84
81
  displayName: "BlogPoststyles__Category",
85
82
  componentId: "sc-16n0gty-6"
86
- })(["font-weight:500 !important;", ""], _rwd.default.Mobile(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n\n //margin-bottom: 24px;\n "]))));
83
+ })(["font-weight:500 !important;display:flex;align-items:center;gap:8px;", ""], function (_ref11) {
84
+ var category = _ref11.category;
85
+ return category === 'PODCAST' && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n &::before {\n content: '';\n display: inline-block;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 6px 0 6px 8px;\n border-color: transparent transparent transparent ", ";\n }\n "])), _theme.default.cLightGrey);
86
+ });
87
87
  exports.Category = Category;
88
88
  var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
89
89
  displayName: "BlogPoststyles__StyledButton",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stokr/components-library",
3
- "version": "2.3.22-beta.6",
3
+ "version": "2.3.22",
4
4
  "description": "STOKR - Components Library",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",