@elliemae/ds-card-v3-poc 3.35.0 → 3.36.0-next.1
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/CardV3.js.map +1 -1
- package/dist/cjs/index.js +19 -5
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/parts/index.js +16 -6
- package/dist/cjs/parts/index.js.map +2 -2
- package/dist/cjs/styled.js +1 -2
- package/dist/cjs/styled.js.map +1 -1
- package/dist/esm/CardV3.js.map +1 -1
- package/dist/esm/index.js +15 -4
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/parts/index.js +12 -5
- package/dist/esm/parts/index.js.map +2 -2
- package/dist/esm/styled.js +1 -2
- package/dist/esm/styled.js.map +1 -1
- package/dist/types/index.d.ts +4 -4
- package/dist/types/parts/index.d.ts +5 -5
- package/package.json +7 -7
package/dist/cjs/CardV3.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/CardV3.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable react/display-name */\nimport React, { useMemo, useCallback } from 'react';\nimport { useMemoMergePropsWithDefault, useGetXstyledProps, useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport type { CardT } from './react-desc-prop-types.js';\nimport { FocusRing } from './parts/index.js';\nimport { CardActionArea, StyledButtonCard, StyledCard, StyledCardDisabled } from './styled.js';\nimport { CardContext } from './parts/CardContext.js';\nimport { DSCardV3DataTestIds } from './CardV3Definitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nexport const defaultProps: CardT.DefaultProps = {\n hasError: false,\n};\n\n// create acontext\n\nexport const Card: React.ComponentType<CardT.InternalProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<CardT.Props>(props, defaultProps);\n const { children, hasError, disabled, isOverlay, onClick, isSelected, isMultiSelect } = propsWithDefault;\n\n const StyledCardContainer = useMemo(() => {\n if (onClick && !disabled) {\n return StyledButtonCard;\n }\n if (disabled) {\n return StyledCardDisabled;\n }\n return StyledCard;\n }, [disabled, onClick]);\n\n const globalsAttrs = useGetGlobalAttributes<CardT.InternalProps, HTMLDivElement, DSGridT.Props>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n\n return (\n <CardContext.Provider value={{ isMultiSelect, disabled, isSelected, onClick }}>\n <StyledCardContainer\n border=\"solid 1px neutral-100\"\n boxShadow=\"xs\"\n isOverlay={isOverlay}\n {...globalsAttrs}\n {...xstyledProps}\n data-disabled={disabled}\n data-selected={isSelected}\n >\n <FocusRing target={`[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`} hasError={hasError}>\n {onClick ? (\n <CardActionArea\n disabled={disabled}\n data-testid={DSCardV3DataTestIds.ACTION_AREA}\n aria-selected={isSelected}\n aria-multiselectable={isMultiSelect}\n aria-disabled={disabled}\n aria-invalid={hasError}\n getOwnerProps={getOwnerProps}\n />\n ) : null}\n {children}\n </FocusRing>\n </StyledCardContainer>\n </CardContext.Provider>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Cf;AA5CR,mBAA4C;AAC5C,0BAAyF;AAEzF,mBAA0B;AAC1B,oBAAiF;AACjF,yBAA4B;AAC5B,+BAAoC;AAG7B,MAAM,eAAmC;AAAA,EAC9C,UAAU;AACZ;AAIO,MAAM,OAAiD,CAAC,UAAU;AACvE,QAAM,uBAAmB,kDAA0C,OAAO,YAAY;AACtF,QAAM,EAAE,UAAU,UAAU,UAAU,WAAW,SAAS,YAAY,cAAc,IAAI;AAExF,QAAM,0BAAsB,sBAAQ,MAAM;AACxC,QAAI,WAAW,CAAC,UAAU;AACxB,aAAO;AAAA,IACT;AACA,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,OAAO,CAAC;AAEtB,QAAM,mBAAe,4CAA2E,gBAAgB;AAChH,QAAM,mBAAe,wCAAmB,gBAAgB;AACxD,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAE5E,SACE,4CAAC,+BAAY,UAAZ,EAAqB,OAAO,EAAE,eAAe,UAAU,YAAY,QAAQ,GAC1E;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAU;AAAA,MACV;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MAEf,uDAAC,0BAAU,QAAQ,gBAAgB,6CAAoB,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Cf;AA5CR,mBAA4C;AAC5C,0BAAyF;AAEzF,mBAA0B;AAC1B,oBAAiF;AACjF,yBAA4B;AAC5B,+BAAoC;AAG7B,MAAM,eAAmC;AAAA,EAC9C,UAAU;AACZ;AAIO,MAAM,OAAiD,CAAC,UAAU;AACvE,QAAM,uBAAmB,kDAA0C,OAAO,YAAY;AACtF,QAAM,EAAE,UAAU,UAAU,UAAU,WAAW,SAAS,YAAY,cAAc,IAAI;AAExF,QAAM,0BAAsB,sBAAQ,MAAM;AACxC,QAAI,WAAW,CAAC,UAAU;AACxB,aAAO;AAAA,IACT;AACA,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,OAAO,CAAC;AAEtB,QAAM,mBAAe,4CAA2E,gBAAgB;AAChH,QAAM,mBAAe,wCAAmB,gBAAgB;AACxD,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAE5E,SACE,4CAAC,+BAAY,UAAZ,EAAqB,OAAO,EAAE,eAAe,UAAU,YAAY,QAAQ,GAC1E;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAU;AAAA,MACV;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MAEf,uDAAC,0BAAU,QAAQ,gBAAgB,6CAAoB,WAAW,KAAK,UACpE;AAAA,kBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa,6CAAoB;AAAA,YACjC,iBAAe;AAAA,YACf,wBAAsB;AAAA,YACtB,iBAAe;AAAA,YACf,gBAAc;AAAA,YACd;AAAA;AAAA,QACF,IACE;AAAA,QACH;AAAA,SACH;AAAA;AAAA,EACF,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -5,6 +5,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
8
12
|
var __copyProps = (to, from, except, desc) => {
|
|
9
13
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
14
|
for (let key of __getOwnPropNames(from))
|
|
@@ -13,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
13
17
|
}
|
|
14
18
|
return to;
|
|
15
19
|
};
|
|
16
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
17
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
18
21
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
19
22
|
// file that has been converted to a CommonJS file using a Babel-
|
|
@@ -24,10 +27,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
24
27
|
));
|
|
25
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
26
29
|
var src_exports = {};
|
|
30
|
+
__export(src_exports, {
|
|
31
|
+
Card: () => import_CardV3.Card,
|
|
32
|
+
CardContent: () => import_parts.CardContent,
|
|
33
|
+
CardFooter: () => import_parts.CardFooter,
|
|
34
|
+
CardHeader: () => import_parts.CardHeader,
|
|
35
|
+
CardSelectIndicator: () => import_parts.CardSelectIndicator,
|
|
36
|
+
DSCardV3DataTestIds: () => import_CardV3Definitions.DSCardV3DataTestIds,
|
|
37
|
+
DSCardV3Name: () => import_CardV3Definitions.DSCardV3Name,
|
|
38
|
+
DSCardV3Slots: () => import_CardV3Definitions.DSCardV3Slots,
|
|
39
|
+
FocusRing: () => import_parts.FocusRing,
|
|
40
|
+
defaultProps: () => import_CardV3.defaultProps
|
|
41
|
+
});
|
|
27
42
|
module.exports = __toCommonJS(src_exports);
|
|
28
43
|
var React = __toESM(require("react"));
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
__reExport(src_exports, require("./parts/index.js"), module.exports);
|
|
44
|
+
var import_CardV3 = require("./CardV3.js");
|
|
45
|
+
var import_CardV3Definitions = require("./CardV3Definitions.js");
|
|
46
|
+
var import_parts = require("./parts/index.js");
|
|
33
47
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export { defaultProps, Card } from './CardV3.js';\nexport { DSCardV3Name, DSCardV3Slots, DSCardV3DataTestIds } from './CardV3Definitions.js';\nexport type { CardT, CardContextProps } from './react-desc-prop-types.js';\nexport { CardContent, CardFooter, CardHeader, CardSelectIndicator, FocusRing } from './parts/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAmC;AACnC,+BAAiE;AAEjE,mBAAoF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/parts/index.js
CHANGED
|
@@ -5,6 +5,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
8
12
|
var __copyProps = (to, from, except, desc) => {
|
|
9
13
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
14
|
for (let key of __getOwnPropNames(from))
|
|
@@ -13,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
13
17
|
}
|
|
14
18
|
return to;
|
|
15
19
|
};
|
|
16
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
17
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
18
21
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
19
22
|
// file that has been converted to a CommonJS file using a Babel-
|
|
@@ -24,11 +27,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
24
27
|
));
|
|
25
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
26
29
|
var parts_exports = {};
|
|
30
|
+
__export(parts_exports, {
|
|
31
|
+
CardContent: () => import_CardContent.CardContent,
|
|
32
|
+
CardFooter: () => import_CardFooter.CardFooter,
|
|
33
|
+
CardHeader: () => import_CardHeader.CardHeader,
|
|
34
|
+
CardSelectIndicator: () => import_CardSelectIndicator.CardSelectIndicator,
|
|
35
|
+
FocusRing: () => import_CardFocusRing.FocusRing
|
|
36
|
+
});
|
|
27
37
|
module.exports = __toCommonJS(parts_exports);
|
|
28
38
|
var React = __toESM(require("react"));
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
39
|
+
var import_CardContent = require("./CardContent.js");
|
|
40
|
+
var import_CardFooter = require("./CardFooter.js");
|
|
41
|
+
var import_CardHeader = require("./CardHeader.js");
|
|
42
|
+
var import_CardSelectIndicator = require("./CardSelectIndicator.js");
|
|
43
|
+
var import_CardFocusRing = require("./CardFocusRing.js");
|
|
34
44
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export { CardContent } from './CardContent.js';\nexport { CardFooter } from './CardFooter.js';\nexport { CardHeader } from './CardHeader.js';\nexport { CardSelectIndicator } from './CardSelectIndicator.js';\nexport { FocusRing } from './CardFocusRing.js';", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAA4B;AAC5B,wBAA2B;AAC3B,wBAA2B;AAC3B,iCAAoC;AACpC,2BAA0B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -76,8 +76,7 @@ const StyledCardSingleIndicator = (0, import_ds_system.styled)(import_ds_grid.Gr
|
|
|
76
76
|
width: ${({ isSelected }) => isSelected ? "6px" : "4px"};
|
|
77
77
|
align-self: normal;
|
|
78
78
|
background-color: ${({ theme, isSelected }) => {
|
|
79
|
-
if (isSelected)
|
|
80
|
-
return theme.colors.brand["700"];
|
|
79
|
+
if (isSelected) return theme.colors.brand["700"];
|
|
81
80
|
return theme.colors.brand["300"];
|
|
82
81
|
}};
|
|
83
82
|
transition: all 0.1s ease-in-out;
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV3Name, DSCardV3Slots } from './CardV3Definitions.js';\nexport const CardActionArea = styled('button', {\n name: DSCardV3Name,\n slot: DSCardV3Slots.ACTION_AREA,\n})`\n border: none;\n background-color: transparent;\n width: 0px;\n height: 0px;\n padding: 0;\n &:focus {\n outline: none;\n }\n text-align: unset;\n`;\n\n// START style cards variants\nexport const StyledCard = styled(Grid)<{\n isOverlay?: boolean;\n onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n}>`\n min-width: 240px;\n min-height: 56px;\n background-color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['080'] : 'white')};\n outline-offset: -2px;\n * {\n color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['500'] : 'inherit')};\n }\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledButtonCard = styled(StyledCard)<{ isOverlay?: boolean }>`\n cursor: pointer;\n`;\n\nexport const StyledCardError = styled(StyledCard)`\n outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};\n`;\n\nexport const StyledCardSingleIndicator = styled(Grid)<{ isSelected?: boolean }>`\n width: ${({ isSelected }) => (isSelected ? '6px' : '4px')};\n align-self: normal;\n background-color: ${({ theme, isSelected }) => {\n if (isSelected) return theme.colors.brand['700'];\n return theme.colors.brand['300'];\n }};\n transition: all 0.1s ease-in-out;\n\n ${StyledCard}:not([data-disabled='true']):not([data-selected='true']):hover & {\n background-color: ${({ theme }) => theme.colors.brand['500']};\n }\n`;\n\nexport const StyledFocusRing = styled(Grid)<{ showFocusRing: boolean; hasError?: boolean }>`\n width: 100%;\n height: 100%;\n outline-offset: -1px;\n outline: ${({ showFocusRing, hasError, theme }) => {\n if (showFocusRing) {\n return `2px solid ${theme.colors.brand[700]}`;\n }\n if (hasError) {\n return `2px solid ${theme.colors.danger[900]}`;\n }\n return 'none';\n }};\n`;\n\nexport const StyledCardDisabled: React.FC = styled(StyledCard)`\n cursor: not-allowed;\n user-select: none;\n opacity: 0.5;\n ${StyledCardSingleIndicator} {\n background-color: ${({ theme, isSelected }) =>\n isSelected ? theme.colors.neutral['800'] : theme.colors.neutral['080']};\n }\n\n ${CardActionArea} {\n pointer-events: none;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,qBAAqB;AACrB,+BAA4C;AACrC,MAAM,qBAAiB,yBAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,uCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaM,MAAM,iBAAa,yBAAO,mBAAI;AAAA;AAAA;AAAA,sBAMf,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,qBAAqB;AACrB,+BAA4C;AACrC,MAAM,qBAAiB,yBAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,uCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaM,MAAM,iBAAa,yBAAO,mBAAI;AAAA;AAAA;AAAA,sBAMf,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,MAAM,OAAO,QAAQ,KAAK,IAAI,OAAQ;AAAA;AAAA;AAAA,aAGtF,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAU;AAAA;AAAA;AAAA,IAGxF,mCAAkB;AAAA;AAGf,MAAM,uBAAmB,yBAAO,UAAU;AAAA;AAAA;AAI1C,MAAM,sBAAkB,yBAAO,UAAU;AAAA,aACnC,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,OAAO,GAAG,CAAC,EAAE;AAAA;AAG5D,MAAM,gCAA4B,yBAAO,mBAAI;AAAA,WACzC,CAAC,EAAE,WAAW,MAAO,aAAa,QAAQ,KAAM;AAAA;AAAA,sBAErC,CAAC,EAAE,OAAO,WAAW,MAAM;AAC7C,MAAI,WAAY,QAAO,MAAM,OAAO,MAAM,KAAK;AAC/C,SAAO,MAAM,OAAO,MAAM,KAAK;AACjC,CAAC;AAAA;AAAA;AAAA,IAGC,UAAU;AAAA,wBACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAIzD,MAAM,sBAAkB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA,aAI7B,CAAC,EAAE,eAAe,UAAU,MAAM,MAAM;AACjD,MAAI,eAAe;AACjB,WAAO,aAAa,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAC7C;AACA,MAAI,UAAU;AACZ,WAAO,aAAa,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EAC9C;AACA,SAAO;AACT,CAAC;AAAA;AAGI,MAAM,yBAA+B,yBAAO,UAAU;AAAA;AAAA;AAAA;AAAA,IAIzD,yBAAyB;AAAA,wBACL,CAAC,EAAE,OAAO,WAAW,MACvC,aAAa,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,IAGxE,cAAc;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/CardV3.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/CardV3.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable react/display-name */\nimport React, { useMemo, useCallback } from 'react';\nimport { useMemoMergePropsWithDefault, useGetXstyledProps, useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport type { CardT } from './react-desc-prop-types.js';\nimport { FocusRing } from './parts/index.js';\nimport { CardActionArea, StyledButtonCard, StyledCard, StyledCardDisabled } from './styled.js';\nimport { CardContext } from './parts/CardContext.js';\nimport { DSCardV3DataTestIds } from './CardV3Definitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nexport const defaultProps: CardT.DefaultProps = {\n hasError: false,\n};\n\n// create acontext\n\nexport const Card: React.ComponentType<CardT.InternalProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<CardT.Props>(props, defaultProps);\n const { children, hasError, disabled, isOverlay, onClick, isSelected, isMultiSelect } = propsWithDefault;\n\n const StyledCardContainer = useMemo(() => {\n if (onClick && !disabled) {\n return StyledButtonCard;\n }\n if (disabled) {\n return StyledCardDisabled;\n }\n return StyledCard;\n }, [disabled, onClick]);\n\n const globalsAttrs = useGetGlobalAttributes<CardT.InternalProps, HTMLDivElement, DSGridT.Props>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n\n return (\n <CardContext.Provider value={{ isMultiSelect, disabled, isSelected, onClick }}>\n <StyledCardContainer\n border=\"solid 1px neutral-100\"\n boxShadow=\"xs\"\n isOverlay={isOverlay}\n {...globalsAttrs}\n {...xstyledProps}\n data-disabled={disabled}\n data-selected={isSelected}\n >\n <FocusRing target={`[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`} hasError={hasError}>\n {onClick ? (\n <CardActionArea\n disabled={disabled}\n data-testid={DSCardV3DataTestIds.ACTION_AREA}\n aria-selected={isSelected}\n aria-multiselectable={isMultiSelect}\n aria-disabled={disabled}\n aria-invalid={hasError}\n getOwnerProps={getOwnerProps}\n />\n ) : null}\n {children}\n </FocusRing>\n </StyledCardContainer>\n </CardContext.Provider>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC+Cf,SAEI,KAFJ;AA5CR,SAAgB,SAAS,mBAAmB;AAC5C,SAAS,8BAA8B,oBAAoB,8BAA8B;AAEzF,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB,kBAAkB,YAAY,0BAA0B;AACjF,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AAG7B,MAAM,eAAmC;AAAA,EAC9C,UAAU;AACZ;AAIO,MAAM,OAAiD,CAAC,UAAU;AACvE,QAAM,mBAAmB,6BAA0C,OAAO,YAAY;AACtF,QAAM,EAAE,UAAU,UAAU,UAAU,WAAW,SAAS,YAAY,cAAc,IAAI;AAExF,QAAM,sBAAsB,QAAQ,MAAM;AACxC,QAAI,WAAW,CAAC,UAAU;AACxB,aAAO;AAAA,IACT;AACA,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,OAAO,CAAC;AAEtB,QAAM,eAAe,uBAA2E,gBAAgB;AAChH,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAE5E,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,eAAe,UAAU,YAAY,QAAQ,GAC1E;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAU;AAAA,MACV;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MAEf,+BAAC,aAAU,QAAQ,gBAAgB,oBAAoB,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+Cf,SAEI,KAFJ;AA5CR,SAAgB,SAAS,mBAAmB;AAC5C,SAAS,8BAA8B,oBAAoB,8BAA8B;AAEzF,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB,kBAAkB,YAAY,0BAA0B;AACjF,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AAG7B,MAAM,eAAmC;AAAA,EAC9C,UAAU;AACZ;AAIO,MAAM,OAAiD,CAAC,UAAU;AACvE,QAAM,mBAAmB,6BAA0C,OAAO,YAAY;AACtF,QAAM,EAAE,UAAU,UAAU,UAAU,WAAW,SAAS,YAAY,cAAc,IAAI;AAExF,QAAM,sBAAsB,QAAQ,MAAM;AACxC,QAAI,WAAW,CAAC,UAAU;AACxB,aAAO;AAAA,IACT;AACA,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,OAAO,CAAC;AAEtB,QAAM,eAAe,uBAA2E,gBAAgB;AAChH,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAE5E,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,eAAe,UAAU,YAAY,QAAQ,GAC1E;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAU;AAAA,MACV;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MAEf,+BAAC,aAAU,QAAQ,gBAAgB,oBAAoB,WAAW,KAAK,UACpE;AAAA,kBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa,oBAAoB;AAAA,YACjC,iBAAe;AAAA,YACf,wBAAsB;AAAA,YACtB,iBAAe;AAAA,YACf,gBAAc;AAAA,YACd;AAAA;AAAA,QACF,IACE;AAAA,QACH;AAAA,SACH;AAAA;AAAA,EACF,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export
|
|
2
|
+
import { defaultProps, Card } from "./CardV3.js";
|
|
3
|
+
import { DSCardV3Name, DSCardV3Slots, DSCardV3DataTestIds } from "./CardV3Definitions.js";
|
|
4
|
+
import { CardContent, CardFooter, CardHeader, CardSelectIndicator, FocusRing } from "./parts/index.js";
|
|
5
|
+
export {
|
|
6
|
+
Card,
|
|
7
|
+
CardContent,
|
|
8
|
+
CardFooter,
|
|
9
|
+
CardHeader,
|
|
10
|
+
CardSelectIndicator,
|
|
11
|
+
DSCardV3DataTestIds,
|
|
12
|
+
DSCardV3Name,
|
|
13
|
+
DSCardV3Slots,
|
|
14
|
+
FocusRing,
|
|
15
|
+
defaultProps
|
|
16
|
+
};
|
|
6
17
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { defaultProps, Card } from './CardV3.js';\nexport { DSCardV3Name, DSCardV3Slots, DSCardV3DataTestIds } from './CardV3Definitions.js';\nexport type { CardT, CardContextProps } from './react-desc-prop-types.js';\nexport { CardContent, CardFooter, CardHeader, CardSelectIndicator, FocusRing } from './parts/index.js';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,YAAY;AACnC,SAAS,cAAc,eAAe,2BAA2B;AAEjE,SAAS,aAAa,YAAY,YAAY,qBAAqB,iBAAiB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/index.js
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
import { CardContent } from "./CardContent.js";
|
|
3
|
+
import { CardFooter } from "./CardFooter.js";
|
|
4
|
+
import { CardHeader } from "./CardHeader.js";
|
|
5
|
+
import { CardSelectIndicator } from "./CardSelectIndicator.js";
|
|
6
|
+
import { FocusRing } from "./CardFocusRing.js";
|
|
7
|
+
export {
|
|
8
|
+
CardContent,
|
|
9
|
+
CardFooter,
|
|
10
|
+
CardHeader,
|
|
11
|
+
CardSelectIndicator,
|
|
12
|
+
FocusRing
|
|
13
|
+
};
|
|
7
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { CardContent } from './CardContent.js';\nexport { CardFooter } from './CardFooter.js';\nexport { CardHeader } from './CardHeader.js';\nexport { CardSelectIndicator } from './CardSelectIndicator.js';\nexport { FocusRing } from './CardFocusRing.js';"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -37,8 +37,7 @@ const StyledCardSingleIndicator = styled(Grid)`
|
|
|
37
37
|
width: ${({ isSelected }) => isSelected ? "6px" : "4px"};
|
|
38
38
|
align-self: normal;
|
|
39
39
|
background-color: ${({ theme, isSelected }) => {
|
|
40
|
-
if (isSelected)
|
|
41
|
-
return theme.colors.brand["700"];
|
|
40
|
+
if (isSelected) return theme.colors.brand["700"];
|
|
42
41
|
return theme.colors.brand["300"];
|
|
43
42
|
}};
|
|
44
43
|
transition: all 0.1s ease-in-out;
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV3Name, DSCardV3Slots } from './CardV3Definitions.js';\nexport const CardActionArea = styled('button', {\n name: DSCardV3Name,\n slot: DSCardV3Slots.ACTION_AREA,\n})`\n border: none;\n background-color: transparent;\n width: 0px;\n height: 0px;\n padding: 0;\n &:focus {\n outline: none;\n }\n text-align: unset;\n`;\n\n// START style cards variants\nexport const StyledCard = styled(Grid)<{\n isOverlay?: boolean;\n onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n}>`\n min-width: 240px;\n min-height: 56px;\n background-color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['080'] : 'white')};\n outline-offset: -2px;\n * {\n color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['500'] : 'inherit')};\n }\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledButtonCard = styled(StyledCard)<{ isOverlay?: boolean }>`\n cursor: pointer;\n`;\n\nexport const StyledCardError = styled(StyledCard)`\n outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};\n`;\n\nexport const StyledCardSingleIndicator = styled(Grid)<{ isSelected?: boolean }>`\n width: ${({ isSelected }) => (isSelected ? '6px' : '4px')};\n align-self: normal;\n background-color: ${({ theme, isSelected }) => {\n if (isSelected) return theme.colors.brand['700'];\n return theme.colors.brand['300'];\n }};\n transition: all 0.1s ease-in-out;\n\n ${StyledCard}:not([data-disabled='true']):not([data-selected='true']):hover & {\n background-color: ${({ theme }) => theme.colors.brand['500']};\n }\n`;\n\nexport const StyledFocusRing = styled(Grid)<{ showFocusRing: boolean; hasError?: boolean }>`\n width: 100%;\n height: 100%;\n outline-offset: -1px;\n outline: ${({ showFocusRing, hasError, theme }) => {\n if (showFocusRing) {\n return `2px solid ${theme.colors.brand[700]}`;\n }\n if (hasError) {\n return `2px solid ${theme.colors.danger[900]}`;\n }\n return 'none';\n }};\n`;\n\nexport const StyledCardDisabled: React.FC = styled(StyledCard)`\n cursor: not-allowed;\n user-select: none;\n opacity: 0.5;\n ${StyledCardSingleIndicator} {\n background-color: ${({ theme, isSelected }) =>\n isSelected ? theme.colors.neutral['800'] : theme.colors.neutral['080']};\n }\n\n ${CardActionArea} {\n pointer-events: none;\n }\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,YAAY;AACrB,SAAS,cAAc,qBAAqB;AACrC,MAAM,iBAAiB,OAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaM,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA;AAAA,sBAMf,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,YAAY;AACrB,SAAS,cAAc,qBAAqB;AACrC,MAAM,iBAAiB,OAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaM,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA;AAAA,sBAMf,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,MAAM,OAAO,QAAQ,KAAK,IAAI,OAAQ;AAAA;AAAA;AAAA,aAGtF,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAU;AAAA;AAAA;AAAA,IAGxF,kBAAkB;AAAA;AAGf,MAAM,mBAAmB,OAAO,UAAU;AAAA;AAAA;AAI1C,MAAM,kBAAkB,OAAO,UAAU;AAAA,aACnC,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,OAAO,GAAG,CAAC,EAAE;AAAA;AAG5D,MAAM,4BAA4B,OAAO,IAAI;AAAA,WACzC,CAAC,EAAE,WAAW,MAAO,aAAa,QAAQ,KAAM;AAAA;AAAA,sBAErC,CAAC,EAAE,OAAO,WAAW,MAAM;AAC7C,MAAI,WAAY,QAAO,MAAM,OAAO,MAAM,KAAK;AAC/C,SAAO,MAAM,OAAO,MAAM,KAAK;AACjC,CAAC;AAAA;AAAA;AAAA,IAGC,UAAU;AAAA,wBACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAIzD,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,aAI7B,CAAC,EAAE,eAAe,UAAU,MAAM,MAAM;AACjD,MAAI,eAAe;AACjB,WAAO,aAAa,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAC7C;AACA,MAAI,UAAU;AACZ,WAAO,aAAa,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EAC9C;AACA,SAAO;AACT,CAAC;AAAA;AAGI,MAAM,qBAA+B,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,IAIzD,yBAAyB;AAAA,wBACL,CAAC,EAAE,OAAO,WAAW,MACvC,aAAa,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,IAGxE,cAAc;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
1
|
+
export { defaultProps, Card } from './CardV3.js';
|
|
2
|
+
export { DSCardV3Name, DSCardV3Slots, DSCardV3DataTestIds } from './CardV3Definitions.js';
|
|
3
|
+
export type { CardT, CardContextProps } from './react-desc-prop-types.js';
|
|
4
|
+
export { CardContent, CardFooter, CardHeader, CardSelectIndicator, FocusRing } from './parts/index.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
1
|
+
export { CardContent } from './CardContent.js';
|
|
2
|
+
export { CardFooter } from './CardFooter.js';
|
|
3
|
+
export { CardHeader } from './CardHeader.js';
|
|
4
|
+
export { CardSelectIndicator } from './CardSelectIndicator.js';
|
|
5
|
+
export { FocusRing } from './CardFocusRing.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-card-v3-poc",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.36.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Card V3",
|
|
6
6
|
"files": [
|
|
@@ -36,18 +36,18 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-form-radio": "3.
|
|
40
|
-
"@elliemae/ds-grid": "3.
|
|
41
|
-
"@elliemae/ds-props-helpers": "3.
|
|
42
|
-
"@elliemae/ds-system": "3.
|
|
43
|
-
"@elliemae/ds-utilities": "3.
|
|
39
|
+
"@elliemae/ds-form-radio": "3.36.0-next.1",
|
|
40
|
+
"@elliemae/ds-grid": "3.36.0-next.1",
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.36.0-next.1",
|
|
42
|
+
"@elliemae/ds-system": "3.36.0-next.1",
|
|
43
|
+
"@elliemae/ds-utilities": "3.36.0-next.1"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
47
47
|
"@elliemae/pui-theme": "~2.9.3",
|
|
48
48
|
"styled-components": "~5.3.9",
|
|
49
49
|
"styled-system": "~5.1.5",
|
|
50
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
50
|
+
"@elliemae/ds-monorepo-devops": "3.36.0-next.1"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"@elliemae/pui-theme": "~2.9.3",
|