@elliemae/ds-banner 3.53.0-beta.0 → 3.53.0-beta.3
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 +1 -1
- package/dist/cjs/DSBanner.js.map +2 -2
- package/dist/cjs/exported-related/index.js +2 -0
- package/dist/cjs/exported-related/index.js.map +2 -2
- package/dist/esm/DSBanner.js +2 -2
- package/dist/esm/DSBanner.js.map +2 -2
- package/dist/esm/exported-related/index.js +2 -0
- package/dist/esm/exported-related/index.js.map +2 -2
- package/dist/types/exported-related/index.d.ts +1 -0
- package/package.json +8 -8
package/dist/cjs/DSBanner.js
CHANGED
|
@@ -154,7 +154,7 @@ const DSBanner = (props) => {
|
|
|
154
154
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledIconContainer, { "data-testid": import_exported_related.DSBannerDatatestid.ICON_CONTAINER, ...ownerPropsConfig, children: import_icons.icons[type] }),
|
|
155
155
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { ...ownerPropsConfig, children: label }),
|
|
156
156
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledSubTitle, { ...ownerPropsConfig, children: [
|
|
157
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: body }),
|
|
157
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: import_exported_related.BANNER_BODY_ID, children: body }),
|
|
158
158
|
actionLink && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
159
159
|
import_styles.StyledActionLink,
|
|
160
160
|
{
|
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 { CloseX } from '@elliemae/ds-icons';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBannerPropTypesSchema } from './react-desc-prop-types.js';\nimport {\n StyledActionLink,\n StyledBannerContainer,\n StyledCloseButton,\n StyledIconContainer,\n StyledInnerContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles.js';\nimport { icons } from './utils/icons.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSBannerT.InternalProps>(props, defaultProps);\n\n const {\n type,\n isOpen,\n onClose,\n label,\n body,\n closeBtnRef,\n CustomBody,\n actionLink,\n showCloseButton,\n containerProps,\n actionRef,\n ...rest\n } = propsWithDefaults;\n // eslint-disable-next-line no-unused-vars\n const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n const xstyledAttrs = useGetXstyledProps(rest);\n\n const innerContainerRef = useRef<HTMLDivElement>(null);\n const linkRef = useRef<HTMLAnchorElement>(null);\n let { current } = useRef<boolean>(false);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState<number>(0);\n const [alertTabIndex, setAlertTabIndex] = useState<TypescriptHelpersT.WCAGTabIndex | 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 const handleOnKeyDownToClose = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose();\n }\n },\n [onClose],\n );\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const innerCols = React.useMemo(() => {\n if (!CustomBody) {\n const finalCols = ['auto', 'fit-content(50%)', '1fr'];\n if (showCloseButton) finalCols.push('auto');\n return finalCols;\n }\n return ['1fr', 'auto'];\n }, [CustomBody, showCloseButton]);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n isOpen={isOpen}\n height={height}\n onKeyDown={handleOnKeyDownToClose}\n isAnimating={isAnimating}\n onAnimationEnd={() => {\n current = isOpen;\n setIsAnimating(false);\n }}\n data-testid={DSBannerDatatestid.CONTAINER}\n {...containerProps}\n {...globalAttrs}\n {...xstyledAttrs}\n {...ownerPropsConfig}\n >\n <StyledInnerContainer\n cols={innerCols}\n $type={type}\n data-type={type}\n isOpen={isOpen}\n innerRef={innerContainerRef}\n isAnimating={isAnimating}\n data-testid={DSBannerDatatestid.INNER_CONTAINER}\n role=\"alert\"\n tabIndex={alertTabIndex}\n onBlur={handleBlur}\n {...ownerPropsConfig}\n >\n {!CustomBody ? (\n <>\n <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER} {...ownerPropsConfig}>\n {icons[type]}\n </StyledIconContainer>\n <StyledTitle {...ownerPropsConfig}>{label}</StyledTitle>\n <StyledSubTitle {...ownerPropsConfig}>\n <span>{body}</span>\n {actionLink && (\n <StyledActionLink\n data-testid={DSBannerDatatestid.ACTION_LINK}\n onClick={actionLink.onClick}\n href={actionLink.href}\n innerRef={linkRef}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\n isBodyEmpty={!body}\n title={actionLink.label}\n {...ownerPropsConfig}\n >\n {actionLink.label}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n {showCloseButton ? (\n <StyledCloseButton\n data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n buttonType=\"icon\"\n innerRef={closeBtnRef}\n onClick={onClose}\n aria-label=\"Close icon\"\n {...ownerPropsConfig}\n >\n <CloseX width={12} height={12} />\n </StyledCloseButton>\n ) : null}\n </>\n ) : (\n <CustomBody />\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = DSBannerPropTypesSchema;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkJb;AAjJV,sBAAuB;AACvB,8BAMO;AAEP,mBAAiF;AACjF,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { CloseX } from '@elliemae/ds-icons';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { BANNER_BODY_ID, DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBannerPropTypesSchema } from './react-desc-prop-types.js';\nimport {\n StyledActionLink,\n StyledBannerContainer,\n StyledCloseButton,\n StyledIconContainer,\n StyledInnerContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles.js';\nimport { icons } from './utils/icons.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSBannerT.InternalProps>(props, defaultProps);\n\n const {\n type,\n isOpen,\n onClose,\n label,\n body,\n closeBtnRef,\n CustomBody,\n actionLink,\n showCloseButton,\n containerProps,\n actionRef,\n ...rest\n } = propsWithDefaults;\n // eslint-disable-next-line no-unused-vars\n const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n const xstyledAttrs = useGetXstyledProps(rest);\n\n const innerContainerRef = useRef<HTMLDivElement>(null);\n const linkRef = useRef<HTMLAnchorElement>(null);\n let { current } = useRef<boolean>(false);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState<number>(0);\n const [alertTabIndex, setAlertTabIndex] = useState<TypescriptHelpersT.WCAGTabIndex | 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 const handleOnKeyDownToClose = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose();\n }\n },\n [onClose],\n );\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const innerCols = React.useMemo(() => {\n if (!CustomBody) {\n const finalCols = ['auto', 'fit-content(50%)', '1fr'];\n if (showCloseButton) finalCols.push('auto');\n return finalCols;\n }\n return ['1fr', 'auto'];\n }, [CustomBody, showCloseButton]);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n isOpen={isOpen}\n height={height}\n onKeyDown={handleOnKeyDownToClose}\n isAnimating={isAnimating}\n onAnimationEnd={() => {\n current = isOpen;\n setIsAnimating(false);\n }}\n data-testid={DSBannerDatatestid.CONTAINER}\n {...containerProps}\n {...globalAttrs}\n {...xstyledAttrs}\n {...ownerPropsConfig}\n >\n <StyledInnerContainer\n cols={innerCols}\n $type={type}\n data-type={type}\n isOpen={isOpen}\n innerRef={innerContainerRef}\n isAnimating={isAnimating}\n data-testid={DSBannerDatatestid.INNER_CONTAINER}\n role=\"alert\"\n tabIndex={alertTabIndex}\n onBlur={handleBlur}\n {...ownerPropsConfig}\n >\n {!CustomBody ? (\n <>\n <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER} {...ownerPropsConfig}>\n {icons[type]}\n </StyledIconContainer>\n <StyledTitle {...ownerPropsConfig}>{label}</StyledTitle>\n <StyledSubTitle {...ownerPropsConfig}>\n <span id={BANNER_BODY_ID}>{body}</span>\n {actionLink && (\n <StyledActionLink\n data-testid={DSBannerDatatestid.ACTION_LINK}\n onClick={actionLink.onClick}\n href={actionLink.href}\n innerRef={linkRef}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\n isBodyEmpty={!body}\n title={actionLink.label}\n {...ownerPropsConfig}\n >\n {actionLink.label}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n {showCloseButton ? (\n <StyledCloseButton\n data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n buttonType=\"icon\"\n innerRef={closeBtnRef}\n onClick={onClose}\n aria-label=\"Close icon\"\n {...ownerPropsConfig}\n >\n <CloseX width={12} height={12} />\n </StyledCloseButton>\n ) : null}\n </>\n ) : (\n <CustomBody />\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = DSBannerPropTypesSchema;\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": ["React"]
|
|
7
7
|
}
|
|
@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var exported_related_exports = {};
|
|
30
30
|
__export(exported_related_exports, {
|
|
31
|
+
BANNER_BODY_ID: () => BANNER_BODY_ID,
|
|
31
32
|
BANNER_TYPES: () => BANNER_TYPES,
|
|
32
33
|
DSBannerDatatestid: () => DSBannerDatatestid,
|
|
33
34
|
DSBannerName: () => DSBannerName,
|
|
@@ -43,6 +44,7 @@ const BANNER_TYPES = {
|
|
|
43
44
|
WARNING: "warning",
|
|
44
45
|
DANGER: "danger"
|
|
45
46
|
};
|
|
47
|
+
const BANNER_BODY_ID = "ds-banner-body";
|
|
46
48
|
const DSBannerSlots = {
|
|
47
49
|
CONTAINER: "container",
|
|
48
50
|
INNER_CONTAINER: "inner-container",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSBannerName = 'DSBanner';\nexport const BANNER_TYPES = {\n INFO: 'info',\n SUCCESS: 'success',\n WARNING: 'warning',\n DANGER: 'danger',\n} as const;\n\n// previously this was the exported data-testid object\n// the one marked as // ok are the one that works with the slots convention and works with the slotObjectToDataTestIds function\n// the rest are not compatible and needs manual handling\n// export const DSBannerDatatestid = {\n// CONTAINER: 'ds-banner-container', // ok\n// CUSTOM_CONTAINER: 'ds-banner-custom-container', // ok\n// ACTION_LINK: 'ds-banner-action-link', // ok\n// CLOSE_BUTTON: 'ds-banner-close-button', // ok\n// // From here down are not compatible with the slotObjectToDataTestIds function.\n// INNER_CONTAINER: 'ds-banner',\n// ICON_CONTAINER: 'ds-banner-icon',\n// // from here they were not present but they had an asigned Slot.\n// // TITLE\n// // SUBTITLE\n// };\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n\nexport const DSBannerSlots = {\n CONTAINER: 'container',\n INNER_CONTAINER: 'inner-container',\n CUSTOM_CONTAINER: 'custom-container',\n TITLE: 'title',\n SUBTITLE: 'subtitle',\n ICON_CONTAINER: 'icon-container',\n ACTION_LINK: 'action-link',\n CLOSE_BUTTON: 'close-button',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSBannerDatatestid = {\n ...(slotObjectToDataTestIds(DSBannerName, DSBannerSlots) as Record<keyof typeof DSBannerSlots, string>),\n // handling the rest of the data-testids that are not compatible with the slotObjectToDataTestIds function manually to avoid breaking changes\n INNER_CONTAINER: 'ds-banner',\n ICON_CONTAINER: 'ds-banner-icon',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AACrB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSBannerName = 'DSBanner';\nexport const BANNER_TYPES = {\n INFO: 'info',\n SUCCESS: 'success',\n WARNING: 'warning',\n DANGER: 'danger',\n} as const;\n\nexport const BANNER_BODY_ID = 'ds-banner-body';\n\n// previously this was the exported data-testid object\n// the one marked as // ok are the one that works with the slots convention and works with the slotObjectToDataTestIds function\n// the rest are not compatible and needs manual handling\n// export const DSBannerDatatestid = {\n// CONTAINER: 'ds-banner-container', // ok\n// CUSTOM_CONTAINER: 'ds-banner-custom-container', // ok\n// ACTION_LINK: 'ds-banner-action-link', // ok\n// CLOSE_BUTTON: 'ds-banner-close-button', // ok\n// // From here down are not compatible with the slotObjectToDataTestIds function.\n// INNER_CONTAINER: 'ds-banner',\n// ICON_CONTAINER: 'ds-banner-icon',\n// // from here they were not present but they had an asigned Slot.\n// // TITLE\n// // SUBTITLE\n// };\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n\nexport const DSBannerSlots = {\n CONTAINER: 'container',\n INNER_CONTAINER: 'inner-container',\n CUSTOM_CONTAINER: 'custom-container',\n TITLE: 'title',\n SUBTITLE: 'subtitle',\n ICON_CONTAINER: 'icon-container',\n ACTION_LINK: 'action-link',\n CLOSE_BUTTON: 'close-button',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSBannerDatatestid = {\n ...(slotObjectToDataTestIds(DSBannerName, DSBannerSlots) as Record<keyof typeof DSBannerSlots, string>),\n // handling the rest of the data-testids that are not compatible with the slotObjectToDataTestIds function manually to avoid breaking changes\n INNER_CONTAINER: 'ds-banner',\n ICON_CONTAINER: 'ds-banner-icon',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AACrB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEO,MAAM,iBAAiB;AAoBvB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;AAGO,MAAM,qBAAqB;AAAA,EAChC,OAAI,0CAAwB,cAAc,aAAa;AAAA;AAAA,EAEvD,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSBanner.js
CHANGED
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
useOwnerProps
|
|
10
10
|
} from "@elliemae/ds-props-helpers";
|
|
11
11
|
import React2, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
|
12
|
-
import { DSBannerDatatestid, DSBannerName } from "./exported-related/index.js";
|
|
12
|
+
import { BANNER_BODY_ID, DSBannerDatatestid, DSBannerName } from "./exported-related/index.js";
|
|
13
13
|
import { defaultProps, DSBannerPropTypesSchema } from "./react-desc-prop-types.js";
|
|
14
14
|
import {
|
|
15
15
|
StyledActionLink,
|
|
@@ -133,7 +133,7 @@ const DSBanner = (props) => {
|
|
|
133
133
|
/* @__PURE__ */ jsx(StyledIconContainer, { "data-testid": DSBannerDatatestid.ICON_CONTAINER, ...ownerPropsConfig, children: icons[type] }),
|
|
134
134
|
/* @__PURE__ */ jsx(StyledTitle, { ...ownerPropsConfig, children: label }),
|
|
135
135
|
/* @__PURE__ */ jsxs(StyledSubTitle, { ...ownerPropsConfig, children: [
|
|
136
|
-
/* @__PURE__ */ jsx("span", { children: body }),
|
|
136
|
+
/* @__PURE__ */ jsx("span", { id: BANNER_BODY_ID, children: body }),
|
|
137
137
|
actionLink && /* @__PURE__ */ jsx(
|
|
138
138
|
StyledActionLink,
|
|
139
139
|
{
|
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 { CloseX } from '@elliemae/ds-icons';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBannerPropTypesSchema } from './react-desc-prop-types.js';\nimport {\n StyledActionLink,\n StyledBannerContainer,\n StyledCloseButton,\n StyledIconContainer,\n StyledInnerContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles.js';\nimport { icons } from './utils/icons.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSBannerT.InternalProps>(props, defaultProps);\n\n const {\n type,\n isOpen,\n onClose,\n label,\n body,\n closeBtnRef,\n CustomBody,\n actionLink,\n showCloseButton,\n containerProps,\n actionRef,\n ...rest\n } = propsWithDefaults;\n // eslint-disable-next-line no-unused-vars\n const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n const xstyledAttrs = useGetXstyledProps(rest);\n\n const innerContainerRef = useRef<HTMLDivElement>(null);\n const linkRef = useRef<HTMLAnchorElement>(null);\n let { current } = useRef<boolean>(false);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState<number>(0);\n const [alertTabIndex, setAlertTabIndex] = useState<TypescriptHelpersT.WCAGTabIndex | 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 const handleOnKeyDownToClose = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose();\n }\n },\n [onClose],\n );\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const innerCols = React.useMemo(() => {\n if (!CustomBody) {\n const finalCols = ['auto', 'fit-content(50%)', '1fr'];\n if (showCloseButton) finalCols.push('auto');\n return finalCols;\n }\n return ['1fr', 'auto'];\n }, [CustomBody, showCloseButton]);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n isOpen={isOpen}\n height={height}\n onKeyDown={handleOnKeyDownToClose}\n isAnimating={isAnimating}\n onAnimationEnd={() => {\n current = isOpen;\n setIsAnimating(false);\n }}\n data-testid={DSBannerDatatestid.CONTAINER}\n {...containerProps}\n {...globalAttrs}\n {...xstyledAttrs}\n {...ownerPropsConfig}\n >\n <StyledInnerContainer\n cols={innerCols}\n $type={type}\n data-type={type}\n isOpen={isOpen}\n innerRef={innerContainerRef}\n isAnimating={isAnimating}\n data-testid={DSBannerDatatestid.INNER_CONTAINER}\n role=\"alert\"\n tabIndex={alertTabIndex}\n onBlur={handleBlur}\n {...ownerPropsConfig}\n >\n {!CustomBody ? (\n <>\n <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER} {...ownerPropsConfig}>\n {icons[type]}\n </StyledIconContainer>\n <StyledTitle {...ownerPropsConfig}>{label}</StyledTitle>\n <StyledSubTitle {...ownerPropsConfig}>\n <span>{body}</span>\n {actionLink && (\n <StyledActionLink\n data-testid={DSBannerDatatestid.ACTION_LINK}\n onClick={actionLink.onClick}\n href={actionLink.href}\n innerRef={linkRef}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\n isBodyEmpty={!body}\n title={actionLink.label}\n {...ownerPropsConfig}\n >\n {actionLink.label}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n {showCloseButton ? (\n <StyledCloseButton\n data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n buttonType=\"icon\"\n innerRef={closeBtnRef}\n onClick={onClose}\n aria-label=\"Close icon\"\n {...ownerPropsConfig}\n >\n <CloseX width={12} height={12} />\n </StyledCloseButton>\n ) : null}\n </>\n ) : (\n <CustomBody />\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = DSBannerPropTypesSchema;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkJb,mBACE,KAIA,YALF;AAjJV,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,OAAOA,UAAS,aAAa,WAAW,iBAAiB,QAAQ,gBAAgB;AACjF,SAAS,oBAAoB,oBAAoB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { CloseX } from '@elliemae/ds-icons';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { BANNER_BODY_ID, DSBannerDatatestid, DSBannerName } from './exported-related/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBannerPropTypesSchema } from './react-desc-prop-types.js';\nimport {\n StyledActionLink,\n StyledBannerContainer,\n StyledCloseButton,\n StyledIconContainer,\n StyledInnerContainer,\n StyledSubTitle,\n StyledTitle,\n} from './styles.js';\nimport { icons } from './utils/icons.js';\n\nconst DSBanner: React.ComponentType<DSBannerT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSBannerT.InternalProps>(props, defaultProps);\n\n const {\n type,\n isOpen,\n onClose,\n label,\n body,\n closeBtnRef,\n CustomBody,\n actionLink,\n showCloseButton,\n containerProps,\n actionRef,\n ...rest\n } = propsWithDefaults;\n // eslint-disable-next-line no-unused-vars\n const { height: globalHeight, ...globalAttrs } = useGetGlobalAttributes(rest);\n const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n const xstyledAttrs = useGetXstyledProps(rest);\n\n const innerContainerRef = useRef<HTMLDivElement>(null);\n const linkRef = useRef<HTMLAnchorElement>(null);\n let { current } = useRef<boolean>(false);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [height, setHeight] = useState<number>(0);\n const [alertTabIndex, setAlertTabIndex] = useState<TypescriptHelpersT.WCAGTabIndex | 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 const handleOnKeyDownToClose = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose();\n }\n },\n [onClose],\n );\n\n useLayoutEffect(() => {\n if (isOpen !== current || isOpen) setIsAnimating(true);\n else setIsAnimating(false);\n }, [isOpen, current]);\n\n const innerCols = React.useMemo(() => {\n if (!CustomBody) {\n const finalCols = ['auto', 'fit-content(50%)', '1fr'];\n if (showCloseButton) finalCols.push('auto');\n return finalCols;\n }\n return ['1fr', 'auto'];\n }, [CustomBody, showCloseButton]);\n\n if (!isAnimating && !isOpen) return null;\n\n return (\n <StyledBannerContainer\n isOpen={isOpen}\n height={height}\n onKeyDown={handleOnKeyDownToClose}\n isAnimating={isAnimating}\n onAnimationEnd={() => {\n current = isOpen;\n setIsAnimating(false);\n }}\n data-testid={DSBannerDatatestid.CONTAINER}\n {...containerProps}\n {...globalAttrs}\n {...xstyledAttrs}\n {...ownerPropsConfig}\n >\n <StyledInnerContainer\n cols={innerCols}\n $type={type}\n data-type={type}\n isOpen={isOpen}\n innerRef={innerContainerRef}\n isAnimating={isAnimating}\n data-testid={DSBannerDatatestid.INNER_CONTAINER}\n role=\"alert\"\n tabIndex={alertTabIndex}\n onBlur={handleBlur}\n {...ownerPropsConfig}\n >\n {!CustomBody ? (\n <>\n <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER} {...ownerPropsConfig}>\n {icons[type]}\n </StyledIconContainer>\n <StyledTitle {...ownerPropsConfig}>{label}</StyledTitle>\n <StyledSubTitle {...ownerPropsConfig}>\n <span id={BANNER_BODY_ID}>{body}</span>\n {actionLink && (\n <StyledActionLink\n data-testid={DSBannerDatatestid.ACTION_LINK}\n onClick={actionLink.onClick}\n href={actionLink.href}\n innerRef={linkRef}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\n isBodyEmpty={!body}\n title={actionLink.label}\n {...ownerPropsConfig}\n >\n {actionLink.label}\n </StyledActionLink>\n )}\n </StyledSubTitle>\n {showCloseButton ? (\n <StyledCloseButton\n data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n buttonType=\"icon\"\n innerRef={closeBtnRef}\n onClick={onClose}\n aria-label=\"Close icon\"\n {...ownerPropsConfig}\n >\n <CloseX width={12} height={12} />\n </StyledCloseButton>\n ) : null}\n </>\n ) : (\n <CustomBody />\n )}\n </StyledInnerContainer>\n </StyledBannerContainer>\n );\n};\n\nDSBanner.displayName = DSBannerName;\nconst DSBannerWithSchema = describe(DSBanner);\nDSBannerWithSchema.propTypes = DSBannerPropTypesSchema;\n\nexport default DSBanner;\nexport { DSBanner, DSBannerWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkJb,mBACE,KAIA,YALF;AAjJV,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,OAAOA,UAAS,aAAa,WAAW,iBAAiB,QAAQ,gBAAgB;AACjF,SAAS,gBAAgB,oBAAoB,oBAAoB;AAEjE,SAAS,cAAc,+BAA+B;AACtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AAEtB,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,oBAAoB,6BAAsD,OAAO,YAAY;AAEnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,QAAQ,cAAc,GAAG,YAAY,IAAI,uBAAuB,IAAI;AAC5E,QAAM,mBAAmB,cAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,eAAe,mBAAmB,IAAI;AAE5C,QAAM,oBAAoB,OAAuB,IAAI;AACrD,QAAM,UAAU,OAA0B,IAAI;AAC9C,MAAI,EAAE,QAAQ,IAAI,OAAgB,KAAK;AACvC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,CAAC;AAC9C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAsD,MAAS;AAEzG,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,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,iBAAiB,MAAM;AACvC,YAAI,kBAAkB,SAAS;AAC7B,2BAAiB,CAAC;AAClB,qBAAW,MAAM;AACf,8BAAkB,SAAS,MAAM;AAAA,UACnC,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,QAAM,aAAa,YAAY,MAAM;AACnC,qBAAiB,MAAS;AAAA,EAC5B,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,CAAC,MAA2B;AAC9D,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,UAAI,QAAQ,QAAS,SAAQ,QAAQ,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAyB;AAAA,IAC7B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,eAAe;AACjB,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,kBAAgB,MAAM;AACpB,QAAI,WAAW,WAAW,OAAQ,gBAAe,IAAI;AAAA,QAChD,gBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,YAAYA,OAAM,QAAQ,MAAM;AACpC,QAAI,CAAC,YAAY;AACf,YAAM,YAAY,CAAC,QAAQ,oBAAoB,KAAK;AACpD,UAAI,gBAAiB,WAAU,KAAK,MAAM;AAC1C,aAAO;AAAA,IACT;AACA,WAAO,CAAC,OAAO,MAAM;AAAA,EACvB,GAAG,CAAC,YAAY,eAAe,CAAC;AAEhC,MAAI,CAAC,eAAe,CAAC,OAAQ,QAAO;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,gBAAgB,MAAM;AACpB,kBAAU;AACV,uBAAe,KAAK;AAAA,MACtB;AAAA,MACA,eAAa,mBAAmB;AAAA,MAC/B,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,OAAO;AAAA,UACP,aAAW;AAAA,UACX;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,eAAa,mBAAmB;AAAA,UAChC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,UACP,GAAG;AAAA,UAEH,WAAC,aACA,iCACE;AAAA,gCAAC,uBAAoB,eAAa,mBAAmB,gBAAiB,GAAG,kBACtE,gBAAM,IAAI,GACb;AAAA,YACA,oBAAC,eAAa,GAAG,kBAAmB,iBAAM;AAAA,YAC1C,qBAAC,kBAAgB,GAAG,kBAClB;AAAA,kCAAC,UAAK,IAAI,gBAAiB,gBAAK;AAAA,cAC/B,cACC;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAa,mBAAmB;AAAA,kBAChC,SAAS,WAAW;AAAA,kBACpB,MAAM,WAAW;AAAA,kBACjB,UAAU;AAAA,kBACV,WAAW;AAAA,kBACX,UAAU;AAAA,kBACV,aAAa,CAAC;AAAA,kBACd,OAAO,WAAW;AAAA,kBACjB,GAAG;AAAA,kBAEH,qBAAW;AAAA;AAAA,cACd;AAAA,eAEJ;AAAA,YACC,kBACC;AAAA,cAAC;AAAA;AAAA,gBACC,eAAa,mBAAmB;AAAA,gBAChC,YAAW;AAAA,gBACX,UAAU;AAAA,gBACV,SAAS;AAAA,gBACT,cAAW;AAAA,gBACV,GAAG;AAAA,gBAEJ,8BAAC,UAAO,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,YACjC,IACE;AAAA,aACN,IAEA,oBAAC,cAAW;AAAA;AAAA,MAEhB;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -7,6 +7,7 @@ const BANNER_TYPES = {
|
|
|
7
7
|
WARNING: "warning",
|
|
8
8
|
DANGER: "danger"
|
|
9
9
|
};
|
|
10
|
+
const BANNER_BODY_ID = "ds-banner-body";
|
|
10
11
|
const DSBannerSlots = {
|
|
11
12
|
CONTAINER: "container",
|
|
12
13
|
INNER_CONTAINER: "inner-container",
|
|
@@ -24,6 +25,7 @@ const DSBannerDatatestid = {
|
|
|
24
25
|
ICON_CONTAINER: "ds-banner-icon"
|
|
25
26
|
};
|
|
26
27
|
export {
|
|
28
|
+
BANNER_BODY_ID,
|
|
27
29
|
BANNER_TYPES,
|
|
28
30
|
DSBannerDatatestid,
|
|
29
31
|
DSBannerName,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSBannerName = 'DSBanner';\nexport const BANNER_TYPES = {\n INFO: 'info',\n SUCCESS: 'success',\n WARNING: 'warning',\n DANGER: 'danger',\n} as const;\n\n// previously this was the exported data-testid object\n// the one marked as // ok are the one that works with the slots convention and works with the slotObjectToDataTestIds function\n// the rest are not compatible and needs manual handling\n// export const DSBannerDatatestid = {\n// CONTAINER: 'ds-banner-container', // ok\n// CUSTOM_CONTAINER: 'ds-banner-custom-container', // ok\n// ACTION_LINK: 'ds-banner-action-link', // ok\n// CLOSE_BUTTON: 'ds-banner-close-button', // ok\n// // From here down are not compatible with the slotObjectToDataTestIds function.\n// INNER_CONTAINER: 'ds-banner',\n// ICON_CONTAINER: 'ds-banner-icon',\n// // from here they were not present but they had an asigned Slot.\n// // TITLE\n// // SUBTITLE\n// };\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n\nexport const DSBannerSlots = {\n CONTAINER: 'container',\n INNER_CONTAINER: 'inner-container',\n CUSTOM_CONTAINER: 'custom-container',\n TITLE: 'title',\n SUBTITLE: 'subtitle',\n ICON_CONTAINER: 'icon-container',\n ACTION_LINK: 'action-link',\n CLOSE_BUTTON: 'close-button',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSBannerDatatestid = {\n ...(slotObjectToDataTestIds(DSBannerName, DSBannerSlots) as Record<keyof typeof DSBannerSlots, string>),\n // handling the rest of the data-testids that are not compatible with the slotObjectToDataTestIds function manually to avoid breaking changes\n INNER_CONTAINER: 'ds-banner',\n ICON_CONTAINER: 'ds-banner-icon',\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AACrB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSBannerName = 'DSBanner';\nexport const BANNER_TYPES = {\n INFO: 'info',\n SUCCESS: 'success',\n WARNING: 'warning',\n DANGER: 'danger',\n} as const;\n\nexport const BANNER_BODY_ID = 'ds-banner-body';\n\n// previously this was the exported data-testid object\n// the one marked as // ok are the one that works with the slots convention and works with the slotObjectToDataTestIds function\n// the rest are not compatible and needs manual handling\n// export const DSBannerDatatestid = {\n// CONTAINER: 'ds-banner-container', // ok\n// CUSTOM_CONTAINER: 'ds-banner-custom-container', // ok\n// ACTION_LINK: 'ds-banner-action-link', // ok\n// CLOSE_BUTTON: 'ds-banner-close-button', // ok\n// // From here down are not compatible with the slotObjectToDataTestIds function.\n// INNER_CONTAINER: 'ds-banner',\n// ICON_CONTAINER: 'ds-banner-icon',\n// // from here they were not present but they had an asigned Slot.\n// // TITLE\n// // SUBTITLE\n// };\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n\nexport const DSBannerSlots = {\n CONTAINER: 'container',\n INNER_CONTAINER: 'inner-container',\n CUSTOM_CONTAINER: 'custom-container',\n TITLE: 'title',\n SUBTITLE: 'subtitle',\n ICON_CONTAINER: 'icon-container',\n ACTION_LINK: 'action-link',\n CLOSE_BUTTON: 'close-button',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const DSBannerDatatestid = {\n ...(slotObjectToDataTestIds(DSBannerName, DSBannerSlots) as Record<keyof typeof DSBannerSlots, string>),\n // handling the rest of the data-testids that are not compatible with the slotObjectToDataTestIds function manually to avoid breaking changes\n INNER_CONTAINER: 'ds-banner',\n ICON_CONTAINER: 'ds-banner-icon',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AACrB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEO,MAAM,iBAAiB;AAoBvB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;AAGO,MAAM,qBAAqB;AAAA,EAChC,GAAI,wBAAwB,cAAc,aAAa;AAAA;AAAA,EAEvD,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,6 +5,7 @@ export declare const BANNER_TYPES: {
|
|
|
5
5
|
readonly WARNING: "warning";
|
|
6
6
|
readonly DANGER: "danger";
|
|
7
7
|
};
|
|
8
|
+
export declare const BANNER_BODY_ID = "ds-banner-body";
|
|
8
9
|
export declare const DSBannerSlots: {
|
|
9
10
|
readonly CONTAINER: "container";
|
|
10
11
|
readonly INNER_CONTAINER: "inner-container";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-banner",
|
|
3
|
-
"version": "3.53.0-beta.
|
|
3
|
+
"version": "3.53.0-beta.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Banner",
|
|
6
6
|
"files": [
|
|
@@ -38,18 +38,18 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@xstyled/system": "~3.7.3",
|
|
40
40
|
"@xstyled/util": "~3.7.0",
|
|
41
|
-
"@elliemae/ds-button-v2": "3.53.0-beta.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-icons": "3.53.0-beta.
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
41
|
+
"@elliemae/ds-button-v2": "3.53.0-beta.3",
|
|
42
|
+
"@elliemae/ds-grid": "3.53.0-beta.3",
|
|
43
|
+
"@elliemae/ds-props-helpers": "3.53.0-beta.3",
|
|
44
|
+
"@elliemae/ds-icons": "3.53.0-beta.3",
|
|
45
|
+
"@elliemae/ds-system": "3.53.0-beta.3",
|
|
46
|
+
"@elliemae/ds-typescript-helpers": "3.53.0-beta.3"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@elliemae/pui-cli": "9.0.0-next.63",
|
|
50
50
|
"jest": "~29.7.0",
|
|
51
51
|
"styled-components": "~5.3.9",
|
|
52
|
-
"@elliemae/ds-monorepo-devops": "3.53.0-beta.
|
|
52
|
+
"@elliemae/ds-monorepo-devops": "3.53.0-beta.3"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"lodash-es": "^4.17.21",
|