trepur_components 0.2.74 → 0.3.0

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 (3) hide show
  1. package/dist/components/Button/index.js +144 -175
  2. package/dist/components/CarouselV2/index.js +14 -18
  3. package/package.json +1 -1
package/dist/components/Button/index.js CHANGED
@@ -1,5 +1,7 @@
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
  });
@@ -7,15 +9,15 @@ exports.default = void 0;
7
9
 
8
10
  require("core-js/modules/web.dom-collections.iterator.js");
9
11
 
10
- require("core-js/modules/es.object.assign.js");
11
-
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
 
14
14
  var _Icon = _interopRequireDefault(require("../Icon"));
15
15
 
16
- require("../index.css");
16
+ var _propTypes = _interopRequireDefault(require("prop-types"));
17
+
18
+ var _classnames = _interopRequireDefault(require("classnames"));
17
19
 
18
- require("./index.css");
20
+ require("../index.css");
19
21
 
20
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
23
 
@@ -27,199 +29,166 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
27
29
 
28
30
  const Button = _ref => {
29
31
  let {
30
- buttonId,
31
- buttonClasses,
32
- buttonText,
33
- buttonOnClick,
34
- buttonLeftIcon,
35
- buttonRightIcon,
36
- buttonCenterIcon,
37
- iconHollow,
38
- buttonBgColor,
39
- buttonTextColor,
40
- buttonBorderColor,
41
- buttonHoverBgColor,
42
- buttonHoverTextColor,
43
- buttonHoverBorderColor,
44
- buttonHoverText,
45
- buttonType,
46
- buttonUrl,
47
- buttonDesign,
48
- buttonBordered,
49
- buttonRounded,
50
- buttonIconBrand,
51
- buttonDisabled,
52
- iconSize
32
+ buttonProps
53
33
  } = _ref;
54
- let padding = buttonType === 'social' ? 'px-1 py-1 ' : buttonType === 'icon' ? 'px-3 ' : 'px-8 ';
55
- let externalPadding = buttonType === 'external' ? 'py-3 ' : 'py-2 ';
56
- let borderClassList = buttonBordered ? 'border-2 ' : '';
57
- let roundedClassList = buttonRounded ? 'rounded-full ' : '';
58
- let standardClasses = ' rounded-lg text-black transition-backgroundColor duration-500 transform ' + borderClassList + roundedClassList;
59
- let slideClasses = ' btn px-8 text-white border-2 bg-gray hover:bg-brand-primary hover:text-black ';
60
- let classList = padding;
61
- classList += externalPadding;
62
- classList += buttonClasses ? buttonClasses : '';
63
- const design = buttonDesign ? buttonDesign : 'standard';
64
-
65
- if (design === 'standard') {
66
- classList += standardClasses;
67
- } else if (design === 'slide') {
68
- classList += slideClasses;
69
- }
70
-
71
- const iconClassList = buttonIconBrand ? 'fa-brands' : '';
72
-
73
- let iconLeft = buttonLeftIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
34
+ const [hovering, setHovering] = (0, _react.useState)(false);
35
+ const design = buttonProps.design ? buttonProps.design : 'standard';
36
+ const padding = (0, _classnames.default)({
37
+ 'px-1 py-1': buttonProps.type === 'social',
38
+ 'px-3': buttonProps.type === 'icon',
39
+ 'px-8': buttonProps.type !== 'social' && buttonProps.type !== 'icon'
40
+ }, 'py-2');
41
+ const borderClassList = (0, _classnames.default)({
42
+ 'border-2': buttonProps.bordered
43
+ });
44
+ const roundedClassList = (0, _classnames.default)({
45
+ 'rounded-full': buttonProps.rounded,
46
+ 'rounded-none': !buttonProps.rounded
47
+ });
48
+ const standardClasses = (0, _classnames.default)({
49
+ [borderClassList]: borderClassList,
50
+ [roundedClassList]: roundedClassList
51
+ }, "rounded-lg transition-backgroundColor \n duration-500 transform");
52
+ const slideClasses = (0, _classnames.default)("btn px-8 border-2 ");
53
+ const loadingClasses = (0, _classnames.default)({
54
+ 'invisible': !buttonProps.isLoading
55
+ }, 'absolute left-2/4 top-1/4 -ml-2');
56
+ const colours = (0, _classnames.default)({
57
+ [buttonProps.hoverBgColor]: buttonProps.hoverBgColor,
58
+ [buttonProps.hoverTextColor]: buttonProps.hoverTextColor,
59
+ [buttonProps.hoverBorderColor]: buttonProps.hoverBorderColor,
60
+ [buttonProps.bgColor]: buttonProps.bgColor,
61
+ [buttonProps.textColor]: buttonProps.textColor,
62
+ [buttonProps.borderColor]: buttonProps.borderColor
63
+ });
64
+ const classList = (0, _classnames.default)({
65
+ [padding]: true,
66
+ [colours]: true,
67
+ [buttonProps.classes]: buttonProps.classes,
68
+ [standardClasses]: design === 'standard',
69
+ [slideClasses]: design === 'slide'
70
+ });
71
+ const iconClassList = (0, _classnames.default)({
72
+ 'fa-brands': buttonProps.iconBrand
73
+ });
74
+
75
+ let iconLeft = buttonProps.leftIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
74
76
  classes: "pr-2",
75
- type: buttonLeftIcon
76
- }, iconHollow && {
77
- hollow: iconHollow
77
+ type: buttonProps.leftIcon
78
+ }, buttonProps.iconHollow && {
79
+ hollow: buttonProps.iconHollow
78
80
  }));
