trepur_components 0.2.23 → 0.2.26

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 (9) hide show
  1. package/dist/components/AlertBar/index.js +24 -7
  2. package/dist/components/Button/index.js +3 -2
  3. package/dist/components/Card/index.js +3 -1
  4. package/dist/components/Carousel/index.js +80 -8
  5. package/dist/components/Collapsible/index.js +5 -6
  6. package/dist/components/Input/index.js +33 -9
  7. package/dist/components/TextAndTitle/index.js +8 -3
  8. package/dist/components/TextArea/index.js +71 -0
  9. 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/Button/index.js CHANGED
@@ -46,7 +46,8 @@ const Button = _ref => {
46
46
  buttonType,
47
47
  buttonDesign,
48
48
  border,
49
- rounded
49
+ rounded,
50
+ iconBrand
50
51
  } = _ref;
51
52
  let padding = buttonType === 'social' ? 'px-1 py-1 ' : 'px-8 ';
52
53
  let externalPadding = buttonType === 'external' ? 'py-3 ' : 'py-2 ';
@@ -65,7 +66,7 @@ const Button = _ref => {
65
66
  classList += slideClasses;
66
67
  }
67
68
 
68
- const iconClassList = buttonType === 'social' ? 'fa-brands' : '';
69
+ const iconClassList = iconBrand ? 'fa-brands' : '';
69
70
 
70
71
  let iconLeft = buttonLeftIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
71
72
  classes: "pr-2",
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,58 @@ const Carousel = _ref => {
36
48
  slidesToShow,
37
49
  slidesToScroll,
38
50
  autoplay,
39
- autoplaySpeed
51
+ autoplaySpeed,
52
+ nextArrowClasses,
53
+ nextArrowStyles,
54
+ previousArrowClasses,
55
+ previousArrowStyles,
56
+ nextArrowIcon,
57
+ nextArrowIconSize,
58
+ previousArrowIcon,
59
+ previousArrowIconSize,
60
+ dotStyles,
61
+ sliderSettingsClasses,
62
+ centerMode,
63
+ centerPadding
40
64
  } = _ref;
65
+ const slider = (0, _react.useRef)(null);
66
+ let previousArrowClassList = 'absolute z-10 -left-12 text-red top-2/4 ';
67
+ previousArrowClassList += previousArrowClasses ? previousArrowClasses : '';
68
+ let nextArrowClassList = 'absolute z-10 -right-12 text-red top-2/4 ';
69
+ nextArrowClassList += nextArrowClasses ? nextArrowClasses : '';
70
+
71
+ const SampleNextArrow = () => {
72
+ return /*#__PURE__*/_react.default.createElement("div", {
73
+ id: "ArrowNext",
74
+ className: nextArrowClassList,
75
+ style: _objectSpread({}, nextArrowStyles),
76
+ onClick: () => {
77
+ var _slider$current;
78
+
79
+ return slider === null || slider === void 0 ? void 0 : (_slider$current = slider.current) === null || _slider$current === void 0 ? void 0 : _slider$current.slickNext();
80
+ }
81
+ }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
82
+ type: nextArrowIcon,
83
+ size: nextArrowIconSize
84
+ }));
85
+ };
86
+
87
+ const SamplePrevArrow = () => {
88
+ return /*#__PURE__*/_react.default.createElement("div", {
89
+ id: "ArrowPrev",
90
+ className: previousArrowClassList,
91
+ style: _objectSpread({}, previousArrowStyles),
92
+ onClick: () => {
93
+ var _slider$current2;
94
+
95
+ return slider === null || slider === void 0 ? void 0 : (_slider$current2 = slider.current) === null || _slider$current2 === void 0 ? void 0 : _slider$current2.slickPrev();
96
+ }
97
+ }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
98
+ type: previousArrowIcon,
99
+ size: previousArrowIconSize
100
+ }));
101
+ };
102
+
41
103
  const settings = {
42
104
  dots: dots,
43
105
  infinite: infinite,
@@ -46,13 +108,23 @@ const Carousel = _ref => {
46
108
  slidesToShow: slidesToShow,
47
109
  slidesToScroll: slidesToScroll,
48
110
  autoplay: autoplay,
49
- autoplaySpeed: autoplaySpeed
111
+ autoplaySpeed: autoplaySpeed,
112
+ nextArrow: /*#__PURE__*/_react.default.createElement(SampleNextArrow, null),
113
+ prevArrow: /*#__PURE__*/_react.default.createElement(SamplePrevArrow, null),
114
+ className: sliderSettingsClasses,
115
+ centerMode: centerMode,
116
+ centerPadding: centerPadding,
117
+ appendDots: dots => /*#__PURE__*/_react.default.createElement("div", {
118
+ style: _objectSpread({}, dotStyles)
119
+ }, /*#__PURE__*/_react.default.createElement("ul", null, dots))
50
120
  };
51
121
  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
52
122
  id: id
53
123
  }, {
54
124
  className: classes
55
- }), /*#__PURE__*/_react.default.createElement(_reactSlick.default, settings, slides && slides.map(slide => {
125
+ }), /*#__PURE__*/_react.default.createElement(_reactSlick.default, _extends({
126
+ ref: slider
127
+ }, settings), slides && slides.map(slide => {
56
128
  return slide;
57
129
  })));
