@elliemae/ds-notification-badge 3.37.2 → 3.38.0-rc.1
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 +3 -2
- package/dist/cjs/NotificationBadge.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/style.js +1 -1
- package/dist/cjs/style.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-notification-badge-valid.js +5 -0
- package/dist/cjs/typescript-testing/typescript-notification-badge-valid.js.map +2 -2
- package/dist/esm/NotificationBadge.js +3 -2
- package/dist/esm/NotificationBadge.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +2 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/style.js +1 -1
- package/dist/esm/style.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-notification-badge-valid.js +5 -0
- package/dist/esm/typescript-testing/typescript-notification-badge-valid.js.map +2 -2
- package/dist/types/react-desc-prop-types.d.ts +2 -0
- package/dist/types/style.d.ts +1 -0
- package/package.json +4 -4
|
@@ -47,7 +47,7 @@ const NotificationBadge = (props) => {
|
|
|
47
47
|
import_react_desc_prop_types.NotificationBadgePropTypes,
|
|
48
48
|
"DSNotificationBadge"
|
|
49
49
|
);
|
|
50
|
-
const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
|
|
50
|
+
const { type, color, textColor, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
|
|
51
51
|
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
|
|
52
52
|
const [renderBadge, setRenderBadge] = import_react.default.useState(false);
|
|
53
53
|
const isNumericBadge = type === "number";
|
|
@@ -70,12 +70,13 @@ const NotificationBadge = (props) => {
|
|
|
70
70
|
renderBadge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
71
71
|
Badge,
|
|
72
72
|
{
|
|
73
|
-
"data-related-component":
|
|
73
|
+
"data-related-component": Component ? "true" : "false",
|
|
74
74
|
innerRef: badgeComponentRef,
|
|
75
75
|
"data-position": position,
|
|
76
76
|
"data-type": type,
|
|
77
77
|
"data-testid": "ds-notification-badge",
|
|
78
78
|
color,
|
|
79
|
+
textColor,
|
|
79
80
|
size,
|
|
80
81
|
value,
|
|
81
82
|
disabled,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/NotificationBadge.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.js';\n\nconst getValueCharactersCount = (val: string | number | undefined): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSNotificationBadgeT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, textColor, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<HTMLDivElement>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component);\n }, [relatedComponentRef, Component]);\n\n const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n const spaceLeft = getSpaceLeft(relatedComputedStyle);\n const spaceRight = getSpaceRight(relatedComputedStyle);\n const spaceTop = getSpaceTop(relatedComputedStyle);\n\n const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n return (\n <Wrapper {...globalAttributes} innerRef={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n data-related-component={Component ? 'true' : 'false'}\n innerRef={badgeComponentRef}\n data-position={position}\n data-type={type}\n data-testid=\"ds-notification-badge\"\n color={color}\n textColor={textColor}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n right={position === 'right' ? right : null}\n left={position === 'left' ? left : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null}\n {Component ? <Component data-testid=\"ds-notification-badge-component\" innerRef={relatedComponentRef} /> : null}\n </Wrapper>\n );\n};\n\nNotificationBadge.displayName = 'NotificationBadge';\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as ValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDnB;AA/CJ,mBAA8B;AAC9B,8BAMO;AAEP,mCAAyD;AACzD,mBAAgD;AAChD,qBAAyD;AAEzD,MAAM,0BAA0B,CAAC,QAA6C,OAAO,GAAG,EAAE;AAE1F,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,wBAAoB,sDAAiE,OAAO,yCAAY;AAC9G;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,WAAW,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AACxF,QAAM,uBAAmB,gDAAuB,IAAI;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1D,QAAM,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,4BAAe;AAC9C,QAAM,0BAAsB,qBAAwB,IAAI;AACxD,QAAM,0BAAsB,qBAAuB,IAAI;AACvD,QAAM,wBAAoB,qBAAuB,IAAI;AAErD,eAAAA,QAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,SAAS,CAAC;AAEnC,QAAM,uBAAuB,qBAAqB,UAAU,OAAO,iBAAiB,qBAAqB,OAAO,IAAI;AACpH,QAAM,gBAAY,6BAAa,oBAAoB;AACnD,QAAM,iBAAa,8BAAc,oBAAoB;AACrD,QAAM,eAAW,4BAAY,oBAAoB;AAEjD,QAAM,SAAS,iBAAkB,SAAS,MAAM,IAAI,IAAK,SAAS,MAAM,IAAI;AAC5E,QAAM,MAAM,qBAAqB,UAAU,WAAW,SAAS;AAC/D,QAAM,OAAO,qBAAqB,UAAU,YAAY,SAAS;AACjE,QAAM,QAAQ,qBAAqB,UAAU,aAAa,SAAS;AAEnE,SACE,6CAAC,wBAAS,GAAG,kBAAkB,UAAU,qBACtC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB,YAAY,SAAS;AAAA,QAC7C,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,4CAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA,KAC5G;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -48,6 +48,7 @@ const NotificationBadgePropTypes = {
|
|
|
48
48
|
position: import_ds_props_helpers.PropTypes.oneOf(["left", "right"]).description("position of the badge with the related component"),
|
|
49
49
|
disabled: import_ds_props_helpers.PropTypes.bool.description("whether the badge is disabled"),
|
|
50
50
|
Component: import_ds_props_helpers.PropTypes.node.description("Related component"),
|
|
51
|
-
color: import_ds_props_helpers.PropTypes.string.description("Badge background color value")
|
|
51
|
+
color: import_ds_props_helpers.PropTypes.string.description("Badge background color value"),
|
|
52
|
+
textColor: import_ds_props_helpers.PropTypes.string.description("Badge text color value")
|
|
52
53
|
};
|
|
53
54
|
//# 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 type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSNotificationBadgeT {\n interface ComponentT {\n innerRef: React.RefObject<HTMLSpanElement>;\n }\n type BadgeType = 'number' | 'dot';\n type BadgeSize = 's' | 'l';\n type BadgePosition = 'left' | 'right';\n\n export interface DefaultProps {\n type: BadgeType;\n size: BadgeSize;\n disabled: boolean;\n position: BadgePosition;\n }\n\n export interface OptionalProps {\n value?: number | string;\n Component?: (propsT: ComponentT) => JSX.Element;\n color?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps> {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps> {}\n}\n\nexport const defaultProps: DSNotificationBadgeT.DefaultProps = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n};\n\nexport const NotificationBadgePropTypes = {\n ...globalAttributesPropTypes,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('value of the numeric badge'),\n type: PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),\n size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n position: PropTypes.oneOf(['left', 'right']).description('position of the badge with the related component'),\n disabled: PropTypes.bool.description('whether the badge is disabled'),\n Component: PropTypes.node.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;AAAA;ACAA,YAAuB;ADCvB,8BAAqD;
|
|
4
|
+
"sourcesContent": ["import type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSNotificationBadgeT {\n interface ComponentT {\n innerRef: React.RefObject<HTMLSpanElement>;\n }\n type BadgeType = 'number' | 'dot';\n type BadgeSize = 's' | 'l';\n type BadgePosition = 'left' | 'right';\n\n export interface DefaultProps {\n type: BadgeType;\n size: BadgeSize;\n disabled: boolean;\n position: BadgePosition;\n }\n\n export interface OptionalProps {\n value?: number | string;\n Component?: (propsT: ComponentT) => JSX.Element;\n color?: string;\n textColor?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps> {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps> {}\n}\n\nexport const defaultProps: DSNotificationBadgeT.DefaultProps = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n};\n\nexport const NotificationBadgePropTypes = {\n ...globalAttributesPropTypes,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('value of the numeric badge'),\n type: PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),\n size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n position: PropTypes.oneOf(['left', 'right']).description('position of the badge with the related component'),\n disabled: PropTypes.bool.description('whether the badge is disabled'),\n Component: PropTypes.node.description('Related component'),\n color: PropTypes.string.description('Badge background color value'),\n textColor: PropTypes.string.description('Badge text color value'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAqD;AAmC9C,MAAM,eAAkD;AAAA,EAC7D,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,6BAA6B;AAAA,EACxC,GAAG;AAAA,EACH,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,4BAA4B;AAAA,EACzG,MAAM,kCAAU,MAAM,CAAC,UAAU,KAAK,CAAC,EAAE,YAAY,8BAA8B;AAAA,EACnF,MAAM,kCAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,2BAA2B;AAAA,EACzE,UAAU,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAC3G,UAAU,kCAAU,KAAK,YAAY,+BAA+B;AAAA,EACpE,WAAW,kCAAU,KAAK,YAAY,mBAAmB;AAAA,EACzD,OAAO,kCAAU,OAAO,YAAY,8BAA8B;AAAA,EAClE,WAAW,kCAAU,OAAO,YAAY,wBAAwB;AAClE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/style.js
CHANGED
|
@@ -70,7 +70,7 @@ const NumericBadge = (0, import_ds_system.styled)(GenericBadge)`
|
|
|
70
70
|
align-items: center;
|
|
71
71
|
width: fit-content;
|
|
72
72
|
white-space: nowrap;
|
|
73
|
-
color: #fff;
|
|
73
|
+
color: ${({ textColor }) => textColor || "#fff"};
|
|
74
74
|
padding: ${({ charCount }) => charCount > 1 ? "0 5px" : "0"};
|
|
75
75
|
background-color: ${({ disabled, color, theme }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.danger["900"]};
|
|
76
76
|
border-radius: ${({ charCount }) => charCount > 1 ? "10px" : "50%"};
|
package/dist/cjs/style.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/style.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\n\ninterface NumericBadgeT {\n top: number;\n left: number;\n right: number;\n charCount: number;\n size?: string;\n value?: number | string;\n disabled?: boolean;\n color?: string;\n theme: Theme;\n ['data-related-component']: 'true' | 'false';\n}\n\nconst magicNumbersWidth = {\n l: 30,\n l1: 21,\n d: 15,\n};\n\nconst getWidth = (size: string | undefined, charCount: number) => {\n if (size === 'l' && charCount > 1) return magicNumbersWidth.l;\n if (size === 'l' && charCount <= 1) return magicNumbersWidth.l1;\n if (size === 's' && charCount > 1) return magicNumbersWidth.l1;\n return magicNumbersWidth.d;\n};\n\nexport const Wrapper = styled.div`\n width: fit-content;\n height: fit-content;\n position: relative;\n z-index: 0;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: ${(props) => (props['data-related-component'] === 'true' ? 'absolute' : 'inherit')};\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n top: ${({ top }: NumericBadgeT) => `${top}px`};\n right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n left: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n z-index: ${({ theme }) => theme.zIndex.tooltip};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<NumericBadgeT>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n white-space: nowrap;\n color: #fff;\n padding: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }: NumericBadgeT) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }: NumericBadgeT) => (size === 'l' ? '400' : '600')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }: NumericBadgeT) => `${getWidth(size, charCount)}px`};\n`;\n\nexport const DotBadge = styled(GenericBadge)<NumericBadgeT>`\n background-color: ${({ disabled, theme, color }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }: NumericBadgeT) => (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;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\n\ninterface NumericBadgeT {\n top: number;\n left: number;\n right: number;\n charCount: number;\n size?: string;\n value?: number | string;\n disabled?: boolean;\n color?: string;\n textColor?: string;\n theme: Theme;\n ['data-related-component']: 'true' | 'false';\n}\n\nconst magicNumbersWidth = {\n l: 30,\n l1: 21,\n d: 15,\n};\n\nconst getWidth = (size: string | undefined, charCount: number) => {\n if (size === 'l' && charCount > 1) return magicNumbersWidth.l;\n if (size === 'l' && charCount <= 1) return magicNumbersWidth.l1;\n if (size === 's' && charCount > 1) return magicNumbersWidth.l1;\n return magicNumbersWidth.d;\n};\n\nexport const Wrapper = styled.div`\n width: fit-content;\n height: fit-content;\n position: relative;\n z-index: 0;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: ${(props) => (props['data-related-component'] === 'true' ? 'absolute' : 'inherit')};\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n top: ${({ top }: NumericBadgeT) => `${top}px`};\n right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n left: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n z-index: ${({ theme }) => theme.zIndex.tooltip};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<NumericBadgeT>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n white-space: nowrap;\n color: ${({ textColor }: NumericBadgeT) => textColor || '#fff'};\n padding: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }: NumericBadgeT) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }: NumericBadgeT) => (size === 'l' ? '400' : '600')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }: NumericBadgeT) => `${getWidth(size, charCount)}px`};\n`;\n\nexport const DotBadge = styled(GenericBadge)<NumericBadgeT>`\n background-color: ${({ disabled, theme, color }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }: NumericBadgeT) => (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;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAiBvB,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,GAAG;AACL;AAEA,MAAM,WAAW,CAAC,MAA0B,cAAsB;AAChE,MAAI,SAAS,OAAO,YAAY,EAAG,QAAO,kBAAkB;AAC5D,MAAI,SAAS,OAAO,aAAa,EAAG,QAAO,kBAAkB;AAC7D,MAAI,SAAS,OAAO,YAAY,EAAG,QAAO,kBAAkB;AAC5D,SAAO,kBAAkB;AAC3B;AAEO,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvB,MAAM,eAAe,wBAAO;AAAA,cACrB,CAAC,UAAW,MAAM,wBAAwB,MAAM,SAAS,aAAa,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA,SAKrF,CAAC,EAAE,IAAI,MAAqB,GAAG,GAAG,IAAI;AAAA,WACpC,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,KAAK,OAAO,OAAQ;AAAA,UAC/D,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,IAAI,OAAO,OAAQ;AAAA,aACxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO;AAAA;AAGzC,MAAM,mBAAe,yBAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMpC,CAAC,EAAE,UAAU,MAAqB,aAAa,MAAM;AAAA,aACnD,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,UAAU,GAAI;AAAA,sBACxD,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK,CAAC;AAAA,mBAC7D,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,SAAS,KAAM;AAAA,eACtE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA,iBAC3D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,QAAQ,KAAM;AAAA,YAChE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA,eAC1D,CAAC,EAAE,MAAM,UAAU,MAAqB,GAAG,SAAS,MAAM,SAAS,CAAC,IAAI;AAAA;AAGhF,MAAM,eAAW,yBAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,WAClE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA,YAC5D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -27,6 +27,7 @@ var import__ = require("../index.js");
|
|
|
27
27
|
const MockComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {});
|
|
28
28
|
const testOptionalProps = {
|
|
29
29
|
color: "#FF0000",
|
|
30
|
+
textColor: "#0000FF",
|
|
30
31
|
value: "99+",
|
|
31
32
|
Component: MockComponent
|
|
32
33
|
};
|
|
@@ -62,6 +63,7 @@ const testExplicitDefinition = {
|
|
|
62
63
|
disabled: false,
|
|
63
64
|
position: "right",
|
|
64
65
|
color: "#FF0000",
|
|
66
|
+
textColor: "#0000FF",
|
|
65
67
|
value: "99+",
|
|
66
68
|
Component: MockComponent
|
|
67
69
|
};
|
|
@@ -71,6 +73,7 @@ const testInferedTypeCompatibility = {
|
|
|
71
73
|
disabled: false,
|
|
72
74
|
position: "right",
|
|
73
75
|
color: "#FF0000",
|
|
76
|
+
textColor: "#0000FF",
|
|
74
77
|
value: "99+",
|
|
75
78
|
Component: MockComponent
|
|
76
79
|
};
|
|
@@ -80,6 +83,7 @@ const testDefinitionAsConst = {
|
|
|
80
83
|
disabled: false,
|
|
81
84
|
position: "right",
|
|
82
85
|
color: "#FF0000",
|
|
86
|
+
textColor: "#0000FF",
|
|
83
87
|
value: "99+",
|
|
84
88
|
Component: MockComponent
|
|
85
89
|
};
|
|
@@ -95,6 +99,7 @@ const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)
|
|
|
95
99
|
disabled: false,
|
|
96
100
|
position: "right",
|
|
97
101
|
color: "green",
|
|
102
|
+
textColor: "yellow",
|
|
98
103
|
value: "5",
|
|
99
104
|
Component: MockComponent,
|
|
100
105
|
children: "Button Label"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-notification-badge-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { NotificationBadge } from '../index.js';\nimport type { DSNotificationBadgeT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSNotificationBadgeT.Props;\ntype ComponentPropsInternals = DSNotificationBadgeT.InternalProps;\ntype ComponentPropsDefaultProps = DSNotificationBadgeT.DefaultProps;\ntype ComponentPropsOptionalProps = DSNotificationBadgeT.OptionalProps;\n\nconst MockComponent = () => <div></div>;\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n color: '#FF0000',\n value: '99+',\n Component: MockComponent,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n type: 'dot',\n position: 'right',\n};\nconst testProps: ComponentPropsForApp = {\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n type: 'number',\n position: 'left',\n size: 'l',\n disabled: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: '#FF0000',\n value: '99+',\n Component: MockComponent,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: '#FF0000',\n value: '99+',\n Component: MockComponent,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: '#FF0000',\n value: '99+',\n Component: MockComponent,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <NotificationBadge {...testExplicitDefinition} />\n <NotificationBadge {...testInferedTypeCompatibility} />\n <NotificationBadge {...testDefinitionAsConst} />\n {/* works with inline values */}\n <NotificationBadge\n type=\"number\"\n size=\"s\"\n disabled={false}\n position=\"right\"\n color=\"green\"\n value=\"5\"\n Component={MockComponent}\n >\n Button Label\n </NotificationBadge>\n </>\n);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACUK;AAT5B,eAAkC;AASlC,MAAM,gBAAgB,MAAM,4CAAC,SAAI;AAEjC,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AACb;AAIA,MAAM,sBAA2D;AAAA,EAC/D,MAAM;AAAA,EACN,UAAU;AACZ;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AACb;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AACb;AAEA,MAAM,wBAAwB;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AACb;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,8BAAmB,GAAG,wBAAwB;AAAA,EAC/C,4CAAC,8BAAmB,GAAG,8BAA8B;AAAA,EACrD,4CAAC,8BAAmB,GAAG,uBAAuB;AAAA,EAE9C;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAS;AAAA,MACT,OAAM;AAAA,MACN,OAAM;AAAA,MACN,WAAW;AAAA,MACZ;AAAA;AAAA,EAED;AAAA,GACF;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { NotificationBadge } from '../index.js';\nimport type { DSNotificationBadgeT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSNotificationBadgeT.Props;\ntype ComponentPropsInternals = DSNotificationBadgeT.InternalProps;\ntype ComponentPropsDefaultProps = DSNotificationBadgeT.DefaultProps;\ntype ComponentPropsOptionalProps = DSNotificationBadgeT.OptionalProps;\n\nconst MockComponent = () => <div></div>;\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n color: '#FF0000',\n textColor: '#0000FF',\n value: '99+',\n Component: MockComponent,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n type: 'dot',\n position: 'right',\n};\nconst testProps: ComponentPropsForApp = {\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n type: 'number',\n position: 'left',\n size: 'l',\n disabled: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: '#FF0000',\n textColor: '#0000FF',\n value: '99+',\n Component: MockComponent,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: '#FF0000',\n textColor: '#0000FF',\n value: '99+',\n Component: MockComponent,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: '#FF0000',\n textColor: '#0000FF',\n value: '99+',\n Component: MockComponent,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <NotificationBadge {...testExplicitDefinition} />\n <NotificationBadge {...testInferedTypeCompatibility} />\n <NotificationBadge {...testDefinitionAsConst} />\n {/* works with inline values */}\n <NotificationBadge\n type=\"number\"\n size=\"s\"\n disabled={false}\n position=\"right\"\n color=\"green\"\n textColor=\"yellow\"\n value=\"5\"\n Component={MockComponent}\n >\n Button Label\n </NotificationBadge>\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACUK;AAT5B,eAAkC;AASlC,MAAM,gBAAgB,MAAM,4CAAC,SAAI;AAEjC,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACb;AAIA,MAAM,sBAA2D;AAAA,EAC/D,MAAM;AAAA,EACN,UAAU;AACZ;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACb;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACb;AAEA,MAAM,wBAAwB;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACb;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,8BAAmB,GAAG,wBAAwB;AAAA,EAC/C,4CAAC,8BAAmB,GAAG,8BAA8B;AAAA,EACrD,4CAAC,8BAAmB,GAAG,uBAAuB;AAAA,EAE9C;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAS;AAAA,MACT,OAAM;AAAA,MACN,WAAU;AAAA,MACV,OAAM;AAAA,MACN,WAAW;AAAA,MACZ;AAAA;AAAA,EAED;AAAA,GACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,7 +18,7 @@ const NotificationBadge = (props) => {
|
|
|
18
18
|
NotificationBadgePropTypes,
|
|
19
19
|
"DSNotificationBadge"
|
|
20
20
|
);
|
|
21
|
-
const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
|
|
21
|
+
const { type, color, textColor, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
|
|
22
22
|
const globalAttributes = useGetGlobalAttributes(rest);
|
|
23
23
|
const [renderBadge, setRenderBadge] = React2.useState(false);
|
|
24
24
|
const isNumericBadge = type === "number";
|
|
@@ -41,12 +41,13 @@ const NotificationBadge = (props) => {
|
|
|
41
41
|
renderBadge ? /* @__PURE__ */ jsx(
|
|
42
42
|
Badge,
|
|
43
43
|
{
|
|
44
|
-
"data-related-component":
|
|
44
|
+
"data-related-component": Component ? "true" : "false",
|
|
45
45
|
innerRef: badgeComponentRef,
|
|
46
46
|
"data-position": position,
|
|
47
47
|
"data-type": type,
|
|
48
48
|
"data-testid": "ds-notification-badge",
|
|
49
49
|
color,
|
|
50
|
+
textColor,
|
|
50
51
|
size,
|
|
51
52
|
value,
|
|
52
53
|
disabled,
|
|
@@ -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", "/* eslint-disable
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.js';\n\nconst getValueCharactersCount = (val: string | number | undefined): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSNotificationBadgeT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, textColor, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<HTMLDivElement>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component);\n }, [relatedComponentRef, Component]);\n\n const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n const spaceLeft = getSpaceLeft(relatedComputedStyle);\n const spaceRight = getSpaceRight(relatedComputedStyle);\n const spaceTop = getSpaceTop(relatedComputedStyle);\n\n const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n return (\n <Wrapper {...globalAttributes} innerRef={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n data-related-component={Component ? 'true' : 'false'}\n innerRef={badgeComponentRef}\n data-position={position}\n data-type={type}\n data-testid=\"ds-notification-badge\"\n color={color}\n textColor={textColor}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n right={position === 'right' ? right : null}\n left={position === 'left' ? left : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null}\n {Component ? <Component data-testid=\"ds-notification-badge-component\" innerRef={relatedComponentRef} /> : null}\n </Wrapper>\n );\n};\n\nNotificationBadge.displayName = 'NotificationBadge';\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as ValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiDnB,SAEI,KAFJ;AA/CJ,OAAOA,UAAS,cAAc;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,4BAA4B,oBAAoB;AACzD,SAAS,SAAS,cAAc,gBAAgB;AAChD,SAAS,cAAc,eAAe,mBAAmB;AAEzD,MAAM,0BAA0B,CAAC,QAA6C,OAAO,GAAG,EAAE;AAE1F,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,6BAAiE,OAAO,YAAY;AAC9G;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,WAAW,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AACxF,QAAM,mBAAmB,uBAAuB,IAAI;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAS,KAAK;AAC1D,QAAM,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,eAAe;AAC9C,QAAM,sBAAsB,OAAwB,IAAI;AACxD,QAAM,sBAAsB,OAAuB,IAAI;AACvD,QAAM,oBAAoB,OAAuB,IAAI;AAErD,EAAAA,OAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,SAAS,CAAC;AAEnC,QAAM,uBAAuB,qBAAqB,UAAU,OAAO,iBAAiB,qBAAqB,OAAO,IAAI;AACpH,QAAM,YAAY,aAAa,oBAAoB;AACnD,QAAM,aAAa,cAAc,oBAAoB;AACrD,QAAM,WAAW,YAAY,oBAAoB;AAEjD,QAAM,SAAS,iBAAkB,SAAS,MAAM,IAAI,IAAK,SAAS,MAAM,IAAI;AAC5E,QAAM,MAAM,qBAAqB,UAAU,WAAW,SAAS;AAC/D,QAAM,OAAO,qBAAqB,UAAU,YAAY,SAAS;AACjE,QAAM,QAAQ,qBAAqB,UAAU,aAAa,SAAS;AAEnE,SACE,qBAAC,WAAS,GAAG,kBAAkB,UAAU,qBACtC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB,YAAY,SAAS;AAAA,QAC7C,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,oBAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA,KAC5G;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -14,7 +14,8 @@ const NotificationBadgePropTypes = {
|
|
|
14
14
|
position: PropTypes.oneOf(["left", "right"]).description("position of the badge with the related component"),
|
|
15
15
|
disabled: PropTypes.bool.description("whether the badge is disabled"),
|
|
16
16
|
Component: PropTypes.node.description("Related component"),
|
|
17
|
-
color: PropTypes.string.description("Badge background color value")
|
|
17
|
+
color: PropTypes.string.description("Badge background color value"),
|
|
18
|
+
textColor: PropTypes.string.description("Badge text color value")
|
|
18
19
|
};
|
|
19
20
|
export {
|
|
20
21
|
NotificationBadgePropTypes,
|
|
@@ -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 type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSNotificationBadgeT {\n interface ComponentT {\n innerRef: React.RefObject<HTMLSpanElement>;\n }\n type BadgeType = 'number' | 'dot';\n type BadgeSize = 's' | 'l';\n type BadgePosition = 'left' | 'right';\n\n export interface DefaultProps {\n type: BadgeType;\n size: BadgeSize;\n disabled: boolean;\n position: BadgePosition;\n }\n\n export interface OptionalProps {\n value?: number | string;\n Component?: (propsT: ComponentT) => JSX.Element;\n color?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps> {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps> {}\n}\n\nexport const defaultProps: DSNotificationBadgeT.DefaultProps = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n};\n\nexport const NotificationBadgePropTypes = {\n ...globalAttributesPropTypes,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('value of the numeric badge'),\n type: PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),\n size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n position: PropTypes.oneOf(['left', 'right']).description('position of the badge with the related component'),\n disabled: PropTypes.bool.description('whether the badge is disabled'),\n Component: PropTypes.node.description('Related component'),\n color: PropTypes.string.description('Badge background color value'),\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,iCAAiC;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSNotificationBadgeT {\n interface ComponentT {\n innerRef: React.RefObject<HTMLSpanElement>;\n }\n type BadgeType = 'number' | 'dot';\n type BadgeSize = 's' | 'l';\n type BadgePosition = 'left' | 'right';\n\n export interface DefaultProps {\n type: BadgeType;\n size: BadgeSize;\n disabled: boolean;\n position: BadgePosition;\n }\n\n export interface OptionalProps {\n value?: number | string;\n Component?: (propsT: ComponentT) => JSX.Element;\n color?: string;\n textColor?: string;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps> {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps> {}\n}\n\nexport const defaultProps: DSNotificationBadgeT.DefaultProps = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n};\n\nexport const NotificationBadgePropTypes = {\n ...globalAttributesPropTypes,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('value of the numeric badge'),\n type: PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),\n size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n position: PropTypes.oneOf(['left', 'right']).description('position of the badge with the related component'),\n disabled: PropTypes.bool.description('whether the badge is disabled'),\n Component: PropTypes.node.description('Related component'),\n color: PropTypes.string.description('Badge background color value'),\n textColor: PropTypes.string.description('Badge text color value'),\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,iCAAiC;AAmC9C,MAAM,eAAkD;AAAA,EAC7D,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,6BAA6B;AAAA,EACxC,GAAG;AAAA,EACH,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,4BAA4B;AAAA,EACzG,MAAM,UAAU,MAAM,CAAC,UAAU,KAAK,CAAC,EAAE,YAAY,8BAA8B;AAAA,EACnF,MAAM,UAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,2BAA2B;AAAA,EACzE,UAAU,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAC3G,UAAU,UAAU,KAAK,YAAY,+BAA+B;AAAA,EACpE,WAAW,UAAU,KAAK,YAAY,mBAAmB;AAAA,EACzD,OAAO,UAAU,OAAO,YAAY,8BAA8B;AAAA,EAClE,WAAW,UAAU,OAAO,YAAY,wBAAwB;AAClE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/style.js
CHANGED
|
@@ -34,7 +34,7 @@ const NumericBadge = styled(GenericBadge)`
|
|
|
34
34
|
align-items: center;
|
|
35
35
|
width: fit-content;
|
|
36
36
|
white-space: nowrap;
|
|
37
|
-
color: #fff;
|
|
37
|
+
color: ${({ textColor }) => textColor || "#fff"};
|
|
38
38
|
padding: ${({ charCount }) => charCount > 1 ? "0 5px" : "0"};
|
|
39
39
|
background-color: ${({ disabled, color, theme }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.danger["900"]};
|
|
40
40
|
border-radius: ${({ charCount }) => charCount > 1 ? "10px" : "50%"};
|
package/dist/esm/style.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\n\ninterface NumericBadgeT {\n top: number;\n left: number;\n right: number;\n charCount: number;\n size?: string;\n value?: number | string;\n disabled?: boolean;\n color?: string;\n theme: Theme;\n ['data-related-component']: 'true' | 'false';\n}\n\nconst magicNumbersWidth = {\n l: 30,\n l1: 21,\n d: 15,\n};\n\nconst getWidth = (size: string | undefined, charCount: number) => {\n if (size === 'l' && charCount > 1) return magicNumbersWidth.l;\n if (size === 'l' && charCount <= 1) return magicNumbersWidth.l1;\n if (size === 's' && charCount > 1) return magicNumbersWidth.l1;\n return magicNumbersWidth.d;\n};\n\nexport const Wrapper = styled.div`\n width: fit-content;\n height: fit-content;\n position: relative;\n z-index: 0;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: ${(props) => (props['data-related-component'] === 'true' ? 'absolute' : 'inherit')};\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n top: ${({ top }: NumericBadgeT) => `${top}px`};\n right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n left: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n z-index: ${({ theme }) => theme.zIndex.tooltip};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<NumericBadgeT>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n white-space: nowrap;\n color: #fff;\n padding: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }: NumericBadgeT) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }: NumericBadgeT) => (size === 'l' ? '400' : '600')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }: NumericBadgeT) => `${getWidth(size, charCount)}px`};\n`;\n\nexport const DotBadge = styled(GenericBadge)<NumericBadgeT>`\n background-color: ${({ disabled, theme, color }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\n\ninterface NumericBadgeT {\n top: number;\n left: number;\n right: number;\n charCount: number;\n size?: string;\n value?: number | string;\n disabled?: boolean;\n color?: string;\n textColor?: string;\n theme: Theme;\n ['data-related-component']: 'true' | 'false';\n}\n\nconst magicNumbersWidth = {\n l: 30,\n l1: 21,\n d: 15,\n};\n\nconst getWidth = (size: string | undefined, charCount: number) => {\n if (size === 'l' && charCount > 1) return magicNumbersWidth.l;\n if (size === 'l' && charCount <= 1) return magicNumbersWidth.l1;\n if (size === 's' && charCount > 1) return magicNumbersWidth.l1;\n return magicNumbersWidth.d;\n};\n\nexport const Wrapper = styled.div`\n width: fit-content;\n height: fit-content;\n position: relative;\n z-index: 0;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: ${(props) => (props['data-related-component'] === 'true' ? 'absolute' : 'inherit')};\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n top: ${({ top }: NumericBadgeT) => `${top}px`};\n right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n left: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n z-index: ${({ theme }) => theme.zIndex.tooltip};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<NumericBadgeT>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n white-space: nowrap;\n color: ${({ textColor }: NumericBadgeT) => textColor || '#fff'};\n padding: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }: NumericBadgeT) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }: NumericBadgeT) => (size === 'l' ? '400' : '600')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }: NumericBadgeT) => `${getWidth(size, charCount)}px`};\n`;\n\nexport const DotBadge = styled(GenericBadge)<NumericBadgeT>`\n background-color: ${({ disabled, theme, color }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAiBvB,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,GAAG;AACL;AAEA,MAAM,WAAW,CAAC,MAA0B,cAAsB;AAChE,MAAI,SAAS,OAAO,YAAY,EAAG,QAAO,kBAAkB;AAC5D,MAAI,SAAS,OAAO,aAAa,EAAG,QAAO,kBAAkB;AAC7D,MAAI,SAAS,OAAO,YAAY,EAAG,QAAO,kBAAkB;AAC5D,SAAO,kBAAkB;AAC3B;AAEO,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvB,MAAM,eAAe,OAAO;AAAA,cACrB,CAAC,UAAW,MAAM,wBAAwB,MAAM,SAAS,aAAa,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA,SAKrF,CAAC,EAAE,IAAI,MAAqB,GAAG,GAAG,IAAI;AAAA,WACpC,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,KAAK,OAAO,OAAQ;AAAA,UAC/D,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,IAAI,OAAO,OAAQ;AAAA,aACxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO;AAAA;AAGzC,MAAM,eAAe,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMpC,CAAC,EAAE,UAAU,MAAqB,aAAa,MAAM;AAAA,aACnD,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,UAAU,GAAI;AAAA,sBACxD,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK,CAAC;AAAA,mBAC7D,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,SAAS,KAAM;AAAA,eACtE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA,iBAC3D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,QAAQ,KAAM;AAAA,YAChE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA,eAC1D,CAAC,EAAE,MAAM,UAAU,MAAqB,GAAG,SAAS,MAAM,SAAS,CAAC,IAAI;AAAA;AAGhF,MAAM,WAAW,OAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,WAClE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA,YAC5D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,6 +4,7 @@ import { NotificationBadge } from "../index.js";
|
|
|
4
4
|
const MockComponent = () => /* @__PURE__ */ jsx("div", {});
|
|
5
5
|
const testOptionalProps = {
|
|
6
6
|
color: "#FF0000",
|
|
7
|
+
textColor: "#0000FF",
|
|
7
8
|
value: "99+",
|
|
8
9
|
Component: MockComponent
|
|
9
10
|
};
|
|
@@ -39,6 +40,7 @@ const testExplicitDefinition = {
|
|
|
39
40
|
disabled: false,
|
|
40
41
|
position: "right",
|
|
41
42
|
color: "#FF0000",
|
|
43
|
+
textColor: "#0000FF",
|
|
42
44
|
value: "99+",
|
|
43
45
|
Component: MockComponent
|
|
44
46
|
};
|
|
@@ -48,6 +50,7 @@ const testInferedTypeCompatibility = {
|
|
|
48
50
|
disabled: false,
|
|
49
51
|
position: "right",
|
|
50
52
|
color: "#FF0000",
|
|
53
|
+
textColor: "#0000FF",
|
|
51
54
|
value: "99+",
|
|
52
55
|
Component: MockComponent
|
|
53
56
|
};
|
|
@@ -57,6 +60,7 @@ const testDefinitionAsConst = {
|
|
|
57
60
|
disabled: false,
|
|
58
61
|
position: "right",
|
|
59
62
|
color: "#FF0000",
|
|
63
|
+
textColor: "#0000FF",
|
|
60
64
|
value: "99+",
|
|
61
65
|
Component: MockComponent
|
|
62
66
|
};
|
|
@@ -72,6 +76,7 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
|
72
76
|
disabled: false,
|
|
73
77
|
position: "right",
|
|
74
78
|
color: "green",
|
|
79
|
+
textColor: "yellow",
|
|
75
80
|
value: "5",
|
|
76
81
|
Component: MockComponent,
|
|
77
82
|
children: "Button Label"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-notification-badge-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { NotificationBadge } from '../index.js';\nimport type { DSNotificationBadgeT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSNotificationBadgeT.Props;\ntype ComponentPropsInternals = DSNotificationBadgeT.InternalProps;\ntype ComponentPropsDefaultProps = DSNotificationBadgeT.DefaultProps;\ntype ComponentPropsOptionalProps = DSNotificationBadgeT.OptionalProps;\n\nconst MockComponent = () => <div></div>;\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n color: '#FF0000',\n value: '99+',\n Component: MockComponent,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n type: 'dot',\n position: 'right',\n};\nconst testProps: ComponentPropsForApp = {\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n type: 'number',\n position: 'left',\n size: 'l',\n disabled: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: '#FF0000',\n value: '99+',\n Component: MockComponent,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: '#FF0000',\n value: '99+',\n Component: MockComponent,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: '#FF0000',\n value: '99+',\n Component: MockComponent,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <NotificationBadge {...testExplicitDefinition} />\n <NotificationBadge {...testInferedTypeCompatibility} />\n <NotificationBadge {...testDefinitionAsConst} />\n {/* works with inline values */}\n <NotificationBadge\n type=\"number\"\n size=\"s\"\n disabled={false}\n position=\"right\"\n color=\"green\"\n value=\"5\"\n Component={MockComponent}\n >\n Button Label\n </NotificationBadge>\n </>\n);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACUK,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { NotificationBadge } from '../index.js';\nimport type { DSNotificationBadgeT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSNotificationBadgeT.Props;\ntype ComponentPropsInternals = DSNotificationBadgeT.InternalProps;\ntype ComponentPropsDefaultProps = DSNotificationBadgeT.DefaultProps;\ntype ComponentPropsOptionalProps = DSNotificationBadgeT.OptionalProps;\n\nconst MockComponent = () => <div></div>;\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n color: '#FF0000',\n textColor: '#0000FF',\n value: '99+',\n Component: MockComponent,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n type: 'dot',\n position: 'right',\n};\nconst testProps: ComponentPropsForApp = {\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n type: 'number',\n position: 'left',\n size: 'l',\n disabled: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: '#FF0000',\n textColor: '#0000FF',\n value: '99+',\n Component: MockComponent,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: '#FF0000',\n textColor: '#0000FF',\n value: '99+',\n Component: MockComponent,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n color: '#FF0000',\n textColor: '#0000FF',\n value: '99+',\n Component: MockComponent,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <NotificationBadge {...testExplicitDefinition} />\n <NotificationBadge {...testInferedTypeCompatibility} />\n <NotificationBadge {...testDefinitionAsConst} />\n {/* works with inline values */}\n <NotificationBadge\n type=\"number\"\n size=\"s\"\n disabled={false}\n position=\"right\"\n color=\"green\"\n textColor=\"yellow\"\n value=\"5\"\n Component={MockComponent}\n >\n Button Label\n </NotificationBadge>\n </>\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACUK,SA4E1B,UA5E0B,KA4E1B,YA5E0B;AAT5B,SAAS,yBAAyB;AASlC,MAAM,gBAAgB,MAAM,oBAAC,SAAI;AAEjC,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACb;AAIA,MAAM,sBAA2D;AAAA,EAC/D,MAAM;AAAA,EACN,UAAU;AACZ;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACb;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACb;AAEA,MAAM,wBAAwB;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACb;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,qBAAmB,GAAG,wBAAwB;AAAA,EAC/C,oBAAC,qBAAmB,GAAG,8BAA8B;AAAA,EACrD,oBAAC,qBAAmB,GAAG,uBAAuB;AAAA,EAE9C;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAS;AAAA,MACT,OAAM;AAAA,MACN,WAAU;AAAA,MACV,OAAM;AAAA,MACN,WAAW;AAAA,MACZ;AAAA;AAAA,EAED;AAAA,GACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,6 +17,7 @@ export declare namespace DSNotificationBadgeT {
|
|
|
17
17
|
value?: number | string;
|
|
18
18
|
Component?: (propsT: ComponentT) => JSX.Element;
|
|
19
19
|
color?: string;
|
|
20
|
+
textColor?: string;
|
|
20
21
|
}
|
|
21
22
|
interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps> {
|
|
22
23
|
}
|
|
@@ -32,6 +33,7 @@ export declare const NotificationBadgePropTypes: {
|
|
|
32
33
|
disabled: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
33
34
|
Component: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
34
35
|
color: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
36
|
+
textColor: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
35
37
|
'aria-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
36
38
|
'on-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
37
39
|
'data-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
package/dist/types/style.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-notification-badge",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.38.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Notification Badge",
|
|
6
6
|
"files": [
|
|
@@ -49,13 +49,13 @@
|
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@elliemae/pui-theme": "~2.9.3",
|
|
52
|
-
"@elliemae/ds-props-helpers": "3.
|
|
53
|
-
"@elliemae/ds-system": "3.
|
|
52
|
+
"@elliemae/ds-props-helpers": "3.38.0-rc.1",
|
|
53
|
+
"@elliemae/ds-system": "3.38.0-rc.1"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
57
57
|
"styled-components": "~5.3.9",
|
|
58
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
58
|
+
"@elliemae/ds-monorepo-devops": "3.38.0-rc.1"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
61
|
"react": "^17.0.2",
|