trepur_components 0.2.22 → 0.2.25

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.
Files changed (7) hide show
  1. package/dist/components/AlertBar/index.js +24 -7
  2. package/dist/components/Card/index.js +3 -1
  3. package/dist/components/Carousel/index.js +82 -8
  4. package/dist/components/Collapsible/index.js +5 -6
  5. package/dist/components/Input/index.js +8 -4
  6. package/dist/components/TextAndTitle/index.js +8 -3
  7. package/package.json +1 -1
package/dist/components/AlertBar/index.js CHANGED
@@ -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
- let classList = 'w-parent flex text-center h-8 ';
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-1 left-5 pl-8"
83
+ className: "pt-3 pl-8"
67
84
  }, iconLeft), /*#__PURE__*/_react.default.createElement("h3", {
68
85
  style: styles,
69
- className: "w-full text-center pt-1 pl-8"
86
+ className: textClassList
70
87
  }, text), rightIcon && /*#__PURE__*/_react.default.createElement("span", {
71
88
  style: rightIconStyles,
72
- className: "px-8 pt-1 float-right"
89
+ className: rightIconClassList
73
90
  }, iconRight));
74
91
  };
75
92
 
package/dist/components/Card/index.js CHANGED
@@ -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 && 'font-bold';
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,
package/dist/components/Carousel/index.js CHANGED
@@ -1,28 +1,40 @@
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("core-js/modules/es.object.assign.js");
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");
17
21
 
18
22
  require("../index.css");
19
23
 
20
- require("./index.css");
21
-
22
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
25
 
26
+ 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); }
27
+
28
+ 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; }
29
+
24
30
  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
31
 
32
+ 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; }
33
+
34
+ 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; }
35
+
36
+ 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; }
37
+
26
38
  //https://react-slick.neostack.com/docs/api/
27
39
  const Carousel = _ref => {
28
40
  let {
@@ -36,8 +48,60 @@ const Carousel = _ref => {
36
48
  slidesToShow,
37
49
  slidesToScroll,
38
50
  autoplay,
39
- autoplaySpeed
51
+ autoplaySpeed,
52
+ nextArrowClasses,
53
+ nextArrowOnClick,
54
+ nextArrowStyles,
55
+ previousArrowClasses,
56
+ previousArrowOnClick,
57
+ previousArrowStyles,
58
+ nextArrowIcon,
59
+ nextArrowIconSize,
60
+ previousArrowIcon,
61
+ previousArrowIconSize,
62
+ dotStyles,
63
+ sliderSettingsClasses,
64
+ centerMode,
65
+ centerPadding
40
66
  } = _ref;
67
+ const slider = (0, _react.useRef)(null);
68
+ let previousArrowClassList = 'absolute z-10 -left-12 text-red top-2/4 ';
69
+ previousArrowClassList += previousArrowClasses ? previousArrowClasses : '';
70
+ let nextArrowClassList = 'absolute z-10 -right-12 text-red top-2/4 ';
71
+ nextArrowClassList += nextArrowClasses ? nextArrowClasses : '';
72
+
73
+ const SampleNextArrow = () => {
74
+ return /*#__PURE__*/_react.default.createElement("div", {
75
+ id: "ArrowNext",
76
+ className: nextArrowClassList,
77
+ style: _objectSpread({}, nextArrowStyles),
78
+ onClick: () => {
79
+ var _slider$current;
80
+
81
+ return slider === null || slider === void 0 ? void 0 : (_slider$current = slider.current) === null || _slider$current === void 0 ? void 0 : _slider$current.slickNext();
82
+ }
83
+ }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
84
+ type: nextArrowIcon,
85
+ size: nextArrowIconSize
86
+ }));
87
+ };
88
+
89
+ const SamplePrevArrow = () => {
90
+ return /*#__PURE__*/_react.default.createElement("div", {
91
+ id: "ArrowPrev",
92
+ className: previousArrowClassList,
93
+ style: _objectSpread({}, previousArrowStyles),
94
+ onClick: () => {
95
+ var _slider$current2;
96
+
97
+ return slider === null || slider === void 0 ? void 0 : (_slider$current2 = slider.current) === null || _slider$current2 === void 0 ? void 0 : _slider$current2.slickPrev();
98
+ }
99
+ }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
100
+ type: previousArrowIcon,
101
+ size: previousArrowIconSize
102
+ }));
103
+ };
104
+
41
105
  const settings = {
42
106
  dots: dots,
43
107
  infinite: infinite,
@@ -46,13 +110,23 @@ const Carousel = _ref => {
46
110
  slidesToShow: slidesToShow,
47
111
  slidesToScroll: slidesToScroll,
48
112
  autoplay: autoplay,
49
- autoplaySpeed: autoplaySpeed
113
+ autoplaySpeed: autoplaySpeed,
114
+ nextArrow: /*#__PURE__*/_react.default.createElement(SampleNextArrow, null),
115
+ prevArrow: /*#__PURE__*/_react.default.createElement(SamplePrevArrow, null),
116
+ className: sliderSettingsClasses,
117
+ centerMode: centerMode,
118
+ centerPadding: centerPadding,
119
+ appendDots: dots => /*#__PURE__*/_react.default.createElement("div", {
120
+ style: _objectSpread({}, dotStyles)
121
+ }, /*#__PURE__*/_react.default.createElement("ul", null, dots))
50
122
  };
51
123
  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
52
124
  id: id
53
125
  }, {
54
126
  className: classes
55
- }), /*#__PURE__*/_react.default.createElement(_reactSlick.default, settings, slides && slides.map(slide => {
127
+ }), /*#__PURE__*/_react.default.createElement(_reactSlick.default, _extends({
128
+ ref: slider
129
+ }, settings), slides && slides.map(slide => {
56
130
  return slide;
57
131
  })));
