trepur_components 0.2.23 → 0.2.24
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.
|
@@ -33,20 +33,35 @@ const AlertBar = _ref => {
|
|
|
33
33
|
rightIcon,
|
|
34
34
|
textColor,
|
|
35
35
|
leftIconColor,
|
|
36
|
-
rightIconColor
|
|
36
|
+
rightIconColor,
|
|
37
|
+
textCenter,
|
|
38
|
+
isDismissable
|
|
37
39
|
} = _ref;
|
|
38
40
|
let bgColor;
|
|
41
|
+
if (!['success', 'warning', 'error', 'info'].includes(type)) bgColor = 'bg-brand-info-light';
|
|
39
42
|
if (type === 'success') bgColor = 'bg-brand-success';
|
|
40
43
|
if (type === 'warning') bgColor = 'bg-brand-warning';
|
|
41
44
|
if (type === 'error') bgColor = 'bg-brand-error';
|
|
42
|
-
|
|
45
|
+
if (type === 'info') bgColor = 'bg-brand-info-light';
|
|
46
|
+
let classList = 'w-parent flex rounded-md ';
|
|
43
47
|
classList += bgColor ? bgColor : '';
|
|
44
48
|
classList += classes ? classes : '';
|
|
49
|
+
let textClassList = 'w-full py-3 ';
|
|
50
|
+
textClassList += textCenter ? 'text-center' : 'pl-4';
|
|
51
|
+
let rightIconClassList = 'px-8 pt-3 ';
|
|
52
|
+
rightIconClassList += isDismissable ? 'hover:cursor-pointer ' : '';
|
|
53
|
+
|
|
54
|
+
const closeAlertBar = () => {
|
|
55
|
+
document.getElementById(id ? id : 'alertBar').classList.add('hidden');
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
rightIcon = isDismissable ? 'multiply' : rightIcon;
|
|
45
59
|
let iconLeft = leftIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
46
60
|
type: leftIcon
|
|
47
61
|
}) : null;
|
|
48
62
|
let iconRight = rightIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
49
|
-
type: rightIcon
|
|
63
|
+
type: rightIcon,
|
|
64
|
+
onClick: () => closeAlertBar()
|
|
50
65
|
}) : null;
|
|
51
66
|
const [styles, setStyles] = (0, _react.useState)({
|
|
52
67
|
'color': textColor
|
|
@@ -57,19 +72,21 @@ const AlertBar = _ref => {
|
|
|
57
72
|
const [rightIconStyles, setRightIconStyles] = (0, _react.useState)({
|
|
58
73
|
'color': rightIconColor
|
|
59
74
|
});
|
|
60
|
-
return /*#__PURE__*/_react.default.createElement("div", _extends({}, id
|
|
75
|
+
return /*#__PURE__*/_react.default.createElement("div", _extends({}, id ? {
|
|
61
76
|
id: id
|
|
77
|
+
} : {
|
|
78
|
+
id: 'alertBar'
|
|
62
79
|
}, {
|
|
63
80
|
className: classList
|
|
64
81
|
}), leftIcon && /*#__PURE__*/_react.default.createElement("span", {
|
|
65
82
|
style: leftIconStyles,
|
|
66
|
-
className: "pt-
|
|
83
|
+
className: "pt-3 pl-8"
|
|
67
84
|
}, iconLeft), /*#__PURE__*/_react.default.createElement("h3", {
|
|
68
85
|
style: styles,
|
|
69
|
-
className:
|
|
86
|
+
className: textClassList
|
|
70
87
|
}, text), rightIcon && /*#__PURE__*/_react.default.createElement("span", {
|
|
71
88
|
style: rightIconStyles,
|
|
72
|
-
className:
|
|
89
|
+
className: rightIconClassList
|
|
73
90
|
}, iconRight));
|
|
74
91
|
};
|
|
75
92
|
|
|
@@ -61,6 +61,7 @@ const Card = _ref => {
|
|
|
61
61
|
buttonBgColor,
|
|
62
62
|
buttonTextColor,
|
|
63
63
|
buttonBorderColor,
|
|
64
|
+
buttonBordered,
|
|
64
65
|
hoverButtonBgColor,
|
|
65
66
|
hoverButtonTextColor,
|
|
66
67
|
hoverButtonBorderColor
|
|
@@ -71,7 +72,7 @@ const Card = _ref => {
|
|
|
71
72
|
let contentWrapperClass = 'px-3 ';
|
|
72
73
|
let btnClass = 'w-full p-3 ';
|
|
73
74
|
let border = bordered ? 'border border-grey border-opacity-100 ' : '';
|
|
74
|
-
let titleFont = titleBold
|
|
75
|
+
let titleFont = titleBold ? 'font-bold' : '';
|
|
75
76
|
let titlePosition = titleLeft ? 'text-left ' : titleRight ? 'text-right ' : 'text-center ';
|
|
76
77
|
let roundedImage = rounded ? 'rounded-t-2xl ' : '';
|
|
77
78
|
let roundedCard = rounded ? 'rounded-2xl ' : '';
|
|
@@ -137,6 +138,7 @@ const Card = _ref => {
|
|
|
137
138
|
ctaText: ctaText,
|
|
138
139
|
buttonType: buttonType,
|
|
139
140
|
url: url,
|
|
141
|
+
border: buttonBordered,
|
|
140
142
|
bgColor: buttonBgColor,
|
|
141
143
|
textColor: buttonTextColor,
|
|
142
144
|
borderColor: buttonBorderColor,
|
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
require("core-js/modules/es.object.assign.js");
|
|
4
|
+
|
|
5
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
6
|
+
|
|
3
7
|
Object.defineProperty(exports, "__esModule", {
|
|
4
8
|
value: true
|
|
5
9
|
});
|
|
6
10
|
exports.default = void 0;
|
|
7
11
|
|
|
8
|
-
require("
|
|
9
|
-
|
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
13
|
|
|
12
14
|
var _reactSlick = _interopRequireDefault(require("react-slick"));
|
|
13
15
|
|
|
16
|
+
var _Icon = _interopRequireDefault(require("../Icon"));
|
|
17
|
+
|
|
14
18
|
require("slick-carousel/slick/slick.css");
|
|
15
19
|
|
|
16
20
|
require("slick-carousel/slick/slick-theme.css");
|
|
@@ -21,8 +25,18 @@ require("./index.css");
|
|
|
21
25
|
|
|
22
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
27
|
|
|
28
|
+
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); }
|
|
29
|
+
|
|
30
|
+
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; }
|
|
31
|
+
|
|
24
32
|
function _extends() { _extends = Object.assign || 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); }
|
|
25
33
|
|
|
34
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
35
|
+
|
|
36
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
37
|
+
|
|
38
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
39
|
+
|
|
26
40
|
//https://react-slick.neostack.com/docs/api/
|
|
27
41
|
const Carousel = _ref => {
|
|
28
42
|
let {
|
|
@@ -36,8 +50,60 @@ const Carousel = _ref => {
|
|
|
36
50
|
slidesToShow,
|
|
37
51
|
slidesToScroll,
|
|
38
52
|
autoplay,
|
|
39
|
-
autoplaySpeed
|
|
53
|
+
autoplaySpeed,
|
|
54
|
+
nextArrowClasses,
|
|
55
|
+
nextArrowOnClick,
|
|
56
|
+
nextArrowStyles,
|
|
57
|
+
previousArrowClasses,
|
|
58
|
+
previousArrowOnClick,
|
|
59
|
+
previousArrowStyles,
|
|
60
|
+
nextArrowIcon,
|
|
61
|
+
nextArrowIconSize,
|
|
62
|
+
previousArrowIcon,
|
|
63
|
+
previousArrowIconSize,
|
|
64
|
+
dotStyles,
|
|
65
|
+
sliderSettingsClasses,
|
|
66
|
+
centerMode,
|
|
67
|
+
centerPadding
|
|
40
68
|
} = _ref;
|
|
69
|
+
const slider = (0, _react.useRef)(null);
|
|
70
|
+
let previousArrowClassList = 'absolute z-10 -left-12 text-red top-2/4 ';
|
|
71
|
+
previousArrowClassList += previousArrowClasses ? previousArrowClasses : '';
|
|
72
|
+
let nextArrowClassList = 'absolute z-10 -right-12 text-red top-2/4 ';
|
|
73
|
+
nextArrowClassList += nextArrowClasses ? nextArrowClasses : '';
|
|
74
|
+
|
|
75
|
+
const SampleNextArrow = () => {
|
|
76
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
77
|
+
id: "ArrowNext",
|
|
78
|
+
className: nextArrowClassList,
|
|
79
|
+
style: _objectSpread({}, nextArrowStyles),
|
|
80
|
+
onClick: () => {
|
|
81
|
+
var _slider$current;
|
|
82
|
+
|
|
83
|
+
return slider === null || slider === void 0 ? void 0 : (_slider$current = slider.current) === null || _slider$current === void 0 ? void 0 : _slider$current.slickNext();
|
|
84
|
+
}
|
|
85
|
+
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
86
|
+
type: nextArrowIcon,
|
|
87
|
+
size: nextArrowIconSize
|
|
88
|
+
}));
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
const SamplePrevArrow = () => {
|
|
92
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
93
|
+
id: "ArrowPrev",
|
|
94
|
+
className: previousArrowClassList,
|
|
95
|
+
style: _objectSpread({}, previousArrowStyles),
|
|
96
|
+
onClick: () => {
|
|
97
|
+
var _slider$current2;
|
|
98
|
+
|
|
99
|
+
return slider === null || slider === void 0 ? void 0 : (_slider$current2 = slider.current) === null || _slider$current2 === void 0 ? void 0 : _slider$current2.slickPrev();
|
|
100
|
+
}
|
|
101
|
+
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
102
|
+
type: previousArrowIcon,
|
|
103
|
+
size: previousArrowIconSize
|
|
104
|
+
}));
|
|
105
|
+
};
|
|
106
|
+
|
|
41
107
|
const settings = {
|
|
42
108
|
dots: dots,
|
|
43
109
|
infinite: infinite,
|
|
@@ -46,13 +112,23 @@ const Carousel = _ref => {
|
|
|
46
112
|
slidesToShow: slidesToShow,
|
|
47
113
|
slidesToScroll: slidesToScroll,
|
|
48
114
|
autoplay: autoplay,
|
|
49
|
-
autoplaySpeed: autoplaySpeed
|
|
115
|
+
autoplaySpeed: autoplaySpeed,
|
|
116
|
+
nextArrow: /*#__PURE__*/_react.default.createElement(SampleNextArrow, null),
|
|
117
|
+
prevArrow: /*#__PURE__*/_react.default.createElement(SamplePrevArrow, null),
|
|
118
|
+
className: sliderSettingsClasses,
|
|
119
|
+
centerMode: centerMode,
|
|
120
|
+
centerPadding: centerPadding,
|
|
121
|
+
appendDots: dots => /*#__PURE__*/_react.default.createElement("div", {
|
|
122
|
+
style: _objectSpread({}, dotStyles)
|
|
123
|
+
}, /*#__PURE__*/_react.default.createElement("ul", null, dots))
|
|
50
124
|
};
|
|
51
125
|
return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
|
|
52
126
|
id: id
|
|
53
127
|
}, {
|
|
54
128
|
className: classes
|
|
55
|
-
}), /*#__PURE__*/_react.default.createElement(_reactSlick.default,
|
|
129
|
+
}), /*#__PURE__*/_react.default.createElement(_reactSlick.default, _extends({
|
|
130
|
+
ref: slider
|
|
131
|
+
}, settings), slides && slides.map(slide => {
|
|
56
132
|
return slide;
|
|
57
133
|
})));
|
|
58
134
|
};
|
|
@@ -74,13 +74,12 @@ const Collapsible = _ref => {
|
|
|
74
74
|
|
|
75
75
|
const padding = title && subtitle ? 'pt-7' : 'pt-4';
|
|
76
76
|
const sizeIcon = iconSize ? iconSize : '1';
|
|
77
|
-
const iconPadding = title && subtitle ? 'pt-6' : 'pt-4';
|
|
78
77
|
const textSubstitutePadding = !title && !subtitle ? 'pb-4' : '';
|
|
79
78
|
let borders = '';
|
|
80
79
|
borders += borderBottom ? 'border-b ' : '';
|
|
81
80
|
borders += borderTop ? 'border-t ' : '';
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
let contentWrapperClasses = 'expandable w-auto ';
|
|
82
|
+
contentWrapperClasses += showBottomLine ? 'border-b' : '';
|
|
84
83
|
return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
|
|
85
84
|
id: id
|
|
86
85
|
}, {
|
|
@@ -92,7 +91,7 @@ const Collapsible = _ref => {
|
|
|
92
91
|
onClick: () => toggleExpanded(),
|
|
93
92
|
className: 'w-auto flex text-center ' + borders
|
|
94
93
|
}, icon && /*#__PURE__*/_react.default.createElement("div", {
|
|
95
|
-
className: 'pl-4 text-left ' +
|
|
94
|
+
className: 'pl-4 text-left ' + padding + ' ' + textSubstitutePadding
|
|
96
95
|
}, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
97
96
|
type: icon,
|
|
98
97
|
size: sizeIcon
|
|
@@ -100,11 +99,11 @@ const Collapsible = _ref => {
|
|
|
100
99
|
className: "w-full pl-4 py-4 text-left"
|
|
101
100
|
}, title && boldTitle ? /*#__PURE__*/_react.default.createElement("h1", null, /*#__PURE__*/_react.default.createElement("b", null, title)) : /*#__PURE__*/_react.default.createElement("h1", null, title), subtitle && /*#__PURE__*/_react.default.createElement("h2", null, /*#__PURE__*/_react.default.createElement("small", null, subtitle))) : null, /*#__PURE__*/_react.default.createElement("div", {
|
|
102
101
|
className: 'w-full pr-8 text-right ' + padding
|
|
103
|
-
}, isDropdown
|
|
102
|
+
}, isDropdown && expanded ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
104
103
|
type: "arrow-up"
|
|
105
104
|
})) : /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
106
105
|
type: "arrow-down"
|
|
107
|
-
}))
|
|
106
|
+
})))), expanded ? /*#__PURE__*/_react.default.createElement("div", {
|
|
108
107
|
style: contentStyles,
|
|
109
108
|
className: contentWrapperClasses
|
|
110
109
|
}, children) : null);
|
|
@@ -23,13 +23,18 @@ const TextAndTitle = _ref => {
|
|
|
23
23
|
textClasses,
|
|
24
24
|
text,
|
|
25
25
|
title,
|
|
26
|
+
titleBold,
|
|
26
27
|
bgColor,
|
|
27
28
|
textColor,
|
|
28
29
|
titleColor
|
|
29
30
|
} = _ref;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
let titleClassList = 'text-2xl ';
|
|
32
|
+
titleClassList += titleBold ? 'font-bold ' : '';
|
|
33
|
+
titleClassList += titleClasses ? titleClasses : '';
|
|
34
|
+
let textClassList = '';
|
|
35
|
+
textClassList += textClasses ? textClasses : '';
|
|
36
|
+
let classList = 'text-center';
|
|
37
|
+
classList += classes ? classes : ''; //---------- Styling ---------------
|
|
33
38
|
|
|
34
39
|
const textStyles = {
|
|
35
40
|
'background-color': bgColor,
|