@elliemae/ds-notification-badge 3.16.0-next.2 → 3.16.0-next.21

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.
Files changed (23) hide show
  1. package/dist/cjs/NotificationBadge.js +30 -30
  2. package/dist/cjs/NotificationBadge.js.map +3 -3
  3. package/dist/cjs/index.js +6 -2
  4. package/dist/cjs/index.js.map +2 -2
  5. package/dist/cjs/package.json +7 -0
  6. package/dist/cjs/react-desc-prop-types.js +13 -9
  7. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  8. package/dist/cjs/style.js +30 -17
  9. package/dist/cjs/style.js.map +2 -2
  10. package/dist/esm/NotificationBadge.js +22 -26
  11. package/dist/esm/NotificationBadge.js.map +3 -3
  12. package/dist/esm/index.js +2 -2
  13. package/dist/esm/index.js.map +1 -1
  14. package/dist/esm/package.json +7 -0
  15. package/dist/esm/react-desc-prop-types.js +1 -1
  16. package/dist/esm/react-desc-prop-types.js.map +1 -1
  17. package/dist/esm/style.js +26 -17
  18. package/dist/esm/style.js.map +2 -2
  19. package/dist/types/NotificationBadge.d.ts +2 -2
  20. package/dist/types/index.d.ts +2 -2
  21. package/dist/types/react-desc-prop-types.d.ts +366 -366
  22. package/dist/types/style.d.ts +11 -14
  23. package/package.json +6 -5
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 { 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 charCount: number;\n size?: string;\n value?: number | string;\n disabled?: boolean;\n color?: string;\n}>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ charCount }) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }) => (charCount > 1 ? '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, charCount }) => {\n if (size === 'l' && charCount > 1) return '30px';\n if (size === 'l' && charCount <= 1) return '21px';\n if (size === 's' && charCount > 1) 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,YAAY,WAAW;ACAvB,SAAS,cAAc;AAShB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,OAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,IAAI,MAAO,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,KAAK,MAAO,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,MAAM,MAAO,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,eAAe,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAelC,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,UAAU;AAAA,sBACrC,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,OAAO;AAAA,mBACvD,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,SAAS;AAAA,eACjD,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,UAAU,MAAM;AACpC,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO;AAC3C,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,SAAO;AACT;AAAA;AAGK,MAAM,WAAW,OAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,MAAM;AAAA,WAC9D,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA;AAAA;",
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}\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`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n top: ${({ top }: NumericBadgeT) => `${top}px`};\n left: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n right: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\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;AAevB,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,GAAG;AACL;AAEA,MAAM,WAAW,CAAC,MAA0B,cAAsB;AAChE,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO,kBAAkB;AAC7D,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,SAAO,kBAAkB;AAC3B;AAEO,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAM1B,CAAC,EAAE,IAAI,MAAqB,GAAG;AAAA,UAC9B,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,YAAY;AAAA,WACrD,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,WAAW;AAAA;AAGvD,MAAM,eAAe,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOlC,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,UAAU;AAAA,sBACpD,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,mBAC5D,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,SAAS;AAAA,eAChE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,iBACpD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,QAAQ;AAAA,YAC1D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,eACnD,CAAC,EAAE,MAAM,UAAU,MAAqB,GAAG,SAAS,MAAM,SAAS;AAAA;AAG3E,MAAM,WAAW,OAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA,WACjE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,YACrD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/types/NotificationBadge.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { DSNotificationBadgeT } from './react-desc-prop-types';
2
+ import type { DSNotificationBadgeT } from './react-desc-prop-types.js';
3
3
  declare const NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props>;
4
- declare const NotificationBadgeWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSNotificationBadgeT.Props>;
4
+ declare const NotificationBadgeWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSNotificationBadgeT.Props>;
5
5
  export { NotificationBadge, NotificationBadgeWithSchema };
package/dist/types/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export * from './NotificationBadge';
2
- export { NotificationBadge as default } from './NotificationBadge';
1
+ export * from './NotificationBadge.js';
2
+ export { NotificationBadge as default } from './NotificationBadge.js';