@elliemae/ds-card-navigation 3.55.0-next.7 → 3.55.0-next.9
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 +41 -40
- 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/parts/ActionsRegion.js +63 -0
- package/dist/cjs/parts/ActionsRegion.js.map +7 -0
- package/dist/cjs/{style.js → parts/style.js} +51 -34
- package/dist/cjs/parts/style.js.map +7 -0
- package/dist/cjs/parts/text-region/IconAndTextsRegion.js +101 -0
- package/dist/cjs/parts/text-region/IconAndTextsRegion.js.map +7 -0
- package/dist/cjs/parts/text-region/IconAndTextsRegionContent.js +88 -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 +42 -49
- 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/parts/ActionsRegion.js +33 -0
- package/dist/esm/parts/ActionsRegion.js.map +7 -0
- package/dist/esm/{style.js → parts/style.js} +51 -34
- package/dist/esm/parts/style.js.map +7 -0
- package/dist/esm/parts/text-region/IconAndTextsRegion.js +71 -0
- package/dist/esm/parts/text-region/IconAndTextsRegion.js.map +7 -0
- package/dist/esm/parts/text-region/IconAndTextsRegionContent.js +67 -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/parts/ActionsRegion.d.ts +8 -0
- package/dist/types/{style.d.ts → parts/style.d.ts} +9 -4
- package/dist/types/parts/text-region/IconAndTextsRegion.d.ts +13 -0
- package/dist/types/parts/text-region/IconAndTextsRegionContent.d.ts +15 -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 +11 -11
- 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/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.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 → tooltip-tests/DSCardNavigation.tooltip.hover.test.playwright.d.ts} +0 -0
- /package/dist/types/tests/{wraptext/DSCardNavigation.wrapText.test.playwright.d.ts → tooltip-tests/DSCardNavigation.tooltip.keyboard.test.playwright.d.ts} +0 -0
|
@@ -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.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
|
-
}
|
|
File without changes
|