79
81
 
80
- let iconRight = buttonRightIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
82
+ let iconRight = buttonProps.rightIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
81
83
  classes: "pl-2",
82
- type: buttonRightIcon
83
- }, iconHollow && {
84
- hollow: iconHollow
84
+ type: buttonProps.rightIcon
85
+ }, buttonProps.iconHollow && {
86
+ hollow: buttonProps.iconHollow
85
87
  }));
86
88
 
87
- let iconCenter = buttonCenterIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
88
- size: iconSize,
89
+ let iconCenter = buttonProps.centerIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
90
+ size: buttonProps.iconSize,
89
91
  classes: iconClassList,
90
- type: buttonCenterIcon
91
- }, iconHollow && {
92
- hollow: iconHollow
93
- })); //---------- Styling ---------------
94
-
95
-
96
- const [styles, setStyles] = (0, _react.useState)(!buttonDisabled ? {
97
- 'backgroundColor': buttonBgColor ? buttonBgColor : 'white',
98
- color: buttonTextColor ? buttonTextColor : 'black',
99
- 'borderColor': buttonBorderColor ? buttonBorderColor : 'black'
100
- } : {
101
- 'backgroundColor': 'white',
102
- color: 'grey',
103
- 'borderColor': 'grey'
104
- });
105
- const [hovering, setHovering] = (0, _react.useState)(false);
92
+ type: buttonProps.centerIcon
93
+ }, buttonProps.iconHollow && {
94
+ hollow: buttonProps.iconHollow
95
+ }));
106
96
 
