@elliemae/ds-banner 3.0.0-next.4 → 3.0.0-next.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSBanner.js.map +1 -1
- package/dist/cjs/defaultProps.js.map +1 -1
- package/dist/cjs/propTypes.js.map +1 -1
- package/dist/cjs/styles.js.map +1 -1
- package/dist/cjs/utils/bannerTypes.js.map +1 -1
- package/dist/cjs/utils/icons.js.map +1 -1
- package/dist/cjs/utils/styleHelpers.js.map +1 -1
- package/dist/esm/DSBanner.js.map +1 -1
- package/dist/esm/defaultProps.js.map +1 -1
- package/dist/esm/propTypes.js.map +1 -1
- package/dist/esm/styles.js.map +1 -1
- package/dist/esm/utils/bannerTypes.js.map +1 -1
- package/dist/esm/utils/icons.js.map +1 -1
- package/dist/esm/utils/styleHelpers.js.map +1 -1
- package/package.json +5 -5
package/dist/cjs/DSBanner.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSBanner.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useLayoutEffect, 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 [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n const ownerState = { type };\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 data-testid=\"ds-banner-container\"\n {...containerProps}\n ownerState={ownerState}\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 { DSBanner, DSBannerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAsE;AACtE,sBAAuB;AACvB,wBAAyB;AAEzB,mBAAsB;AACtB,uBAA0B;AAC1B,0BAA6B;AAC7B,oBAQO;AAEP,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC+B;AAC/B,QAAM,oBAAoB,yBAA8B;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAsE;AACtE,sBAAuB;AACvB,wBAAyB;AAEzB,mBAAsB;AACtB,uBAA0B;AAC1B,0BAA6B;AAC7B,oBAQO;AAEP,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC+B;AAC/B,QAAM,oBAAoB,yBAA8B,IAAI;AAC5D,QAAM,UAAU,yBAAiC,IAAI;AACrD,QAAM,CAAC,SAAS,cAAc,2BAAkB,MAAM;AACtD,QAAM,CAAC,aAAa,kBAAkB,2BAAkB,KAAK;AAC7D,QAAM,CAAC,eAAe,oBAAoB,2BAA6B,MAAS;AAEhF,QAAM,aAAa,EAAE,KAAK;AAE1B,uBAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,iBAAiB,MAAM;AACvC,YAAI,kBAAkB,SAAS;AAC7B,2BAAiB,CAAC;AAClB,qBAAW,MAAM;AACf,8BAAkB,QAAQ,MAAM;AAAA,UAClC,GAAG,GAAG;AAAA,QACR;AAAA,MACF;AACA,gBAAU,QAAQ,cAAc,MAAM;AACpC,YAAI,QAAQ,SAAS;AACnB,kBAAQ,QAAQ,MAAM;AAAA,QACxB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,oCAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe,IAAI;AAAA;AAChD,qBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,aAAa,8BAAY,MAAM;AACnC,qBAAiB,MAAS;AAAA,EAC5B,GAAG,CAAC,CAAC;AACL,QAAM,kBAAkB,8BAAY,CAAC,MAA2B;AAC9D,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,UAAI,QAAQ;AAAS,gBAAQ,QAAQ,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,eAAe,CAAC;AAAQ,WAAO;AAEpC,SACE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM,WAAW,MAAM;AAAA,IACvC,eAAY;AAAA,KACR,iBANL;AAAA,IAOC;AAAA,MAEA,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,eAAY;AAAA,IACZ,MAAK;AAAA,IACL,UAAU;AAAA,IACV,QAAQ;AAAA,KAER,mDAAC;AAAA,IAAoB,eAAY;AAAA,KAAkB,mBAAM,KAAM,GAC/D,mDAAC,iCAAa,KAAM,GACpB,mDAAC,oCACC,mDAAC,cAAM,IAAK,GACX,cACC,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,SAAS,WAAW;AAAA,IACpB,MAAM,WAAW;AAAA,IACjB,KAAK;AAAA,IACL,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,KAEZ,WAAW,KACd,CAEJ,GAEC,kBACC,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,YAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAW;AAAA,IACX,MAAM,mDAAC;AAAA,MAAO,OAAM;AAAA,MAAO,QAAO;AAAA,KAAO;AAAA,GAC3C,IAEA,mDAAC,YAAK,CAEV,CACF;AAEJ;AAEA,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,MAAM,qBAAqB,gCAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/defaultProps.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAA6B;AAEtB,MAAM,eAAe;AAAA,EAC1B,gBAAgB;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAA6B;AAEtB,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,gCAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,YAAY,EAAE,OAAO,IAAI,SAAS,MAAM,MAAM,MAAM,GAAG;AACzD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAC1B,yBAA6B;AAEtB,MAAM,YAAY;AAAA,EACvB,gBAAgB,4BAAU,OAAO,YAAY,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAC1B,yBAA6B;AAEtB,MAAM,YAAY;AAAA,EACvB,gBAAgB,4BAAU,OAAO,YAAY,kDAAkD,EAAE,aAAa,CAAC,CAAC;AAAA,EAChH,OAAO,4BAAU,OAAO,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EACrE,MAAM,4BAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC3E,MAAM,4BAAU,MAAM,OAAO,OAAO,+BAAY,CAAC,EAAE,YAAY,eAAe,EAAE,aAAa,gCAAa,IAAI;AAAA,EAC9G,SAAS,4BAAU,KAAK,YAAY,0CAA0C;AAAA,EAC9E,QAAQ,4BAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EAC5F,iBAAiB,4BAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,IAAI;AAAA,EACpG,YAAY,4BAAU,MAAM;AAAA,IAC1B,OAAO,4BAAU;AAAA,IACjB,SAAS,4BAAU;AAAA,IACnB,MAAM,4BAAU;AAAA,EAClB,CAAC,EACE,YAAY,wCAAwC,EACpD,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,4BAAU,OAClB,YACC;AAAA;AAAA;AAAA;AAAA,KAKF,EACC,aAAa,CAAC,CAAC;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport DSButton from '@elliemae/ds-button';\nimport type { StyledActionLinkT, StyledBannerContainerT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledBannerContainer = styled<StyledBannerContainerT>('div', { name: 'DS-Banner', slot: 'root' })`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n\nexport const StyledInnerContainer = styled<StyledInnerContainerT>('div', {\n name: 'DS-Banner',\n slot: 'innerContainer',\n})`\n padding-right: 6px;\n display: grid;\n align-items: center;\n min-height: 41px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n &:focus {\n position: relative;\n &:after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n border-radius: 2px;\n width: calc(100%);\n border: 2px solid #1e79c2;\n height: calc(100% + 4px);\n }\n }\n grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;\n`;\n\nexport const StyledIconContainer = styled('div', { name: 'DS-Banner', slot: 'iconContainer' })`\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled('div', { name: 'DS-Banner', slot: 'title' })`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledSubTitle = styled('div', { name: 'DS-Banner', slot: 'subtitle' })`\n width: 100%;\n margin-left: ${({ theme }) => theme.space.xs};\n font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledActionLink = styled<StyledActionLinkT>('a', { name: 'DS-Banner', slot: 'action' })`\n margin-left: ${({ theme, isBodyEmpty }) => (isBodyEmpty ? theme.space.xs : 0)};\n white-space: nowrap;\n text-decoration: none;\n line-height: 1.1;\n font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledCloseButton = styled(DSButton, { name: 'DS-Banner', slot: 'closeButton' })`\n margin-left: ${({ theme }) => theme.space.xxs};\n &:not(focus) {\n border: transparent;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAqB;AAErB,0BAAmD;AAE5C,MAAM,wBAAwB,6BAA+B,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAqB;AAErB,0BAAmD;AAE5C,MAAM,wBAAwB,6BAA+B,OAAO,EAAE,MAAM,aAAa,MAAM,OAAO,CAAC;AAAA;AAAA,YAElG,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,yCAAgB,aAAa,QAAQ,MAAM;AAAA;AAG7E,MAAM,uBAAuB,6BAA8B,OAAO;AAAA,EACvE,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMqB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,2CAAkB,MAAM,KAAK;AAAA,IAC3E,CAAC,EAAE,aAAa,aAAa,yCAAgB,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB7D,MAAM,sBAAsB,6BAAO,OAAO,EAAE,MAAM,aAAa,MAAM,gBAAgB,CAAC;AAAA,kBAC3E,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGrC,MAAM,cAAc,6BAAO,OAAO,EAAE,MAAM,aAAa,MAAM,QAAQ,CAAC;AAAA,WAClE,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAAiB,6BAAO,OAAO,EAAE,MAAM,aAAa,MAAM,WAAW,CAAC;AAAA;AAAA,iBAElE,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,YAAY,MAAM,UAAU,SAAS;AAAA,iBACtC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,mBAAmB,6BAA0B,KAAK,EAAE,MAAM,aAAa,MAAM,SAAS,CAAC;AAAA,iBACnF,CAAC,EAAE,OAAO,kBAAmB,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA,iBACvC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,oBAAoB,6BAAO,0BAAU,EAAE,MAAM,aAAa,MAAM,cAAc,CAAC;AAAA,iBAC3E,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/bannerTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const BANNER_TYPES = {\n INFO: 'info',\n SUCCESS: 'success',\n WARNING: 'warning',\n DANGER: 'danger',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/icons.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAAuE;AAEhE,MAAM,QAAQ;AAAA,EACnB,SAAS,mDAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAAuE;AAEhE,MAAM,QAAQ;AAAA,EACnB,SAAS,mDAAC;AAAA,IAAY,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO;AAAA,EAChE,MAAM,mDAAC;AAAA,IAAS,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO;AAAA,EAC1D,QAAQ,mDAAC;AAAA,IAAiB,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO;AAAA,EACpE,SAAS,mDAAC;AAAA,IAAc,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO;AACpE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styleHelpers.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0B;AAE1B,yBAA6B;AAE7B,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B;AAAA;AAAA;AAId,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAE9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAAC,MAAM,EAAE,aAAqB;AAC7D,UAAQ;AAAA,SACD,gCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,gCAAa;AAChB,aAAO,OAAO,MAAM;AAAA,SACjB,gCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,gCAAa;AAChB,aAAO,OAAO,OAAO;AAAA;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0B;AAE1B,yBAA6B;AAE7B,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B;AAAA;AAAA;AAId,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAE9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAAC,MAAM,EAAE,aAAqB;AAC7D,UAAQ;AAAA,SACD,gCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,gCAAa;AAChB,aAAO,OAAO,MAAM;AAAA,SACjB,gCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,gCAAa;AAChB,aAAO,OAAO,OAAO;AAAA;AAE3B;AAEO,MAAM,kBAAkB,CAC7B,aACA,QACA,SAAwB,SACO;AAC/B,MAAI,aAAa;AACf,QAAI,QAAQ;AACV,aAAO;AAAA,qBACQ,SAAS,cAAc,MAAM,IAAI;AAAA;AAAA,IAElD,OAAO;AACL,aAAO;AAAA,qBACQ,SAAS,gBAAgB,MAAM,IAAI;AAAA;AAAA,IAEpD;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSBanner.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSBanner.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useLayoutEffect, 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 [alertTabIndex, setAlertTabIndex] = useState<number | undefined>(undefined);\n\n const ownerState = { type };\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 data-testid=\"ds-banner-container\"\n {...containerProps}\n ownerState={ownerState}\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 { DSBanner, DSBannerWithSchema };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC+B;AAC/B,QAAM,oBAAoB,OAA8B;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC+B;AAC/B,QAAM,oBAAoB,OAA8B,IAAI;AAC5D,QAAM,UAAU,OAAiC,IAAI;AACrD,QAAM,CAAC,SAAS,cAAc,SAAkB,MAAM;AACtD,QAAM,CAAC,aAAa,kBAAkB,SAAkB,KAAK;AAC7D,QAAM,CAAC,eAAe,oBAAoB,SAA6B,MAAS;AAEhF,QAAM,aAAa,EAAE,KAAK;AAE1B,SAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,iBAAiB,MAAM;AACvC,YAAI,kBAAkB,SAAS;AAC7B,2BAAiB,CAAC;AAClB,qBAAW,MAAM;AACf,8BAAkB,QAAQ,MAAM;AAAA,UAClC,GAAG,GAAG;AAAA,QACR;AAAA,MACF;AACA,gBAAU,QAAQ,cAAc,MAAM;AACpC,YAAI,QAAQ,SAAS;AACnB,kBAAQ,QAAQ,MAAM;AAAA,QACxB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,kBAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe,IAAI;AAAA;AAChD,qBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,aAAa,YAAY,MAAM;AACnC,qBAAiB,MAAS;AAAA,EAC5B,GAAG,CAAC,CAAC;AACL,QAAM,kBAAkB,YAAY,CAAC,MAA2B;AAC9D,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,UAAI,QAAQ;AAAS,gBAAQ,QAAQ,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,eAAe,CAAC;AAAQ,WAAO;AAEpC,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM,WAAW,MAAM;AAAA,IACvC,eAAY;AAAA,KACR,iBANL;AAAA,IAOC;AAAA,MAEA,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,eAAY;AAAA,IACZ,MAAK;AAAA,IACL,UAAU;AAAA,IACV,QAAQ;AAAA,KAER,qCAAC;AAAA,IAAoB,eAAY;AAAA,KAAkB,MAAM,KAAM,GAC/D,qCAAC,mBAAa,KAAM,GACpB,qCAAC,sBACC,qCAAC,cAAM,IAAK,GACX,cACC,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,SAAS,WAAW;AAAA,IACpB,MAAM,WAAW;AAAA,IACjB,KAAK;AAAA,IACL,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,KAEZ,WAAW,KACd,CAEJ,GAEC,kBACC,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,YAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAW;AAAA,IACX,MAAM,qCAAC;AAAA,MAAO,OAAM;AAAA,MAAO,QAAO;AAAA,KAAO;AAAA,GAC3C,IAEA,qCAAC,YAAK,CAEV,CACF;AAEJ;AAEA,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEO,MAAM,eAAe;AAAA,EAC1B,gBAAgB;AAAA,
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEO,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,aAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,YAAY,EAAE,OAAO,IAAI,SAAS,MAAM,MAAM,MAAM,GAAG;AACzD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\nimport { BANNER_TYPES } from './utils/bannerTypes';\n\nexport const propTypes = {\n containerProps: PropTypes.object.description('Set of Properties attached to the main container').defaultValue({}),\n label: PropTypes.string.description('banner s label').defaultValue(''),\n body: PropTypes.string.description('banner s body content').defaultValue(''),\n type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('banner s type').defaultValue(BANNER_TYPES.INFO),\n onClose: PropTypes.func.description('function executed when the banner closes'),\n isOpen: PropTypes.bool.description('whether the banner is open or closed').defaultValue(true),\n showCloseButton: PropTypes.bool.description('whether to show close button or not').defaultValue(true),\n actionLink: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func,\n href: PropTypes.string,\n })\n .description('Properties of the ActionLink component')\n .defaultValue({}),\n actionRef: PropTypes.object\n .description(\n `\n Reference to use actions:\n - focusOnLink: function to focus the banner\n - focusOnWrapper: function to focus the link\n `,\n )\n .defaultValue({}),\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,YAAY;AAAA,EACvB,gBAAgB,UAAU,OAAO,YAAY,
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,YAAY;AAAA,EACvB,gBAAgB,UAAU,OAAO,YAAY,kDAAkD,EAAE,aAAa,CAAC,CAAC;AAAA,EAChH,OAAO,UAAU,OAAO,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EACrE,MAAM,UAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC3E,MAAM,UAAU,MAAM,OAAO,OAAO,YAAY,CAAC,EAAE,YAAY,eAAe,EAAE,aAAa,aAAa,IAAI;AAAA,EAC9G,SAAS,UAAU,KAAK,YAAY,0CAA0C;AAAA,EAC9E,QAAQ,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EAC5F,iBAAiB,UAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,IAAI;AAAA,EACpG,YAAY,UAAU,MAAM;AAAA,IAC1B,OAAO,UAAU;AAAA,IACjB,SAAS,UAAU;AAAA,IACnB,MAAM,UAAU;AAAA,EAClB,CAAC,EACE,YAAY,wCAAwC,EACpD,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,UAAU,OAClB,YACC;AAAA;AAAA;AAAA;AAAA,KAKF,EACC,aAAa,CAAC,CAAC;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport DSButton from '@elliemae/ds-button';\nimport type { StyledActionLinkT, StyledBannerContainerT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledBannerContainer = styled<StyledBannerContainerT>('div', { name: 'DS-Banner', slot: 'root' })`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n\nexport const StyledInnerContainer = styled<StyledInnerContainerT>('div', {\n name: 'DS-Banner',\n slot: 'innerContainer',\n})`\n padding-right: 6px;\n display: grid;\n align-items: center;\n min-height: 41px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n &:focus {\n position: relative;\n &:after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n border-radius: 2px;\n width: calc(100%);\n border: 2px solid #1e79c2;\n height: calc(100% + 4px);\n }\n }\n grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;\n`;\n\nexport const StyledIconContainer = styled('div', { name: 'DS-Banner', slot: 'iconContainer' })`\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled('div', { name: 'DS-Banner', slot: 'title' })`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledSubTitle = styled('div', { name: 'DS-Banner', slot: 'subtitle' })`\n width: 100%;\n margin-left: ${({ theme }) => theme.space.xs};\n font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledActionLink = styled<StyledActionLinkT>('a', { name: 'DS-Banner', slot: 'action' })`\n margin-left: ${({ theme, isBodyEmpty }) => (isBodyEmpty ? theme.space.xs : 0)};\n white-space: nowrap;\n text-decoration: none;\n line-height: 1.1;\n font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledCloseButton = styled(DSButton, { name: 'DS-Banner', slot: 'closeButton' })`\n margin-left: ${({ theme }) => theme.space.xxs};\n &:not(focus) {\n border: transparent;\n }\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAEA;AAEO,MAAM,wBAAwB,OAA+B,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA;AAAA,
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEA;AAEO,MAAM,wBAAwB,OAA+B,OAAO,EAAE,MAAM,aAAa,MAAM,OAAO,CAAC;AAAA;AAAA,YAElG,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,gBAAgB,aAAa,QAAQ,MAAM;AAAA;AAG7E,MAAM,uBAAuB,OAA8B,OAAO;AAAA,EACvE,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMqB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,kBAAkB,MAAM,KAAK;AAAA,IAC3E,CAAC,EAAE,aAAa,aAAa,gBAAgB,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB7D,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM,gBAAgB,CAAC;AAAA,kBAC3E,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGrC,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM,QAAQ,CAAC;AAAA,WAClE,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,aAAa,MAAM,WAAW,CAAC;AAAA;AAAA,iBAElE,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,YAAY,MAAM,UAAU,SAAS;AAAA,iBACtC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,mBAAmB,OAA0B,KAAK,EAAE,MAAM,aAAa,MAAM,SAAS,CAAC;AAAA,iBACnF,CAAC,EAAE,OAAO,kBAAmB,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA,iBACvC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,oBAAoB,OAAO,UAAU,EAAE,MAAM,aAAa,MAAM,cAAc,CAAC;AAAA,iBAC3E,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/bannerTypes.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const BANNER_TYPES = {\n INFO: 'info',\n SUCCESS: 'success',\n WARNING: 'warning',\n DANGER: 'danger',\n} as const;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/icons.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from '@elliemae/ds-icons';\n\nexport const icons = {\n success: <SuccessFill fill=\"#207e56\" width=\"20px\" height=\"20px\" />,\n info: <InfoFill fill=\"#1e79c2\" width=\"20px\" height=\"20px\" />,\n danger: <AlertsDetailFill fill=\"#c64252\" width=\"20px\" height=\"20px\" />,\n warning: <WarningSquare fill=\"#d17a00\" width=\"20px\" height=\"20px\" />,\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,QAAQ;AAAA,EACnB,SAAS,qCAAC
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,QAAQ;AAAA,EACnB,SAAS,qCAAC;AAAA,IAAY,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO;AAAA,EAChE,MAAM,qCAAC;AAAA,IAAS,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO;AAAA,EAC1D,QAAQ,qCAAC;AAAA,IAAiB,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO;AAAA,EACpE,SAAS,qCAAC;AAAA,IAAc,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO;AACpE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport { BANNER_TYPES } from './bannerTypes';\n\nconst slideIn = kfrm`\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n 100% {\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst slideOut = kfrm`\n 0% {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n 60% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n transform: translate3d(0, -100%, 0);\n }\n`;\n\nconst spanContainer = (height: number) => kfrm`\n 0% {\n height: 0px;\n }\n 100% {\n height: ${height}px;\n }\n`;\n\nconst shrinkContainer = (height: number) => kfrm`\n 0% {\n height: ${height}px;\n }\n 100% {\n height: 0px;\n }\n`;\n\nexport const handleBorderColor = (type, { colors }): string => {\n switch (type) {\n case BANNER_TYPES.SUCCESS:\n return colors.success[900];\n case BANNER_TYPES.INFO:\n return colors.brand[600];\n case BANNER_TYPES.WARNING:\n return colors.warning[900];\n case BANNER_TYPES.DANGER:\n return colors.danger[900];\n }\n};\n\nexport const handleAnimation = (\n isAnimating: boolean,\n isOpen: boolean,\n height: number | null = null,\n): FlattenSimpleInterpolation => {\n if (isAnimating) {\n if (isOpen) {\n return css`\n animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;\n `;\n } else {\n return css`\n animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;\n `;\n }\n }\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEA;AAEA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B;AAAA;AAAA;AAId,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAE9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAAC,MAAM,EAAE,aAAqB;AAC7D,UAAQ;AAAA,SACD,aAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,aAAa;AAChB,aAAO,OAAO,MAAM;AAAA,SACjB,aAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,aAAa;AAChB,aAAO,OAAO,OAAO;AAAA;
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA;AAEA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B;AAAA;AAAA;AAId,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAE9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAAC,MAAM,EAAE,aAAqB;AAC7D,UAAQ;AAAA,SACD,aAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,aAAa;AAChB,aAAO,OAAO,MAAM;AAAA,SACjB,aAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,aAAa;AAChB,aAAO,OAAO,OAAO;AAAA;AAE3B;AAEO,MAAM,kBAAkB,CAC7B,aACA,QACA,SAAwB,SACO;AAC/B,MAAI,aAAa;AACf,QAAI,QAAQ;AACV,aAAO;AAAA,qBACQ,SAAS,cAAc,MAAM,IAAI;AAAA;AAAA,IAElD,OAAO;AACL,aAAO;AAAA,qBACQ,SAAS,gBAAgB,MAAM,IAAI;AAAA;AAAA,IAEpD;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-banner",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.40",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Banner",
|
|
6
6
|
"files": [
|
|
@@ -63,13 +63,13 @@
|
|
|
63
63
|
"indent": 4
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@elliemae/ds-button": "3.0.0-next.
|
|
67
|
-
"@elliemae/ds-icons": "3.0.0-next.
|
|
68
|
-
"@elliemae/ds-system": "3.0.0-next.
|
|
66
|
+
"@elliemae/ds-button": "3.0.0-next.40",
|
|
67
|
+
"@elliemae/ds-icons": "3.0.0-next.40",
|
|
68
|
+
"@elliemae/ds-system": "3.0.0-next.40",
|
|
69
69
|
"react-desc": "~4.1.3"
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
|
-
"@testing-library/jest-dom": "~5.
|
|
72
|
+
"@testing-library/jest-dom": "~5.16.2",
|
|
73
73
|
"@testing-library/react": "~12.1.2",
|
|
74
74
|
"@testing-library/user-event": "~13.5.0",
|
|
75
75
|
"styled-components": "~5.3.3"
|