58
130
  };
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
@@ -19,31 +19,55 @@ const Input = _ref => {
19
19
  let {
20
20
  id,
21
21
  classes,
22
+ autoComplete,
23
+ disabled,
24
+ formId,
25
+ height,
26
+ maxLength,
27
+ minLength,
28
+ pattern,
29
+ required,
30
+ readOnly,
22
31
  label,
32
+ type,
33
+ name,
23
34
  placeholder,
24
35
  bold,
25
36
  onChange,
26
- name,
27
- type
37
+ onBlur,
38
+ onFocus
28
39
  } = _ref;
29
- let classList = 'flex flex-col w-96 ' + classes;
30
- let labelClasses = bold ? 'font-bold w-auto' : 'w-auto';
31
- let inputClasses = 'border h-12 pl-2';
40
+ let classList = 'flex flex-col ';
41
+ classList += classes ? classes : '';
42
+ let labelClassList = 'w-auto ';
43
+ labelClassList += bold ? 'font-bold ' : '';
44
+ let inputClassList = 'border px-2';
32
45
  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
33
46
  id: id
34
47
  }, {
35
48
  className: classList
36
49
  }), label && /*#__PURE__*/_react.default.createElement("label", {
37
50
  id: "label-".concat(id),
38
- className: labelClasses,
51
+ className: labelClassList,
39
52
  htmlFor: "input-".concat(id)
40
- }, /*#__PURE__*/_react.default.createElement("b", null, label)), /*#__PURE__*/_react.default.createElement("input", {
53
+ }, label), /*#__PURE__*/_react.default.createElement("input", {
41
54
  id: "input-".concat(id),
42
- className: inputClasses,
55
+ className: inputClassList,
56
+ autoComplete: autoComplete,
57
+ disabled: disabled,
58
+ form: formId,
59
+ height: height,
60
+ maxLength: maxLength,
61
+ minLength: minLength,
62
+ pattern: pattern,
63
+ required: required,
64
+ readOnly: readOnly,
43
65
  type: type,
44
66
  name: name,
45
67
  placeholder: placeholder,
46
- onChange: onChange
68
+ onChange: onChange,
69
+ onBlur: onBlur,
70
+ onFocus: onFocus
47
71
  }));
48
72
  };
49
73
 
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/dist/components/TextArea/index.js ADDED
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ require("core-js/modules/es.object.assign.js");
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ require("../index.css");
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ 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); }
17
+
18
+ const TextArea = _ref => {
19
+ let {
20
+ id,
21
+ classes,
22
+ label,
23
+ placeholder,
24
+ bold,
25
+ onChange,
26
+ name,
27
+ disabled,
28
+ rows,
29
+ cols,
30
+ autoFocus,
31
+ formId,
32
+ maxLength,
33
+ readOnly,
34
+ required,
35
+ onBlur,
36
+ onFocus
37
+ } = _ref;
38
+ let classList = 'flex flex-col ';
39
+ classList += classes ? classes : '';
40
+ let labelClassList = 'w-auto ';
41
+ labelClassList += bold ? 'font-bold ' : '';
42
+ let textAreaClassList = 'border px-2';
43
+ return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
44
+ id: id
45
+ }, {
46
+ className: classList
47
+ }), label && /*#__PURE__*/_react.default.createElement("label", {
48
+ id: "label-".concat(id),
49
+ className: labelClassList,
50
+ htmlFor: "text-area-".concat(id)
51
+ }, label), /*#__PURE__*/_react.default.createElement("textarea", {
52
+ id: "text-area-".concat(id),
53
+ className: textAreaClassList,
54
+ autoFocus: autoFocus,
55
+ form: formId,
56
+ maxLength: maxLength,
57
+ readOnly: readOnly,
58
+ required: required,
59
+ disabled: disabled,
60
+ rows: rows,
61
+ cols: cols,
62
+ name: name,
63
+ placeholder: placeholder,
64
+ onChange: onChange,
65
+ onFocus: onFocus,
66
+ onBlur: onBlur
67
+ }));
68
+ };
69
+
70
+ var _default = TextArea;
71
+ exports.default = _default;
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.23",
5
+ "version": "0.2.26",
6
6
  "private": false,
7
7
  "keywords": [
8
8
  "react",