107
- const setHoverState = isHovering => {
108
- if (isHovering) {
109
- setHovering(true);
110
- setStyles({
111
- 'backgroundColor': buttonHoverBgColor ? buttonHoverBgColor : 'black',
112
- color: buttonHoverTextColor ? buttonHoverTextColor : 'white',
113
- 'borderColor': buttonHoverBorderColor ? buttonHoverBorderColor : 'black'
114
- });
115
- } else {
116
- setHovering(false);
117
- setStyles({
118
- 'backgroundColor': buttonBgColor ? buttonBgColor : 'white',
119
- color: buttonTextColor ? buttonTextColor : 'black',
120
- 'borderColor': buttonBorderColor ? buttonBorderColor : 'black'
121
- });
122
- }
123
- }; //-----------------------------------
124
-
125
-
126
- if (buttonType === 'external') {
127
- return /*#__PURE__*/_react.default.createElement("a", {
128
- target: "_blank",
129
- href: buttonUrl
130
- }, /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
131
- id: buttonId
97
+ if (['internal', 'external'].includes(buttonProps.type)) {
98
+ return /*#__PURE__*/_react.default.createElement("a", _extends({}, buttonProps.type === 'external' && {
99
+ target: '_blank'
132
100
  }, {
133
- className: classList,
134
- style: styles,
135
- type: "button",
136
- onMouseOver: () => setHoverState(true),
137
- onMouseOut: () => setHoverState(false)
138
- }, buttonOnClick && {
139
- onClick: buttonOnClick
140
- }, buttonDisabled && {
141
- disabled: buttonDisabled
142
- }), buttonLeftIcon && iconLeft, hovering ? buttonHoverText ? buttonHoverText : buttonText : buttonText, buttonRightIcon && iconRight));
143
- } else if (buttonType === 'internal') {
144
- return /*#__PURE__*/_react.default.createElement("a", {
145
- href: buttonUrl
146
- }, /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
147
- id: buttonId
148
- }, {
149
- className: classList,
150
- style: styles,
151
- type: "button",
152
- onMouseOver: () => setHoverState(true),
153
- onMouseOut: () => setHoverState(false)
154
- }, buttonOnClick && {
155
- onClick: buttonOnClick
156
- }, buttonDisabled && {
157
- disabled: buttonDisabled
158
- }), buttonLeftIcon && iconLeft, hovering ? buttonHoverText ? buttonHoverText : buttonText : buttonText, buttonRightIcon && iconRight));
159
- } else if (buttonType === 'social') {
160
- return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
161
- id: buttonId
101
+ href: buttonProps.url
102
+ }), /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps.id && {
103
+ id: buttonProps.id
162
104
  }, {
163
105
  className: classList,
164
- style: styles,
165
106
  type: "button",
166
- onMouseOver: () => setHoverState(true),
167
- onMouseOut: () => setHoverState(false)
168
- }, buttonOnClick && {
169
- onClick: buttonOnClick
170
- }, buttonDisabled && {
171
- disabled: buttonDisabled
172
- }), buttonCenterIcon && iconCenter);
173
- } else if (buttonType === 'icon') {
174
- return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
175
- id: buttonId
107
+ "aria-busy": buttonProps.isLoading,
108
+ onMouseOver: () => setHovering(true),
109
+ onMouseOut: () => setHovering(false)
110
+ }, buttonProps.onClick && {
111
+ onClick: buttonProps.onClick
112
+ }, buttonProps.disabled && {
113
+ disabled: buttonProps.disabled
114
+ }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
115
+ className: buttonProps.isLoading && 'invisible'
116
+ }, buttonProps.leftIcon && iconLeft, hovering ? buttonProps.hoverText ? buttonProps.hoverText : buttonProps.text : buttonProps.text, buttonProps.rightIcon && iconRight), /*#__PURE__*/_react.default.createElement("div", {
117
+ className: loadingClasses
118
+ }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
119
+ type: "spinner",
120
+ animation: "pulse"
121
+ })))));
122
+ } else if (['social', 'icon'].includes(buttonProps.type)) {
123
+ return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps.id && {
124
+ id: buttonProps.id
176
125
  }, {
177
126
  className: classList,
178
- style: styles,
179
127
  type: "button",
180
- onMouseOver: () => setHoverState(true),
181
- onMouseOut: () => setHoverState(false)
182
- }, buttonOnClick && {
183
- onClick: buttonOnClick
184
- }, buttonDisabled && {
185
- disabled: buttonDisabled
186
- }), buttonCenterIcon && iconCenter);
187
- } else if (buttonType === 'loading') {
188
- return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
189
- id: buttonId
190
- }, {
191
- className: 'flex ' + classList,
192
- type: "button",
193
- style: styles,
194
- type: buttonType,
195
- onMouseOver: () => setHoverState(true),
196
- onMouseOut: () => setHoverState(false)
197
- }, buttonOnClick && {
198
- onClick: buttonOnClick
199
- }, buttonDisabled && {
200
- disabled: buttonDisabled
201
- }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
128
+ "aria-busy": buttonProps.isLoading,
129
+ onMouseOver: () => setHovering(true),
130
+ onMouseOut: () => setHovering(false)
131
+ }, buttonProps.onClick && {
132
+ onClick: buttonProps.onClick
133
+ }, buttonProps.disabled && {
134
+ disabled: buttonProps.disabled
135
+ }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
136
+ className: buttonProps.isLoading && 'invisible'
137
+ }, buttonProps.centerIcon && iconCenter), /*#__PURE__*/_react.default.createElement("div", {
138
+ className: loadingClasses
139
+ }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
202
140
  type: "spinner",
203
141
  animation: "pulse"
204
- })), /*#__PURE__*/_react.default.createElement("p", {
205
- className: "pl-3"
206
- }, "Loading"));
207
- }
208
-
209
- return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
210
- id: buttonId
142
+ }))));
143
+ } else return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps.id && {
144
+ id: buttonProps.id
211
145
  }, {
212
146
  className: classList,
213
- style: styles,
214
147
  type: "button",
215
- onMouseOver: () => setHoverState(true),
216
- onMouseOut: () => setHoverState(false)
217
- }, buttonOnClick && {
218
- onClick: buttonOnClick
219
- }, buttonDisabled && {
220
- disabled: buttonDisabled
221
- }), buttonLeftIcon && iconLeft, hovering ? buttonHoverText ? buttonHoverText : buttonText : buttonText, buttonRightIcon && iconRight);
148
+ "aria-busy": buttonProps.isLoading,
149
+ onMouseOver: () => setHovering(true),
150
+ onMouseOut: () => setHovering(false)
151
+ }, buttonProps.onClick && {
152
+ onClick: buttonProps.onClick
153
+ }, buttonProps.disabled && {
154
+ disabled: buttonProps.disabled
155
+ }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
156
+ className: buttonProps.isLoading && 'invisible'
157
+ }, buttonProps.leftIcon && iconLeft, hovering ? buttonProps.hoverText ? buttonProps.hoverText : buttonProps.text : buttonProps.text, buttonProps.rightIcon && iconRight), /*#__PURE__*/_react.default.createElement("div", {
158
+ className: loadingClasses
159
+ }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
160
+ type: "spinner",
161
+ animation: "pulse"
162
+ }))));
222
163
  };