58
132
  };
package/dist/components/Collapsible/index.js CHANGED
@@ -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
- const bottomLine = showBottomLine ? 'border-b' : '';
83
- const contentWrapperClasses = 'expandable w-auto ' + bottomLine;
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 ' + iconPadding + ' ' + textSubstitutePadding
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 ? expanded ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
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
- })) : null)), expanded ? /*#__PURE__*/_react.default.createElement("div", {
106
+ })))), expanded ? /*#__PURE__*/_react.default.createElement("div", {
108
107
  style: contentStyles,
109
108
  className: contentWrapperClasses
110
109
  }, children) : null);
package/dist/components/Input/index.js CHANGED
@@ -21,8 +21,10 @@ const Input = _ref => {
21
21
  classes,
22
22
  label,
23
23
  placeholder,
24
- inputType,
25
- bold
24
+ bold,
25
+ onChange,
26
+ name,
27
+ type
26
28
  } = _ref;
27
29
  let classList = 'flex flex-col w-96 ' + classes;
28
30
  let labelClasses = bold ? 'font-bold w-auto' : 'w-auto';
@@ -38,8 +40,10 @@ const Input = _ref => {
38
40
  }, /*#__PURE__*/_react.default.createElement("b", null, label)), /*#__PURE__*/_react.default.createElement("input", {
39
41
  id: "input-".concat(id),
40
42
  className: inputClasses,
41
- type: inputType,
42
- placeholder: placeholder
43
+ type: type,
44
+ name: name,
45
+ placeholder: placeholder,
46
+ onChange: onChange
43
47
  }));
44
48
  };
45
49
 
package/dist/components/TextAndTitle/index.js CHANGED
@@ -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
- const titleClassList = titleClasses && titleClasses + ' text-2xl';
31
- const textClassList = textClasses && textClasses;
32
- const classList = classes + ' text-center'; //---------- Styling ---------------
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,
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "trepur_components",
3
3
  "description": "component lib",
4
4
  "author": "trepur_ttenneb",
5
- "version": "0.2.22",
5
+ "version": "0.2.25",
6
6
  "private": false,
7
7
  "keywords": [
8
8
  "react",