@elliemae/ds-card-navigation 3.53.0-alpha.1 → 3.53.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSCardNavigation.js +50 -39
- package/dist/cjs/DSCardNavigation.js.map +2 -2
- package/dist/cjs/config/useCardNavigation.js +19 -4
- package/dist/cjs/config/useCardNavigation.js.map +2 -2
- package/dist/cjs/constants/index.js +11 -2
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/parts/ActionsRegion.js +72 -0
- package/dist/cjs/parts/ActionsRegion.js.map +7 -0
- package/dist/cjs/{style.js → parts/style.js} +83 -38
- package/dist/cjs/parts/style.js.map +7 -0
- package/dist/cjs/parts/text-region/IconAndTextsRegion.js +107 -0
- package/dist/cjs/parts/text-region/IconAndTextsRegion.js.map +7 -0
- package/dist/cjs/parts/text-region/IconAndTextsRegionContent.js +128 -0
- package/dist/cjs/parts/text-region/IconAndTextsRegionContent.js.map +7 -0
- package/dist/cjs/react-desc-prop-types.js +3 -3
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/DSCardNavigation.js +51 -48
- package/dist/esm/DSCardNavigation.js.map +2 -2
- package/dist/esm/config/useCardNavigation.js +20 -5
- package/dist/esm/config/useCardNavigation.js.map +2 -2
- package/dist/esm/constants/index.js +11 -2
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/index.js +3 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/parts/ActionsRegion.js +46 -0
- package/dist/esm/parts/ActionsRegion.js.map +7 -0
- package/dist/esm/parts/style.js +170 -0
- package/dist/esm/parts/style.js.map +7 -0
- package/dist/esm/parts/text-region/IconAndTextsRegion.js +77 -0
- package/dist/esm/parts/text-region/IconAndTextsRegion.js.map +7 -0
- package/dist/esm/parts/text-region/IconAndTextsRegionContent.js +107 -0
- package/dist/esm/parts/text-region/IconAndTextsRegionContent.js.map +7 -0
- package/dist/esm/react-desc-prop-types.js +3 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/DSCardNavigation.d.ts +1 -1
- package/dist/types/config/useCardNavigation.d.ts +7 -6
- package/dist/types/constants/index.d.ts +18 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/parts/ActionsRegion.d.ts +10 -0
- package/dist/types/{style.d.ts → parts/style.d.ts} +12 -7
- package/dist/types/parts/text-region/IconAndTextsRegion.d.ts +15 -0
- package/dist/types/parts/text-region/IconAndTextsRegionContent.d.ts +17 -0
- package/dist/types/react-desc-prop-types.d.ts +0 -1
- package/dist/types/tests/tooltip-tests/DSCardNavigation.tooltip.keyboard.test.playwright.d.ts +1 -0
- package/dist/types/tests/tooltip-tests/DSCardNavigation.tooltip.wrapText.interdependecy.test.playwright.d.ts +1 -0
- package/dist/types/tests/tooltip-tests/DSCardNavigationTooltipTestRenderer.d.ts +1 -0
- package/package.json +18 -13
- package/dist/cjs/DescriptionComponent.js +0 -79
- package/dist/cjs/DescriptionComponent.js.map +0 -7
- package/dist/cjs/TitleComponent.js +0 -51
- package/dist/cjs/TitleComponent.js.map +0 -7
- package/dist/cjs/style.js.map +0 -7
- package/dist/cjs/tests/overflow/DSCardNavigation.overflow.test.playwright.js +0 -75
- package/dist/cjs/tests/overflow/DSCardNavigation.overflow.test.playwright.js.map +0 -7
- package/dist/cjs/tests/overflow/DSCardNavigationOverflowTestRenderer.js +0 -49
- package/dist/cjs/tests/overflow/DSCardNavigationOverflowTestRenderer.js.map +0 -7
- package/dist/cjs/tests/wraptext/DSCardNavigation.wrapText.test.playwright.js +0 -63
- package/dist/cjs/tests/wraptext/DSCardNavigation.wrapText.test.playwright.js.map +0 -7
- package/dist/cjs/tests/wraptext/DSCardNavigationWrapTextTestRenderer.js +0 -47
- package/dist/cjs/tests/wraptext/DSCardNavigationWrapTextTestRenderer.js.map +0 -7
- package/dist/esm/DescriptionComponent.js +0 -49
- package/dist/esm/DescriptionComponent.js.map +0 -7
- package/dist/esm/TitleComponent.js +0 -21
- package/dist/esm/TitleComponent.js.map +0 -7
- package/dist/esm/style.js +0 -125
- package/dist/esm/style.js.map +0 -7
- package/dist/esm/tests/overflow/DSCardNavigation.overflow.test.playwright.js +0 -52
- package/dist/esm/tests/overflow/DSCardNavigation.overflow.test.playwright.js.map +0 -7
- package/dist/esm/tests/overflow/DSCardNavigationOverflowTestRenderer.js +0 -19
- package/dist/esm/tests/overflow/DSCardNavigationOverflowTestRenderer.js.map +0 -7
- package/dist/esm/tests/wraptext/DSCardNavigation.wrapText.test.playwright.js +0 -40
- package/dist/esm/tests/wraptext/DSCardNavigation.wrapText.test.playwright.js.map +0 -7
- package/dist/esm/tests/wraptext/DSCardNavigationWrapTextTestRenderer.js +0 -17
- package/dist/esm/tests/wraptext/DSCardNavigationWrapTextTestRenderer.js.map +0 -7
- package/dist/types/DescriptionComponent.d.ts +0 -4
- package/dist/types/TitleComponent.d.ts +0 -4
- package/dist/types/tests/overflow/DSCardNavigationOverflowTestRenderer.d.ts +0 -2
- package/dist/types/tests/wraptext/DSCardNavigationWrapTextTestRenderer.d.ts +0 -2
- /package/dist/types/tests/{overflow/DSCardNavigation.overflow.test.playwright.d.ts → DSCardNavigation.get-owner-props.test.d.ts} +0 -0
- /package/dist/types/tests/{wraptext/DSCardNavigation.wrapText.test.playwright.d.ts → tooltip-tests/DSCardNavigation.tooltip.hover.test.playwright.d.ts} +0 -0
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useOnOverflowChange } from "@elliemae/ds-hooks-on-overflow-change";
|
|
4
|
-
import { DSTooltipV3 } from "@elliemae/ds-tooltip-v3";
|
|
5
|
-
import { TYPOGRAPHY_VARIANTS } from "@elliemae/ds-typography";
|
|
6
|
-
import { useState } from "react";
|
|
7
|
-
import { CARD_NAVIGATION_DATA_TESTID } from "./constants/index.js";
|
|
8
|
-
import { StyledCardNavigationContentDescription, StyledDescriptionTypography } from "./style.js";
|
|
9
|
-
const DescriptionComponent = (props) => {
|
|
10
|
-
const { description, wrapText } = props;
|
|
11
|
-
const [isDescriptionTruncating, setIsDescriptionTruncating] = useState(false);
|
|
12
|
-
const { handleRef: descriptionHandleRef } = useOnOverflowChange({
|
|
13
|
-
onOverflowStateChange: setIsDescriptionTruncating
|
|
14
|
-
});
|
|
15
|
-
if (wrapText)
|
|
16
|
-
return /* @__PURE__ */ jsx(StyledCardNavigationContentDescription, { children: /* @__PURE__ */ jsx(
|
|
17
|
-
StyledDescriptionTypography,
|
|
18
|
-
{
|
|
19
|
-
innerRef: descriptionHandleRef,
|
|
20
|
-
truncateWithEllipsis: true,
|
|
21
|
-
variant: TYPOGRAPHY_VARIANTS.B1,
|
|
22
|
-
"data-testid": CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
|
|
23
|
-
children: description
|
|
24
|
-
}
|
|
25
|
-
) });
|
|
26
|
-
return /* @__PURE__ */ jsx(StyledCardNavigationContentDescription, { children: isDescriptionTruncating ? /* @__PURE__ */ jsx(DSTooltipV3, { text: description, children: /* @__PURE__ */ jsx(
|
|
27
|
-
StyledDescriptionTypography,
|
|
28
|
-
{
|
|
29
|
-
innerRef: descriptionHandleRef,
|
|
30
|
-
truncateWithEllipsis: true,
|
|
31
|
-
variant: TYPOGRAPHY_VARIANTS.B1,
|
|
32
|
-
"data-testid": CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
|
|
33
|
-
children: description
|
|
34
|
-
}
|
|
35
|
-
) }) : /* @__PURE__ */ jsx(
|
|
36
|
-
StyledDescriptionTypography,
|
|
37
|
-
{
|
|
38
|
-
innerRef: descriptionHandleRef,
|
|
39
|
-
truncateWithEllipsis: true,
|
|
40
|
-
variant: TYPOGRAPHY_VARIANTS.B1,
|
|
41
|
-
"data-testid": CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
|
|
42
|
-
children: description
|
|
43
|
-
}
|
|
44
|
-
) });
|
|
45
|
-
};
|
|
46
|
-
export {
|
|
47
|
-
DescriptionComponent
|
|
48
|
-
};
|
|
49
|
-
//# sourceMappingURL=DescriptionComponent.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DescriptionComponent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { useState } from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from './constants/index.js';\nimport { StyledCardNavigationContentDescription, StyledDescriptionTypography } from './style.js';\n\nexport const DescriptionComponent = (props: { description: string; wrapText?: boolean }) => {\n const { description, wrapText } = props;\n\n const [isDescriptionTruncating, setIsDescriptionTruncating] = useState(false);\n\n const { handleRef: descriptionHandleRef } = useOnOverflowChange({\n onOverflowStateChange: setIsDescriptionTruncating,\n });\n\n if (wrapText)\n return (\n <StyledCardNavigationContentDescription>\n <StyledDescriptionTypography\n innerRef={descriptionHandleRef}\n truncateWithEllipsis\n variant={TYPOGRAPHY_VARIANTS.B1}\n data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n >\n {description}\n </StyledDescriptionTypography>\n </StyledCardNavigationContentDescription>\n );\n\n return (\n <StyledCardNavigationContentDescription>\n {isDescriptionTruncating ? (\n <DSTooltipV3 text={description}>\n <StyledDescriptionTypography\n innerRef={descriptionHandleRef}\n truncateWithEllipsis\n variant={TYPOGRAPHY_VARIANTS.B1}\n data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n >\n {description}\n </StyledDescriptionTypography>\n </DSTooltipV3>\n ) : (\n <StyledDescriptionTypography\n innerRef={descriptionHandleRef}\n truncateWithEllipsis\n variant={TYPOGRAPHY_VARIANTS.B1}\n data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n >\n {description}\n </StyledDescriptionTypography>\n )}\n </StyledCardNavigationContentDescription>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACmBf;AAnBR,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,mCAAmC;AAC5C,SAAS,wCAAwC,mCAAmC;AAE7E,MAAM,uBAAuB,CAAC,UAAuD;AAC1F,QAAM,EAAE,aAAa,SAAS,IAAI;AAElC,QAAM,CAAC,yBAAyB,0BAA0B,IAAI,SAAS,KAAK;AAE5E,QAAM,EAAE,WAAW,qBAAqB,IAAI,oBAAoB;AAAA,IAC9D,uBAAuB;AAAA,EACzB,CAAC;AAED,MAAI;AACF,WACE,oBAAC,0CACC;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,sBAAoB;AAAA,QACpB,SAAS,oBAAoB;AAAA,QAC7B,eAAa,4BAA4B;AAAA,QAExC;AAAA;AAAA,IACH,GACF;AAGJ,SACE,oBAAC,0CACE,oCACC,oBAAC,eAAY,MAAM,aACjB;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,sBAAoB;AAAA,MACpB,SAAS,oBAAoB;AAAA,MAC7B,eAAa,4BAA4B;AAAA,MAExC;AAAA;AAAA,EACH,GACF,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,sBAAoB;AAAA,MACpB,SAAS,oBAAoB;AAAA,MAC7B,eAAa,4BAA4B;AAAA,MAExC;AAAA;AAAA,EACH,GAEJ;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useOnOverflowChange } from "@elliemae/ds-hooks-on-overflow-change";
|
|
4
|
-
import { DSTooltipV3 } from "@elliemae/ds-tooltip-v3";
|
|
5
|
-
import { TYPOGRAPHY_VARIANTS } from "@elliemae/ds-typography";
|
|
6
|
-
import { useState } from "react";
|
|
7
|
-
import { StyledCardNavigationContentTitle, StyledTitleTypography } from "./style.js";
|
|
8
|
-
const TitleComponent = (props) => {
|
|
9
|
-
const { title, wrapText } = props;
|
|
10
|
-
const [isTitleTruncating, setIsTitleTruncating] = useState(false);
|
|
11
|
-
const { handleRef: titleHandleRef } = useOnOverflowChange({
|
|
12
|
-
onOverflowStateChange: setIsTitleTruncating
|
|
13
|
-
});
|
|
14
|
-
if (wrapText)
|
|
15
|
-
return /* @__PURE__ */ jsx(StyledCardNavigationContentTitle, { children: /* @__PURE__ */ jsx(StyledTitleTypography, { innerRef: titleHandleRef, truncateWithEllipsis: true, variant: TYPOGRAPHY_VARIANTS.B1, children: title }) });
|
|
16
|
-
return /* @__PURE__ */ jsx(StyledCardNavigationContentTitle, { children: isTitleTruncating ? /* @__PURE__ */ jsx(DSTooltipV3, { text: title, children: /* @__PURE__ */ jsx(StyledTitleTypography, { innerRef: titleHandleRef, truncateWithEllipsis: true, variant: TYPOGRAPHY_VARIANTS.B1, children: title }) }) : /* @__PURE__ */ jsx(StyledTitleTypography, { innerRef: titleHandleRef, truncateWithEllipsis: true, variant: TYPOGRAPHY_VARIANTS.B1, children: title }) });
|
|
17
|
-
};
|
|
18
|
-
export {
|
|
19
|
-
TitleComponent
|
|
20
|
-
};
|
|
21
|
-
//# sourceMappingURL=TitleComponent.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/TitleComponent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { useState } from 'react';\nimport { StyledCardNavigationContentTitle, StyledTitleTypography } from './style.js';\n\nexport const TitleComponent = (props: { title: string; wrapText?: boolean }) => {\n const { title, wrapText } = props;\n\n const [isTitleTruncating, setIsTitleTruncating] = useState(false);\n\n const { handleRef: titleHandleRef } = useOnOverflowChange({\n onOverflowStateChange: setIsTitleTruncating,\n });\n\n if (wrapText)\n return (\n <StyledCardNavigationContentTitle>\n <StyledTitleTypography innerRef={titleHandleRef} truncateWithEllipsis variant={TYPOGRAPHY_VARIANTS.B1}>\n {title}\n </StyledTitleTypography>\n </StyledCardNavigationContentTitle>\n );\n\n return (\n <StyledCardNavigationContentTitle>\n {isTitleTruncating ? (\n <DSTooltipV3 text={title}>\n <StyledTitleTypography innerRef={titleHandleRef} truncateWithEllipsis variant={TYPOGRAPHY_VARIANTS.B1}>\n {title}\n </StyledTitleTypography>\n </DSTooltipV3>\n ) : (\n <StyledTitleTypography innerRef={titleHandleRef} truncateWithEllipsis variant={TYPOGRAPHY_VARIANTS.B1}>\n {title}\n </StyledTitleTypography>\n )}\n </StyledCardNavigationContentTitle>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkBf;AAlBR,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,kCAAkC,6BAA6B;AAEjE,MAAM,iBAAiB,CAAC,UAAiD;AAC9E,QAAM,EAAE,OAAO,SAAS,IAAI;AAE5B,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAEhE,QAAM,EAAE,WAAW,eAAe,IAAI,oBAAoB;AAAA,IACxD,uBAAuB;AAAA,EACzB,CAAC;AAED,MAAI;AACF,WACE,oBAAC,oCACC,8BAAC,yBAAsB,UAAU,gBAAgB,sBAAoB,MAAC,SAAS,oBAAoB,IAChG,iBACH,GACF;AAGJ,SACE,oBAAC,oCACE,8BACC,oBAAC,eAAY,MAAM,OACjB,8BAAC,yBAAsB,UAAU,gBAAgB,sBAAoB,MAAC,SAAS,oBAAoB,IAChG,iBACH,GACF,IAEA,oBAAC,yBAAsB,UAAU,gBAAgB,sBAAoB,MAAC,SAAS,oBAAoB,IAChG,iBACH,GAEJ;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/style.js
DELETED
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { DSTypography } from "@elliemae/ds-typography";
|
|
3
|
-
import { styled } from "@elliemae/ds-system";
|
|
4
|
-
import { Grid } from "@elliemae/ds-grid";
|
|
5
|
-
import { DSCardNavigationName, CARD_NAVIGATION_SLOTS, CardNavigationTypes } from "./constants/index.js";
|
|
6
|
-
const StyledCardNavigationContentTitle = styled("div", {
|
|
7
|
-
name: DSCardNavigationName,
|
|
8
|
-
slot: CARD_NAVIGATION_SLOTS.TITLE
|
|
9
|
-
})`
|
|
10
|
-
padding-top: ${(props) => props.theme.space.xxs};
|
|
11
|
-
`;
|
|
12
|
-
const StyledTitleTypography = styled(DSTypography)`
|
|
13
|
-
color: ${(props) => props.theme.colors.neutral["700"]};
|
|
14
|
-
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
15
|
-
font-size: 18px;
|
|
16
|
-
`;
|
|
17
|
-
const StyledCardNavigationContentDescription = styled.div``;
|
|
18
|
-
const StyledDescriptionTypography = styled(DSTypography)`
|
|
19
|
-
color: ${(props) => props.theme.colors.neutral["500"]};
|
|
20
|
-
font-size: 12px;
|
|
21
|
-
`;
|
|
22
|
-
const StyledCardNavigationContentTitleWrapper = styled.div`
|
|
23
|
-
width: 100%;
|
|
24
|
-
`;
|
|
25
|
-
const StyledCardNavigationContent = styled.div`
|
|
26
|
-
padding-right: ${(props) => props.theme.space.xs};
|
|
27
|
-
padding-left: ${(props) => props.theme.space.xs};
|
|
28
|
-
display: flex;
|
|
29
|
-
align-items: center;
|
|
30
|
-
flex: 1;
|
|
31
|
-
width: 100%;
|
|
32
|
-
`;
|
|
33
|
-
const StyledCardNavigationCentralContent = styled(Grid, {
|
|
34
|
-
slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,
|
|
35
|
-
name: DSCardNavigationName
|
|
36
|
-
})`
|
|
37
|
-
min-width: 273px;
|
|
38
|
-
@media (max-width: ${(props) => props.theme.breakpoints.small}) {
|
|
39
|
-
min-width: 336px;
|
|
40
|
-
}
|
|
41
|
-
`;
|
|
42
|
-
const StyledCardNavigationBoxWrapper = styled("div", {
|
|
43
|
-
name: DSCardNavigationName,
|
|
44
|
-
slot: CARD_NAVIGATION_SLOTS.ROOT
|
|
45
|
-
})`
|
|
46
|
-
width: 337px;
|
|
47
|
-
display: flex;
|
|
48
|
-
flex-direction: row;
|
|
49
|
-
flex-wrap: nowrap;
|
|
50
|
-
box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);
|
|
51
|
-
border-radius: 2px;
|
|
52
|
-
position: relative;
|
|
53
|
-
outline: none;
|
|
54
|
-
${(props) => props.fluid ? "width: 100%" : ""};
|
|
55
|
-
@media (max-width: ${(props) => props.theme.breakpoints.small}) {
|
|
56
|
-
width: ${(props) => props.fluid ? "width: 100%" : "414px"};
|
|
57
|
-
}
|
|
58
|
-
:after {
|
|
59
|
-
display: block;
|
|
60
|
-
content: '';
|
|
61
|
-
position: absolute;
|
|
62
|
-
height: 100%;
|
|
63
|
-
width: 100%;
|
|
64
|
-
top: 0;
|
|
65
|
-
left: 0;
|
|
66
|
-
border: solid ${(props) => props.theme.space.xxs} transparent;
|
|
67
|
-
border-radius: 2px;
|
|
68
|
-
pointer-events: none;
|
|
69
|
-
}
|
|
70
|
-
&:hover,
|
|
71
|
-
&:focus {
|
|
72
|
-
box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);
|
|
73
|
-
}
|
|
74
|
-
`;
|
|
75
|
-
const StyledCardNavigationIcon = styled("div", {
|
|
76
|
-
name: DSCardNavigationName,
|
|
77
|
-
slot: CARD_NAVIGATION_SLOTS.TYPE
|
|
78
|
-
})`
|
|
79
|
-
width: 64px;
|
|
80
|
-
height: 64px;
|
|
81
|
-
background-color: #32aad1;
|
|
82
|
-
border-top-left-radius: 2px;
|
|
83
|
-
border-bottom-left-radius: 2px;
|
|
84
|
-
padding: ${(props) => props.theme.space.xxs};
|
|
85
|
-
display: flex;
|
|
86
|
-
align-items: center;
|
|
87
|
-
justify-content: center;
|
|
88
|
-
fill: #ffffff;
|
|
89
|
-
background-color: ${({ $type }) => $type === CardNavigationTypes.BORROWER && "#32aad1" || $type === CardNavigationTypes.FINANCIAL && "#1ba88d" || $type === CardNavigationTypes.LOAN && "#8e49b2" || $type === CardNavigationTypes.REGULATORY && "#db5575" || "#32aad1"}; // Default color
|
|
90
|
-
`;
|
|
91
|
-
const StyledCardNavigationActions = styled("div", {
|
|
92
|
-
name: DSCardNavigationName,
|
|
93
|
-
slot: CARD_NAVIGATION_SLOTS.ACTIONS
|
|
94
|
-
})`
|
|
95
|
-
display: flex;
|
|
96
|
-
flex-direction: row;
|
|
97
|
-
align-items: center;
|
|
98
|
-
padding-right: ${(props) => props.theme.space.xxs};
|
|
99
|
-
`;
|
|
100
|
-
const StyledCardNavigationAction = styled.div`
|
|
101
|
-
margin-left: ${(props) => props.theme.space.xxs};
|
|
102
|
-
span {
|
|
103
|
-
height: ${(props) => props.theme.space.s};
|
|
104
|
-
width: ${(props) => props.theme.space.s};
|
|
105
|
-
svg {
|
|
106
|
-
fill: ${(props) => props.theme.colors.neutral[500]};
|
|
107
|
-
height: ${(props) => props.theme.space.s};
|
|
108
|
-
width: ${(props) => props.theme.space.s};
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
`;
|
|
112
|
-
export {
|
|
113
|
-
StyledCardNavigationAction,
|
|
114
|
-
StyledCardNavigationActions,
|
|
115
|
-
StyledCardNavigationBoxWrapper,
|
|
116
|
-
StyledCardNavigationCentralContent,
|
|
117
|
-
StyledCardNavigationContent,
|
|
118
|
-
StyledCardNavigationContentDescription,
|
|
119
|
-
StyledCardNavigationContentTitle,
|
|
120
|
-
StyledCardNavigationContentTitleWrapper,
|
|
121
|
-
StyledCardNavigationIcon,
|
|
122
|
-
StyledDescriptionTypography,
|
|
123
|
-
StyledTitleTypography
|
|
124
|
-
};
|
|
125
|
-
//# sourceMappingURL=style.js.map
|
package/dist/esm/style.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSTypography } from '@elliemae/ds-typography';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardNavigationName, CARD_NAVIGATION_SLOTS, CardNavigationTypes } from './constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE,\n})`\n padding-top: ${(props) => props.theme.space.xxs};\n`;\n\nexport const StyledTitleTypography = styled(DSTypography)`\n color: ${(props) => props.theme.colors.neutral['700']};\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 18px;\n`;\n\nexport const StyledCardNavigationContentDescription = styled.div``;\n\nexport const StyledDescriptionTypography = styled(DSTypography)`\n color: ${(props) => props.theme.colors.neutral['500']};\n font-size: 12px;\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled.div`\n width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled.div<{ wrapText?: boolean }>`\n padding-right: ${(props) => props.theme.space.xs};\n padding-left: ${(props) => props.theme.space.xs};\n display: flex;\n align-items: center;\n flex: 1;\n width: 100%;\n`;\n\nexport const StyledCardNavigationCentralContent = styled(Grid, {\n slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,\n name: DSCardNavigationName,\n})`\n min-width: 273px;\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n min-width: 336px;\n }\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n fluid?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps>`\n width: 337px;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n border-radius: 2px;\n position: relative;\n outline: none;\n ${(props) => (props.fluid ? 'width: 100%' : '')};\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n }\n :after {\n display: block;\n content: '';\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n border: solid ${(props) => props.theme.space.xxs} transparent;\n border-radius: 2px;\n pointer-events: none;\n }\n &:hover,\n &:focus {\n box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n }\n`;\ninterface StyledCardNavigationIconProps {\n $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];\n}\n\nexport const StyledCardNavigationIcon = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TYPE,\n})<StyledCardNavigationIconProps>`\n width: 64px;\n height: 64px;\n background-color: #32aad1;\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n padding: ${(props) => props.theme.space.xxs};\n display: flex;\n align-items: center;\n justify-content: center;\n fill: #ffffff;\n background-color: ${({ $type }) =>\n ($type === CardNavigationTypes.BORROWER && '#32aad1') ||\n ($type === CardNavigationTypes.FINANCIAL && '#1ba88d') ||\n ($type === CardNavigationTypes.LOAN && '#8e49b2') ||\n ($type === CardNavigationTypes.REGULATORY && '#db5575') ||\n '#32aad1'}; // Default color\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-right: ${(props) => props.theme.space.xxs};\n`;\n\nexport const StyledCardNavigationAction = styled.div`\n margin-left: ${(props) => props.theme.space.xxs};\n span {\n height: ${(props) => props.theme.space.s};\n width: ${(props) => props.theme.space.s};\n svg {\n fill: ${(props) => props.theme.colors.neutral[500]};\n height: ${(props) => props.theme.space.s};\n width: ${(props) => props.theme.space.s};\n }\n }\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,sBAAsB,uBAAuB,2BAA2B;AAE1E,MAAM,mCAAmC,OAAO,OAAO;AAAA,EAC5D,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,iBACgB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAG1C,MAAM,wBAAwB,OAAO,YAAY;AAAA,WAC7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACtC,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAIrD,MAAM,yCAAyC,OAAO;AAEtD,MAAM,8BAA8B,OAAO,YAAY;AAAA,WACnD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIhD,MAAM,0CAA0C,OAAO;AAAA;AAAA;AAIvD,MAAM,8BAA8B,OAAO;AAAA,mBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,kBAChC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1C,MAAM,qCAAqC,OAAO,MAAM;AAAA,EAC7D,MAAM,sBAAsB;AAAA,EAC5B,MAAM;AACR,CAAC;AAAA;AAAA,uBAEsB,CAAC,UAAU,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAQxD,MAAM,iCAAiC,OAAO,OAAO;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASG,CAAC,UAAW,MAAM,QAAQ,gBAAgB,EAAG;AAAA,uBAC1B,CAAC,UAAU,MAAM,MAAM,YAAY,KAAK;AAAA,aAClD,CAAC,UAAW,MAAM,QAAQ,gBAAgB,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAU3C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa7C,MAAM,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMY,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKvB,CAAC,EAAE,MAAM,MAC1B,UAAU,oBAAoB,YAAY,aAC1C,UAAU,oBAAoB,aAAa,aAC3C,UAAU,oBAAoB,QAAQ,aACtC,UAAU,oBAAoB,cAAc,aAC7C,SAAS;AAAA;AAGN,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA,mBAIkB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAG5C,MAAM,6BAA6B,OAAO;AAAA,iBAChC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,cAEnC,CAAC,UAAU,MAAM,MAAM,MAAM,CAAC;AAAA,aAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA,cAE7B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,gBACxC,CAAC,UAAU,MAAM,MAAM,MAAM,CAAC;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { expect, test } from "@playwright/experimental-ct-react";
|
|
4
|
-
import { DSCardNavigationOverflowTestRenderer } from "./DSCardNavigationOverflowTestRenderer";
|
|
5
|
-
const tooltipSelector = '[data-testid="ds-tooltip-v3-tooltip-text-wrapper"]';
|
|
6
|
-
const buttonSelector = '[data-testid="test-button"]';
|
|
7
|
-
const assertTooltipHidden = async (page) => {
|
|
8
|
-
await expect(page.locator(tooltipSelector)).toHaveCount(0);
|
|
9
|
-
await expect(page.locator(tooltipSelector)).toBeHidden();
|
|
10
|
-
};
|
|
11
|
-
const assertTooltipVisible = async (page) => {
|
|
12
|
-
await expect(page.locator(tooltipSelector)).toHaveCount(1);
|
|
13
|
-
await expect(page.locator(tooltipSelector)).toBeVisible();
|
|
14
|
-
};
|
|
15
|
-
test.describe("DSCardNavigation - Overflow Behavior", () => {
|
|
16
|
-
test("Should show title tooltip on hover, and should hide tooltip title on hover out", async ({ mount, page }) => {
|
|
17
|
-
await mount(/* @__PURE__ */ jsx(DSCardNavigationOverflowTestRenderer, {}));
|
|
18
|
-
const title = page.locator('[data-testid="ds-cardnavigation-title"]');
|
|
19
|
-
await title.hover();
|
|
20
|
-
await assertTooltipVisible(page);
|
|
21
|
-
await page.locator(buttonSelector).hover();
|
|
22
|
-
await assertTooltipHidden(page);
|
|
23
|
-
});
|
|
24
|
-
test("Should show description tooltip on hover, and should hide tooltip description on hover out ", async ({
|
|
25
|
-
mount,
|
|
26
|
-
page
|
|
27
|
-
}) => {
|
|
28
|
-
await mount(/* @__PURE__ */ jsx(DSCardNavigationOverflowTestRenderer, {}));
|
|
29
|
-
const description = page.locator('[data-testid="ds-card-navigation--description"]');
|
|
30
|
-
await description.hover();
|
|
31
|
-
await assertTooltipVisible(page);
|
|
32
|
-
await page.locator(buttonSelector).hover();
|
|
33
|
-
await assertTooltipHidden(page);
|
|
34
|
-
});
|
|
35
|
-
test("Should hide title tooltip on pressing Escape key after hovering ", async ({ mount, page }) => {
|
|
36
|
-
await mount(/* @__PURE__ */ jsx(DSCardNavigationOverflowTestRenderer, {}));
|
|
37
|
-
const title = page.locator('[data-testid="ds-cardnavigation-title"]');
|
|
38
|
-
await title.hover();
|
|
39
|
-
await assertTooltipVisible(page);
|
|
40
|
-
await page.keyboard.press("Escape");
|
|
41
|
-
await assertTooltipHidden(page);
|
|
42
|
-
});
|
|
43
|
-
test("Should hide description tooltip on pressing Escape key after hovering ", async ({ mount, page }) => {
|
|
44
|
-
await mount(/* @__PURE__ */ jsx(DSCardNavigationOverflowTestRenderer, {}));
|
|
45
|
-
const description = page.locator('[data-testid="ds-card-navigation--description"]');
|
|
46
|
-
await description.hover();
|
|
47
|
-
await assertTooltipVisible(page);
|
|
48
|
-
await page.keyboard.press("Escape");
|
|
49
|
-
await assertTooltipHidden(page);
|
|
50
|
-
});
|
|
51
|
-
});
|
|
52
|
-
//# sourceMappingURL=DSCardNavigation.overflow.test.playwright.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/tests/overflow/DSCardNavigation.overflow.test.playwright.jsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { expect, test } from '@playwright/experimental-ct-react';\nimport { DSCardNavigationOverflowTestRenderer } from './DSCardNavigationOverflowTestRenderer';\n\nconst tooltipSelector = '[data-testid=\"ds-tooltip-v3-tooltip-text-wrapper\"]';\nconst buttonSelector = '[data-testid=\"test-button\"]';\n\nconst assertTooltipHidden = async (page) => {\n await expect(page.locator(tooltipSelector)).toHaveCount(0);\n await expect(page.locator(tooltipSelector)).toBeHidden();\n};\n\nconst assertTooltipVisible = async (page) => {\n await expect(page.locator(tooltipSelector)).toHaveCount(1);\n await expect(page.locator(tooltipSelector)).toBeVisible();\n};\n\ntest.describe('DSCardNavigation - Overflow Behavior', () => {\n test('Should show title tooltip on hover, and should hide tooltip title on hover out', async ({ mount, page }) => {\n await mount(<DSCardNavigationOverflowTestRenderer />);\n const title = page.locator('[data-testid=\"ds-cardnavigation-title\"]');\n\n await title.hover();\n await assertTooltipVisible(page);\n await page.locator(buttonSelector).hover();\n await assertTooltipHidden(page);\n });\n\n test('Should show description tooltip on hover, and should hide tooltip description on hover out ', async ({\n mount,\n page,\n }) => {\n await mount(<DSCardNavigationOverflowTestRenderer />);\n const description = page.locator('[data-testid=\"ds-card-navigation--description\"]');\n\n await description.hover();\n await assertTooltipVisible(page);\n await page.locator(buttonSelector).hover();\n await assertTooltipHidden(page);\n });\n\n test('Should hide title tooltip on pressing Escape key after hovering ', async ({ mount, page }) => {\n await mount(<DSCardNavigationOverflowTestRenderer />);\n const title = page.locator('[data-testid=\"ds-cardnavigation-title\"]');\n\n await title.hover();\n await assertTooltipVisible(page);\n await page.keyboard.press('Escape');\n await assertTooltipHidden(page);\n });\n\n test('Should hide description tooltip on pressing Escape key after hovering ', async ({ mount, page }) => {\n await mount(<DSCardNavigationOverflowTestRenderer />);\n const description = page.locator('[data-testid=\"ds-card-navigation--description\"]');\n\n await description.hover();\n await assertTooltipVisible(page);\n await page.keyboard.press('Escape');\n await assertTooltipHidden(page);\n });\n});\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkBP;AAlBhB,SAAS,QAAQ,YAAY;AAC7B,SAAS,4CAA4C;AAErD,MAAM,kBAAkB;AACxB,MAAM,iBAAiB;AAEvB,MAAM,sBAAsB,OAAO,SAAS;AAC1C,QAAM,OAAO,KAAK,QAAQ,eAAe,CAAC,EAAE,YAAY,CAAC;AACzD,QAAM,OAAO,KAAK,QAAQ,eAAe,CAAC,EAAE,WAAW;AACzD;AAEA,MAAM,uBAAuB,OAAO,SAAS;AAC3C,QAAM,OAAO,KAAK,QAAQ,eAAe,CAAC,EAAE,YAAY,CAAC;AACzD,QAAM,OAAO,KAAK,QAAQ,eAAe,CAAC,EAAE,YAAY;AAC1D;AAEA,KAAK,SAAS,wCAAwC,MAAM;AAC1D,OAAK,kFAAkF,OAAO,EAAE,OAAO,KAAK,MAAM;AAChH,UAAM,MAAM,oBAAC,wCAAqC,CAAE;AACpD,UAAM,QAAQ,KAAK,QAAQ,yCAAyC;AAEpE,UAAM,MAAM,MAAM;AAClB,UAAM,qBAAqB,IAAI;AAC/B,UAAM,KAAK,QAAQ,cAAc,EAAE,MAAM;AACzC,UAAM,oBAAoB,IAAI;AAAA,EAChC,CAAC;AAED,OAAK,+FAA+F,OAAO;AAAA,IACzG;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,MAAM,oBAAC,wCAAqC,CAAE;AACpD,UAAM,cAAc,KAAK,QAAQ,iDAAiD;AAElF,UAAM,YAAY,MAAM;AACxB,UAAM,qBAAqB,IAAI;AAC/B,UAAM,KAAK,QAAQ,cAAc,EAAE,MAAM;AACzC,UAAM,oBAAoB,IAAI;AAAA,EAChC,CAAC;AAED,OAAK,oEAAoE,OAAO,EAAE,OAAO,KAAK,MAAM;AAClG,UAAM,MAAM,oBAAC,wCAAqC,CAAE;AACpD,UAAM,QAAQ,KAAK,QAAQ,yCAAyC;AAEpE,UAAM,MAAM,MAAM;AAClB,UAAM,qBAAqB,IAAI;AAC/B,UAAM,KAAK,SAAS,MAAM,QAAQ;AAClC,UAAM,oBAAoB,IAAI;AAAA,EAChC,CAAC;AAED,OAAK,0EAA0E,OAAO,EAAE,OAAO,KAAK,MAAM;AACxG,UAAM,MAAM,oBAAC,wCAAqC,CAAE;AACpD,UAAM,cAAc,KAAK,QAAQ,iDAAiD;AAElF,UAAM,YAAY,MAAM;AACxB,UAAM,qBAAqB,IAAI;AAC/B,UAAM,KAAK,SAAS,MAAM,QAAQ;AAClC,UAAM,oBAAoB,IAAI;AAAA,EAChC,CAAC;AACH,CAAC;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import React2 from "react";
|
|
4
|
-
import { DSCardNavigation } from "@elliemae/ds-card-navigation";
|
|
5
|
-
import { themeProviderHOC } from "@elliemae/ds-system";
|
|
6
|
-
const DSCardNavigationOverflowTestRenderer = themeProviderHOC(() => /* @__PURE__ */ jsxs("main", { style: { width: "100px", margin: "2rem" }, "data-testid": "main-div", children: [
|
|
7
|
-
/* @__PURE__ */ jsx(
|
|
8
|
-
DSCardNavigation,
|
|
9
|
-
{
|
|
10
|
-
title: "Card Title with actions + long description",
|
|
11
|
-
description: "Customs actions + long description long description long description long description"
|
|
12
|
-
}
|
|
13
|
-
),
|
|
14
|
-
/* @__PURE__ */ jsx("button", { type: "button", "data-testid": "test-button", children: "test 1" })
|
|
15
|
-
] }));
|
|
16
|
-
export {
|
|
17
|
-
DSCardNavigationOverflowTestRenderer
|
|
18
|
-
};
|
|
19
|
-
//# sourceMappingURL=DSCardNavigationOverflowTestRenderer.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/tests/overflow/DSCardNavigationOverflowTestRenderer.jsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSCardNavigation } from '@elliemae/ds-card-navigation';\nimport { themeProviderHOC } from '@elliemae/ds-system';\n\nexport const DSCardNavigationOverflowTestRenderer = themeProviderHOC(() => (\n <main style={{ width: '100px', margin: '2rem' }} data-testid=\"main-div\">\n <DSCardNavigation\n title=\"Card Title with actions + long description\"\n description=\"Customs actions + long description long description long description long description\"\n />\n <button type=\"button\" data-testid=\"test-button\">\n test 1\n </button>\n </main>\n));\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACKrB,SACE,KADF;AALF,OAAOA,YAAW;AAClB,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAE1B,MAAM,uCAAuC,iBAAiB,MACnE,qBAAC,UAAK,OAAO,EAAE,OAAO,SAAS,QAAQ,OAAO,GAAG,eAAY,YAC3D;AAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,aAAY;AAAA;AAAA,EACd;AAAA,EACA,oBAAC,YAAO,MAAK,UAAS,eAAY,eAAc,oBAEhD;AAAA,GACF,CACD;",
|
|
6
|
-
"names": ["React"]
|
|
7
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { expect, test } from "@playwright/experimental-ct-react";
|
|
4
|
-
import { DSCardNavigationWraptextTestRenderer } from "./DSCardNavigationWrapTextTestRenderer";
|
|
5
|
-
const tooltipSelector = '[data-testid="ds-tooltip-v3-tooltip-text-wrapper"]';
|
|
6
|
-
const assertTooltipHidden = async (page) => {
|
|
7
|
-
await expect(page.locator(tooltipSelector)).toHaveCount(0);
|
|
8
|
-
await expect(page.locator(tooltipSelector)).toBeHidden();
|
|
9
|
-
};
|
|
10
|
-
const assertTooltipVisible = async (page) => {
|
|
11
|
-
await expect(page.locator(tooltipSelector)).toHaveCount(1);
|
|
12
|
-
await expect(page.locator(tooltipSelector)).toBeVisible();
|
|
13
|
-
};
|
|
14
|
-
test.describe("DSCardNavigationWraptextTestRenderer - wrapText Behavior", () => {
|
|
15
|
-
test("Should not allow tooltip to render on title when wrapText is true", async ({ mount, page }) => {
|
|
16
|
-
await mount(/* @__PURE__ */ jsx(DSCardNavigationWraptextTestRenderer, { wrapText: true }));
|
|
17
|
-
const title = page.locator('[data-testid="ds-cardnavigation-title"]');
|
|
18
|
-
await title.hover();
|
|
19
|
-
await assertTooltipHidden(page);
|
|
20
|
-
});
|
|
21
|
-
test("Should not allow tooltip to render on description when wrapText is true", async ({ mount, page }) => {
|
|
22
|
-
await mount(/* @__PURE__ */ jsx(DSCardNavigationWraptextTestRenderer, { wrapText: true }));
|
|
23
|
-
const description = page.locator('[data-testid="ds-card-navigation--description"]');
|
|
24
|
-
await description.hover();
|
|
25
|
-
await assertTooltipHidden(page);
|
|
26
|
-
});
|
|
27
|
-
test("Should allow tooltip to render on title when wrapText is false", async ({ mount, page }) => {
|
|
28
|
-
await mount(/* @__PURE__ */ jsx(DSCardNavigationWraptextTestRenderer, { wrapText: false }));
|
|
29
|
-
const title = page.locator('[data-testid="ds-cardnavigation-title"]');
|
|
30
|
-
await title.hover();
|
|
31
|
-
await assertTooltipVisible(page);
|
|
32
|
-
});
|
|
33
|
-
test("Should allow tooltip to render on description when wrapText is false", async ({ mount, page }) => {
|
|
34
|
-
await mount(/* @__PURE__ */ jsx(DSCardNavigationWraptextTestRenderer, { wrapText: false }));
|
|
35
|
-
const description = page.locator('[data-testid="ds-card-navigation--description"]');
|
|
36
|
-
await description.hover();
|
|
37
|
-
await assertTooltipVisible(page);
|
|
38
|
-
});
|
|
39
|
-
});
|
|
40
|
-
//# sourceMappingURL=DSCardNavigation.wrapText.test.playwright.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/tests/wraptext/DSCardNavigation.wrapText.test.playwright.jsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { expect, test } from '@playwright/experimental-ct-react';\nimport { DSCardNavigationWraptextTestRenderer } from './DSCardNavigationWrapTextTestRenderer';\n\nconst tooltipSelector = '[data-testid=\"ds-tooltip-v3-tooltip-text-wrapper\"]';\n\nconst assertTooltipHidden = async (page) => {\n await expect(page.locator(tooltipSelector)).toHaveCount(0);\n await expect(page.locator(tooltipSelector)).toBeHidden();\n};\n\nconst assertTooltipVisible = async (page) => {\n await expect(page.locator(tooltipSelector)).toHaveCount(1);\n await expect(page.locator(tooltipSelector)).toBeVisible();\n};\n\ntest.describe('DSCardNavigationWraptextTestRenderer - wrapText Behavior', () => {\n test('Should not allow tooltip to render on title when wrapText is true', async ({ mount, page }) => {\n await mount(<DSCardNavigationWraptextTestRenderer wrapText />);\n\n const title = page.locator('[data-testid=\"ds-cardnavigation-title\"]');\n await title.hover();\n await assertTooltipHidden(page);\n });\n\n test('Should not allow tooltip to render on description when wrapText is true', async ({ mount, page }) => {\n await mount(<DSCardNavigationWraptextTestRenderer wrapText />);\n\n const description = page.locator('[data-testid=\"ds-card-navigation--description\"]');\n await description.hover();\n await assertTooltipHidden(page);\n });\n\n test('Should allow tooltip to render on title when wrapText is false', async ({ mount, page }) => {\n await mount(<DSCardNavigationWraptextTestRenderer wrapText={false} />);\n\n const title = page.locator('[data-testid=\"ds-cardnavigation-title\"]');\n await title.hover();\n await assertTooltipVisible(page);\n });\n\n test('Should allow tooltip to render on description when wrapText is false', async ({ mount, page }) => {\n await mount(<DSCardNavigationWraptextTestRenderer wrapText={false} />);\n\n const description = page.locator('[data-testid=\"ds-card-navigation--description\"]');\n await description.hover();\n await assertTooltipVisible(page);\n });\n});\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACiBP;AAjBhB,SAAS,QAAQ,YAAY;AAC7B,SAAS,4CAA4C;AAErD,MAAM,kBAAkB;AAExB,MAAM,sBAAsB,OAAO,SAAS;AAC1C,QAAM,OAAO,KAAK,QAAQ,eAAe,CAAC,EAAE,YAAY,CAAC;AACzD,QAAM,OAAO,KAAK,QAAQ,eAAe,CAAC,EAAE,WAAW;AACzD;AAEA,MAAM,uBAAuB,OAAO,SAAS;AAC3C,QAAM,OAAO,KAAK,QAAQ,eAAe,CAAC,EAAE,YAAY,CAAC;AACzD,QAAM,OAAO,KAAK,QAAQ,eAAe,CAAC,EAAE,YAAY;AAC1D;AAEA,KAAK,SAAS,4DAA4D,MAAM;AAC9E,OAAK,qEAAqE,OAAO,EAAE,OAAO,KAAK,MAAM;AACnG,UAAM,MAAM,oBAAC,wCAAqC,UAAQ,MAAC,CAAE;AAE7D,UAAM,QAAQ,KAAK,QAAQ,yCAAyC;AACpE,UAAM,MAAM,MAAM;AAClB,UAAM,oBAAoB,IAAI;AAAA,EAChC,CAAC;AAED,OAAK,2EAA2E,OAAO,EAAE,OAAO,KAAK,MAAM;AACzG,UAAM,MAAM,oBAAC,wCAAqC,UAAQ,MAAC,CAAE;AAE7D,UAAM,cAAc,KAAK,QAAQ,iDAAiD;AAClF,UAAM,YAAY,MAAM;AACxB,UAAM,oBAAoB,IAAI;AAAA,EAChC,CAAC;AAED,OAAK,kEAAkE,OAAO,EAAE,OAAO,KAAK,MAAM;AAChG,UAAM,MAAM,oBAAC,wCAAqC,UAAU,OAAO,CAAE;AAErE,UAAM,QAAQ,KAAK,QAAQ,yCAAyC;AACpE,UAAM,MAAM,MAAM;AAClB,UAAM,qBAAqB,IAAI;AAAA,EACjC,CAAC;AAED,OAAK,wEAAwE,OAAO,EAAE,OAAO,KAAK,MAAM;AACtG,UAAM,MAAM,oBAAC,wCAAqC,UAAU,OAAO,CAAE;AAErE,UAAM,cAAc,KAAK,QAAQ,iDAAiD;AAClF,UAAM,YAAY,MAAM;AACxB,UAAM,qBAAqB,IAAI;AAAA,EACjC,CAAC;AACH,CAAC;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import React2 from "react";
|
|
4
|
-
import { DSCardNavigation } from "@elliemae/ds-card-navigation";
|
|
5
|
-
import { themeProviderHOC } from "@elliemae/ds-system";
|
|
6
|
-
const DSCardNavigationWraptextTestRenderer = themeProviderHOC(({ wrapText }) => /* @__PURE__ */ jsx("main", { style: { width: "100px", margin: "2rem" }, "data-testid": "main-div", children: /* @__PURE__ */ jsx(
|
|
7
|
-
DSCardNavigation,
|
|
8
|
-
{
|
|
9
|
-
title: "Card Title with actions + long description + long description",
|
|
10
|
-
description: "Customs actions + long description + long description + long description",
|
|
11
|
-
wrapText
|
|
12
|
-
}
|
|
13
|
-
) }));
|
|
14
|
-
export {
|
|
15
|
-
DSCardNavigationWraptextTestRenderer
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=DSCardNavigationWrapTextTestRenderer.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/tests/wraptext/DSCardNavigationWrapTextTestRenderer.jsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSCardNavigation } from '@elliemae/ds-card-navigation';\nimport { themeProviderHOC } from '@elliemae/ds-system';\n\nexport const DSCardNavigationWraptextTestRenderer = themeProviderHOC(({ wrapText }) => (\n <main style={{ width: '100px', margin: '2rem' }} data-testid=\"main-div\">\n <DSCardNavigation\n title=\"Card Title with actions + long description + long description\"\n description=\"Customs actions + long description + long description + long description\"\n wrapText={wrapText}\n />\n </main>\n));\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACMnB;AANJ,OAAOA,YAAW;AAClB,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAE1B,MAAM,uCAAuC,iBAAiB,CAAC,EAAE,SAAS,MAC/E,oBAAC,UAAK,OAAO,EAAE,OAAO,SAAS,QAAQ,OAAO,GAAG,eAAY,YAC3D;AAAA,EAAC;AAAA;AAAA,IACC,OAAM;AAAA,IACN,aAAY;AAAA,IACZ;AAAA;AACF,GACF,CACD;",
|
|
6
|
-
"names": ["React"]
|
|
7
|
-
}
|
|
File without changes
|