@elliemae/ds-banner 2.3.0-alpha.9 → 2.3.0-next.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/cjs/DSBanner.js +132 -0
  2. package/cjs/defaultProps.js +22 -0
  3. package/cjs/index.d.js +2 -0
  4. package/cjs/index.js +12 -0
  5. package/cjs/propTypes.js +24 -0
  6. package/cjs/styles.js +146 -0
  7. package/cjs/utils/bannerTypes.js +12 -0
  8. package/cjs/utils/icons.js +36 -0
  9. package/cjs/utils/styleHelpers.js +53 -0
  10. package/esm/DSBanner.js +121 -0
  11. package/esm/defaultProps.js +18 -0
  12. package/esm/index.d.js +1 -0
  13. package/esm/index.js +2 -0
  14. package/esm/propTypes.js +20 -0
  15. package/esm/styles.js +131 -0
  16. package/esm/utils/bannerTypes.js +8 -0
  17. package/esm/utils/icons.js +28 -0
  18. package/esm/utils/styleHelpers.js +44 -0
  19. package/package.json +35 -37
  20. package/{dist/types → types}/DSBanner.d.ts +1 -1
  21. package/{dist/types → types}/defaultProps.d.ts +0 -0
  22. package/{dist/types → types}/index.d.ts +0 -0
  23. package/{dist/types → types}/propTypes.d.ts +0 -0
  24. package/{dist/types → types}/styles.d.ts +7 -7
  25. package/{dist/types → types}/tests/DSBanner.events.test.d.ts +0 -0
  26. package/{dist/types → types}/tests/DSBanner.test.d.ts +0 -0
  27. package/{dist/types → types}/utils/bannerTypes.d.ts +0 -0
  28. package/{dist/types → types}/utils/icons.d.ts +0 -0
  29. package/{dist/types → types}/utils/styleHelpers.d.ts +0 -0
  30. package/dist/cjs/DSBanner.js +0 -138
  31. package/dist/cjs/DSBanner.js.map +0 -7
  32. package/dist/cjs/defaultProps.js +0 -45
  33. package/dist/cjs/defaultProps.js.map +0 -7
  34. package/dist/cjs/index.d.js +0 -27
  35. package/dist/cjs/index.d.js.map +0 -7
  36. package/dist/cjs/index.js +0 -37
  37. package/dist/cjs/index.js.map +0 -7
  38. package/dist/cjs/propTypes.js +0 -55
  39. package/dist/cjs/propTypes.js.map +0 -7
  40. package/dist/cjs/styles.js +0 -107
  41. package/dist/cjs/styles.js.map +0 -7
  42. package/dist/cjs/utils/bannerTypes.js +0 -40
  43. package/dist/cjs/utils/bannerTypes.js.map +0 -7
  44. package/dist/cjs/utils/icons.js +0 -58
  45. package/dist/cjs/utils/icons.js.map +0 -7
  46. package/dist/cjs/utils/styleHelpers.js +0 -99
  47. package/dist/cjs/utils/styleHelpers.js.map +0 -7
  48. package/dist/esm/DSBanner.js +0 -117
  49. package/dist/esm/DSBanner.js.map +0 -7
  50. package/dist/esm/defaultProps.js +0 -16
  51. package/dist/esm/defaultProps.js.map +0 -7
  52. package/dist/esm/index.d.js +0 -2
  53. package/dist/esm/index.d.js.map +0 -7
  54. package/dist/esm/index.js +0 -8
  55. package/dist/esm/index.js.map +0 -7
  56. package/dist/esm/propTypes.js +0 -26
  57. package/dist/esm/propTypes.js.map +0 -7
  58. package/dist/esm/styles.js +0 -78
  59. package/dist/esm/styles.js.map +0 -7
  60. package/dist/esm/utils/bannerTypes.js +0 -11
  61. package/dist/esm/utils/bannerTypes.js.map +0 -7
  62. package/dist/esm/utils/icons.js +0 -29
  63. package/dist/esm/utils/icons.js.map +0 -7
  64. package/dist/esm/utils/styleHelpers.js +0 -70
  65. package/dist/esm/utils/styleHelpers.js.map +0 -7
