@elliemae/ds-chip 3.12.0-rc.0 → 3.12.0-rc.10
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 +7 -19
- package/dist/cjs/DSChip.js.map +1 -1
- package/dist/cjs/config/useConfig.js +2 -1
- package/dist/cjs/config/useConfig.js.map +2 -2
- package/dist/cjs/exported_related/theming.js +1 -1
- package/dist/cjs/exported_related/theming.js.map +1 -1
- package/dist/cjs/styles.js +10 -9
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/DSChip.js +7 -19
- package/dist/esm/DSChip.js.map +1 -1
- package/dist/esm/config/useConfig.js +2 -1
- package/dist/esm/config/useConfig.js.map +2 -2
- package/dist/esm/exported_related/theming.js +1 -1
- package/dist/esm/exported_related/theming.js.map +1 -1
- package/dist/esm/styles.js +11 -10
- package/dist/esm/styles.js.map +2 -2
- package/package.json +6 -6
package/dist/cjs/DSChip.js
CHANGED
|
@@ -38,12 +38,9 @@ var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
|
38
38
|
const DSChip = (props) => {
|
|
39
39
|
const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = (0, import_useConfig.useConfig)(props);
|
|
40
40
|
const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;
|
|
41
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapper, {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
className,
|
|
45
|
-
...xStyledAttrs,
|
|
46
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledChip, {
|
|
41
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapper, { buttonShape: shape, buttonSize: size, className, ...xStyledAttrs, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
42
|
+
import_styles.StyledChip,
|
|
43
|
+
{
|
|
47
44
|
buttonShape: shape,
|
|
48
45
|
"aria-disabled": disabled,
|
|
49
46
|
disabled,
|
|
@@ -52,20 +49,11 @@ const DSChip = (props) => {
|
|
|
52
49
|
role: "button",
|
|
53
50
|
...restGlobals,
|
|
54
51
|
children: [
|
|
55
|
-
shape === import_constants.CHIP_SHAPES.ROUND ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRoundShape, {
|
|
56
|
-
|
|
57
|
-
size,
|
|
58
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {})
|
|
59
|
-
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
|
|
60
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledChipLabel, {
|
|
61
|
-
size,
|
|
62
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSpanWithEllipsis, {
|
|
63
|
-
children: label
|
|
64
|
-
})
|
|
65
|
-
})
|
|
52
|
+
shape === import_constants.CHIP_SHAPES.ROUND ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRoundShape, { disabled, size, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
|
|
53
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledChipLabel, { size, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSpanWithEllipsis, { children: label }) })
|
|
66
54
|
]
|
|
67
|
-
}
|
|
68
|
-
});
|
|
55
|
+
}
|
|
56
|
+
) });
|
|
69
57
|
};
|
|
70
58
|
DSChip.propTypes = import_react_desc_prop_types.DSChipPropTypes;
|
|
71
59
|
DSChip.displayName = "DSChip";
|
package/dist/cjs/DSChip.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSChip.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { useConfig } from './config/useConfig';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles';\nimport { CHIP_SHAPES } from './constants';\nimport type { DSChipT } from './react-desc-prop-types';\nimport { DSChipPropTypes } from './react-desc-prop-types';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = useConfig(props);\n\n const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;\n\n return (\n <StyledWrapper buttonShape={shape} buttonSize={size} className={className} {...xStyledAttrs}>\n <StyledChip\n buttonShape={shape}\n aria-disabled={disabled}\n disabled={disabled}\n ref={innerRef}\n selected={selected}\n role=\"button\"\n {...restGlobals}\n >\n {shape === CHIP_SHAPES.ROUND ? (\n <StyledRoundShape disabled={disabled} size={size}>\n <Icon />\n </StyledRoundShape>\n ) : (\n <Icon />\n )}\n <StyledChipLabel size={size}>\n <StyledSpanWithEllipsis>{label}</StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\n </StyledWrapper>\n );\n};\n\nDSChip.propTypes = DSChipPropTypes;\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypes;\n\nexport { DSChip, DSChipWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADejB;AAdN,0BAAyB;AACzB,uBAA0B;AAC1B,oBAAqG;AACrG,uBAA4B;AAE5B,mCAAgC;AAEhC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO,aAAa,aAAa,QAAI,4BAAU,KAAK;AAEzG,QAAM,EAAE,OAAO,aAAa,MAAM,UAAU,cAAc,YAAY,IAAI;AAE1E,SACE,4CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADejB;AAdN,0BAAyB;AACzB,uBAA0B;AAC1B,oBAAqG;AACrG,uBAA4B;AAE5B,mCAAgC;AAEhC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO,aAAa,aAAa,QAAI,4BAAU,KAAK;AAEzG,QAAM,EAAE,OAAO,aAAa,MAAM,UAAU,cAAc,YAAY,IAAI;AAE1E,SACE,4CAAC,+BAAc,aAAa,OAAO,YAAY,MAAM,WAAuB,GAAG,cAC7E;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAe;AAAA,MACf;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,kBAAU,6BAAY,QACrB,4CAAC,kCAAiB,UAAoB,MACpC,sDAAC,QAAK,GACR,IAEA,4CAAC,QAAK;AAAA,QAER,4CAAC,iCAAgB,MACf,sDAAC,wCAAwB,iBAAM,GACjC;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,uBAAmB,8BAAS,MAAM;AACxC,iBAAiB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -29,10 +29,11 @@ __export(useConfig_exports, {
|
|
|
29
29
|
module.exports = __toCommonJS(useConfig_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
32
|
+
var import_exported_related = require("../exported_related");
|
|
32
33
|
var import_react_desc_prop_types = require("../react-desc-prop-types");
|
|
33
34
|
const useConfig = (props) => {
|
|
34
35
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
35
|
-
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSChipPropTypes);
|
|
36
|
+
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSChipPropTypes, import_exported_related.DSChipName);
|
|
36
37
|
const globalAttrs = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault);
|
|
37
38
|
const xStyledAttrs = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
|
|
38
39
|
return { ...propsWithDefault, globalAttrs, xStyledAttrs };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useConfig.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport type { DSChipT } from '../react-desc-prop-types';\nimport { defaultProps, DSChipPropTypes } from '../react-desc-prop-types';\n\nexport const useConfig = (props: DSChipT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSChipT.InternalProps>>(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes);\n const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n return { ...propsWithDefault, globalAttrs, xStyledAttrs };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAKO;
|
|
4
|
+
"sourcesContent": ["import {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { DSChipName } from '../exported_related';\nimport type { DSChipT } from '../react-desc-prop-types';\nimport { defaultProps, DSChipPropTypes } from '../react-desc-prop-types';\n\nexport const useConfig = (props: DSChipT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSChipT.InternalProps>>(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes, DSChipName);\n const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n return { ...propsWithDefault, globalAttrs, xStyledAttrs };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAKO;AACP,8BAA2B;AAE3B,mCAA8C;AAEvC,MAAM,YAAY,CAAC,UAAyB;AACjD,QAAM,uBAAmB,kDAA8D,OAAO,yCAAY;AAE1G,0DAA+B,kBAAkB,8CAAiB,kCAAU;AAC5E,QAAM,kBAAc,4CAAuB,gBAAgB;AAC3D,QAAM,mBAAe,wCAAmB,gBAAgB;AAExD,SAAO,EAAE,GAAG,kBAAkB,aAAa,aAAa;AAC1D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported_related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSChipName = '
|
|
4
|
+
"sourcesContent": ["export const DSChipName = 'DSChip';\n\nexport const DSChipSlots = {\n BUTTON: 'root',\n LABEL: 'label',\n ROUND_SHAPE: 'round-shape',\n CHILDREN_WRAPPER: 'children-wrapper',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,aAAa;AAEnB,MAAM,cAAc;AAAA,EACzB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,kBAAkB;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -44,7 +44,7 @@ const styledChipSelectedCss = import_ds_system.css`
|
|
|
44
44
|
color: ${({ theme }) => theme.colors.brand[800]};
|
|
45
45
|
background-color: ${({ theme }) => theme.colors.brand[200]};
|
|
46
46
|
|
|
47
|
-
.
|
|
47
|
+
.DSIcon-svg {
|
|
48
48
|
fill: ${({ theme }) => theme.colors.brand[800]};
|
|
49
49
|
}
|
|
50
50
|
|
|
@@ -77,10 +77,11 @@ const StyledSpanWithEllipsis = import_ds_system.styled.span`
|
|
|
77
77
|
text-overflow: ellipsis;
|
|
78
78
|
max-width: 100%;
|
|
79
79
|
`;
|
|
80
|
-
const StyledWrapper = (0, import_ds_system.styled)(
|
|
80
|
+
const StyledWrapper = (0, import_ds_system.styled)("div")`
|
|
81
81
|
display: flex;
|
|
82
82
|
height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};
|
|
83
83
|
width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
|
|
84
|
+
${import_ds_system.xStyledCommonProps}
|
|
84
85
|
`;
|
|
85
86
|
const StyledChip = (0, import_ds_system.styled)("button", { name: import_exported_related.DSChipName, slot: import_exported_related.DSChipSlots.BUTTON })`
|
|
86
87
|
position: relative;
|
|
@@ -112,13 +113,13 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
|
|
|
112
113
|
pointer-events: none;
|
|
113
114
|
}
|
|
114
115
|
|
|
115
|
-
& .
|
|
116
|
+
& .DSIcon-root .DSIcon-svg {
|
|
116
117
|
fill: ${({ theme }) => theme.colors.brand[600]};
|
|
117
118
|
height: 24px;
|
|
118
119
|
width: 24px;
|
|
119
120
|
}
|
|
120
121
|
|
|
121
|
-
& .
|
|
122
|
+
& .DSIcon-root {
|
|
122
123
|
height: 24px;
|
|
123
124
|
width: 24px;
|
|
124
125
|
}
|
|
@@ -144,7 +145,7 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
|
|
|
144
145
|
}
|
|
145
146
|
color: ${({ theme }) => theme.colors.brand[800]};
|
|
146
147
|
background-color: ${({ theme }) => theme.colors.brand[200]};
|
|
147
|
-
.
|
|
148
|
+
.DSIcon-svg {
|
|
148
149
|
fill: ${({ theme }) => theme.colors.brand[800]};
|
|
149
150
|
}
|
|
150
151
|
}
|
|
@@ -159,7 +160,7 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
|
|
|
159
160
|
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
160
161
|
cursor: not-allowed;
|
|
161
162
|
|
|
162
|
-
.
|
|
163
|
+
.DSIcon-svg {
|
|
163
164
|
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
164
165
|
}
|
|
165
166
|
|
|
@@ -179,7 +180,7 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
|
|
|
179
180
|
}
|
|
180
181
|
}
|
|
181
182
|
|
|
182
|
-
&:hover .
|
|
183
|
+
&:hover .DSIcon-svg {
|
|
183
184
|
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
184
185
|
}
|
|
185
186
|
}
|
|
@@ -189,7 +190,7 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
|
|
|
189
190
|
const disabledRoundShape = import_ds_system.css`
|
|
190
191
|
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
191
192
|
|
|
192
|
-
& .
|
|
193
|
+
& .DSIcon-root .DSIcon-svg {
|
|
193
194
|
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
194
195
|
}
|
|
195
196
|
`;
|
|
@@ -206,7 +207,7 @@ const StyledRoundShape = (0, import_ds_system.styled)("div", {
|
|
|
206
207
|
justify-content: center;
|
|
207
208
|
margin-top: ${({ size }) => size === import_constants.CHIP_SIZES.L ? "5px" : "10px"};
|
|
208
209
|
|
|
209
|
-
& .
|
|
210
|
+
& .DSIcon-root .DSIcon-svg {
|
|
210
211
|
fill: #fff;
|
|
211
212
|
height: 24px;
|
|
212
213
|
width: 24px;
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes';\nimport { DSChipName, DSChipSlots } from './exported_related';\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\nconst styledChipSelectedCss = css`\n & > div:first-child {\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-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[800]};\n }\n }\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.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')} 6px 6px 6px;\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.span`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\n display: flex;\n height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0;\n padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: #fff;\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\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\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n height: 24px;\n width: 24px;\n }\n\n & .DSIcon-root {\n height: 24px;\n width: 24px;\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n\n ${StyledChipLabel} {\n text-align: left;\n }\n\n ${StyledSpanWithEllipsis} {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n }\n }\n\n &:hover {\n & > div:first-child {\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 border-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:disabled {\n color: ${({ theme }) => theme.colors.neutral[500]};\n cursor: not-allowed;\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n\n &:focus,\n &:hover {\n & > div:first-child {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: #fff;\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\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: DSChipSlots.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 margin-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\n\n & .DSIcon-root .DSIcon-svg {\n fill: #fff;\n height: 24px;\n width: 24px;\n }\n\n ${({ disabled }) => disabled && disabledRoundShape}\n`;\n\nexport const StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n width: 100%;\n height: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSChip.js
CHANGED
|
@@ -8,12 +8,9 @@ import { DSChipPropTypes } from "./react-desc-prop-types";
|
|
|
8
8
|
const DSChip = (props) => {
|
|
9
9
|
const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = useConfig(props);
|
|
10
10
|
const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;
|
|
11
|
-
return /* @__PURE__ */ jsx(StyledWrapper, {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
className,
|
|
15
|
-
...xStyledAttrs,
|
|
16
|
-
children: /* @__PURE__ */ jsxs(StyledChip, {
|
|
11
|
+
return /* @__PURE__ */ jsx(StyledWrapper, { buttonShape: shape, buttonSize: size, className, ...xStyledAttrs, children: /* @__PURE__ */ jsxs(
|
|
12
|
+
StyledChip,
|
|
13
|
+
{
|
|
17
14
|
buttonShape: shape,
|
|
18
15
|
"aria-disabled": disabled,
|
|
19
16
|
disabled,
|
|
@@ -22,20 +19,11 @@ const DSChip = (props) => {
|
|
|
22
19
|
role: "button",
|
|
23
20
|
...restGlobals,
|
|
24
21
|
children: [
|
|
25
|
-
shape === CHIP_SHAPES.ROUND ? /* @__PURE__ */ jsx(StyledRoundShape, {
|
|
26
|
-
|
|
27
|
-
size,
|
|
28
|
-
children: /* @__PURE__ */ jsx(Icon, {})
|
|
29
|
-
}) : /* @__PURE__ */ jsx(Icon, {}),
|
|
30
|
-
/* @__PURE__ */ jsx(StyledChipLabel, {
|
|
31
|
-
size,
|
|
32
|
-
children: /* @__PURE__ */ jsx(StyledSpanWithEllipsis, {
|
|
33
|
-
children: label
|
|
34
|
-
})
|
|
35
|
-
})
|
|
22
|
+
shape === CHIP_SHAPES.ROUND ? /* @__PURE__ */ jsx(StyledRoundShape, { disabled, size, children: /* @__PURE__ */ jsx(Icon, {}) }) : /* @__PURE__ */ jsx(Icon, {}),
|
|
23
|
+
/* @__PURE__ */ jsx(StyledChipLabel, { size, children: /* @__PURE__ */ jsx(StyledSpanWithEllipsis, { children: label }) })
|
|
36
24
|
]
|
|
37
|
-
}
|
|
38
|
-
});
|
|
25
|
+
}
|
|
26
|
+
) });
|
|
39
27
|
};
|
|
40
28
|
DSChip.propTypes = DSChipPropTypes;
|
|
41
29
|
DSChip.displayName = "DSChip";
|
package/dist/esm/DSChip.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSChip.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { useConfig } from './config/useConfig';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles';\nimport { CHIP_SHAPES } from './constants';\nimport type { DSChipT } from './react-desc-prop-types';\nimport { DSChipPropTypes } from './react-desc-prop-types';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = useConfig(props);\n\n const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;\n\n return (\n <StyledWrapper buttonShape={shape} buttonSize={size} className={className} {...xStyledAttrs}>\n <StyledChip\n buttonShape={shape}\n aria-disabled={disabled}\n disabled={disabled}\n ref={innerRef}\n selected={selected}\n role=\"button\"\n {...restGlobals}\n >\n {shape === CHIP_SHAPES.ROUND ? (\n <StyledRoundShape disabled={disabled} size={size}>\n <Icon />\n </StyledRoundShape>\n ) : (\n <Icon />\n )}\n <StyledChipLabel size={size}>\n <StyledSpanWithEllipsis>{label}</StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\n </StyledWrapper>\n );\n};\n\nDSChip.propTypes = DSChipPropTypes;\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypes;\n\nexport { DSChip, DSChipWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACejB,SAWM,KAXN;AAdN,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,YAAY,iBAAiB,eAAe,kBAAkB,8BAA8B;AACrG,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAEhC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO,aAAa,aAAa,IAAI,UAAU,KAAK;AAEzG,QAAM,EAAE,OAAO,aAAa,MAAM,UAAU,cAAc,YAAY,IAAI;AAE1E,SACE,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACejB,SAWM,KAXN;AAdN,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,YAAY,iBAAiB,eAAe,kBAAkB,8BAA8B;AACrG,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAEhC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO,aAAa,aAAa,IAAI,UAAU,KAAK;AAEzG,QAAM,EAAE,OAAO,aAAa,MAAM,UAAU,cAAc,YAAY,IAAI;AAE1E,SACE,oBAAC,iBAAc,aAAa,OAAO,YAAY,MAAM,WAAuB,GAAG,cAC7E;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAe;AAAA,MACf;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,kBAAU,YAAY,QACrB,oBAAC,oBAAiB,UAAoB,MACpC,8BAAC,QAAK,GACR,IAEA,oBAAC,QAAK;AAAA,QAER,oBAAC,mBAAgB,MACf,8BAAC,0BAAwB,iBAAM,GACjC;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,mBAAmB,SAAS,MAAM;AACxC,iBAAiB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,10 +5,11 @@ import {
|
|
|
5
5
|
useValidateTypescriptPropTypes,
|
|
6
6
|
useGetXstyledProps
|
|
7
7
|
} from "@elliemae/ds-utilities";
|
|
8
|
+
import { DSChipName } from "../exported_related";
|
|
8
9
|
import { defaultProps, DSChipPropTypes } from "../react-desc-prop-types";
|
|
9
10
|
const useConfig = (props) => {
|
|
10
11
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
11
|
-
useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes);
|
|
12
|
+
useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes, DSChipName);
|
|
12
13
|
const globalAttrs = useGetGlobalAttributes(propsWithDefault);
|
|
13
14
|
const xStyledAttrs = useGetXstyledProps(propsWithDefault);
|
|
14
15
|
return { ...propsWithDefault, globalAttrs, xStyledAttrs };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useConfig.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport type { DSChipT } from '../react-desc-prop-types';\nimport { defaultProps, DSChipPropTypes } from '../react-desc-prop-types';\n\nexport const useConfig = (props: DSChipT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSChipT.InternalProps>>(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes);\n const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n return { ...propsWithDefault, globalAttrs, xStyledAttrs };\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { DSChipName } from '../exported_related';\nimport type { DSChipT } from '../react-desc-prop-types';\nimport { defaultProps, DSChipPropTypes } from '../react-desc-prop-types';\n\nexport const useConfig = (props: DSChipT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSChipT.InternalProps>>(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes, DSChipName);\n const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n return { ...propsWithDefault, globalAttrs, xStyledAttrs };\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAE3B,SAAS,cAAc,uBAAuB;AAEvC,MAAM,YAAY,CAAC,UAAyB;AACjD,QAAM,mBAAmB,6BAA8D,OAAO,YAAY;AAE1G,iCAA+B,kBAAkB,iBAAiB,UAAU;AAC5E,QAAM,cAAc,uBAAuB,gBAAgB;AAC3D,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,SAAO,EAAE,GAAG,kBAAkB,aAAa,aAAa;AAC1D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported_related/theming.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSChipName = '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSChipName = 'DSChip';\n\nexport const DSChipSlots = {\n BUTTON: 'root',\n LABEL: 'label',\n ROUND_SHAPE: 'round-shape',\n CHILDREN_WRAPPER: 'children-wrapper',\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,aAAa;AAEnB,MAAM,cAAc;AAAA,EACzB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,kBAAkB;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled, css,
|
|
2
|
+
import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
3
|
import { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from "./constants";
|
|
4
4
|
import { DSChipName, DSChipSlots } from "./exported_related";
|
|
5
5
|
const getChipSize = (shape) => shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes;
|
|
@@ -10,7 +10,7 @@ const styledChipSelectedCss = css`
|
|
|
10
10
|
color: ${({ theme }) => theme.colors.brand[800]};
|
|
11
11
|
background-color: ${({ theme }) => theme.colors.brand[200]};
|
|
12
12
|
|
|
13
|
-
.
|
|
13
|
+
.DSIcon-svg {
|
|
14
14
|
fill: ${({ theme }) => theme.colors.brand[800]};
|
|
15
15
|
}
|
|
16
16
|
|
|
@@ -43,10 +43,11 @@ const StyledSpanWithEllipsis = styled.span`
|
|
|
43
43
|
text-overflow: ellipsis;
|
|
44
44
|
max-width: 100%;
|
|
45
45
|
`;
|
|
46
|
-
const StyledWrapper = styled(
|
|
46
|
+
const StyledWrapper = styled("div")`
|
|
47
47
|
display: flex;
|
|
48
48
|
height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};
|
|
49
49
|
width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
|
|
50
|
+
${xStyledCommonProps}
|
|
50
51
|
`;
|
|
51
52
|
const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON })`
|
|
52
53
|
position: relative;
|
|
@@ -78,13 +79,13 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
|
|
|
78
79
|
pointer-events: none;
|
|
79
80
|
}
|
|
80
81
|
|
|
81
|
-
& .
|
|
82
|
+
& .DSIcon-root .DSIcon-svg {
|
|
82
83
|
fill: ${({ theme }) => theme.colors.brand[600]};
|
|
83
84
|
height: 24px;
|
|
84
85
|
width: 24px;
|
|
85
86
|
}
|
|
86
87
|
|
|
87
|
-
& .
|
|
88
|
+
& .DSIcon-root {
|
|
88
89
|
height: 24px;
|
|
89
90
|
width: 24px;
|
|
90
91
|
}
|
|
@@ -110,7 +111,7 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
|
|
|
110
111
|
}
|
|
111
112
|
color: ${({ theme }) => theme.colors.brand[800]};
|
|
112
113
|
background-color: ${({ theme }) => theme.colors.brand[200]};
|
|
113
|
-
.
|
|
114
|
+
.DSIcon-svg {
|
|
114
115
|
fill: ${({ theme }) => theme.colors.brand[800]};
|
|
115
116
|
}
|
|
116
117
|
}
|
|
@@ -125,7 +126,7 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
|
|
|
125
126
|
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
126
127
|
cursor: not-allowed;
|
|
127
128
|
|
|
128
|
-
.
|
|
129
|
+
.DSIcon-svg {
|
|
129
130
|
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
130
131
|
}
|
|
131
132
|
|
|
@@ -145,7 +146,7 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
|
|
|
145
146
|
}
|
|
146
147
|
}
|
|
147
148
|
|
|
148
|
-
&:hover .
|
|
149
|
+
&:hover .DSIcon-svg {
|
|
149
150
|
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
150
151
|
}
|
|
151
152
|
}
|
|
@@ -155,7 +156,7 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
|
|
|
155
156
|
const disabledRoundShape = css`
|
|
156
157
|
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
157
158
|
|
|
158
|
-
& .
|
|
159
|
+
& .DSIcon-root .DSIcon-svg {
|
|
159
160
|
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
160
161
|
}
|
|
161
162
|
`;
|
|
@@ -172,7 +173,7 @@ const StyledRoundShape = styled("div", {
|
|
|
172
173
|
justify-content: center;
|
|
173
174
|
margin-top: ${({ size }) => size === CHIP_SIZES.L ? "5px" : "10px"};
|
|
174
175
|
|
|
175
|
-
& .
|
|
176
|
+
& .DSIcon-root .DSIcon-svg {
|
|
176
177
|
fill: #fff;
|
|
177
178
|
height: 24px;
|
|
178
179
|
width: 24px;
|
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,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes';\nimport { DSChipName, DSChipSlots } from './exported_related';\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\nconst styledChipSelectedCss = css`\n & > div:first-child {\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-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[800]};\n }\n }\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.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')} 6px 6px 6px;\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.span`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\n display: flex;\n height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0;\n padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: #fff;\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\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\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n height: 24px;\n width: 24px;\n }\n\n & .DSIcon-root {\n height: 24px;\n width: 24px;\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n\n ${StyledChipLabel} {\n text-align: left;\n }\n\n ${StyledSpanWithEllipsis} {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n }\n }\n\n &:hover {\n & > div:first-child {\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 border-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:disabled {\n color: ${({ theme }) => theme.colors.neutral[500]};\n cursor: not-allowed;\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n\n &:focus,\n &:hover {\n & > div:first-child {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: #fff;\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\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: DSChipSlots.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 margin-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\n\n & .DSIcon-root .DSIcon-svg {\n fill: #fff;\n height: 24px;\n width: 24px;\n }\n\n ${({ disabled }) => disabled && disabledRoundShape}\n`;\n\nexport const StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n width: 100%;\n height: 100%;\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-chip",
|
|
3
|
-
"version": "3.12.0-rc.
|
|
3
|
+
"version": "3.12.0-rc.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Chip",
|
|
6
6
|
"files": [
|
|
@@ -63,19 +63,19 @@
|
|
|
63
63
|
"indent": 4
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@elliemae/ds-system": "3.12.0-rc.
|
|
67
|
-
"@elliemae/ds-utilities": "3.12.0-rc.
|
|
66
|
+
"@elliemae/ds-system": "3.12.0-rc.10",
|
|
67
|
+
"@elliemae/ds-utilities": "3.12.0-rc.10"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
|
-
"@elliemae/ds-icons": "3.12.0-rc.0",
|
|
71
70
|
"@testing-library/jest-dom": "~5.16.4",
|
|
72
71
|
"@testing-library/react": "~12.1.3",
|
|
73
|
-
"styled-components": "~5.3.
|
|
72
|
+
"styled-components": "~5.3.6",
|
|
73
|
+
"@elliemae/ds-icons": "3.12.0-rc.10"
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {
|
|
76
76
|
"react": "^17.0.2",
|
|
77
77
|
"react-dom": "^17.0.2",
|
|
78
|
-
"styled-components": "
|
|
78
|
+
"styled-components": "~5.3.6"
|
|
79
79
|
},
|
|
80
80
|
"publishConfig": {
|
|
81
81
|
"access": "public",
|