223
164
 
165
+ Button.propTypes = {
166
+ buttonProps: _propTypes.default.shape({
167
+ id: _propTypes.default.string,
168
+ classes: _propTypes.default.string,
169
+ text: _propTypes.default.string,
170
+ onClick: _propTypes.default.func,
171
+ leftIcon: _propTypes.default.string,
172
+ rightIcon: _propTypes.default.string,
173
+ centerIcon: _propTypes.default.string,
174
+ iconHollow: _propTypes.default.bool,
175
+ bgColor: _propTypes.default.string,
176
+ textColor: _propTypes.default.string,
177
+ borderColor: _propTypes.default.string,
178
+ hoverBgColor: _propTypes.default.string,
179
+ hoverTextColor: _propTypes.default.string,
180
+ hoverBorderColor: _propTypes.default.string,
181
+ hoverText: _propTypes.default.string,
182
+ type: _propTypes.default.string,
183
+ url: _propTypes.default.string,
184
+ design: _propTypes.default.string,
185
+ bordered: _propTypes.default.bool,
186
+ rounded: _propTypes.default.bool,
187
+ iconBrand: _propTypes.default.string,
188
+ disabled: _propTypes.default.bool,
189
+ iconSize: _propTypes.default.string,
190
+ isLoading: _propTypes.default.bool
191
+ })
192
+ };
224
193
  var _default = Button;
225
194
  exports.default = _default;
