@pedidopago/ui 1.2.5 → 1.3.2
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.
- package/dist/components/Alert/alert.test.js +8 -8
- package/dist/components/Alert/index.d.ts +2 -2
- package/dist/components/Alert/index.d.ts.map +1 -1
- package/dist/components/Alert/index.js +7 -26
- package/dist/components/Alert/styles.d.ts +0 -12
- package/dist/components/Alert/styles.d.ts.map +1 -1
- package/dist/components/Alert/styles.js +4 -22
- package/dist/components/Alert/types.d.ts +5 -22
- package/dist/components/Alert/types.d.ts.map +1 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +11 -2
- package/dist/components/Button/styles.js +1 -1
- package/dist/components/Button/types.d.ts +1 -0
- package/dist/components/Button/types.d.ts.map +1 -1
- package/dist/components/Card/card.test.tsx.d.ts +2 -0
- package/dist/components/Card/card.test.tsx.d.ts.map +1 -0
- package/dist/components/Card/card.test.tsx.js +41 -0
- package/dist/components/Card/index.d.ts +2 -2
- package/dist/components/Card/index.d.ts.map +1 -1
- package/dist/components/Card/index.js +25 -69
- package/dist/components/Card/styles.d.ts +2 -52
- package/dist/components/Card/styles.d.ts.map +1 -1
- package/dist/components/Card/styles.js +7 -80
- package/dist/components/Card/types.d.ts +12 -37
- package/dist/components/Card/types.d.ts.map +1 -1
- package/dist/components/DateInput/DateInput-example.d.ts +2 -2
- package/dist/components/DateInput/DateInput-example.d.ts.map +1 -1
- package/dist/components/DateInput/DateInput-example.js +10 -15
- package/dist/components/DateInput/dateInput.test.js +4 -4
- package/dist/components/DateInput/index.d.ts +2 -2
- package/dist/components/DateInput/index.d.ts.map +1 -1
- package/dist/components/DateInput/index.js +65 -136
- package/dist/components/DateInput/styles.d.ts +7 -29
- package/dist/components/DateInput/styles.d.ts.map +1 -1
- package/dist/components/DateInput/styles.js +15 -19
- package/dist/components/DateInput/types.d.ts +7 -14
- package/dist/components/DateInput/types.d.ts.map +1 -1
- package/dist/components/DatePicker/datepicker.test.js +8 -8
- package/dist/components/DatePicker/index.d.ts.map +1 -1
- package/dist/components/DatePicker/index.js +4 -8
- package/dist/components/DatePicker/types.d.ts +3 -4
- package/dist/components/DatePicker/types.d.ts.map +1 -1
- package/dist/components/Flex/styles.d.ts +1 -0
- package/dist/components/Flex/styles.d.ts.map +1 -1
- package/dist/components/Grid/styles.d.ts +1 -0
- package/dist/components/Grid/styles.d.ts.map +1 -1
- package/dist/components/Input/index.d.ts.map +1 -1
- package/dist/components/Input/index.js +15 -2
- package/dist/components/Input/styles.d.ts +1 -0
- package/dist/components/Input/styles.d.ts.map +1 -1
- package/dist/components/Input/styles.js +34 -33
- package/dist/components/Label/index.d.ts +2 -2
- package/dist/components/Label/index.d.ts.map +1 -1
- package/dist/components/Label/index.js +12 -23
- package/dist/components/Label/label.test.d.ts +2 -0
- package/dist/components/Label/label.test.d.ts.map +1 -0
- package/dist/components/Label/label.test.js +105 -0
- package/dist/components/Label/styles.js +1 -1
- package/dist/components/Label/types.d.ts +5 -6
- package/dist/components/Label/types.d.ts.map +1 -1
- package/dist/components/Modal/index.d.ts +2 -2
- package/dist/components/Modal/index.d.ts.map +1 -1
- package/dist/components/Modal/index.js +43 -20
- package/dist/components/Modal/styles.d.ts +15 -2
- package/dist/components/Modal/styles.d.ts.map +1 -1
- package/dist/components/Modal/styles.js +25 -7
- package/dist/components/Modal/types.d.ts +6 -5
- package/dist/components/Modal/types.d.ts.map +1 -1
- package/dist/components/MultipleSelect/components/SelectArea/Label.js +1 -1
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +61 -31
- package/dist/components/Select/styles.d.ts +13 -0
- package/dist/components/Select/styles.d.ts.map +1 -1
- package/dist/components/Select/styles.js +22 -4
- package/dist/components/Select/types.d.ts +2 -0
- package/dist/components/Select/types.d.ts.map +1 -1
- package/dist/components/Spinner/styles.d.ts +1 -0
- package/dist/components/Spinner/styles.d.ts.map +1 -1
- package/dist/components/Table/index.d.ts.map +1 -1
- package/dist/components/Table/index.js +13 -3
- package/dist/components/Table/styles.d.ts.map +1 -1
- package/dist/components/Table/styles.js +53 -8
- package/dist/components/Tag/styles.d.ts +3 -0
- package/dist/components/Tag/styles.d.ts.map +1 -1
- package/dist/components/Toast/components/Toast.d.ts.map +1 -1
- package/dist/components/Toast/components/Toast.js +6 -7
- package/dist/components/Toast/contexts/ToastProvider.d.ts.map +1 -1
- package/dist/components/Toast/contexts/ToastProvider.js +3 -1
- package/dist/components/Toast/toast.test.js +10 -10
- package/dist/components/Toast/types.d.ts +8 -15
- package/dist/components/Toast/types.d.ts.map +1 -1
- package/dist/components/Tooltip/components/TooltipLabel.d.ts +4 -0
- package/dist/components/Tooltip/components/TooltipLabel.d.ts.map +1 -0
- package/dist/components/Tooltip/components/TooltipLabel.js +59 -0
- package/dist/components/Tooltip/index.d.ts +2 -2
- package/dist/components/Tooltip/index.d.ts.map +1 -1
- package/dist/components/Tooltip/index.js +85 -84
- package/dist/components/Tooltip/styles.d.ts +6 -14
- package/dist/components/Tooltip/styles.d.ts.map +1 -1
- package/dist/components/Tooltip/styles.js +9 -38
- package/dist/components/Tooltip/types.d.ts +17 -19
- package/dist/components/Tooltip/types.d.ts.map +1 -1
- package/dist/components/Tooltip/util.d.ts +0 -4
- package/dist/components/Tooltip/util.d.ts.map +1 -1
- package/dist/components/Tooltip/util.js +1 -87
- package/dist/components/Typography/index.js +1 -1
- package/dist/components/Typography/styles.d.ts +3 -3
- package/dist/index.d.ts +8 -7
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +30 -21
- package/dist/shared/hooks/useDisableBodyScroll.js +2 -2
- package/dist/shared/hooks/useWindowSize.d.ts +5 -0
- package/dist/shared/hooks/useWindowSize.d.ts.map +1 -0
- package/dist/shared/hooks/useWindowSize.js +46 -0
- package/dist/shared/theme/hooks/useTheme.d.ts +1 -0
- package/dist/shared/theme/hooks/useTheme.d.ts.map +1 -1
- package/dist/shared/theme/theme.d.ts +1 -0
- package/dist/shared/theme/theme.d.ts.map +1 -1
- package/dist/shared/theme/theme.js +1 -0
- package/dist/utils/getColorValue.d.ts +1 -9
- package/dist/utils/getColorValue.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,oBAAY,wBAAwB,GAAG;IACrC,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IAExB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;CAC5C"}
|
|
@@ -23,7 +23,7 @@ var setup = function setup(props) {
|
|
|
23
23
|
describe('DatePicker', function () {
|
|
24
24
|
it('should it render the datepicker component', function () {
|
|
25
25
|
var _setup = setup({
|
|
26
|
-
value:
|
|
26
|
+
value: new Date(),
|
|
27
27
|
onChange: jest.fn()
|
|
28
28
|
}),
|
|
29
29
|
container = _setup.container;
|
|
@@ -32,7 +32,7 @@ describe('DatePicker', function () {
|
|
|
32
32
|
});
|
|
33
33
|
it('should it render the datepicker as range type', function () {
|
|
34
34
|
var _setup2 = setup({
|
|
35
|
-
value:
|
|
35
|
+
value: new Date(),
|
|
36
36
|
onChange: jest.fn(),
|
|
37
37
|
type: 'range'
|
|
38
38
|
}),
|
|
@@ -42,7 +42,7 @@ describe('DatePicker', function () {
|
|
|
42
42
|
});
|
|
43
43
|
it('should it render the datepicker as extended variant', function () {
|
|
44
44
|
var _setup3 = setup({
|
|
45
|
-
value:
|
|
45
|
+
value: new Date(),
|
|
46
46
|
onChange: jest.fn(),
|
|
47
47
|
variant: 'extended'
|
|
48
48
|
}),
|
|
@@ -52,7 +52,7 @@ describe('DatePicker', function () {
|
|
|
52
52
|
});
|
|
53
53
|
it('should it render the datepicker with minimum and maximum dates', function () {
|
|
54
54
|
var _setup4 = setup({
|
|
55
|
-
value:
|
|
55
|
+
value: new Date(),
|
|
56
56
|
onChange: jest.fn(),
|
|
57
57
|
minDate: new Date(),
|
|
58
58
|
maxDate: new Date()
|
|
@@ -65,7 +65,7 @@ describe('DatePicker', function () {
|
|
|
65
65
|
var onChange = jest.fn();
|
|
66
66
|
|
|
67
67
|
var _setup5 = setup({
|
|
68
|
-
value:
|
|
68
|
+
value: new Date(),
|
|
69
69
|
onChange: onChange
|
|
70
70
|
}),
|
|
71
71
|
container = _setup5.container;
|
|
@@ -82,7 +82,7 @@ describe('DatePicker', function () {
|
|
|
82
82
|
var onChange = jest.fn();
|
|
83
83
|
|
|
84
84
|
var _setup6 = setup({
|
|
85
|
-
value:
|
|
85
|
+
value: new Date(),
|
|
86
86
|
onChange: onChange,
|
|
87
87
|
type: 'range'
|
|
88
88
|
}),
|
|
@@ -102,7 +102,7 @@ describe('DatePicker', function () {
|
|
|
102
102
|
var onChange = jest.fn();
|
|
103
103
|
|
|
104
104
|
var _setup7 = setup({
|
|
105
|
-
value:
|
|
105
|
+
value: new Date(),
|
|
106
106
|
onChange: onChange,
|
|
107
107
|
variant: 'extended'
|
|
108
108
|
}),
|
|
@@ -120,7 +120,7 @@ describe('DatePicker', function () {
|
|
|
120
120
|
var onChange = jest.fn();
|
|
121
121
|
|
|
122
122
|
var _setup8 = setup({
|
|
123
|
-
value:
|
|
123
|
+
value: new Date(),
|
|
124
124
|
onChange: onChange,
|
|
125
125
|
type: 'range',
|
|
126
126
|
variant: 'extended'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,UAAU,iEAQb,eAAe,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,UAAU,iEAQb,eAAe,gBAuJjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -48,14 +48,12 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
48
48
|
_ref$type = _ref.type,
|
|
49
49
|
type = _ref$type === void 0 ? 'date' : _ref$type;
|
|
50
50
|
|
|
51
|
-
var _useState = (0, _react.useState)(value ?
|
|
51
|
+
var _useState = (0, _react.useState)(value ? Array.isArray(value) ? value[0] : value : new Date()),
|
|
52
52
|
_useState2 = _slicedToArray(_useState, 2),
|
|
53
53
|
startDate = _useState2[0],
|
|
54
54
|
setStartDate = _useState2[1];
|
|
55
55
|
|
|
56
|
-
var _useState3 = (0, _react.useState)(
|
|
57
|
-
return value ? new Date(value[1]) : startDate;
|
|
58
|
-
}),
|
|
56
|
+
var _useState3 = (0, _react.useState)(value ? Array.isArray(value) ? value[1] : value : startDate),
|
|
59
57
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
60
58
|
endDate = _useState4[0],
|
|
61
59
|
setEndDate = _useState4[1];
|
|
@@ -113,21 +111,19 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
113
111
|
var handleChange = function handleChange(newDate) {
|
|
114
112
|
if (type === 'date') {
|
|
115
113
|
setStartDate(newDate);
|
|
114
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
|
|
116
115
|
} else {
|
|
117
116
|
var startDateTime = startDate.getTime();
|
|
118
117
|
var currentDateTime = newDate.getTime();
|
|
119
118
|
|
|
120
119
|
if (currentDateTime > startDateTime && !isInTheRange(newDate)) {
|
|
121
120
|
setEndDate(newDate);
|
|
122
|
-
onChange === null || onChange === void 0 ? void 0 : onChange([startDate
|
|
123
|
-
return;
|
|
121
|
+
onChange === null || onChange === void 0 ? void 0 : onChange([startDate, newDate]);
|
|
124
122
|
} else {
|
|
125
123
|
setEndDate(newDate);
|
|
126
124
|
setStartDate(newDate);
|
|
127
125
|
}
|
|
128
126
|
}
|
|
129
|
-
|
|
130
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(newDate.toLocaleDateString());
|
|
131
127
|
};
|
|
132
128
|
|
|
133
129
|
var DatePickerContentProps = {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { HTMLAttributes } from 'react';
|
|
2
1
|
import { ExtendThemeProps, GlobalColorsProps } from '../../shared/theme/theme.types';
|
|
3
|
-
export declare type DatePickerProps =
|
|
2
|
+
export declare type DatePickerProps = {
|
|
4
3
|
/**
|
|
5
4
|
* Sets the date picker's type.
|
|
6
5
|
* @default 'date'
|
|
@@ -14,7 +13,7 @@ export declare type DatePickerProps = HTMLAttributes<HTMLInputElement> & {
|
|
|
14
13
|
/**
|
|
15
14
|
* Sets the date picker's current/initial value.
|
|
16
15
|
*/
|
|
17
|
-
value?:
|
|
16
|
+
value?: Date | [Date, Date];
|
|
18
17
|
/**
|
|
19
18
|
* Sets the date picker's minimum month and year.
|
|
20
19
|
* @summary To set the minimum date, the date needs to be the first day of the month.
|
|
@@ -29,7 +28,7 @@ export declare type DatePickerProps = HTMLAttributes<HTMLInputElement> & {
|
|
|
29
28
|
* Callback function that is called when the date picker's value changes.
|
|
30
29
|
* @param {Date} date - The new date.
|
|
31
30
|
*/
|
|
32
|
-
onChange?: (date:
|
|
31
|
+
onChange?: (date: Date | [Date, Date]) => void;
|
|
33
32
|
color?: GlobalColorsProps | (string & {});
|
|
34
33
|
};
|
|
35
34
|
export declare type GenericStyledProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAErF,oBAAY,eAAe,GAAG;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;IAC/C,KAAK,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC3C,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,gBAAgB,GAAG;QACzB,aAAa,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;KAClD,CAAC;CACH,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,SAAS,EAAE,IAAI,CAAC;IAChB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,YAAY,EAAE,CAAC,WAAW,EAAE,IAAI,KAAK,OAAO,CAAC;IAC7C,eAAe,EAAE,CAAC,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,gBAAgB,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAC9C,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,IAAI,EAAE,IAAI,CAAC;IACX,gBAAgB,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;CAC3C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,mBAAmB
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAyZ9B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,aAAa
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGA4azB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,KAAK,sJA8FV,CAAC;AAGF,eAAe,KAAK,CAAC"}
|
|
@@ -71,12 +71,24 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
71
71
|
setHiddenInfo(!hiddenInfo);
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
+
var inputRef = (0, _react.useRef)(null);
|
|
75
|
+
(0, _react.useImperativeHandle)(ref, function () {
|
|
76
|
+
return inputRef.current;
|
|
77
|
+
});
|
|
78
|
+
(0, _react.useEffect)(function () {
|
|
79
|
+
var _inputRef$current;
|
|
80
|
+
|
|
81
|
+
setHasValueOnInput(!!((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value));
|
|
82
|
+
});
|
|
74
83
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputGroupElement, {
|
|
75
|
-
|
|
84
|
+
withIcon: !!withIcon,
|
|
85
|
+
hasValueOnInput: placeholder || rest.value ? true : hasValueOnInput,
|
|
76
86
|
alert: alert,
|
|
77
87
|
withAddon: withAddon,
|
|
78
88
|
hasDisabled: disabled,
|
|
79
89
|
labelBackground: labelBackground,
|
|
90
|
+
className: rest.className,
|
|
91
|
+
style: rest.style,
|
|
80
92
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputColumn, {
|
|
81
93
|
children: [withAddon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AddonElement, {
|
|
82
94
|
alert: alert,
|
|
@@ -93,6 +105,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
93
105
|
children: [withIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputIcon, {
|
|
94
106
|
children: withIcon
|
|
95
107
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Input, _objectSpread(_objectSpread({
|
|
108
|
+
"data-input": "input",
|
|
96
109
|
type: hiddenInfo ? 'password' : type,
|
|
97
110
|
"aria-label": label,
|
|
98
111
|
withIcon: withIcon,
|
|
@@ -100,7 +113,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
100
113
|
disabled: disabled,
|
|
101
114
|
alert: alert,
|
|
102
115
|
placeholder: placeholder,
|
|
103
|
-
ref:
|
|
116
|
+
ref: inputRef
|
|
104
117
|
}, rest), {}, {
|
|
105
118
|
onChange: function onChange(e) {
|
|
106
119
|
var _rest$onChange;
|
|
@@ -6,6 +6,7 @@ export declare const InputGroupElement: import("@emotion/styled").StyledComponen
|
|
|
6
6
|
as?: import("react").ElementType<any> | undefined;
|
|
7
7
|
} & InputComponentProps & {
|
|
8
8
|
hasDisabled?: boolean | undefined;
|
|
9
|
+
withIcon?: boolean | undefined;
|
|
9
10
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
10
11
|
export declare const InputColumn: import("@emotion/styled").StyledComponent<{
|
|
11
12
|
theme?: import("@emotion/react").Theme | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,eAAO,MAAM,iBAAiB
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,eAAO,MAAM,iBAAiB;;;;;;yGA4I7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGASvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAKxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAK3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;yGAarB,CAAC;AAEF,eAAO,MAAM,KAAK;;;+HA2BjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;kHAgBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;2HAyCpB,CAAC;AAEF,eAAO,MAAM,MAAM;;;+GAQlB,CAAC;AAEF,eAAO,MAAM,UAAU;;;2GAItB,CAAC;AAEF,eAAO,MAAM,UAAU;;;wHAUtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAyCxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAOxB,CAAC"}
|
|
@@ -19,7 +19,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
|
|
|
19
19
|
|
|
20
20
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
21
21
|
|
|
22
|
-
var InputGroupElement = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n border-radius: ", ";\n font-weight: ", ";\n\n transition: all 0.2s ease-in-out;\n\n &:hover fieldset {\n border-color: ", ";\n }\n\n &:hover > div > div:first-of-type {\n border-color: ", ";\n }\n\n &:focus-within > div > div:first-of-type {\n background: ", ";\n border-color: ", ";\n }\n\n &:focus-within > div > div:first-of-type span {\n color: ", ";\n }\n\n &:focus-within {\n border-radius: 2px solid ", ";\n }\n\n &:focus-within > div {\n box-shadow: 0 0 0 2px\n ", ";\n }\n\n &:focus-within label {\n transform: translate(19px, -11px) scale(0.8);\n\n background-color: ", ";\n height: 16px;\n }\n\n &:focus-within fieldset {\n border-width: 2px;\n border-color: ", ";\n }\n\n ", "\n\n & label {\n transform: ", ";\n\n background-color: ", ";\n\n height: ", ";\n }\n"])), function (props) {
|
|
22
|
+
var InputGroupElement = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n border-radius: ", ";\n font-weight: ", ";\n\n transition: all 0.2s ease-in-out;\n\n &:hover fieldset {\n border-color: ", ";\n }\n\n &:hover > div > div:first-of-type {\n border-color: ", ";\n &:hover label {\n color: ", ";\n }\n }\n\n &:focus-within > div > div:first-of-type {\n background: ", ";\n border-color: ", ";\n }\n\n &:focus-within > div > div:first-of-type span {\n color: ", ";\n }\n\n &:focus-within {\n border-radius: 2px solid ", ";\n }\n &:focus-within label {\n color: ", ";\n }\n\n &:focus-within > div {\n box-shadow: 0 0 0 2px\n ", ";\n }\n\n &:focus-within label {\n transform: translate(19px, -11px) scale(0.8);\n\n background-color: ", ";\n height: 16px;\n }\n\n &:focus-within fieldset {\n border-width: 2px;\n border-color: ", ";\n }\n\n ", "\n\n & label {\n transform: ", ";\n\n background-color: ", ";\n\n height: ", ";\n }\n"])), function (props) {
|
|
23
23
|
return props.theme.borderRadius.default;
|
|
24
24
|
}, function (props) {
|
|
25
25
|
return props.theme.fontWeight[400];
|
|
@@ -51,6 +51,9 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
return theme.colors.primary.hover;
|
|
54
|
+
}, function (_ref3) {
|
|
55
|
+
var theme = _ref3.theme;
|
|
56
|
+
return theme.colors.neutral.neutral5;
|
|
54
57
|
}, function (props) {
|
|
55
58
|
return !props.alert && props.withAddon && props.theme.colors.primary.disabled;
|
|
56
59
|
}, function (props) {
|
|
@@ -59,8 +62,11 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
|
|
|
59
62
|
return !props.alert && props.theme.colors.primary.focus;
|
|
60
63
|
}, function (props) {
|
|
61
64
|
return props.theme.colors.primary.disabled;
|
|
65
|
+
}, function (_ref4) {
|
|
66
|
+
var theme = _ref4.theme;
|
|
67
|
+
return theme.colors.neutral.neutral5;
|
|
62
68
|
}, function (props) {
|
|
63
|
-
return props.alert ? props.theme.colorMode === 'dark' ? props.theme.colors[props.alert].dark : props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled;
|
|
69
|
+
return props.alert ? props.theme.colorMode === 'dark' ? props.theme.colors[props.alert].dark : "".concat(props.theme.colors[props.alert].blurred, "33") : props.theme.colors.primary.disabled;
|
|
64
70
|
}, function (props) {
|
|
65
71
|
if (props.labelBackground) {
|
|
66
72
|
if (_typeof(props.labelBackground) === 'object') {
|
|
@@ -78,8 +84,10 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
|
|
|
78
84
|
return !props.alert && props.theme.colors.primary.hover;
|
|
79
85
|
}, function (props) {
|
|
80
86
|
return props.addonContent && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:focus-within > div > div:first-of-type {\n border-color: ", ";\n background-color: ", ";\n }\n "])), props.alert ? 'transparent' : props.theme.colors.primary.focus, props.alert && props.alert === 'success' ? props.theme.colors.primary.focus : '');
|
|
81
|
-
}, function (
|
|
82
|
-
|
|
87
|
+
}, function (_ref5) {
|
|
88
|
+
var hasValueOnInput = _ref5.hasValueOnInput,
|
|
89
|
+
withIcon = _ref5.withIcon;
|
|
90
|
+
return hasValueOnInput ? 'translate(19px, -11px) scale(0.8) !important' : withIcon ? 'translate(60px, calc(100% - 10px))' : 'translate(20px, calc(100% - 10px))';
|
|
83
91
|
}, function (props) {
|
|
84
92
|
if (!props.hasValueOnInput) return 'unset';
|
|
85
93
|
|
|
@@ -95,8 +103,8 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
|
|
|
95
103
|
dark: props.theme.colors.neutral.black,
|
|
96
104
|
light: props.theme.colors.neutral.white
|
|
97
105
|
}[props.theme.colorMode];
|
|
98
|
-
}, function (
|
|
99
|
-
var hasValueOnInput =
|
|
106
|
+
}, function (_ref6) {
|
|
107
|
+
var hasValueOnInput = _ref6.hasValueOnInput;
|
|
100
108
|
return hasValueOnInput ? '16px' : 'unset';
|
|
101
109
|
});
|
|
102
110
|
|
|
@@ -128,54 +136,47 @@ var InputIcon = _styled.default.div(_templateObject6 || (_templateObject6 = _tag
|
|
|
128
136
|
|
|
129
137
|
exports.InputIcon = InputIcon;
|
|
130
138
|
|
|
131
|
-
var Input = _styled.default.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n width: 100%;\n padding: ", ";\n flex: 1;\n height: 100%;\n border: none;\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n font-family: inherit;\n outline: none;\n font-size: ", ";\n background-color: transparent;\n position: relative;\n
|
|
139
|
+
var Input = _styled.default.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n width: 100%;\n padding: ", ";\n flex: 1;\n height: 100%;\n border: none;\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n font-family: inherit;\n outline: none;\n font-size: ", ";\n background-color: transparent;\n position: relative;\n"])), function (props) {
|
|
132
140
|
return props.withIcon ? props.hiddenContent ? '0 0' : '0 20px 0 0' : props.hiddenContent ? '0 0 0 20px' : '0 20px';
|
|
133
141
|
}, function (props) {
|
|
134
142
|
return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
|
|
135
|
-
}, function (
|
|
136
|
-
|
|
143
|
+
}, function (_ref7) {
|
|
144
|
+
var theme = _ref7.theme;
|
|
145
|
+
return theme.colors.neutral.neutral5;
|
|
137
146
|
}, function (props) {
|
|
138
147
|
return props.theme.fontSizes.xs;
|
|
139
|
-
}, function (props) {
|
|
140
|
-
return props.theme.zIndex.level2;
|
|
141
148
|
});
|
|
142
149
|
|
|
143
150
|
exports.Input = Input;
|
|
144
151
|
|
|
145
|
-
var InputLabel = _styled.default.label(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n top: 0;\n left: 0;\n height: auto;\n padding: 0 6px;\n position: absolute;\n z-index: ", ";\n pointer-events: none;\n color: ", ";\n background-color: transparent;\n transform-origin: left;\n transition:
|
|
152
|
+
var InputLabel = _styled.default.label(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n top: 0;\n left: 0;\n height: auto;\n padding: 0 6px;\n position: absolute;\n z-index: ", ";\n pointer-events: none;\n color: ", ";\n background-color: transparent;\n transform-origin: left;\n transition: all ease 0.2s;\n font-weight: 500;\n"])), function (props) {
|
|
146
153
|
return props.theme.zIndex.level1;
|
|
147
154
|
}, function (props) {
|
|
148
|
-
return props.
|
|
155
|
+
return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.neutral3;
|
|
149
156
|
});
|
|
150
157
|
|
|
151
158
|
exports.InputLabel = InputLabel;
|
|
152
159
|
|
|
153
|
-
var Fieldset = _styled.default.fieldset(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n margin: 0;\n top: 0;\n pointer-events: none;\n padding: 0 17px;\n overflow: hidden;\n\n background-color: ", ";\n\n border-radius: ", ";\n border: 2px solid\n ", ";\n border-left: ", ";\n\n transition: all 0.2s ease;\n"])), function (
|
|
154
|
-
var alert =
|
|
155
|
-
theme =
|
|
156
|
-
hasDisabled =
|
|
160
|
+
var Fieldset = _styled.default.fieldset(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n margin: 0;\n top: 0;\n pointer-events: none;\n padding: 0 17px;\n overflow: hidden;\n\n background-color: ", ";\n\n border-radius: ", ";\n border: 2px solid\n ", ";\n border-left: ", ";\n\n transition: all 0.2s ease;\n"])), function (_ref8) {
|
|
161
|
+
var alert = _ref8.alert,
|
|
162
|
+
theme = _ref8.theme,
|
|
163
|
+
hasDisabled = _ref8.hasDisabled;
|
|
157
164
|
|
|
158
165
|
if (alert && !hasDisabled) {
|
|
159
|
-
return
|
|
160
|
-
light: theme.colors[alert].blurred,
|
|
161
|
-
dark: theme.colors[alert].dark
|
|
162
|
-
}[theme.colorMode];
|
|
166
|
+
return "".concat(theme.colors[alert].blurred, "33");
|
|
163
167
|
}
|
|
164
168
|
|
|
165
169
|
if (hasDisabled) {
|
|
166
|
-
return
|
|
167
|
-
light: theme.colors.neutral.neutral1,
|
|
168
|
-
dark: theme.colors.neutral.neutral4
|
|
169
|
-
}[theme.colorMode];
|
|
170
|
+
return theme.colors.neutral.neutral1;
|
|
170
171
|
}
|
|
171
172
|
|
|
172
173
|
return 'transparent';
|
|
173
174
|
}, function (props) {
|
|
174
175
|
return props.withAddon ? "0 ".concat(props.theme.borderRadius.default, " ").concat(props.theme.borderRadius.default, " 0") : props.theme.borderRadius.default;
|
|
175
|
-
}, function (
|
|
176
|
-
var theme =
|
|
177
|
-
hasDisabled =
|
|
178
|
-
alert =
|
|
176
|
+
}, function (_ref9) {
|
|
177
|
+
var theme = _ref9.theme,
|
|
178
|
+
hasDisabled = _ref9.hasDisabled,
|
|
179
|
+
alert = _ref9.alert;
|
|
179
180
|
|
|
180
181
|
if (alert && !hasDisabled) {
|
|
181
182
|
return theme.colors[alert].default;
|
|
@@ -223,10 +224,10 @@ var AddonElement = _styled.default.div(_templateObject13 || (_templateObject13 =
|
|
|
223
224
|
light: props.theme.colors.neutral.neutral1,
|
|
224
225
|
dark: props.theme.colors.neutral.neutral6
|
|
225
226
|
}[props.theme.colorMode];
|
|
226
|
-
}, function (
|
|
227
|
-
var theme =
|
|
228
|
-
hasDisabled =
|
|
229
|
-
alert =
|
|
227
|
+
}, function (_ref10) {
|
|
228
|
+
var theme = _ref10.theme,
|
|
229
|
+
hasDisabled = _ref10.hasDisabled,
|
|
230
|
+
alert = _ref10.alert;
|
|
230
231
|
|
|
231
232
|
if (alert && !hasDisabled) {
|
|
232
233
|
return theme.colors[alert].default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,UAAU,CAkB9B,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -7,43 +7,32 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _react = require("@emotion/react");
|
|
9
9
|
|
|
10
|
-
var _styles = require("./styles");
|
|
11
|
-
|
|
12
10
|
var _Icon = _interopRequireDefault(require("../Icon"));
|
|
13
11
|
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
var _invertColor = require("../../utils/invertColor");
|
|
12
|
+
var _styles = require("./styles");
|
|
17
13
|
|
|
18
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
15
|
|
|
20
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
17
|
|
|
22
18
|
var LabelInput = function LabelInput(_ref) {
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
19
|
+
var label = _ref.label,
|
|
20
|
+
_ref$labelType = _ref.labelType,
|
|
21
|
+
labelType = _ref$labelType === void 0 ? 'success' : _ref$labelType,
|
|
22
|
+
Icon = _ref.icon,
|
|
23
|
+
_ref$iconSide = _ref.iconSide,
|
|
24
|
+
iconSide = _ref$iconSide === void 0 ? 'left' : _ref$iconSide;
|
|
29
25
|
var theme = (0, _react.useTheme)();
|
|
30
|
-
|
|
31
|
-
var
|
|
32
|
-
return _allIcons.allIcons.some(function (svg) {
|
|
33
|
-
return svg.name === Icon;
|
|
34
|
-
});
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
var backgroundColor = LabelType ? theme.colors[LabelType].blurred : Color || (theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral1);
|
|
38
|
-
var color = (0, _invertColor.invertColor)(backgroundColor || '#fff', true);
|
|
26
|
+
var backgroundColor = theme.colors[labelType].blurred;
|
|
27
|
+
var textColor = theme.colors[labelType].default;
|
|
39
28
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.LabelWrapper, {
|
|
40
29
|
backgroundColor: backgroundColor,
|
|
41
|
-
color:
|
|
30
|
+
color: textColor,
|
|
42
31
|
"data-testid": "label-wrapper",
|
|
43
|
-
children: [Icon &&
|
|
32
|
+
children: [Icon && iconSide === 'left' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
44
33
|
name: Icon,
|
|
45
34
|
size: "16px"
|
|
46
|
-
}),
|
|
35
|
+
}), label || 'default', Icon && iconSide === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
47
36
|
name: Icon,
|
|
48
37
|
size: "16px"
|
|
49
38
|
})]
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"label.test.d.ts","sourceRoot":"","sources":["../../../src/components/Label/label.test.tsx"],"names":[],"mappings":"AAEA,OAAO,yCAAyC,CAAC"}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _testUtils = require("../../shared/tests/test-utils");
|
|
4
|
+
|
|
5
|
+
require("@testing-library/jest-dom/extend-expect");
|
|
6
|
+
|
|
7
|
+
var _ = _interopRequireDefault(require("."));
|
|
8
|
+
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
+
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
|
|
13
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
14
|
+
|
|
15
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
16
|
+
|
|
17
|
+
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; }
|
|
18
|
+
|
|
19
|
+
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; }
|
|
20
|
+
|
|
21
|
+
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; }
|
|
22
|
+
|
|
23
|
+
var setup = function setup(props) {
|
|
24
|
+
var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({}, props)));
|
|
25
|
+
var LabelWrapper = utils.getByTestId('label-wrapper');
|
|
26
|
+
return _objectSpread({
|
|
27
|
+
LabelWrapper: LabelWrapper
|
|
28
|
+
}, utils);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
describe('Label', function () {
|
|
32
|
+
it('Should be Rendered', function () {
|
|
33
|
+
var _setup = setup(),
|
|
34
|
+
LabelWrapper = _setup.LabelWrapper;
|
|
35
|
+
|
|
36
|
+
expect(LabelWrapper).toBeInTheDocument();
|
|
37
|
+
});
|
|
38
|
+
it('Render other labels', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
|
39
|
+
var LabelTest, _setup2, findByText, label;
|
|
40
|
+
|
|
41
|
+
return regeneratorRuntime.wrap(function _callee$(_context) {
|
|
42
|
+
while (1) {
|
|
43
|
+
switch (_context.prev = _context.next) {
|
|
44
|
+
case 0:
|
|
45
|
+
LabelTest = 'Teste';
|
|
46
|
+
_setup2 = setup({
|
|
47
|
+
label: LabelTest
|
|
48
|
+
}), findByText = _setup2.findByText;
|
|
49
|
+
_context.next = 4;
|
|
50
|
+
return findByText(LabelTest);
|
|
51
|
+
|
|
52
|
+
case 4:
|
|
53
|
+
label = _context.sent;
|
|
54
|
+
expect(label.innerHTML).toEqual(LabelTest);
|
|
55
|
+
|
|
56
|
+
case 6:
|
|
57
|
+
case "end":
|
|
58
|
+
return _context.stop();
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}, _callee);
|
|
62
|
+
})));
|
|
63
|
+
it('Render Icons', function () {
|
|
64
|
+
var _LabelWrapper$querySe;
|
|
65
|
+
|
|
66
|
+
var icon = 'mail';
|
|
67
|
+
|
|
68
|
+
var _setup3 = setup({
|
|
69
|
+
icon: icon
|
|
70
|
+
}),
|
|
71
|
+
LabelWrapper = _setup3.LabelWrapper;
|
|
72
|
+
|
|
73
|
+
var SvgName = (_LabelWrapper$querySe = LabelWrapper.querySelector('svg')) === null || _LabelWrapper$querySe === void 0 ? void 0 : _LabelWrapper$querySe.getAttribute('name');
|
|
74
|
+
expect(SvgName).toEqual(icon);
|
|
75
|
+
});
|
|
76
|
+
it('Render Icons in Left', function () {
|
|
77
|
+
var _LabelWrapper$querySe2;
|
|
78
|
+
|
|
79
|
+
var label = 'Testing';
|
|
80
|
+
|
|
81
|
+
var _setup4 = setup({
|
|
82
|
+
icon: 'mail',
|
|
83
|
+
label: label
|
|
84
|
+
}),
|
|
85
|
+
LabelWrapper = _setup4.LabelWrapper;
|
|
86
|
+
|
|
87
|
+
var Icon = (_LabelWrapper$querySe2 = LabelWrapper.querySelector('svg')) === null || _LabelWrapper$querySe2 === void 0 ? void 0 : _LabelWrapper$querySe2.outerHTML;
|
|
88
|
+
expect(LabelWrapper.innerHTML).toEqual(Icon + label);
|
|
89
|
+
});
|
|
90
|
+
it('Render Icons in Right', function () {
|
|
91
|
+
var _LabelWrapper$querySe3;
|
|
92
|
+
|
|
93
|
+
var label = 'Testing';
|
|
94
|
+
|
|
95
|
+
var _setup5 = setup({
|
|
96
|
+
icon: 'mail',
|
|
97
|
+
iconSide: 'right',
|
|
98
|
+
label: label
|
|
99
|
+
}),
|
|
100
|
+
LabelWrapper = _setup5.LabelWrapper;
|
|
101
|
+
|
|
102
|
+
var Icon = (_LabelWrapper$querySe3 = LabelWrapper.querySelector('svg')) === null || _LabelWrapper$querySe3 === void 0 ? void 0 : _LabelWrapper$querySe3.outerHTML;
|
|
103
|
+
expect(LabelWrapper.innerHTML).toEqual(label + Icon);
|
|
104
|
+
});
|
|
105
|
+
});
|
|
@@ -21,7 +21,7 @@ var LabelWrapper = _styled.default.div(_templateObject || (_templateObject = _ta
|
|
|
21
21
|
return color;
|
|
22
22
|
}, function (_ref3) {
|
|
23
23
|
var theme = _ref3.theme;
|
|
24
|
-
return theme.fontSizes.
|
|
24
|
+
return theme.fontSizes.xxs;
|
|
25
25
|
});
|
|
26
26
|
|
|
27
27
|
exports.LabelWrapper = LabelWrapper;
|
|
@@ -7,11 +7,10 @@ export declare type IStyleProps = {
|
|
|
7
7
|
backgroundColor?: string;
|
|
8
8
|
color?: string;
|
|
9
9
|
};
|
|
10
|
-
export declare type
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
Color?: string;
|
|
10
|
+
export declare type LabelProps = {
|
|
11
|
+
labelType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
|
|
12
|
+
icon?: IconName;
|
|
13
|
+
label?: string;
|
|
14
|
+
iconSide?: 'left' | 'right';
|
|
16
15
|
};
|
|
17
16
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Label/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Label/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,SAAS,CAAC,EACN,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC7B,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
3
|
-
export declare function Modal({ open, left, top, anchorX, anchorY, offsetX, offsetY, hideScrollBar, hideOverlay, maxWidth, maxHeight, onClose,
|
|
2
|
+
import { ModalProps } from './types';
|
|
3
|
+
export declare function Modal({ open, left, top, anchorX, anchorY, offsetX, offsetY, hideScrollBar, hideOverlay, disableScrollOnOpen, maxWidth, maxHeight, onClose, ...rest }: ModalProps): JSX.Element;
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|