@elliemae/ds-banner 1.53.3 → 1.53.4-next.0
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/cjs/DSBanner.js +1 -0
- package/cjs/DSBanner.js.map +1 -1
- package/cjs/index.js +1 -0
- package/cjs/index.js.map +1 -1
- package/cjs/utils/icons.js +3 -1
- package/cjs/utils/icons.js.map +1 -1
- package/esm/DSBanner.js +1 -0
- package/esm/DSBanner.js.map +1 -1
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/utils/icons.js +2 -1
- package/esm/utils/icons.js.map +1 -1
- package/package.json +3 -3
package/cjs/DSBanner.js
CHANGED
|
@@ -14,6 +14,7 @@ var styles = require('./styles.js');
|
|
|
14
14
|
require('@elliemae/ds-icons/SuccessFill');
|
|
15
15
|
require('@elliemae/ds-icons/InfoFill');
|
|
16
16
|
require('@elliemae/ds-icons/AlertsDetailFill');
|
|
17
|
+
require('@elliemae/ds-icons/WarningSquare');
|
|
17
18
|
require('./utils/bannerTypes.js');
|
|
18
19
|
require('styled-components');
|
|
19
20
|
require('@elliemae/ds-basic/Button');
|
package/cjs/DSBanner.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DSBanner.js","sources":["../../src/DSBanner.tsx"],"sourcesContent":["import React, { useLayoutEffect, useEffect, useRef, useCallback, useState } from 'react';\nimport CloseX from '@elliemae/ds-icons/CloseX';\nimport { describe } from 'react-desc';\nimport type { BannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles';\n\nconst DSBanner = ({\n type,\n isOpen,\n onClose,\n label,\n body,\n actionLink,\n showCloseButton,\n containerProps,\n}: BannerPropsT): JSX.Element => {\n const innerContainerRef = useRef<HTMLDivElement | null>(null);\n const linkRef = useRef<HTMLAnchorElement | null>(null);\n const [current, setCurrent] = useState<boolean>(isOpen);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState<number>(0);\n\n useEffect(() => {\n if (innerContainerRef.current) {\n setHeight(innerContainerRef.current.offsetHeight);\n }\n }, [isAnimating, isOpen]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n if (linkRef.current) linkRef.current.click();\n }\n }, []);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n type={type}\n isOpen={isOpen}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n height={height}\n data-testid=\"ds-banner-container\"\n {...containerProps}\n >\n <StyledInnerContainer\n type={type}\n isOpen={isOpen}\n ref={innerContainerRef}\n isAnimating={isAnimating}\n data-testid=\"ds-banner\"\n role=\"alert\"\n >\n <StyledIconContainer data-testid=\"ds-banner-icon\">{icons[type]}</StyledIconContainer>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n <span>{body}</span>\n {actionLink && (\n <StyledActionLink\n data-testid=\"ds-banner-action-link\"\n onClick={actionLink.onClick}\n href={actionLink.href}\n ref={linkRef}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\n isBodyEmpty={body}\n >\n {actionLink.label}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n\n {showCloseButton && (\n <StyledCloseButton\n data-testid=\"ds-banner-close-button\"\n buttonType=\"secondary\"\n onClick={onClose}\n aria-label=\"Close icon\"\n icon={<CloseX width=\"12px\" height=\"12px\" />}\n />\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSBanner.defaultProps = defaultProps;\nDSBanner.propTypes = propTypes;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBannerWithSchema };\n"],"names":["DSBanner","type","isOpen","onClose","label","body","actionLink","showCloseButton","containerProps","innerContainerRef","useRef","linkRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","setHeight","useEffect","offsetHeight","useLayoutEffect","handleOnKeyDown","useCallback","e","key","preventDefault","click","React","StyledBannerContainer","StyledInnerContainer","StyledIconContainer","icons","StyledTitle","StyledSubTitle","StyledActionLink","onClick","href","StyledCloseButton","CloseX","defaultProps","propTypes","DSBannerWithSchema","describe"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DSBanner.js","sources":["../../src/DSBanner.tsx"],"sourcesContent":["import React, { useLayoutEffect, useEffect, useRef, useCallback, useState } from 'react';\nimport CloseX from '@elliemae/ds-icons/CloseX';\nimport { describe } from 'react-desc';\nimport type { BannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles';\n\nconst DSBanner = ({\n type,\n isOpen,\n onClose,\n label,\n body,\n actionLink,\n showCloseButton,\n containerProps,\n}: BannerPropsT): JSX.Element => {\n const innerContainerRef = useRef<HTMLDivElement | null>(null);\n const linkRef = useRef<HTMLAnchorElement | null>(null);\n const [current, setCurrent] = useState<boolean>(isOpen);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState<number>(0);\n\n useEffect(() => {\n if (innerContainerRef.current) {\n setHeight(innerContainerRef.current.offsetHeight);\n }\n }, [isAnimating, isOpen]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n if (linkRef.current) linkRef.current.click();\n }\n }, []);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n type={type}\n isOpen={isOpen}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n height={height}\n data-testid=\"ds-banner-container\"\n {...containerProps}\n >\n <StyledInnerContainer\n type={type}\n isOpen={isOpen}\n ref={innerContainerRef}\n isAnimating={isAnimating}\n data-testid=\"ds-banner\"\n role=\"alert\"\n >\n <StyledIconContainer data-testid=\"ds-banner-icon\">{icons[type]}</StyledIconContainer>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n <span>{body}</span>\n {actionLink && (\n <StyledActionLink\n data-testid=\"ds-banner-action-link\"\n onClick={actionLink.onClick}\n href={actionLink.href}\n ref={linkRef}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\n isBodyEmpty={body}\n >\n {actionLink.label}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n\n {showCloseButton && (\n <StyledCloseButton\n data-testid=\"ds-banner-close-button\"\n buttonType=\"secondary\"\n onClick={onClose}\n aria-label=\"Close icon\"\n icon={<CloseX width=\"12px\" height=\"12px\" />}\n />\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSBanner.defaultProps = defaultProps;\nDSBanner.propTypes = propTypes;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBannerWithSchema };\n"],"names":["DSBanner","type","isOpen","onClose","label","body","actionLink","showCloseButton","containerProps","innerContainerRef","useRef","linkRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","setHeight","useEffect","offsetHeight","useLayoutEffect","handleOnKeyDown","useCallback","e","key","preventDefault","click","React","StyledBannerContainer","StyledInnerContainer","StyledIconContainer","icons","StyledTitle","StyledSubTitle","StyledActionLink","onClick","href","StyledCloseButton","CloseX","defaultProps","propTypes","DSBannerWithSchema","describe"],"mappings":"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"}
|
package/cjs/index.js
CHANGED
|
@@ -13,6 +13,7 @@ require('./utils/icons.js');
|
|
|
13
13
|
require('@elliemae/ds-icons/SuccessFill');
|
|
14
14
|
require('@elliemae/ds-icons/InfoFill');
|
|
15
15
|
require('@elliemae/ds-icons/AlertsDetailFill');
|
|
16
|
+
require('@elliemae/ds-icons/WarningSquare');
|
|
16
17
|
require('./propTypes.js');
|
|
17
18
|
require('./defaultProps.js');
|
|
18
19
|
require('./styles.js');
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/cjs/utils/icons.js
CHANGED
|
@@ -6,6 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var SuccessFill = require('@elliemae/ds-icons/SuccessFill');
|
|
7
7
|
var InfoFill = require('@elliemae/ds-icons/InfoFill');
|
|
8
8
|
var AlertsDetailFill = require('@elliemae/ds-icons/AlertsDetailFill');
|
|
9
|
+
var WarningSquare = require('@elliemae/ds-icons/WarningSquare');
|
|
9
10
|
|
|
10
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
12
|
|
|
@@ -13,6 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
13
14
|
var SuccessFill__default = /*#__PURE__*/_interopDefaultLegacy(SuccessFill);
|
|
14
15
|
var InfoFill__default = /*#__PURE__*/_interopDefaultLegacy(InfoFill);
|
|
15
16
|
var AlertsDetailFill__default = /*#__PURE__*/_interopDefaultLegacy(AlertsDetailFill);
|
|
17
|
+
var WarningSquare__default = /*#__PURE__*/_interopDefaultLegacy(WarningSquare);
|
|
16
18
|
|
|
17
19
|
var icons = {
|
|
18
20
|
success: /*#__PURE__*/React__default['default'].createElement(SuccessFill__default['default'], {
|
|
@@ -30,7 +32,7 @@ var icons = {
|
|
|
30
32
|
width: "20px",
|
|
31
33
|
height: "20px"
|
|
32
34
|
}),
|
|
33
|
-
warning: /*#__PURE__*/React__default['default'].createElement(
|
|
35
|
+
warning: /*#__PURE__*/React__default['default'].createElement(WarningSquare__default['default'], {
|
|
34
36
|
fill: "#d17a00",
|
|
35
37
|
width: "20px",
|
|
36
38
|
height: "20px"
|
package/cjs/utils/icons.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons.js","sources":["../../../src/utils/icons.tsx"],"sourcesContent":["import React from 'react';\nimport SuccessFill from '@elliemae/ds-icons/SuccessFill';\nimport InfoFill from '@elliemae/ds-icons/InfoFill';\nimport AlertsDetailFill from '@elliemae/ds-icons/AlertsDetailFill';\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: <
|
|
1
|
+
{"version":3,"file":"icons.js","sources":["../../../src/utils/icons.tsx"],"sourcesContent":["import React from 'react';\nimport SuccessFill from '@elliemae/ds-icons/SuccessFill';\nimport InfoFill from '@elliemae/ds-icons/InfoFill';\nimport AlertsDetailFill from '@elliemae/ds-icons/AlertsDetailFill';\nimport WarningSquare from '@elliemae/ds-icons/WarningSquare';\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"],"names":["icons","success","React","SuccessFill","info","InfoFill","danger","AlertsDetailFill","warning","WarningSquare"],"mappings":";;;;;;;;;;;;;;;;;;IAMaA,KAAK,GAAG;AACnBC,EAAAA,OAAO,eAAEC,wCAACC,+BAAD;AAAa,IAAA,IAAI,EAAC,SAAlB;AAA4B,IAAA,KAAK,EAAC,MAAlC;AAAyC,IAAA,MAAM,EAAC;AAAhD,IADU;AAEnBC,EAAAA,IAAI,eAAEF,wCAACG,4BAAD;AAAU,IAAA,IAAI,EAAC,SAAf;AAAyB,IAAA,KAAK,EAAC,MAA/B;AAAsC,IAAA,MAAM,EAAC;AAA7C,IAFa;AAGnBC,EAAAA,MAAM,eAAEJ,wCAACK,oCAAD;AAAkB,IAAA,IAAI,EAAC,SAAvB;AAAiC,IAAA,KAAK,EAAC,MAAvC;AAA8C,IAAA,MAAM,EAAC;AAArD,IAHW;AAInBC,EAAAA,OAAO,eAAEN,wCAACO,iCAAD;AAAe,IAAA,IAAI,EAAC,SAApB;AAA8B,IAAA,KAAK,EAAC,MAApC;AAA2C,IAAA,MAAM,EAAC;AAAlD;AAJU;;;;"}
|
package/esm/DSBanner.js
CHANGED
|
@@ -10,6 +10,7 @@ import { StyledBannerContainer, StyledInnerContainer, StyledIconContainer, Style
|
|
|
10
10
|
import '@elliemae/ds-icons/SuccessFill';
|
|
11
11
|
import '@elliemae/ds-icons/InfoFill';
|
|
12
12
|
import '@elliemae/ds-icons/AlertsDetailFill';
|
|
13
|
+
import '@elliemae/ds-icons/WarningSquare';
|
|
13
14
|
import './utils/bannerTypes.js';
|
|
14
15
|
import 'styled-components';
|
|
15
16
|
import '@elliemae/ds-basic/Button';
|
package/esm/DSBanner.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DSBanner.js","sources":["../../src/DSBanner.tsx"],"sourcesContent":["import React, { useLayoutEffect, useEffect, useRef, useCallback, useState } from 'react';\nimport CloseX from '@elliemae/ds-icons/CloseX';\nimport { describe } from 'react-desc';\nimport type { BannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles';\n\nconst DSBanner = ({\n type,\n isOpen,\n onClose,\n label,\n body,\n actionLink,\n showCloseButton,\n containerProps,\n}: BannerPropsT): JSX.Element => {\n const innerContainerRef = useRef<HTMLDivElement | null>(null);\n const linkRef = useRef<HTMLAnchorElement | null>(null);\n const [current, setCurrent] = useState<boolean>(isOpen);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState<number>(0);\n\n useEffect(() => {\n if (innerContainerRef.current) {\n setHeight(innerContainerRef.current.offsetHeight);\n }\n }, [isAnimating, isOpen]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n if (linkRef.current) linkRef.current.click();\n }\n }, []);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n type={type}\n isOpen={isOpen}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n height={height}\n data-testid=\"ds-banner-container\"\n {...containerProps}\n >\n <StyledInnerContainer\n type={type}\n isOpen={isOpen}\n ref={innerContainerRef}\n isAnimating={isAnimating}\n data-testid=\"ds-banner\"\n role=\"alert\"\n >\n <StyledIconContainer data-testid=\"ds-banner-icon\">{icons[type]}</StyledIconContainer>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n <span>{body}</span>\n {actionLink && (\n <StyledActionLink\n data-testid=\"ds-banner-action-link\"\n onClick={actionLink.onClick}\n href={actionLink.href}\n ref={linkRef}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\n isBodyEmpty={body}\n >\n {actionLink.label}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n\n {showCloseButton && (\n <StyledCloseButton\n data-testid=\"ds-banner-close-button\"\n buttonType=\"secondary\"\n onClick={onClose}\n aria-label=\"Close icon\"\n icon={<CloseX width=\"12px\" height=\"12px\" />}\n />\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSBanner.defaultProps = defaultProps;\nDSBanner.propTypes = propTypes;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBannerWithSchema };\n"],"names":["DSBanner","type","isOpen","onClose","label","body","actionLink","showCloseButton","containerProps","innerContainerRef","useRef","linkRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","setHeight","useEffect","offsetHeight","useLayoutEffect","handleOnKeyDown","useCallback","e","key","preventDefault","click","icons","onClick","href","defaultProps","propTypes","DSBannerWithSchema","describe"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DSBanner.js","sources":["../../src/DSBanner.tsx"],"sourcesContent":["import React, { useLayoutEffect, useEffect, useRef, useCallback, useState } from 'react';\nimport CloseX from '@elliemae/ds-icons/CloseX';\nimport { describe } from 'react-desc';\nimport type { BannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles';\n\nconst DSBanner = ({\n type,\n isOpen,\n onClose,\n label,\n body,\n actionLink,\n showCloseButton,\n containerProps,\n}: BannerPropsT): JSX.Element => {\n const innerContainerRef = useRef<HTMLDivElement | null>(null);\n const linkRef = useRef<HTMLAnchorElement | null>(null);\n const [current, setCurrent] = useState<boolean>(isOpen);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState<number>(0);\n\n useEffect(() => {\n if (innerContainerRef.current) {\n setHeight(innerContainerRef.current.offsetHeight);\n }\n }, [isAnimating, isOpen]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n if (linkRef.current) linkRef.current.click();\n }\n }, []);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n type={type}\n isOpen={isOpen}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n height={height}\n data-testid=\"ds-banner-container\"\n {...containerProps}\n >\n <StyledInnerContainer\n type={type}\n isOpen={isOpen}\n ref={innerContainerRef}\n isAnimating={isAnimating}\n data-testid=\"ds-banner\"\n role=\"alert\"\n >\n <StyledIconContainer data-testid=\"ds-banner-icon\">{icons[type]}</StyledIconContainer>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n <span>{body}</span>\n {actionLink && (\n <StyledActionLink\n data-testid=\"ds-banner-action-link\"\n onClick={actionLink.onClick}\n href={actionLink.href}\n ref={linkRef}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\n isBodyEmpty={body}\n >\n {actionLink.label}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n\n {showCloseButton && (\n <StyledCloseButton\n data-testid=\"ds-banner-close-button\"\n buttonType=\"secondary\"\n onClick={onClose}\n aria-label=\"Close icon\"\n icon={<CloseX width=\"12px\" height=\"12px\" />}\n />\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSBanner.defaultProps = defaultProps;\nDSBanner.propTypes = propTypes;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBannerWithSchema };\n"],"names":["DSBanner","type","isOpen","onClose","label","body","actionLink","showCloseButton","containerProps","innerContainerRef","useRef","linkRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","setHeight","useEffect","offsetHeight","useLayoutEffect","handleOnKeyDown","useCallback","e","key","preventDefault","click","icons","onClick","href","defaultProps","propTypes","DSBannerWithSchema","describe"],"mappings":"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"}
|
package/esm/index.js
CHANGED
|
@@ -9,6 +9,7 @@ import './utils/icons.js';
|
|
|
9
9
|
import '@elliemae/ds-icons/SuccessFill';
|
|
10
10
|
import '@elliemae/ds-icons/InfoFill';
|
|
11
11
|
import '@elliemae/ds-icons/AlertsDetailFill';
|
|
12
|
+
import '@elliemae/ds-icons/WarningSquare';
|
|
12
13
|
import './propTypes.js';
|
|
13
14
|
import './defaultProps.js';
|
|
14
15
|
import './styles.js';
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
|
package/esm/utils/icons.js
CHANGED
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import SuccessFill from '@elliemae/ds-icons/SuccessFill';
|
|
3
3
|
import InfoFill from '@elliemae/ds-icons/InfoFill';
|
|
4
4
|
import AlertsDetailFill from '@elliemae/ds-icons/AlertsDetailFill';
|
|
5
|
+
import WarningSquare from '@elliemae/ds-icons/WarningSquare';
|
|
5
6
|
|
|
6
7
|
var icons = {
|
|
7
8
|
success: /*#__PURE__*/React.createElement(SuccessFill, {
|
|
@@ -19,7 +20,7 @@ var icons = {
|
|
|
19
20
|
width: "20px",
|
|
20
21
|
height: "20px"
|
|
21
22
|
}),
|
|
22
|
-
warning: /*#__PURE__*/React.createElement(
|
|
23
|
+
warning: /*#__PURE__*/React.createElement(WarningSquare, {
|
|
23
24
|
fill: "#d17a00",
|
|
24
25
|
width: "20px",
|
|
25
26
|
height: "20px"
|
package/esm/utils/icons.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons.js","sources":["../../../src/utils/icons.tsx"],"sourcesContent":["import React from 'react';\nimport SuccessFill from '@elliemae/ds-icons/SuccessFill';\nimport InfoFill from '@elliemae/ds-icons/InfoFill';\nimport AlertsDetailFill from '@elliemae/ds-icons/AlertsDetailFill';\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: <
|
|
1
|
+
{"version":3,"file":"icons.js","sources":["../../../src/utils/icons.tsx"],"sourcesContent":["import React from 'react';\nimport SuccessFill from '@elliemae/ds-icons/SuccessFill';\nimport InfoFill from '@elliemae/ds-icons/InfoFill';\nimport AlertsDetailFill from '@elliemae/ds-icons/AlertsDetailFill';\nimport WarningSquare from '@elliemae/ds-icons/WarningSquare';\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"],"names":["icons","success","info","danger","warning"],"mappings":";;;;;;IAMaA,KAAK,GAAG;AACnBC,EAAAA,OAAO,eAAE,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC,SAAlB;AAA4B,IAAA,KAAK,EAAC,MAAlC;AAAyC,IAAA,MAAM,EAAC;AAAhD,IADU;AAEnBC,EAAAA,IAAI,eAAE,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,SAAf;AAAyB,IAAA,KAAK,EAAC,MAA/B;AAAsC,IAAA,MAAM,EAAC;AAA7C,IAFa;AAGnBC,EAAAA,MAAM,eAAE,oBAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC,SAAvB;AAAiC,IAAA,KAAK,EAAC,MAAvC;AAA8C,IAAA,MAAM,EAAC;AAArD,IAHW;AAInBC,EAAAA,OAAO,eAAE,oBAAC,aAAD;AAAe,IAAA,IAAI,EAAC,SAApB;AAA8B,IAAA,KAAK,EAAC,MAApC;AAA2C,IAAA,MAAM,EAAC;AAAlD;AAJU;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-banner",
|
|
3
|
-
"version": "1.53.
|
|
3
|
+
"version": "1.53.4-next.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Ellie Mae - Dim Sum - Banner",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
"build": "node ../../scripts/build/build.js"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@elliemae/ds-basic": "1.53.
|
|
20
|
-
"@elliemae/ds-classnames": "1.53.
|
|
19
|
+
"@elliemae/ds-basic": "1.53.4-next.0",
|
|
20
|
+
"@elliemae/ds-classnames": "1.53.4-next.0"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"styled-components": "~5.3.0"
|