@elliemae/ds-chip 3.60.0-next.2 → 3.60.0-next.21
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/DSChip.js +39 -15
- package/dist/cjs/DSChip.js.map +2 -2
- package/dist/cjs/constants/index.js +8 -2
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +4 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +78 -98
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-chip-valid.js +8 -4
- package/dist/cjs/typescript-testing/typescript-chip-valid.js.map +2 -2
- package/dist/esm/DSChip.js +39 -15
- package/dist/esm/DSChip.js.map +2 -2
- package/dist/esm/constants/index.js +8 -2
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +4 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +81 -99
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-chip-valid.js +8 -4
- package/dist/esm/typescript-testing/typescript-chip-valid.js.map +2 -2
- package/dist/types/config/useConfig.d.ts +33 -30
- package/dist/types/constants/index.d.ts +4 -0
- package/dist/types/react-desc-prop-types.d.ts +4 -1
- package/dist/types/styles.d.ts +5 -2
- package/package.json +22 -25
package/dist/esm/DSChip.js
CHANGED
|
@@ -2,6 +2,8 @@ import * as React from "react";
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback } from "react";
|
|
4
4
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
5
|
+
import { TYPOGRAPHY_VARIANTS } from "@elliemae/ds-typography";
|
|
6
|
+
import { DSIconSizes } from "@elliemae/ds-icon";
|
|
5
7
|
import { useConfig } from "./config/useConfig.js";
|
|
6
8
|
import { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from "./styles.js";
|
|
7
9
|
import { CHIP_SHAPES } from "./constants/index.js";
|
|
@@ -17,7 +19,8 @@ const DSChip = (props) => {
|
|
|
17
19
|
label,
|
|
18
20
|
globalAttrs,
|
|
19
21
|
xStyledAttrs,
|
|
20
|
-
ownerPropsConfig
|
|
22
|
+
ownerPropsConfig,
|
|
23
|
+
wrapText
|
|
21
24
|
} = useConfig(props);
|
|
22
25
|
const { disabled, className, onClick, ...restGlobals } = globalAttrs;
|
|
23
26
|
const handleOnClick = useCallback(
|
|
@@ -29,24 +32,45 @@ const DSChip = (props) => {
|
|
|
29
32
|
},
|
|
30
33
|
[applyAriaDisabled, onClick]
|
|
31
34
|
);
|
|
32
|
-
return /* @__PURE__ */ jsx(
|
|
33
|
-
|
|
35
|
+
return /* @__PURE__ */ jsx(
|
|
36
|
+
StyledWrapper,
|
|
34
37
|
{
|
|
38
|
+
wrapText,
|
|
35
39
|
buttonShape: shape,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
selected,
|
|
40
|
-
role: "button",
|
|
41
|
-
onClick: handleOnClick,
|
|
42
|
-
...restGlobals,
|
|
40
|
+
buttonSize: size,
|
|
41
|
+
className,
|
|
42
|
+
...xStyledAttrs,
|
|
43
43
|
...ownerPropsConfig,
|
|
44
|
-
children:
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
children: /* @__PURE__ */ jsxs(
|
|
45
|
+
StyledChip,
|
|
46
|
+
{
|
|
47
|
+
buttonShape: shape,
|
|
48
|
+
"aria-disabled": disabled || applyAriaDisabled,
|
|
49
|
+
disabled,
|
|
50
|
+
innerRef,
|
|
51
|
+
selected,
|
|
52
|
+
role: "button",
|
|
53
|
+
onClick: handleOnClick,
|
|
54
|
+
buttonSize: size,
|
|
55
|
+
...restGlobals,
|
|
56
|
+
...ownerPropsConfig,
|
|
57
|
+
children: [
|
|
58
|
+
shape === CHIP_SHAPES.ROUND ? /* @__PURE__ */ jsx(StyledRoundShape, { disabled, size, ...ownerPropsConfig, children: /* @__PURE__ */ jsx(Icon, { size: DSIconSizes.M }) }) : /* @__PURE__ */ jsx(Icon, { size: DSIconSizes.M }),
|
|
59
|
+
/* @__PURE__ */ jsx(StyledChipLabel, { size, ...ownerPropsConfig, children: /* @__PURE__ */ jsx(
|
|
60
|
+
StyledSpanWithEllipsis,
|
|
61
|
+
{
|
|
62
|
+
component: "span",
|
|
63
|
+
variant: TYPOGRAPHY_VARIANTS.B4,
|
|
64
|
+
wrapText,
|
|
65
|
+
...ownerPropsConfig,
|
|
66
|
+
children: label
|
|
67
|
+
}
|
|
68
|
+
) })
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
)
|
|
48
72
|
}
|
|
49
|
-
)
|
|
73
|
+
);
|
|
50
74
|
};
|
|
51
75
|
DSChip.displayName = "DSChip";
|
|
52
76
|
const DSChipWithSchema = describe(DSChip);
|
package/dist/esm/DSChip.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSChip.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useConfig } from './config/useConfig.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants/index.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const {\n size,\n shape,\n selected,\n applyAriaDisabled,\n innerRef,\n icon: Icon,\n label,\n globalAttrs,\n xStyledAttrs,\n ownerPropsConfig,\n } = useConfig(props);\n\n const { disabled, className, onClick, ...restGlobals } = globalAttrs;\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (applyAriaDisabled) return;\n if (onClick) {\n onClick(e);\n }\n },\n [applyAriaDisabled, onClick],\n );\n\n return (\n <StyledWrapper
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { useConfig } from './config/useConfig.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants/index.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const {\n size,\n shape,\n selected,\n applyAriaDisabled,\n innerRef,\n icon: Icon,\n label,\n globalAttrs,\n xStyledAttrs,\n ownerPropsConfig,\n wrapText,\n } = useConfig(props);\n\n const { disabled, className, onClick, ...restGlobals } = globalAttrs;\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (applyAriaDisabled) return;\n if (onClick) {\n onClick(e);\n }\n },\n [applyAriaDisabled, onClick],\n );\n\n return (\n <StyledWrapper\n wrapText={wrapText}\n buttonShape={shape}\n buttonSize={size}\n className={className}\n {...xStyledAttrs}\n {...ownerPropsConfig}\n >\n <StyledChip\n buttonShape={shape}\n aria-disabled={disabled || applyAriaDisabled}\n disabled={disabled}\n innerRef={innerRef}\n selected={selected}\n role=\"button\"\n onClick={handleOnClick}\n buttonSize={size}\n {...restGlobals}\n {...ownerPropsConfig}\n >\n {shape === CHIP_SHAPES.ROUND ? (\n <StyledRoundShape disabled={disabled} size={size} {...ownerPropsConfig}>\n <Icon size={DSIconSizes.M} />\n </StyledRoundShape>\n ) : (\n <Icon size={DSIconSizes.M} />\n )}\n <StyledChipLabel size={size} {...ownerPropsConfig}>\n <StyledSpanWithEllipsis\n component=\"span\"\n variant={TYPOGRAPHY_VARIANTS.B4}\n wrapText={wrapText}\n {...ownerPropsConfig}\n >\n {label}\n </StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\n </StyledWrapper>\n );\n};\n\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypesSchema;\n\nexport { DSChip, DSChipWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8CjB,SAcM,KAdN;AA9CN,SAAgB,mBAAmB;AACnC,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,YAAY,iBAAiB,eAAe,kBAAkB,8BAA8B;AACrG,SAAS,mBAAmB;AAE5B,SAAS,6BAA6B;AAEtC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAU,KAAK;AAEnB,QAAM,EAAE,UAAU,WAAW,SAAS,GAAG,YAAY,IAAI;AAEzD,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAuD;AACtD,UAAI,kBAAmB;AACvB,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,OAAO;AAAA,EAC7B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb,YAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,iBAAe,YAAY;AAAA,UAC3B;AAAA,UACA;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,UACX,GAAG;AAAA,UACH,GAAG;AAAA,UAEH;AAAA,sBAAU,YAAY,QACrB,oBAAC,oBAAiB,UAAoB,MAAa,GAAG,kBACpD,8BAAC,QAAK,MAAM,YAAY,GAAG,GAC7B,IAEA,oBAAC,QAAK,MAAM,YAAY,GAAG;AAAA,YAE7B,oBAAC,mBAAgB,MAAa,GAAG,kBAC/B;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,oBAAoB;AAAA,gBAC7B;AAAA,gBACC,GAAG;AAAA,gBAEH;AAAA;AAAA,YACH,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,OAAO,cAAc;AACrB,MAAM,mBAAmB,SAAS,MAAM;AACxC,iBAAiB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -21,14 +21,18 @@ const CHIP_SIZES = {
|
|
|
21
21
|
};
|
|
22
22
|
const roundShapeLarge = "4.308rem";
|
|
23
23
|
const roundShapeSmall = "3.077rem";
|
|
24
|
+
const roundShapeLargeMobile = "3.563rem";
|
|
25
|
+
const roundShapeSmallMobile = "2.5rem";
|
|
24
26
|
const basicSizes = {
|
|
25
27
|
s: {
|
|
26
28
|
width: "5.538rem",
|
|
27
|
-
height: "5.154rem"
|
|
29
|
+
height: "5.154rem",
|
|
30
|
+
maxWidth: "72px"
|
|
28
31
|
},
|
|
29
32
|
l: {
|
|
30
33
|
width: "7.077rem",
|
|
31
|
-
height: "5.154rem"
|
|
34
|
+
height: "5.154rem",
|
|
35
|
+
maxWidth: "92px"
|
|
32
36
|
}
|
|
33
37
|
};
|
|
34
38
|
const shapeSizes = {
|
|
@@ -63,7 +67,9 @@ export {
|
|
|
63
67
|
DSChipSlots,
|
|
64
68
|
basicSizes,
|
|
65
69
|
roundShapeLarge,
|
|
70
|
+
roundShapeLargeMobile,
|
|
66
71
|
roundShapeSmall,
|
|
72
|
+
roundShapeSmallMobile,
|
|
67
73
|
shapeSizes
|
|
68
74
|
};
|
|
69
75
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSChipName = 'DSChip';\n\nexport const CHIP_SLOTS = {\n ROOT: 'root',\n BUTTON: 'button',\n LABEL: 'label',\n ROUND_SHAPE: 'round-shape',\n ELLIPSIS: 'ellipsis',\n} as const;\n\nexport const CHIP_DATA_TESTID = slotObjectToDataTestIds(DSChipName, CHIP_SLOTS);\n\nexport const DSChipSlots = CHIP_SLOTS;\nexport const DSChipDataTestIds = CHIP_DATA_TESTID;\n\nexport const CHIP_SHAPES = {\n DEFAULT: 'default' as const,\n ROUND: 'round' as const,\n};\n\nexport const CHIP_SIZES = {\n S: 's' as const,\n L: 'l' as const,\n};\n\nexport const roundShapeLarge = '4.308rem';\nexport const roundShapeSmall = '3.077rem';\n\nexport const basicSizes = {\n s: {\n width: '5.538rem',\n height: '5.154rem',\n } as const,\n l: {\n width: '7.077rem',\n height: '5.154rem',\n } as const,\n};\n\nexport const shapeSizes = {\n s: {\n width: '5.538rem',\n height: '5.923rem',\n } as const,\n l: {\n width: '7.077rem',\n height: '6.538rem',\n } as const,\n};\n\nexport const ChipSizesValuesArray = Object.values(CHIP_SIZES);\nexport const ChipShapesValuesArray = Object.values(CHIP_SHAPES);\nexport const ChipInteractionStates = ['hover', 'focus', 'active'];\n\nexport const ChipSizesValuesString = JSON.stringify(ChipSizesValuesArray);\nexport const ChipShapesValuesString = JSON.stringify(ChipShapesValuesArray);\nexport const ChipInteractionStatesValuesString = JSON.stringify(ChipInteractionStates);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,aAAa;AAEnB,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AACZ;AAEO,MAAM,mBAAmB,wBAAwB,YAAY,UAAU;AAEvE,MAAM,cAAc;AACpB,MAAM,oBAAoB;AAE1B,MAAM,cAAc;AAAA,EACzB,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSChipName = 'DSChip';\n\nexport const CHIP_SLOTS = {\n ROOT: 'root',\n BUTTON: 'button',\n LABEL: 'label',\n ROUND_SHAPE: 'round-shape',\n ELLIPSIS: 'ellipsis',\n} as const;\n\nexport const CHIP_DATA_TESTID = slotObjectToDataTestIds(DSChipName, CHIP_SLOTS);\n\nexport const DSChipSlots = CHIP_SLOTS;\nexport const DSChipDataTestIds = CHIP_DATA_TESTID;\n\nexport const CHIP_SHAPES = {\n DEFAULT: 'default' as const,\n ROUND: 'round' as const,\n};\n\nexport const CHIP_SIZES = {\n S: 's' as const,\n L: 'l' as const,\n};\n\n// Round Shape RT sizes: 57x57 RT for large size and 40x40 RT for small size\n\n// Calculation based on a root font-size of 13px\nexport const roundShapeLarge = '4.308rem';\nexport const roundShapeSmall = '3.077rem';\n\n// Calculation based on a root font-size of 16px\nexport const roundShapeLargeMobile = '3.563rem';\nexport const roundShapeSmallMobile = '2.5rem';\n\nexport const basicSizes = {\n s: {\n width: '5.538rem',\n height: '5.154rem',\n maxWidth: '72px',\n } as const,\n l: {\n width: '7.077rem',\n height: '5.154rem',\n maxWidth: '92px',\n } as const,\n};\n\nexport const shapeSizes = {\n s: {\n width: '5.538rem',\n height: '5.923rem',\n } as const,\n l: {\n width: '7.077rem',\n height: '6.538rem',\n } as const,\n};\n\nexport const ChipSizesValuesArray = Object.values(CHIP_SIZES);\nexport const ChipShapesValuesArray = Object.values(CHIP_SHAPES);\nexport const ChipInteractionStates = ['hover', 'focus', 'active'];\n\nexport const ChipSizesValuesString = JSON.stringify(ChipSizesValuesArray);\nexport const ChipShapesValuesString = JSON.stringify(ChipShapesValuesArray);\nexport const ChipInteractionStatesValuesString = JSON.stringify(ChipInteractionStates);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,aAAa;AAEnB,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AACZ;AAEO,MAAM,mBAAmB,wBAAwB,YAAY,UAAU;AAEvE,MAAM,cAAc;AACpB,MAAM,oBAAoB;AAE1B,MAAM,cAAc;AAAA,EACzB,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAKO,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AAGxB,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAE9B,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,uBAAuB,OAAO,OAAO,UAAU;AACrD,MAAM,wBAAwB,OAAO,OAAO,WAAW;AACvD,MAAM,wBAAwB,CAAC,SAAS,SAAS,QAAQ;AAEzD,MAAM,wBAAwB,KAAK,UAAU,oBAAoB;AACjE,MAAM,yBAAyB,KAAK,UAAU,qBAAqB;AACnE,MAAM,oCAAoC,KAAK,UAAU,qBAAqB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,7 +18,8 @@ import {
|
|
|
18
18
|
const DSChipDefaultProps = {
|
|
19
19
|
size: CHIP_SIZES.L,
|
|
20
20
|
shape: CHIP_SHAPES.DEFAULT,
|
|
21
|
-
applyAriaDisabled: false
|
|
21
|
+
applyAriaDisabled: false,
|
|
22
|
+
wrapText: false
|
|
22
23
|
};
|
|
23
24
|
const DSChipPropTypes = {
|
|
24
25
|
...getPropsPerSlotPropTypes(DSChipName, CHIP_SLOTS),
|
|
@@ -33,7 +34,8 @@ const DSChipPropTypes = {
|
|
|
33
34
|
applyAriaDisabled: PropTypes.bool.description(
|
|
34
35
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
35
36
|
).defaultValue(false),
|
|
36
|
-
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description("Inner ref to button component.")
|
|
37
|
+
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description("Inner ref to button component."),
|
|
38
|
+
wrapText: PropTypes.bool.description("wrap text in the label of the chip").defaultValue(false)
|
|
37
39
|
};
|
|
38
40
|
const DSChipPropTypesSchema = DSChipPropTypes;
|
|
39
41
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport {\n CHIP_SIZES,\n CHIP_SHAPES,\n ChipSizesValuesArray,\n ChipSizesValuesString,\n ChipShapesValuesArray,\n ChipShapesValuesString,\n DSChipName,\n CHIP_SLOTS,\n} from './constants/index.js';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes.js';\n\nexport const DSChipDefaultProps: DSChipT.DefaultProps = {\n size: CHIP_SIZES.L,\n shape: CHIP_SHAPES.DEFAULT,\n applyAriaDisabled: false,\n};\n\nexport declare namespace DSChipT {\n export interface DefaultProps {\n size: ChipSizesT;\n shape: ChipShapesT;\n applyAriaDisabled: boolean;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChipName, typeof CHIP_SLOTS> {\n selected?: boolean;\n innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n }\n\n export interface RequiredProps {\n label: string;\n icon: React.ComponentType<
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,MAAM,qBAA2C;AAAA,EACtD,MAAM,WAAW;AAAA,EACjB,OAAO,YAAY;AAAA,EACnB,mBAAmB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport {\n CHIP_SIZES,\n CHIP_SHAPES,\n ChipSizesValuesArray,\n ChipSizesValuesString,\n ChipShapesValuesArray,\n ChipShapesValuesString,\n DSChipName,\n CHIP_SLOTS,\n} from './constants/index.js';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes.js';\n\nexport const DSChipDefaultProps: DSChipT.DefaultProps = {\n size: CHIP_SIZES.L,\n shape: CHIP_SHAPES.DEFAULT,\n applyAriaDisabled: false,\n wrapText: false,\n};\n\nexport declare namespace DSChipT {\n export interface DefaultProps {\n size: ChipSizesT;\n shape: ChipShapesT;\n applyAriaDisabled: boolean;\n wrapText: boolean;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChipName, typeof CHIP_SLOTS> {\n selected?: boolean;\n innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n }\n\n export interface RequiredProps {\n label: string;\n icon: React.ComponentType<{\n size?: string;\n }>;\n }\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof OptionalProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof OptionalProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const DSChipPropTypes: DSPropTypesSchema<DSChipT.Props> = {\n ...getPropsPerSlotPropTypes(DSChipName, CHIP_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n icon: PropTypes.func.isRequired.description('Chip Icon').defaultValue(() => {}),\n label: PropTypes.string.isRequired.description('Chip Label').defaultValue(''),\n selected: PropTypes.bool.description('Whether chip is selected').defaultValue(''),\n shape: PropTypes.oneOf(ChipShapesValuesArray).description(ChipShapesValuesString).defaultValue(CHIP_SHAPES.DEFAULT),\n size: PropTypes.oneOf(ChipSizesValuesArray).description(ChipSizesValuesString).defaultValue(CHIP_SIZES.L),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n wrapText: PropTypes.bool.description('wrap text in the label of the chip').defaultValue(false),\n};\n\nexport const DSChipPropTypesSchema = DSChipPropTypes as unknown as ValidationMap<DSChipT.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,MAAM,qBAA2C;AAAA,EACtD,MAAM,WAAW;AAAA,EACjB,OAAO,YAAY;AAAA,EACnB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AA0CO,MAAM,kBAAoD;AAAA,EAC/D,GAAG,yBAAyB,YAAY,UAAU;AAAA,EAClD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,KAAK,WAAW,YAAY,WAAW,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC9E,OAAO,UAAU,OAAO,WAAW,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EAC5E,UAAU,UAAU,KAAK,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EAChF,OAAO,UAAU,MAAM,qBAAqB,EAAE,YAAY,sBAAsB,EAAE,aAAa,YAAY,OAAO;AAAA,EAClH,MAAM,UAAU,MAAM,oBAAoB,EAAE,YAAY,qBAAqB,EAAE,aAAa,WAAW,CAAC;AAAA,EACxG,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,UAAU,UAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAC/F;AAEO,MAAM,wBAAwB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
|
+
import { DSTypography } from "@elliemae/ds-typography";
|
|
3
4
|
import {
|
|
4
5
|
basicSizes,
|
|
5
6
|
shapeSizes,
|
|
@@ -8,15 +9,27 @@ import {
|
|
|
8
9
|
roundShapeLarge,
|
|
9
10
|
roundShapeSmall,
|
|
10
11
|
DSChipName,
|
|
11
|
-
CHIP_SLOTS
|
|
12
|
+
CHIP_SLOTS,
|
|
13
|
+
roundShapeLargeMobile,
|
|
14
|
+
roundShapeSmallMobile
|
|
12
15
|
} from "./constants/index.js";
|
|
13
16
|
const getChipSize = (shape) => shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes;
|
|
17
|
+
const wrapTextStyles = css`
|
|
18
|
+
overflow-wrap: break-word;
|
|
19
|
+
white-space: pre-wrap;
|
|
20
|
+
overflow: visible;
|
|
21
|
+
`;
|
|
22
|
+
const ellipsisStyles = css`
|
|
23
|
+
white-space: nowrap;
|
|
24
|
+
overflow: hidden;
|
|
25
|
+
text-overflow: ellipsis;
|
|
26
|
+
`;
|
|
14
27
|
const StyledChipLabel = styled("div", { name: DSChipName, slot: CHIP_SLOTS.LABEL })`
|
|
15
28
|
font-size: ${({ theme }) => theme.fontSizes.label[200]};
|
|
16
29
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
17
30
|
word-wrap: break-word;
|
|
18
31
|
text-align: center;
|
|
19
|
-
padding: ${({ size }) => size === CHIP_SIZES.L ? "2px" : "4px"}
|
|
32
|
+
padding-top: ${({ size }) => size === CHIP_SIZES.L ? "2px" : "4px"};
|
|
20
33
|
z-index: 0;
|
|
21
34
|
line-height: 1.27;
|
|
22
35
|
width: inherit;
|
|
@@ -24,23 +37,23 @@ const StyledChipLabel = styled("div", { name: DSChipName, slot: CHIP_SLOTS.LABEL
|
|
|
24
37
|
align-items: center;
|
|
25
38
|
justify-content: center;
|
|
26
39
|
`;
|
|
27
|
-
const StyledSpanWithEllipsis = styled(
|
|
40
|
+
const StyledSpanWithEllipsis = styled(DSTypography, {
|
|
28
41
|
name: DSChipName,
|
|
29
42
|
slot: CHIP_SLOTS.ELLIPSIS
|
|
30
43
|
})`
|
|
31
|
-
|
|
32
|
-
overflow: hidden;
|
|
33
|
-
text-overflow: ellipsis;
|
|
44
|
+
${({ wrapText }) => wrapText ? wrapTextStyles : ellipsisStyles};
|
|
34
45
|
max-width: 100%;
|
|
46
|
+
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
35
47
|
`;
|
|
36
48
|
const StyledWrapper = styled("div", {
|
|
37
49
|
name: DSChipName,
|
|
38
50
|
slot: CHIP_SLOTS.ROOT
|
|
39
51
|
})`
|
|
40
52
|
display: flex;
|
|
41
|
-
height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};
|
|
42
53
|
width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
|
|
43
54
|
${xStyledCommonProps}
|
|
55
|
+
max-width: ${({ buttonSize }) => basicSizes[buttonSize].maxWidth};
|
|
56
|
+
${({ wrapText, buttonSize, buttonShape }) => wrapText ? `height: auto;` : ` height: ${getChipSize(buttonShape)[buttonSize].height};`}
|
|
44
57
|
`;
|
|
45
58
|
const disabledRoundShape = css`
|
|
46
59
|
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
@@ -60,7 +73,10 @@ const StyledRoundShape = styled("div", {
|
|
|
60
73
|
display: flex;
|
|
61
74
|
align-items: center;
|
|
62
75
|
justify-content: center;
|
|
63
|
-
|
|
76
|
+
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
77
|
+
width: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile};
|
|
78
|
+
height: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile};
|
|
79
|
+
}
|
|
64
80
|
`;
|
|
65
81
|
const styledChipSelectedCss = css`
|
|
66
82
|
// TODO: wrap css processor to process new HOC wrapping styled components
|
|
@@ -80,7 +96,25 @@ const styledChipSelectedCss = css`
|
|
|
80
96
|
|
|
81
97
|
&:focus {
|
|
82
98
|
&:before {
|
|
83
|
-
border: 2px solid ${({ theme }) => theme.colors.brand[
|
|
99
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
`;
|
|
103
|
+
const disabledStyles = css`
|
|
104
|
+
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
105
|
+
|
|
106
|
+
.DSIcon-svg {
|
|
107
|
+
fill: ${({ theme }) => theme.colors.neutral[400]};
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
&:hover {
|
|
111
|
+
${StyledRoundShape} {
|
|
112
|
+
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
113
|
+
}
|
|
114
|
+
background-color: ${({ theme }) => theme.colors.neutral["050"]};
|
|
115
|
+
cursor: not-allowed;
|
|
116
|
+
&:before {
|
|
117
|
+
border-color: transparent;
|
|
84
118
|
}
|
|
85
119
|
}
|
|
86
120
|
`;
|
|
@@ -90,27 +124,28 @@ const StyledChip = styled("button", { name: DSChipName, slot: CHIP_SLOTS.BUTTON
|
|
|
90
124
|
flex-direction: column;
|
|
91
125
|
align-items: center;
|
|
92
126
|
justify-content: center;
|
|
93
|
-
padding: 0;
|
|
94
|
-
padding-top: ${(props) => props.buttonShape === CHIP_SHAPES.ROUND ? "0" : "10px"};
|
|
95
127
|
border: none;
|
|
96
128
|
min-height: 100%;
|
|
97
129
|
height: fit-content;
|
|
98
130
|
width: 100%;
|
|
99
|
-
background-color:
|
|
131
|
+
background-color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
100
132
|
color: ${({ theme }) => theme.colors.brand[600]};
|
|
101
133
|
border-radius: 4px;
|
|
102
134
|
cursor: pointer;
|
|
103
135
|
outline: none;
|
|
104
|
-
|
|
136
|
+
${({ buttonShape, buttonSize }) => {
|
|
137
|
+
if (buttonShape === CHIP_SHAPES.ROUND && buttonSize === CHIP_SIZES.L) {
|
|
138
|
+
return css`
|
|
139
|
+
padding: 6px;
|
|
140
|
+
`;
|
|
141
|
+
}
|
|
142
|
+
return css`
|
|
143
|
+
padding: 10px 6px;
|
|
144
|
+
`;
|
|
145
|
+
}}
|
|
105
146
|
${StyledRoundShape} {
|
|
106
147
|
& .DSIcon-root .DSIcon-svg {
|
|
107
|
-
fill:
|
|
108
|
-
height: 1.85rem;
|
|
109
|
-
width: 1.85rem;
|
|
110
|
-
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
111
|
-
height: 1.5rem;
|
|
112
|
-
width: 1.5rem;
|
|
113
|
-
}
|
|
148
|
+
fill: ${({ theme }) => theme.colors.neutral["000"]};
|
|
114
149
|
}
|
|
115
150
|
${({ disabled }) => disabled && disabledRoundShape}
|
|
116
151
|
}
|
|
@@ -128,34 +163,16 @@ const StyledChip = styled("button", { name: DSChipName, slot: CHIP_SLOTS.BUTTON
|
|
|
128
163
|
}
|
|
129
164
|
& .DSIcon-root .DSIcon-svg {
|
|
130
165
|
fill: ${({ theme }) => theme.colors.brand[600]};
|
|
131
|
-
|
|
132
|
-
width: 1.85rem;
|
|
133
|
-
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
134
|
-
height: 1.5rem;
|
|
135
|
-
width: 1.5rem;
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
& .DSIcon-root {
|
|
139
|
-
height: 1.85rem;
|
|
140
|
-
width: 1.85rem;
|
|
141
|
-
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
142
|
-
height: 1.5rem;
|
|
143
|
-
width: 1.5rem;
|
|
144
|
-
}
|
|
166
|
+
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
145
167
|
}
|
|
146
168
|
|
|
147
169
|
&:hover,
|
|
148
170
|
&:focus {
|
|
149
171
|
z-index: 10;
|
|
150
|
-
|
|
151
|
-
${StyledChipLabel} {
|
|
152
|
-
text-align: left;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
172
|
${StyledSpanWithEllipsis} {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
173
|
+
${({ wrapText }) => !wrapText && css`
|
|
174
|
+
${wrapTextStyles}
|
|
175
|
+
`}
|
|
159
176
|
}
|
|
160
177
|
}
|
|
161
178
|
|
|
@@ -172,78 +189,43 @@ const StyledChip = styled("button", { name: DSChipName, slot: CHIP_SLOTS.BUTTON
|
|
|
172
189
|
|
|
173
190
|
&:focus {
|
|
174
191
|
&:before {
|
|
175
|
-
|
|
192
|
+
${({ buttonShape }) => buttonShape === CHIP_SHAPES.ROUND ? css`
|
|
193
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[800]};
|
|
194
|
+
` : css`
|
|
195
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
196
|
+
`}
|
|
176
197
|
}
|
|
177
198
|
}
|
|
178
199
|
|
|
179
200
|
&:disabled {
|
|
180
|
-
|
|
181
|
-
cursor: not-allowed;
|
|
182
|
-
|
|
183
|
-
.DSIcon-svg {
|
|
184
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
&:focus,
|
|
188
|
-
&:hover {
|
|
189
|
-
${StyledRoundShape} {
|
|
190
|
-
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
191
|
-
}
|
|
192
|
-
background-color: #fff;
|
|
193
|
-
cursor: not-allowed;
|
|
194
|
-
&:before {
|
|
195
|
-
border-color: transparent;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
${StyledChipLabel} {
|
|
199
|
-
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
&:hover .DSIcon-svg {
|
|
204
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
205
|
-
}
|
|
201
|
+
${disabledStyles}
|
|
206
202
|
}
|
|
207
203
|
|
|
208
204
|
&[aria-disabled='true'] {
|
|
209
|
-
|
|
210
|
-
cursor: not-allowed;
|
|
211
|
-
|
|
212
|
-
.DSIcon-svg {
|
|
213
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
214
|
-
}
|
|
215
|
-
|
|
205
|
+
${disabledStyles}
|
|
216
206
|
${StyledRoundShape} {
|
|
217
207
|
${disabledRoundShape}
|
|
218
208
|
}
|
|
219
209
|
|
|
220
|
-
&:focus
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
224
|
-
}
|
|
225
|
-
background-color: #fff;
|
|
226
|
-
cursor: not-allowed;
|
|
227
|
-
|
|
228
|
-
${StyledChipLabel} {
|
|
229
|
-
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
&:hover {
|
|
234
|
-
&:not(:focus) {
|
|
235
|
-
&:before {
|
|
236
|
-
border-color: transparent;
|
|
237
|
-
}
|
|
210
|
+
&:focus {
|
|
211
|
+
&:before {
|
|
212
|
+
border: 2px solid ${({ theme }) => theme.colors.neutral[400]};
|
|
238
213
|
}
|
|
239
214
|
}
|
|
240
|
-
|
|
241
|
-
&:hover .DSIcon-svg {
|
|
242
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
243
|
-
}
|
|
244
215
|
}
|
|
245
216
|
|
|
246
|
-
${({ selected }) => !selected ? "" :
|
|
217
|
+
${({ selected, buttonShape }) => !selected ? "" : css`
|
|
218
|
+
${styledChipSelectedCss}
|
|
219
|
+
&:focus {
|
|
220
|
+
&:before {
|
|
221
|
+
${buttonShape === CHIP_SHAPES.ROUND ? css`
|
|
222
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[800]};
|
|
223
|
+
` : css`
|
|
224
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
225
|
+
`}
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
`}
|
|
247
229
|
`;
|
|
248
230
|
export {
|
|
249
231
|
StyledChip,
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport {\n basicSizes,\n shapeSizes,\n CHIP_SHAPES,\n CHIP_SIZES,\n roundShapeLarge,\n roundShapeSmall,\n DSChipName,\n CHIP_SLOTS,\n} from './constants/index.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: CHIP_SLOTS.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')}
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n basicSizes,\n shapeSizes,\n CHIP_SHAPES,\n CHIP_SIZES,\n roundShapeLarge,\n roundShapeSmall,\n DSChipName,\n CHIP_SLOTS,\n roundShapeLargeMobile,\n roundShapeSmallMobile,\n} from './constants/index.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n wrapText?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nconst wrapTextStyles = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n`;\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: CHIP_SLOTS.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding-top: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')};\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled(DSTypography, {\n name: DSChipName,\n slot: CHIP_SLOTS.ELLIPSIS,\n})<{ wrapText?: boolean }>`\n ${({ wrapText }) => (wrapText ? wrapTextStyles : ellipsisStyles)};\n max-width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROOT,\n})<StyledChipPropsT>`\n display: flex;\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n max-width: ${({ buttonSize }) => basicSizes[buttonSize].maxWidth};\n ${({ wrapText, buttonSize, buttonShape }) =>\n wrapText ? `height: auto;` : ` height: ${getChipSize(buttonShape)[buttonSize].height};`}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n background-color: ${({ theme }) => theme.colors.brand[600]};\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n }\n`;\n\nconst styledChipSelectedCss = css`\n // TODO: wrap css processor to process new HOC wrapping styled components\n ${StyledRoundShape.toString()} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n\n .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n\n &:before {\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nconst disabledStyles = css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[400]};\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: ${({ theme }) => theme.colors.neutral['050']};\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: CHIP_SLOTS.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape' | 'buttonSize' | 'wrapText'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n ${({ buttonShape, buttonSize }) => {\n if (buttonShape === CHIP_SHAPES.ROUND && buttonSize === CHIP_SIZES.L) {\n return css`\n padding: 6px;\n `;\n }\n return css`\n padding: 10px 6px;\n `;\n }}\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n ${({ disabled }) => disabled && disabledRoundShape}\n }\n &:before {\n content: '';\n position: absolute;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n pointer-events: none;\n }\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n ${StyledSpanWithEllipsis} {\n ${({ wrapText }) =>\n !wrapText &&\n css`\n ${wrapTextStyles}\n `}\n }\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:focus {\n &:before {\n ${({ buttonShape }) =>\n buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `}\n }\n }\n\n &:disabled {\n ${disabledStyles}\n }\n\n &[aria-disabled='true'] {\n ${disabledStyles}\n ${StyledRoundShape} {\n ${disabledRoundShape}\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.neutral[400]};\n }\n }\n }\n\n ${({ selected, buttonShape }) =>\n !selected\n ? ''\n : css`\n ${styledChipSelectedCss}\n &:focus {\n &:before {\n ${buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `}\n }\n }\n `}\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -26,7 +26,8 @@ const testPropsAsSyntax = {
|
|
|
26
26
|
const testCompleteDefaults = {
|
|
27
27
|
size: "l",
|
|
28
28
|
shape: "default",
|
|
29
|
-
applyAriaDisabled: false
|
|
29
|
+
applyAriaDisabled: false,
|
|
30
|
+
wrapText: false
|
|
30
31
|
};
|
|
31
32
|
const testInternalProps = {
|
|
32
33
|
...testRequiredProps,
|
|
@@ -43,21 +44,24 @@ const testExplicitDefinition = {
|
|
|
43
44
|
icon: Icon,
|
|
44
45
|
size: "l",
|
|
45
46
|
shape: "default",
|
|
46
|
-
applyAriaDisabled: false
|
|
47
|
+
applyAriaDisabled: false,
|
|
48
|
+
wrapText: false
|
|
47
49
|
};
|
|
48
50
|
const testInferedTypeCompatibility = {
|
|
49
51
|
label: "Label",
|
|
50
52
|
icon: Icon,
|
|
51
53
|
size: "l",
|
|
52
54
|
shape: "default",
|
|
53
|
-
applyAriaDisabled: false
|
|
55
|
+
applyAriaDisabled: false,
|
|
56
|
+
wrapText: false
|
|
54
57
|
};
|
|
55
58
|
const testDefinitionAsConst = {
|
|
56
59
|
label: "Label",
|
|
57
60
|
icon: Icon,
|
|
58
61
|
size: "l",
|
|
59
62
|
shape: "default",
|
|
60
|
-
applyAriaDisabled: false
|
|
63
|
+
applyAriaDisabled: false,
|
|
64
|
+
wrapText: false
|
|
61
65
|
};
|
|
62
66
|
const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
63
67
|
/* @__PURE__ */ jsx(DSChip, { ...testExplicitDefinition }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-chip-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSChip } from '../index.js';\nimport type { DSChipT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChipT.Props;\ntype ComponentPropsInternals = DSChipT.InternalProps;\ntype ComponentPropsDefaultProps = DSChipT.DefaultProps;\ntype ComponentPropsOptionalProps = DSChipT.OptionalProps;\ntype ComponentPropsRequiredProps = DSChipT.RequiredProps;\n\nconst Icon = () => <div data-testid=\"icon-test\" />;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n label: 'Label',\n icon: Icon,\n};\n\nconst testOptionalPropsEmpty: ComponentPropsOptionalProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n selected: true,\n innerRef: React.createRef<HTMLButtonElement>(),\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n applyAriaDisabled: true,\n};\n\n// ComponentPropsForApp only needs required props, default and optional are not mandatory\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n label: 'Label',\n icon: Icon,\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n label: 'Label',\n icon: Icon,\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n label: 'Label',\n icon: Icon,\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSChip {...testExplicitDefinition} />\n <DSChip {...testInferedTypeCompatibility} />\n <DSChip {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSChip label=\"Label\" icon={Icon} />\n </>\n);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACYJ,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSChip } from '../index.js';\nimport type { DSChipT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChipT.Props;\ntype ComponentPropsInternals = DSChipT.InternalProps;\ntype ComponentPropsDefaultProps = DSChipT.DefaultProps;\ntype ComponentPropsOptionalProps = DSChipT.OptionalProps;\ntype ComponentPropsRequiredProps = DSChipT.RequiredProps;\n\nconst Icon = () => <div data-testid=\"icon-test\" />;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n label: 'Label',\n icon: Icon,\n};\n\nconst testOptionalPropsEmpty: ComponentPropsOptionalProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n selected: true,\n innerRef: React.createRef<HTMLButtonElement>(),\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n applyAriaDisabled: true,\n};\n\n// ComponentPropsForApp only needs required props, default and optional are not mandatory\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n wrapText: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n label: 'Label',\n icon: Icon,\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n wrapText: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n label: 'Label',\n icon: Icon,\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n wrapText: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n label: 'Label',\n icon: Icon,\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n wrapText: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSChip {...testExplicitDefinition} />\n <DSChip {...testInferedTypeCompatibility} />\n <DSChip {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSChip label=\"Label\" icon={Icon} />\n </>\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACYJ,SAiFjB,UAjFiB,KAiFjB,YAjFiB;AAXnB,OAAOA,YAAW;AAClB,SAAS,cAAc;AAUvB,MAAM,OAAO,MAAM,oBAAC,SAAI,eAAY,aAAY;AAEhD,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,yBAAsD,CAAC;AAE7D,MAAM,oBAAiD;AAAA,EACrD,UAAU;AAAA,EACV,UAAUA,OAAM,UAA6B;AAC/C;AAIA,MAAM,sBAA2D;AAAA,EAC/D,mBAAmB;AACrB;AAGA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,UAAQ,GAAG,wBAAwB;AAAA,EACpC,oBAAC,UAAQ,GAAG,8BAA8B;AAAA,EAC1C,oBAAC,UAAQ,GAAG,uBAAuB;AAAA,EAEnC,oBAAC,UAAO,OAAM,SAAQ,MAAM,MAAM;AAAA,GACpC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|