@elliemae/ds-mobile 1.53.4-rc.3 → 1.53.5-rc.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/MobileBanner/MobileBanner.js +1 -0
- package/cjs/MobileBanner/MobileBanner.js.map +1 -1
- package/cjs/MobileBanner/index.js +1 -0
- package/cjs/MobileBanner/index.js.map +1 -1
- package/cjs/MobileBanner/utils/icons.js +3 -1
- package/cjs/MobileBanner/utils/icons.js.map +1 -1
- package/cjs/index.js +1 -0
- package/cjs/index.js.map +1 -1
- package/esm/MobileBanner/MobileBanner.js +1 -0
- package/esm/MobileBanner/MobileBanner.js.map +1 -1
- package/esm/MobileBanner/index.js +1 -0
- package/esm/MobileBanner/index.js.map +1 -1
- package/esm/MobileBanner/utils/icons.js +2 -1
- package/esm/MobileBanner/utils/icons.js.map +1 -1
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -14,6 +14,7 @@ var MobileBanner_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-system');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileBanner.js","sources":["../../../src/MobileBanner/MobileBanner.tsx"],"sourcesContent":["import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';\nimport CloseX from '@elliemae/ds-icons/CloseX';\nimport { describe } from 'react-desc';\nimport type { MobileBannerPropsT } 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 StyledContent,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n StyledCloseButtonContainer,\n} from './styles';\n\nconst DSMobileBanner = ({\n type,\n isOpen,\n closeButtonOnClick,\n label,\n body,\n actionLinkLabel,\n actionLinkHref,\n actionLinkOnClick,\n showCloseButton,\n containerProps,\n focusOnOpen,\n}: MobileBannerPropsT): JSX.Element => {\n const innerContainerRef = useRef<HTMLDivElement | null>(null);\n const closeRef = useRef<HTMLDivElement | 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 useEffect(() => {\n if (focusOnOpen && closeRef.current && isOpen) {\n closeRef.current?.focus?.();\n }\n }, [focusOnOpen, isOpen]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\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 {...containerProps}\n data-testid=\"ds-mobile-banner-container\"\n role=\"alert\"\n >\n <StyledInnerContainer type={type} isOpen={isOpen} ref={innerContainerRef} isAnimating={isAnimating}>\n <StyledIconContainer data-testid=\"ds-mobile-banner-icon\">{icons[type]}</StyledIconContainer>\n <StyledContent showCloseButton={showCloseButton}>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n {body}\n {actionLinkLabel && (\n <StyledActionLink href={actionLinkHref} data-testid=\"ds-mobile-banner-link\" onClick={actionLinkOnClick}>\n {actionLinkLabel}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n </StyledContent>\n {showCloseButton && (\n <StyledCloseButtonContainer>\n <StyledCloseButton\n data-testid=\"ds-mobile-banner-close-button\"\n buttonType=\"link\"\n onClick={closeButtonOnClick}\n aria-label=\"Close Banner\"\n icon={<CloseX width=\"12px\" height=\"12px\" />}\n innerRef={closeRef}\n />\n </StyledCloseButtonContainer>\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSMobileBanner.defaultProps = defaultProps;\nDSMobileBanner.propTypes = propTypes;\nconst DSMobileBannerWithSchema = describe(DSMobileBanner);\nDSMobileBannerWithSchema.propTypes = propTypes;\n\nexport { DSMobileBanner, DSMobileBannerWithSchema };\n"],"names":["DSMobileBanner","type","isOpen","closeButtonOnClick","label","body","actionLinkLabel","actionLinkHref","actionLinkOnClick","showCloseButton","containerProps","focusOnOpen","innerContainerRef","useRef","closeRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","setHeight","useEffect","offsetHeight","focus","useLayoutEffect","React","StyledBannerContainer","StyledInnerContainer","StyledIconContainer","icons","StyledContent","StyledTitle","StyledSubTitle","StyledActionLink","StyledCloseButtonContainer","StyledCloseButton","CloseX","defaultProps","propTypes","DSMobileBannerWithSchema","describe"],"mappings":"
|
|
1
|
+
{"version":3,"file":"MobileBanner.js","sources":["../../../src/MobileBanner/MobileBanner.tsx"],"sourcesContent":["import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';\nimport CloseX from '@elliemae/ds-icons/CloseX';\nimport { describe } from 'react-desc';\nimport type { MobileBannerPropsT } 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 StyledContent,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n StyledCloseButtonContainer,\n} from './styles';\n\nconst DSMobileBanner = ({\n type,\n isOpen,\n closeButtonOnClick,\n label,\n body,\n actionLinkLabel,\n actionLinkHref,\n actionLinkOnClick,\n showCloseButton,\n containerProps,\n focusOnOpen,\n}: MobileBannerPropsT): JSX.Element => {\n const innerContainerRef = useRef<HTMLDivElement | null>(null);\n const closeRef = useRef<HTMLDivElement | 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 useEffect(() => {\n if (focusOnOpen && closeRef.current && isOpen) {\n closeRef.current?.focus?.();\n }\n }, [focusOnOpen, isOpen]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\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 {...containerProps}\n data-testid=\"ds-mobile-banner-container\"\n role=\"alert\"\n >\n <StyledInnerContainer type={type} isOpen={isOpen} ref={innerContainerRef} isAnimating={isAnimating}>\n <StyledIconContainer data-testid=\"ds-mobile-banner-icon\">{icons[type]}</StyledIconContainer>\n <StyledContent showCloseButton={showCloseButton}>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n {body}\n {actionLinkLabel && (\n <StyledActionLink href={actionLinkHref} data-testid=\"ds-mobile-banner-link\" onClick={actionLinkOnClick}>\n {actionLinkLabel}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n </StyledContent>\n {showCloseButton && (\n <StyledCloseButtonContainer>\n <StyledCloseButton\n data-testid=\"ds-mobile-banner-close-button\"\n buttonType=\"link\"\n onClick={closeButtonOnClick}\n aria-label=\"Close Banner\"\n icon={<CloseX width=\"12px\" height=\"12px\" />}\n innerRef={closeRef}\n />\n </StyledCloseButtonContainer>\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSMobileBanner.defaultProps = defaultProps;\nDSMobileBanner.propTypes = propTypes;\nconst DSMobileBannerWithSchema = describe(DSMobileBanner);\nDSMobileBannerWithSchema.propTypes = propTypes;\n\nexport { DSMobileBanner, DSMobileBannerWithSchema };\n"],"names":["DSMobileBanner","type","isOpen","closeButtonOnClick","label","body","actionLinkLabel","actionLinkHref","actionLinkOnClick","showCloseButton","containerProps","focusOnOpen","innerContainerRef","useRef","closeRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","setHeight","useEffect","offsetHeight","focus","useLayoutEffect","React","StyledBannerContainer","StyledInnerContainer","StyledIconContainer","icons","StyledContent","StyledTitle","StyledSubTitle","StyledActionLink","StyledCloseButtonContainer","StyledCloseButton","CloseX","defaultProps","propTypes","DSMobileBannerWithSchema","describe"],"mappings":"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"}
|
|
@@ -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');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -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'], {
|
|
@@ -26,7 +28,7 @@ var icons = {
|
|
|
26
28
|
height: "24px",
|
|
27
29
|
fill: "#c64252"
|
|
28
30
|
}),
|
|
29
|
-
warning: /*#__PURE__*/React__default['default'].createElement(
|
|
31
|
+
warning: /*#__PURE__*/React__default['default'].createElement(WarningSquare__default['default'], {
|
|
30
32
|
width: "24px",
|
|
31
33
|
height: "24px",
|
|
32
34
|
fill: "#d17a00"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons.js","sources":["../../../../src/MobileBanner/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\" />,\n info: <InfoFill fill=\"#1e79c2\" />,\n error: <AlertsDetailFill width=\"24px\" height=\"24px\" fill=\"#c64252\" />,\n warning: <
|
|
1
|
+
{"version":3,"file":"icons.js","sources":["../../../../src/MobileBanner/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\" />,\n info: <InfoFill fill=\"#1e79c2\" />,\n error: <AlertsDetailFill width=\"24px\" height=\"24px\" fill=\"#c64252\" />,\n warning: <WarningSquare width=\"24px\" height=\"24px\" fill=\"#d17a00\" />,\n};\n"],"names":["icons","success","React","SuccessFill","info","InfoFill","error","AlertsDetailFill","warning","WarningSquare"],"mappings":";;;;;;;;;;;;;;;;;;IAMaA,KAAK,GAAG;AACnBC,EAAAA,OAAO,eAAEC,wCAACC,+BAAD;AAAa,IAAA,IAAI,EAAC;AAAlB,IADU;AAEnBC,EAAAA,IAAI,eAAEF,wCAACG,4BAAD;AAAU,IAAA,IAAI,EAAC;AAAf,IAFa;AAGnBC,EAAAA,KAAK,eAAEJ,wCAACK,oCAAD;AAAkB,IAAA,KAAK,EAAC,MAAxB;AAA+B,IAAA,MAAM,EAAC,MAAtC;AAA6C,IAAA,IAAI,EAAC;AAAlD,IAHY;AAInBC,EAAAA,OAAO,eAAEN,wCAACO,iCAAD;AAAe,IAAA,KAAK,EAAC,MAArB;AAA4B,IAAA,MAAM,EAAC,MAAnC;AAA0C,IAAA,IAAI,EAAC;AAA/C;AAJU;;;;"}
|
package/cjs/index.js
CHANGED
|
@@ -111,6 +111,7 @@ require('./MobileBanner/utils/icons.js');
|
|
|
111
111
|
require('@elliemae/ds-icons/SuccessFill');
|
|
112
112
|
require('@elliemae/ds-icons/InfoFill');
|
|
113
113
|
require('@elliemae/ds-icons/AlertsDetailFill');
|
|
114
|
+
require('@elliemae/ds-icons/WarningSquare');
|
|
114
115
|
require('./MobileBanner/propTypes.js');
|
|
115
116
|
require('./MobileBanner/defaultProps.js');
|
|
116
117
|
require('./MobileBanner/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -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-system';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileBanner.js","sources":["../../../src/MobileBanner/MobileBanner.tsx"],"sourcesContent":["import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';\nimport CloseX from '@elliemae/ds-icons/CloseX';\nimport { describe } from 'react-desc';\nimport type { MobileBannerPropsT } 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 StyledContent,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n StyledCloseButtonContainer,\n} from './styles';\n\nconst DSMobileBanner = ({\n type,\n isOpen,\n closeButtonOnClick,\n label,\n body,\n actionLinkLabel,\n actionLinkHref,\n actionLinkOnClick,\n showCloseButton,\n containerProps,\n focusOnOpen,\n}: MobileBannerPropsT): JSX.Element => {\n const innerContainerRef = useRef<HTMLDivElement | null>(null);\n const closeRef = useRef<HTMLDivElement | 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 useEffect(() => {\n if (focusOnOpen && closeRef.current && isOpen) {\n closeRef.current?.focus?.();\n }\n }, [focusOnOpen, isOpen]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\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 {...containerProps}\n data-testid=\"ds-mobile-banner-container\"\n role=\"alert\"\n >\n <StyledInnerContainer type={type} isOpen={isOpen} ref={innerContainerRef} isAnimating={isAnimating}>\n <StyledIconContainer data-testid=\"ds-mobile-banner-icon\">{icons[type]}</StyledIconContainer>\n <StyledContent showCloseButton={showCloseButton}>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n {body}\n {actionLinkLabel && (\n <StyledActionLink href={actionLinkHref} data-testid=\"ds-mobile-banner-link\" onClick={actionLinkOnClick}>\n {actionLinkLabel}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n </StyledContent>\n {showCloseButton && (\n <StyledCloseButtonContainer>\n <StyledCloseButton\n data-testid=\"ds-mobile-banner-close-button\"\n buttonType=\"link\"\n onClick={closeButtonOnClick}\n aria-label=\"Close Banner\"\n icon={<CloseX width=\"12px\" height=\"12px\" />}\n innerRef={closeRef}\n />\n </StyledCloseButtonContainer>\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSMobileBanner.defaultProps = defaultProps;\nDSMobileBanner.propTypes = propTypes;\nconst DSMobileBannerWithSchema = describe(DSMobileBanner);\nDSMobileBannerWithSchema.propTypes = propTypes;\n\nexport { DSMobileBanner, DSMobileBannerWithSchema };\n"],"names":["DSMobileBanner","type","isOpen","closeButtonOnClick","label","body","actionLinkLabel","actionLinkHref","actionLinkOnClick","showCloseButton","containerProps","focusOnOpen","innerContainerRef","useRef","closeRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","setHeight","useEffect","offsetHeight","focus","useLayoutEffect","icons","defaultProps","propTypes","DSMobileBannerWithSchema","describe"],"mappings":"
|
|
1
|
+
{"version":3,"file":"MobileBanner.js","sources":["../../../src/MobileBanner/MobileBanner.tsx"],"sourcesContent":["import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';\nimport CloseX from '@elliemae/ds-icons/CloseX';\nimport { describe } from 'react-desc';\nimport type { MobileBannerPropsT } 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 StyledContent,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n StyledCloseButtonContainer,\n} from './styles';\n\nconst DSMobileBanner = ({\n type,\n isOpen,\n closeButtonOnClick,\n label,\n body,\n actionLinkLabel,\n actionLinkHref,\n actionLinkOnClick,\n showCloseButton,\n containerProps,\n focusOnOpen,\n}: MobileBannerPropsT): JSX.Element => {\n const innerContainerRef = useRef<HTMLDivElement | null>(null);\n const closeRef = useRef<HTMLDivElement | 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 useEffect(() => {\n if (focusOnOpen && closeRef.current && isOpen) {\n closeRef.current?.focus?.();\n }\n }, [focusOnOpen, isOpen]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\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 {...containerProps}\n data-testid=\"ds-mobile-banner-container\"\n role=\"alert\"\n >\n <StyledInnerContainer type={type} isOpen={isOpen} ref={innerContainerRef} isAnimating={isAnimating}>\n <StyledIconContainer data-testid=\"ds-mobile-banner-icon\">{icons[type]}</StyledIconContainer>\n <StyledContent showCloseButton={showCloseButton}>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n {body}\n {actionLinkLabel && (\n <StyledActionLink href={actionLinkHref} data-testid=\"ds-mobile-banner-link\" onClick={actionLinkOnClick}>\n {actionLinkLabel}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n </StyledContent>\n {showCloseButton && (\n <StyledCloseButtonContainer>\n <StyledCloseButton\n data-testid=\"ds-mobile-banner-close-button\"\n buttonType=\"link\"\n onClick={closeButtonOnClick}\n aria-label=\"Close Banner\"\n icon={<CloseX width=\"12px\" height=\"12px\" />}\n innerRef={closeRef}\n />\n </StyledCloseButtonContainer>\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSMobileBanner.defaultProps = defaultProps;\nDSMobileBanner.propTypes = propTypes;\nconst DSMobileBannerWithSchema = describe(DSMobileBanner);\nDSMobileBannerWithSchema.propTypes = propTypes;\n\nexport { DSMobileBanner, DSMobileBannerWithSchema };\n"],"names":["DSMobileBanner","type","isOpen","closeButtonOnClick","label","body","actionLinkLabel","actionLinkHref","actionLinkOnClick","showCloseButton","containerProps","focusOnOpen","innerContainerRef","useRef","closeRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","setHeight","useEffect","offsetHeight","focus","useLayoutEffect","icons","defaultProps","propTypes","DSMobileBannerWithSchema","describe"],"mappings":"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"}
|
|
@@ -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';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
|
|
@@ -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, {
|
|
@@ -15,7 +16,7 @@ var icons = {
|
|
|
15
16
|
height: "24px",
|
|
16
17
|
fill: "#c64252"
|
|
17
18
|
}),
|
|
18
|
-
warning: /*#__PURE__*/React.createElement(
|
|
19
|
+
warning: /*#__PURE__*/React.createElement(WarningSquare, {
|
|
19
20
|
width: "24px",
|
|
20
21
|
height: "24px",
|
|
21
22
|
fill: "#d17a00"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons.js","sources":["../../../../src/MobileBanner/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\" />,\n info: <InfoFill fill=\"#1e79c2\" />,\n error: <AlertsDetailFill width=\"24px\" height=\"24px\" fill=\"#c64252\" />,\n warning: <
|
|
1
|
+
{"version":3,"file":"icons.js","sources":["../../../../src/MobileBanner/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\" />,\n info: <InfoFill fill=\"#1e79c2\" />,\n error: <AlertsDetailFill width=\"24px\" height=\"24px\" fill=\"#c64252\" />,\n warning: <WarningSquare width=\"24px\" height=\"24px\" fill=\"#d17a00\" />,\n};\n"],"names":["icons","success","info","error","warning"],"mappings":";;;;;;IAMaA,KAAK,GAAG;AACnBC,EAAAA,OAAO,eAAE,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC;AAAlB,IADU;AAEnBC,EAAAA,IAAI,eAAE,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC;AAAf,IAFa;AAGnBC,EAAAA,KAAK,eAAE,oBAAC,gBAAD;AAAkB,IAAA,KAAK,EAAC,MAAxB;AAA+B,IAAA,MAAM,EAAC,MAAtC;AAA6C,IAAA,IAAI,EAAC;AAAlD,IAHY;AAInBC,EAAAA,OAAO,eAAE,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAC,MAArB;AAA4B,IAAA,MAAM,EAAC,MAAnC;AAA0C,IAAA,IAAI,EAAC;AAA/C;AAJU;;;;"}
|
package/esm/index.js
CHANGED
|
@@ -107,6 +107,7 @@ import './MobileBanner/utils/icons.js';
|
|
|
107
107
|
import '@elliemae/ds-icons/SuccessFill';
|
|
108
108
|
import '@elliemae/ds-icons/InfoFill';
|
|
109
109
|
import '@elliemae/ds-icons/AlertsDetailFill';
|
|
110
|
+
import '@elliemae/ds-icons/WarningSquare';
|
|
110
111
|
import './MobileBanner/propTypes.js';
|
|
111
112
|
import './MobileBanner/defaultProps.js';
|
|
112
113
|
import './MobileBanner/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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-mobile",
|
|
3
|
-
"version": "1.53.
|
|
3
|
+
"version": "1.53.5-rc.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Ellie Mae - Dim Sum - System",
|
|
6
6
|
"main": "cjs/index.js",
|
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
"styled-system": "~5.1.5"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@elliemae/pui-theme": "
|
|
29
|
+
"@elliemae/pui-theme": "2.2.3",
|
|
30
30
|
"styled-components": "~5.3.0"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"@elliemae/pui-theme": "
|
|
33
|
+
"@elliemae/pui-theme": "2.2.3",
|
|
34
34
|
"lodash": "^4.17.20",
|
|
35
35
|
"react": "~17.0.1",
|
|
36
36
|
"react-dom": "^17.0.1",
|