@elliemae/ds-card-navigation 3.1.0-next.2 → 3.1.0-next.5
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 +10 -10
- package/dist/cjs/DSCardNavigation.js.map +2 -2
- package/dist/cjs/style.js +10 -10
- package/dist/cjs/style.js.map +2 -2
- package/dist/esm/DSCardNavigation.js +1 -1
- package/dist/esm/DSCardNavigation.js.map +1 -1
- package/dist/esm/style.js +1 -1
- package/dist/esm/style.js.map +1 -1
- package/package.json +15 -13
|
@@ -58,7 +58,7 @@ __export(DSCardNavigation_exports, {
|
|
|
58
58
|
module.exports = __toCommonJS(DSCardNavigation_exports);
|
|
59
59
|
var React = __toESM(require("react"));
|
|
60
60
|
var import_react = __toESM(require("react"));
|
|
61
|
-
var
|
|
61
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
62
62
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
63
63
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
64
64
|
var import_ds_button = __toESM(require("@elliemae/ds-button"));
|
|
@@ -97,19 +97,19 @@ DSCardNavigation.defaultProps = {
|
|
|
97
97
|
Icon: import_ds_icons.LoanProducts
|
|
98
98
|
};
|
|
99
99
|
const props = {
|
|
100
|
-
containerProps:
|
|
101
|
-
title:
|
|
102
|
-
Icon:
|
|
103
|
-
description:
|
|
104
|
-
type:
|
|
105
|
-
actions:
|
|
106
|
-
icon:
|
|
107
|
-
onClick:
|
|
100
|
+
containerProps: import_ds_utilities.PropTypes.object.description("props to inject to card navigation wrapper"),
|
|
101
|
+
title: import_ds_utilities.PropTypes.string.description("card navigation title"),
|
|
102
|
+
Icon: import_ds_utilities.PropTypes.node.description("card navigation main icon"),
|
|
103
|
+
description: import_ds_utilities.PropTypes.string.description("card navigation description"),
|
|
104
|
+
type: import_ds_utilities.PropTypes.oneOf(import_types.CardNavigationTypesValues).description("card navigation type"),
|
|
105
|
+
actions: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.shape({
|
|
106
|
+
icon: import_ds_utilities.PropTypes.element,
|
|
107
|
+
onClick: import_ds_utilities.PropTypes.func
|
|
108
108
|
})).description("card navigation actions array")
|
|
109
109
|
};
|
|
110
110
|
DSCardNavigation.propTypes = props;
|
|
111
111
|
DSCardNavigation.displayName = "DSCardNavigation";
|
|
112
|
-
const DSCardNavigationWithSchema = (0,
|
|
112
|
+
const DSCardNavigationWithSchema = (0, import_ds_utilities.describe)(DSCardNavigation);
|
|
113
113
|
DSCardNavigationWithSchema.propTypes = props;
|
|
114
114
|
var DSCardNavigation_default = DSCardNavigation;
|
|
115
115
|
//# sourceMappingURL=DSCardNavigation.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSCardNavigation.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { MoreOptionsVert, LoanProducts } from '@elliemae/ds-icons';\nimport DSButton, { BUTTON_SIZE, BUTTON_TYPE } from '@elliemae/ds-button';\nimport {\n StyledCardNavigationContentTitle,\n StyledCardNavigationContentDescription,\n StyledCardNavigationContentTitleWrapper,\n StyledCardNavigationContent,\n StyledCardNavigationCentralContent,\n StyledCardNavigationBoxWrapper,\n StyledCardNavigationIcon,\n StyledCardNavigationAction,\n StyledCardNavigationActions,\n} from './style';\nimport { CardNavigationTypes, CardNavigationTypesValues } from './components/types';\n\nconst DSCardNavigation = ({ containerProps = {}, title = '', description = '', type, Icon, actions = [], ...rest }) => (\n <TooltipTextProvider>\n <StyledCardNavigationBoxWrapper role=\"button\" tabIndex={0} {...rest} {...containerProps}>\n <StyledCardNavigationIcon type={type}>\n <Icon size=\"l\" />\n </StyledCardNavigationIcon>\n <StyledCardNavigationCentralContent>\n <StyledCardNavigationContent>\n <StyledCardNavigationContentTitleWrapper>\n <StyledCardNavigationContentTitle>\n <DSTruncatedTooltipText value={title} />\n </StyledCardNavigationContentTitle>\n <StyledCardNavigationContentDescription>\n <DSTruncatedTooltipText value={description} data-testid=\"ds-card-navigation--description\" />\n </StyledCardNavigationContentDescription>\n </StyledCardNavigationContentTitleWrapper>\n </StyledCardNavigationContent>\n {actions.length > 0 && (\n <StyledCardNavigationActions>\n {actions.map(({ icon = <MoreOptionsVert aria-label=\"More options\" />, ...otherProps }, key) => (\n <StyledCardNavigationAction key={key}>\n <DSButton icon={icon} {...otherProps} buttonType={BUTTON_TYPE.TEXT} size={BUTTON_SIZE.L} />\n </StyledCardNavigationAction>\n ))}\n </StyledCardNavigationActions>\n )}\n </StyledCardNavigationCentralContent>\n </StyledCardNavigationBoxWrapper>\n </TooltipTextProvider>\n);\n\nDSCardNavigation.defaultProps = {\n type: CardNavigationTypes.BORROWER,\n Icon: LoanProducts,\n};\n\nconst props = {\n /** props to inject to card navigation wrapper */\n containerProps: PropTypes.object.description('props to inject to card navigation wrapper'),\n /** card navigation title */\n title: PropTypes.string.description('card navigation title'),\n /** card navigation main icon */\n Icon: PropTypes.node.description('card navigation main icon'),\n /** card navigation description */\n description: PropTypes.string.description('card navigation description'),\n /** card navigation type */\n type: PropTypes.oneOf(CardNavigationTypesValues).description('card navigation type'),\n /** card navigation actions array */\n actions: PropTypes.arrayOf(\n PropTypes.shape({\n icon: PropTypes.element,\n onClick: PropTypes.func,\n }),\n ).description('card navigation actions array'),\n};\n\nDSCardNavigation.propTypes = props;\nDSCardNavigation.displayName = 'DSCardNavigation';\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = props;\n\nexport { CardNavigationTypes, CardNavigationTypesValues, DSCardNavigationWithSchema, DSCardNavigation };\n\nexport default DSCardNavigation;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,uCAA4D;AAC5D,sBAA8C;AAC9C,uBAAmD;AACnD,mBAUO;AACP,mBAA+D;AAE/D,MAAM,mBAAmB,CAAC,OAA0F;AAA1F,eAAE,mBAAiB,CAAC,GAAG,QAAQ,IAAI,cAAc,IAAI,MAAM,MAAM,UAAU,CAAC,MAA5E,IAAkF,iBAAlF,IAAkF,CAAhF,kBAAqB,SAAY,eAAkB,QAAM,QAAM;AACzF,4DAAC,4DACC,mDAAC;AAAA,IAA+B,MAAK;AAAA,IAAS,UAAU;AAAA,KAAO,OAAU,iBACvE,mDAAC;AAAA,IAAyB;AAAA,KACxB,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAI,CACjB,GACA,mDAAC,uDACC,mDAAC,gDACC,mDAAC,4DACC,mDAAC,qDACC,mDAAC;AAAA,IAAuB,OAAO;AAAA,GAAO,CACxC,GACA,mDAAC,2DACC,mDAAC;AAAA,IAAuB,OAAO;AAAA,IAAa,eAAY;AAAA,GAAkC,CAC5F,CACF,CACF,GACC,QAAQ,SAAS,KAChB,mDAAC,gDACE,QAAQ,IAAI,CAAC,KAAyE,QAAK;AAA9E,mBAAE,SAAO,mDAAC;AAAA,MAAgB,cAAW;AAAA,KAAe,MAApD,KAA2D,uBAA3D,KAA2D,CAAzD;AACd,8DAAC;AAAA,MAA2B;AAAA,OAC1B,mDAAC;AAAA,MAAS;AAAA,OAAgB,aAAzB;AAAA,MAAqC,YAAY,6BAAY;AAAA,MAAM,MAAM,6BAAY;AAAA,MAAG,CAC3F;AAAA,GACD,CACH,CAEJ,CACF,CACF;AAAA;AAGF,iBAAiB,eAAe;AAAA,EAC9B,MAAM,iCAAoB;AAAA,EAC1B,MAAM;AACR;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,8BAAU,OAAO,YAAY,4CAA4C;AAAA,EAEzF,OAAO,8BAAU,OAAO,YAAY,uBAAuB;AAAA,EAE3D,MAAM,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EAE5D,aAAa,8BAAU,OAAO,YAAY,6BAA6B;AAAA,EAEvE,MAAM,8BAAU,MAAM,sCAAyB,EAAE,YAAY,sBAAsB;AAAA,EAEnF,SAAS,8BAAU,QACjB,8BAAU,MAAM;AAAA,IACd,MAAM,8BAAU;AAAA,IAChB,SAAS,8BAAU;AAAA,EACrB,CAAC,CACH,EAAE,YAAY,+BAA+B;AAC/C;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,kCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAIvC,IAAO,2BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/style.js
CHANGED
|
@@ -32,22 +32,22 @@ __export(style_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(style_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
|
-
var
|
|
35
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
36
36
|
var import_types = require("./components/types");
|
|
37
|
-
const StyledCardNavigationContentTitle =
|
|
37
|
+
const StyledCardNavigationContentTitle = import_ds_system.styled.div`
|
|
38
38
|
padding-top: ${(props) => props.theme.space.xxs};
|
|
39
39
|
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
40
40
|
font-size: 18px;
|
|
41
41
|
color: ${(props) => props.theme.colors.neutral["700"]};
|
|
42
42
|
`;
|
|
43
|
-
const StyledCardNavigationContentDescription =
|
|
43
|
+
const StyledCardNavigationContentDescription = import_ds_system.styled.div`
|
|
44
44
|
color: ${(props) => props.theme.colors.neutral["500"]};
|
|
45
45
|
font-size: 12px;
|
|
46
46
|
`;
|
|
47
|
-
const StyledCardNavigationContentTitleWrapper =
|
|
47
|
+
const StyledCardNavigationContentTitleWrapper = import_ds_system.styled.div`
|
|
48
48
|
width: 100%;
|
|
49
49
|
`;
|
|
50
|
-
const StyledCardNavigationContent =
|
|
50
|
+
const StyledCardNavigationContent = import_ds_system.styled.div`
|
|
51
51
|
padding-right: ${(props) => props.theme.space.xs};
|
|
52
52
|
padding-left: ${(props) => props.theme.space.xs};
|
|
53
53
|
display: flex;
|
|
@@ -55,14 +55,14 @@ const StyledCardNavigationContent = import_styled_components.default.div`
|
|
|
55
55
|
flex: 1;
|
|
56
56
|
overflow: hidden;
|
|
57
57
|
`;
|
|
58
|
-
const StyledCardNavigationCentralContent =
|
|
58
|
+
const StyledCardNavigationCentralContent = import_ds_system.styled.div`
|
|
59
59
|
width: 273px;
|
|
60
60
|
display: flex;
|
|
61
61
|
@media (max-width: ${(props) => props.theme.breakpoints.small}) {
|
|
62
62
|
width: 336px;
|
|
63
63
|
}
|
|
64
64
|
`;
|
|
65
|
-
const StyledCardNavigationBoxWrapper =
|
|
65
|
+
const StyledCardNavigationBoxWrapper = import_ds_system.styled.div`
|
|
66
66
|
width: 337px;
|
|
67
67
|
display: flex;
|
|
68
68
|
flex-direction: row;
|
|
@@ -92,7 +92,7 @@ const StyledCardNavigationBoxWrapper = import_styled_components.default.div`
|
|
|
92
92
|
box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);
|
|
93
93
|
}
|
|
94
94
|
`;
|
|
95
|
-
const StyledCardNavigationIcon =
|
|
95
|
+
const StyledCardNavigationIcon = import_ds_system.styled.div`
|
|
96
96
|
width: 64px;
|
|
97
97
|
height: 64px;
|
|
98
98
|
background-color: #32aad1;
|
|
@@ -106,13 +106,13 @@ const StyledCardNavigationIcon = import_styled_components.default.div`
|
|
|
106
106
|
/* fill: color(neutral, 0); */
|
|
107
107
|
background-color: ${({ type }) => type === import_types.CardNavigationTypes.BORROWER && "#32aad1" || type === import_types.CardNavigationTypes.FINANCIAL && "#1ba88d" || type === import_types.CardNavigationTypes.LOAN && "#8e49b2" || type === import_types.CardNavigationTypes.REGULATORY && "#db5575"};
|
|
108
108
|
`;
|
|
109
|
-
const StyledCardNavigationActions =
|
|
109
|
+
const StyledCardNavigationActions = import_ds_system.styled.div`
|
|
110
110
|
display: flex;
|
|
111
111
|
flex-direction: row;
|
|
112
112
|
align-items: center;
|
|
113
113
|
padding-right: ${(props) => props.theme.space.xxs};
|
|
114
114
|
`;
|
|
115
|
-
const StyledCardNavigationAction =
|
|
115
|
+
const StyledCardNavigationAction = import_ds_system.styled.div`
|
|
116
116
|
margin-left: ${(props) => props.theme.space.xxs};
|
|
117
117
|
span {
|
|
118
118
|
height: ${(props) => props.theme.space.s};
|
package/dist/cjs/style.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/style.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { CardNavigationTypes } from './components/types';\n\nexport const StyledCardNavigationContentTitle = styled.div`\n padding-top: ${(props) => props.theme.space.xxs};\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 18px;\n color: ${(props) => props.theme.colors.neutral['700']};\n`;\n\nexport const StyledCardNavigationContentDescription = styled.div`\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`\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 overflow: hidden;\n`;\n\nexport const StyledCardNavigationCentralContent = styled.div`\n width: 273px;\n display: flex;\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: 336px;\n }\n`;\n\nexport const StyledCardNavigationBoxWrapper = styled.div`\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`;\n\nexport const StyledCardNavigationIcon = styled.div`\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 /* fill: color(neutral, 0); */\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`;\n\nexport const StyledCardNavigationActions = styled.div`\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,mBAAoC;AAE7B,MAAM,mCAAmC,wBAAO;AAAA,iBACtC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC7B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,yCAAyC,wBAAO;AAAA,WAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1C,MAAM,0CAA0C,wBAAO;AAAA;AAAA;AAIvD,MAAM,8BAA8B,wBAAO;AAAA,mBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,kBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,qCAAqC,wBAAO;AAAA;AAAA;AAAA,uBAGlC,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAKnD,MAAM,iCAAiC,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASjD,CAAC,UAAW,MAAM,QAAQ,gBAAgB;AAAA,uBACvB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,aAC7C,CAAC,UAAW,MAAM,QAAQ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAUnC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1C,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMlC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMpB,CAAC,EAAE,WACpB,SAAS,iCAAoB,YAAY,aACzC,SAAS,iCAAoB,aAAa,aAC1C,SAAS,iCAAoB,QAAQ,aACrC,SAAS,iCAAoB,cAAc;AAAA;AAGzC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA,mBAI/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGzC,MAAM,6BAA6B,wBAAO;AAAA,iBAChC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,cAEhC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,aAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,cAE5B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACpC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,eAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
|
|
|
31
31
|
};
|
|
32
32
|
import * as React from "react";
|
|
33
33
|
import React2 from "react";
|
|
34
|
-
import { PropTypes, describe } from "
|
|
34
|
+
import { PropTypes, describe } from "@elliemae/ds-utilities";
|
|
35
35
|
import { DSTruncatedTooltipText, TooltipTextProvider } from "@elliemae/ds-truncated-tooltip-text";
|
|
36
36
|
import { MoreOptionsVert, LoanProducts } from "@elliemae/ds-icons";
|
|
37
37
|
import DSButton, { BUTTON_SIZE, BUTTON_TYPE } from "@elliemae/ds-button";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSCardNavigation.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { MoreOptionsVert, LoanProducts } from '@elliemae/ds-icons';\nimport DSButton, { BUTTON_SIZE, BUTTON_TYPE } from '@elliemae/ds-button';\nimport {\n StyledCardNavigationContentTitle,\n StyledCardNavigationContentDescription,\n StyledCardNavigationContentTitleWrapper,\n StyledCardNavigationContent,\n StyledCardNavigationCentralContent,\n StyledCardNavigationBoxWrapper,\n StyledCardNavigationIcon,\n StyledCardNavigationAction,\n StyledCardNavigationActions,\n} from './style';\nimport { CardNavigationTypes, CardNavigationTypesValues } from './components/types';\n\nconst DSCardNavigation = ({ containerProps = {}, title = '', description = '', type, Icon, actions = [], ...rest }) => (\n <TooltipTextProvider>\n <StyledCardNavigationBoxWrapper role=\"button\" tabIndex={0} {...rest} {...containerProps}>\n <StyledCardNavigationIcon type={type}>\n <Icon size=\"l\" />\n </StyledCardNavigationIcon>\n <StyledCardNavigationCentralContent>\n <StyledCardNavigationContent>\n <StyledCardNavigationContentTitleWrapper>\n <StyledCardNavigationContentTitle>\n <DSTruncatedTooltipText value={title} />\n </StyledCardNavigationContentTitle>\n <StyledCardNavigationContentDescription>\n <DSTruncatedTooltipText value={description} data-testid=\"ds-card-navigation--description\" />\n </StyledCardNavigationContentDescription>\n </StyledCardNavigationContentTitleWrapper>\n </StyledCardNavigationContent>\n {actions.length > 0 && (\n <StyledCardNavigationActions>\n {actions.map(({ icon = <MoreOptionsVert aria-label=\"More options\" />, ...otherProps }, key) => (\n <StyledCardNavigationAction key={key}>\n <DSButton icon={icon} {...otherProps} buttonType={BUTTON_TYPE.TEXT} size={BUTTON_SIZE.L} />\n </StyledCardNavigationAction>\n ))}\n </StyledCardNavigationActions>\n )}\n </StyledCardNavigationCentralContent>\n </StyledCardNavigationBoxWrapper>\n </TooltipTextProvider>\n);\n\nDSCardNavigation.defaultProps = {\n type: CardNavigationTypes.BORROWER,\n Icon: LoanProducts,\n};\n\nconst props = {\n /** props to inject to card navigation wrapper */\n containerProps: PropTypes.object.description('props to inject to card navigation wrapper'),\n /** card navigation title */\n title: PropTypes.string.description('card navigation title'),\n /** card navigation main icon */\n Icon: PropTypes.node.description('card navigation main icon'),\n /** card navigation description */\n description: PropTypes.string.description('card navigation description'),\n /** card navigation type */\n type: PropTypes.oneOf(CardNavigationTypesValues).description('card navigation type'),\n /** card navigation actions array */\n actions: PropTypes.arrayOf(\n PropTypes.shape({\n icon: PropTypes.element,\n onClick: PropTypes.func,\n }),\n ).description('card navigation actions array'),\n};\n\nDSCardNavigation.propTypes = props;\nDSCardNavigation.displayName = 'DSCardNavigation';\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = props;\n\nexport { CardNavigationTypes, CardNavigationTypesValues, DSCardNavigationWithSchema, DSCardNavigation };\n\nexport default DSCardNavigation;\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AAEA,MAAM,mBAAmB,CAAC,OAA0F;AAA1F,eAAE,mBAAiB,CAAC,GAAG,QAAQ,IAAI,cAAc,IAAI,MAAM,MAAM,UAAU,CAAC,MAA5E,IAAkF,iBAAlF,IAAkF,CAAhF,kBAAqB,SAAY,eAAkB,QAAM,QAAM;AACzF,8CAAC,2BACC,qCAAC;AAAA,IAA+B,MAAK;AAAA,IAAS,UAAU;AAAA,KAAO,OAAU,iBACvE,qCAAC;AAAA,IAAyB;AAAA,KACxB,qCAAC;AAAA,IAAK,MAAK;AAAA,GAAI,CACjB,GACA,qCAAC,0CACC,qCAAC,mCACC,qCAAC,+CACC,qCAAC,wCACC,qCAAC;AAAA,IAAuB,OAAO;AAAA,GAAO,CACxC,GACA,qCAAC,8CACC,qCAAC;AAAA,IAAuB,OAAO;AAAA,IAAa,eAAY;AAAA,GAAkC,CAC5F,CACF,CACF,GACC,QAAQ,SAAS,KAChB,qCAAC,mCACE,QAAQ,IAAI,CAAC,KAAyE,QAAK;AAA9E,mBAAE,SAAO,qCAAC;AAAA,MAAgB,cAAW;AAAA,KAAe,MAApD,KAA2D,uBAA3D,KAA2D,CAAzD;AACd,gDAAC;AAAA,MAA2B;AAAA,OAC1B,qCAAC;AAAA,MAAS;AAAA,OAAgB,aAAzB;AAAA,MAAqC,YAAY,YAAY;AAAA,MAAM,MAAM,YAAY;AAAA,MAAG,CAC3F;AAAA,GACD,CACH,CAEJ,CACF,CACF;AAAA;AAGF,iBAAiB,eAAe;AAAA,EAC9B,MAAM,oBAAoB;AAAA,EAC1B,MAAM;AACR;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,4CAA4C;AAAA,EAEzF,OAAO,UAAU,OAAO,YAAY,uBAAuB;AAAA,EAE3D,MAAM,UAAU,KAAK,YAAY,2BAA2B;AAAA,EAE5D,aAAa,UAAU,OAAO,YAAY,6BAA6B;AAAA,EAEvE,MAAM,UAAU,MAAM,yBAAyB,EAAE,YAAY,sBAAsB;AAAA,EAEnF,SAAS,UAAU,QACjB,UAAU,MAAM;AAAA,IACd,MAAM,UAAU;AAAA,IAChB,SAAS,UAAU;AAAA,EACrB,CAAC,CACH,EAAE,YAAY,+BAA+B;AAC/C;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAIvC,IAAO,2BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/style.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import styled from "
|
|
2
|
+
import { styled } from "@elliemae/ds-system";
|
|
3
3
|
import { CardNavigationTypes } from "./components/types";
|
|
4
4
|
const StyledCardNavigationContentTitle = styled.div`
|
|
5
5
|
padding-top: ${(props) => props.theme.space.xxs};
|
package/dist/esm/style.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { CardNavigationTypes } from './components/types';\n\nexport const StyledCardNavigationContentTitle = styled.div`\n padding-top: ${(props) => props.theme.space.xxs};\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 18px;\n color: ${(props) => props.theme.colors.neutral['700']};\n`;\n\nexport const StyledCardNavigationContentDescription = styled.div`\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`\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 overflow: hidden;\n`;\n\nexport const StyledCardNavigationCentralContent = styled.div`\n width: 273px;\n display: flex;\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: 336px;\n }\n`;\n\nexport const StyledCardNavigationBoxWrapper = styled.div`\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`;\n\nexport const StyledCardNavigationIcon = styled.div`\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 /* fill: color(neutral, 0); */\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`;\n\nexport const StyledCardNavigationActions = styled.div`\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
5
|
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,mCAAmC,OAAO;AAAA,iBACtC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC7B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,yCAAyC,OAAO;AAAA,WAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1C,MAAM,0CAA0C,OAAO;AAAA;AAAA;AAIvD,MAAM,8BAA8B,OAAO;AAAA,mBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,kBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,qCAAqC,OAAO;AAAA;AAAA;AAAA,uBAGlC,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAKnD,MAAM,iCAAiC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASjD,CAAC,UAAW,MAAM,QAAQ,gBAAgB;AAAA,uBACvB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,aAC7C,CAAC,UAAW,MAAM,QAAQ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAUnC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1C,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMlC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMpB,CAAC,EAAE,WACpB,SAAS,oBAAoB,YAAY,aACzC,SAAS,oBAAoB,aAAa,aAC1C,SAAS,oBAAoB,QAAQ,aACrC,SAAS,oBAAoB,cAAc;AAAA;AAGzC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,mBAI/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGzC,MAAM,6BAA6B,OAAO;AAAA,iBAChC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,cAEhC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,aAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,cAE5B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACpC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,eAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-card-navigation",
|
|
3
|
-
"version": "3.1.0-next.
|
|
3
|
+
"version": "3.1.0-next.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Card Navigation",
|
|
6
6
|
"files": [
|
|
@@ -46,18 +46,12 @@
|
|
|
46
46
|
"reportFile": "tests.xml",
|
|
47
47
|
"indent": 4
|
|
48
48
|
},
|
|
49
|
-
"scripts": {
|
|
50
|
-
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
51
|
-
"test": "node ../../scripts/testing/test.mjs",
|
|
52
|
-
"lint": "node ../../scripts/lint.mjs",
|
|
53
|
-
"dts": "node ../../scripts/dts.mjs",
|
|
54
|
-
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
55
|
-
},
|
|
56
49
|
"dependencies": {
|
|
57
|
-
"@elliemae/ds-button": "3.1.0-next.
|
|
58
|
-
"@elliemae/ds-icons": "3.1.0-next.
|
|
59
|
-
"@elliemae/ds-
|
|
60
|
-
"
|
|
50
|
+
"@elliemae/ds-button": "3.1.0-next.5",
|
|
51
|
+
"@elliemae/ds-icons": "3.1.0-next.5",
|
|
52
|
+
"@elliemae/ds-system": "3.1.0-next.5",
|
|
53
|
+
"@elliemae/ds-truncated-tooltip-text": "3.1.0-next.5",
|
|
54
|
+
"@elliemae/ds-utilities": "3.1.0-next.5"
|
|
61
55
|
},
|
|
62
56
|
"devDependencies": {
|
|
63
57
|
"@elliemae/pui-theme": "~2.5.0",
|
|
@@ -75,5 +69,13 @@
|
|
|
75
69
|
"publishConfig": {
|
|
76
70
|
"access": "public",
|
|
77
71
|
"typeSafety": false
|
|
72
|
+
},
|
|
73
|
+
"scripts": {
|
|
74
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
75
|
+
"test": "node ../../scripts/testing/test.mjs",
|
|
76
|
+
"lint": "node ../../scripts/lint.mjs",
|
|
77
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
78
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
79
|
+
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
78
80
|
}
|
|
79
|
-
}
|
|
81
|
+
}
|