@elliemae/ds-banner 3.80.0-next.51 → 3.80.0-next.52
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/DSBannerContent.js +1 -2
- package/dist/cjs/DSBannerContent.js.map +2 -2
- package/dist/cjs/styles.js +14 -15
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/DSBannerContent.js +1 -2
- package/dist/esm/DSBannerContent.js.map +2 -2
- package/dist/esm/styles.js +14 -15
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/styles.d.ts +5 -5
- package/package.json +10 -10
|
@@ -76,7 +76,7 @@ const DSBannerContent = (props) => {
|
|
|
76
76
|
}, []);
|
|
77
77
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
78
78
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledIconContainer, { "data-testid": import_constants.DSBannerDatatestid.ICON_CONTAINER, ...ownerPropsConfig, children: icons[type] }),
|
|
79
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledBody, { ...ownerPropsConfig, children: [
|
|
79
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledBody, { $isBodyEmpty: !body, ...ownerPropsConfig, children: [
|
|
80
80
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, { id: titleId, variant: import_ds_typography.TYPOGRAPHY_VARIANTS.H5_STRONG, component: "span", ...ownerPropsConfig, children: label }),
|
|
81
81
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSubTitle, { id: bodyId, variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1, ...ownerPropsConfig, children: body }),
|
|
82
82
|
actionLink && // its own element (a sibling of the description, not inline in it): the spacing is CSS, not literal spaces.
|
|
@@ -91,7 +91,6 @@ const DSBannerContent = (props) => {
|
|
|
91
91
|
innerRef: handleActionRefForLink,
|
|
92
92
|
onKeyDown: handleOnKeyDown,
|
|
93
93
|
tabIndex: 0,
|
|
94
|
-
isBodyEmpty: !body,
|
|
95
94
|
title: actionLink.label,
|
|
96
95
|
...ownerPropsConfig,
|
|
97
96
|
children: actionLink.label
|
|
@@ -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 { 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<HTMLElement>(null) as React.MutableRefObject<HTMLElement>;\n\n const handleActionRefForLink = useCallback<React.RefCallback<HTMLElement>>(\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 {/* h5-strong look, but a span: the title must not inject a heading into the host page outline.\n `component` (not `as`): on a styled(DSTypography) wrapper `as` would replace DSTypography itself. */}\n <StyledTitle id={titleId} variant={TYPOGRAPHY_VARIANTS.H5_STRONG} component=\"span\" {...ownerPropsConfig}>\n {label}\n </StyledTitle>\n <StyledSubTitle id={bodyId} variant={TYPOGRAPHY_VARIANTS.B1} {...ownerPropsConfig}>\n {body}\n </StyledSubTitle>\n {actionLink && (\n // its own element (a sibling of the description, not inline in it): the spacing is CSS, not literal spaces.\n // the DSTypography link variant gives the size + DSTypography-root class, the underline/weight pending UX are in styles.tsx\n <StyledActionLink\n variant={TYPOGRAPHY_VARIANTS.LINK_SML_TITLE}\n data-testid={DSBannerDatatestid.ACTION_LINK}\n onClick={actionLink.onClick}\n href={actionLink.href}\n innerRef={handleActionRefForLink}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\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,OAAoB,IAAI;AAE9C,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,
|
|
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<HTMLElement>(null) as React.MutableRefObject<HTMLElement>;\n\n const handleActionRefForLink = useCallback<React.RefCallback<HTMLElement>>(\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 $isBodyEmpty={!body} {...ownerPropsConfig}>\n {/* h5-strong look, but a span: the title must not inject a heading into the host page outline.\n `component` (not `as`): on a styled(DSTypography) wrapper `as` would replace DSTypography itself. */}\n <StyledTitle id={titleId} variant={TYPOGRAPHY_VARIANTS.H5_STRONG} component=\"span\" {...ownerPropsConfig}>\n {label}\n </StyledTitle>\n <StyledSubTitle id={bodyId} variant={TYPOGRAPHY_VARIANTS.B1} {...ownerPropsConfig}>\n {body}\n </StyledSubTitle>\n {actionLink && (\n // its own element (a sibling of the description, not inline in it): the spacing is CSS, not literal spaces.\n // the DSTypography link variant gives the size + DSTypography-root class, the underline/weight pending UX are in styles.tsx\n <StyledActionLink\n variant={TYPOGRAPHY_VARIANTS.LINK_SML_TITLE}\n data-testid={DSBannerDatatestid.ACTION_LINK}\n onClick={actionLink.onClick}\n href={actionLink.href}\n innerRef={handleActionRefForLink}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\n title={actionLink.label}\n {...ownerPropsConfig}\n >\n {actionLink.label}\n </StyledActionLink>\n )}\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,OAAoB,IAAI;AAE9C,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,4BAAW,cAAc,CAAC,MAAO,GAAG,kBAGnC;AAAA,kDAAC,6BAAY,IAAI,SAAS,SAAS,yCAAoB,WAAW,WAAU,QAAQ,GAAG,kBACpF,iBACH;AAAA,MACA,4CAAC,gCAAe,IAAI,QAAQ,SAAS,yCAAoB,IAAK,GAAG,kBAC9D,gBACH;AAAA,MACC;AAAA;AAAA,MAGC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,yCAAoB;AAAA,UAC7B,eAAa,oCAAmB;AAAA,UAChC,SAAS,WAAW;AAAA,UACpB,MAAM,WAAW;AAAA,UACjB,UAAU;AAAA,UACV,WAAW;AAAA,UACX,UAAU;AAAA,UACV,OAAO,WAAW;AAAA,UACjB,GAAG;AAAA,UAEH,qBAAW;AAAA;AAAA,MACd;AAAA,OAEJ;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -72,7 +72,6 @@ const StyledInnerContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
72
72
|
name: import_constants.DSBannerName,
|
|
73
73
|
slot: import_constants.DSBannerSlots.INNER_CONTAINER
|
|
74
74
|
})`
|
|
75
|
-
padding-right: 4px;
|
|
76
75
|
width: 100%;
|
|
77
76
|
min-width: 0;
|
|
78
77
|
`;
|
|
@@ -102,6 +101,9 @@ const StyledBannerLayout = (0, import_ds_system.styled)("div", {
|
|
|
102
101
|
justify-content: space-between;
|
|
103
102
|
background-color: neutral-000;
|
|
104
103
|
border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};
|
|
104
|
+
/* the 4px to the right of the close button (Spec v2 container padding-right). It lives here and not in the inner container:
|
|
105
|
+
the close button is a sibling of the inner container, so a padding there would only add space before the button. */
|
|
106
|
+
padding-right: 4px;
|
|
105
107
|
& > :first-child {
|
|
106
108
|
flex: 1;
|
|
107
109
|
min-width: 0;
|
|
@@ -118,12 +120,16 @@ const StyledIconContainer = (0, import_ds_system.styled)("div", {
|
|
|
118
120
|
`;
|
|
119
121
|
const isSmallLayout = ({ theme }) => ["s", "xs"].includes(theme.layoutMode);
|
|
120
122
|
const StyledBody = (0, import_ds_system.styled)("div", { name: import_constants.DSBannerName, slot: import_constants.DSBannerSlots.BODY })`
|
|
121
|
-
display:
|
|
122
|
-
|
|
123
|
-
|
|
123
|
+
display: flex;
|
|
124
|
+
flex-wrap: wrap;
|
|
125
|
+
column-gap: 16px;
|
|
124
126
|
padding-top: 9px;
|
|
125
|
-
& > :
|
|
126
|
-
|
|
127
|
+
& > :first-child {
|
|
128
|
+
flex: ${(props) => props.$isBodyEmpty ? "0 1 auto" : "1 0 100%"};
|
|
129
|
+
}
|
|
130
|
+
& > :nth-child(2) {
|
|
131
|
+
${(props) => isSmallLayout(props) ? "flex: 0 1 100%;" : ""}
|
|
132
|
+
${(props) => props.$isBodyEmpty ? "display: none;" : ""}
|
|
127
133
|
}
|
|
128
134
|
`;
|
|
129
135
|
const StyledTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSBannerName, slot: import_constants.DSBannerSlots.TITLE })`
|
|
@@ -147,15 +153,8 @@ const StyledActionLink = (0, import_ds_system.styled)(import_ds_typography.DSTyp
|
|
|
147
153
|
min-width: 0px;
|
|
148
154
|
position: relative;
|
|
149
155
|
margin-bottom: 9px;
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
` : `
|
|
153
|
-
grid-column: 2;
|
|
154
|
-
grid-row: ${props.isBodyEmpty ? 1 : 2};
|
|
155
|
-
align-self: end;
|
|
156
|
-
align-self: last baseline;
|
|
157
|
-
margin-left: 16px;
|
|
158
|
-
`}
|
|
156
|
+
align-self: flex-end;
|
|
157
|
+
align-self: last baseline;
|
|
159
158
|
/* Typography and underline of the action link (PUI-19233).
|
|
160
159
|
Size comes from the link-sml-title variant (set in DSBannerContent). The rest is the Link "inline text" styling:
|
|
161
160
|
idle underline + brand-600, hover no underline + brand-800 (decided: the link is underlined at rest).
|
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_SLIDE_DURATION_MS, 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 {\n $isExpanded?: boolean;\n}\n// The slide animates the height of an intrinsically sized (auto height) element, which css can not interpolate with\n// \"height\" or \"max-height\" (auto/none are not interpolable, and min-height would clamp the collapsed state anyway).\n// Instead the single child (the layout, the live region lives in a portal) is the item of a one track grid whose row goes\n// from 0fr to 1fr: the row is always sized from the content so it follows wrapping, small layouts and text resize.\n// The tracks are minmax(0, Xfr) and not plain Xfr because the item has a border (the type color line): a plain 0fr track\n// can not be smaller than the item's border box, so it would collapse to 5px instead of 0.\n// The open slide is css only (@starting-style, the container mounts expanded), the close slide needs the container to\n// still be mounted when $isExpanded turns false, which is handled by useBannerExitAnimation.\n// The 59px minimum height is NOT set here but on the layout (the element that draws the bottom bar): the bar must be the bottom\n// edge of the banner, a min-height on the container would leave an empty box below it when the content is shorter (PUI-19295).\n// Being only on the item, the collapsing row (minmax(0, 0fr)) still clips it, so the slide needs no min-height transition.\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n height: fit-content;\n grid-template-rows: ${({ $isExpanded = true }) => ($isExpanded ? 'minmax(0, 1fr)' : 'minmax(0, 0fr)')};\n overflow: hidden;\n transition: grid-template-rows ${BANNER_SLIDE_DURATION_MS}ms ease-in;\n @starting-style {\n grid-template-rows: minmax(0, 0fr);\n }\n & > * {\n align-self: start;\n overflow: hidden;\n }\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\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,uBAAoF;AAiB7E,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIuB,CAAC,EAAE,cAAc,KAAK,MAAO,cAAc,mBAAmB,gBAAiB;AAAA;AAAA,mCAEpE,yCAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWvD,mCAAkB;AAAA;AAIf,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,+BAAc;AACtB,CAAC;AAAA;AAAA;AAAA;
|
|
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_SLIDE_DURATION_MS, 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 {\n $isExpanded?: boolean;\n}\n// The slide animates the height of an intrinsically sized (auto height) element, which css can not interpolate with\n// \"height\" or \"max-height\" (auto/none are not interpolable, and min-height would clamp the collapsed state anyway).\n// Instead the single child (the layout, the live region lives in a portal) is the item of a one track grid whose row goes\n// from 0fr to 1fr: the row is always sized from the content so it follows wrapping, small layouts and text resize.\n// The tracks are minmax(0, Xfr) and not plain Xfr because the item has a border (the type color line): a plain 0fr track\n// can not be smaller than the item's border box, so it would collapse to 5px instead of 0.\n// The open slide is css only (@starting-style, the container mounts expanded), the close slide needs the container to\n// still be mounted when $isExpanded turns false, which is handled by useBannerExitAnimation.\n// The 59px minimum height is NOT set here but on the layout (the element that draws the bottom bar): the bar must be the bottom\n// edge of the banner, a min-height on the container would leave an empty box below it when the content is shorter (PUI-19295).\n// Being only on the item, the collapsing row (minmax(0, 0fr)) still clips it, so the slide needs no min-height transition.\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n height: fit-content;\n grid-template-rows: ${({ $isExpanded = true }) => ($isExpanded ? 'minmax(0, 1fr)' : 'minmax(0, 0fr)')};\n overflow: hidden;\n transition: grid-template-rows ${BANNER_SLIDE_DURATION_MS}ms ease-in;\n @starting-style {\n grid-template-rows: minmax(0, 0fr);\n }\n & > * {\n align-self: start;\n overflow: hidden;\n }\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\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 box-sizing: border-box;\n min-height: 59px;\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 /* the 4px to the right of the close button (Spec v2 container padding-right). It lives here and not in the inner container:\n the close button is a sibling of the inner container, so a padding there would only add space before the button. */\n padding-right: 4px;\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\nconst isSmallLayout = ({ theme }: { theme: { layoutMode?: string } }) => ['s', 'xs'].includes(theme.layoutMode!);\n\ninterface StyledBodyT {\n $isBodyEmpty: boolean;\n}\n// title, description and action link are the 3 children (in this order). The title is always on its own row. The\n// description and the action link share the next row while the link fits after the text (16px gap), otherwise the link\n// wraps to its own row below, aligned to the title (a gap, unlike a margin, is not applied at the start of a row).\n// A wrapping flex row, and not a grid, is what makes the link follow the text: a grid track can not move to a new row.\n// Small layouts: the description takes the whole row so the link is always below it.\nexport const StyledBody = styled('div', { name: DSBannerName, slot: DSBannerSlots.BODY })<StyledBodyT>`\n display: flex;\n flex-wrap: wrap;\n column-gap: 16px;\n padding-top: 9px;\n & > :first-child {\n flex: ${(props) => (props.$isBodyEmpty ? '0 1 auto' : '1 0 100%')};\n }\n & > :nth-child(2) {\n ${(props) => (isSmallLayout(props) ? 'flex: 0 1 100%;' : '')}\n ${(props) => (props.$isBodyEmpty ? 'display: none;' : '')}\n }\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n display: block;\n color: neutral-700;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\n// the description carries the bottom spacing of the content area (Spec v2)\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 padding-bottom: 9px;\n`;\n\n// its own flex item of StyledBody (never inline in the description), nested in DSTypography (link-sml-title variant).\n// It stays on the last line of the text when its whole label fits there, otherwise it moves to its own row. It only\n// breaks into several lines if the label alone is wider than the body.\nexport const StyledActionLink = styled(DSTypography, {\n name: DSBannerName,\n slot: DSBannerSlots.ACTION_LINK,\n})`\n min-width: 0px;\n position: relative;\n margin-bottom: 9px;\n align-self: flex-end;\n align-self: last baseline;\n /* Typography and underline of the action link (PUI-19233).\n Size comes from the link-sml-title variant (set in DSBannerContent). The rest is the Link \"inline text\" styling:\n idle underline + brand-600, hover no underline + brand-800 (decided: the link is underlined at rest).\n PENDING UX CONFIRMATION: only font-weight (400 vs the variant's weight; the spec names a variant that does not\n exist) and line-height (the description's, the variant's 24px would make the banner taller and misalign the\n baselines). Adjusting them once UX answers should only touch those two declarations. */\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n line-height: 1.278;\n text-decoration: underline;\n color: brand-600;\n &:hover {\n text-decoration: none;\n color: brand-800;\n }\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-top: 4px;\n margin-left: 8px;\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -42,7 +42,7 @@ const DSBannerContent = (props) => {
|
|
|
42
42
|
}, []);
|
|
43
43
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
44
44
|
/* @__PURE__ */ jsx(StyledIconContainer, { "data-testid": DSBannerDatatestid.ICON_CONTAINER, ...ownerPropsConfig, children: icons[type] }),
|
|
45
|
-
/* @__PURE__ */ jsxs(StyledBody, { ...ownerPropsConfig, children: [
|
|
45
|
+
/* @__PURE__ */ jsxs(StyledBody, { $isBodyEmpty: !body, ...ownerPropsConfig, children: [
|
|
46
46
|
/* @__PURE__ */ jsx(StyledTitle, { id: titleId, variant: TYPOGRAPHY_VARIANTS.H5_STRONG, component: "span", ...ownerPropsConfig, children: label }),
|
|
47
47
|
/* @__PURE__ */ jsx(StyledSubTitle, { id: bodyId, variant: TYPOGRAPHY_VARIANTS.B1, ...ownerPropsConfig, children: body }),
|
|
48
48
|
actionLink && // its own element (a sibling of the description, not inline in it): the spacing is CSS, not literal spaces.
|
|
@@ -57,7 +57,6 @@ const DSBannerContent = (props) => {
|
|
|
57
57
|
innerRef: handleActionRefForLink,
|
|
58
58
|
onKeyDown: handleOnKeyDown,
|
|
59
59
|
tabIndex: 0,
|
|
60
|
-
isBodyEmpty: !body,
|
|
61
60
|
title: actionLink.label,
|
|
62
61
|
...ownerPropsConfig,
|
|
63
62
|
children: actionLink.label
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSBannerContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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<HTMLElement>(null) as React.MutableRefObject<HTMLElement>;\n\n const handleActionRefForLink = useCallback<React.RefCallback<HTMLElement>>(\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 {/* h5-strong look, but a span: the title must not inject a heading into the host page outline.\n `component` (not `as`): on a styled(DSTypography) wrapper `as` would replace DSTypography itself. */}\n <StyledTitle id={titleId} variant={TYPOGRAPHY_VARIANTS.H5_STRONG} component=\"span\" {...ownerPropsConfig}>\n {label}\n </StyledTitle>\n <StyledSubTitle id={bodyId} variant={TYPOGRAPHY_VARIANTS.B1} {...ownerPropsConfig}>\n {body}\n </StyledSubTitle>\n {actionLink && (\n // its own element (a sibling of the description, not inline in it): the spacing is CSS, not literal spaces.\n // the DSTypography link variant gives the size + DSTypography-root class, the underline/weight pending UX are in styles.tsx\n <StyledActionLink\n variant={TYPOGRAPHY_VARIANTS.LINK_SML_TITLE}\n data-testid={DSBannerDatatestid.ACTION_LINK}\n onClick={actionLink.onClick}\n href={actionLink.href}\n innerRef={handleActionRefForLink}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACUZ,SA6CP,UA7CO,KAiDL,YAjDK;AATX,SAAS,kBAAkB,UAAU,aAAa,qBAAqB;AACvE,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,OAAOA,UAAS,mBAAmB;AACnC,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB,qBAAqB,gBAAgB,aAAa,kBAAkB;AAExF,MAAM,QAAqC;AAAA,EAChD,SAAS,oBAAC,eAAY,OAAO,CAAC,WAAW,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,MAAM,oBAAC,YAAS,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,QAAQ,oBAAC,oBAAiB,OAAO,CAAC,UAAU,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC/E,SAAS,oBAAC,iBAAc,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,mBAAmB,cAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,UAAUA,OAAM,OAAoB,IAAI;AAE9C,QAAM,yBAAyB;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,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,SACE,iCACE;AAAA,wBAAC,uBAAoB,eAAa,mBAAmB,gBAAiB,GAAG,kBACtE,gBAAM,IAAI,GACb;AAAA,IACA,qBAAC,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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<HTMLElement>(null) as React.MutableRefObject<HTMLElement>;\n\n const handleActionRefForLink = useCallback<React.RefCallback<HTMLElement>>(\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 $isBodyEmpty={!body} {...ownerPropsConfig}>\n {/* h5-strong look, but a span: the title must not inject a heading into the host page outline.\n `component` (not `as`): on a styled(DSTypography) wrapper `as` would replace DSTypography itself. */}\n <StyledTitle id={titleId} variant={TYPOGRAPHY_VARIANTS.H5_STRONG} component=\"span\" {...ownerPropsConfig}>\n {label}\n </StyledTitle>\n <StyledSubTitle id={bodyId} variant={TYPOGRAPHY_VARIANTS.B1} {...ownerPropsConfig}>\n {body}\n </StyledSubTitle>\n {actionLink && (\n // its own element (a sibling of the description, not inline in it): the spacing is CSS, not literal spaces.\n // the DSTypography link variant gives the size + DSTypography-root class, the underline/weight pending UX are in styles.tsx\n <StyledActionLink\n variant={TYPOGRAPHY_VARIANTS.LINK_SML_TITLE}\n data-testid={DSBannerDatatestid.ACTION_LINK}\n onClick={actionLink.onClick}\n href={actionLink.href}\n innerRef={handleActionRefForLink}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\n title={actionLink.label}\n {...ownerPropsConfig}\n >\n {actionLink.label}\n </StyledActionLink>\n )}\n </StyledBody>\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACUZ,SA6CP,UA7CO,KAiDL,YAjDK;AATX,SAAS,kBAAkB,UAAU,aAAa,qBAAqB;AACvE,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,OAAOA,UAAS,mBAAmB;AACnC,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB,qBAAqB,gBAAgB,aAAa,kBAAkB;AAExF,MAAM,QAAqC;AAAA,EAChD,SAAS,oBAAC,eAAY,OAAO,CAAC,WAAW,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,MAAM,oBAAC,YAAS,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC5E,QAAQ,oBAAC,oBAAiB,OAAO,CAAC,UAAU,KAAK,GAAG,OAAM,QAAO,QAAO,QAAO;AAAA,EAC/E,SAAS,oBAAC,iBAAc,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,mBAAmB,cAAc,mBAAmB,EAAE,GAAG,MAAM,CAAC;AAEtE,QAAM,UAAUA,OAAM,OAAoB,IAAI;AAE9C,QAAM,yBAAyB;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,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,SACE,iCACE;AAAA,wBAAC,uBAAoB,eAAa,mBAAmB,gBAAiB,GAAG,kBACtE,gBAAM,IAAI,GACb;AAAA,IACA,qBAAC,cAAW,cAAc,CAAC,MAAO,GAAG,kBAGnC;AAAA,0BAAC,eAAY,IAAI,SAAS,SAAS,oBAAoB,WAAW,WAAU,QAAQ,GAAG,kBACpF,iBACH;AAAA,MACA,oBAAC,kBAAe,IAAI,QAAQ,SAAS,oBAAoB,IAAK,GAAG,kBAC9D,gBACH;AAAA,MACC;AAAA;AAAA,MAGC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,oBAAoB;AAAA,UAC7B,eAAa,mBAAmB;AAAA,UAChC,SAAS,WAAW;AAAA,UACpB,MAAM,WAAW;AAAA,UACjB,UAAU;AAAA,UACV,WAAW;AAAA,UACX,UAAU;AAAA,UACV,OAAO,WAAW;AAAA,UACjB,GAAG;AAAA,UAEH,qBAAW;AAAA;AAAA,MACd;AAAA,OAEJ;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -30,7 +30,6 @@ const StyledInnerContainer = styled(Grid, {
|
|
|
30
30
|
name: DSBannerName,
|
|
31
31
|
slot: DSBannerSlots.INNER_CONTAINER
|
|
32
32
|
})`
|
|
33
|
-
padding-right: 4px;
|
|
34
33
|
width: 100%;
|
|
35
34
|
min-width: 0;
|
|
36
35
|
`;
|
|
@@ -60,6 +59,9 @@ const StyledBannerLayout = styled("div", {
|
|
|
60
59
|
justify-content: space-between;
|
|
61
60
|
background-color: neutral-000;
|
|
62
61
|
border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};
|
|
62
|
+
/* the 4px to the right of the close button (Spec v2 container padding-right). It lives here and not in the inner container:
|
|
63
|
+
the close button is a sibling of the inner container, so a padding there would only add space before the button. */
|
|
64
|
+
padding-right: 4px;
|
|
63
65
|
& > :first-child {
|
|
64
66
|
flex: 1;
|
|
65
67
|
min-width: 0;
|
|
@@ -76,12 +78,16 @@ const StyledIconContainer = styled("div", {
|
|
|
76
78
|
`;
|
|
77
79
|
const isSmallLayout = ({ theme }) => ["s", "xs"].includes(theme.layoutMode);
|
|
78
80
|
const StyledBody = styled("div", { name: DSBannerName, slot: DSBannerSlots.BODY })`
|
|
79
|
-
display:
|
|
80
|
-
|
|
81
|
-
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-wrap: wrap;
|
|
83
|
+
column-gap: 16px;
|
|
82
84
|
padding-top: 9px;
|
|
83
|
-
& > :
|
|
84
|
-
|
|
85
|
+
& > :first-child {
|
|
86
|
+
flex: ${(props) => props.$isBodyEmpty ? "0 1 auto" : "1 0 100%"};
|
|
87
|
+
}
|
|
88
|
+
& > :nth-child(2) {
|
|
89
|
+
${(props) => isSmallLayout(props) ? "flex: 0 1 100%;" : ""}
|
|
90
|
+
${(props) => props.$isBodyEmpty ? "display: none;" : ""}
|
|
85
91
|
}
|
|
86
92
|
`;
|
|
87
93
|
const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`
|
|
@@ -105,15 +111,8 @@ const StyledActionLink = styled(DSTypography, {
|
|
|
105
111
|
min-width: 0px;
|
|
106
112
|
position: relative;
|
|
107
113
|
margin-bottom: 9px;
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
` : `
|
|
111
|
-
grid-column: 2;
|
|
112
|
-
grid-row: ${props.isBodyEmpty ? 1 : 2};
|
|
113
|
-
align-self: end;
|
|
114
|
-
align-self: last baseline;
|
|
115
|
-
margin-left: 16px;
|
|
116
|
-
`}
|
|
114
|
+
align-self: flex-end;
|
|
115
|
+
align-self: last baseline;
|
|
117
116
|
/* Typography and underline of the action link (PUI-19233).
|
|
118
117
|
Size comes from the link-sml-title variant (set in DSBannerContent). The rest is the Link "inline text" styling:
|
|
119
118
|
idle underline + brand-600, hover no underline + brand-800 (decided: the link is underlined at rest).
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { 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_SLIDE_DURATION_MS, 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 {\n $isExpanded?: boolean;\n}\n// The slide animates the height of an intrinsically sized (auto height) element, which css can not interpolate with\n// \"height\" or \"max-height\" (auto/none are not interpolable, and min-height would clamp the collapsed state anyway).\n// Instead the single child (the layout, the live region lives in a portal) is the item of a one track grid whose row goes\n// from 0fr to 1fr: the row is always sized from the content so it follows wrapping, small layouts and text resize.\n// The tracks are minmax(0, Xfr) and not plain Xfr because the item has a border (the type color line): a plain 0fr track\n// can not be smaller than the item's border box, so it would collapse to 5px instead of 0.\n// The open slide is css only (@starting-style, the container mounts expanded), the close slide needs the container to\n// still be mounted when $isExpanded turns false, which is handled by useBannerExitAnimation.\n// The 59px minimum height is NOT set here but on the layout (the element that draws the bottom bar): the bar must be the bottom\n// edge of the banner, a min-height on the container would leave an empty box below it when the content is shorter (PUI-19295).\n// Being only on the item, the collapsing row (minmax(0, 0fr)) still clips it, so the slide needs no min-height transition.\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n height: fit-content;\n grid-template-rows: ${({ $isExpanded = true }) => ($isExpanded ? 'minmax(0, 1fr)' : 'minmax(0, 0fr)')};\n overflow: hidden;\n transition: grid-template-rows ${BANNER_SLIDE_DURATION_MS}ms ease-in;\n @starting-style {\n grid-template-rows: minmax(0, 0fr);\n }\n & > * {\n align-self: start;\n overflow: hidden;\n }\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAErB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B,cAAc,cAAc,qBAAqB;AAiB7E,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIuB,CAAC,EAAE,cAAc,KAAK,MAAO,cAAc,mBAAmB,gBAAiB;AAAA;AAAA,mCAEpE,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWvD,kBAAkB;AAAA;AAIf,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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_SLIDE_DURATION_MS, 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 {\n $isExpanded?: boolean;\n}\n// The slide animates the height of an intrinsically sized (auto height) element, which css can not interpolate with\n// \"height\" or \"max-height\" (auto/none are not interpolable, and min-height would clamp the collapsed state anyway).\n// Instead the single child (the layout, the live region lives in a portal) is the item of a one track grid whose row goes\n// from 0fr to 1fr: the row is always sized from the content so it follows wrapping, small layouts and text resize.\n// The tracks are minmax(0, Xfr) and not plain Xfr because the item has a border (the type color line): a plain 0fr track\n// can not be smaller than the item's border box, so it would collapse to 5px instead of 0.\n// The open slide is css only (@starting-style, the container mounts expanded), the close slide needs the container to\n// still be mounted when $isExpanded turns false, which is handled by useBannerExitAnimation.\n// The 59px minimum height is NOT set here but on the layout (the element that draws the bottom bar): the bar must be the bottom\n// edge of the banner, a min-height on the container would leave an empty box below it when the content is shorter (PUI-19295).\n// Being only on the item, the collapsing row (minmax(0, 0fr)) still clips it, so the slide needs no min-height transition.\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n height: fit-content;\n grid-template-rows: ${({ $isExpanded = true }) => ($isExpanded ? 'minmax(0, 1fr)' : 'minmax(0, 0fr)')};\n overflow: hidden;\n transition: grid-template-rows ${BANNER_SLIDE_DURATION_MS}ms ease-in;\n @starting-style {\n grid-template-rows: minmax(0, 0fr);\n }\n & > * {\n align-self: start;\n overflow: hidden;\n }\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\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 box-sizing: border-box;\n min-height: 59px;\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 /* the 4px to the right of the close button (Spec v2 container padding-right). It lives here and not in the inner container:\n the close button is a sibling of the inner container, so a padding there would only add space before the button. */\n padding-right: 4px;\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\nconst isSmallLayout = ({ theme }: { theme: { layoutMode?: string } }) => ['s', 'xs'].includes(theme.layoutMode!);\n\ninterface StyledBodyT {\n $isBodyEmpty: boolean;\n}\n// title, description and action link are the 3 children (in this order). The title is always on its own row. The\n// description and the action link share the next row while the link fits after the text (16px gap), otherwise the link\n// wraps to its own row below, aligned to the title (a gap, unlike a margin, is not applied at the start of a row).\n// A wrapping flex row, and not a grid, is what makes the link follow the text: a grid track can not move to a new row.\n// Small layouts: the description takes the whole row so the link is always below it.\nexport const StyledBody = styled('div', { name: DSBannerName, slot: DSBannerSlots.BODY })<StyledBodyT>`\n display: flex;\n flex-wrap: wrap;\n column-gap: 16px;\n padding-top: 9px;\n & > :first-child {\n flex: ${(props) => (props.$isBodyEmpty ? '0 1 auto' : '1 0 100%')};\n }\n & > :nth-child(2) {\n ${(props) => (isSmallLayout(props) ? 'flex: 0 1 100%;' : '')}\n ${(props) => (props.$isBodyEmpty ? 'display: none;' : '')}\n }\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n display: block;\n color: neutral-700;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\n// the description carries the bottom spacing of the content area (Spec v2)\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 padding-bottom: 9px;\n`;\n\n// its own flex item of StyledBody (never inline in the description), nested in DSTypography (link-sml-title variant).\n// It stays on the last line of the text when its whole label fits there, otherwise it moves to its own row. It only\n// breaks into several lines if the label alone is wider than the body.\nexport const StyledActionLink = styled(DSTypography, {\n name: DSBannerName,\n slot: DSBannerSlots.ACTION_LINK,\n})`\n min-width: 0px;\n position: relative;\n margin-bottom: 9px;\n align-self: flex-end;\n align-self: last baseline;\n /* Typography and underline of the action link (PUI-19233).\n Size comes from the link-sml-title variant (set in DSBannerContent). The rest is the Link \"inline text\" styling:\n idle underline + brand-600, hover no underline + brand-800 (decided: the link is underlined at rest).\n PENDING UX CONFIRMATION: only font-weight (400 vs the variant's weight; the spec names a variant that does not\n exist) and line-height (the description's, the variant's 24px would make the banner taller and misalign the\n baselines). Adjusting them once UX answers should only touch those two declarations. */\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n line-height: 1.278;\n text-decoration: underline;\n color: brand-600;\n &:hover {\n text-decoration: none;\n color: brand-800;\n }\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-top: 4px;\n margin-left: 8px;\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -12,13 +12,13 @@ interface StyledBannerLayoutT {
|
|
|
12
12
|
}
|
|
13
13
|
export declare const StyledBannerLayout: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledBannerLayoutT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
14
14
|
export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
15
|
-
|
|
15
|
+
interface StyledBodyT {
|
|
16
|
+
$isBodyEmpty: boolean;
|
|
17
|
+
}
|
|
18
|
+
export declare const StyledBody: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledBodyT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
16
19
|
export declare const StyledTitle: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
|
|
17
20
|
export declare const StyledSubTitle: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
|
|
18
|
-
|
|
19
|
-
isBodyEmpty: boolean;
|
|
20
|
-
}
|
|
21
|
-
export declare const StyledActionLink: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, StyledActionLinkT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
|
|
21
|
+
export declare const StyledActionLink: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
|
|
22
22
|
export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
|
|
23
23
|
export declare const StyledLiveRegionPortal: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
24
24
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-banner",
|
|
3
|
-
"version": "3.80.0-next.
|
|
3
|
+
"version": "3.80.0-next.52",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Banner",
|
|
6
6
|
"files": [
|
|
@@ -36,18 +36,18 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-button-v2": "3.80.0-next.
|
|
40
|
-
"@elliemae/ds-grid": "3.80.0-next.
|
|
41
|
-
"@elliemae/ds-icons": "3.80.0-next.
|
|
42
|
-
"@elliemae/ds-props-helpers": "3.80.0-next.
|
|
43
|
-
"@elliemae/ds-system": "3.80.0-next.
|
|
44
|
-
"@elliemae/ds-typescript-helpers": "3.80.0-next.
|
|
45
|
-
"@elliemae/ds-typography": "3.80.0-next.
|
|
39
|
+
"@elliemae/ds-button-v2": "3.80.0-next.52",
|
|
40
|
+
"@elliemae/ds-grid": "3.80.0-next.52",
|
|
41
|
+
"@elliemae/ds-icons": "3.80.0-next.52",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.80.0-next.52",
|
|
43
|
+
"@elliemae/ds-system": "3.80.0-next.52",
|
|
44
|
+
"@elliemae/ds-typescript-helpers": "3.80.0-next.52",
|
|
45
|
+
"@elliemae/ds-typography": "3.80.0-next.52",
|
|
46
46
|
"uid": "^2.0.2"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@elliemae/ds-monorepo-devops": "3.80.0-next.
|
|
50
|
-
"@elliemae/ds-test-utils": "3.80.0-next.
|
|
49
|
+
"@elliemae/ds-monorepo-devops": "3.80.0-next.52",
|
|
50
|
+
"@elliemae/ds-test-utils": "3.80.0-next.52",
|
|
51
51
|
"jest": "^30.0.0",
|
|
52
52
|
"styled-components": "~5.3.11"
|
|
53
53
|
},
|