trepur_components 0.4.2 → 0.4.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.
@@ -9,6 +9,8 @@ exports.imageProps = exports.default = void 0;
9
9
 
10
10
  require("core-js/modules/web.dom-collections.iterator.js");
11
11
 
12
+ require("core-js/modules/es.array.includes.js");
13
+
12
14
  var _react = _interopRequireWildcard(require("react"));
13
15
 
14
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -42,7 +44,8 @@ const imageProps = {
42
44
  overlayColour: _propTypes.default.string,
43
45
  overlayTextColour: _propTypes.default.string,
44
46
  overlayOpacity: _propTypes.default.string,
45
- overlayTextOpacity: _propTypes.default.string
47
+ overlayTextOpacity: _propTypes.default.string,
48
+ overlayText: _propTypes.default.string
46
49
  };
47
50
  exports.imageProps = imageProps;
48
51
 
@@ -51,6 +54,10 @@ const Image = _ref => {
51
54
  imageProps
52
55
  } = _ref;
53
56
  const [isHovering, setIsHovering] = (0, _react.useState)(false);
57
+ const overlayOpacity = imageProps !== null && imageProps !== void 0 && imageProps.overlayOpacity ? imageProps === null || imageProps === void 0 ? void 0 : imageProps.overlayOpacity : 'opacity-100';
58
+ const opacity = isHovering ? overlayOpacity : 'opacity-0';
59
+ const overlayColour = imageProps !== null && imageProps !== void 0 && imageProps.overlayColour ? imageProps === null || imageProps === void 0 ? void 0 : imageProps.overlayColour : 'bg-white';
60
+ const overlayTextColour = imageProps !== null && imageProps !== void 0 && imageProps.overlayTextColour ? imageProps === null || imageProps === void 0 ? void 0 : imageProps.overlayTextColour : 'text-black';
54
61
  const widthClassList = (0, _classnames.default)({
55
62
  'w-6': imageProps.width === 1,
56
63
  'w-10': imageProps.width === 2,
@@ -62,7 +69,9 @@ const Image = _ref => {
62
69
  'w-32': imageProps.width === 8,
63
70
  'w-36': imageProps.width === 9,
64
71
  'w-40': imageProps.width === 10,
65
- 'w-44': imageProps.width === 11
72
+ 'w-44': imageProps.width === 11,
73
+ 'w-full': imageProps.width === undefined,
74
+ 'w-full': ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(imageProps.width)
66
75
  });
67
76
  const heightClassList = (0, _classnames.default)({
68
77
  'h-6': imageProps.height === 1,
@@ -75,35 +84,53 @@ const Image = _ref => {
75
84
  'h-32': imageProps.height === 8,
76
85
  'h-36': imageProps.height === 9,
77
86
  'h-40': imageProps.height === 10,
78
- 'h-44': imageProps.height === 11
87
+ 'h-44': imageProps.height === 11,
88
+ 'h-full': imageProps.height === undefined,
89
+ 'h-full': ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(imageProps.height)
79
90
  });
80
- const rounded = imageProps !== null && imageProps !== void 0 && imageProps.rounded ? 'rounded-full' : '';
81
91
  const classList = (0, _classnames.default)({
82
- [imageProps === null || imageProps === void 0 ? void 0 : imageProps.wrapperClasses]: imageProps === null || imageProps === void 0 ? void 0 : imageProps.wrapperClasses,
83
- [rounded]: imageProps === null || imageProps === void 0 ? void 0 : imageProps.rounded
84
- }, widthClassList, heightClassList);
92
+ [imageProps === null || imageProps === void 0 ? void 0 : imageProps.wrapperClasses]: imageProps === null || imageProps === void 0 ? void 0 : imageProps.wrapperClasses
93
+ });
94
+ const imageClassList = (0, _classnames.default)({
95
+ [imageProps === null || imageProps === void 0 ? void 0 : imageProps.imageClasses]: imageProps === null || imageProps === void 0 ? void 0 : imageProps.imageClasses,
96
+ [widthClassList]: true,
97
+ [heightClassList]: true,
98
+ 'rounded-2xl': imageProps === null || imageProps === void 0 ? void 0 : imageProps.rounded
99
+ });
100
+ const overlayClassList = (0, _classnames.default)({
101
+ [widthClassList]: true,
102
+ [heightClassList]: true,
103
+ [opacity]: true,
104
+ [overlayColour]: true
105
+ }, 'absolute z-10 transition-opacity duration-700');
106
+ const overlayTextWrapperClassList = (0, _classnames.default)({
107
+ [widthClassList]: true,
108
+ [heightClassList]: true,
109
+ [opacity]: true
110
+ }, 'flex absolute z-20 transition-opacity duration-700');
111
+ const overlayTextClassList = (0, _classnames.default)({
112
+ [overlayTextColour]: true
113
+ }, 'm-auto text-center');
85
114
  return /*#__PURE__*/_react.default.createElement("div", {
86
115
  className: classList
87
- }, (imageProps === null || imageProps === void 0 ? void 0 : imageProps.imageName) && /*#__PURE__*/_react.default.createElement("div", {
88
- className: "absolute ".concat(widthClassList, " ").concat(heightClassList, " z-10 ").concat(imageProps === null || imageProps === void 0 ? void 0 : imageProps.overlayColour, " transition-opacity duration-700 ").concat(isHovering ? imageProps === null || imageProps === void 0 ? void 0 : imageProps.overlayOpacity : 'opacity-0')
89
- }), (imageProps === null || imageProps === void 0 ? void 0 : imageProps.imageName) && /*#__PURE__*/_react.default.createElement("div", {
90
- className: "flex absolute ".concat(widthClassList, " ").concat(heightClassList, " z-20 transition-opacity duration-700 ").concat(isHovering ? imageProps === null || imageProps === void 0 ? void 0 : imageProps.overlayTextOpacity : 'opacity-0'),
116
+ }, (imageProps === null || imageProps === void 0 ? void 0 : imageProps.overlayText) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
117
+ className: overlayClassList
118
+ }), /*#__PURE__*/_react.default.createElement("div", {
119
+ className: overlayTextWrapperClassList,
91
120
  onMouseEnter: () => setIsHovering(true),
92
121
  onMouseLeave: () => setIsHovering(false)
93
122
  }, /*#__PURE__*/_react.default.createElement("p", {
94
- className: "m-auto text-center ".concat(imageProps === null || imageProps === void 0 ? void 0 : imageProps.overlayTextColour)
95
- }, imageProps === null || imageProps === void 0 ? void 0 : imageProps.imageName)), /*#__PURE__*/_react.default.createElement("img", _extends({}, (imageProps === null || imageProps === void 0 ? void 0 : imageProps.id) && {
123
+ className: overlayTextClassList
124
+ }, imageProps.overlayText))), /*#__PURE__*/_react.default.createElement("img", _extends({}, (imageProps === null || imageProps === void 0 ? void 0 : imageProps.id) && {
96
125
  id: imageProps === null || imageProps === void 0 ? void 0 : imageProps.id
97
126
  }, {
98
- className: "".concat(widthClassList, " ").concat(heightClassList, " ").concat(rounded, " ").concat(imageProps === null || imageProps === void 0 ? void 0 : imageProps.imageClasses),
127
+ className: imageClassList,
99
128
  src: imageProps === null || imageProps === void 0 ? void 0 : imageProps.image
100
129
  }, (imageProps === null || imageProps === void 0 ? void 0 : imageProps.altText) && {
101
130
  alt: imageProps === null || imageProps === void 0 ? void 0 : imageProps.altText
102
131
  }, (imageProps === null || imageProps === void 0 ? void 0 : imageProps.title) && {
103
132
  title: imageProps === null || imageProps === void 0 ? void 0 : imageProps.title
104
- })), (imageProps === null || imageProps === void 0 ? void 0 : imageProps.imageName) && isHovering && /*#__PURE__*/_react.default.createElement("p", {
105
- className: "".concat(widthClassList, " text-center ").concat(isHovering ? 'block' : 'hidden')
106
- }));
133
+ })));
107
134
  };
