@elliemae/ds-notification-badge 2.0.0-next.7 → 2.0.0-rc.10
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/cjs/NotificationBadge.js +9 -8
- package/cjs/style.js +69 -32
- package/esm/NotificationBadge.js +9 -8
- package/esm/style.js +69 -32
- package/package.json +4 -5
- package/types/NotificationBadge.d.ts +42 -7
- package/types/prop-types.d.ts +37 -6
- package/types/style.d.ts +4 -4
package/cjs/NotificationBadge.js
CHANGED
|
@@ -13,14 +13,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
|
|
14
14
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
15
15
|
|
|
16
|
-
const NotificationBadge =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
16
|
+
const NotificationBadge = _ref => {
|
|
17
|
+
let {
|
|
18
|
+
type,
|
|
19
|
+
value,
|
|
20
|
+
size,
|
|
21
|
+
disabled,
|
|
22
|
+
position,
|
|
23
|
+
Component
|
|
24
|
+
} = _ref;
|
|
24
25
|
const Badge = type === 'number' ? style.NumericBadge : style.DotBadge;
|
|
25
26
|
const relatedComponentRef = react.useRef(null);
|
|
26
27
|
const renderBadge = (relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current) || !Component;
|
package/cjs/style.js
CHANGED
|
@@ -13,32 +13,60 @@ const Wrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
|
13
13
|
})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:fit-content;"]);
|
|
14
14
|
const GenericBadge = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
15
15
|
componentId: "sc-lsxuo6-1"
|
|
16
|
-
})(["position:relative;top:", ";left:", ";right:", ";"],
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
})(["position:relative;top:", ";left:", ";right:", ";"], _ref => {
|
|
17
|
+
let {
|
|
18
|
+
top
|
|
19
|
+
} = _ref;
|
|
20
|
+
return top ? "".concat(top, "px") : 'unset';
|
|
21
|
+
}, _ref2 => {
|
|
22
|
+
let {
|
|
23
|
+
left
|
|
24
|
+
} = _ref2;
|
|
25
|
+
return left ? "".concat(left, "px") : 'unset';
|
|
26
|
+
}, _ref3 => {
|
|
27
|
+
let {
|
|
28
|
+
right
|
|
29
|
+
} = _ref3;
|
|
30
|
+
return right ? "".concat(right, "px") : 'unset';
|
|
31
|
+
});
|
|
23
32
|
const NumericBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withConfig({
|
|
24
33
|
componentId: "sc-lsxuo6-2"
|
|
25
|
-
})(["display:flex;justify-content:center;align-items:center;width:fit-content;color:#fff;padding:", ";padding-top:2px;background-color:", ";border-radius:", ";font-size:", ";font-weight:", ";height:", ";min-width:", ";"],
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
value
|
|
41
|
-
}
|
|
34
|
+
})(["display:flex;justify-content:center;align-items:center;width:fit-content;color:#fff;padding:", ";padding-top:2px;background-color:", ";border-radius:", ";font-size:", ";font-weight:", ";height:", ";min-width:", ";"], _ref4 => {
|
|
35
|
+
let {
|
|
36
|
+
value
|
|
37
|
+
} = _ref4;
|
|
38
|
+
return value > 9 ? '0 5px' : '0';
|
|
39
|
+
}, _ref5 => {
|
|
40
|
+
let {
|
|
41
|
+
disabled,
|
|
42
|
+
theme
|
|
43
|
+
} = _ref5;
|
|
44
|
+
return disabled ? theme.colors.neutral[500] : theme.colors.danger[900];
|
|
45
|
+
}, _ref6 => {
|
|
46
|
+
let {
|
|
47
|
+
value
|
|
48
|
+
} = _ref6;
|
|
49
|
+
return value > 9 ? '10px' : '50%';
|
|
50
|
+
}, _ref7 => {
|
|
51
|
+
let {
|
|
52
|
+
size
|
|
53
|
+
} = _ref7;
|
|
54
|
+
return size === 'l' ? '16px' : '12px';
|
|
55
|
+
}, _ref8 => {
|
|
56
|
+
let {
|
|
57
|
+
size
|
|
58
|
+
} = _ref8;
|
|
59
|
+
return size === 'l' ? '400' : '600';
|
|
60
|
+
}, _ref9 => {
|
|
61
|
+
let {
|
|
62
|
+
size
|
|
63
|
+
} = _ref9;
|
|
64
|
+
return size === 'l' ? '21px' : '15px';
|
|
65
|
+
}, _ref10 => {
|
|
66
|
+
let {
|
|
67
|
+
size,
|
|
68
|
+
value
|
|
69
|
+
} = _ref10;
|
|
42
70
|
if (size === 'l' && value > 9) return '30px';
|
|
43
71
|
if (size === 'l' && value <= 9) return '21px';
|
|
44
72
|
if (size === 's' && value > 9) return '21px';
|
|
@@ -46,14 +74,23 @@ const NumericBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withC
|
|
|
46
74
|
});
|
|
47
75
|
const DotBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withConfig({
|
|
48
76
|
componentId: "sc-lsxuo6-3"
|
|
49
|
-
})(["background-color:", ";width:", ";height:", ";border-radius:100%;"],
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
77
|
+
})(["background-color:", ";width:", ";height:", ";border-radius:100%;"], _ref11 => {
|
|
78
|
+
let {
|
|
79
|
+
disabled,
|
|
80
|
+
theme
|
|
81
|
+
} = _ref11;
|
|
82
|
+
return disabled ? theme.colors.neutral[500] : theme.colors.brand[500];
|
|
83
|
+
}, _ref12 => {
|
|
84
|
+
let {
|
|
85
|
+
size
|
|
86
|
+
} = _ref12;
|
|
87
|
+
return size === 'l' ? '15px' : '10px';
|
|
88
|
+
}, _ref13 => {
|
|
89
|
+
let {
|
|
90
|
+
size
|
|
91
|
+
} = _ref13;
|
|
92
|
+
return size === 'l' ? '15px' : '10px';
|
|
93
|
+
});
|
|
57
94
|
|
|
58
95
|
exports.DotBadge = DotBadge;
|
|
59
96
|
exports.GenericBadge = GenericBadge;
|
package/esm/NotificationBadge.js
CHANGED
|
@@ -5,14 +5,15 @@ import { describe } from 'react-desc';
|
|
|
5
5
|
import { notificationBadgeProps, defaultProps } from './prop-types.js';
|
|
6
6
|
import { Wrapper, NumericBadge, DotBadge } from './style.js';
|
|
7
7
|
|
|
8
|
-
const NotificationBadge =
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
const NotificationBadge = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
type,
|
|
11
|
+
value,
|
|
12
|
+
size,
|
|
13
|
+
disabled,
|
|
14
|
+
position,
|
|
15
|
+
Component
|
|
16
|
+
} = _ref;
|
|
16
17
|
const Badge = type === 'number' ? NumericBadge : DotBadge;
|
|
17
18
|
const relatedComponentRef = useRef(null);
|
|
18
19
|
const renderBadge = (relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current) || !Component;
|
package/esm/style.js
CHANGED
|
@@ -5,32 +5,60 @@ const Wrapper = /*#__PURE__*/styled.div.withConfig({
|
|
|
5
5
|
})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:fit-content;"]);
|
|
6
6
|
const GenericBadge = /*#__PURE__*/styled.span.withConfig({
|
|
7
7
|
componentId: "sc-lsxuo6-1"
|
|
8
|
-
})(["position:relative;top:", ";left:", ";right:", ";"],
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
})(["position:relative;top:", ";left:", ";right:", ";"], _ref => {
|
|
9
|
+
let {
|
|
10
|
+
top
|
|
11
|
+
} = _ref;
|
|
12
|
+
return top ? "".concat(top, "px") : 'unset';
|
|
13
|
+
}, _ref2 => {
|
|
14
|
+
let {
|
|
15
|
+
left
|
|
16
|
+
} = _ref2;
|
|
17
|
+
return left ? "".concat(left, "px") : 'unset';
|
|
18
|
+
}, _ref3 => {
|
|
19
|
+
let {
|
|
20
|
+
right
|
|
21
|
+
} = _ref3;
|
|
22
|
+
return right ? "".concat(right, "px") : 'unset';
|
|
23
|
+
});
|
|
15
24
|
const NumericBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
|
|
16
25
|
componentId: "sc-lsxuo6-2"
|
|
17
|
-
})(["display:flex;justify-content:center;align-items:center;width:fit-content;color:#fff;padding:", ";padding-top:2px;background-color:", ";border-radius:", ";font-size:", ";font-weight:", ";height:", ";min-width:", ";"],
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
value
|
|
33
|
-
}
|
|
26
|
+
})(["display:flex;justify-content:center;align-items:center;width:fit-content;color:#fff;padding:", ";padding-top:2px;background-color:", ";border-radius:", ";font-size:", ";font-weight:", ";height:", ";min-width:", ";"], _ref4 => {
|
|
27
|
+
let {
|
|
28
|
+
value
|
|
29
|
+
} = _ref4;
|
|
30
|
+
return value > 9 ? '0 5px' : '0';
|
|
31
|
+
}, _ref5 => {
|
|
32
|
+
let {
|
|
33
|
+
disabled,
|
|
34
|
+
theme
|
|
35
|
+
} = _ref5;
|
|
36
|
+
return disabled ? theme.colors.neutral[500] : theme.colors.danger[900];
|
|
37
|
+
}, _ref6 => {
|
|
38
|
+
let {
|
|
39
|
+
value
|
|
40
|
+
} = _ref6;
|
|
41
|
+
return value > 9 ? '10px' : '50%';
|
|
42
|
+
}, _ref7 => {
|
|
43
|
+
let {
|
|
44
|
+
size
|
|
45
|
+
} = _ref7;
|
|
46
|
+
return size === 'l' ? '16px' : '12px';
|
|
47
|
+
}, _ref8 => {
|
|
48
|
+
let {
|
|
49
|
+
size
|
|
50
|
+
} = _ref8;
|
|
51
|
+
return size === 'l' ? '400' : '600';
|
|
52
|
+
}, _ref9 => {
|
|
53
|
+
let {
|
|
54
|
+
size
|
|
55
|
+
} = _ref9;
|
|
56
|
+
return size === 'l' ? '21px' : '15px';
|
|
57
|
+
}, _ref10 => {
|
|
58
|
+
let {
|
|
59
|
+
size,
|
|
60
|
+
value
|
|
61
|
+
} = _ref10;
|
|
34
62
|
if (size === 'l' && value > 9) return '30px';
|
|
35
63
|
if (size === 'l' && value <= 9) return '21px';
|
|
36
64
|
if (size === 's' && value > 9) return '21px';
|
|
@@ -38,13 +66,22 @@ const NumericBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
|
|
|
38
66
|
});
|
|
39
67
|
const DotBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
|
|
40
68
|
componentId: "sc-lsxuo6-3"
|
|
41
|
-
})(["background-color:", ";width:", ";height:", ";border-radius:100%;"],
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
69
|
+
})(["background-color:", ";width:", ";height:", ";border-radius:100%;"], _ref11 => {
|
|
70
|
+
let {
|
|
71
|
+
disabled,
|
|
72
|
+
theme
|
|
73
|
+
} = _ref11;
|
|
74
|
+
return disabled ? theme.colors.neutral[500] : theme.colors.brand[500];
|
|
75
|
+
}, _ref12 => {
|
|
76
|
+
let {
|
|
77
|
+
size
|
|
78
|
+
} = _ref12;
|
|
79
|
+
return size === 'l' ? '15px' : '10px';
|
|
80
|
+
}, _ref13 => {
|
|
81
|
+
let {
|
|
82
|
+
size
|
|
83
|
+
} = _ref13;
|
|
84
|
+
return size === 'l' ? '15px' : '10px';
|
|
85
|
+
});
|
|
49
86
|
|
|
50
87
|
export { DotBadge, GenericBadge, NumericBadge, Wrapper };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-notification-badge",
|
|
3
|
-
"version": "2.0.0-
|
|
3
|
+
"version": "2.0.0-rc.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Notification Badge",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -44,16 +44,15 @@
|
|
|
44
44
|
"build": "node ../../scripts/build/build.js"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"react-desc": "~4.1.3"
|
|
48
|
-
"uid": "~2.0.0"
|
|
47
|
+
"react-desc": "~4.1.3"
|
|
49
48
|
},
|
|
50
49
|
"devDependencies": {
|
|
51
|
-
"styled-components": "~5.3.
|
|
50
|
+
"styled-components": "~5.3.3"
|
|
52
51
|
},
|
|
53
52
|
"peerDependencies": {
|
|
54
53
|
"react": "^17.0.2",
|
|
55
54
|
"react-dom": "^17.0.2",
|
|
56
|
-
"styled-components": "^5.3.
|
|
55
|
+
"styled-components": "^5.3.3"
|
|
57
56
|
},
|
|
58
57
|
"publishConfig": {
|
|
59
58
|
"access": "public",
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
1
2
|
/// <reference types="react" />
|
|
2
3
|
import { NotificactionBadge as props } from './index.d';
|
|
3
4
|
declare const NotificationBadge: {
|
|
@@ -9,13 +10,47 @@ declare const NotificationBadge: {
|
|
|
9
10
|
position: string;
|
|
10
11
|
};
|
|
11
12
|
propTypes: {
|
|
12
|
-
type:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
type: {
|
|
14
|
+
defaultValue<T = unknown>(arg: T): {
|
|
15
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
16
|
+
};
|
|
17
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
18
|
+
};
|
|
19
|
+
value: {
|
|
20
|
+
defaultValue<T = unknown>(arg: T): {
|
|
21
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
22
|
+
};
|
|
23
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
24
|
+
};
|
|
25
|
+
size: {
|
|
26
|
+
defaultValue<T = unknown>(arg: T): {
|
|
27
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
28
|
+
};
|
|
29
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
30
|
+
};
|
|
31
|
+
disabled: {
|
|
32
|
+
defaultValue<T = unknown>(arg: T): {
|
|
33
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
34
|
+
};
|
|
35
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
36
|
+
};
|
|
37
|
+
position: {
|
|
38
|
+
defaultValue<T = unknown>(arg: T): {
|
|
39
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
40
|
+
};
|
|
41
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
42
|
+
};
|
|
43
|
+
Component: {
|
|
44
|
+
defaultValue<T = unknown>(arg: T): {
|
|
45
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
46
|
+
};
|
|
47
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
48
|
+
};
|
|
18
49
|
};
|
|
19
50
|
};
|
|
20
|
-
declare const NotificationBadgeWithSchema:
|
|
51
|
+
declare const NotificationBadgeWithSchema: {
|
|
52
|
+
(props?: props | undefined): JSX.Element;
|
|
53
|
+
propTypes: unknown;
|
|
54
|
+
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
55
|
+
};
|
|
21
56
|
export { NotificationBadge, NotificationBadgeWithSchema };
|
package/types/prop-types.d.ts
CHANGED
|
@@ -1,10 +1,41 @@
|
|
|
1
|
+
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
1
2
|
export declare const notificationBadgeProps: {
|
|
2
|
-
type:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
type: {
|
|
4
|
+
defaultValue<T = unknown>(arg: T): {
|
|
5
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
6
|
+
};
|
|
7
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
8
|
+
};
|
|
9
|
+
value: {
|
|
10
|
+
defaultValue<T = unknown>(arg: T): {
|
|
11
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
12
|
+
};
|
|
13
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
14
|
+
};
|
|
15
|
+
size: {
|
|
16
|
+
defaultValue<T = unknown>(arg: T): {
|
|
17
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
18
|
+
};
|
|
19
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
20
|
+
};
|
|
21
|
+
disabled: {
|
|
22
|
+
defaultValue<T = unknown>(arg: T): {
|
|
23
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
24
|
+
};
|
|
25
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
26
|
+
};
|
|
27
|
+
position: {
|
|
28
|
+
defaultValue<T = unknown>(arg: T): {
|
|
29
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
30
|
+
};
|
|
31
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
32
|
+
};
|
|
33
|
+
Component: {
|
|
34
|
+
defaultValue<T = unknown>(arg: T): {
|
|
35
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
36
|
+
};
|
|
37
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
38
|
+
};
|
|
8
39
|
};
|
|
9
40
|
export declare const defaultProps: {
|
|
10
41
|
type: string;
|
package/types/style.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const Wrapper: import("styled-components").StyledComponent<"div",
|
|
2
|
-
export declare const GenericBadge: import("styled-components").StyledComponent<"span",
|
|
3
|
-
export declare const NumericBadge: import("styled-components").StyledComponent<"span",
|
|
4
|
-
export declare const DotBadge: import("styled-components").StyledComponent<"span",
|
|
1
|
+
export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
2
|
+
export declare const GenericBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
3
|
+
export declare const NumericBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
export declare const DotBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|