package/dist/esm/index.js DELETED
@@ -1,8 +0,0 @@
1
- import * as React from "react";
2
- import { default as default2 } from "./DSBanner";
3
- export * from "./DSBanner";
4
- export * from "./utils/bannerTypes";
5
- export {
6
- default2 as default
7
- };
8
- //# sourceMappingURL=index.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default } from './DSBanner';\nexport * from './DSBanner';\nexport * from './utils/bannerTypes';\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;",
6
- "names": []
7
- }
@@ -1,26 +0,0 @@
1
- import * as React from "react";
2
- import { PropTypes } from "react-desc";
3
- import { BANNER_TYPES } from "./utils/bannerTypes";
4
- const propTypes = {
5
- containerProps: PropTypes.object.description("Set of Properties attached to the main container").defaultValue({}),
6
- label: PropTypes.string.description("banner s label").defaultValue(""),
7
- body: PropTypes.string.description("banner s body content").defaultValue(""),
8
- type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description("banner s type").defaultValue(BANNER_TYPES.INFO),
9
- onClose: PropTypes.func.description("function executed when the banner closes"),
10
- isOpen: PropTypes.bool.description("whether the banner is open or closed").defaultValue(true),
11
- showCloseButton: PropTypes.bool.description("whether to show close button or not").defaultValue(true),
12
- actionLink: PropTypes.shape({
13
- label: PropTypes.string,
14
- onClick: PropTypes.func,
15
- href: PropTypes.string
16
- }).description("Properties of the ActionLink component").defaultValue({}),
17
- actionRef: PropTypes.object.description(`
18
- Reference to use actions:
19
- - focusOnLink: function to focus the banner
20
- - focusOnWrapper: function to focus the link
21
- `).defaultValue({})
22
- };
23
- export {
24
- propTypes
25
- };
26
- //# sourceMappingURL=propTypes.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\nimport { BANNER_TYPES } from './utils/bannerTypes';\n\nexport const propTypes = {\n containerProps: PropTypes.object.description('Set of Properties attached to the main container').defaultValue({}),\n label: PropTypes.string.description('banner s label').defaultValue(''),\n body: PropTypes.string.description('banner s body content').defaultValue(''),\n type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('banner s type').defaultValue(BANNER_TYPES.INFO),\n onClose: PropTypes.func.description('function executed when the banner closes'),\n isOpen: PropTypes.bool.description('whether the banner is open or closed').defaultValue(true),\n showCloseButton: PropTypes.bool.description('whether to show close button or not').defaultValue(true),\n actionLink: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func,\n href: PropTypes.string,\n })\n .description('Properties of the ActionLink component')\n .defaultValue({}),\n actionRef: PropTypes.object\n .description(\n `\n Reference to use actions:\n - focusOnLink: function to focus the banner\n - focusOnWrapper: function to focus the link\n `,\n )\n .defaultValue({}),\n};\n"],
5
- "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,YAAY;AAAA,EACvB,gBAAgB,UAAU,OAAO,YAAY,oDAAoD,aAAa;AAAA,EAC9G,OAAO,UAAU,OAAO,YAAY,kBAAkB,aAAa;AAAA,EACnE,MAAM,UAAU,OAAO,YAAY,yBAAyB,aAAa;AAAA,EACzE,MAAM,UAAU,MAAM,OAAO,OAAO,eAAe,YAAY,iBAAiB,aAAa,aAAa;AAAA,EAC1G,SAAS,UAAU,KAAK,YAAY;AAAA,EACpC,QAAQ,UAAU,KAAK,YAAY,wCAAwC,aAAa;AAAA,EACxF,iBAAiB,UAAU,KAAK,YAAY,uCAAuC,aAAa;AAAA,EAChG,YAAY,UAAU,MAAM;AAAA,IAC1B,OAAO,UAAU;AAAA,IACjB,SAAS,UAAU;AAAA,IACnB,MAAM,UAAU;AAAA,KAEf,YAAY,0CACZ,aAAa;AAAA,EAChB,WAAW,UAAU,OAClB,YACC;AAAA;AAAA;AAAA;AAAA,OAMD,aAAa;AAAA;",
6
- "names": []
7
- }
@@ -1,78 +0,0 @@
1
- import * as React from "react";
2
- import { styled } from "@elliemae/ds-system";
3
- import DSButton from "@elliemae/ds-button";
4
- import { handleAnimation, handleBorderColor } from "./utils/styleHelpers";
5
- const StyledBannerContainer = styled("div", { name: "DS-Banner", slot: "root" })`
6
- overflow: hidden;
7
- height: ${({ isOpen }) => isOpen ? "auto" : "0px"};
8
- ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};
9
- `;
10
- const StyledInnerContainer = styled("div", {
11
- name: "DS-Banner",
12
- slot: "innerContainer"
13
- })`
14
- padding-right: 6px;
15
- display: grid;
16
- align-items: center;
17
- min-height: 41px;
18
- width: 100%;
19
- background-color: ${({ theme }) => theme.colors.neutral["000"]};
20
- border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};
21
- ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};
22
- &:focus {
23
- position: relative;
24
- &:after {
25
- content: '';
26
- display: block;
27
- position: absolute;
28
- top: 0;
29
- left: 0;
30
- pointer-events: none;
31
- border-radius: 2px;
32
- width: calc(100%);
33
- border: 2px solid #1e79c2;
34
- height: calc(100% + 4px);
35
- }
36
- }
37
- grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;
38
- `;
39
- const StyledIconContainer = styled("div", { name: "DS-Banner", slot: "iconContainer" })`
40
- margin-right: ${({ theme }) => theme.space.xxs};
41
- margin-left: ${({ theme }) => theme.space.xs};
42
- `;
43
- const StyledTitle = styled("div", { name: "DS-Banner", slot: "title" })`
44
- color: ${({ theme }) => theme.colors.neutral[700]};
45
- font-size: ${({ theme }) => theme.fontSizes.label[400]};
46
- font-weight: ${({ theme }) => theme.fontWeights.semibold};
47
- `;
48
- const StyledSubTitle = styled("div", { name: "DS-Banner", slot: "subtitle" })`
49
- width: 100%;
50
- margin-left: ${({ theme }) => theme.space.xs};
51
- font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
52
- font-weight: ${({ theme }) => theme.fontWeights.regular};
53
- `;
54
- const StyledActionLink = styled("a", { name: "DS-Banner", slot: "action" })`
55
- margin-left: ${({ theme, isBodyEmpty }) => isBodyEmpty ? theme.space.xs : 0};
56
- white-space: nowrap;
57
- text-decoration: none;
58
- line-height: 1.1;
59
- font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};
60
- font-weight: ${({ theme }) => theme.fontWeights.regular};
61
- color: ${({ theme }) => theme.colors.brand[600]};
62
- `;
63
- const StyledCloseButton = styled(DSButton, { name: "DS-Banner", slot: "closeButton" })`
64
- margin-left: ${({ theme }) => theme.space.xxs};
65
- &:not(focus) {
66
- border: transparent;
67
- }
68
- `;
69
- export {
70
- StyledActionLink,
71
- StyledBannerContainer,
72
- StyledCloseButton,
73
- StyledIconContainer,
74
- StyledInnerContainer,
75
- StyledSubTitle,
76
- StyledTitle
77
- };
78
- //# sourceMappingURL=styles.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport DSButton from '@elliemae/ds-button';\nimport type { StyledActionLinkT, StyledBannerContainerT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledBannerContainer = styled<StyledBannerContainerT>('div', { name: 'DS-Banner', slot: 'root' })`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n\nexport const StyledInnerContainer = styled<StyledInnerContainerT>('div', {\n name: 'DS-Banner',\n slot: 'innerContainer',\n})`\n padding-right: 6px;\n display: grid;\n align-items: center;\n min-height: 41px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n &:focus {\n position: relative;\n &:after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n border-radius: 2px;\n width: calc(100%);\n border: 2px solid #1e79c2;\n height: calc(100% + 4px);\n }\n }\n grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;\n`;\n\nexport const StyledIconContainer = styled('div', { name: 'DS-Banner', slot: 'iconContainer' })`\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled('div', { name: 'DS-Banner', slot: 'title' })`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledSubTitle = styled('div', { name: 'DS-Banner', slot: 'subtitle' })`\n width: 100%;\n margin-left: ${({ theme }) => theme.space.xs};\n font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledActionLink = styled<StyledActionLinkT>('a', { name: 'DS-Banner', slot: 'action' })`\n margin-left: ${({ theme, isBodyEmpty }) => (isBodyEmpty ? theme.space.xs : 0)};\n white-space: nowrap;\n text-decoration: none;\n line-height: 1.1;\n font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledCloseButton = styled(DSButton, { name: 'DS-Banner', slot: 'closeButton' })`\n margin-left: ${({ theme }) => theme.space.xxs};\n &:not(focus) {\n border: transparent;\n }\n`;\n"],
5
- "mappings": "AAAA;ACAA;AACA;AAEA;AAEO,MAAM,wBAAwB,OAA+B,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA;AAAA,YAE1F,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,gBAAgB,aAAa,QAAQ;AAAA;AAGvE,MAAM,uBAAuB,OAA8B,OAAO;AAAA,EACvE,MAAM;AAAA,EACN,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOc,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,kBAAkB,MAAM;AAAA,IACtE,CAAC,EAAE,aAAa,aAAa,gBAAgB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBvD,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA,kBAC1D,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGrC,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA,WACzD,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA;AAAA,iBAEtD,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,YAAY,MAAM,UAAU,SAAS;AAAA,iBACtC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,mBAAmB,OAA0B,KAAK,EAAE,MAAM,aAAa,MAAM;AAAA,iBACzE,CAAC,EAAE,OAAO,kBAAmB,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA,iBACvC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,oBAAoB,OAAO,UAAU,EAAE,MAAM,aAAa,MAAM;AAAA,iBAC5D,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,11 +0,0 @@
1
- import * as React from "react";
2
- const BANNER_TYPES = {
3
- INFO: "info",
4
- SUCCESS: "success",
5
- WARNING: "warning",
6
- DANGER: "danger"
7
- };
8
- export {
9
- BANNER_TYPES
10
- };
11
- //# sourceMappingURL=bannerTypes.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/bannerTypes.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const BANNER_TYPES = {\n INFO: 'info',\n SUCCESS: 'success',\n WARNING: 'warning',\n DANGER: 'danger',\n} as const;\n"],
5
- "mappings": "AAAA;ACAO,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA;",
6
- "names": []
7
- }
@@ -1,29 +0,0 @@
1
- import * as React from "react";
2
- import React2 from "react";
3
- import { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from "@elliemae/ds-icons";
4
- const icons = {
5
- success: /* @__PURE__ */ React2.createElement(SuccessFill, {
6
- fill: "#207e56",
7
- width: "20px",
8
- height: "20px"
9
- }),
10
- info: /* @__PURE__ */ React2.createElement(InfoFill, {
11
- fill: "#1e79c2",
12
- width: "20px",
13
- height: "20px"
14
- }),
15
- danger: /* @__PURE__ */ React2.createElement(AlertsDetailFill, {
16
- fill: "#c64252",
17
- width: "20px",
18
- height: "20px"
19
- }),
20
- warning: /* @__PURE__ */ React2.createElement(WarningSquare, {
21
- fill: "#d17a00",
22
- width: "20px",
23
- height: "20px"
24
- })
25
- };
26
- export {
27
- icons
28
- };
29
- //# sourceMappingURL=icons.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/icons.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from '@elliemae/ds-icons';\n\nexport const icons = {\n success: <SuccessFill fill=\"#207e56\" width=\"20px\" height=\"20px\" />,\n info: <InfoFill fill=\"#1e79c2\" width=\"20px\" height=\"20px\" />,\n danger: <AlertsDetailFill fill=\"#c64252\" width=\"20px\" height=\"20px\" />,\n warning: <WarningSquare fill=\"#d17a00\" width=\"20px\" height=\"20px\" />,\n};\n"],
5
- "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,QAAQ;AAAA,EACnB,SAAS,qCAAC,aAAD;AAAA,IAAa,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA;AAAA,EACzD,MAAM,qCAAC,UAAD;AAAA,IAAU,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA;AAAA,EACnD,QAAQ,qCAAC,kBAAD;AAAA,IAAkB,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA;AAAA,EAC7D,SAAS,qCAAC,eAAD;AAAA,IAAe,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,70 +0,0 @@
1
- import * as React from "react";
2
- import { kfrm, css } from "@elliemae/ds-system";
3
- import { BANNER_TYPES } from "./bannerTypes";
4
- const slideIn = kfrm`
5
- 0% {
6
- transform: translate3d(0, -100%, 0);
7
- }
8
- 100% {
9
- transform: translate3d(0, 0, 0);
10
- }
11
- `;
12
- const slideOut = kfrm`
13
- 0% {
14
- transform: translate3d(0, 0, 0);
15
- opacity: 1;
16
- }
17
- 60% {
18
- opacity: 0;
19
- }
20
- 100% {
21
- opacity: 0;
22
- transform: translate3d(0, -100%, 0);
23
- }
24
- `;
25
- const spanContainer = (height) => kfrm`
26
- 0% {
27
- height: 0px;
28
- }
29
- 100% {
30
- height: ${height}px;
31
- }
32
- `;
33
- const shrinkContainer = (height) => kfrm`
34
- 0% {
35
- height: ${height}px;
36
- }
37
- 100% {
38
- height: 0px;
39
- }
40
- `;
41
- const handleBorderColor = (type, { colors }) => {
42
- switch (type) {
43
- case BANNER_TYPES.SUCCESS:
44
- return colors.success[900];
45
- case BANNER_TYPES.INFO:
46
- return colors.brand[600];
47
- case BANNER_TYPES.WARNING:
48
- return colors.warning[900];
49
- case BANNER_TYPES.DANGER:
50
- return colors.danger[900];
51
- }
52
- };
53
- const handleAnimation = (isAnimating, isOpen, height = null) => {
54
- if (isAnimating) {
55
- if (isOpen) {
56
- return css`
57
- animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
58
- `;
59
- } else {
60
- return css`
61
- animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
62
- `;
63
- }
64
- }
65
- };
66
- export {
67
- handleAnimation,
68
- handleBorderColor
69
- };
70
- //# sourceMappingURL=styleHelpers.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport { BANNER_TYPES } from './bannerTypes';\n\nconst slideIn = kfrm`\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n 100% {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst slideOut = kfrm`\n 0% {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n 60% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n transform: translate3d(0, -100%, 0);\n }\n`;\n\nconst spanContainer = (height: number) => kfrm`\n 0% {\n height: 0px;\n }\n 100% {\n height: ${height}px;\n }\n`;\n\nconst shrinkContainer = (height: number) => kfrm`\n 0% {\n height: ${height}px;\n }\n 100% {\n height: 0px;\n }\n`;\n\nexport const handleBorderColor = (type, { colors }): string => {\n switch (type) {\n case BANNER_TYPES.SUCCESS:\n return colors.success[900];\n case BANNER_TYPES.INFO:\n return colors.brand[600];\n case BANNER_TYPES.WARNING:\n return colors.warning[900];\n case BANNER_TYPES.DANGER:\n return colors.danger[900];\n }\n};\n\nexport const handleAnimation = (\n isAnimating: boolean,\n isOpen: boolean,\n height: number | null = null,\n): FlattenSimpleInterpolation => {\n if (isAnimating) {\n if (isOpen) {\n return css`\n animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;\n `;\n } else {\n return css`\n animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;\n `;\n }\n }\n};\n"],
5
- "mappings": "AAAA;ACAA;AAEA;AAEA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B;AAAA;AAAA;AAId,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAE9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAAC,MAAM,EAAE,aAAqB;AAC7D,UAAQ;AAAA,SACD,aAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,aAAa;AAChB,aAAO,OAAO,MAAM;AAAA,SACjB,aAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,aAAa;AAChB,aAAO,OAAO,OAAO;AAAA;AAAA;AAIpB,MAAM,kBAAkB,CAC7B,aACA,QACA,SAAwB,SACO;AAC/B,MAAI,aAAa;AACf,QAAI,QAAQ;AACV,aAAO;AAAA,qBACQ,SAAS,cAAc,UAAU;AAAA;AAAA,WAE3C;AACL,aAAO;AAAA,qBACQ,SAAS,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }