@elliemae/ds-mobile 3.0.0-next.47 → 3.0.0-next.48
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/MobileBanner/MobileBanner.js +8 -8
- package/dist/cjs/MobileBanner/MobileBanner.js.map +2 -2
- package/dist/cjs/MobileBanner/styles.js +18 -11
- package/dist/cjs/MobileBanner/styles.js.map +2 -2
- package/dist/esm/MobileBanner/MobileBanner.js +9 -8
- package/dist/esm/MobileBanner/MobileBanner.js.map +2 -2
- package/dist/esm/MobileBanner/styles.js +18 -11
- package/dist/esm/MobileBanner/styles.js.map +2 -2
- package/package.json +15 -16
|
@@ -103,21 +103,21 @@ const DSMobileBanner = ({
|
|
|
103
103
|
"data-testid": "ds-mobile-banner-icon"
|
|
104
104
|
}, import_icons.icons[type]), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContent, {
|
|
105
105
|
showCloseButton
|
|
106
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTitle, null, label), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledSubTitle, null, body, actionLinkLabel && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledActionLink, {
|
|
106
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTitle, null, label), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledSubTitle, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledSubTitleText, null, body), actionLinkLabel && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledActionLink, {
|
|
107
107
|
href: actionLinkHref,
|
|
108
108
|
"data-testid": "ds-mobile-banner-link",
|
|
109
109
|
onClick: actionLinkOnClick
|
|
110
110
|
}, actionLinkLabel))), showCloseButton && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledCloseButtonContainer, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledCloseButton, {
|
|
111
111
|
"data-testid": "ds-mobile-banner-close-button",
|
|
112
|
-
buttonType: "
|
|
112
|
+
buttonType: "icon",
|
|
113
113
|
onClick: closeButtonOnClick,
|
|
114
114
|
"aria-label": "Close Banner",
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
}))));
|
|
115
|
+
innerRef: closeRef,
|
|
116
|
+
size: "s"
|
|
117
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseX, {
|
|
118
|
+
width: "12px",
|
|
119
|
+
height: "12px"
|
|
120
|
+
})))));
|
|
121
121
|
};
|
|
122
122
|
DSMobileBanner.defaultProps = import_defaultProps.defaultProps;
|
|
123
123
|
DSMobileBanner.propTypes = import_propTypes.propTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/MobileBanner/MobileBanner.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { describe } from 'react-desc';\nimport type { MobileBannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledContent,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n StyledCloseButtonContainer,\n} from './styles';\n\nconst DSMobileBanner = ({\n type,\n isOpen,\n closeButtonOnClick,\n label,\n body,\n actionLinkLabel,\n actionLinkHref,\n actionLinkOnClick,\n showCloseButton,\n containerProps,\n focusOnOpen,\n}: MobileBannerPropsT): JSX.Element => {\n const innerContainerRef = useRef<HTMLDivElement | null>(null);\n const closeRef = useRef<HTMLDivElement | null>(null);\n const [current, setCurrent] = useState<boolean>(isOpen);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState<number>(0);\n\n useEffect(() => {\n if (innerContainerRef.current) {\n setHeight(innerContainerRef.current.offsetHeight);\n }\n }, [isAnimating, isOpen]);\n\n useEffect(() => {\n if (focusOnOpen && closeRef.current && isOpen) {\n closeRef.current?.focus?.();\n }\n }, [focusOnOpen, isOpen]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n type={type}\n isOpen={isOpen}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n height={height}\n {...containerProps}\n data-testid=\"ds-mobile-banner-container\"\n role=\"alert\"\n >\n <StyledInnerContainer type={type} isOpen={isOpen} ref={innerContainerRef} isAnimating={isAnimating}>\n <StyledIconContainer data-testid=\"ds-mobile-banner-icon\">{icons[type]}</StyledIconContainer>\n <StyledContent showCloseButton={showCloseButton}>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n {body}
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoE;AACpE,sBAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';\nimport { CloseX } from '@elliemae/ds-icons';\n\nimport { describe } from 'react-desc';\nimport type { MobileBannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledContent,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n StyledSubTitleText,\n StyledCloseButtonContainer,\n} from './styles';\n\nconst DSMobileBanner = ({\n type,\n isOpen,\n closeButtonOnClick,\n label,\n body,\n actionLinkLabel,\n actionLinkHref,\n actionLinkOnClick,\n showCloseButton,\n containerProps,\n focusOnOpen,\n}: MobileBannerPropsT): JSX.Element => {\n const innerContainerRef = useRef<HTMLDivElement | null>(null);\n const closeRef = useRef<HTMLDivElement | null>(null);\n const [current, setCurrent] = useState<boolean>(isOpen);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState<number>(0);\n\n useEffect(() => {\n if (innerContainerRef.current) {\n setHeight(innerContainerRef.current.offsetHeight);\n }\n }, [isAnimating, isOpen]);\n\n useEffect(() => {\n if (focusOnOpen && closeRef.current && isOpen) {\n closeRef.current?.focus?.();\n }\n }, [focusOnOpen, isOpen]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n type={type}\n isOpen={isOpen}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n height={height}\n {...containerProps}\n data-testid=\"ds-mobile-banner-container\"\n role=\"alert\"\n >\n <StyledInnerContainer type={type} isOpen={isOpen} ref={innerContainerRef} isAnimating={isAnimating}>\n <StyledIconContainer data-testid=\"ds-mobile-banner-icon\">{icons[type]}</StyledIconContainer>\n <StyledContent showCloseButton={showCloseButton}>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n <StyledSubTitleText>{body}</StyledSubTitleText>\n {actionLinkLabel && (\n <StyledActionLink href={actionLinkHref} data-testid=\"ds-mobile-banner-link\" onClick={actionLinkOnClick}>\n {actionLinkLabel}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n </StyledContent>\n {showCloseButton && (\n <StyledCloseButtonContainer>\n <StyledCloseButton\n data-testid=\"ds-mobile-banner-close-button\"\n buttonType=\"icon\"\n onClick={closeButtonOnClick}\n aria-label=\"Close Banner\"\n innerRef={closeRef}\n size=\"s\"\n >\n <CloseX width=\"12px\" height=\"12px\" />\n </StyledCloseButton>\n </StyledCloseButtonContainer>\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSMobileBanner.defaultProps = defaultProps;\nDSMobileBanner.propTypes = propTypes;\nconst DSMobileBannerWithSchema = describe(DSMobileBanner);\nDSMobileBannerWithSchema.propTypes = propTypes;\n\nexport { DSMobileBanner, DSMobileBannerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoE;AACpE,sBAAuB;AAEvB,wBAAyB;AAEzB,mBAAsB;AACtB,uBAA0B;AAC1B,0BAA6B;AAC7B,oBAWO;AAEP,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACqC;AACrC,QAAM,oBAAoB,yBAA8B,IAAI;AAC5D,QAAM,WAAW,yBAA8B,IAAI;AACnD,QAAM,CAAC,SAAS,cAAc,2BAAkB,MAAM;AACtD,QAAM,CAAC,aAAa,kBAAkB,2BAAkB,KAAK;AAC7D,QAAM,CAAC,QAAQ,aAAa,2BAAiB,CAAC;AAE9C,8BAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,gBAAU,kBAAkB,QAAQ,YAAY;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,8BAAU,MAAM;AACd,QAAI,eAAe,SAAS,WAAW,QAAQ;AAC7C,eAAS,SAAS,QAAQ;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,oCAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe,IAAI;AAAA;AAChD,qBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,MAAI,CAAC,eAAe,CAAC;AAAQ,WAAO;AAEpC,SACE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM,WAAW,MAAM;AAAA,IACvC;AAAA,KACI,iBANL;AAAA,IAOC,eAAY;AAAA,IACZ,MAAK;AAAA,MAEL,mDAAC;AAAA,IAAqB;AAAA,IAAY;AAAA,IAAgB,KAAK;AAAA,IAAmB;AAAA,KACxE,mDAAC;AAAA,IAAoB,eAAY;AAAA,KAAyB,mBAAM,KAAM,GACtE,mDAAC;AAAA,IAAc;AAAA,KACb,mDAAC,iCAAa,KAAM,GACpB,mDAAC,oCACC,mDAAC,wCAAoB,IAAK,GACzB,mBACC,mDAAC;AAAA,IAAiB,MAAM;AAAA,IAAgB,eAAY;AAAA,IAAwB,SAAS;AAAA,KAClF,eACH,CAEJ,CACF,GACC,mBACC,mDAAC,gDACC,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,YAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAW;AAAA,IACX,UAAU;AAAA,IACV,MAAK;AAAA,KAEL,mDAAC;AAAA,IAAO,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO,CACrC,CACF,CAEJ,CACF;AAEJ;AAEA,eAAe,eAAe;AAC9B,eAAe,YAAY;AAC3B,MAAM,2BAA2B,gCAAS,cAAc;AACxD,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,6 +28,7 @@ __export(styles_exports, {
|
|
|
28
28
|
StyledIconContainer: () => StyledIconContainer,
|
|
29
29
|
StyledInnerContainer: () => StyledInnerContainer,
|
|
30
30
|
StyledSubTitle: () => StyledSubTitle,
|
|
31
|
+
StyledSubTitleText: () => StyledSubTitleText,
|
|
31
32
|
StyledTextContent: () => StyledTextContent,
|
|
32
33
|
StyledTitle: () => StyledTitle
|
|
33
34
|
});
|
|
@@ -35,16 +36,17 @@ module.exports = __toCommonJS(styles_exports);
|
|
|
35
36
|
var React = __toESM(require("react"));
|
|
36
37
|
var import_styled_components = __toESM(require("styled-components"));
|
|
37
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
|
-
var import_ds_button =
|
|
39
|
+
var import_ds_button = require("@elliemae/ds-button");
|
|
39
40
|
var import_styleHelpers = require("./utils/styleHelpers");
|
|
40
41
|
const StyledInnerContainer = import_styled_components.default.div`
|
|
41
42
|
display: flex;
|
|
42
|
-
min-height:
|
|
43
|
+
min-height: 60px;
|
|
43
44
|
width: 100%;
|
|
44
45
|
background-color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
45
46
|
border-bottom: 4px solid ${({ type, theme }) => (0, import_styleHelpers.handleBorderColor)(type, theme)};
|
|
46
47
|
transform: translateY(${({ isOpen }) => isOpen ? "0" : "-100%"});
|
|
47
48
|
${({ isAnimating, isOpen }) => (0, import_styleHelpers.handleAnimation)(isAnimating, isOpen)};
|
|
49
|
+
padding: 8px 8px 8px 16px;
|
|
48
50
|
`;
|
|
49
51
|
const StyledTextContent = import_styled_components.default.div`
|
|
50
52
|
width: 100%;
|
|
@@ -53,7 +55,7 @@ const StyledTitle = import_styled_components.default.div`
|
|
|
53
55
|
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
54
56
|
font-size: ${({ theme }) => (0, import_ds_system.toMobile)(theme.fontSizes.title[700])};
|
|
55
57
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
56
|
-
margin-bottom: ${({ theme }) => theme.space.
|
|
58
|
+
margin-bottom: ${({ theme }) => theme.space.xxxs};
|
|
57
59
|
@media not all and (min-resolution: 0.001dpcm) {
|
|
58
60
|
@media {
|
|
59
61
|
-webkit-font-smoothing: subpixel-antialiased; // fix safari bold render
|
|
@@ -66,28 +68,35 @@ const StyledTitle = import_styled_components.default.div`
|
|
|
66
68
|
}
|
|
67
69
|
`;
|
|
68
70
|
const StyledSubTitle = import_styled_components.default.div`
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-wrap: wrap;
|
|
73
|
+
justify-content: flex-start;
|
|
74
|
+
|
|
69
75
|
font-size: ${({ theme }) => (0, import_ds_system.toMobile)(theme.fontSizes.title[600])};
|
|
70
76
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
77
|
+
|
|
78
|
+
& > * {
|
|
79
|
+
margin-top: 4px;
|
|
80
|
+
}
|
|
71
81
|
`;
|
|
72
82
|
const StyledIconContainer = import_styled_components.default.div`
|
|
73
|
-
margin-top: 10px;
|
|
74
83
|
margin-right: ${({ theme }) => theme.space.xxs};
|
|
75
|
-
margin-left: ${({ theme }) => theme.space.xs};
|
|
76
84
|
`;
|
|
77
85
|
const StyledContent = import_styled_components.default.div`
|
|
78
86
|
width: 100%;
|
|
79
87
|
display: flex;
|
|
80
88
|
flex-direction: column;
|
|
81
|
-
margin: ${({ theme }) => theme.space.xxs2} 0;
|
|
82
89
|
margin-right: ${({ showCloseButton }) => !showCloseButton ? "28px" : "0"};
|
|
83
90
|
`;
|
|
84
91
|
const StyledCloseButtonContainer = import_styled_components.default.div`
|
|
85
92
|
display: flex;
|
|
86
93
|
align-items: flex-start;
|
|
87
|
-
margin-top: 6px;
|
|
88
|
-
margin-right: 6px;
|
|
89
94
|
`;
|
|
90
|
-
const
|
|
95
|
+
const StyledSubTitleText = import_styled_components.default.span`
|
|
96
|
+
margin-right: 16px;
|
|
97
|
+
line-height: 1.1;
|
|
98
|
+
`;
|
|
99
|
+
const StyledCloseButton = (0, import_styled_components.default)(import_ds_button.DSButtonV2)`
|
|
91
100
|
position: relative;
|
|
92
101
|
&:focus {
|
|
93
102
|
&:after {
|
|
@@ -106,8 +115,6 @@ const StyledCloseButton = (0, import_styled_components.default)(import_ds_button
|
|
|
106
115
|
`;
|
|
107
116
|
const StyledActionLink = import_styled_components.default.a`
|
|
108
117
|
text-decoration: none;
|
|
109
|
-
float: right;
|
|
110
|
-
margin-left: ${({ theme }) => theme.space.xs};
|
|
111
118
|
line-height: 1.1;
|
|
112
119
|
font-size: ${({ theme }) => (0, import_ds_system.toMobile)(theme.fontSizes.title[600])};
|
|
113
120
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/MobileBanner/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled from 'styled-components';\nimport { toMobile } from '@elliemae/ds-system';\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,uBAAyB;AACzB,
|
|
4
|
+
"sourcesContent": ["import styled from 'styled-components';\nimport { toMobile } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport type { StyledBannerContainerT, StyledContentT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\n display: flex;\n min-height: 60px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 4px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n padding: 8px 8px 8px 16px;\n`;\n\nexport const StyledTextContent = styled.div`\n width: 100%;\n`;\n\nexport const StyledTitle = styled.div`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[700])};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin-bottom: ${({ theme }) => theme.space.xxxs};\n @media not all and (min-resolution: 0.001dpcm) {\n @media {\n -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n }\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n }\n`;\n\nexport const StyledSubTitle = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n\n & > * {\n margin-top: 4px;\n }\n`;\n\nexport const StyledIconContainer = styled.div`\n margin-right: ${({ theme }) => theme.space.xxs};\n`;\n\nexport const StyledContent = styled.div<StyledContentT>`\n width: 100%;\n display: flex;\n flex-direction: column;\n margin-right: ${({ showCloseButton }) => (!showCloseButton ? '28px' : '0')};\n`;\n\nexport const StyledCloseButtonContainer = styled.div`\n display: flex;\n align-items: flex-start;\n`;\n\nexport const StyledSubTitleText = styled.span`\n margin-right: 16px;\n line-height: 1.1;\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2)`\n position: relative;\n &:focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledActionLink = styled.a`\n text-decoration: none;\n line-height: 1.1;\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n`;\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,uBAAyB;AACzB,uBAA2B;AAE3B,0BAAmD;AAE5C,MAAM,uBAAuB,iCAAO;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,2CAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,aAAc,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,aAAa,yCAAgB,aAAa,MAAM;AAAA;AAAA;AAI7D,MAAM,oBAAoB,iCAAO;AAAA;AAAA;AAIjC,MAAM,cAAc,iCAAO;AAAA,WACvB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,+BAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,mBAC/B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,mCAIX,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKtC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI9D,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKtB,CAAC,EAAE,YAAY,+BAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,sBAAsB,iCAAO;AAAA,kBACxB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGtC,MAAM,gBAAgB,iCAAO;AAAA;AAAA;AAAA;AAAA,kBAIlB,CAAC,EAAE,sBAAuB,CAAC,kBAAkB,SAAS;AAAA;AAGjE,MAAM,6BAA6B,iCAAO;AAAA;AAAA;AAAA;AAK1C,MAAM,qBAAqB,iCAAO;AAAA;AAAA;AAAA;AAKlC,MAAM,oBAAoB,sCAAO,2BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWxB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,mBAAmB,iCAAO;AAAA;AAAA;AAAA,eAGxB,CAAC,EAAE,YAAY,+BAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,wBAAwB,iCAAO;AAAA;AAAA,YAEhC,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,yCAAgB,aAAa,QAAQ,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,6 +33,7 @@ import {
|
|
|
33
33
|
StyledIconContainer,
|
|
34
34
|
StyledSubTitle,
|
|
35
35
|
StyledTitle,
|
|
36
|
+
StyledSubTitleText,
|
|
36
37
|
StyledCloseButtonContainer
|
|
37
38
|
} from "./styles";
|
|
38
39
|
const DSMobileBanner = ({
|
|
@@ -89,21 +90,21 @@ const DSMobileBanner = ({
|
|
|
89
90
|
"data-testid": "ds-mobile-banner-icon"
|
|
90
91
|
}, icons[type]), /* @__PURE__ */ React2.createElement(StyledContent, {
|
|
91
92
|
showCloseButton
|
|
92
|
-
}, /* @__PURE__ */ React2.createElement(StyledTitle, null, label), /* @__PURE__ */ React2.createElement(StyledSubTitle, null, body, actionLinkLabel && /* @__PURE__ */ React2.createElement(StyledActionLink, {
|
|
93
|
+
}, /* @__PURE__ */ React2.createElement(StyledTitle, null, label), /* @__PURE__ */ React2.createElement(StyledSubTitle, null, /* @__PURE__ */ React2.createElement(StyledSubTitleText, null, body), actionLinkLabel && /* @__PURE__ */ React2.createElement(StyledActionLink, {
|
|
93
94
|
href: actionLinkHref,
|
|
94
95
|
"data-testid": "ds-mobile-banner-link",
|
|
95
96
|
onClick: actionLinkOnClick
|
|
96
97
|
}, actionLinkLabel))), showCloseButton && /* @__PURE__ */ React2.createElement(StyledCloseButtonContainer, null, /* @__PURE__ */ React2.createElement(StyledCloseButton, {
|
|
97
98
|
"data-testid": "ds-mobile-banner-close-button",
|
|
98
|
-
buttonType: "
|
|
99
|
+
buttonType: "icon",
|
|
99
100
|
onClick: closeButtonOnClick,
|
|
100
101
|
"aria-label": "Close Banner",
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}))));
|
|
102
|
+
innerRef: closeRef,
|
|
103
|
+
size: "s"
|
|
104
|
+
}, /* @__PURE__ */ React2.createElement(CloseX, {
|
|
105
|
+
width: "12px",
|
|
106
|
+
height: "12px"
|
|
107
|
+
})))));
|
|
107
108
|
};
|
|
108
109
|
DSMobileBanner.defaultProps = defaultProps;
|
|
109
110
|
DSMobileBanner.propTypes = propTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileBanner/MobileBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { describe } from 'react-desc';\nimport type { MobileBannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledContent,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n StyledCloseButtonContainer,\n} from './styles';\n\nconst DSMobileBanner = ({\n type,\n isOpen,\n closeButtonOnClick,\n label,\n body,\n actionLinkLabel,\n actionLinkHref,\n actionLinkOnClick,\n showCloseButton,\n containerProps,\n focusOnOpen,\n}: MobileBannerPropsT): JSX.Element => {\n const innerContainerRef = useRef<HTMLDivElement | null>(null);\n const closeRef = useRef<HTMLDivElement | null>(null);\n const [current, setCurrent] = useState<boolean>(isOpen);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState<number>(0);\n\n useEffect(() => {\n if (innerContainerRef.current) {\n setHeight(innerContainerRef.current.offsetHeight);\n }\n }, [isAnimating, isOpen]);\n\n useEffect(() => {\n if (focusOnOpen && closeRef.current && isOpen) {\n closeRef.current?.focus?.();\n }\n }, [focusOnOpen, isOpen]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n type={type}\n isOpen={isOpen}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n height={height}\n {...containerProps}\n data-testid=\"ds-mobile-banner-container\"\n role=\"alert\"\n >\n <StyledInnerContainer type={type} isOpen={isOpen} ref={innerContainerRef} isAnimating={isAnimating}>\n <StyledIconContainer data-testid=\"ds-mobile-banner-icon\">{icons[type]}</StyledIconContainer>\n <StyledContent showCloseButton={showCloseButton}>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n {body}
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';\nimport { CloseX } from '@elliemae/ds-icons';\n\nimport { describe } from 'react-desc';\nimport type { MobileBannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledContent,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n StyledSubTitleText,\n StyledCloseButtonContainer,\n} from './styles';\n\nconst DSMobileBanner = ({\n type,\n isOpen,\n closeButtonOnClick,\n label,\n body,\n actionLinkLabel,\n actionLinkHref,\n actionLinkOnClick,\n showCloseButton,\n containerProps,\n focusOnOpen,\n}: MobileBannerPropsT): JSX.Element => {\n const innerContainerRef = useRef<HTMLDivElement | null>(null);\n const closeRef = useRef<HTMLDivElement | null>(null);\n const [current, setCurrent] = useState<boolean>(isOpen);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState<number>(0);\n\n useEffect(() => {\n if (innerContainerRef.current) {\n setHeight(innerContainerRef.current.offsetHeight);\n }\n }, [isAnimating, isOpen]);\n\n useEffect(() => {\n if (focusOnOpen && closeRef.current && isOpen) {\n closeRef.current?.focus?.();\n }\n }, [focusOnOpen, isOpen]);\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n type={type}\n isOpen={isOpen}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n height={height}\n {...containerProps}\n data-testid=\"ds-mobile-banner-container\"\n role=\"alert\"\n >\n <StyledInnerContainer type={type} isOpen={isOpen} ref={innerContainerRef} isAnimating={isAnimating}>\n <StyledIconContainer data-testid=\"ds-mobile-banner-icon\">{icons[type]}</StyledIconContainer>\n <StyledContent showCloseButton={showCloseButton}>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n <StyledSubTitleText>{body}</StyledSubTitleText>\n {actionLinkLabel && (\n <StyledActionLink href={actionLinkHref} data-testid=\"ds-mobile-banner-link\" onClick={actionLinkOnClick}>\n {actionLinkLabel}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n </StyledContent>\n {showCloseButton && (\n <StyledCloseButtonContainer>\n <StyledCloseButton\n data-testid=\"ds-mobile-banner-close-button\"\n buttonType=\"icon\"\n onClick={closeButtonOnClick}\n aria-label=\"Close Banner\"\n innerRef={closeRef}\n size=\"s\"\n >\n <CloseX width=\"12px\" height=\"12px\" />\n </StyledCloseButton>\n </StyledCloseButtonContainer>\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSMobileBanner.defaultProps = defaultProps;\nDSMobileBanner.propTypes = propTypes;\nconst DSMobileBannerWithSchema = describe(DSMobileBanner);\nDSMobileBannerWithSchema.propTypes = propTypes;\n\nexport { DSMobileBanner, DSMobileBannerWithSchema };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACqC;AACrC,QAAM,oBAAoB,OAA8B,IAAI;AAC5D,QAAM,WAAW,OAA8B,IAAI;AACnD,QAAM,CAAC,SAAS,cAAc,SAAkB,MAAM;AACtD,QAAM,CAAC,aAAa,kBAAkB,SAAkB,KAAK;AAC7D,QAAM,CAAC,QAAQ,aAAa,SAAiB,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,gBAAU,kBAAkB,QAAQ,YAAY;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,YAAU,MAAM;AACd,QAAI,eAAe,SAAS,WAAW,QAAQ;AAC7C,eAAS,SAAS,QAAQ;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,kBAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe,IAAI;AAAA;AAChD,qBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,MAAI,CAAC,eAAe,CAAC;AAAQ,WAAO;AAEpC,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM,WAAW,MAAM;AAAA,IACvC;AAAA,KACI,iBANL;AAAA,IAOC,eAAY;AAAA,IACZ,MAAK;AAAA,MAEL,qCAAC;AAAA,IAAqB;AAAA,IAAY;AAAA,IAAgB,KAAK;AAAA,IAAmB;AAAA,KACxE,qCAAC;AAAA,IAAoB,eAAY;AAAA,KAAyB,MAAM,KAAM,GACtE,qCAAC;AAAA,IAAc;AAAA,KACb,qCAAC,mBAAa,KAAM,GACpB,qCAAC,sBACC,qCAAC,0BAAoB,IAAK,GACzB,mBACC,qCAAC;AAAA,IAAiB,MAAM;AAAA,IAAgB,eAAY;AAAA,IAAwB,SAAS;AAAA,KAClF,eACH,CAEJ,CACF,GACC,mBACC,qCAAC,kCACC,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,YAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAW;AAAA,IACX,UAAU;AAAA,IACV,MAAK;AAAA,KAEL,qCAAC;AAAA,IAAO,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO,CACrC,CACF,CAEJ,CACF;AAEJ;AAEA,eAAe,eAAe;AAC9B,eAAe,YAAY;AAC3B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import styled from "styled-components";
|
|
3
3
|
import { toMobile } from "@elliemae/ds-system";
|
|
4
|
-
import
|
|
4
|
+
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
5
5
|
import { handleAnimation, handleBorderColor } from "./utils/styleHelpers";
|
|
6
6
|
const StyledInnerContainer = styled.div`
|
|
7
7
|
display: flex;
|
|
8
|
-
min-height:
|
|
8
|
+
min-height: 60px;
|
|
9
9
|
width: 100%;
|
|
10
10
|
background-color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
11
11
|
border-bottom: 4px solid ${({ type, theme }) => handleBorderColor(type, theme)};
|
|
12
12
|
transform: translateY(${({ isOpen }) => isOpen ? "0" : "-100%"});
|
|
13
13
|
${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};
|
|
14
|
+
padding: 8px 8px 8px 16px;
|
|
14
15
|
`;
|
|
15
16
|
const StyledTextContent = styled.div`
|
|
16
17
|
width: 100%;
|
|
@@ -19,7 +20,7 @@ const StyledTitle = styled.div`
|
|
|
19
20
|
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
20
21
|
font-size: ${({ theme }) => toMobile(theme.fontSizes.title[700])};
|
|
21
22
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
22
|
-
margin-bottom: ${({ theme }) => theme.space.
|
|
23
|
+
margin-bottom: ${({ theme }) => theme.space.xxxs};
|
|
23
24
|
@media not all and (min-resolution: 0.001dpcm) {
|
|
24
25
|
@media {
|
|
25
26
|
-webkit-font-smoothing: subpixel-antialiased; // fix safari bold render
|
|
@@ -32,28 +33,35 @@ const StyledTitle = styled.div`
|
|
|
32
33
|
}
|
|
33
34
|
`;
|
|
34
35
|
const StyledSubTitle = styled.div`
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-wrap: wrap;
|
|
38
|
+
justify-content: flex-start;
|
|
39
|
+
|
|
35
40
|
font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};
|
|
36
41
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
42
|
+
|
|
43
|
+
& > * {
|
|
44
|
+
margin-top: 4px;
|
|
45
|
+
}
|
|
37
46
|
`;
|
|
38
47
|
const StyledIconContainer = styled.div`
|
|
39
|
-
margin-top: 10px;
|
|
40
48
|
margin-right: ${({ theme }) => theme.space.xxs};
|
|
41
|
-
margin-left: ${({ theme }) => theme.space.xs};
|
|
42
49
|
`;
|
|
43
50
|
const StyledContent = styled.div`
|
|
44
51
|
width: 100%;
|
|
45
52
|
display: flex;
|
|
46
53
|
flex-direction: column;
|
|
47
|
-
margin: ${({ theme }) => theme.space.xxs2} 0;
|
|
48
54
|
margin-right: ${({ showCloseButton }) => !showCloseButton ? "28px" : "0"};
|
|
49
55
|
`;
|
|
50
56
|
const StyledCloseButtonContainer = styled.div`
|
|
51
57
|
display: flex;
|
|
52
58
|
align-items: flex-start;
|
|
53
|
-
margin-top: 6px;
|
|
54
|
-
margin-right: 6px;
|
|
55
59
|
`;
|
|
56
|
-
const
|
|
60
|
+
const StyledSubTitleText = styled.span`
|
|
61
|
+
margin-right: 16px;
|
|
62
|
+
line-height: 1.1;
|
|
63
|
+
`;
|
|
64
|
+
const StyledCloseButton = styled(DSButtonV2)`
|
|
57
65
|
position: relative;
|
|
58
66
|
&:focus {
|
|
59
67
|
&:after {
|
|
@@ -72,8 +80,6 @@ const StyledCloseButton = styled(DSButton)`
|
|
|
72
80
|
`;
|
|
73
81
|
const StyledActionLink = styled.a`
|
|
74
82
|
text-decoration: none;
|
|
75
|
-
float: right;
|
|
76
|
-
margin-left: ${({ theme }) => theme.space.xs};
|
|
77
83
|
line-height: 1.1;
|
|
78
84
|
font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};
|
|
79
85
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
@@ -93,6 +99,7 @@ export {
|
|
|
93
99
|
StyledIconContainer,
|
|
94
100
|
StyledInnerContainer,
|
|
95
101
|
StyledSubTitle,
|
|
102
|
+
StyledSubTitleText,
|
|
96
103
|
StyledTextContent,
|
|
97
104
|
StyledTitle
|
|
98
105
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileBanner/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { toMobile } from '@elliemae/ds-system';\nimport
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEO,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,kBAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,aAAc,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,aAAa,gBAAgB,aAAa,MAAM;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { toMobile } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport type { StyledBannerContainerT, StyledContentT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\n display: flex;\n min-height: 60px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 4px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n padding: 8px 8px 8px 16px;\n`;\n\nexport const StyledTextContent = styled.div`\n width: 100%;\n`;\n\nexport const StyledTitle = styled.div`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[700])};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin-bottom: ${({ theme }) => theme.space.xxxs};\n @media not all and (min-resolution: 0.001dpcm) {\n @media {\n -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n }\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n }\n`;\n\nexport const StyledSubTitle = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n\n & > * {\n margin-top: 4px;\n }\n`;\n\nexport const StyledIconContainer = styled.div`\n margin-right: ${({ theme }) => theme.space.xxs};\n`;\n\nexport const StyledContent = styled.div<StyledContentT>`\n width: 100%;\n display: flex;\n flex-direction: column;\n margin-right: ${({ showCloseButton }) => (!showCloseButton ? '28px' : '0')};\n`;\n\nexport const StyledCloseButtonContainer = styled.div`\n display: flex;\n align-items: flex-start;\n`;\n\nexport const StyledSubTitleText = styled.span`\n margin-right: 16px;\n line-height: 1.1;\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2)`\n position: relative;\n &:focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledActionLink = styled.a`\n text-decoration: none;\n line-height: 1.1;\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n`;\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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEO,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,kBAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,aAAc,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,aAAa,gBAAgB,aAAa,MAAM;AAAA;AAAA;AAI7D,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAIjC,MAAM,cAAc,OAAO;AAAA,WACvB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,mBAC/B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,mCAIX,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKtC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI9D,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKtB,CAAC,EAAE,YAAY,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,sBAAsB,OAAO;AAAA,kBACxB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGtC,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIlB,CAAC,EAAE,sBAAuB,CAAC,kBAAkB,SAAS;AAAA;AAGjE,MAAM,6BAA6B,OAAO;AAAA;AAAA;AAAA;AAK1C,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAKlC,MAAM,oBAAoB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWxB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA,eAGxB,CAAC,EAAE,YAAY,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,wBAAwB,OAAO;AAAA;AAAA,YAEhC,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,gBAAgB,aAAa,QAAQ,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-mobile",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.48",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - System",
|
|
6
6
|
"files": [
|
|
@@ -435,21 +435,20 @@
|
|
|
435
435
|
"typeSafety": false
|
|
436
436
|
},
|
|
437
437
|
"dependencies": {
|
|
438
|
-
"@elliemae/ds-accordion": "3.0.0-next.
|
|
439
|
-
"@elliemae/ds-backdrop": "3.0.0-next.
|
|
440
|
-
"@elliemae/ds-button": "3.0.0-next.
|
|
441
|
-
"@elliemae/ds-circular-progress-indicator": "3.0.0-next.
|
|
442
|
-
"@elliemae/ds-form": "3.0.0-next.
|
|
443
|
-
"@elliemae/ds-grid": "3.0.0-next.
|
|
444
|
-
"@elliemae/ds-icon": "3.0.0-next.
|
|
445
|
-
"@elliemae/ds-icons": "3.0.0-next.
|
|
446
|
-
"@elliemae/ds-indeterminate-progress-indicator": "3.0.0-next.
|
|
447
|
-
"@elliemae/ds-
|
|
448
|
-
"@elliemae/ds-
|
|
449
|
-
"@elliemae/ds-
|
|
450
|
-
"@elliemae/ds-
|
|
451
|
-
"@elliemae/ds-
|
|
452
|
-
"@elliemae/ds-utilities": "3.0.0-next.47",
|
|
438
|
+
"@elliemae/ds-accordion": "3.0.0-next.48",
|
|
439
|
+
"@elliemae/ds-backdrop": "3.0.0-next.48",
|
|
440
|
+
"@elliemae/ds-button": "3.0.0-next.48",
|
|
441
|
+
"@elliemae/ds-circular-progress-indicator": "3.0.0-next.48",
|
|
442
|
+
"@elliemae/ds-form": "3.0.0-next.48",
|
|
443
|
+
"@elliemae/ds-grid": "3.0.0-next.48",
|
|
444
|
+
"@elliemae/ds-icon": "3.0.0-next.48",
|
|
445
|
+
"@elliemae/ds-icons": "3.0.0-next.48",
|
|
446
|
+
"@elliemae/ds-indeterminate-progress-indicator": "3.0.0-next.48",
|
|
447
|
+
"@elliemae/ds-shared": "3.0.0-next.48",
|
|
448
|
+
"@elliemae/ds-system": "3.0.0-next.48",
|
|
449
|
+
"@elliemae/ds-tabs": "3.0.0-next.48",
|
|
450
|
+
"@elliemae/ds-truncated-expandable-text": "3.0.0-next.48",
|
|
451
|
+
"@elliemae/ds-utilities": "3.0.0-next.48",
|
|
453
452
|
"@xstyled/styled-components": "~3.1.2",
|
|
454
453
|
"polished": "~3.6.7",
|
|
455
454
|
"prop-types": "~15.8.1",
|