108
135
 
109
136
  Image.propTypes = {
@@ -1,12 +1,12 @@
1
1
  "use strict";
2
2
 
3
+ require("core-js/modules/es.object.assign.js");
4
+
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports.default = void 0;
7
9
 
8
- require("core-js/modules/es.object.assign.js");
9
-
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
 
12
12
  var _classnames = _interopRequireDefault(require("classnames"));
@@ -17,11 +17,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
17
17
 
18
18
  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); }
19
19
 
20
+ 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; }
21
+
22
+ 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; }
23
+
24
+ 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; }
25
+
20
26
  const Testimonial = _ref => {
21
27
  let {
22
28
  id,
23
29
  classes,
24
- imageClasses,
25
30
  text,
26
31
  imageProps,
27
32
  companyName,
@@ -42,20 +47,24 @@ const Testimonial = _ref => {
42
47
  [textColor]: textColor,
43
48
  'text-black': !textColor
44
49
  }, 'text-center');
50
+ const wrapperClassList = (0, _classnames.default)({
51
+ [imageProps === null || imageProps === void 0 ? void 0 : imageProps.wrapperClasses]: imageProps === null || imageProps === void 0 ? void 0 : imageProps.wrapperClasses
52
+ }, 'mx-auto');
45
53
  const imageClassList = (0, _classnames.default)({
46
- [imageClasses]: imageClasses
47
- }, 'mx-auto rounded-full w-32 h-32');
48
- imageProps.wrapperClasses = (imageProps === null || imageProps === void 0 ? void 0 : imageProps.wrapperClasses) + ' ' + imageClassList;
54
+ [imageProps === null || imageProps === void 0 ? void 0 : imageProps.imageClasses]: imageProps === null || imageProps === void 0 ? void 0 : imageProps.imageClasses
55
+ }, 'mx-auto');
56
+ imageProps.wrapperClasses = wrapperClassList;
57
+ imageProps.imageClasses = imageClassList;
49
58
  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
50
59
  id: id
51
60
  }, {
52
61
  className: classList
53
62
  }), /*#__PURE__*/_react.default.createElement(_Image.default, {
54
- imageProps: imageProps
63
+ imageProps: _objectSpread({}, imageProps)
55
64
  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", {
56
- className: "text-md md:text-lg"
65
+ className: "text-md md:text-md"
57
66
  }, companyName, " "), /*#__PURE__*/_react.default.createElement("p", {
58
- className: "text-md md:text-lg"
67
+ className: "text-md md:text-sm"
59
68
  }, position), /*#__PURE__*/_react.default.createElement("p", null, positionStartDate, " - ", positionEndDate), /*#__PURE__*/_react.default.createElement("p", null, text), /*#__PURE__*/_react.default.createElement("p", {
60
69
  className: authorTextColor
61
70
  }, authorsName, " - ", authorsPosition, ": ", date)));
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.4.2",
5
+ "version": "0.4.4",
6
6
  "private": false,
7
7
  "keywords": [
8
8
  "react",