@elliemae/ds-notification-badge 3.1.0-next.1 → 3.1.0-next.4

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/style.js CHANGED
@@ -27,21 +27,21 @@ __export(style_exports, {
27
27
  });
28
28
  module.exports = __toCommonJS(style_exports);
29
29
  var React = __toESM(require("react"));
30
- var import_styled_components = __toESM(require("styled-components"));
31
- const Wrapper = import_styled_components.default.div`
30
+ var import_ds_system = require("@elliemae/ds-system");
31
+ const Wrapper = import_ds_system.styled.div`
32
32
  display: flex;
33
33
  flex-direction: column;
34
34
  justify-content: center;
35
35
  align-items: center;
36
36
  width: fit-content;
37
37
  `;
38
- const GenericBadge = import_styled_components.default.span`
38
+ const GenericBadge = import_ds_system.styled.span`
39
39
  position: relative;
40
40
  top: ${({ top }) => top ? `${top}px` : "unset"};
41
41
  left: ${({ left }) => left ? `${left}px` : "unset"};
42
42
  right: ${({ right }) => right ? `${right}px` : "unset"};
43
43
  `;
44
- const NumericBadge = (0, import_styled_components.default)(GenericBadge)`
44
+ const NumericBadge = (0, import_ds_system.styled)(GenericBadge)`
45
45
  display: flex;
46
46
  justify-content: center;
47
47
  align-items: center;
@@ -64,7 +64,7 @@ const NumericBadge = (0, import_styled_components.default)(GenericBadge)`
64
64
  return "15px";
65
65
  }};
66
66
  `;
67
- const DotBadge = (0, import_styled_components.default)(GenericBadge)`
67
+ const DotBadge = (0, import_ds_system.styled)(GenericBadge)`
68
68
  background-color: ${({ disabled, theme, color }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.brand[500]};
69
69
  width: ${({ size }) => size === "l" ? "15px" : "10px"};
70
70
  height: ${({ size }) => size === "l" ? "15px" : "10px"};
@@ -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 '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 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 padding-top: 2px;\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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;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,aAelC,CAAC,EAAE,gBAAiB,YAAY,IAAI,UAAU;AAAA;AAAA,sBAErC,CAAC,EAAE,UAAU,OAAO,YACtC,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,OAAO;AAAA,mBACvD,CAAC,EAAE,gBAAiB,YAAY,IAAI,SAAS;AAAA,eACjD,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,gBAAgB;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,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;",
4
+ "sourcesContent": ["import { styled } from '@elliemae/ds-system';\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 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 padding-top: 2px;\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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAShB,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,wBAAO;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,6BAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAelC,CAAC,EAAE,gBAAiB,YAAY,IAAI,UAAU;AAAA;AAAA,sBAErC,CAAC,EAAE,UAAU,OAAO,YACtC,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,OAAO;AAAA,mBACvD,CAAC,EAAE,gBAAiB,YAAY,IAAI,SAAS;AAAA,eACjD,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,gBAAgB;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,6BAAO,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/dist/esm/style.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import styled from "styled-components";
2
+ import { styled } from "@elliemae/ds-system";
3
3
  const Wrapper = styled.div`
4
4
  display: flex;
5
5
  flex-direction: column;
@@ -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 '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 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 padding-top: 2px;\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"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\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 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 padding-top: 2px;\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
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,aAelC,CAAC,EAAE,gBAAiB,YAAY,IAAI,UAAU;AAAA;AAAA,sBAErC,CAAC,EAAE,UAAU,OAAO,YACtC,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,OAAO;AAAA,mBACvD,CAAC,EAAE,gBAAiB,YAAY,IAAI,SAAS;AAAA,eACjD,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,gBAAgB;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,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.1.0-next.1",
3
+ "version": "3.1.0-next.4",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Notification Badge",
6
6
  "files": [
@@ -46,19 +46,12 @@
46
46
  "reportFile": "tests.xml",
47
47
  "indent": 4
48
48
  },
49
- "scripts": {
50
- "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
51
- "test": "node ../../scripts/testing/test.mjs",
52
- "lint": "node ../../scripts/lint.mjs",
53
- "dts": "node ../../scripts/dts.mjs",
54
- "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
55
- },
56
49
  "dependencies": {
57
- "@elliemae/ds-system": "3.1.0-next.1",
58
- "@elliemae/ds-utilities": "3.1.0-next.1",
59
- "react-desc": "~4.1.3"
50
+ "@elliemae/ds-system": "3.1.0-next.4",
51
+ "@elliemae/ds-utilities": "3.1.0-next.4"
60
52
  },
61
53
  "devDependencies": {
54
+ "@testing-library/react": "~12.1.2",
62
55
  "styled-components": "~5.3.3"
63
56
  },
64
57
  "peerDependencies": {
@@ -69,5 +62,13 @@
69
62
  "publishConfig": {
70
63
  "access": "public",
71
64
  "typeSafety": false
65
+ },
66
+ "scripts": {
67
+ "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
68
+ "test": "node ../../scripts/testing/test.mjs",
69
+ "lint": "node ../../scripts/lint.mjs",
70
+ "dts": "node ../../scripts/dts.mjs",
71
+ "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
72
+ "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
72
73
  }
73
- }
74
+ }