@elliemae/ds-notification-badge 3.0.0-next.4 → 3.0.0-next.42
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/cjs/NotificationBadge.js +5 -5
- package/dist/cjs/NotificationBadge.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +9 -9
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/style.js.map +1 -1
- package/dist/esm/NotificationBadge.js +1 -1
- package/dist/esm/NotificationBadge.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/style.js.map +1 -1
- package/package.json +3 -2
|
@@ -58,13 +58,13 @@ __export(NotificationBadge_exports, {
|
|
|
58
58
|
});
|
|
59
59
|
var React = __toESM(require("react"));
|
|
60
60
|
var import_react = __toESM(require("react"));
|
|
61
|
-
var
|
|
61
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
62
62
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
63
63
|
var import_style = require("./style");
|
|
64
64
|
const NotificationBadge = (props) => {
|
|
65
|
-
const propsWithDefaults = (0,
|
|
66
|
-
(0,
|
|
67
|
-
const globalAttributes = (0,
|
|
65
|
+
const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
66
|
+
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.NotificationBadgePropTypes);
|
|
67
|
+
const globalAttributes = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefaults);
|
|
68
68
|
const { type, color, value, size, disabled, position, Component } = propsWithDefaults;
|
|
69
69
|
const Badge = type === "number" ? import_style.NumericBadge : import_style.DotBadge;
|
|
70
70
|
const relatedComponentRef = (0, import_react.useRef)(null);
|
|
@@ -99,7 +99,7 @@ const NotificationBadge = (props) => {
|
|
|
99
99
|
}));
|
|
100
100
|
};
|
|
101
101
|
NotificationBadge.propTypes = import_react_desc_prop_types.NotificationBadgePropTypes;
|
|
102
|
-
const NotificationBadgeWithSchema = (0,
|
|
102
|
+
const NotificationBadgeWithSchema = (0, import_ds_utilities.describe)(NotificationBadge);
|
|
103
103
|
NotificationBadgeWithSchema.propTypes = import_react_desc_prop_types.NotificationBadgePropTypes;
|
|
104
104
|
module.exports = __toCommonJS(NotificationBadge_exports);
|
|
105
105
|
//# sourceMappingURL=NotificationBadge.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/NotificationBadge.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect, useRef, WeakValidationMap } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n} from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsE;AACtE,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef, WeakValidationMap } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n} from '@elliemae/ds-utilities';\n\nimport { NotificationBadgePropTypes, DSNotificationBadgeT, defaultProps } from './react-desc-prop-types';\nimport { Wrapper, NumericBadge, DotBadge } from './style';\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(propsWithDefaults, NotificationBadgePropTypes);\n const globalAttributes = useGetGlobalAttributes(propsWithDefaults);\n\n const { type, color, value, size, disabled, position, Component } = propsWithDefaults;\n\n const Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(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 || 0);\n setRelatedComponentWidth(relatedComponent?.offsetWidth || 0);\n }, [relatedComponentRef]);\n\n let top = 0;\n let right = 0;\n let left = 0;\n\n if (position === 'right') left = relatedComponentWidth / 2;\n if (position === 'left') right = relatedComponentWidth / 2;\n top = relatedComponentHeight / 2;\n\n const { value: globalValue, color: globalColor, type: globalType, ...restGlobals } = globalAttributes;\n return (\n <Wrapper {...restGlobals}>\n {renderBadge && (\n <Badge\n data-testid=\"ds-notification-badge\"\n color={color}\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.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsE;AACtE,0BAKO;AAEP,mCAA+E;AAC/E,mBAAgD;AAEhD,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,sDAA6B,OAAO,yCAAY;AAC1E,0DAA2D,mBAAmB,uDAA0B;AACxG,QAAM,mBAAmB,gDAAuB,iBAAiB;AAEjE,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,cAAc;AAEpE,QAAM,QAAQ,SAAS,WAAW,4BAAe;AACjD,QAAM,sBAAsB,yBAAwB,IAAI;AACxD,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,6BAA6B,2BAAS,CAAC;AACtE,QAAM,CAAC,uBAAuB,4BAA4B,2BAAS,CAAC;AAEpE,8BAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB,gBAAgB,CAAC;AAC7D,6BAAyB,kBAAkB,eAAe,CAAC;AAAA,EAC7D,GAAG,CAAC,mBAAmB,CAAC;AAExB,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAEX,MAAI,aAAa;AAAS,WAAO,wBAAwB;AACzD,MAAI,aAAa;AAAQ,YAAQ,wBAAwB;AACzD,QAAM,yBAAyB;AAE/B,QAAqF,uBAA7E,SAAO,aAAa,OAAO,aAAa,MAAM,eAA+B,IAAhB,wBAAgB,IAAhB,CAA7D,SAAoB,SAAoB;AAChD,SACE,mDAAC,yCAAY,cACV,eACC,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,SAAS,YAAY,KACxB,GAED,aAAa,mDAAC;AAAA,IAAU,UAAU;AAAA,GAAqB,CAC1D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,MAAM,8BAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -48,7 +48,7 @@ __export(react_desc_prop_types_exports, {
|
|
|
48
48
|
defaultProps: () => defaultProps
|
|
49
49
|
});
|
|
50
50
|
var React = __toESM(require("react"));
|
|
51
|
-
var
|
|
51
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
52
52
|
const defaultProps = {
|
|
53
53
|
type: "number",
|
|
54
54
|
size: "s",
|
|
@@ -58,14 +58,14 @@ const defaultProps = {
|
|
|
58
58
|
Component: void 0,
|
|
59
59
|
value: void 0
|
|
60
60
|
};
|
|
61
|
-
const NotificationBadgePropTypes = __spreadProps(__spreadValues({},
|
|
62
|
-
type:
|
|
63
|
-
value:
|
|
64
|
-
size:
|
|
65
|
-
disabled:
|
|
66
|
-
position:
|
|
67
|
-
Component:
|
|
68
|
-
color:
|
|
61
|
+
const NotificationBadgePropTypes = __spreadProps(__spreadValues({}, import_ds_utilities.globalAttributesPropTypes), {
|
|
62
|
+
type: import_ds_utilities.PropTypes.oneOf(["number", "dot"]).description("type of badge: number or dot"),
|
|
63
|
+
value: import_ds_utilities.PropTypes.number.description("value of the numeric badge"),
|
|
64
|
+
size: import_ds_utilities.PropTypes.oneOf(["s", "l"]).description("size of the badge: s or l"),
|
|
65
|
+
disabled: import_ds_utilities.PropTypes.bool.description("whether the badge is disabled"),
|
|
66
|
+
position: import_ds_utilities.PropTypes.oneOf(["left", "right"]).description("position of the badge with the related component"),
|
|
67
|
+
Component: import_ds_utilities.PropTypes.func.description("Related component"),
|
|
68
|
+
color: import_ds_utilities.PropTypes.string.description("Badge background color value")
|
|
69
69
|
});
|
|
70
70
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
71
71
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSNotificationBadgeT {\n interface ComponentT {\n innerRef: React.RefObject<HTMLSpanElement>;\n }\n\n export interface Props {\n [property: string]: unknown;\n type?: string;\n value?: number;\n size?: string;\n disabled?: boolean;\n position?: string;\n Component?: (propsT: ComponentT) => JSX.Element;\n color?: string;\n }\n}\n\nexport const defaultProps: DSNotificationBadgeT.Props = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: undefined,\n Component: undefined,\n value: undefined,\n};\n\nexport const NotificationBadgePropTypes = {\n ...globalAttributesPropTypes,\n type: PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),\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('position of the badge with the related component'),\n Component: PropTypes.func.description('Related component'),\n color: PropTypes.string.description('Badge background color value'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;AAmB9C,MAAM,eAA2C;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AACT;AAEO,MAAM,6BAA6B,iCACrC,gDADqC;AAAA,EAExC,MAAM,8BAAU,MAAM,CAAC,UAAU,KAAK,CAAC,EAAE,YAAY,8BAA8B;AAAA,EACnF,OAAO,8BAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,8BAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,2BAA2B;AAAA,EACzE,UAAU,8BAAU,KAAK,YAAY,+BAA+B;AAAA,EACpE,UAAU,8BAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAC3G,WAAW,8BAAU,KAAK,YAAY,mBAAmB;AAAA,EACzD,OAAO,8BAAU,OAAO,YAAY,8BAA8B;AACpE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/style.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/style.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import styled from 'styled-components';\nimport { DSNotificationBadgeT } from './react-desc-prop-types';\n\ninterface StyledGenericBadgeT {\n top: number;\n left: number;\n right: number;\n}\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<DSNotificationBadgeT.Props & StyledGenericBadgeT>`\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 top: number;\n left: number;\n right: number;\n size?: string;\n disabled?: boolean;\n value?: number;\n color?: string;\n}>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ value }) => (value && value > 9 ? '0 5px' : '0')};\n padding-top: 2px;\n background-color: ${({ disabled, color, theme }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ value }) => (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 && value > 9) return '30px';\n if (size === 'l' && value && value <= 9) return '21px';\n if (size === 's' && value && value > 9) return '21px';\n return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)<DSNotificationBadgeT.Props>`\n background-color: ${({ disabled, theme, color }) =>\n disabled ? theme.colors.neutral['500'] : color || 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;AASZ,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,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AASZ,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,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAclC,CAAC,EAAE,YAAa,SAAS,QAAQ,IAAI,UAAU;AAAA;AAAA,sBAEtC,CAAC,EAAE,UAAU,OAAO,YACtC,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,OAAO;AAAA,mBACvD,CAAC,EAAE,YAAa,SAAS,QAAQ,IAAI,SAAS;AAAA,eAClD,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,SAAS,QAAQ;AAAG,WAAO;AAC/C,MAAI,SAAS,OAAO,SAAS,SAAS;AAAG,WAAO;AAChD,MAAI,SAAS,OAAO,SAAS,QAAQ;AAAG,WAAO;AAC/C,SAAO;AACT;AAAA;AAGK,MAAM,WAAW,sCAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,YACtC,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,MAAM;AAAA,WAC9D,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ import {
|
|
|
33
33
|
useValidateTypescriptPropTypes,
|
|
34
34
|
describe,
|
|
35
35
|
useGetGlobalAttributes
|
|
36
|
-
} from "@elliemae/ds-
|
|
36
|
+
} from "@elliemae/ds-utilities";
|
|
37
37
|
import { NotificationBadgePropTypes, defaultProps } from "./react-desc-prop-types";
|
|
38
38
|
import { Wrapper, NumericBadge, DotBadge } from "./style";
|
|
39
39
|
const NotificationBadge = (props) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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, WeakValidationMap } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n} from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AAEA,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,6BAA6B,OAAO;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect, useRef, WeakValidationMap } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n} from '@elliemae/ds-utilities';\n\nimport { NotificationBadgePropTypes, DSNotificationBadgeT, defaultProps } from './react-desc-prop-types';\nimport { Wrapper, NumericBadge, DotBadge } from './style';\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(propsWithDefaults, NotificationBadgePropTypes);\n const globalAttributes = useGetGlobalAttributes(propsWithDefaults);\n\n const { type, color, value, size, disabled, position, Component } = propsWithDefaults;\n\n const Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(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 || 0);\n setRelatedComponentWidth(relatedComponent?.offsetWidth || 0);\n }, [relatedComponentRef]);\n\n let top = 0;\n let right = 0;\n let left = 0;\n\n if (position === 'right') left = relatedComponentWidth / 2;\n if (position === 'left') right = relatedComponentWidth / 2;\n top = relatedComponentHeight / 2;\n\n const { value: globalValue, color: globalColor, type: globalType, ...restGlobals } = globalAttributes;\n return (\n <Wrapper {...restGlobals}>\n {renderBadge && (\n <Badge\n data-testid=\"ds-notification-badge\"\n color={color}\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.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AAEA,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E,iCAA2D,mBAAmB,0BAA0B;AACxG,QAAM,mBAAmB,uBAAuB,iBAAiB;AAEjE,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,cAAc;AAEpE,QAAM,QAAQ,SAAS,WAAW,eAAe;AACjD,QAAM,sBAAsB,OAAwB,IAAI;AACxD,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,6BAA6B,SAAS,CAAC;AACtE,QAAM,CAAC,uBAAuB,4BAA4B,SAAS,CAAC;AAEpE,YAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB,gBAAgB,CAAC;AAC7D,6BAAyB,kBAAkB,eAAe,CAAC;AAAA,EAC7D,GAAG,CAAC,mBAAmB,CAAC;AAExB,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAEX,MAAI,aAAa;AAAS,WAAO,wBAAwB;AACzD,MAAI,aAAa;AAAQ,YAAQ,wBAAwB;AACzD,QAAM,yBAAyB;AAE/B,QAAqF,uBAA7E,SAAO,aAAa,OAAO,aAAa,MAAM,eAA+B,IAAhB,wBAAgB,IAAhB,CAA7D,SAAoB,SAAoB;AAChD,SACE,qCAAC,4BAAY,cACV,eACC,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,SAAS,YAAY,KACxB,GAED,aAAa,qCAAC;AAAA,IAAU,UAAU;AAAA,GAAqB,CAC1D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
|
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
20
|
import * as React from "react";
|
|
21
|
-
import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-
|
|
21
|
+
import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-utilities";
|
|
22
22
|
const defaultProps = {
|
|
23
23
|
type: "number",
|
|
24
24
|
size: "s",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAmBO,MAAM,eAA2C;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSNotificationBadgeT {\n interface ComponentT {\n innerRef: React.RefObject<HTMLSpanElement>;\n }\n\n export interface Props {\n [property: string]: unknown;\n type?: string;\n value?: number;\n size?: string;\n disabled?: boolean;\n position?: string;\n Component?: (propsT: ComponentT) => JSX.Element;\n color?: string;\n }\n}\n\nexport const defaultProps: DSNotificationBadgeT.Props = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: undefined,\n Component: undefined,\n value: undefined,\n};\n\nexport const NotificationBadgePropTypes = {\n ...globalAttributesPropTypes,\n type: PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),\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('position of the badge with the related component'),\n Component: PropTypes.func.description('Related component'),\n color: PropTypes.string.description('Badge background color value'),\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAmBO,MAAM,eAA2C;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AACT;AAEO,MAAM,6BAA6B,iCACrC,4BADqC;AAAA,EAExC,MAAM,UAAU,MAAM,CAAC,UAAU,KAAK,CAAC,EAAE,YAAY,8BAA8B;AAAA,EACnF,OAAO,UAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,UAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,2BAA2B;AAAA,EACzE,UAAU,UAAU,KAAK,YAAY,+BAA+B;AAAA,EACpE,UAAU,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAC3G,WAAW,UAAU,KAAK,YAAY,mBAAmB;AAAA,EACzD,OAAO,UAAU,OAAO,YAAY,8BAA8B;AACpE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/style.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { DSNotificationBadgeT } from './react-desc-prop-types';\n\ninterface StyledGenericBadgeT {\n top: number;\n left: number;\n right: number;\n}\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<DSNotificationBadgeT.Props & StyledGenericBadgeT>`\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 top: number;\n left: number;\n right: number;\n size?: string;\n disabled?: boolean;\n value?: number;\n color?: string;\n}>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ value }) => (value && value > 9 ? '0 5px' : '0')};\n padding-top: 2px;\n background-color: ${({ disabled, color, theme }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ value }) => (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 && value > 9) return '30px';\n if (size === 'l' && value && value <= 9) return '21px';\n if (size === 's' && value && value > 9) return '21px';\n return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)<DSNotificationBadgeT.Props>`\n background-color: ${({ disabled, theme, color }) =>\n disabled ? theme.colors.neutral['500'] : color || 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;AASO,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,
|
|
5
|
+
"mappings": "AAAA;ACAA;AASO,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,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAclC,CAAC,EAAE,YAAa,SAAS,QAAQ,IAAI,UAAU;AAAA;AAAA,sBAEtC,CAAC,EAAE,UAAU,OAAO,YACtC,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,OAAO;AAAA,mBACvD,CAAC,EAAE,YAAa,SAAS,QAAQ,IAAI,SAAS;AAAA,eAClD,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,SAAS,QAAQ;AAAG,WAAO;AAC/C,MAAI,SAAS,OAAO,SAAS,SAAS;AAAG,WAAO;AAChD,MAAI,SAAS,OAAO,SAAS,QAAQ;AAAG,WAAO;AAC/C,SAAO;AACT;AAAA;AAGK,MAAM,WAAW,OAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,YACtC,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,MAAM;AAAA,WAC9D,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-notification-badge",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.42",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Notification Badge",
|
|
6
6
|
"files": [
|
|
@@ -47,7 +47,8 @@
|
|
|
47
47
|
"indent": 4
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@elliemae/ds-
|
|
50
|
+
"@elliemae/ds-system": "3.0.0-next.42",
|
|
51
|
+
"@elliemae/ds-utilities": "3.0.0-next.42",
|
|
51
52
|
"react-desc": "~4.1.3"
|
|
52
53
|
},
|
|
53
54
|
"devDependencies": {
|