@elliemae/ds-banner 1.61.12 → 1.61.13
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.map +1 -1
- package/cjs/defaultProps.js.map +1 -1
- package/cjs/propTypes.js.map +1 -1
- package/cjs/styles.js.map +1 -1
- package/cjs/utils/bannerTypes.js.map +1 -1
- package/cjs/utils/icons.js.map +1 -1
- package/cjs/utils/styleHelpers.js.map +1 -1
- package/esm/DSBanner.js.map +1 -1
- package/esm/defaultProps.js.map +1 -1
- package/esm/propTypes.js.map +1 -1
- package/esm/styles.js.map +1 -1
- package/esm/utils/bannerTypes.js.map +1 -1
- package/esm/utils/icons.js.map +1 -1
- package/esm/utils/styleHelpers.js.map +1 -1
- package/package.json +4 -4
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';\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 actionRef,\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 const [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnWrapper = () => {\n if (innerContainerRef.current) {\n setAlertTabIndex(0);\n setTimeout(() => {\n innerContainerRef.current.focus();\n }, 100);\n }\n };\n actionRef.current.focusOnLink = () => {\n if (linkRef.current) {\n linkRef.current.focus();\n }\n };\n }\n }, [actionRef]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const handleBlur = useCallback(() => {\n setAlertTabIndex(undefined);\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 tabIndex={alertTabIndex}\n onBlur={handleBlur}\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 <span />\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","actionRef","innerContainerRef","useRef","linkRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","undefined","alertTabIndex","setAlertTabIndex","React","useEffect","focusOnWrapper","setTimeout","focus","focusOnLink","useLayoutEffect","handleBlur","useCallback","handleOnKeyDown","e","key","preventDefault","click","StyledBannerContainer","StyledInnerContainer","StyledIconContainer","icons","StyledTitle","StyledSubTitle","StyledActionLink","onClick","href","StyledCloseButton","CloseX","defaultProps","propTypes","DSBannerWithSchema","describe"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;IAiBMA,QAAQ,GAAG,SAAXA,QAAW,OAUgB;
|
|
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';\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 actionRef,\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 const [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnWrapper = () => {\n if (innerContainerRef.current) {\n setAlertTabIndex(0);\n setTimeout(() => {\n innerContainerRef.current.focus();\n }, 100);\n }\n };\n actionRef.current.focusOnLink = () => {\n if (linkRef.current) {\n linkRef.current.focus();\n }\n };\n }\n }, [actionRef]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const handleBlur = useCallback(() => {\n setAlertTabIndex(undefined);\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 tabIndex={alertTabIndex}\n onBlur={handleBlur}\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 <span />\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","actionRef","innerContainerRef","useRef","linkRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","undefined","alertTabIndex","setAlertTabIndex","React","useEffect","focusOnWrapper","setTimeout","focus","focusOnLink","useLayoutEffect","handleBlur","useCallback","handleOnKeyDown","e","key","preventDefault","click","StyledBannerContainer","StyledInnerContainer","StyledIconContainer","icons","StyledTitle","StyledSubTitle","StyledActionLink","onClick","href","StyledCloseButton","CloseX","defaultProps","propTypes","DSBannerWithSchema","describe"],"mappings":"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"}
|
package/cjs/defaultProps.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaultProps.js","sources":["../../src/defaultProps.ts"],"sourcesContent":["import { BANNER_TYPES } from './utils/bannerTypes';\n\nexport const defaultProps = {\n containerProps: {},\n label: '',\n body: '',\n type: BANNER_TYPES.INFO,\n isOpen: true,\n onClose: () => null,\n showCloseButton: true,\n actionLink: { label: '', onClick: () => null, href: '' },\n};\n"],"names":["defaultProps","containerProps","label","body","type","BANNER_TYPES","INFO","isOpen","onClose","showCloseButton","actionLink","onClick","href"],"mappings":";;;;;;IAEaA,YAAY,GAAG;
|
|
1
|
+
{"version":3,"file":"defaultProps.js","sources":["../../src/defaultProps.ts"],"sourcesContent":["import { BANNER_TYPES } from './utils/bannerTypes';\n\nexport const defaultProps = {\n containerProps: {},\n label: '',\n body: '',\n type: BANNER_TYPES.INFO,\n isOpen: true,\n onClose: () => null,\n showCloseButton: true,\n actionLink: { label: '', onClick: () => null, href: '' },\n};\n"],"names":["defaultProps","containerProps","label","body","type","BANNER_TYPES","INFO","isOpen","onClose","showCloseButton","actionLink","onClick","href"],"mappings":";;;;;;IAEaA,YAAY,GAAG;EAC1BC,cAAc,EAAE,EADU;EAE1BC,KAAK,EAAE,EAFmB;EAG1BC,IAAI,EAAE,EAHoB;EAI1BC,IAAI,EAAEC,8BAAY,CAACC,IAJO;EAK1BC,MAAM,EAAE,IALkB;EAM1BC,OAAO,EAAE;IAAA,OAAM,IAAN;GANiB;EAO1BC,eAAe,EAAE,IAPS;EAQ1BC,UAAU,EAAE;IAAER,KAAK,EAAE,EAAT;IAAaS,OAAO,EAAE;MAAA,OAAM,IAAN;KAAtB;IAAkCC,IAAI,EAAE;;AAR1B;;;;"}
|
package/cjs/propTypes.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"propTypes.js","sources":["../../src/propTypes.tsx"],"sourcesContent":["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"],"names":["propTypes","containerProps","PropTypes","object","description","defaultValue","label","string","body","type","oneOf","Object","values","BANNER_TYPES","INFO","onClose","func","isOpen","bool","showCloseButton","actionLink","shape","onClick","href","actionRef"],"mappings":";;;;;;;IAGaA,SAAS,GAAG;
|
|
1
|
+
{"version":3,"file":"propTypes.js","sources":["../../src/propTypes.tsx"],"sourcesContent":["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"],"names":["propTypes","containerProps","PropTypes","object","description","defaultValue","label","string","body","type","oneOf","Object","values","BANNER_TYPES","INFO","onClose","func","isOpen","bool","showCloseButton","actionLink","shape","onClick","href","actionRef"],"mappings":";;;;;;;IAGaA,SAAS,GAAG;EACvBC,cAAc,EAAEC,mBAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,kDAA7B,EAAiFC,YAAjF,CAA8F,EAA9F,CADO;EAEvBC,KAAK,EAAEJ,mBAAS,CAACK,MAAV,CAAiBH,WAAjB,CAA6B,gBAA7B,EAA+CC,YAA/C,CAA4D,EAA5D,CAFgB;EAGvBG,IAAI,EAAEN,mBAAS,CAACK,MAAV,CAAiBH,WAAjB,CAA6B,uBAA7B,EAAsDC,YAAtD,CAAmE,EAAnE,CAHiB;EAIvBI,IAAI,EAAEP,mBAAS,CAACQ,KAAV,CAAgBC,MAAM,CAACC,MAAP,CAAcC,8BAAd,CAAhB,EAA6CT,WAA7C,CAAyD,eAAzD,EAA0EC,YAA1E,CAAuFQ,8BAAY,CAACC,IAApG,CAJiB;EAKvBC,OAAO,EAAEb,mBAAS,CAACc,IAAV,CAAeZ,WAAf,CAA2B,0CAA3B,CALc;EAMvBa,MAAM,EAAEf,mBAAS,CAACgB,IAAV,CAAed,WAAf,CAA2B,sCAA3B,EAAmEC,YAAnE,CAAgF,IAAhF,CANe;EAOvBc,eAAe,EAAEjB,mBAAS,CAACgB,IAAV,CAAed,WAAf,CAA2B,qCAA3B,EAAkEC,YAAlE,CAA+E,IAA/E,CAPM;EAQvBe,UAAU,EAAElB,mBAAS,CAACmB,KAAV,CAAgB;IAC1Bf,KAAK,EAAEJ,mBAAS,CAACK,MADS;IAE1Be,OAAO,EAAEpB,mBAAS,CAACc,IAFO;IAG1BO,IAAI,EAAErB,mBAAS,CAACK;GAHN,EAKTH,WALS,CAKG,wCALH,EAMTC,YANS,CAMI,EANJ,CARW;EAevBmB,SAAS,EAAEtB,mBAAS,CAACC,MAAV,CACRC,WADQ,mJAQRC,YARQ,CAQK,EARL;AAfY;;;;"}
|
package/cjs/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../src/styles.tsx"],"sourcesContent":["import styled from 'styled-components';\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.div<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\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`\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled.div`\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`\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.a<StyledActionLinkT>`\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)`\n margin-left: ${({ theme }) => theme.space.xxs};\n &:not(focus) {\n border: transparent;\n }\n`;\n"],"names":["StyledBannerContainer","styled","div","isOpen","isAnimating","height","handleAnimation","StyledInnerContainer","theme","colors","neutral","type","handleBorderColor","StyledIconContainer","space","xxs","xs","StyledTitle","fontSizes","label","fontWeights","semibold","StyledSubTitle","subTitle","regular","StyledActionLink","a","isBodyEmpty","hyperlink","brand","StyledCloseButton","DSButton"],"mappings":";;;;;;;;;;;;;;;;IAKaA,qBAAqB,gBAAGC,0BAAM,CAACC,GAAV;
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../src/styles.tsx"],"sourcesContent":["import styled from 'styled-components';\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.div<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\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`\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled.div`\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`\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.a<StyledActionLinkT>`\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)`\n margin-left: ${({ theme }) => theme.space.xxs};\n &:not(focus) {\n border: transparent;\n }\n`;\n"],"names":["StyledBannerContainer","styled","div","isOpen","isAnimating","height","handleAnimation","StyledInnerContainer","theme","colors","neutral","type","handleBorderColor","StyledIconContainer","space","xxs","xs","StyledTitle","fontSizes","label","fontWeights","semibold","StyledSubTitle","subTitle","regular","StyledActionLink","a","isBodyEmpty","hyperlink","brand","StyledCloseButton","DSButton"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bannerTypes.js","sources":["../../../src/utils/bannerTypes.tsx"],"sourcesContent":["export const BANNER_TYPES = {\n INFO: 'info',\n SUCCESS: 'success',\n WARNING: 'warning',\n DANGER: 'danger',\n} as const;\n"],"names":["BANNER_TYPES","INFO","SUCCESS","WARNING","DANGER"],"mappings":";;;;IAAaA,YAAY,GAAG;
|
|
1
|
+
{"version":3,"file":"bannerTypes.js","sources":["../../../src/utils/bannerTypes.tsx"],"sourcesContent":["export const BANNER_TYPES = {\n INFO: 'info',\n SUCCESS: 'success',\n WARNING: 'warning',\n DANGER: 'danger',\n} as const;\n"],"names":["BANNER_TYPES","INFO","SUCCESS","WARNING","DANGER"],"mappings":";;;;IAAaA,YAAY,GAAG;EAC1BC,IAAI,EAAE,MADoB;EAE1BC,OAAO,EAAE,SAFiB;EAG1BC,OAAO,EAAE,SAHiB;EAI1BC,MAAM,EAAE;AAJkB;;;;"}
|
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 { 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"],"names":["icons","success","React","SuccessFill","info","InfoFill","danger","AlertsDetailFill","warning","WarningSquare"],"mappings":";;;;;;;;;;;IAGaA,KAAK,GAAG;
|
|
1
|
+
{"version":3,"file":"icons.js","sources":["../../../src/utils/icons.tsx"],"sourcesContent":["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"],"names":["icons","success","React","SuccessFill","info","InfoFill","danger","AlertsDetailFill","warning","WarningSquare"],"mappings":";;;;;;;;;;;IAGaA,KAAK,GAAG;EACnBC,OAAO,eAAEC,wCAACC,mBAAD;IAAa,IAAI,EAAC,SAAlB;IAA4B,KAAK,EAAC,MAAlC;IAAyC,MAAM,EAAC;IADtC;EAEnBC,IAAI,eAAEF,wCAACG,gBAAD;IAAU,IAAI,EAAC,SAAf;IAAyB,KAAK,EAAC,MAA/B;IAAsC,MAAM,EAAC;IAFhC;EAGnBC,MAAM,eAAEJ,wCAACK,wBAAD;IAAkB,IAAI,EAAC,SAAvB;IAAiC,KAAK,EAAC,MAAvC;IAA8C,MAAM,EAAC;IAH1C;EAInBC,OAAO,eAAEN,wCAACO,qBAAD;IAAe,IAAI,EAAC,SAApB;IAA8B,KAAK,EAAC,MAApC;IAA2C,MAAM,EAAC;;AAJxC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styleHelpers.js","sources":["../../../src/utils/styleHelpers.ts"],"sourcesContent":["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"],"names":["slideIn","kfrm","slideOut","spanContainer","height","shrinkContainer","handleBorderColor","type","colors","BANNER_TYPES","SUCCESS","success","INFO","brand","WARNING","warning","DANGER","danger","handleAnimation","isAnimating","isOpen","css"],"mappings":";;;;;;;;;;;;;AAIA,IAAMA,OAAO,GAAGC,aAAH,uMAAb;AASA,IAAMC,QAAQ,GAAGD,aAAH,0QAAd;;AAcA,IAAME,aAAa,GAAG,SAAhBA,aAAgB,CAACC,MAAD;
|
|
1
|
+
{"version":3,"file":"styleHelpers.js","sources":["../../../src/utils/styleHelpers.ts"],"sourcesContent":["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"],"names":["slideIn","kfrm","slideOut","spanContainer","height","shrinkContainer","handleBorderColor","type","colors","BANNER_TYPES","SUCCESS","success","INFO","brand","WARNING","warning","DANGER","danger","handleAnimation","isAnimating","isOpen","css"],"mappings":";;;;;;;;;;;;;AAIA,IAAMA,OAAO,GAAGC,aAAH,uMAAb;AASA,IAAMC,QAAQ,GAAGD,aAAH,0QAAd;;AAcA,IAAME,aAAa,GAAG,SAAhBA,aAAgB,CAACC,MAAD;EAAA,OAAoBH,aAApB,iKAKRG,MALQ;AAAA,CAAtB;;AASA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACD,MAAD;EAAA,OAAoBH,aAApB,iKAEVG,MAFU;AAAA,CAAxB;;IASaE,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,IAAD,QAA8B;EAAA,IAArBC,MAAqB,QAArBA,MAAqB;;EAC7D,QAAQD,IAAR;IACE,KAAKE,8BAAY,CAACC,OAAlB;MACE,OAAOF,MAAM,CAACG,OAAP,CAAe,GAAf,CAAP;;IACF,KAAKF,8BAAY,CAACG,IAAlB;MACE,OAAOJ,MAAM,CAACK,KAAP,CAAa,GAAb,CAAP;;IACF,KAAKJ,8BAAY,CAACK,OAAlB;MACE,OAAON,MAAM,CAACO,OAAP,CAAe,GAAf,CAAP;;IACF,KAAKN,8BAAY,CAACO,MAAlB;MACE,OAAOR,MAAM,CAACS,MAAP,CAAc,GAAd,CAAP;;AAEL;IAEYC,eAAe,GAAG,SAAlBA,eAAkB,CAC7BC,WAD6B,EAE7BC,MAF6B,EAIE;EAAA,IAD/BhB,MAC+B,uEADP,IACO;;EAC/B,IAAIe,WAAJ,EAAiB;IACf,IAAIC,MAAJ,EAAY;MACV,OAAOC,YAAP,2IACejB,MAAM,GAAGD,aAAa,CAACC,MAAD,CAAhB,GAA2BJ,OADhD;KADF,MAIO;MACL,OAAOqB,YAAP,2IACejB,MAAM,GAAGC,eAAe,CAACD,MAAD,CAAlB,GAA6BF,QADlD;;;AAKL;;;;;"}
|
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';\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 actionRef,\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 const [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnWrapper = () => {\n if (innerContainerRef.current) {\n setAlertTabIndex(0);\n setTimeout(() => {\n innerContainerRef.current.focus();\n }, 100);\n }\n };\n actionRef.current.focusOnLink = () => {\n if (linkRef.current) {\n linkRef.current.focus();\n }\n };\n }\n }, [actionRef]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const handleBlur = useCallback(() => {\n setAlertTabIndex(undefined);\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 tabIndex={alertTabIndex}\n onBlur={handleBlur}\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 <span />\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","actionRef","innerContainerRef","useRef","linkRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","undefined","alertTabIndex","setAlertTabIndex","React","useEffect","focusOnWrapper","setTimeout","focus","focusOnLink","useLayoutEffect","handleBlur","useCallback","handleOnKeyDown","e","key","preventDefault","click","icons","onClick","href","defaultProps","propTypes","DSBannerWithSchema","describe"],"mappings":";;;;;;;;;;;;;;;;IAiBMA,QAAQ,GAAG,SAAXA,QAAW,OAUgB;
|
|
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';\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 actionRef,\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 const [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnWrapper = () => {\n if (innerContainerRef.current) {\n setAlertTabIndex(0);\n setTimeout(() => {\n innerContainerRef.current.focus();\n }, 100);\n }\n };\n actionRef.current.focusOnLink = () => {\n if (linkRef.current) {\n linkRef.current.focus();\n }\n };\n }\n }, [actionRef]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const handleBlur = useCallback(() => {\n setAlertTabIndex(undefined);\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 tabIndex={alertTabIndex}\n onBlur={handleBlur}\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 <span />\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","actionRef","innerContainerRef","useRef","linkRef","useState","current","setCurrent","isAnimating","setIsAnimating","height","undefined","alertTabIndex","setAlertTabIndex","React","useEffect","focusOnWrapper","setTimeout","focus","focusOnLink","useLayoutEffect","handleBlur","useCallback","handleOnKeyDown","e","key","preventDefault","click","icons","onClick","href","defaultProps","propTypes","DSBannerWithSchema","describe"],"mappings":"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"}
|
package/esm/defaultProps.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaultProps.js","sources":["../../src/defaultProps.ts"],"sourcesContent":["import { BANNER_TYPES } from './utils/bannerTypes';\n\nexport const defaultProps = {\n containerProps: {},\n label: '',\n body: '',\n type: BANNER_TYPES.INFO,\n isOpen: true,\n onClose: () => null,\n showCloseButton: true,\n actionLink: { label: '', onClick: () => null, href: '' },\n};\n"],"names":["defaultProps","containerProps","label","body","type","BANNER_TYPES","INFO","isOpen","onClose","showCloseButton","actionLink","onClick","href"],"mappings":";;IAEaA,YAAY,GAAG;
|
|
1
|
+
{"version":3,"file":"defaultProps.js","sources":["../../src/defaultProps.ts"],"sourcesContent":["import { BANNER_TYPES } from './utils/bannerTypes';\n\nexport const defaultProps = {\n containerProps: {},\n label: '',\n body: '',\n type: BANNER_TYPES.INFO,\n isOpen: true,\n onClose: () => null,\n showCloseButton: true,\n actionLink: { label: '', onClick: () => null, href: '' },\n};\n"],"names":["defaultProps","containerProps","label","body","type","BANNER_TYPES","INFO","isOpen","onClose","showCloseButton","actionLink","onClick","href"],"mappings":";;IAEaA,YAAY,GAAG;EAC1BC,cAAc,EAAE,EADU;EAE1BC,KAAK,EAAE,EAFmB;EAG1BC,IAAI,EAAE,EAHoB;EAI1BC,IAAI,EAAEC,YAAY,CAACC,IAJO;EAK1BC,MAAM,EAAE,IALkB;EAM1BC,OAAO,EAAE;IAAA,OAAM,IAAN;GANiB;EAO1BC,eAAe,EAAE,IAPS;EAQ1BC,UAAU,EAAE;IAAER,KAAK,EAAE,EAAT;IAAaS,OAAO,EAAE;MAAA,OAAM,IAAN;KAAtB;IAAkCC,IAAI,EAAE;;AAR1B;;;;"}
|
package/esm/propTypes.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"propTypes.js","sources":["../../src/propTypes.tsx"],"sourcesContent":["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"],"names":["propTypes","containerProps","PropTypes","object","description","defaultValue","label","string","body","type","oneOf","Object","values","BANNER_TYPES","INFO","onClose","func","isOpen","bool","showCloseButton","actionLink","shape","onClick","href","actionRef"],"mappings":";;;IAGaA,SAAS,GAAG;
|
|
1
|
+
{"version":3,"file":"propTypes.js","sources":["../../src/propTypes.tsx"],"sourcesContent":["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"],"names":["propTypes","containerProps","PropTypes","object","description","defaultValue","label","string","body","type","oneOf","Object","values","BANNER_TYPES","INFO","onClose","func","isOpen","bool","showCloseButton","actionLink","shape","onClick","href","actionRef"],"mappings":";;;IAGaA,SAAS,GAAG;EACvBC,cAAc,EAAEC,SAAS,CAACC,MAAV,CAAiBC,WAAjB,CAA6B,kDAA7B,EAAiFC,YAAjF,CAA8F,EAA9F,CADO;EAEvBC,KAAK,EAAEJ,SAAS,CAACK,MAAV,CAAiBH,WAAjB,CAA6B,gBAA7B,EAA+CC,YAA/C,CAA4D,EAA5D,CAFgB;EAGvBG,IAAI,EAAEN,SAAS,CAACK,MAAV,CAAiBH,WAAjB,CAA6B,uBAA7B,EAAsDC,YAAtD,CAAmE,EAAnE,CAHiB;EAIvBI,IAAI,EAAEP,SAAS,CAACQ,KAAV,CAAgBC,MAAM,CAACC,MAAP,CAAcC,YAAd,CAAhB,EAA6CT,WAA7C,CAAyD,eAAzD,EAA0EC,YAA1E,CAAuFQ,YAAY,CAACC,IAApG,CAJiB;EAKvBC,OAAO,EAAEb,SAAS,CAACc,IAAV,CAAeZ,WAAf,CAA2B,0CAA3B,CALc;EAMvBa,MAAM,EAAEf,SAAS,CAACgB,IAAV,CAAed,WAAf,CAA2B,sCAA3B,EAAmEC,YAAnE,CAAgF,IAAhF,CANe;EAOvBc,eAAe,EAAEjB,SAAS,CAACgB,IAAV,CAAed,WAAf,CAA2B,qCAA3B,EAAkEC,YAAlE,CAA+E,IAA/E,CAPM;EAQvBe,UAAU,EAAElB,SAAS,CAACmB,KAAV,CAAgB;IAC1Bf,KAAK,EAAEJ,SAAS,CAACK,MADS;IAE1Be,OAAO,EAAEpB,SAAS,CAACc,IAFO;IAG1BO,IAAI,EAAErB,SAAS,CAACK;GAHN,EAKTH,WALS,CAKG,wCALH,EAMTC,YANS,CAMI,EANJ,CARW;EAevBmB,SAAS,EAAEtB,SAAS,CAACC,MAAV,CACRC,WADQ,mJAQRC,YARQ,CAQK,EARL;AAfY;;;;"}
|
package/esm/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../src/styles.tsx"],"sourcesContent":["import styled from 'styled-components';\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.div<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\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`\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled.div`\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`\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.a<StyledActionLinkT>`\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)`\n margin-left: ${({ theme }) => theme.space.xxs};\n &:not(focus) {\n border: transparent;\n }\n`;\n"],"names":["StyledBannerContainer","styled","div","isOpen","isAnimating","height","handleAnimation","StyledInnerContainer","theme","colors","neutral","type","handleBorderColor","StyledIconContainer","space","xxs","xs","StyledTitle","fontSizes","label","fontWeights","semibold","StyledSubTitle","subTitle","regular","StyledActionLink","a","isBodyEmpty","hyperlink","brand","StyledCloseButton","DSButton"],"mappings":";;;;;;;IAKaA,qBAAqB,gBAAGC,MAAM,CAACC,GAAV;
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../src/styles.tsx"],"sourcesContent":["import styled from 'styled-components';\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.div<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\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`\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled.div`\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`\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.a<StyledActionLinkT>`\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)`\n margin-left: ${({ theme }) => theme.space.xxs};\n &:not(focus) {\n border: transparent;\n }\n`;\n"],"names":["StyledBannerContainer","styled","div","isOpen","isAnimating","height","handleAnimation","StyledInnerContainer","theme","colors","neutral","type","handleBorderColor","StyledIconContainer","space","xxs","xs","StyledTitle","fontSizes","label","fontWeights","semibold","StyledSubTitle","subTitle","regular","StyledActionLink","a","isBodyEmpty","hyperlink","brand","StyledCloseButton","DSButton"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bannerTypes.js","sources":["../../../src/utils/bannerTypes.tsx"],"sourcesContent":["export const BANNER_TYPES = {\n INFO: 'info',\n SUCCESS: 'success',\n WARNING: 'warning',\n DANGER: 'danger',\n} as const;\n"],"names":["BANNER_TYPES","INFO","SUCCESS","WARNING","DANGER"],"mappings":"IAAaA,YAAY,GAAG;
|
|
1
|
+
{"version":3,"file":"bannerTypes.js","sources":["../../../src/utils/bannerTypes.tsx"],"sourcesContent":["export const BANNER_TYPES = {\n INFO: 'info',\n SUCCESS: 'success',\n WARNING: 'warning',\n DANGER: 'danger',\n} as const;\n"],"names":["BANNER_TYPES","INFO","SUCCESS","WARNING","DANGER"],"mappings":"IAAaA,YAAY,GAAG;EAC1BC,IAAI,EAAE,MADoB;EAE1BC,OAAO,EAAE,SAFiB;EAG1BC,OAAO,EAAE,SAHiB;EAI1BC,MAAM,EAAE;AAJkB;;;;"}
|
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 { 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"],"names":["icons","success","info","danger","warning"],"mappings":";;;IAGaA,KAAK,GAAG;
|
|
1
|
+
{"version":3,"file":"icons.js","sources":["../../../src/utils/icons.tsx"],"sourcesContent":["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"],"names":["icons","success","info","danger","warning"],"mappings":";;;IAGaA,KAAK,GAAG;EACnBC,OAAO,eAAE,oBAAC,WAAD;IAAa,IAAI,EAAC,SAAlB;IAA4B,KAAK,EAAC,MAAlC;IAAyC,MAAM,EAAC;IADtC;EAEnBC,IAAI,eAAE,oBAAC,QAAD;IAAU,IAAI,EAAC,SAAf;IAAyB,KAAK,EAAC,MAA/B;IAAsC,MAAM,EAAC;IAFhC;EAGnBC,MAAM,eAAE,oBAAC,gBAAD;IAAkB,IAAI,EAAC,SAAvB;IAAiC,KAAK,EAAC,MAAvC;IAA8C,MAAM,EAAC;IAH1C;EAInBC,OAAO,eAAE,oBAAC,aAAD;IAAe,IAAI,EAAC,SAApB;IAA8B,KAAK,EAAC,MAApC;IAA2C,MAAM,EAAC;;AAJxC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styleHelpers.js","sources":["../../../src/utils/styleHelpers.ts"],"sourcesContent":["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"],"names":["slideIn","kfrm","slideOut","spanContainer","height","shrinkContainer","handleBorderColor","type","colors","BANNER_TYPES","SUCCESS","success","INFO","brand","WARNING","warning","DANGER","danger","handleAnimation","isAnimating","isOpen","css"],"mappings":";;;;;AAIA,IAAMA,OAAO,GAAGC,IAAH,mLAAb;AASA,IAAMC,QAAQ,GAAGD,IAAH,sPAAd;;AAcA,IAAME,aAAa,GAAG,SAAhBA,aAAgB,CAACC,MAAD;
|
|
1
|
+
{"version":3,"file":"styleHelpers.js","sources":["../../../src/utils/styleHelpers.ts"],"sourcesContent":["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"],"names":["slideIn","kfrm","slideOut","spanContainer","height","shrinkContainer","handleBorderColor","type","colors","BANNER_TYPES","SUCCESS","success","INFO","brand","WARNING","warning","DANGER","danger","handleAnimation","isAnimating","isOpen","css"],"mappings":";;;;;AAIA,IAAMA,OAAO,GAAGC,IAAH,mLAAb;AASA,IAAMC,QAAQ,GAAGD,IAAH,sPAAd;;AAcA,IAAME,aAAa,GAAG,SAAhBA,aAAgB,CAACC,MAAD;EAAA,OAAoBH,IAApB,6IAKRG,MALQ;AAAA,CAAtB;;AASA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACD,MAAD;EAAA,OAAoBH,IAApB,6IAEVG,MAFU;AAAA,CAAxB;;IASaE,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,IAAD,QAA8B;EAAA,IAArBC,MAAqB,QAArBA,MAAqB;;EAC7D,QAAQD,IAAR;IACE,KAAKE,YAAY,CAACC,OAAlB;MACE,OAAOF,MAAM,CAACG,OAAP,CAAe,GAAf,CAAP;;IACF,KAAKF,YAAY,CAACG,IAAlB;MACE,OAAOJ,MAAM,CAACK,KAAP,CAAa,GAAb,CAAP;;IACF,KAAKJ,YAAY,CAACK,OAAlB;MACE,OAAON,MAAM,CAACO,OAAP,CAAe,GAAf,CAAP;;IACF,KAAKN,YAAY,CAACO,MAAlB;MACE,OAAOR,MAAM,CAACS,MAAP,CAAc,GAAd,CAAP;;AAEL;IAEYC,eAAe,GAAG,SAAlBA,eAAkB,CAC7BC,WAD6B,EAE7BC,MAF6B,EAIE;EAAA,IAD/BhB,MAC+B,uEADP,IACO;;EAC/B,IAAIe,WAAJ,EAAiB;IACf,IAAIC,MAAJ,EAAY;MACV,OAAOC,GAAP,uHACejB,MAAM,GAAGD,aAAa,CAACC,MAAD,CAAhB,GAA2BJ,OADhD;KADF,MAIO;MACL,OAAOqB,GAAP,uHACejB,MAAM,GAAGC,eAAe,CAACD,MAAD,CAAlB,GAA6BF,QADlD;;;AAKL;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-banner",
|
|
3
|
-
"version": "1.61.
|
|
3
|
+
"version": "1.61.13",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Ellie Mae - Dim Sum - Banner",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
"build": "node ../../scripts/build/build.js"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@elliemae/ds-basic": "1.61.
|
|
20
|
-
"@elliemae/ds-icons": "1.61.
|
|
21
|
-
"@elliemae/ds-system": "1.61.
|
|
19
|
+
"@elliemae/ds-basic": "1.61.13",
|
|
20
|
+
"@elliemae/ds-icons": "1.61.13",
|
|
21
|
+
"@elliemae/ds-system": "1.61.13",
|
|
22
22
|
"react-desc": "^4.1.2"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|