@stokr/components-library 2.3.22-beta.1 → 2.3.22-beta.4
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.
- package/dist/components/BlogPost/BlogPost.js +4 -4
- package/dist/components/BlogPost/BlogPost.stories.js +9 -8
- package/dist/components/BlogPost/BlogPost.styles.js +30 -29
- package/dist/components/TabsNav/TabNav.js +8 -3
- package/dist/components/TabsNav/TabsNav.js +11 -3
- package/dist/components/TabsNav/TabsNav.styles.js +5 -3
- package/dist/index.js +11 -0
- package/package.json +1 -1
|
@@ -3,11 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = void 0;
|
|
6
|
+
exports.default = exports.BlogPost = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _BlogPost = require("./BlogPost.styles");
|
|
10
|
-
var _Text = _interopRequireDefault(require("../Text/Text.styles"));
|
|
11
10
|
var _breakdown = _interopRequireDefault(require("../breakdown"));
|
|
12
11
|
var _excluded = ["layout", "category", "title", "description", "image", "date", "link", "CTAText"];
|
|
13
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -35,13 +34,14 @@ var BlogPost = function BlogPost(_ref) {
|
|
|
35
34
|
alt: title
|
|
36
35
|
})), /*#__PURE__*/_react.default.createElement(_BlogPost.Content, {
|
|
37
36
|
layout: layout
|
|
38
|
-
}, /*#__PURE__*/_react.default.createElement(_BlogPost.Category, null, category), /*#__PURE__*/_react.default.createElement(
|
|
37
|
+
}, /*#__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, {
|
|
39
38
|
transparent: true,
|
|
40
39
|
onClick: function onClick() {
|
|
41
40
|
return window.location.href = link;
|
|
42
41
|
}
|
|
43
|
-
}, CTAText)));
|
|
42
|
+
}, CTAText))));
|
|
44
43
|
};
|
|
44
|
+
exports.BlogPost = BlogPost;
|
|
45
45
|
BlogPost.propTypes = {
|
|
46
46
|
layout: _propTypes.default.oneOf(['image-left', 'image-right', 'image-cover', 'image-fullscreen']),
|
|
47
47
|
category: _propTypes.default.string.isRequired,
|
|
@@ -86,7 +86,7 @@ ImageCover.args = _objectSpread(_objectSpread({}, ImageLeft.args), {}, {
|
|
|
86
86
|
var GridLayout = _styledComponents.default.div.withConfig({
|
|
87
87
|
displayName: "BlogPoststories__GridLayout",
|
|
88
88
|
componentId: "sc-1hqbvxb-0"
|
|
89
|
-
})(["display:grid;grid-template-columns:1fr;gap:
|
|
89
|
+
})(["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 "]))));
|
|
90
90
|
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']];
|
|
91
91
|
var getLayoutPattern = function getLayoutPattern(index) {
|
|
92
92
|
return LAYOUTS[Math.floor(index / 7) % 2][index % 7];
|
|
@@ -96,7 +96,7 @@ var getLayoutPattern = function getLayoutPattern(index) {
|
|
|
96
96
|
var samplePosts = [{
|
|
97
97
|
layout: 'image-cover',
|
|
98
98
|
category: 'BITCOIN MINING',
|
|
99
|
-
title: '
|
|
99
|
+
title: 'STOKR RECEIVES BaFin APPROVAL FOR THE FIRST BITCOIN-BASED STO IN GERMANY',
|
|
100
100
|
description: "It's the moment you have all been waiting for! Trading for the BMN token is now fully live.",
|
|
101
101
|
image: 'https://res.cloudinary.com/stokr/image/upload/v1574418924/1_hoz9ve.jpg',
|
|
102
102
|
date: '01 MAR 2022',
|
|
@@ -104,17 +104,18 @@ var samplePosts = [{
|
|
|
104
104
|
}, {
|
|
105
105
|
layout: 'image-left',
|
|
106
106
|
category: 'BITCOIN MINING',
|
|
107
|
-
title: '
|
|
108
|
-
description: 'Trading for the BMN token is now fully live and active on the Bitfinex Securities Exchange.',
|
|
107
|
+
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?',
|
|
108
|
+
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.',
|
|
109
109
|
image: 'https://res.cloudinary.com/stokr/image/upload/v1694077746/cld-sample-2.jpg',
|
|
110
110
|
date: '02 MAR 2022',
|
|
111
111
|
link: '/blog/post-2'
|
|
112
112
|
}, {
|
|
113
113
|
layout: 'image-right',
|
|
114
114
|
category: 'BITCOIN MINING',
|
|
115
|
-
title:
|
|
116
|
-
description:
|
|
117
|
-
|
|
115
|
+
title: "T8 REASONS TO USE BTCPAY SERVER FOR YOUR WEBSITE'S BITCOIN PAYMENTS",
|
|
116
|
+
// description:
|
|
117
|
+
// 'Learn about the journey of Bitcoin mining and its various phases.',
|
|
118
|
+
image: 'https://res.cloudinary.com/stokr/image/upload/v1627569252/STOKE_POST/version1_yb4tck.png',
|
|
118
119
|
date: '03 MAR 2022',
|
|
119
120
|
link: '/blog/post-3'
|
|
120
121
|
}, {
|
|
@@ -122,7 +123,7 @@ var samplePosts = [{
|
|
|
122
123
|
category: 'BITCOIN MINING',
|
|
123
124
|
title: 'Future of Mining',
|
|
124
125
|
description: 'Exploring what lies ahead for Bitcoin mining technology.',
|
|
125
|
-
image: 'https://res.cloudinary.com/stokr/image/upload/
|
|
126
|
+
image: 'https://res.cloudinary.com/stokr/image/upload/v1626798409/STOKE_POST/IMG_0324_rbvypv.png',
|
|
126
127
|
date: '04 MAR 2022',
|
|
127
128
|
link: '/blog/post-4'
|
|
128
129
|
}, {
|
|
@@ -4,13 +4,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
7
|
+
exports.TextWrapper = exports.StyledButton = exports.ImageWrapper = exports.Image = exports.Content = exports.Container = exports.Category = exports.BottomRow = void 0;
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
var _Button = _interopRequireDefault(require("../Button/Button.styles"));
|
|
10
10
|
var _breakdown = _interopRequireDefault(require("../breakdown"));
|
|
11
11
|
var _rwd = _interopRequireDefault(require("../../styles/rwd"));
|
|
12
12
|
var _theme = _interopRequireDefault(require("../../styles/theme"));
|
|
13
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
13
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
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); }
|
|
16
16
|
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; }
|
|
@@ -18,16 +18,16 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
18
18
|
var Container = _styledComponents.default.div.withConfig({
|
|
19
19
|
displayName: "BlogPoststyles__Container",
|
|
20
20
|
componentId: "sc-16n0gty-0"
|
|
21
|
-
})(["position:relative;display:flex;flex-direction:", ";background:", ";height:100%;min-height:
|
|
21
|
+
})(["position:relative;display:flex;flex-direction:", ";background:", ";height:100%;min-height:400px;max-height:540px;", " ", ""], function (_ref) {
|
|
22
22
|
var layout = _ref.layout;
|
|
23
23
|
return layout === 'image-right' ? 'column-reverse' : 'column';
|
|
24
|
-
}, _theme.default.cWhite, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n flex-direction: ", ";\n\n ", "\n "])), function (_ref2) {
|
|
24
|
+
}, _theme.default.cWhite, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n flex-direction: ", ";\n min-height: 500px;\n\n ", "\n "])), function (_ref2) {
|
|
25
25
|
var layout = _ref2.layout;
|
|
26
26
|
return layout === 'image-cover' || layout === 'image-fullscreen' ? 'column' : layout === 'image-right' ? 'row-reverse' : 'row';
|
|
27
27
|
}, function (_ref3) {
|
|
28
28
|
var layout = _ref3.layout;
|
|
29
29
|
return layout === 'image-fullscreen' && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n grid-column: 1 / -1;\n "])));
|
|
30
|
-
}));
|
|
30
|
+
}), _rwd.default.XLarge(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n min-height: 540px;\n "]))));
|
|
31
31
|
exports.Container = Container;
|
|
32
32
|
var ImageWrapper = _styledComponents.default.div.withConfig({
|
|
33
33
|
displayName: "BlogPoststyles__ImageWrapper",
|
|
@@ -37,7 +37,7 @@ var ImageWrapper = _styledComponents.default.div.withConfig({
|
|
|
37
37
|
return layout === 'image-cover' || layout === 'image-fullscreen' ? '1' : '0 0 50%';
|
|
38
38
|
}, function (_ref5) {
|
|
39
39
|
var layout = _ref5.layout;
|
|
40
|
-
return (layout === 'image-cover' || layout === 'image-fullscreen') && (0, _styledComponents.css)(
|
|
40
|
+
return (layout === 'image-cover' || layout === 'image-fullscreen') && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _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 "])));
|
|
41
41
|
});
|
|
42
42
|
exports.ImageWrapper = ImageWrapper;
|
|
43
43
|
var Image = _styledComponents.default.img.withConfig({
|
|
@@ -48,42 +48,43 @@ exports.Image = Image;
|
|
|
48
48
|
var Content = _styledComponents.default.div.withConfig({
|
|
49
49
|
displayName: "BlogPoststyles__Content",
|
|
50
50
|
componentId: "sc-16n0gty-3"
|
|
51
|
-
})(["flex:", ";padding:", ";display:flex;flex-direction:column;gap:12px;position:", ";", " ", ""], function (_ref6) {
|
|
51
|
+
})(["flex:", ";padding:", ";display:flex;flex-direction:column;gap:12px;word-break:break-word;position:", ";", " ", ""], function (_ref6) {
|
|
52
52
|
var layout = _ref6.layout;
|
|
53
53
|
return layout === 'image-cover' || layout === 'image-fullscreen' ? '0' : '1';
|
|
54
54
|
}, function (_ref7) {
|
|
55
55
|
var layout = _ref7.layout;
|
|
56
|
-
return layout === 'image-cover' || layout === 'image-fullscreen' ? '
|
|
56
|
+
return layout === 'image-cover' || layout === 'image-fullscreen' ? '24px' : '16px 0';
|
|
57
57
|
}, function (_ref8) {
|
|
58
58
|
var layout = _ref8.layout;
|
|
59
59
|
return layout === 'image-cover' || layout === 'image-fullscreen' ? 'absolute' : 'relative';
|
|
60
60
|
}, function (_ref9) {
|
|
61
61
|
var layout = _ref9.layout;
|
|
62
|
-
return (layout === 'image-cover' || layout === 'image-fullscreen') && (0, _styledComponents.css)(
|
|
63
|
-
}, _rwd.default.Medium(
|
|
62
|
+
return (layout === 'image-cover' || layout === 'image-fullscreen') && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n bottom: 0;\n left: 0;\n right: 0;\n color: ", ";\n "])), _theme.default.cWhite);
|
|
63
|
+
}, _rwd.default.Medium(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n gap: 24px;\n padding: 24px; \n\n ", ";\n\n ", ";\n \n "])), function (_ref10) {
|
|
64
|
+
var layout = _ref10.layout;
|
|
65
|
+
return layout === 'image-left' && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n padding-right: 0;\n "])));
|
|
66
|
+
}, function (_ref11) {
|
|
67
|
+
var layout = _ref11.layout;
|
|
68
|
+
return layout === 'image-right' && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding-left: 0;\n "])));
|
|
69
|
+
}));
|
|
64
70
|
exports.Content = Content;
|
|
65
|
-
var
|
|
66
|
-
displayName: "
|
|
71
|
+
var TextWrapper = _styledComponents.default.div.withConfig({
|
|
72
|
+
displayName: "BlogPoststyles__TextWrapper",
|
|
67
73
|
componentId: "sc-16n0gty-4"
|
|
68
|
-
})(["font-weight:
|
|
69
|
-
exports.
|
|
70
|
-
var
|
|
71
|
-
displayName: "
|
|
74
|
+
})(["flex:1;overflow:hidden;display:flex;flex-direction:column;h3{font-weight:800;font-size:20px;line-height:30px;letter-spacing:1.41px;text-transform:uppercase;margin:0;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;-webkit-line-clamp:3;", " ", " ", "}p{font-weight:300;font-size:16px;line-height:24px;letter-spacing:0.6px;margin:24px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;", " ", "}"], _rwd.default.Mobile(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n -webkit-line-clamp: 4;\n "]))), _rwd.default.Medium(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n font-size: 22px;\n -webkit-line-clamp: 6;\n "]))), _rwd.default.Large(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n -webkit-line-clamp: 8;\n "]))), _rwd.default.Medium(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n -webkit-line-clamp: 3;\n\n "]))), _rwd.default.XLarge(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n -webkit-line-clamp: 4;\n "]))));
|
|
75
|
+
exports.TextWrapper = TextWrapper;
|
|
76
|
+
var BottomRow = _styledComponents.default.div.withConfig({
|
|
77
|
+
displayName: "BlogPoststyles__BottomRow",
|
|
72
78
|
componentId: "sc-16n0gty-5"
|
|
73
|
-
})(["
|
|
74
|
-
exports.
|
|
75
|
-
var
|
|
76
|
-
displayName: "
|
|
79
|
+
})(["display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:auto;width:100%;"]);
|
|
80
|
+
exports.BottomRow = BottomRow;
|
|
81
|
+
var Category = (0, _styledComponents.default)(_breakdown.default).withConfig({
|
|
82
|
+
displayName: "BlogPoststyles__Category",
|
|
77
83
|
componentId: "sc-16n0gty-6"
|
|
78
|
-
})(["font-
|
|
79
|
-
exports.
|
|
80
|
-
var Date = _styledComponents.default.div.withConfig({
|
|
81
|
-
displayName: "BlogPoststyles__Date",
|
|
82
|
-
componentId: "sc-16n0gty-7"
|
|
83
|
-
})(["font-size:14px;margin-top:16px;opacity:0.7;"]);
|
|
84
|
-
exports.Date = Date;
|
|
84
|
+
})(["font-weight:500 !important;", ""], _rwd.default.Mobile(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n\n //margin-bottom: 24px;\n "]))));
|
|
85
|
+
exports.Category = Category;
|
|
85
86
|
var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
|
|
86
87
|
displayName: "BlogPoststyles__StyledButton",
|
|
87
|
-
componentId: "sc-16n0gty-
|
|
88
|
-
})(["
|
|
88
|
+
componentId: "sc-16n0gty-7"
|
|
89
|
+
})(["opacity:0;transition:opacity 0.3s ease;", ":hover &{opacity:1;}"], Container);
|
|
89
90
|
exports.StyledButton = StyledButton;
|
|
@@ -7,15 +7,20 @@ exports.default = exports.TabNav = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _TabsNav = require("./TabsNav.styles");
|
|
10
|
+
var _excluded = ["children", "isActive", "onClick"];
|
|
10
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
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); }
|
|
13
|
+
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; }
|
|
14
|
+
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; }
|
|
11
15
|
var TabNav = function TabNav(_ref) {
|
|
12
16
|
var children = _ref.children,
|
|
13
17
|
isActive = _ref.isActive,
|
|
14
|
-
onClick = _ref.onClick
|
|
15
|
-
|
|
18
|
+
onClick = _ref.onClick,
|
|
19
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
20
|
+
return /*#__PURE__*/_react.default.createElement(_TabsNav.StyledTab, _extends({
|
|
16
21
|
onClick: onClick,
|
|
17
22
|
isActive: isActive
|
|
18
|
-
}, /*#__PURE__*/_react.default.createElement(_TabsNav.LinkText, null, children));
|
|
23
|
+
}, props), /*#__PURE__*/_react.default.createElement(_TabsNav.LinkText, null, children));
|
|
19
24
|
};
|
|
20
25
|
exports.TabNav = TabNav;
|
|
21
26
|
TabNav.propTypes = {
|
|
@@ -23,8 +23,14 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
|
|
|
23
23
|
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); }
|
|
24
24
|
var TabsNav = function TabsNav(_ref) {
|
|
25
25
|
var children = _ref.children,
|
|
26
|
-
activeTab = _ref.activeTab
|
|
27
|
-
|
|
26
|
+
activeTab = _ref.activeTab,
|
|
27
|
+
noBorderBottom = _ref.noBorderBottom,
|
|
28
|
+
noWrapperPadding = _ref.noWrapperPadding;
|
|
29
|
+
return /*#__PURE__*/_react.default.createElement(_TabsNav.StyledTabs, {
|
|
30
|
+
noBorderBottom: noBorderBottom
|
|
31
|
+
}, /*#__PURE__*/_react.default.createElement(_TabsNav.Scroll, null, /*#__PURE__*/_react.default.createElement(_TabsNav.TabsWrapper, {
|
|
32
|
+
noWrapperPadding: noWrapperPadding
|
|
33
|
+
}, _react.default.Children.map(children, function (child) {
|
|
28
34
|
if (! /*#__PURE__*/_react.default.isValidElement(child)) return null;
|
|
29
35
|
return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
|
|
30
36
|
isActive: child.props.tabId === activeTab
|
|
@@ -34,7 +40,9 @@ var TabsNav = function TabsNav(_ref) {
|
|
|
34
40
|
exports.TabsNav = TabsNav;
|
|
35
41
|
TabsNav.propTypes = {
|
|
36
42
|
children: _propTypes.default.node.isRequired,
|
|
37
|
-
activeTab: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
|
|
43
|
+
activeTab: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
44
|
+
noBorderBottom: _propTypes.default.bool,
|
|
45
|
+
noWrapperPadding: _propTypes.default.bool
|
|
38
46
|
};
|
|
39
47
|
TabsNav.defaultProps = {
|
|
40
48
|
activeTab: 0
|
|
@@ -13,8 +13,8 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
13
13
|
var StyledTabs = _styledComponents.default.div.withConfig({
|
|
14
14
|
displayName: "TabsNavstyles__StyledTabs",
|
|
15
15
|
componentId: "sc-opeopg-0"
|
|
16
|
-
})(["position:relative;border-bottom:1px solid ", ";"], function (props) {
|
|
17
|
-
return
|
|
16
|
+
})(["position:relative;border-bottom:1px solid ", ";", ""], _theme.default.cLightGrey, function (props) {
|
|
17
|
+
return props.noBorderBottom && "\n border-bottom: none;\n ";
|
|
18
18
|
});
|
|
19
19
|
exports.StyledTabs = StyledTabs;
|
|
20
20
|
var Scroll = _styledComponents.default.div.withConfig({
|
|
@@ -25,7 +25,9 @@ exports.Scroll = Scroll;
|
|
|
25
25
|
var TabsWrapper = _styledComponents.default.div.withConfig({
|
|
26
26
|
displayName: "TabsNavstyles__TabsWrapper",
|
|
27
27
|
componentId: "sc-opeopg-2"
|
|
28
|
-
})(["position:relative;white-space:nowrap;padding:12px 0;", ""], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 24px;\n "]))))
|
|
28
|
+
})(["position:relative;white-space:nowrap;padding:12px 0;", " ", ""], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 24px;\n "]))), function (props) {
|
|
29
|
+
return props.noWrapperPadding && "\n padding: 0 !important;\n ";
|
|
30
|
+
});
|
|
29
31
|
exports.TabsWrapper = TabsWrapper;
|
|
30
32
|
var LinkText = _styledComponents.default.span.withConfig({
|
|
31
33
|
displayName: "TabsNavstyles__LinkText",
|
package/dist/index.js
CHANGED
|
@@ -1333,4 +1333,15 @@ Object.keys(_BlogPost).forEach(function (key) {
|
|
|
1333
1333
|
return _BlogPost[key];
|
|
1334
1334
|
}
|
|
1335
1335
|
});
|
|
1336
|
+
});
|
|
1337
|
+
var _TabsNav = require("./components/TabsNav/TabsNav");
|
|
1338
|
+
Object.keys(_TabsNav).forEach(function (key) {
|
|
1339
|
+
if (key === "default" || key === "__esModule") return;
|
|
1340
|
+
if (key in exports && exports[key] === _TabsNav[key]) return;
|
|
1341
|
+
Object.defineProperty(exports, key, {
|
|
1342
|
+
enumerable: true,
|
|
1343
|
+
get: function get() {
|
|
1344
|
+
return _TabsNav[key];
|
|
1345
|
+
}
|
|
1346
|
+
});
|
|
1336
1347
|
});
|