package/dist/components/CarouselV2/index.js CHANGED
@@ -30,7 +30,7 @@ const CarouselV2 = _ref => {
30
30
  classes,
31
31
  breakpoints,
32
32
  defaultAnimation,
33
- disabled,
33
+ //disabled,
34
34
  drag,
35
35
  dragSpeed,
36
36
  initial,
@@ -61,22 +61,18 @@ const CarouselV2 = _ref => {
61
61
  spacing,
62
62
  number,
63
63
  origin,
64
- showDots,
65
- showArrows,
66
- arrowColours,
67
- disabledArrowColour,
68
- dotColours,
69
- activeDotColour
64
+ arrows,
65
+ dots
70
66
  } = _ref;
71
67
  const classList = "".concat(classes);
72
- const dotClasses = "w-4 h-4 cursor-pointer focus:bg-".concat(activeDotColour, " rounded-full mx-1 ");
68
+ const dotClasses = "w-4 h-4 cursor-pointer focus:".concat(dots.activeColours, " rounded-full mx-1 ");
73
69
  const [currentSlide, setCurrentSlide] = (0, _react.useState)(0);
74
70
  const [loaded, setLoaded] = (0, _react.useState)(false);
75
71
  const [sliderRef, instanceRef] = (0, _react2.useKeenSlider)({
76
72
  initial: initial,
77
73
  breakpoints: breakpoints,
78
74
  defaultAnimation: defaultAnimation,
79
- disabled: disabled,
75
+ //disabled: disabled,
80
76
  drag: drag,
81
77
  dragSpeed: dragSpeed,
82
78
  initial: initial,
@@ -125,7 +121,7 @@ const CarouselV2 = _ref => {
125
121
  }), /*#__PURE__*/_react.default.createElement("div", {
126
122
  ref: sliderRef,
127
123
  className: "keen-slider"
128
- }, slides && slides), showArrows && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Arrow, {
124
+ }, slides && slides), arrows.visible && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Arrow, {
129
125
  left: true,
130
126
  onClick: e => {
131
127
  var _instanceRef$current;
@@ -133,8 +129,7 @@ const CarouselV2 = _ref => {
133
129
  return e.stopPropagation() || ((_instanceRef$current = instanceRef.current) === null || _instanceRef$current === void 0 ? void 0 : _instanceRef$current.prev());
134
130
  },
135
131
  disabled: currentSlide === 0,
136
- arrowColours: arrowColours,
137
- disabledArrowColour: disabledArrowColour
132
+ arrows: arrows
138
133
  }), /*#__PURE__*/_react.default.createElement(Arrow, {
139
134
  onClick: e => {
140
135
  var _instanceRef$current2;
@@ -142,9 +137,8 @@ const CarouselV2 = _ref => {
142
137
  return e.stopPropagation() || ((_instanceRef$current2 = instanceRef.current) === null || _instanceRef$current2 === void 0 ? void 0 : _instanceRef$current2.next());
143
138
  },
144
139
  disabled: currentSlide === instanceRef.current.track.details.slides.length - 1,
145
- arrowColours: arrowColours,
146
- disabledArrowColour: disabledArrowColour
147
- }))), showDots && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement("div", {
140
+ arrows: arrows
141
+ }))), dots.visible && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement("div", {
148
142
  className: "flex py-4 justify-center"
149
143
  }, [...Array(instanceRef.current.track.details.slides.length).keys()].map(idx => {
150
144
  return /*#__PURE__*/_react.default.createElement("button", {
@@ -154,21 +148,23 @@ const CarouselV2 = _ref => {
154
148
 
155
149
  (_instanceRef$current3 = instanceRef.current) === null || _instanceRef$current3 === void 0 ? void 0 : _instanceRef$current3.moveToIdx(idx);
156
150
  },
157
- className: dotClasses + (currentSlide === idx ? " active bg-".concat(activeDotColour) : " bg-".concat(dotColours))
151
+ className: dotClasses + (currentSlide === idx ? " active ".concat(dots.activeColours) : " ".concat(dots.colours))
158
152
  });
159
153
  })));
160
154
  };
161
155
 
162
156
  function Arrow(props) {
163
- const disabeld = props.disabled ? " arrow--disabled fill-".concat(props.disabledArrowColour) : "";
157
+ const disabeld = props.disabled ? " arrow--disabled ".concat(props.arrows.disabledColours) : "";
164
158
  return /*#__PURE__*/_react.default.createElement("svg", {
165
159
  onClick: props.onClick,
166
- className: "arrow w-12 translate-y-2/4 h-12 absolute cursor-pointer fill-".concat(props.arrowColours, " top-1/2 ").concat(props.left ? "arrow--left left-1.5" : "arrow--right left-auto right-1.5", " ").concat(disabeld),
160
+ className: "arrow w-12 translate-y-2/4 h-12 absolute cursor-pointer top-1/2 ".concat(props.left ? "arrow--left left-1.5" : "arrow--right left-auto right-1.5", " ").concat(disabeld),
167
161
  xmlns: "http://www.w3.org/2000/svg",
168
162
  viewBox: "0 0 24 24"
169
163
  }, props.left && /*#__PURE__*/_react.default.createElement("path", {
164
+ className: "".concat(props.arrows.colours),
170
165
  d: "M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"
171
166
  }), !props.left && /*#__PURE__*/_react.default.createElement("path", {
167
+ className: "".concat(props.arrows.colours),
172
168
  d: "M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"
173
169
  }));
174
170
  }
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.74",
5
+ "version": "0.3.0",
6
6
  "private": false,
7
7
  "keywords": [
8
8
  "react",