@elliemae/ds-banner 3.80.0-next.30 → 3.80.0-next.35
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 +15 -13
- package/dist/cjs/DSBanner.js.map +2 -2
- package/dist/cjs/DSBannerContent.js +7 -5
- package/dist/cjs/DSBannerContent.js.map +2 -2
- package/dist/cjs/{exported-related → constants}/index.js +3 -3
- package/dist/cjs/constants/index.js.map +7 -0
- package/dist/cjs/index.js +5 -5
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +11 -6
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +23 -23
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/typescript-testing/slot-props.js.map +1 -1
- package/dist/cjs/typescript-testing/typescript-banner-valid.js +2 -1
- package/dist/cjs/typescript-testing/typescript-banner-valid.js.map +2 -2
- package/dist/cjs/usePageNotice.js +53 -0
- package/dist/cjs/usePageNotice.js.map +7 -0
- package/dist/esm/DSBanner.js +10 -8
- package/dist/esm/DSBanner.js.map +2 -2
- package/dist/esm/DSBannerContent.js +5 -3
- package/dist/esm/DSBannerContent.js.map +2 -2
- package/dist/esm/constants/index.js.map +7 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +8 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +2 -2
- package/dist/esm/styles.js.map +1 -1
- package/dist/esm/typescript-testing/slot-props.js.map +1 -1
- package/dist/esm/typescript-testing/typescript-banner-valid.js +2 -1
- package/dist/esm/typescript-testing/typescript-banner-valid.js.map +2 -2
- package/dist/esm/usePageNotice.js +23 -0
- package/dist/esm/usePageNotice.js.map +7 -0
- package/dist/types/DSBannerContent.d.ts +2 -0
- package/dist/types/{exported-related → constants}/index.d.ts +6 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +2 -1
- package/dist/types/usePageNotice.d.ts +11 -0
- package/package.json +10 -10
- package/dist/cjs/exported-related/index.js.map +0 -7
- package/dist/esm/exported-related/index.js.map +0 -7
- /package/dist/esm/{exported-related → constants}/index.js +0 -0
package/dist/cjs/DSBanner.js
CHANGED
|
@@ -39,10 +39,10 @@ var import_ds_icons = require("@elliemae/ds-icons");
|
|
|
39
39
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
40
|
var import_react = __toESM(require("react"));
|
|
41
41
|
var import_react_dom = __toESM(require("react-dom"));
|
|
42
|
-
var import_uid = require("uid");
|
|
43
42
|
var import_ds_system = require("@elliemae/ds-system");
|
|
44
43
|
var import_DSBannerContent = require("./DSBannerContent.js");
|
|
45
|
-
var
|
|
44
|
+
var import_constants = require("./constants/index.js");
|
|
45
|
+
var import_usePageNotice = require("./usePageNotice.js");
|
|
46
46
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
47
47
|
var import_styles = require("./styles.js");
|
|
48
48
|
const outOfTheBoxCols = ["auto", "1fr"];
|
|
@@ -68,7 +68,7 @@ const LiveRegionCorrectlyImplemented = ({
|
|
|
68
68
|
innerRef,
|
|
69
69
|
"aria-atomic": "true",
|
|
70
70
|
"aria-live": typeMap[announcementType],
|
|
71
|
-
"data-testid":
|
|
71
|
+
"data-testid": import_constants.DSBannerDatatestid.LIVE_REGION_PORTAL,
|
|
72
72
|
...ownerPropsConfig
|
|
73
73
|
}
|
|
74
74
|
),
|
|
@@ -90,6 +90,7 @@ const DSBanner = (props) => {
|
|
|
90
90
|
actionRef,
|
|
91
91
|
withLiveRegionAnnouncement,
|
|
92
92
|
isPageNotice,
|
|
93
|
+
bannerId,
|
|
93
94
|
...rest
|
|
94
95
|
} = propsWithDefaults;
|
|
95
96
|
const { height: globalHeight, ...globalAttrs } = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
|
|
@@ -115,7 +116,7 @@ const DSBanner = (props) => {
|
|
|
115
116
|
},
|
|
116
117
|
[actionRef]
|
|
117
118
|
);
|
|
118
|
-
const
|
|
119
|
+
const { baseId, contentIds, pageNoticeNameProps } = (0, import_usePageNotice.usePageNotice)(propsWithDefaults, props, globalAttrs);
|
|
119
120
|
const handleOnKeyDownToClose = (0, import_react.useCallback)(
|
|
120
121
|
(e) => {
|
|
121
122
|
if (e.key === "Escape") {
|
|
@@ -143,7 +144,7 @@ const DSBanner = (props) => {
|
|
|
143
144
|
return getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
144
145
|
LiveRegionCorrectlyImplemented,
|
|
145
146
|
{
|
|
146
|
-
id: `${
|
|
147
|
+
id: `${baseId}-live-region`,
|
|
147
148
|
innerRef: liveRegionRef,
|
|
148
149
|
announcementType: withLiveRegionAnnouncement,
|
|
149
150
|
ownerPropsConfig
|
|
@@ -153,10 +154,11 @@ const DSBanner = (props) => {
|
|
|
153
154
|
import_styles.StyledBannerContainer,
|
|
154
155
|
{
|
|
155
156
|
onKeyDown: handleOnKeyDownToClose,
|
|
156
|
-
"data-testid":
|
|
157
|
+
"data-testid": import_constants.DSBannerDatatestid.CONTAINER,
|
|
157
158
|
innerRef: handleActionRefForContainer,
|
|
158
159
|
tabIndex: -1,
|
|
159
160
|
role: isPageNotice ? "region" : void 0,
|
|
161
|
+
...pageNoticeNameProps,
|
|
160
162
|
...containerProps,
|
|
161
163
|
...globalAttrs,
|
|
162
164
|
...xstyledAttrs,
|
|
@@ -168,22 +170,22 @@ const DSBanner = (props) => {
|
|
|
168
170
|
{
|
|
169
171
|
cols: innerContainerCols,
|
|
170
172
|
"data-type": type,
|
|
171
|
-
"data-testid":
|
|
173
|
+
"data-testid": import_constants.DSBannerDatatestid.INNER_CONTAINER,
|
|
172
174
|
role: withLiveRegionAnnouncement === "alert" ? "alert" : void 0,
|
|
173
|
-
id:
|
|
175
|
+
id: baseId,
|
|
174
176
|
...ownerPropsConfig,
|
|
175
|
-
children: !CustomBody ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSBannerContent.DSBannerContent, { propsWithDefaults }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomBody, {})
|
|
177
|
+
children: !CustomBody ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSBannerContent.DSBannerContent, { propsWithDefaults, ...contentIds }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomBody, {})
|
|
176
178
|
}
|
|
177
179
|
),
|
|
178
180
|
!CustomBody && showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
179
181
|
import_styles.StyledCloseButton,
|
|
180
182
|
{
|
|
181
|
-
"data-testid":
|
|
183
|
+
"data-testid": import_constants.DSBannerDatatestid.CLOSE_BUTTON,
|
|
182
184
|
buttonType: "icon",
|
|
183
185
|
innerRef: closeBtnRef,
|
|
184
186
|
onClick: onClose,
|
|
185
187
|
"aria-label": "Visually dismiss the banner",
|
|
186
|
-
"aria-describedby":
|
|
188
|
+
"aria-describedby": baseId,
|
|
187
189
|
...ownerPropsConfig,
|
|
188
190
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseX, { width: 12, height: 12 })
|
|
189
191
|
}
|
|
@@ -192,7 +194,7 @@ const DSBanner = (props) => {
|
|
|
192
194
|
getIsLiveRegion(withLiveRegionAnnouncement) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
193
195
|
LiveRegionCorrectlyImplemented,
|
|
194
196
|
{
|
|
195
|
-
id: `${
|
|
197
|
+
id: `${baseId}-live-region`,
|
|
196
198
|
innerRef: liveRegionRef,
|
|
197
199
|
announcementType: withLiveRegionAnnouncement,
|
|
198
200
|
ownerPropsConfig
|
|
@@ -202,7 +204,7 @@ const DSBanner = (props) => {
|
|
|
202
204
|
}
|
|
203
205
|
);
|
|
204
206
|
};
|
|
205
|
-
DSBanner.displayName =
|
|
207
|
+
DSBanner.displayName = import_constants.DSBannerName;
|
|
206
208
|
const DSBannerWithSchema = (0, import_ds_props_helpers.describe)(DSBanner);
|
|
207
209
|
DSBannerWithSchema.propTypes = import_react_desc_prop_types.DSBannerPropTypesSchema;
|
|
208
210
|
var DSBanner_default = DSBanner;
|
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": ["import { CloseX } from '@elliemae/ds-icons';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport ReactDOM from 'react-dom';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDnB;AAhDJ,sBAAuB;AACvB,8BAMO;AACP,mBAAuD;AACvD,uBAAqB;AACrB,
|
|
4
|
+
"sourcesContent": ["import { CloseX } from '@elliemae/ds-icons';\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport ReactDOM from 'react-dom';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSBannerContent } from './DSBannerContent.js';\nimport { DSBannerDatatestid, DSBannerName } from './constants/index.js';\nimport { usePageNotice } from './usePageNotice.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBannerPropTypesSchema } from './react-desc-prop-types.js';\nimport {\n StyledLiveRegionPortal,\n StyledBannerContainer,\n StyledBannerLayout,\n StyledCloseButton,\n StyledInnerContainer,\n} from './styles.js';\n\nconst outOfTheBoxCols = ['auto', '1fr'];\nconst outOfTheBoxColsSmallLayout = ['auto', '1fr'];\nconst colsWithCustomBody = ['1fr', 'auto'];\nconst typeMap = {\n alert: undefined,\n polite: 'polite',\n assertive: 'assertive',\n none: 'off',\n} as const;\n\nconst getIsLiveRegion = (type: string) => type === 'polite' || type === 'assertive';\n\nconst LiveRegionCorrectlyImplemented = ({\n id,\n innerRef,\n announcementType,\n ownerPropsConfig,\n}: {\n id: string;\n innerRef: React.Ref<HTMLDivElement>;\n announcementType: 'alert' | 'polite' | 'assertive' | 'none';\n ownerPropsConfig: Record<string, unknown>;\n}) =>\n ReactDOM.createPortal(\n <StyledLiveRegionPortal\n id={id}\n innerRef={innerRef}\n aria-atomic=\"true\"\n // off is never going to be printed because this portal is not printed when announcement is none\n // the off is just a quick hack to circumvent typescript typechecks in the static building\n aria-live={typeMap[announcementType]}\n data-testid={DSBannerDatatestid.LIVE_REGION_PORTAL}\n {...ownerPropsConfig}\n />,\n document.body,\n );\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 withLiveRegionAnnouncement,\n isPageNotice,\n bannerId,\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 const xstyledAttrs = useGetXstyledProps(rest);\n\n const layoutMode = useGetLayoutMode();\n const isSmall = layoutMode === 's' || layoutMode === 'xs';\n const innerContainerCols = useMemo(() => {\n if (CustomBody) return colsWithCustomBody;\n return isSmall ? outOfTheBoxColsSmallLayout : outOfTheBoxCols;\n }, [CustomBody, isSmall]);\n\n const handleActionRefForContainer = useCallback<React.RefCallback<HTMLDivElement>>(\n (containerNode) => {\n if (containerNode && actionRef && actionRef.current) {\n actionRef.current.focusOnWrapper = () => {\n if (containerNode) {\n setTimeout(() => {\n containerNode?.focus();\n }, 300);\n }\n };\n }\n },\n [actionRef],\n );\n\n const { baseId, contentIds, pageNoticeNameProps } = usePageNotice(propsWithDefaults, props, globalAttrs);\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 const liveRegionRef = React.useRef<HTMLDivElement>(null);\n const isOpenRef = React.useRef(isOpen);\n isOpenRef.current = isOpen;\n const textToAnnounceRef = React.useRef(`${label} ${body}`);\n textToAnnounceRef.current = `${label} ${body}`;\n const read = React.useCallback(() => {\n if (liveRegionRef.current) {\n if (isOpenRef.current) liveRegionRef.current.textContent = textToAnnounceRef.current;\n else liveRegionRef.current.textContent = '';\n }\n }, []);\n\n useEffect(() => {\n if (isOpen && getIsLiveRegion(withLiveRegionAnnouncement)) read();\n }, [isOpen, withLiveRegionAnnouncement, read]);\n\n // this used to \"try\" to animate the banner closing\n // in reality the closing animation has never actually worked (the banner just disappears, due to using \"&&\" instead of \"||\" in the logic)\n // given that it has never worked, and the complexity it adds to the code, we are officially removing the closing animation for now\n // if there is a future need for it, we can re-visit adding it back in.\n if (!isOpen)\n return getIsLiveRegion(withLiveRegionAnnouncement) ? (\n <LiveRegionCorrectlyImplemented\n id={`${baseId}-live-region`}\n innerRef={liveRegionRef}\n announcementType={withLiveRegionAnnouncement}\n ownerPropsConfig={ownerPropsConfig}\n />\n ) : null;\n\n return (\n <StyledBannerContainer\n onKeyDown={handleOnKeyDownToClose}\n data-testid={DSBannerDatatestid.CONTAINER}\n innerRef={handleActionRefForContainer}\n tabIndex={-1}\n role={isPageNotice ? 'region' : undefined}\n {...pageNoticeNameProps}\n {...containerProps}\n {...globalAttrs}\n {...xstyledAttrs}\n {...ownerPropsConfig}\n >\n <StyledBannerLayout {...ownerPropsConfig} $type={type}>\n <StyledInnerContainer\n cols={innerContainerCols}\n data-type={type}\n data-testid={DSBannerDatatestid.INNER_CONTAINER}\n role={withLiveRegionAnnouncement === 'alert' ? 'alert' : undefined}\n id={baseId}\n {...ownerPropsConfig}\n >\n {!CustomBody ? <DSBannerContent propsWithDefaults={propsWithDefaults} {...contentIds} /> : <CustomBody />}\n </StyledInnerContainer>\n {!CustomBody && showCloseButton ? (\n <StyledCloseButton\n data-testid={DSBannerDatatestid.CLOSE_BUTTON}\n buttonType=\"icon\"\n innerRef={closeBtnRef}\n onClick={onClose}\n aria-label=\"Visually dismiss the banner\"\n aria-describedby={baseId}\n {...ownerPropsConfig}\n >\n <CloseX width={12} height={12} />\n </StyledCloseButton>\n ) : null}\n </StyledBannerLayout>\n {getIsLiveRegion(withLiveRegionAnnouncement) ? (\n <LiveRegionCorrectlyImplemented\n id={`${baseId}-live-region`}\n innerRef={liveRegionRef}\n announcementType={withLiveRegionAnnouncement}\n ownerPropsConfig={ownerPropsConfig}\n />\n ) : null}\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": ["ReactDOM", "React"]
|
|
7
7
|
}
|
|
@@ -38,7 +38,7 @@ var import_ds_icons = require("@elliemae/ds-icons");
|
|
|
38
38
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
39
|
var import_ds_typography = require("@elliemae/ds-typography");
|
|
40
40
|
var import_react = __toESM(require("react"));
|
|
41
|
-
var
|
|
41
|
+
var import_constants = require("./constants/index.js");
|
|
42
42
|
var import_styles = require("./styles.js");
|
|
43
43
|
const icons = {
|
|
44
44
|
success: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.SuccessFill, { color: ["success", "900"], width: "20px", height: "20px" }),
|
|
@@ -49,6 +49,8 @@ const icons = {
|
|
|
49
49
|
const DSBannerContent = (props) => {
|
|
50
50
|
const {
|
|
51
51
|
propsWithDefaults,
|
|
52
|
+
titleId,
|
|
53
|
+
bodyId,
|
|
52
54
|
propsWithDefaults: { type, label, body, actionLink, actionRef }
|
|
53
55
|
} = props;
|
|
54
56
|
const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefaults, { ...props });
|
|
@@ -73,17 +75,17 @@ const DSBannerContent = (props) => {
|
|
|
73
75
|
}
|
|
74
76
|
}, []);
|
|
75
77
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
76
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledIconContainer, { "data-testid":
|
|
78
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledIconContainer, { "data-testid": import_constants.DSBannerDatatestid.ICON_CONTAINER, ...ownerPropsConfig, children: icons[type] }),
|
|
77
79
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledBody, { ...ownerPropsConfig, children: [
|
|
78
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { variant: import_ds_typography.TYPOGRAPHY_VARIANTS.H5_STRONG, ...ownerPropsConfig, children: label }),
|
|
79
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledSubTitle, { id:
|
|
80
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { id: titleId, variant: import_ds_typography.TYPOGRAPHY_VARIANTS.H5_STRONG, ...ownerPropsConfig, children: label }),
|
|
81
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledSubTitle, { id: bodyId, variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1, ...ownerPropsConfig, children: [
|
|
80
82
|
body,
|
|
81
83
|
actionLink && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
82
84
|
!body ? "" : " ",
|
|
83
85
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
84
86
|
import_styles.StyledActionLink,
|
|
85
87
|
{
|
|
86
|
-
"data-testid":
|
|
88
|
+
"data-testid": import_constants.DSBannerDatatestid.ACTION_LINK,
|
|
87
89
|
onClick: actionLink.onClick,
|
|
88
90
|
href: actionLink.href,
|
|
89
91
|
innerRef: handleActionRefForLink,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSBannerContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React, { useCallback } from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUZ;AATX,sBAAuE;AACvE,8BAA8B;AAC9B,2BAAoC;AACpC,mBAAmC;AACnC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React, { useCallback } from 'react';\nimport { DSBannerDatatestid } from './constants/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\nimport { StyledActionLink, StyledIconContainer, StyledSubTitle, StyledTitle, StyledBody } from './styles.js';\n\nexport const icons: Record<string, JSX.Element> = {\n success: <SuccessFill color={['success', '900']} width=\"20px\" height=\"20px\" />,\n info: <InfoFill color={['brand-primary', '600']} width=\"20px\" height=\"20px\" />,\n danger: <AlertsDetailFill color={['danger', '900']} width=\"20px\" height=\"20px\" />,\n warning: <WarningSquare color={['warning', '900']} width=\"20px\" height=\"20px\" />,\n};\n\ninterface DSBannerContentProps {\n propsWithDefaults: DSBannerT.InternalProps;\n titleId?: string;\n bodyId?: string;\n}\n\nexport const DSBannerContent: React.ComponentType<DSBannerContentProps> = (props) => {\n const {\n propsWithDefaults,\n titleId,\n bodyId,\n propsWithDefaults: { type, label, body, actionLink, actionRef },\n } = props;\n const ownerPropsConfig = useOwnerProps(propsWithDefaults, { ...props });\n\n const linkRef = React.useRef<HTMLAnchorElement>(null) as React.MutableRefObject<HTMLAnchorElement>;\n\n const handleActionRefForLink = useCallback<React.RefCallback<HTMLAnchorElement>>(\n (linkNode) => {\n if (linkNode) {\n linkRef.current = linkNode;\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnLink = () => {\n linkNode?.focus?.();\n };\n }\n }\n },\n [actionRef],\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 return (\n <>\n <StyledIconContainer data-testid={DSBannerDatatestid.ICON_CONTAINER} {...ownerPropsConfig}>\n {icons[type]}\n </StyledIconContainer>\n <StyledBody {...ownerPropsConfig}>\n <StyledTitle id={titleId} variant={TYPOGRAPHY_VARIANTS.H5_STRONG} {...ownerPropsConfig}>\n {label}\n </StyledTitle>\n <StyledSubTitle id={bodyId} variant={TYPOGRAPHY_VARIANTS.B1} {...ownerPropsConfig}>\n {body}\n {actionLink && (\n <>\n {/* This way of handling the space is making use of the browser default\n white-space clamping, avoiding lots of JS code. */}\n {!body ? '' : ' '}\n <StyledActionLink\n data-testid={DSBannerDatatestid.ACTION_LINK}\n onClick={actionLink.onClick}\n href={actionLink.href}\n innerRef={handleActionRefForLink}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\n isBodyEmpty={!body}\n title={actionLink.label}\n {...ownerPropsConfig}\n >\n {actionLink.label}\n </StyledActionLink>\n </>\n )}\n </StyledSubTitle>\n </StyledBody>\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUZ;AATX,sBAAuE;AACvE,8BAA8B;AAC9B,2BAAoC;AACpC,mBAAmC;AACnC,uBAAmC;AAEnC,oBAA+F;AAExF,MAAM,QAAqC;AAAA,EAChD,SAAS,4CAAC,+BAAY,OAAO,CAAC,WAAW,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,MAAM,4CAAC,4BAAS,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,QAAQ,4CAAC,oCAAiB,OAAO,CAAC,UAAU,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC/E,SAAS,4CAAC,iCAAc,OAAO,CAAC,WAAW,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAChF;AAQO,MAAM,kBAA6D,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,EAAE,MAAM,OAAO,MAAM,YAAY,UAAU;AAAA,EAChE,IAAI;AACJ,QAAM,uBAAmB,uCAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,UAAU,aAAAA,QAAM,OAA0B,IAAI;AAEpD,QAAM,6BAAyB;AAAA,IAC7B,CAAC,aAAa;AACZ,UAAI,UAAU;AACZ,gBAAQ,UAAU;AAClB,YAAI,aAAa,UAAU,SAAS;AAClC,oBAAU,QAAQ,cAAc,MAAM;AACpC,sBAAU,QAAQ;AAAA,UACpB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,sBAAkB,0BAAY,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,SACE,4EACE;AAAA,gDAAC,qCAAoB,eAAa,oCAAmB,gBAAiB,GAAG,kBACtE,gBAAM,IAAI,GACb;AAAA,IACA,6CAAC,4BAAY,GAAG,kBACd;AAAA,kDAAC,6BAAY,IAAI,SAAS,SAAS,yCAAoB,WAAY,GAAG,kBACnE,iBACH;AAAA,MACA,6CAAC,gCAAe,IAAI,QAAQ,SAAS,yCAAoB,IAAK,GAAG,kBAC9D;AAAA;AAAA,QACA,cACC,4EAGG;AAAA,WAAC,OAAO,KAAK;AAAA,UACd;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,oCAAmB;AAAA,cAChC,SAAS,WAAW;AAAA,cACpB,MAAM,WAAW;AAAA,cACjB,UAAU;AAAA,cACV,WAAW;AAAA,cACX,UAAU;AAAA,cACV,aAAa,CAAC;AAAA,cACd,OAAO,WAAW;AAAA,cACjB,GAAG;AAAA,cAEH,qBAAW;AAAA;AAAA,UACd;AAAA,WACF;AAAA,SAEJ;AAAA,OACF;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -26,15 +26,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
26
26
|
mod
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var
|
|
30
|
-
__export(
|
|
29
|
+
var constants_exports = {};
|
|
30
|
+
__export(constants_exports, {
|
|
31
31
|
BANNER_BODY_ID: () => BANNER_BODY_ID,
|
|
32
32
|
BANNER_TYPES: () => BANNER_TYPES,
|
|
33
33
|
DSBannerDatatestid: () => DSBannerDatatestid,
|
|
34
34
|
DSBannerName: () => DSBannerName,
|
|
35
35
|
DSBannerSlots: () => DSBannerSlots
|
|
36
36
|
});
|
|
37
|
-
module.exports = __toCommonJS(
|
|
37
|
+
module.exports = __toCommonJS(constants_exports);
|
|
38
38
|
var React = __toESM(require("react"));
|
|
39
39
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
40
|
const DSBannerName = "DSBanner";
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/constants/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/**\n * @deprecated legacy export, no longer rendered or used by the component (PUI-19089).\n * The body used to render with this fixed id, which duplicated across banners. The body id is now\n * `<bannerId>-body`, where `bannerId` is generated per instance or provided through the `bannerId` prop.\n * Kept only so imports of the old constant keep resolving.\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 // reserved slot: declared but never rendered. It is part of the public surface (DSBannerDatatestid, dsBannerCustomContainer slot prop)\n // and pinned by DSBanner.data-testid.test.js, so removing it is a breaking change. See KNOWN_INTENTIONAL_DEVIATIONS.md\n CUSTOM_CONTAINER: 'custom-container',\n BODY: 'body',\n TITLE: 'title',\n SUBTITLE: 'subtitle',\n ICON_CONTAINER: 'icon-container',\n ACTION_LINK: 'action-link',\n CLOSE_BUTTON: 'close-button',\n LAYOUT: 'layout',\n LIVE_REGION_PORTAL: 'live-region-portal',\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;AAQO,MAAM,iBAAiB;AAoBvB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA;AAAA;AAAA,EAGjB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,oBAAoB;AACtB;AAGO,MAAM,qBAAqB;AAAA,EAChC,OAAI,0CAAwB,cAAc,aAAa;AAAA;AAAA,EAEvD,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -28,15 +28,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var index_exports = {};
|
|
30
30
|
__export(index_exports, {
|
|
31
|
-
BANNER_TYPES: () =>
|
|
31
|
+
BANNER_TYPES: () => import_constants.BANNER_TYPES,
|
|
32
32
|
DSBanner: () => import_DSBanner.DSBanner,
|
|
33
|
-
DSBannerDatatestid: () =>
|
|
34
|
-
DSBannerName: () =>
|
|
35
|
-
DSBannerSlots: () =>
|
|
33
|
+
DSBannerDatatestid: () => import_constants.DSBannerDatatestid,
|
|
34
|
+
DSBannerName: () => import_constants.DSBannerName,
|
|
35
|
+
DSBannerSlots: () => import_constants.DSBannerSlots,
|
|
36
36
|
DSBannerWithSchema: () => import_DSBanner.DSBannerWithSchema
|
|
37
37
|
});
|
|
38
38
|
module.exports = __toCommonJS(index_exports);
|
|
39
39
|
var React = __toESM(require("react"));
|
|
40
40
|
var import_DSBanner = require("./DSBanner.js");
|
|
41
|
-
var
|
|
41
|
+
var import_constants = require("./constants/index.js");
|
|
42
42
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["// eslint-disable-next-line no-restricted-exports\nexport { DSBanner, DSBannerWithSchema } from './DSBanner.js';\nexport { DSBannerName, BANNER_TYPES, DSBannerSlots, DSBannerDatatestid } from './
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,sBAA6C;AAC7C,
|
|
4
|
+
"sourcesContent": ["// eslint-disable-next-line no-restricted-exports\nexport { DSBanner, DSBannerWithSchema } from './DSBanner.js';\nexport { DSBannerName, BANNER_TYPES, DSBannerSlots, DSBannerDatatestid } from './constants/index.js';\nexport type { DSBannerT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,sBAA6C;AAC7C,uBAA8E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,12 +35,12 @@ __export(react_desc_prop_types_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
38
|
-
var
|
|
38
|
+
var import_constants = require("./constants/index.js");
|
|
39
39
|
const defaultProps = {
|
|
40
40
|
containerProps: {},
|
|
41
41
|
label: "",
|
|
42
42
|
body: "",
|
|
43
|
-
type:
|
|
43
|
+
type: import_constants.BANNER_TYPES.INFO,
|
|
44
44
|
isOpen: true,
|
|
45
45
|
onClose: () => null,
|
|
46
46
|
showCloseButton: true,
|
|
@@ -50,12 +50,12 @@ const defaultProps = {
|
|
|
50
50
|
const DSBannerPropTypes = {
|
|
51
51
|
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
52
52
|
...import_ds_props_helpers.xstyledPropTypes,
|
|
53
|
-
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(
|
|
53
|
+
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSBannerName, import_constants.DSBannerSlots),
|
|
54
54
|
containerProps: import_ds_props_helpers.PropTypes.object.description("Set of Properties attached to the main container.").defaultValue({}),
|
|
55
55
|
label: import_ds_props_helpers.PropTypes.string.description("Banner label.").defaultValue(""),
|
|
56
56
|
body: import_ds_props_helpers.PropTypes.string.description("Banner body content").defaultValue(""),
|
|
57
57
|
CustomBody: import_ds_props_helpers.PropTypes.func.description("Banner custom content").defaultValue(""),
|
|
58
|
-
type: import_ds_props_helpers.PropTypes.oneOf(Object.values(
|
|
58
|
+
type: import_ds_props_helpers.PropTypes.oneOf(Object.values(import_constants.BANNER_TYPES)).description("Banner type.").defaultValue(import_constants.BANNER_TYPES.INFO),
|
|
59
59
|
onClose: import_ds_props_helpers.PropTypes.func.description("Callback when the Banner closes."),
|
|
60
60
|
isOpen: import_ds_props_helpers.PropTypes.bool.description("Whether the Banner is open or closed.").defaultValue(true),
|
|
61
61
|
showCloseButton: import_ds_props_helpers.PropTypes.bool.description("Whether to show close button or not.").defaultValue(true),
|
|
@@ -72,8 +72,13 @@ const DSBannerPropTypes = {
|
|
|
72
72
|
- focusOnWrapper: function to focus the link
|
|
73
73
|
`
|
|
74
74
|
).defaultValue({}),
|
|
75
|
-
withLiveRegionAnnouncement: import_ds_props_helpers.PropTypes.oneOf(["alert", "assertive", "polite"]).description("Whether to announce the banner content in a live region when it opens.").defaultValue("alert"),
|
|
76
|
-
isPageNotice: import_ds_props_helpers.PropTypes.bool.description(
|
|
75
|
+
withLiveRegionAnnouncement: import_ds_props_helpers.PropTypes.oneOf(["alert", "assertive", "polite", "none"]).description("Whether to announce the banner content in a live region when it opens.").defaultValue("alert"),
|
|
76
|
+
isPageNotice: import_ds_props_helpers.PropTypes.bool.description(
|
|
77
|
+
"Whether to add role region to the banner. The region is named by default from the label prop; a name passed via aria-label/aria-labelledby (containerProps or dsBannerContainer) takes precedence."
|
|
78
|
+
).defaultValue(false),
|
|
79
|
+
bannerId: import_ds_props_helpers.PropTypes.string.description(
|
|
80
|
+
`Base id of the banner. Every id the banner renders derives from it: the inner container uses it as is, the title uses "<bannerId>-title", the body uses "<bannerId>-body" and the live region uses "<bannerId>-live-region". When omitted, a unique base is generated per instance ("ds-banner-<random>"). Must start with a letter. Pass your own to reference the banner parts from aria-describedby / aria-labelledby.`
|
|
81
|
+
)
|
|
77
82
|
};
|
|
78
83
|
const DSBannerPropTypesSchema = DSBannerPropTypes;
|
|
79
84
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { MutableRefObject, RefCallback } from 'react';\nimport type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,
|
|
4
|
+
"sourcesContent": ["import type { MutableRefObject, RefCallback } from 'react';\nimport type { XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './constants/index.js';\n\nexport declare namespace DSBannerT {\n export interface ActionRef {\n focusOnWrapper?: () => void;\n focusOnLink?: () => void;\n }\n\n export interface ActionLinkT {\n label: string;\n onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | null;\n href?: string;\n }\n\n export type BannerTypesT = (typeof BANNER_TYPES)[keyof typeof BANNER_TYPES];\n\n export interface RequiredProps {}\n\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n label: string;\n body: string;\n type: BannerTypesT;\n isOpen: boolean;\n onClose: () => void | null;\n showCloseButton: boolean;\n withLiveRegionAnnouncement: 'alert' | 'assertive' | 'polite' | 'none';\n isPageNotice: boolean;\n }\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSBannerName,\n typeof DSBannerSlots\n > {\n actionLink?: ActionLinkT;\n CustomBody?: React.ComponentType<Record<string, unknown>>;\n closeBtnRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n actionRef?: MutableRefObject<ActionRef>;\n bannerId?: string;\n }\n export type SlotFunctionArguments = {\n dsBannerContainer: () => object;\n dsBannerInnerContainer: () => object;\n dsBannerCustomContainer: () => object;\n dsBannerBody: () => object;\n dsBannerTitle: () => object;\n dsBannerSubtitle: () => object;\n dsBannerIconContainer: () => object;\n dsBannerActionLink: () => object;\n dsBannerCloseButton: () => object;\n dsBannerLayout: () => object;\n dsBannerLiveRegionPortal: () => object;\n };\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, XstyledProps, RequiredProps {}\n\n export interface InternalProps extends DefaultProps, OptionalProps, XstyledProps, RequiredProps {}\n}\n\nexport const defaultProps: DSBannerT.DefaultProps = {\n containerProps: {},\n label: '',\n body: '',\n type: BANNER_TYPES.INFO,\n isOpen: true,\n onClose: () => null,\n showCloseButton: true,\n withLiveRegionAnnouncement: 'alert',\n isPageNotice: false,\n};\n\nexport const DSBannerPropTypes: DSPropTypesSchema<DSBannerT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n ...getPropsPerSlotPropTypes(DSBannerName, DSBannerSlots),\n containerProps: PropTypes.object.description('Set of Properties attached to the main container.').defaultValue({}),\n label: PropTypes.string.description('Banner label.').defaultValue(''),\n body: PropTypes.string.description('Banner body content').defaultValue(''),\n CustomBody: PropTypes.func.description('Banner custom content').defaultValue(''),\n type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('Banner type.').defaultValue(BANNER_TYPES.INFO),\n onClose: PropTypes.func.description('Callback when the Banner closes.'),\n isOpen: PropTypes.bool.description('Whether the Banner is open or closed.').defaultValue(true),\n showCloseButton: PropTypes.bool.description('Whether to show close button or not.').defaultValue(true),\n closeBtnRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n actionLink: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func,\n href: PropTypes.string,\n })\n .description('Properties for the Action Link.')\n .defaultValue({}),\n actionRef: PropTypes.object\n .description(\n `\n Reference to use actions:\n - focusOnLink: function to focus the banner\n - focusOnWrapper: function to focus the link\n `,\n )\n .defaultValue({}),\n withLiveRegionAnnouncement: PropTypes.oneOf(['alert', 'assertive', 'polite', 'none'])\n .description('Whether to announce the banner content in a live region when it opens.')\n .defaultValue('alert'),\n isPageNotice: PropTypes.bool\n .description(\n 'Whether to add role region to the banner. The region is named by default from the label prop; a name passed via aria-label/aria-labelledby (containerProps or dsBannerContainer) takes precedence.',\n )\n .defaultValue(false),\n bannerId: PropTypes.string.description(\n `Base id of the banner. Every id the banner renders derives from it: the inner container uses it as is, the title uses \"<bannerId>-title\", the body uses \"<bannerId>-body\" and the live region uses \"<bannerId>-live-region\". When omitted, a unique base is generated per instance (\"ds-banner-<random>\"). Must start with a letter. Pass your own to reference the banner parts from aria-describedby / aria-labelledby.`,\n ),\n};\n\nexport const DSBannerPropTypesSchema = DSBannerPropTypes as unknown as ValidationMap<DSBannerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,uBAA0D;AA2DnD,MAAM,eAAuC;AAAA,EAClD,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM,8BAAa;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS,MAAM;AAAA,EACf,iBAAiB;AAAA,EACjB,4BAA4B;AAAA,EAC5B,cAAc;AAChB;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAG,kDAAyB,+BAAc,8BAAa;AAAA,EACvD,gBAAgB,kCAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EACjH,OAAO,kCAAU,OAAO,YAAY,eAAe,EAAE,aAAa,EAAE;AAAA,EACpE,MAAM,kCAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,EAAE;AAAA,EACzE,YAAY,kCAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,MAAM,kCAAU,MAAM,OAAO,OAAO,6BAAY,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,8BAAa,IAAI;AAAA,EAC7G,SAAS,kCAAU,KAAK,YAAY,kCAAkC;AAAA,EACtE,QAAQ,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,IAAI;AAAA,EAC7F,iBAAiB,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,IAAI;AAAA,EACrG,aAAa,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EACjH,YAAY,kCAAU,MAAM;AAAA,IAC1B,OAAO,kCAAU;AAAA,IACjB,SAAS,kCAAU;AAAA,IACnB,MAAM,kCAAU;AAAA,EAClB,CAAC,EACE,YAAY,iCAAiC,EAC7C,aAAa,CAAC,CAAC;AAAA,EAClB,WAAW,kCAAU,OAClB;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,4BAA4B,kCAAU,MAAM,CAAC,SAAS,aAAa,UAAU,MAAM,CAAC,EACjF,YAAY,wEAAwE,EACpF,aAAa,OAAO;AAAA,EACvB,cAAc,kCAAU,KACrB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,OAAO;AAAA,IACzB;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -45,10 +45,10 @@ var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
|
45
45
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
46
46
|
var import_ds_system = require("@elliemae/ds-system");
|
|
47
47
|
var import_ds_typography = require("@elliemae/ds-typography");
|
|
48
|
-
var
|
|
48
|
+
var import_constants = require("./constants/index.js");
|
|
49
49
|
const StyledBannerContainer = (0, import_ds_system.styled)("div", {
|
|
50
|
-
name:
|
|
51
|
-
slot:
|
|
50
|
+
name: import_constants.DSBannerName,
|
|
51
|
+
slot: import_constants.DSBannerSlots.CONTAINER
|
|
52
52
|
})`
|
|
53
53
|
min-height: 59px;
|
|
54
54
|
overflow: hidden;
|
|
@@ -59,8 +59,8 @@ const StyledBannerContainer = (0, import_ds_system.styled)("div", {
|
|
|
59
59
|
${import_ds_system.xStyledCommonProps}
|
|
60
60
|
`;
|
|
61
61
|
const StyledInnerContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
62
|
-
name:
|
|
63
|
-
slot:
|
|
62
|
+
name: import_constants.DSBannerName,
|
|
63
|
+
slot: import_constants.DSBannerSlots.INNER_CONTAINER
|
|
64
64
|
})`
|
|
65
65
|
padding-right: 4px;
|
|
66
66
|
width: 100%;
|
|
@@ -68,21 +68,21 @@ const StyledInnerContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
68
68
|
`;
|
|
69
69
|
const handleBorderColor = (type, { colors }) => {
|
|
70
70
|
switch (type) {
|
|
71
|
-
case
|
|
71
|
+
case import_constants.BANNER_TYPES.SUCCESS:
|
|
72
72
|
return colors.success[900];
|
|
73
|
-
case
|
|
73
|
+
case import_constants.BANNER_TYPES.INFO:
|
|
74
74
|
return colors.brand[600];
|
|
75
|
-
case
|
|
75
|
+
case import_constants.BANNER_TYPES.WARNING:
|
|
76
76
|
return colors.warning[900];
|
|
77
|
-
case
|
|
77
|
+
case import_constants.BANNER_TYPES.DANGER:
|
|
78
78
|
return colors.danger[900];
|
|
79
79
|
default:
|
|
80
80
|
return "should_not_happen";
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
83
|
const StyledBannerLayout = (0, import_ds_system.styled)("div", {
|
|
84
|
-
name:
|
|
85
|
-
slot:
|
|
84
|
+
name: import_constants.DSBannerName,
|
|
85
|
+
slot: import_constants.DSBannerSlots.LAYOUT
|
|
86
86
|
})`
|
|
87
87
|
display: flex;
|
|
88
88
|
width: 100%;
|
|
@@ -96,25 +96,25 @@ const StyledBannerLayout = (0, import_ds_system.styled)("div", {
|
|
|
96
96
|
}
|
|
97
97
|
`;
|
|
98
98
|
const StyledIconContainer = (0, import_ds_system.styled)("div", {
|
|
99
|
-
name:
|
|
100
|
-
slot:
|
|
99
|
+
name: import_constants.DSBannerName,
|
|
100
|
+
slot: import_constants.DSBannerSlots.ICON_CONTAINER
|
|
101
101
|
})`
|
|
102
102
|
padding-top: 8px;
|
|
103
103
|
margin-right: ${({ theme }) => theme.space.xxs};
|
|
104
104
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
105
105
|
min-width: 0px;
|
|
106
106
|
`;
|
|
107
|
-
const StyledBody = (0, import_ds_system.styled)("div", { name:
|
|
107
|
+
const StyledBody = (0, import_ds_system.styled)("div", { name: import_constants.DSBannerName, slot: import_constants.DSBannerSlots.BODY })`
|
|
108
108
|
padding-top: 9px;
|
|
109
109
|
padding-bottom: 9px;
|
|
110
110
|
`;
|
|
111
|
-
const StyledTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name:
|
|
111
|
+
const StyledTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSBannerName, slot: import_constants.DSBannerSlots.TITLE })`
|
|
112
112
|
color: neutral-700;
|
|
113
113
|
overflow-wrap: break-word;
|
|
114
114
|
white-space: pre-wrap;
|
|
115
115
|
min-width: 0px;
|
|
116
116
|
`;
|
|
117
|
-
const StyledSubTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name:
|
|
117
|
+
const StyledSubTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSBannerName, slot: import_constants.DSBannerSlots.SUBTITLE })`
|
|
118
118
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
119
119
|
overflow-wrap: break-word;
|
|
120
120
|
white-space: pre-wrap;
|
|
@@ -129,13 +129,13 @@ const StyledSubTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypog
|
|
|
129
129
|
}}
|
|
130
130
|
`;
|
|
131
131
|
const StyledActionLink = (0, import_ds_system.styled)("a", {
|
|
132
|
-
name:
|
|
133
|
-
slot:
|
|
132
|
+
name: import_constants.DSBannerName,
|
|
133
|
+
slot: import_constants.DSBannerSlots.ACTION_LINK
|
|
134
134
|
})`
|
|
135
135
|
display: inline-block;
|
|
136
136
|
text-decoration: none;
|
|
137
137
|
line-height: inherit;
|
|
138
|
-
|
|
138
|
+
font-size: inherit;
|
|
139
139
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
140
140
|
color: brand-600;
|
|
141
141
|
min-width: 0px;
|
|
@@ -157,14 +157,14 @@ const StyledActionLink = (0, import_ds_system.styled)("a", {
|
|
|
157
157
|
}
|
|
158
158
|
`;
|
|
159
159
|
const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
|
|
160
|
-
name:
|
|
161
|
-
slot:
|
|
160
|
+
name: import_constants.DSBannerName,
|
|
161
|
+
slot: import_constants.DSBannerSlots.CLOSE_BUTTON
|
|
162
162
|
})`
|
|
163
163
|
margin: 5px;
|
|
164
164
|
`;
|
|
165
165
|
const StyledLiveRegionPortal = (0, import_ds_system.styled)("div", {
|
|
166
|
-
name:
|
|
167
|
-
slot:
|
|
166
|
+
name: import_constants.DSBannerName,
|
|
167
|
+
slot: import_constants.DSBannerSlots.LIVE_REGION_PORTAL
|
|
168
168
|
})`
|
|
169
169
|
clip: rect(0 0 0 0);
|
|
170
170
|
position: absolute;
|
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 { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AAErB,uBAA2C;AAC3C,2BAA6B;AAC7B,
|
|
4
|
+
"sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { BANNER_TYPES, DSBannerName, DSBannerSlots } from './constants/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {}\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n min-height: 59px;\n overflow: hidden;\n transition: all 0.5s ease-in;\n @starting-style {\n max-height: 0px;\n }\n ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n padding-right: 4px;\n width: 100%;\n min-width: 0;\n`;\n\nconst handleBorderColor = (\n type: DSBannerT.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 default:\n return 'should_not_happen';\n }\n};\ninterface StyledBannerLayoutT {\n $type: DSBannerT.BannerTypesT;\n}\nexport const StyledBannerLayout = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.LAYOUT,\n})<StyledBannerLayoutT>`\n display: flex;\n width: 100%;\n align-items: flex-start;\n justify-content: space-between;\n background-color: neutral-000;\n border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};\n & > :first-child {\n flex: 1;\n min-width: 0;\n }\n`;\n\nexport const StyledIconContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.ICON_CONTAINER,\n})`\n padding-top: 8px;\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n min-width: 0px;\n`;\n\nexport const StyledBody = styled('div', { name: DSBannerName, slot: DSBannerSlots.BODY })`\n padding-top: 9px;\n padding-bottom: 9px;\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n color: neutral-700;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n ${({ theme }) => {\n if (['s', 'xs'].includes(theme.layoutMode!)) {\n return `\n grid-column: 1 / -1;\n `;\n }\n return '';\n }}\n`;\n\ninterface StyledActionLinkT {\n isBodyEmpty: boolean;\n}\nexport const StyledActionLink = styled('a', {\n name: DSBannerName,\n slot: DSBannerSlots.ACTION_LINK,\n})<StyledActionLinkT>`\n display: inline-block;\n text-decoration: none;\n line-height: inherit;\n font-size: inherit;\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: brand-600;\n min-width: 0px;\n position: relative;\n &:focus {\n outline: none;\n &:after {\n position: absolute;\n content: '';\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n border-radius: 2px;\n border: 2px solid brand-700;\n box-shadow: 0 0 0 1px brand-700;\n pointer-events: none;\n }\n }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n name: DSBannerName,\n slot: DSBannerSlots.CLOSE_BUTTON,\n})`\n margin: 5px;\n`;\n\nexport const StyledLiveRegionPortal = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.LIVE_REGION_PORTAL,\n})`\n clip: rect(0 0 0 0);\n position: absolute;\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;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AAErB,uBAA2C;AAC3C,2BAA6B;AAC7B,uBAA0D;AAInD,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOG,mCAAkB;AAAA;AAIf,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,oBAAoB,CACxB,MACA,EAAE,OAAO,MACE;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK,8BAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,8BAAa;AAChB,aAAO,OAAO,MAAM,GAAG;AAAA,IACzB,KAAK,8BAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,8BAAa;AAChB,aAAO,OAAO,OAAO,GAAG;AAAA,IAC1B;AACE,aAAO;AAAA,EACX;AACF;AAIO,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAM4B,CAAC,EAAE,OAAO,MAAM,MAAM,kBAAkB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3E,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA,kBAEiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA,iBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAIvC,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,KAAK,CAAC;AAAA;AAAA;AAAA;AAKjF,MAAM,kBAAc,yBAAO,mCAAc,EAAE,MAAM,+BAAc,MAAM,+BAAc,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1F,MAAM,qBAAiB,yBAAO,mCAAc,EAAE,MAAM,+BAAc,MAAM,+BAAc,SAAS,CAAC;AAAA,iBACtF,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,IAIrD,CAAC,EAAE,MAAM,MAAM;AACf,MAAI,CAAC,KAAK,IAAI,EAAE,SAAS,MAAM,UAAW,GAAG;AAC3C,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AACT,CAAC;AAAA;AAMI,MAAM,uBAAmB,yBAAO,KAAK;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBlD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAIM,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSBannerName, DSBannerSlots } from '../
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSBannerName, DSBannerSlots } from '../constants/index.js';\nimport type { DSBannerT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSBannerT.Props> = {\n dsBannerContainer: { 'aria-label': 'just a typescript test' },\n dsBannerInnerContainer: { 'aria-label': 'just a typescript test' },\n dsBannerCustomContainer: { 'aria-label': 'just a typescript test' },\n dsBannerBody: { 'aria-label': 'just a typescript test' },\n dsBannerTitle: { 'aria-label': 'just a typescript test' },\n dsBannerSubtitle: { 'aria-label': 'just a typescript test' },\n dsBannerIconContainer: { 'aria-label': 'just a typescript test' },\n dsBannerActionLink: { 'aria-label': 'just a typescript test' },\n dsBannerCloseButton: { 'aria-label': 'just a typescript test' },\n dsBannerLayout: { 'aria-label': 'just a typescript test' },\n dsBannerLiveRegionPortal: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSBannerT.SlotFunctionArguments = {\n dsBannerContainer: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerInnerContainer: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerCustomContainer: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerBody: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerTitle: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerSubtitle: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerIconContainer: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerActionLink: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerCloseButton: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerLayout: () => ({ 'aria-label': 'just a typescript test' }),\n dsBannerLiveRegionPortal: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n TypescriptHelpersT.PropsForSlots<typeof DSBannerName, typeof DSBannerSlots>\n> = SlotPropsAsFunctions;\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACMvB,MAAM,iBAA2C;AAAA,EAC/C,mBAAmB,EAAE,cAAc,yBAAyB;AAAA,EAC5D,wBAAwB,EAAE,cAAc,yBAAyB;AAAA,EACjE,yBAAyB,EAAE,cAAc,yBAAyB;AAAA,EAClE,cAAc,EAAE,cAAc,yBAAyB;AAAA,EACvD,eAAe,EAAE,cAAc,yBAAyB;AAAA,EACxD,kBAAkB,EAAE,cAAc,yBAAyB;AAAA,EAC3D,uBAAuB,EAAE,cAAc,yBAAyB;AAAA,EAChE,oBAAoB,EAAE,cAAc,yBAAyB;AAAA,EAC7D,qBAAqB,EAAE,cAAc,yBAAyB;AAAA,EAC9D,gBAAgB,EAAE,cAAc,yBAAyB;AAAA,EACzD,0BAA0B,EAAE,cAAc,yBAAyB;AACrE;AAEA,MAAM,uBAAwD;AAAA,EAC5D,mBAAmB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACnE,wBAAwB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACxE,yBAAyB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACzE,cAAc,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC9D,eAAe,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC/D,kBAAkB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAClE,uBAAuB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACvE,oBAAoB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACpE,qBAAqB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACrE,gBAAgB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAChE,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAC5E;AAGA,MAAM,6CAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,7 +34,8 @@ const testOptionalProps = {
|
|
|
34
34
|
},
|
|
35
35
|
CustomBody: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "test" }),
|
|
36
36
|
closeBtnRef: () => null,
|
|
37
|
-
actionRef: { current: {} }
|
|
37
|
+
actionRef: { current: {} },
|
|
38
|
+
bannerId: "my-banner"
|
|
38
39
|
};
|
|
39
40
|
const testPartialDefaults = {
|
|
40
41
|
label: "hello"
|