@elliemae/ds-banner 3.1.0-next.0 → 3.1.0-next.11
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 +3 -3
- package/dist/cjs/DSBanner.js.map +2 -2
- package/dist/cjs/exported-related/theming.js +4 -4
- package/dist/cjs/exported-related/theming.js.map +2 -2
- package/dist/cjs/styles.js +9 -9
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/utils/styleHelpers.js +3 -4
- package/dist/cjs/utils/styleHelpers.js.map +2 -2
- package/dist/esm/DSBanner.js +3 -3
- package/dist/esm/DSBanner.js.map +1 -1
- package/dist/esm/exported-related/theming.js +4 -4
- package/dist/esm/exported-related/theming.js.map +2 -2
- package/dist/esm/styles.js +10 -10
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/utils/styleHelpers.js +3 -4
- package/dist/esm/utils/styleHelpers.js.map +2 -2
- package/package.json +14 -14
package/dist/cjs/DSBanner.js
CHANGED
|
@@ -55,7 +55,7 @@ var React = __toESM(require("react"));
|
|
|
55
55
|
var import_react = __toESM(require("react"));
|
|
56
56
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
57
57
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
58
|
-
var
|
|
58
|
+
var import_ds_utilities2 = require("@elliemae/ds-utilities");
|
|
59
59
|
var import_icons = require("./utils/icons");
|
|
60
60
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
61
61
|
var import_exported_related = require("./exported-related");
|
|
@@ -147,8 +147,8 @@ const DSBanner = (props) => {
|
|
|
147
147
|
height: 12
|
|
148
148
|
})) : /* @__PURE__ */ import_react.default.createElement("span", null)));
|
|
149
149
|
};
|
|
150
|
-
DSBanner.displayName =
|
|
151
|
-
const DSBannerWithSchema = (0,
|
|
150
|
+
DSBanner.displayName = import_exported_related.DSBannerName;
|
|
151
|
+
const DSBannerWithSchema = (0, import_ds_utilities2.describe)(DSBanner);
|
|
152
152
|
DSBannerWithSchema.propTypes = import_react_desc_prop_types.propTypes;
|
|
153
153
|
var DSBanner_default = DSBanner;
|
|
154
154
|
//# sourceMappingURL=DSBanner.js.map
|
package/dist/cjs/DSBanner.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSBanner.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useCallback, useState, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { describe } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiF;AACjF,0BAAyF;AACzF,sBAAuB;AACvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useCallback, useState, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { describe } from '@elliemae/ds-utilities';\nimport { icons } from './utils/icons';\nimport { propTypes, defaultProps } from './react-desc-prop-types';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles';\nimport type { DSBannerT } from './react-desc-prop-types';\n\nconst DSBanner = (props: DSBannerT.Props): JSX.Element | null => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n const { type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, actionRef, ...rest } =\n propsWithDefaults;\n\n const globalAttrs = useGetGlobalAttributes(rest);\n\n const xstyledAttrs = useGetXstyledProps(rest);\n\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 useEffect(() => {\n if (innerContainerRef.current) {\n setHeight(innerContainerRef.current.offsetHeight);\n }\n }, [isAnimating, isOpen]);\n\n useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnWrapper = () => {\n if (innerContainerRef.current) {\n setAlertTabIndex(0);\n setTimeout(() => {\n innerContainerRef.current?.focus();\n }, 300);\n }\n };\n actionRef.current.focusOnLink = () => {\n if (linkRef.current) {\n linkRef.current.focus();\n }\n };\n }\n }, [actionRef]);\n\n const handleBlur = useCallback(() => {\n setAlertTabIndex(undefined);\n }, []);\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 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 height={height}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n data-testid={DSBannerDatatestid.CONTAINER}\n {...containerProps}\n {...globalAttrs}\n {...xstyledAttrs}\n >\n <StyledInnerContainer\n type={type}\n isOpen={isOpen}\n ref={innerContainerRef}\n isAnimating={isAnimating}\n data-testid={DSBannerDatatestid.INNER_CONTAINER}\n role=\"alert\"\n tabIndex={alertTabIndex}\n onBlur={handleBlur}\n >\n <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER}>{icons[type]}</StyledIconContainer>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n <span>{body}</span>\n {actionLink && (\n <StyledActionLink\n data-testid={DSBannerDatatestid.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 {showCloseButton ? (\n <StyledCloseButton\n data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n buttonType=\"icon\"\n onClick={onClose}\n aria-label=\"Close icon\"\n >\n <CloseX width={12} height={12} />\n </StyledCloseButton>\n ) : (\n <span />\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSBanner.displayName = DSBannerName;\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -20,13 +20,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
20
20
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
21
21
|
var theming_exports = {};
|
|
22
22
|
__export(theming_exports, {
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
DSBannerName: () => DSBannerName,
|
|
24
|
+
DSBannerSlots: () => DSBannerSlots
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(theming_exports);
|
|
27
27
|
var React = __toESM(require("react"));
|
|
28
|
-
const
|
|
29
|
-
const
|
|
28
|
+
const DSBannerName = "DSBanner";
|
|
29
|
+
const DSBannerSlots = {
|
|
30
30
|
CONTAINER: "root",
|
|
31
31
|
INNER_CONTAINER: "inner-container",
|
|
32
32
|
TITLE: "title",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,
|
|
4
|
+
"sourcesContent": ["export const DSBannerName = 'DSBanner';\n\nexport const DSBannerSlots = {\n CONTAINER: 'root',\n INNER_CONTAINER: 'inner-container',\n TITLE: 'title',\n SUBTITLE: 'subtitle',\n ICON_CONTAINER: 'icon-container',\n ACTION_LINK: 'action-link',\n CLOSE_BUTTON: 'close-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -35,8 +35,8 @@ var import_ds_button = require("@elliemae/ds-button");
|
|
|
35
35
|
var import_styleHelpers = require("./utils/styleHelpers");
|
|
36
36
|
var import_exported_related = require("./exported-related");
|
|
37
37
|
const StyledBannerContainer = (0, import_ds_system.styled)("div", {
|
|
38
|
-
name: import_exported_related.
|
|
39
|
-
slot: import_exported_related.
|
|
38
|
+
name: import_exported_related.DSBannerName,
|
|
39
|
+
slot: import_exported_related.DSBannerSlots.CONTAINER
|
|
40
40
|
})`
|
|
41
41
|
overflow: hidden;
|
|
42
42
|
height: ${({ isOpen }) => isOpen ? "auto" : "0px"};
|
|
@@ -46,8 +46,8 @@ const StyledBannerContainer = (0, import_ds_system.styled)("div", {
|
|
|
46
46
|
${import_ds_system.layout}
|
|
47
47
|
`;
|
|
48
48
|
const StyledInnerContainer = (0, import_ds_system.styled)("div", {
|
|
49
|
-
name: import_exported_related.
|
|
50
|
-
slot: import_exported_related.
|
|
49
|
+
name: import_exported_related.DSBannerName,
|
|
50
|
+
slot: import_exported_related.DSBannerSlots.INNER_CONTAINER
|
|
51
51
|
})`
|
|
52
52
|
padding-right: 6px;
|
|
53
53
|
display: grid;
|
|
@@ -75,22 +75,22 @@ const StyledInnerContainer = (0, import_ds_system.styled)("div", {
|
|
|
75
75
|
}
|
|
76
76
|
grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;
|
|
77
77
|
`;
|
|
78
|
-
const StyledIconContainer = (0, import_ds_system.styled)("div", { name: import_exported_related.
|
|
78
|
+
const StyledIconContainer = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.ICON_CONTAINER })`
|
|
79
79
|
margin-right: ${({ theme }) => theme.space.xxs};
|
|
80
80
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
81
81
|
`;
|
|
82
|
-
const StyledTitle = (0, import_ds_system.styled)("div", { name: import_exported_related.
|
|
82
|
+
const StyledTitle = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.TITLE })`
|
|
83
83
|
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
84
84
|
font-size: ${({ theme }) => theme.fontSizes.label[400]};
|
|
85
85
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
86
86
|
`;
|
|
87
|
-
const StyledSubTitle = (0, import_ds_system.styled)("div", { name: import_exported_related.
|
|
87
|
+
const StyledSubTitle = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.SUBTITLE })`
|
|
88
88
|
width: 100%;
|
|
89
89
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
90
90
|
font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
|
|
91
91
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
92
92
|
`;
|
|
93
|
-
const StyledActionLink = (0, import_ds_system.styled)("a", { name: import_exported_related.
|
|
93
|
+
const StyledActionLink = (0, import_ds_system.styled)("a", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.ACTION_LINK })`
|
|
94
94
|
margin-left: ${({ theme, isBodyEmpty }) => isBodyEmpty ? theme.space.xs : 0};
|
|
95
95
|
white-space: nowrap;
|
|
96
96
|
text-decoration: none;
|
|
@@ -106,7 +106,7 @@ const StyledActionLink = (0, import_ds_system.styled)("a", { name: import_export
|
|
|
106
106
|
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
107
107
|
}
|
|
108
108
|
`;
|
|
109
|
-
const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { name: import_exported_related.
|
|
109
|
+
const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.CLOSE_BUTTON })`
|
|
110
110
|
margin-left: ${({ theme }) => theme.space.xxs};
|
|
111
111
|
`;
|
|
112
112
|
//# sourceMappingURL=styles.js.map
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA8C;AAC9C,uBAA2B;AAC3B,0BAAmD;AACnD,
|
|
4
|
+
"sourcesContent": ["import { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { DSBannerName, DSBannerSlots } from './exported-related';\nimport type { DSBannerInternalsT } from './sharedTypes';\n\ninterface StyledBannerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n ref: React.MutableRefObject<HTMLDivElement>;\n}\n\ninterface StyledActionLinkT {\n isBodyEmpty: string;\n ref: React.MutableRefObject<HTMLAnchorElement>;\n}\n\nexport const StyledBannerContainer = styled<StyledBannerContainerT>('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n ${sizing}\n ${space}\n ${layout}\n`;\n\nexport const StyledInnerContainer = styled<StyledInnerContainerT>('div', {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\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 transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\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: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.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: DSBannerName, slot: DSBannerSlots.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: DSBannerName, slot: DSBannerSlots.ACTION_LINK })`\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 border: 2px solid transparent;\n border-radius: 2px;\n padding: 2px 4px;\n &:focus {\n outline: none;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`\n margin-left: ${({ theme }) => theme.space.xxs};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA8C;AAC9C,uBAA2B;AAC3B,0BAAmD;AACnD,8BAA4C;AAsBrC,MAAM,wBAAwB,6BAA+B,OAAO;AAAA,EACzE,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,yCAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,uBAAuB,6BAA8B,OAAO;AAAA,EACvE,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMqB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB7D,MAAM,sBAAsB,6BAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,eAAe,CAAC;AAAA,kBACzF,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGrC,MAAM,cAAc,6BAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,MAAM,CAAC;AAAA,WAC/E,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,sCAAc,MAAM,sCAAc,SAAS,CAAC;AAAA;AAAA,iBAE/E,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,sCAAc,MAAM,sCAAc,YAAY,CAAC;AAAA,iBACrG,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;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMrB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAInD,MAAM,oBAAoB,6BAAO,6BAAY,EAAE,MAAM,sCAAc,MAAM,sCAAc,aAAa,CAAC;AAAA,iBAC3F,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -82,11 +82,10 @@ const handleAnimation = (isAnimating, isOpen, height = null) => {
|
|
|
82
82
|
return import_ds_system.css`
|
|
83
83
|
animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
|
|
84
84
|
`;
|
|
85
|
-
} else {
|
|
86
|
-
return import_ds_system.css`
|
|
87
|
-
animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
|
|
88
|
-
`;
|
|
89
85
|
}
|
|
86
|
+
return import_ds_system.css`
|
|
87
|
+
animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
|
|
88
|
+
`;
|
|
90
89
|
}
|
|
91
90
|
return import_ds_system.css``;
|
|
92
91
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styleHelpers.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { kfrm, css } from '@elliemae/ds-system';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0B;
|
|
4
|
+
"sourcesContent": ["import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from '@elliemae/ds-system';\nimport { BANNER_TYPES } from '../exported-related';\nimport type { DSBannerInternalsT } from '../sharedTypes';\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 = (\n type: DSBannerInternalsT.BannerTypesT,\n { colors }: { colors: Record<string, Record<string, string>> },\n): 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 }\n return css`\n animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;\n `;\n }\n return css``;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0B;AAE1B,8BAA6B;AAG7B,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,CAC/B,MACA,EAAE,aACS;AACX,UAAQ;AAAA,SACD,qCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,qCAAa;AAChB,aAAO,OAAO,MAAM;AAAA,SACjB,qCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,qCAAa;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;AACA,WAAO;AAAA,mBACQ,SAAS,gBAAgB,MAAM,IAAI;AAAA;AAAA,EAEpD;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSBanner.js
CHANGED
|
@@ -30,10 +30,10 @@ import * as React from "react";
|
|
|
30
30
|
import React2, { useLayoutEffect, useRef, useCallback, useState, useEffect } from "react";
|
|
31
31
|
import { useMemoMergePropsWithDefault, useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-utilities";
|
|
32
32
|
import { CloseX } from "@elliemae/ds-icons";
|
|
33
|
-
import { describe } from "
|
|
33
|
+
import { describe } from "@elliemae/ds-utilities";
|
|
34
34
|
import { icons } from "./utils/icons";
|
|
35
35
|
import { propTypes, defaultProps } from "./react-desc-prop-types";
|
|
36
|
-
import { DSBannerDatatestid } from "./exported-related";
|
|
36
|
+
import { DSBannerDatatestid, DSBannerName } from "./exported-related";
|
|
37
37
|
import {
|
|
38
38
|
StyledActionLink,
|
|
39
39
|
StyledCloseButton,
|
|
@@ -130,7 +130,7 @@ const DSBanner = (props) => {
|
|
|
130
130
|
height: 12
|
|
131
131
|
})) : /* @__PURE__ */ React2.createElement("span", null)));
|
|
132
132
|
};
|
|
133
|
-
DSBanner.displayName =
|
|
133
|
+
DSBanner.displayName = DSBannerName;
|
|
134
134
|
const DSBannerWithSchema = describe(DSBanner);
|
|
135
135
|
DSBannerWithSchema.propTypes = propTypes;
|
|
136
136
|
var DSBanner_default = DSBanner;
|
package/dist/esm/DSBanner.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useCallback, useState, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { describe } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useCallback, useState, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { CloseX } from '@elliemae/ds-icons';\nimport { describe } from '@elliemae/ds-utilities';\nimport { icons } from './utils/icons';\nimport { propTypes, defaultProps } from './react-desc-prop-types';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related';\nimport {\n StyledActionLink,\n StyledCloseButton,\n StyledInnerContainer,\n StyledBannerContainer,\n StyledIconContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles';\nimport type { DSBannerT } from './react-desc-prop-types';\n\nconst DSBanner = (props: DSBannerT.Props): JSX.Element | null => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n const { type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, actionRef, ...rest } =\n propsWithDefaults;\n\n const globalAttrs = useGetGlobalAttributes(rest);\n\n const xstyledAttrs = useGetXstyledProps(rest);\n\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 useEffect(() => {\n if (innerContainerRef.current) {\n setHeight(innerContainerRef.current.offsetHeight);\n }\n }, [isAnimating, isOpen]);\n\n useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnWrapper = () => {\n if (innerContainerRef.current) {\n setAlertTabIndex(0);\n setTimeout(() => {\n innerContainerRef.current?.focus();\n }, 300);\n }\n };\n actionRef.current.focusOnLink = () => {\n if (linkRef.current) {\n linkRef.current.focus();\n }\n };\n }\n }, [actionRef]);\n\n const handleBlur = useCallback(() => {\n setAlertTabIndex(undefined);\n }, []);\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 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 height={height}\n isAnimating={isAnimating}\n onAnimationEnd={() => setCurrent(isOpen)}\n data-testid={DSBannerDatatestid.CONTAINER}\n {...containerProps}\n {...globalAttrs}\n {...xstyledAttrs}\n >\n <StyledInnerContainer\n type={type}\n isOpen={isOpen}\n ref={innerContainerRef}\n isAnimating={isAnimating}\n data-testid={DSBannerDatatestid.INNER_CONTAINER}\n role=\"alert\"\n tabIndex={alertTabIndex}\n onBlur={handleBlur}\n >\n <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER}>{icons[type]}</StyledIconContainer>\n <StyledTitle>{label}</StyledTitle>\n <StyledSubTitle>\n <span>{body}</span>\n {actionLink && (\n <StyledActionLink\n data-testid={DSBannerDatatestid.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 {showCloseButton ? (\n <StyledCloseButton\n data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n buttonType=\"icon\"\n onClick={onClose}\n aria-label=\"Close icon\"\n >\n <CloseX width={12} height={12} />\n </StyledCloseButton>\n ) : (\n <span />\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = propTypes;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
const
|
|
3
|
-
const
|
|
2
|
+
const DSBannerName = "DSBanner";
|
|
3
|
+
const DSBannerSlots = {
|
|
4
4
|
CONTAINER: "root",
|
|
5
5
|
INNER_CONTAINER: "inner-container",
|
|
6
6
|
TITLE: "title",
|
|
@@ -10,7 +10,7 @@ const slots = {
|
|
|
10
10
|
CLOSE_BUTTON: "close-button"
|
|
11
11
|
};
|
|
12
12
|
export {
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
DSBannerName,
|
|
14
|
+
DSBannerSlots
|
|
15
15
|
};
|
|
16
16
|
//# sourceMappingURL=theming.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSBannerName = 'DSBanner';\n\nexport const DSBannerSlots = {\n CONTAINER: 'root',\n INNER_CONTAINER: 'inner-container',\n TITLE: 'title',\n SUBTITLE: 'subtitle',\n ICON_CONTAINER: 'icon-container',\n ACTION_LINK: 'action-link',\n CLOSE_BUTTON: 'close-button',\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -2,10 +2,10 @@ import * as React from "react";
|
|
|
2
2
|
import { styled, sizing, space, layout } from "@elliemae/ds-system";
|
|
3
3
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
4
4
|
import { handleAnimation, handleBorderColor } from "./utils/styleHelpers";
|
|
5
|
-
import {
|
|
5
|
+
import { DSBannerName, DSBannerSlots } from "./exported-related";
|
|
6
6
|
const StyledBannerContainer = styled("div", {
|
|
7
|
-
name:
|
|
8
|
-
slot:
|
|
7
|
+
name: DSBannerName,
|
|
8
|
+
slot: DSBannerSlots.CONTAINER
|
|
9
9
|
})`
|
|
10
10
|
overflow: hidden;
|
|
11
11
|
height: ${({ isOpen }) => isOpen ? "auto" : "0px"};
|
|
@@ -15,8 +15,8 @@ const StyledBannerContainer = styled("div", {
|
|
|
15
15
|
${layout}
|
|
16
16
|
`;
|
|
17
17
|
const StyledInnerContainer = styled("div", {
|
|
18
|
-
name:
|
|
19
|
-
slot:
|
|
18
|
+
name: DSBannerName,
|
|
19
|
+
slot: DSBannerSlots.INNER_CONTAINER
|
|
20
20
|
})`
|
|
21
21
|
padding-right: 6px;
|
|
22
22
|
display: grid;
|
|
@@ -44,22 +44,22 @@ const StyledInnerContainer = styled("div", {
|
|
|
44
44
|
}
|
|
45
45
|
grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;
|
|
46
46
|
`;
|
|
47
|
-
const StyledIconContainer = styled("div", { name:
|
|
47
|
+
const StyledIconContainer = styled("div", { name: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`
|
|
48
48
|
margin-right: ${({ theme }) => theme.space.xxs};
|
|
49
49
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
50
50
|
`;
|
|
51
|
-
const StyledTitle = styled("div", { name:
|
|
51
|
+
const StyledTitle = styled("div", { name: DSBannerName, slot: DSBannerSlots.TITLE })`
|
|
52
52
|
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
53
53
|
font-size: ${({ theme }) => theme.fontSizes.label[400]};
|
|
54
54
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
55
55
|
`;
|
|
56
|
-
const StyledSubTitle = styled("div", { name:
|
|
56
|
+
const StyledSubTitle = styled("div", { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`
|
|
57
57
|
width: 100%;
|
|
58
58
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
59
59
|
font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
|
|
60
60
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
61
61
|
`;
|
|
62
|
-
const StyledActionLink = styled("a", { name:
|
|
62
|
+
const StyledActionLink = styled("a", { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })`
|
|
63
63
|
margin-left: ${({ theme, isBodyEmpty }) => isBodyEmpty ? theme.space.xs : 0};
|
|
64
64
|
white-space: nowrap;
|
|
65
65
|
text-decoration: none;
|
|
@@ -75,7 +75,7 @@ const StyledActionLink = styled("a", { name: COMPONENT_NAME, slot: slots.ACTION_
|
|
|
75
75
|
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
76
76
|
}
|
|
77
77
|
`;
|
|
78
|
-
const StyledCloseButton = styled(DSButtonV2, { name:
|
|
78
|
+
const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`
|
|
79
79
|
margin-left: ${({ theme }) => theme.space.xxs};
|
|
80
80
|
`;
|
|
81
81
|
export {
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport {
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAsBO,MAAM,wBAAwB,OAA+B,OAAO;AAAA,EACzE,MAAM;AAAA,EACN,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { DSBannerName, DSBannerSlots } from './exported-related';\nimport type { DSBannerInternalsT } from './sharedTypes';\n\ninterface StyledBannerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n ref: React.MutableRefObject<HTMLDivElement>;\n}\n\ninterface StyledActionLinkT {\n isBodyEmpty: string;\n ref: React.MutableRefObject<HTMLAnchorElement>;\n}\n\nexport const StyledBannerContainer = styled<StyledBannerContainerT>('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n ${sizing}\n ${space}\n ${layout}\n`;\n\nexport const StyledInnerContainer = styled<StyledInnerContainerT>('div', {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\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 transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\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: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.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: DSBannerName, slot: DSBannerSlots.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: DSBannerName, slot: DSBannerSlots.ACTION_LINK })`\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 border: 2px solid transparent;\n border-radius: 2px;\n padding: 2px 4px;\n &:focus {\n outline: none;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`\n margin-left: ${({ theme }) => theme.space.xxs};\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAsBO,MAAM,wBAAwB,OAA+B,OAAO;AAAA,EACzE,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,gBAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,uBAAuB,OAA8B,OAAO;AAAA,EACvE,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMqB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB7D,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,eAAe,CAAC;AAAA,kBACzF,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGrC,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA,WAC/E,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,cAAc,MAAM,cAAc,SAAS,CAAC;AAAA;AAAA,iBAE/E,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,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA,iBACrG,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;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMrB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAInD,MAAM,oBAAoB,OAAO,YAAY,EAAE,MAAM,cAAc,MAAM,cAAc,aAAa,CAAC;AAAA,iBAC3F,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -56,11 +56,10 @@ const handleAnimation = (isAnimating, isOpen, height = null) => {
|
|
|
56
56
|
return css`
|
|
57
57
|
animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
|
|
58
58
|
`;
|
|
59
|
-
} else {
|
|
60
|
-
return css`
|
|
61
|
-
animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
|
|
62
|
-
`;
|
|
63
59
|
}
|
|
60
|
+
return css`
|
|
61
|
+
animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
|
|
62
|
+
`;
|
|
64
63
|
}
|
|
65
64
|
return css``;
|
|
66
65
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, css } from '@elliemae/ds-system';\nimport {
|
|
5
|
-
"mappings": "AAAA;ACAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from '@elliemae/ds-system';\nimport { BANNER_TYPES } from '../exported-related';\nimport type { DSBannerInternalsT } from '../sharedTypes';\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 = (\n type: DSBannerInternalsT.BannerTypesT,\n { colors }: { colors: Record<string, Record<string, string>> },\n): 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 }\n return css`\n animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;\n `;\n }\n return css``;\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA;AAGA,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,CAC/B,MACA,EAAE,aACS;AACX,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;AACA,WAAO;AAAA,mBACQ,SAAS,gBAAgB,MAAM,IAAI;AAAA;AAAA,EAEpD;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-banner",
|
|
3
|
-
"version": "3.1.0-next.
|
|
3
|
+
"version": "3.1.0-next.11",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Banner",
|
|
6
6
|
"files": [
|
|
@@ -62,19 +62,11 @@
|
|
|
62
62
|
"reportFile": "tests.xml",
|
|
63
63
|
"indent": 4
|
|
64
64
|
},
|
|
65
|
-
"scripts": {
|
|
66
|
-
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
67
|
-
"test": "node ../../scripts/testing/test.mjs",
|
|
68
|
-
"lint": "node ../../scripts/lint.mjs",
|
|
69
|
-
"dts": "node ../../scripts/dts.mjs",
|
|
70
|
-
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
71
|
-
},
|
|
72
65
|
"dependencies": {
|
|
73
|
-
"@elliemae/ds-button": "3.1.0-next.
|
|
74
|
-
"@elliemae/ds-icons": "3.1.0-next.
|
|
75
|
-
"@elliemae/ds-system": "3.1.0-next.
|
|
76
|
-
"@elliemae/ds-utilities": "3.1.0-next.
|
|
77
|
-
"react-desc": "~4.1.3"
|
|
66
|
+
"@elliemae/ds-button": "3.1.0-next.11",
|
|
67
|
+
"@elliemae/ds-icons": "3.1.0-next.11",
|
|
68
|
+
"@elliemae/ds-system": "3.1.0-next.11",
|
|
69
|
+
"@elliemae/ds-utilities": "3.1.0-next.11"
|
|
78
70
|
},
|
|
79
71
|
"devDependencies": {
|
|
80
72
|
"@testing-library/jest-dom": "~5.16.2",
|
|
@@ -91,5 +83,13 @@
|
|
|
91
83
|
"publishConfig": {
|
|
92
84
|
"access": "public",
|
|
93
85
|
"typeSafety": false
|
|
86
|
+
},
|
|
87
|
+
"scripts": {
|
|
88
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
89
|
+
"test": "node ../../scripts/testing/test.mjs",
|
|
90
|
+
"lint": "node ../../scripts/lint.mjs",
|
|
91
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
92
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
93
|
+
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
94
94
|
}
|
|
95
|
-
}
|
|
95
|
+
}
|