@elliemae/ds-banner 3.80.0-next.38 → 3.80.0-next.39
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 +19 -21
- package/dist/cjs/DSBannerContent.js.map +2 -2
- package/dist/cjs/styles.js +35 -17
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/DSBannerContent.js +19 -21
- package/dist/esm/DSBannerContent.js.map +2 -2
- package/dist/esm/styles.js +35 -17
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/styles.d.ts +1 -1
- package/package.json +10 -10
|
@@ -78,27 +78,25 @@ const DSBannerContent = (props) => {
|
|
|
78
78
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledIconContainer, { "data-testid": import_constants.DSBannerDatatestid.ICON_CONTAINER, ...ownerPropsConfig, children: icons[type] }),
|
|
79
79
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledBody, { ...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
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
] })
|
|
101
|
-
] })
|
|
81
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSubTitle, { id: bodyId, variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1, ...ownerPropsConfig, children: body }),
|
|
82
|
+
actionLink && // its own element (a sibling of the description, not inline in it): the spacing is CSS, not literal spaces.
|
|
83
|
+
// the DSTypography link variant gives the size + DSTypography-root class, the underline/weight pending UX are in styles.tsx
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
85
|
+
import_styles.StyledActionLink,
|
|
86
|
+
{
|
|
87
|
+
variant: import_ds_typography.TYPOGRAPHY_VARIANTS.LINK_SML_TITLE,
|
|
88
|
+
"data-testid": import_constants.DSBannerDatatestid.ACTION_LINK,
|
|
89
|
+
onClick: actionLink.onClick,
|
|
90
|
+
href: actionLink.href,
|
|
91
|
+
innerRef: handleActionRefForLink,
|
|
92
|
+
onKeyDown: handleOnKeyDown,
|
|
93
|
+
tabIndex: 0,
|
|
94
|
+
isBodyEmpty: !body,
|
|
95
|
+
title: actionLink.label,
|
|
96
|
+
...ownerPropsConfig,
|
|
97
|
+
children: actionLink.label
|
|
98
|
+
}
|
|
99
|
+
)
|
|
102
100
|
] })
|
|
103
101
|
] });
|
|
104
102
|
};
|
|
@@ -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<
|
|
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,
|
|
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 isBodyEmpty={!body}\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,4BAAY,GAAG,kBAGd;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,aAAa,CAAC;AAAA,UACd,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
|
@@ -119,9 +119,15 @@ const StyledIconContainer = (0, import_ds_system.styled)("div", {
|
|
|
119
119
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
120
120
|
min-width: 0px;
|
|
121
121
|
`;
|
|
122
|
+
const isSmallLayout = ({ theme }) => ["s", "xs"].includes(theme.layoutMode);
|
|
122
123
|
const StyledBody = (0, import_ds_system.styled)("div", { name: import_constants.DSBannerName, slot: import_constants.DSBannerSlots.BODY })`
|
|
124
|
+
display: grid;
|
|
125
|
+
grid-template-columns: ${(props) => isSmallLayout(props) ? "minmax(0, 1fr)" : "minmax(0, max-content) auto"};
|
|
126
|
+
justify-content: start;
|
|
123
127
|
padding-top: 9px;
|
|
124
|
-
|
|
128
|
+
& > :nth-child(-n + 2) {
|
|
129
|
+
grid-column: 1;
|
|
130
|
+
}
|
|
125
131
|
`;
|
|
126
132
|
const StyledTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSBannerName, slot: import_constants.DSBannerSlots.TITLE })`
|
|
127
133
|
display: block;
|
|
@@ -135,27 +141,38 @@ const StyledSubTitle = (0, import_ds_system.styled)(import_ds_typography.DSTypog
|
|
|
135
141
|
overflow-wrap: break-word;
|
|
136
142
|
white-space: pre-wrap;
|
|
137
143
|
min-width: 0px;
|
|
138
|
-
|
|
139
|
-
if (["s", "xs"].includes(theme.layoutMode)) {
|
|
140
|
-
return `
|
|
141
|
-
grid-column: 1 / -1;
|
|
142
|
-
`;
|
|
143
|
-
}
|
|
144
|
-
return "";
|
|
145
|
-
}}
|
|
144
|
+
padding-bottom: 9px;
|
|
146
145
|
`;
|
|
147
|
-
const StyledActionLink = (0, import_ds_system.styled)(
|
|
146
|
+
const StyledActionLink = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
|
|
148
147
|
name: import_constants.DSBannerName,
|
|
149
148
|
slot: import_constants.DSBannerSlots.ACTION_LINK
|
|
150
149
|
})`
|
|
151
|
-
display: inline-block;
|
|
152
|
-
text-decoration: none;
|
|
153
|
-
line-height: inherit;
|
|
154
|
-
font-size: inherit;
|
|
155
|
-
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
156
|
-
color: brand-600;
|
|
157
150
|
min-width: 0px;
|
|
158
151
|
position: relative;
|
|
152
|
+
margin-bottom: 9px;
|
|
153
|
+
${(props) => isSmallLayout(props) ? `
|
|
154
|
+
justify-self: start;
|
|
155
|
+
` : `
|
|
156
|
+
grid-column: 2;
|
|
157
|
+
grid-row: ${props.isBodyEmpty ? 1 : 2};
|
|
158
|
+
align-self: end;
|
|
159
|
+
align-self: last baseline;
|
|
160
|
+
margin-left: 16px;
|
|
161
|
+
`}
|
|
162
|
+
/* Typography and underline of the action link (PUI-19233).
|
|
163
|
+
Size comes from the link-sml-title variant (set in DSBannerContent). The rest is the Link "inline text" styling:
|
|
164
|
+
idle underline + brand-600, hover no underline + brand-800 (decided: the link is underlined at rest).
|
|
165
|
+
PENDING UX CONFIRMATION: only font-weight (400 vs the variant's weight; the spec names a variant that does not
|
|
166
|
+
exist) and line-height (the description's, the variant's 24px would make the banner taller and misalign the
|
|
167
|
+
baselines). Adjusting them once UX answers should only touch those two declarations. */
|
|
168
|
+
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
169
|
+
line-height: 1.278;
|
|
170
|
+
text-decoration: underline;
|
|
171
|
+
color: brand-600;
|
|
172
|
+
&:hover {
|
|
173
|
+
text-decoration: none;
|
|
174
|
+
color: brand-800;
|
|
175
|
+
}
|
|
159
176
|
&:focus {
|
|
160
177
|
outline: none;
|
|
161
178
|
&:after {
|
|
@@ -176,7 +193,8 @@ const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button_v2.DSBut
|
|
|
176
193
|
name: import_constants.DSBannerName,
|
|
177
194
|
slot: import_constants.DSBannerSlots.CLOSE_BUTTON
|
|
178
195
|
})`
|
|
179
|
-
margin:
|
|
196
|
+
margin-top: 4px;
|
|
197
|
+
margin-left: 8px;
|
|
180
198
|
`;
|
|
181
199
|
const StyledLiveRegionPortal = (0, import_ds_system.styled)("div", {
|
|
182
200
|
name: import_constants.DSBannerName,
|
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.\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 min-height: ${({ $isExpanded = true }) => ($isExpanded ? '59px' : '0px')};\n overflow: hidden;\n transition:\n grid-template-rows ${BANNER_SLIDE_DURATION_MS}ms ease-in,\n min-height ${BANNER_SLIDE_DURATION_MS}ms ease-in;\n @starting-style {\n grid-template-rows: minmax(0, 0fr);\n min-height: 0px;\n }\n & > * {\n align-self: start;\n min-height: 0;\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 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
|
|
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;AAc7E,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,gBACvF,CAAC,EAAE,cAAc,KAAK,MAAO,cAAc,SAAS,KAAM;AAAA;AAAA;AAAA,yBAGjD,yCAAwB;AAAA,iBAChC,yCAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAarC,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;
|
|
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.\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 min-height: ${({ $isExpanded = true }) => ($isExpanded ? '59px' : '0px')};\n overflow: hidden;\n transition:\n grid-template-rows ${BANNER_SLIDE_DURATION_MS}ms ease-in,\n min-height ${BANNER_SLIDE_DURATION_MS}ms ease-in;\n @starting-style {\n grid-template-rows: minmax(0, 0fr);\n min-height: 0px;\n }\n & > * {\n align-self: start;\n min-height: 0;\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 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\nconst isSmallLayout = ({ theme }: { theme: { layoutMode?: string } }) => ['s', 'xs'].includes(theme.layoutMode!);\n\n// title, description and action link are the 3 children (in this order). Default layouts: the title and the description\n// share the first column and the action link is its own cell right after the text (the first column grows with the\n// text up to the free space, the link keeps its own width). Small layouts: a single column, the link goes on its own\n// row below the description.\nexport const StyledBody = styled('div', { name: DSBannerName, slot: DSBannerSlots.BODY })`\n display: grid;\n grid-template-columns: ${(props) => (isSmallLayout(props) ? 'minmax(0, 1fr)' : 'minmax(0, max-content) auto')};\n justify-content: start;\n padding-top: 9px;\n & > :nth-child(-n + 2) {\n grid-column: 1;\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\ninterface StyledActionLinkT {\n isBodyEmpty: boolean;\n}\n// its own cell of the StyledBody grid (never inline in the description), nested in DSTypography (link-sml-title variant).\nexport const StyledActionLink = styled(DSTypography, {\n name: DSBannerName,\n slot: DSBannerSlots.ACTION_LINK,\n})<StyledActionLinkT>`\n min-width: 0px;\n position: relative;\n margin-bottom: 9px;\n ${(props) =>\n isSmallLayout(props)\n ? `\n justify-self: start;\n `\n : `\n grid-column: 2;\n grid-row: ${props.isBodyEmpty ? 1 : 2};\n align-self: end;\n align-self: last baseline;\n margin-left: 16px;\n `}\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
|
}
|
|
@@ -44,27 +44,25 @@ const DSBannerContent = (props) => {
|
|
|
44
44
|
/* @__PURE__ */ jsx(StyledIconContainer, { "data-testid": DSBannerDatatestid.ICON_CONTAINER, ...ownerPropsConfig, children: icons[type] }),
|
|
45
45
|
/* @__PURE__ */ jsxs(StyledBody, { ...ownerPropsConfig, children: [
|
|
46
46
|
/* @__PURE__ */ jsx(StyledTitle, { id: titleId, variant: TYPOGRAPHY_VARIANTS.H5_STRONG, component: "span", ...ownerPropsConfig, children: label }),
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
] })
|
|
67
|
-
] })
|
|
47
|
+
/* @__PURE__ */ jsx(StyledSubTitle, { id: bodyId, variant: TYPOGRAPHY_VARIANTS.B1, ...ownerPropsConfig, children: body }),
|
|
48
|
+
actionLink && // its own element (a sibling of the description, not inline in it): the spacing is CSS, not literal spaces.
|
|
49
|
+
// the DSTypography link variant gives the size + DSTypography-root class, the underline/weight pending UX are in styles.tsx
|
|
50
|
+
/* @__PURE__ */ jsx(
|
|
51
|
+
StyledActionLink,
|
|
52
|
+
{
|
|
53
|
+
variant: TYPOGRAPHY_VARIANTS.LINK_SML_TITLE,
|
|
54
|
+
"data-testid": DSBannerDatatestid.ACTION_LINK,
|
|
55
|
+
onClick: actionLink.onClick,
|
|
56
|
+
href: actionLink.href,
|
|
57
|
+
innerRef: handleActionRefForLink,
|
|
58
|
+
onKeyDown: handleOnKeyDown,
|
|
59
|
+
tabIndex: 0,
|
|
60
|
+
isBodyEmpty: !body,
|
|
61
|
+
title: actionLink.label,
|
|
62
|
+
...ownerPropsConfig,
|
|
63
|
+
children: actionLink.label
|
|
64
|
+
}
|
|
65
|
+
)
|
|
68
66
|
] })
|
|
69
67
|
] });
|
|
70
68
|
};
|
|
@@ -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<
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACUZ,
|
|
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 isBodyEmpty={!body}\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,cAAY,GAAG,kBAGd;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,aAAa,CAAC;AAAA,UACd,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
|
@@ -77,9 +77,15 @@ const StyledIconContainer = styled("div", {
|
|
|
77
77
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
78
78
|
min-width: 0px;
|
|
79
79
|
`;
|
|
80
|
+
const isSmallLayout = ({ theme }) => ["s", "xs"].includes(theme.layoutMode);
|
|
80
81
|
const StyledBody = styled("div", { name: DSBannerName, slot: DSBannerSlots.BODY })`
|
|
82
|
+
display: grid;
|
|
83
|
+
grid-template-columns: ${(props) => isSmallLayout(props) ? "minmax(0, 1fr)" : "minmax(0, max-content) auto"};
|
|
84
|
+
justify-content: start;
|
|
81
85
|
padding-top: 9px;
|
|
82
|
-
|
|
86
|
+
& > :nth-child(-n + 2) {
|
|
87
|
+
grid-column: 1;
|
|
88
|
+
}
|
|
83
89
|
`;
|
|
84
90
|
const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`
|
|
85
91
|
display: block;
|
|
@@ -93,27 +99,38 @@ const StyledSubTitle = styled(DSTypography, { name: DSBannerName, slot: DSBanner
|
|
|
93
99
|
overflow-wrap: break-word;
|
|
94
100
|
white-space: pre-wrap;
|
|
95
101
|
min-width: 0px;
|
|
96
|
-
|
|
97
|
-
if (["s", "xs"].includes(theme.layoutMode)) {
|
|
98
|
-
return `
|
|
99
|
-
grid-column: 1 / -1;
|
|
100
|
-
`;
|
|
101
|
-
}
|
|
102
|
-
return "";
|
|
103
|
-
}}
|
|
102
|
+
padding-bottom: 9px;
|
|
104
103
|
`;
|
|
105
|
-
const StyledActionLink = styled(
|
|
104
|
+
const StyledActionLink = styled(DSTypography, {
|
|
106
105
|
name: DSBannerName,
|
|
107
106
|
slot: DSBannerSlots.ACTION_LINK
|
|
108
107
|
})`
|
|
109
|
-
display: inline-block;
|
|
110
|
-
text-decoration: none;
|
|
111
|
-
line-height: inherit;
|
|
112
|
-
font-size: inherit;
|
|
113
|
-
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
114
|
-
color: brand-600;
|
|
115
108
|
min-width: 0px;
|
|
116
109
|
position: relative;
|
|
110
|
+
margin-bottom: 9px;
|
|
111
|
+
${(props) => isSmallLayout(props) ? `
|
|
112
|
+
justify-self: start;
|
|
113
|
+
` : `
|
|
114
|
+
grid-column: 2;
|
|
115
|
+
grid-row: ${props.isBodyEmpty ? 1 : 2};
|
|
116
|
+
align-self: end;
|
|
117
|
+
align-self: last baseline;
|
|
118
|
+
margin-left: 16px;
|
|
119
|
+
`}
|
|
120
|
+
/* Typography and underline of the action link (PUI-19233).
|
|
121
|
+
Size comes from the link-sml-title variant (set in DSBannerContent). The rest is the Link "inline text" styling:
|
|
122
|
+
idle underline + brand-600, hover no underline + brand-800 (decided: the link is underlined at rest).
|
|
123
|
+
PENDING UX CONFIRMATION: only font-weight (400 vs the variant's weight; the spec names a variant that does not
|
|
124
|
+
exist) and line-height (the description's, the variant's 24px would make the banner taller and misalign the
|
|
125
|
+
baselines). Adjusting them once UX answers should only touch those two declarations. */
|
|
126
|
+
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
127
|
+
line-height: 1.278;
|
|
128
|
+
text-decoration: underline;
|
|
129
|
+
color: brand-600;
|
|
130
|
+
&:hover {
|
|
131
|
+
text-decoration: none;
|
|
132
|
+
color: brand-800;
|
|
133
|
+
}
|
|
117
134
|
&:focus {
|
|
118
135
|
outline: none;
|
|
119
136
|
&:after {
|
|
@@ -134,7 +151,8 @@ const StyledCloseButton = styled(DSButtonV2, {
|
|
|
134
151
|
name: DSBannerName,
|
|
135
152
|
slot: DSBannerSlots.CLOSE_BUTTON
|
|
136
153
|
})`
|
|
137
|
-
margin:
|
|
154
|
+
margin-top: 4px;
|
|
155
|
+
margin-left: 8px;
|
|
138
156
|
`;
|
|
139
157
|
const StyledLiveRegionPortal = styled("div", {
|
|
140
158
|
name: DSBannerName,
|
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.\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 min-height: ${({ $isExpanded = true }) => ($isExpanded ? '59px' : '0px')};\n overflow: hidden;\n transition:\n grid-template-rows ${BANNER_SLIDE_DURATION_MS}ms ease-in,\n min-height ${BANNER_SLIDE_DURATION_MS}ms ease-in;\n @starting-style {\n grid-template-rows: minmax(0, 0fr);\n min-height: 0px;\n }\n & > * {\n align-self: start;\n min-height: 0;\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 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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAErB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B,cAAc,cAAc,qBAAqB;AAc7E,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,gBACvF,CAAC,EAAE,cAAc,KAAK,MAAO,cAAc,SAAS,KAAM;AAAA;AAAA;AAAA,yBAGjD,wBAAwB;AAAA,iBAChC,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAarC,kBAAkB;AAAA;AAIf,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,oBAAoB,CACxB,MACA,EAAE,OAAO,MACE;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK,aAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,aAAa;AAChB,aAAO,OAAO,MAAM,GAAG;AAAA,IACzB,KAAK,aAAa;AAChB,aAAO,OAAO,QAAQ,GAAG;AAAA,IAC3B,KAAK,aAAa;AAChB,aAAO,OAAO,OAAO,GAAG;AAAA,IAC1B;AACE,aAAO;AAAA,EACX;AACF;AAIO,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,cAAc;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,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA,kBAEiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA,iBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;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.\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 min-height: ${({ $isExpanded = true }) => ($isExpanded ? '59px' : '0px')};\n overflow: hidden;\n transition:\n grid-template-rows ${BANNER_SLIDE_DURATION_MS}ms ease-in,\n min-height ${BANNER_SLIDE_DURATION_MS}ms ease-in;\n @starting-style {\n grid-template-rows: minmax(0, 0fr);\n min-height: 0px;\n }\n & > * {\n align-self: start;\n min-height: 0;\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 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\nconst isSmallLayout = ({ theme }: { theme: { layoutMode?: string } }) => ['s', 'xs'].includes(theme.layoutMode!);\n\n// title, description and action link are the 3 children (in this order). Default layouts: the title and the description\n// share the first column and the action link is its own cell right after the text (the first column grows with the\n// text up to the free space, the link keeps its own width). Small layouts: a single column, the link goes on its own\n// row below the description.\nexport const StyledBody = styled('div', { name: DSBannerName, slot: DSBannerSlots.BODY })`\n display: grid;\n grid-template-columns: ${(props) => (isSmallLayout(props) ? 'minmax(0, 1fr)' : 'minmax(0, max-content) auto')};\n justify-content: start;\n padding-top: 9px;\n & > :nth-child(-n + 2) {\n grid-column: 1;\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\ninterface StyledActionLinkT {\n isBodyEmpty: boolean;\n}\n// its own cell of the StyledBody grid (never inline in the description), nested in DSTypography (link-sml-title variant).\nexport const StyledActionLink = styled(DSTypography, {\n name: DSBannerName,\n slot: DSBannerSlots.ACTION_LINK,\n})<StyledActionLinkT>`\n min-width: 0px;\n position: relative;\n margin-bottom: 9px;\n ${(props) =>\n isSmallLayout(props)\n ? `\n justify-self: start;\n `\n : `\n grid-column: 2;\n grid-row: ${props.isBodyEmpty ? 1 : 2};\n align-self: end;\n align-self: last baseline;\n margin-left: 16px;\n `}\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
|
@@ -18,7 +18,7 @@ export declare const StyledSubTitle: import("styled-components").StyledComponent
|
|
|
18
18
|
interface StyledActionLinkT {
|
|
19
19
|
isBodyEmpty: boolean;
|
|
20
20
|
}
|
|
21
|
-
export declare const StyledActionLink: import("styled-components").StyledComponent<"
|
|
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>;
|
|
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.39",
|
|
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.39",
|
|
40
|
+
"@elliemae/ds-grid": "3.80.0-next.39",
|
|
41
|
+
"@elliemae/ds-icons": "3.80.0-next.39",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.80.0-next.39",
|
|
43
|
+
"@elliemae/ds-system": "3.80.0-next.39",
|
|
44
|
+
"@elliemae/ds-typescript-helpers": "3.80.0-next.39",
|
|
45
|
+
"@elliemae/ds-typography": "3.80.0-next.39",
|
|
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.39",
|
|
50
|
+
"@elliemae/ds-test-utils": "3.80.0-next.39",
|
|
51
51
|
"jest": "^30.0.0",
|
|
52
52
|
"styled-components": "~5.3.11"
|
|
53
53
|
},
|