@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,
|
|
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: '
|
|
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' ? '
|
|
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:
|
|
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 (
|
|
51
|
-
var 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 (
|
|
61
|
-
var 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 (
|
|
64
|
-
var 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;", ""],
|
|
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",
|