@elliemae/ds-notification-badge 2.3.0-alpha.9 → 2.3.0-next.3
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 +76 -0
- package/cjs/index.js +11 -0
- package/cjs/react-desc-prop-types.js +40 -0
- package/cjs/style.js +100 -0
- package/esm/NotificationBadge.js +66 -0
- package/esm/index.js +1 -0
- package/esm/react-desc-prop-types.js +31 -0
- package/esm/style.js +89 -0
- package/package.json +23 -25
- package/types/NotificationBadge.d.ts +5 -0
- package/{dist/types → types}/index.d.ts +0 -0
- package/types/react-desc-prop-types.d.ts +382 -0
- package/types/style.d.ts +19 -0
- package/dist/cjs/NotificationBadge.js +0 -82
- package/dist/cjs/NotificationBadge.js.map +0 -7
- package/dist/cjs/index.d.js +0 -27
- package/dist/cjs/index.d.js.map +0 -7
- package/dist/cjs/index.js +0 -36
- package/dist/cjs/index.js.map +0 -7
- package/dist/cjs/prop-types.js +0 -50
- package/dist/cjs/prop-types.js.map +0 -7
- package/dist/cjs/style.js +0 -81
- package/dist/cjs/style.js.map +0 -7
- package/dist/esm/NotificationBadge.js +0 -53
- package/dist/esm/NotificationBadge.js.map +0 -7
- package/dist/esm/index.d.js +0 -2
- package/dist/esm/index.d.js.map +0 -7
- package/dist/esm/index.js +0 -7
- package/dist/esm/index.js.map +0 -7
- package/dist/esm/prop-types.js +0 -21
- package/dist/esm/prop-types.js.map +0 -7
- package/dist/esm/style.js +0 -52
- package/dist/esm/style.js.map +0 -7
- package/dist/types/NotificationBadge.d.ts +0 -56
- package/dist/types/index.d.d.ts +0 -9
- package/dist/types/prop-types.d.ts +0 -45
- package/dist/types/style.d.ts +0 -4
package/dist/cjs/style.js
DELETED
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var style_exports = {};
|
|
29
|
-
__export(style_exports, {
|
|
30
|
-
DotBadge: () => DotBadge,
|
|
31
|
-
GenericBadge: () => GenericBadge,
|
|
32
|
-
NumericBadge: () => NumericBadge,
|
|
33
|
-
Wrapper: () => Wrapper
|
|
34
|
-
});
|
|
35
|
-
var React = __toESM(require("react"));
|
|
36
|
-
var import_styled_components = __toESM(require("styled-components"));
|
|
37
|
-
const Wrapper = import_styled_components.default.div`
|
|
38
|
-
display: flex;
|
|
39
|
-
flex-direction: column;
|
|
40
|
-
justify-content: center;
|
|
41
|
-
align-items: center;
|
|
42
|
-
width: fit-content;
|
|
43
|
-
`;
|
|
44
|
-
const GenericBadge = import_styled_components.default.span`
|
|
45
|
-
position: relative;
|
|
46
|
-
top: ${({ top }) => top ? `${top}px` : "unset"};
|
|
47
|
-
left: ${({ left }) => left ? `${left}px` : "unset"};
|
|
48
|
-
right: ${({ right }) => right ? `${right}px` : "unset"};
|
|
49
|
-
`;
|
|
50
|
-
const NumericBadge = (0, import_styled_components.default)(GenericBadge)`
|
|
51
|
-
display: flex;
|
|
52
|
-
justify-content: center;
|
|
53
|
-
align-items: center;
|
|
54
|
-
width: fit-content;
|
|
55
|
-
color: #fff;
|
|
56
|
-
padding: ${({ value }) => value > 9 ? "0 5px" : "0"};
|
|
57
|
-
padding-top: 2px;
|
|
58
|
-
background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[500] : theme.colors.danger[900]};
|
|
59
|
-
border-radius: ${({ value }) => value > 9 ? "10px" : "50%"};
|
|
60
|
-
font-size: ${({ size }) => size === "l" ? "16px" : "12px"};
|
|
61
|
-
font-weight: ${({ size }) => size === "l" ? "400" : "600"};
|
|
62
|
-
height: ${({ size }) => size === "l" ? "21px" : "15px"};
|
|
63
|
-
min-width: ${({ size, value }) => {
|
|
64
|
-
if (size === "l" && value > 9)
|
|
65
|
-
return "30px";
|
|
66
|
-
if (size === "l" && value <= 9)
|
|
67
|
-
return "21px";
|
|
68
|
-
if (size === "s" && value > 9)
|
|
69
|
-
return "21px";
|
|
70
|
-
if (size === "s" && value <= 9)
|
|
71
|
-
return "15px";
|
|
72
|
-
}};
|
|
73
|
-
`;
|
|
74
|
-
const DotBadge = (0, import_styled_components.default)(GenericBadge)`
|
|
75
|
-
background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[500] : theme.colors.brand[500]};
|
|
76
|
-
width: ${({ size }) => size === "l" ? "15px" : "10px"};
|
|
77
|
-
height: ${({ size }) => size === "l" ? "15px" : "10px"};
|
|
78
|
-
border-radius: 100%;
|
|
79
|
-
`;
|
|
80
|
-
module.exports = __toCommonJS(style_exports);
|
|
81
|
-
//# sourceMappingURL=style.js.map
|
package/dist/cjs/style.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/style.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: fit-content;\n`;\n\nexport const GenericBadge = styled.span`\n position: relative;\n top: ${({ top }) => (top ? `${top}px` : 'unset')};\n left: ${({ left }) => (left ? `${left}px` : 'unset')};\n right: ${({ right }) => (right ? `${right}px` : 'unset')};\n`;\n\nexport const NumericBadge = styled(GenericBadge)`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ value }) => (value > 9 ? '0 5px' : '0')};\n padding-top: 2px;\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.danger[900]};\n border-radius: ${({ value }) => (value > 9 ? '10px' : '50%')};\n font-size: ${({ size }) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }) => (size === 'l' ? '400' : '600')};\n height: ${({ size }) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, value }) => {\n if (size === 'l' && value > 9) return '30px';\n if (size === 'l' && value <= 9) return '21px';\n if (size === 's' && value > 9) return '21px';\n if (size === 's' && value <= 9) return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)`\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AAEZ,MAAM,UAAU,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,iCAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,UAAW,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,WAAY,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,YAAa,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,eAAe,sCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMtB,CAAC,EAAE,YAAa,QAAQ,IAAI,UAAU;AAAA;AAAA,sBAE7B,CAAC,EAAE,UAAU,YAC/B,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,OAAO;AAAA,mBAC5C,CAAC,EAAE,YAAa,QAAQ,IAAI,SAAS;AAAA,eACzC,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,WAAY,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,YAAY;AAChC,MAAI,SAAS,OAAO,QAAQ;AAAG,WAAO;AACtC,MAAI,SAAS,OAAO,SAAS;AAAG,WAAO;AACvC,MAAI,SAAS,OAAO,QAAQ;AAAG,WAAO;AACtC,MAAI,SAAS,OAAO,SAAS;AAAG,WAAO;AAAA;AAAA;AAIpC,MAAM,WAAW,sCAAO;AAAA,sBACT,CAAC,EAAE,UAAU,YAC/B,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA,WACnD,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2, { useState, useEffect, useRef } from "react";
|
|
3
|
-
import { describe } from "react-desc";
|
|
4
|
-
import { notificationBadgeProps, defaultProps } from "./prop-types";
|
|
5
|
-
import { Wrapper, NumericBadge, DotBadge } from "./style";
|
|
6
|
-
const NotificationBadge = ({
|
|
7
|
-
type,
|
|
8
|
-
value,
|
|
9
|
-
size,
|
|
10
|
-
disabled,
|
|
11
|
-
position,
|
|
12
|
-
Component
|
|
13
|
-
}) => {
|
|
14
|
-
const Badge = type === "number" ? NumericBadge : DotBadge;
|
|
15
|
-
const relatedComponentRef = useRef(null);
|
|
16
|
-
const renderBadge = relatedComponentRef?.current || !Component;
|
|
17
|
-
const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);
|
|
18
|
-
const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
const relatedComponent = relatedComponentRef?.current;
|
|
21
|
-
setRelatedComponentHeight(relatedComponent?.offsetHeight);
|
|
22
|
-
setRelatedComponentWidth(relatedComponent?.offsetWidth);
|
|
23
|
-
}, [relatedComponentRef]);
|
|
24
|
-
let top;
|
|
25
|
-
let right;
|
|
26
|
-
let left;
|
|
27
|
-
if (Component) {
|
|
28
|
-
if (position === "right")
|
|
29
|
-
left = relatedComponentWidth / 2;
|
|
30
|
-
if (position === "left")
|
|
31
|
-
right = relatedComponentWidth / 2;
|
|
32
|
-
top = relatedComponentHeight / 2;
|
|
33
|
-
}
|
|
34
|
-
return /* @__PURE__ */ React2.createElement(Wrapper, null, renderBadge && /* @__PURE__ */ React2.createElement(Badge, {
|
|
35
|
-
size,
|
|
36
|
-
value,
|
|
37
|
-
disabled,
|
|
38
|
-
top,
|
|
39
|
-
left,
|
|
40
|
-
right
|
|
41
|
-
}, type === "number" && value), Component && /* @__PURE__ */ React2.createElement(Component, {
|
|
42
|
-
innerRef: relatedComponentRef
|
|
43
|
-
}));
|
|
44
|
-
};
|
|
45
|
-
NotificationBadge.defaultProps = defaultProps;
|
|
46
|
-
NotificationBadge.propTypes = notificationBadgeProps;
|
|
47
|
-
const NotificationBadgeWithSchema = describe(NotificationBadge);
|
|
48
|
-
NotificationBadgeWithSchema.propTypes = notificationBadgeProps;
|
|
49
|
-
export {
|
|
50
|
-
NotificationBadge,
|
|
51
|
-
NotificationBadgeWithSchema
|
|
52
|
-
};
|
|
53
|
-
//# sourceMappingURL=NotificationBadge.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/NotificationBadge.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect, useRef } from 'react';\nimport { describe } from 'react-desc';\nimport { notificationBadgeProps, defaultProps } from './prop-types';\nimport { NotificactionBadge as props } from './index.d';\nimport { Wrapper, NumericBadge, DotBadge } from './style';\n\nconst NotificationBadge = ({\n type,\n value,\n size,\n disabled,\n position,\n Component,\n}: props): JSX.Element => {\n const Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef(null);\n const renderBadge = relatedComponentRef?.current || !Component;\n const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);\n const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);\n\n useEffect(() => {\n const relatedComponent = relatedComponentRef?.current;\n setRelatedComponentHeight(relatedComponent?.offsetHeight);\n setRelatedComponentWidth(relatedComponent?.offsetWidth);\n }, [relatedComponentRef]);\n\n let top;\n let right;\n let left;\n\n if (Component) {\n if (position === 'right') left = relatedComponentWidth / 2;\n if (position === 'left') right = relatedComponentWidth / 2;\n top = relatedComponentHeight / 2;\n }\n\n return (\n <Wrapper>\n {renderBadge && (\n <Badge\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={left}\n right={right}\n >\n {type === 'number' && value}\n </Badge>\n )}\n {Component && <Component innerRef={relatedComponentRef} />}\n </Wrapper>\n );\n};\n\nNotificationBadge.defaultProps = defaultProps;\nNotificationBadge.propTypes = notificationBadgeProps;\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = notificationBadgeProps;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEA,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACwB;AACxB,QAAM,QAAQ,SAAS,WAAW,eAAe;AACjD,QAAM,sBAAsB,OAAO;AACnC,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,6BAA6B,SAAS;AACrE,QAAM,CAAC,uBAAuB,4BAA4B,SAAS;AAEnE,YAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB;AAC5C,6BAAyB,kBAAkB;AAAA,KAC1C,CAAC;AAEJ,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,MAAI,WAAW;AACb,QAAI,aAAa;AAAS,aAAO,wBAAwB;AACzD,QAAI,aAAa;AAAQ,cAAQ,wBAAwB;AACzD,UAAM,yBAAyB;AAAA;AAGjC,SACE,qCAAC,SAAD,MACG,eACC,qCAAC,OAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,SAAS,YAAY,QAGzB,aAAa,qCAAC,WAAD;AAAA,IAAW,UAAU;AAAA;AAAA;AAKzC,kBAAkB,eAAe;AACjC,kBAAkB,YAAY;AAC9B,MAAM,8BAA8B,SAAS;AAC7C,4BAA4B,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/index.d.js
DELETED
package/dist/esm/index.d.js.map
DELETED
package/dist/esm/index.js
DELETED
package/dist/esm/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './NotificationBadge';\nexport { NotificationBadge as default } from './NotificationBadge';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/prop-types.js
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { PropTypes } from "react-desc";
|
|
3
|
-
const notificationBadgeProps = {
|
|
4
|
-
type: PropTypes.oneOf(["number", "dot"]).description("type of badge: number or dot"),
|
|
5
|
-
value: PropTypes.number.description("value of the numeric badge"),
|
|
6
|
-
size: PropTypes.oneOf(["s", "l"]).description("size of the badge: s or l"),
|
|
7
|
-
disabled: PropTypes.bool.description("whether the badge is disabled"),
|
|
8
|
-
position: PropTypes.oneOf(["left", "right"]).description("position of the badge with the related component"),
|
|
9
|
-
Component: PropTypes.func.description("Related component")
|
|
10
|
-
};
|
|
11
|
-
const defaultProps = {
|
|
12
|
-
type: "number",
|
|
13
|
-
size: "s",
|
|
14
|
-
disabled: false,
|
|
15
|
-
position: "right"
|
|
16
|
-
};
|
|
17
|
-
export {
|
|
18
|
-
defaultProps,
|
|
19
|
-
notificationBadgeProps
|
|
20
|
-
};
|
|
21
|
-
//# sourceMappingURL=prop-types.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const notificationBadgeProps = {\n type: PropTypes.oneOf(['number', 'dot']).description(\n 'type of badge: number or dot',\n ),\n value: PropTypes.number.description('value of the numeric badge'),\n size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n disabled: PropTypes.bool.description('whether the badge is disabled'),\n position: PropTypes.oneOf(['left', 'right']).description(\n 'position of the badge with the related component',\n ),\n Component: PropTypes.func.description('Related component'),\n};\n\nexport const defaultProps = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEO,MAAM,yBAAyB;AAAA,EACpC,MAAM,UAAU,MAAM,CAAC,UAAU,QAAQ,YACvC;AAAA,EAEF,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,MAAM,UAAU,MAAM,CAAC,KAAK,MAAM,YAAY;AAAA,EAC9C,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,UAAU,UAAU,MAAM,CAAC,QAAQ,UAAU,YAC3C;AAAA,EAEF,WAAW,UAAU,KAAK,YAAY;AAAA;AAGjC,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/style.js
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import styled from "styled-components";
|
|
3
|
-
const Wrapper = styled.div`
|
|
4
|
-
display: flex;
|
|
5
|
-
flex-direction: column;
|
|
6
|
-
justify-content: center;
|
|
7
|
-
align-items: center;
|
|
8
|
-
width: fit-content;
|
|
9
|
-
`;
|
|
10
|
-
const GenericBadge = styled.span`
|
|
11
|
-
position: relative;
|
|
12
|
-
top: ${({ top }) => top ? `${top}px` : "unset"};
|
|
13
|
-
left: ${({ left }) => left ? `${left}px` : "unset"};
|
|
14
|
-
right: ${({ right }) => right ? `${right}px` : "unset"};
|
|
15
|
-
`;
|
|
16
|
-
const NumericBadge = styled(GenericBadge)`
|
|
17
|
-
display: flex;
|
|
18
|
-
justify-content: center;
|
|
19
|
-
align-items: center;
|
|
20
|
-
width: fit-content;
|
|
21
|
-
color: #fff;
|
|
22
|
-
padding: ${({ value }) => value > 9 ? "0 5px" : "0"};
|
|
23
|
-
padding-top: 2px;
|
|
24
|
-
background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[500] : theme.colors.danger[900]};
|
|
25
|
-
border-radius: ${({ value }) => value > 9 ? "10px" : "50%"};
|
|
26
|
-
font-size: ${({ size }) => size === "l" ? "16px" : "12px"};
|
|
27
|
-
font-weight: ${({ size }) => size === "l" ? "400" : "600"};
|
|
28
|
-
height: ${({ size }) => size === "l" ? "21px" : "15px"};
|
|
29
|
-
min-width: ${({ size, value }) => {
|
|
30
|
-
if (size === "l" && value > 9)
|
|
31
|
-
return "30px";
|
|
32
|
-
if (size === "l" && value <= 9)
|
|
33
|
-
return "21px";
|
|
34
|
-
if (size === "s" && value > 9)
|
|
35
|
-
return "21px";
|
|
36
|
-
if (size === "s" && value <= 9)
|
|
37
|
-
return "15px";
|
|
38
|
-
}};
|
|
39
|
-
`;
|
|
40
|
-
const DotBadge = styled(GenericBadge)`
|
|
41
|
-
background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[500] : theme.colors.brand[500]};
|
|
42
|
-
width: ${({ size }) => size === "l" ? "15px" : "10px"};
|
|
43
|
-
height: ${({ size }) => size === "l" ? "15px" : "10px"};
|
|
44
|
-
border-radius: 100%;
|
|
45
|
-
`;
|
|
46
|
-
export {
|
|
47
|
-
DotBadge,
|
|
48
|
-
GenericBadge,
|
|
49
|
-
NumericBadge,
|
|
50
|
-
Wrapper
|
|
51
|
-
};
|
|
52
|
-
//# sourceMappingURL=style.js.map
|
package/dist/esm/style.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: fit-content;\n`;\n\nexport const GenericBadge = styled.span`\n position: relative;\n top: ${({ top }) => (top ? `${top}px` : 'unset')};\n left: ${({ left }) => (left ? `${left}px` : 'unset')};\n right: ${({ right }) => (right ? `${right}px` : 'unset')};\n`;\n\nexport const NumericBadge = styled(GenericBadge)`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ value }) => (value > 9 ? '0 5px' : '0')};\n padding-top: 2px;\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.danger[900]};\n border-radius: ${({ value }) => (value > 9 ? '10px' : '50%')};\n font-size: ${({ size }) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }) => (size === 'l' ? '400' : '600')};\n height: ${({ size }) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, value }) => {\n if (size === 'l' && value > 9) return '30px';\n if (size === 'l' && value <= 9) return '21px';\n if (size === 's' && value > 9) return '21px';\n if (size === 's' && value <= 9) return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)`\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEO,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,OAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,UAAW,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,WAAY,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,YAAa,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMtB,CAAC,EAAE,YAAa,QAAQ,IAAI,UAAU;AAAA;AAAA,sBAE7B,CAAC,EAAE,UAAU,YAC/B,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,OAAO;AAAA,mBAC5C,CAAC,EAAE,YAAa,QAAQ,IAAI,SAAS;AAAA,eACzC,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,WAAY,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,YAAY;AAChC,MAAI,SAAS,OAAO,QAAQ;AAAG,WAAO;AACtC,MAAI,SAAS,OAAO,SAAS;AAAG,WAAO;AACvC,MAAI,SAAS,OAAO,QAAQ;AAAG,WAAO;AACtC,MAAI,SAAS,OAAO,SAAS;AAAG,WAAO;AAAA;AAAA;AAIpC,MAAM,WAAW,OAAO;AAAA,sBACT,CAAC,EAAE,UAAU,YAC/B,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA,WACnD,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
|
-
import { NotificactionBadge as props } from './index.d';
|
|
4
|
-
declare const NotificationBadge: {
|
|
5
|
-
({ type, value, size, disabled, position, Component, }: props): JSX.Element;
|
|
6
|
-
defaultProps: {
|
|
7
|
-
type: string;
|
|
8
|
-
size: string;
|
|
9
|
-
disabled: boolean;
|
|
10
|
-
position: string;
|
|
11
|
-
};
|
|
12
|
-
propTypes: {
|
|
13
|
-
type: {
|
|
14
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
15
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
16
|
-
};
|
|
17
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
18
|
-
};
|
|
19
|
-
value: {
|
|
20
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
21
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
22
|
-
};
|
|
23
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
24
|
-
};
|
|
25
|
-
size: {
|
|
26
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
27
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
28
|
-
};
|
|
29
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
30
|
-
};
|
|
31
|
-
disabled: {
|
|
32
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
33
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
34
|
-
};
|
|
35
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
36
|
-
};
|
|
37
|
-
position: {
|
|
38
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
39
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
40
|
-
};
|
|
41
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
42
|
-
};
|
|
43
|
-
Component: {
|
|
44
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
45
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
46
|
-
};
|
|
47
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
48
|
-
};
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
|
-
declare const NotificationBadgeWithSchema: {
|
|
52
|
-
(props?: unknown): JSX.Element;
|
|
53
|
-
propTypes: unknown;
|
|
54
|
-
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
55
|
-
};
|
|
56
|
-
export { NotificationBadge, NotificationBadgeWithSchema };
|
package/dist/types/index.d.d.ts
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
|
-
export declare const notificationBadgeProps: {
|
|
3
|
-
type: {
|
|
4
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
5
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
6
|
-
};
|
|
7
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
8
|
-
};
|
|
9
|
-
value: {
|
|
10
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
11
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
12
|
-
};
|
|
13
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
14
|
-
};
|
|
15
|
-
size: {
|
|
16
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
17
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
18
|
-
};
|
|
19
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
20
|
-
};
|
|
21
|
-
disabled: {
|
|
22
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
23
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
24
|
-
};
|
|
25
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
26
|
-
};
|
|
27
|
-
position: {
|
|
28
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
29
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
30
|
-
};
|
|
31
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
32
|
-
};
|
|
33
|
-
Component: {
|
|
34
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
35
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
36
|
-
};
|
|
37
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
38
|
-
};
|
|
39
|
-
};
|
|
40
|
-
export declare const defaultProps: {
|
|
41
|
-
type: string;
|
|
42
|
-
size: string;
|
|
43
|
-
disabled: boolean;
|
|
44
|
-
position: string;
|
|
45
|
-
};
|
package/dist/types/style.d.ts
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
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>;
|