@elliemae/ds-chip 3.16.0-next.16 → 3.16.0-next.18
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/styles.js +55 -55
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/styles.js +55 -55
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/styles.d.ts +1 -1
- package/package.json +5 -5
package/dist/cjs/styles.js
CHANGED
|
@@ -41,27 +41,6 @@ var import_ds_system = require("@elliemae/ds-system");
|
|
|
41
41
|
var import_constants = require("./constants.js");
|
|
42
42
|
var import_exported_related = require("./exported_related/index.js");
|
|
43
43
|
const getChipSize = (shape) => shape === import_constants.CHIP_SHAPES.ROUND ? import_constants.shapeSizes : import_constants.basicSizes;
|
|
44
|
-
const styledChipSelectedCss = import_ds_system.css`
|
|
45
|
-
& > div:first-child {
|
|
46
|
-
background-color: ${({ theme }) => theme.colors.brand[800]};
|
|
47
|
-
}
|
|
48
|
-
color: ${({ theme }) => theme.colors.brand[800]};
|
|
49
|
-
background-color: ${({ theme }) => theme.colors.brand[200]};
|
|
50
|
-
|
|
51
|
-
.DSIcon-svg {
|
|
52
|
-
fill: ${({ theme }) => theme.colors.brand[800]};
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
&:before {
|
|
56
|
-
border: 1px solid ${({ theme }) => theme.colors.brand[600]};
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&:focus {
|
|
60
|
-
&:before {
|
|
61
|
-
border: 2px solid ${({ theme }) => theme.colors.brand[800]};
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
`;
|
|
65
44
|
const StyledChipLabel = (0, import_ds_system.styled)("div", { name: import_exported_related.DSChipName, slot: import_exported_related.DSChipSlots.LABEL })`
|
|
66
45
|
font-size: ${({ theme }) => theme.fontSizes.label[200]};
|
|
67
46
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
@@ -87,6 +66,51 @@ const StyledWrapper = (0, import_ds_system.styled)("div")`
|
|
|
87
66
|
width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
|
|
88
67
|
${import_ds_system.xStyledCommonProps}
|
|
89
68
|
`;
|
|
69
|
+
const disabledRoundShape = import_ds_system.css`
|
|
70
|
+
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
71
|
+
|
|
72
|
+
& .DSIcon-root .DSIcon-svg {
|
|
73
|
+
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
74
|
+
}
|
|
75
|
+
`;
|
|
76
|
+
const StyledRoundShape = (0, import_ds_system.styled)("div", {
|
|
77
|
+
name: import_exported_related.DSChipName,
|
|
78
|
+
slot: import_exported_related.DSChipSlots.ROUND_SHAPE
|
|
79
|
+
})`
|
|
80
|
+
background-color: ${({ theme }) => theme.colors.brand[600]};
|
|
81
|
+
width: ${({ size }) => size === import_constants.CHIP_SIZES.L ? import_constants.roundShapeLarge : import_constants.roundShapeSmall};
|
|
82
|
+
height: ${({ size }) => size === import_constants.CHIP_SIZES.L ? import_constants.roundShapeLarge : import_constants.roundShapeSmall};
|
|
83
|
+
border-radius: 50px;
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
margin-top: ${({ size }) => size === import_constants.CHIP_SIZES.L ? "5px" : "10px"};
|
|
88
|
+
`;
|
|
89
|
+
const StyledChildrenWrapper = (0, import_ds_system.styled)("div", { name: import_exported_related.DSChipName, slot: import_exported_related.DSChipSlots.CHILDREN_WRAPPER })`
|
|
90
|
+
width: 100%;
|
|
91
|
+
height: 100%;
|
|
92
|
+
`;
|
|
93
|
+
const styledChipSelectedCss = import_ds_system.css`
|
|
94
|
+
${StyledRoundShape} {
|
|
95
|
+
background-color: ${({ theme }) => theme.colors.brand[800]};
|
|
96
|
+
}
|
|
97
|
+
color: ${({ theme }) => theme.colors.brand[800]};
|
|
98
|
+
background-color: ${({ theme }) => theme.colors.brand[200]};
|
|
99
|
+
|
|
100
|
+
.DSIcon-svg {
|
|
101
|
+
fill: ${({ theme }) => theme.colors.brand[800]};
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&:before {
|
|
105
|
+
border: 1px solid ${({ theme }) => theme.colors.brand[600]};
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&:focus {
|
|
109
|
+
&:before {
|
|
110
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[800]};
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
`;
|
|
90
114
|
const StyledChip = (0, import_ds_system.styled)("button", { name: import_exported_related.DSChipName, slot: import_exported_related.DSChipSlots.BUTTON })`
|
|
91
115
|
position: relative;
|
|
92
116
|
display: flex;
|
|
@@ -104,6 +128,14 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
|
|
|
104
128
|
cursor: pointer;
|
|
105
129
|
outline: none;
|
|
106
130
|
|
|
131
|
+
${StyledRoundShape} {
|
|
132
|
+
& .DSIcon-root .DSIcon-svg {
|
|
133
|
+
fill: #fff;
|
|
134
|
+
height: 24px;
|
|
135
|
+
width: 24px;
|
|
136
|
+
}
|
|
137
|
+
${({ disabled }) => disabled && disabledRoundShape}
|
|
138
|
+
}
|
|
107
139
|
&:before {
|
|
108
140
|
content: '';
|
|
109
141
|
position: absolute;
|
|
@@ -144,7 +176,7 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
|
|
|
144
176
|
}
|
|
145
177
|
|
|
146
178
|
&:hover {
|
|
147
|
-
|
|
179
|
+
${StyledRoundShape} {
|
|
148
180
|
background-color: ${({ theme }) => theme.colors.brand[800]};
|
|
149
181
|
}
|
|
150
182
|
color: ${({ theme }) => theme.colors.brand[800]};
|
|
@@ -170,7 +202,7 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
|
|
|
170
202
|
|
|
171
203
|
&:focus,
|
|
172
204
|
&:hover {
|
|
173
|
-
|
|
205
|
+
${StyledRoundShape} {
|
|
174
206
|
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
175
207
|
}
|
|
176
208
|
background-color: #fff;
|
|
@@ -191,36 +223,4 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
|
|
|
191
223
|
|
|
192
224
|
${({ selected }) => !selected ? "" : styledChipSelectedCss}
|
|
193
225
|
`;
|
|
194
|
-
const disabledRoundShape = import_ds_system.css`
|
|
195
|
-
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
196
|
-
|
|
197
|
-
& .DSIcon-root .DSIcon-svg {
|
|
198
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
199
|
-
}
|
|
200
|
-
`;
|
|
201
|
-
const StyledRoundShape = (0, import_ds_system.styled)("div", {
|
|
202
|
-
name: import_exported_related.DSChipName,
|
|
203
|
-
slot: import_exported_related.DSChipSlots.ROUND_SHAPE
|
|
204
|
-
})`
|
|
205
|
-
background-color: ${({ theme }) => theme.colors.brand[600]};
|
|
206
|
-
width: ${({ size }) => size === import_constants.CHIP_SIZES.L ? import_constants.roundShapeLarge : import_constants.roundShapeSmall};
|
|
207
|
-
height: ${({ size }) => size === import_constants.CHIP_SIZES.L ? import_constants.roundShapeLarge : import_constants.roundShapeSmall};
|
|
208
|
-
border-radius: 50px;
|
|
209
|
-
display: flex;
|
|
210
|
-
align-items: center;
|
|
211
|
-
justify-content: center;
|
|
212
|
-
margin-top: ${({ size }) => size === import_constants.CHIP_SIZES.L ? "5px" : "10px"};
|
|
213
|
-
|
|
214
|
-
& .DSIcon-root .DSIcon-svg {
|
|
215
|
-
fill: #fff;
|
|
216
|
-
height: 24px;
|
|
217
|
-
width: 24px;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
${({ disabled }) => disabled && disabledRoundShape}
|
|
221
|
-
`;
|
|
222
|
-
const StyledChildrenWrapper = (0, import_ds_system.styled)("div", { name: import_exported_related.DSChipName, slot: import_exported_related.DSChipSlots.CHILDREN_WRAPPER })`
|
|
223
|
-
width: 100%;
|
|
224
|
-
height: 100%;
|
|
225
|
-
`;
|
|
226
226
|
//# sourceMappingURL=styles.js.map
|
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, xStyledCommonProps } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.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\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAChD,uBAAkG;AAElG,8BAAwC;AAaxC,MAAM,cAAc,CAAC,UAAwB,UAAU,6BAAY,QAAQ,8BAAa;
|
|
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.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.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: 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\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\nexport const StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n width: 100%;\n height: 100%;\n`;\n\nconst styledChipSelectedCss = css`\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\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 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 ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: #fff;\n height: 24px;\n width: 24px;\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\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 ${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 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 ${StyledRoundShape} {\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -3,27 +3,6 @@ import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
|
|
|
3
3
|
import { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from "./constants.js";
|
|
4
4
|
import { DSChipName, DSChipSlots } from "./exported_related/index.js";
|
|
5
5
|
const getChipSize = (shape) => shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes;
|
|
6
|
-
const styledChipSelectedCss = css`
|
|
7
|
-
& > div:first-child {
|
|
8
|
-
background-color: ${({ theme }) => theme.colors.brand[800]};
|
|
9
|
-
}
|
|
10
|
-
color: ${({ theme }) => theme.colors.brand[800]};
|
|
11
|
-
background-color: ${({ theme }) => theme.colors.brand[200]};
|
|
12
|
-
|
|
13
|
-
.DSIcon-svg {
|
|
14
|
-
fill: ${({ theme }) => theme.colors.brand[800]};
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
&:before {
|
|
18
|
-
border: 1px solid ${({ theme }) => theme.colors.brand[600]};
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
&:focus {
|
|
22
|
-
&:before {
|
|
23
|
-
border: 2px solid ${({ theme }) => theme.colors.brand[800]};
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
`;
|
|
27
6
|
const StyledChipLabel = styled("div", { name: DSChipName, slot: DSChipSlots.LABEL })`
|
|
28
7
|
font-size: ${({ theme }) => theme.fontSizes.label[200]};
|
|
29
8
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
@@ -49,6 +28,51 @@ const StyledWrapper = styled("div")`
|
|
|
49
28
|
width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
|
|
50
29
|
${xStyledCommonProps}
|
|
51
30
|
`;
|
|
31
|
+
const disabledRoundShape = css`
|
|
32
|
+
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
33
|
+
|
|
34
|
+
& .DSIcon-root .DSIcon-svg {
|
|
35
|
+
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
36
|
+
}
|
|
37
|
+
`;
|
|
38
|
+
const StyledRoundShape = styled("div", {
|
|
39
|
+
name: DSChipName,
|
|
40
|
+
slot: DSChipSlots.ROUND_SHAPE
|
|
41
|
+
})`
|
|
42
|
+
background-color: ${({ theme }) => theme.colors.brand[600]};
|
|
43
|
+
width: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall};
|
|
44
|
+
height: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall};
|
|
45
|
+
border-radius: 50px;
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: center;
|
|
49
|
+
margin-top: ${({ size }) => size === CHIP_SIZES.L ? "5px" : "10px"};
|
|
50
|
+
`;
|
|
51
|
+
const StyledChildrenWrapper = styled("div", { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`
|
|
52
|
+
width: 100%;
|
|
53
|
+
height: 100%;
|
|
54
|
+
`;
|
|
55
|
+
const styledChipSelectedCss = css`
|
|
56
|
+
${StyledRoundShape} {
|
|
57
|
+
background-color: ${({ theme }) => theme.colors.brand[800]};
|
|
58
|
+
}
|
|
59
|
+
color: ${({ theme }) => theme.colors.brand[800]};
|
|
60
|
+
background-color: ${({ theme }) => theme.colors.brand[200]};
|
|
61
|
+
|
|
62
|
+
.DSIcon-svg {
|
|
63
|
+
fill: ${({ theme }) => theme.colors.brand[800]};
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&:before {
|
|
67
|
+
border: 1px solid ${({ theme }) => theme.colors.brand[600]};
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&:focus {
|
|
71
|
+
&:before {
|
|
72
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[800]};
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
`;
|
|
52
76
|
const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON })`
|
|
53
77
|
position: relative;
|
|
54
78
|
display: flex;
|
|
@@ -66,6 +90,14 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
|
|
|
66
90
|
cursor: pointer;
|
|
67
91
|
outline: none;
|
|
68
92
|
|
|
93
|
+
${StyledRoundShape} {
|
|
94
|
+
& .DSIcon-root .DSIcon-svg {
|
|
95
|
+
fill: #fff;
|
|
96
|
+
height: 24px;
|
|
97
|
+
width: 24px;
|
|
98
|
+
}
|
|
99
|
+
${({ disabled }) => disabled && disabledRoundShape}
|
|
100
|
+
}
|
|
69
101
|
&:before {
|
|
70
102
|
content: '';
|
|
71
103
|
position: absolute;
|
|
@@ -106,7 +138,7 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
|
|
|
106
138
|
}
|
|
107
139
|
|
|
108
140
|
&:hover {
|
|
109
|
-
|
|
141
|
+
${StyledRoundShape} {
|
|
110
142
|
background-color: ${({ theme }) => theme.colors.brand[800]};
|
|
111
143
|
}
|
|
112
144
|
color: ${({ theme }) => theme.colors.brand[800]};
|
|
@@ -132,7 +164,7 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
|
|
|
132
164
|
|
|
133
165
|
&:focus,
|
|
134
166
|
&:hover {
|
|
135
|
-
|
|
167
|
+
${StyledRoundShape} {
|
|
136
168
|
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
137
169
|
}
|
|
138
170
|
background-color: #fff;
|
|
@@ -153,38 +185,6 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
|
|
|
153
185
|
|
|
154
186
|
${({ selected }) => !selected ? "" : styledChipSelectedCss}
|
|
155
187
|
`;
|
|
156
|
-
const disabledRoundShape = css`
|
|
157
|
-
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
158
|
-
|
|
159
|
-
& .DSIcon-root .DSIcon-svg {
|
|
160
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
161
|
-
}
|
|
162
|
-
`;
|
|
163
|
-
const StyledRoundShape = styled("div", {
|
|
164
|
-
name: DSChipName,
|
|
165
|
-
slot: DSChipSlots.ROUND_SHAPE
|
|
166
|
-
})`
|
|
167
|
-
background-color: ${({ theme }) => theme.colors.brand[600]};
|
|
168
|
-
width: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall};
|
|
169
|
-
height: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall};
|
|
170
|
-
border-radius: 50px;
|
|
171
|
-
display: flex;
|
|
172
|
-
align-items: center;
|
|
173
|
-
justify-content: center;
|
|
174
|
-
margin-top: ${({ size }) => size === CHIP_SIZES.L ? "5px" : "10px"};
|
|
175
|
-
|
|
176
|
-
& .DSIcon-root .DSIcon-svg {
|
|
177
|
-
fill: #fff;
|
|
178
|
-
height: 24px;
|
|
179
|
-
width: 24px;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
${({ disabled }) => disabled && disabledRoundShape}
|
|
183
|
-
`;
|
|
184
|
-
const StyledChildrenWrapper = styled("div", { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`
|
|
185
|
-
width: 100%;
|
|
186
|
-
height: 100%;
|
|
187
|
-
`;
|
|
188
188
|
export {
|
|
189
189
|
StyledChildrenWrapper,
|
|
190
190
|
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 { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.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\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,YAAY,YAAY,aAAa,YAAY,iBAAiB,uBAAuB;AAElG,SAAS,YAAY,mBAAmB;AAaxC,MAAM,cAAc,CAAC,UAAwB,UAAU,YAAY,QAAQ,aAAa;
|
|
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.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.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: 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\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\nexport const StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n width: 100%;\n height: 100%;\n`;\n\nconst styledChipSelectedCss = css`\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\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 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 ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: #fff;\n height: 24px;\n width: 24px;\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\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 ${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 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 ${StyledRoundShape} {\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -13,6 +13,6 @@ export declare const StyledChipLabel: import("styled-components").StyledComponen
|
|
|
13
13
|
}, never>;
|
|
14
14
|
export declare const StyledSpanWithEllipsis: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
|
|
15
15
|
export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledChipPropsT, never>;
|
|
16
|
-
export declare const StyledChip: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, Pick<StyledChipPropsT, "selected" | "buttonShape">, never>;
|
|
17
16
|
export declare const StyledRoundShape: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledRoundShapePropsT, never>;
|
|
18
17
|
export declare const StyledChildrenWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object, never>;
|
|
18
|
+
export declare const StyledChip: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, Pick<StyledChipPropsT, "selected" | "buttonShape">, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-chip",
|
|
3
|
-
"version": "3.16.0-next.
|
|
3
|
+
"version": "3.16.0-next.18",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Chip",
|
|
6
6
|
"files": [
|
|
@@ -63,15 +63,15 @@
|
|
|
63
63
|
"indent": 4
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@elliemae/ds-props-helpers": "3.16.0-next.
|
|
67
|
-
"@elliemae/ds-system": "3.16.0-next.
|
|
68
|
-
"@elliemae/ds-utilities": "3.16.0-next.
|
|
66
|
+
"@elliemae/ds-props-helpers": "3.16.0-next.18",
|
|
67
|
+
"@elliemae/ds-system": "3.16.0-next.18",
|
|
68
|
+
"@elliemae/ds-utilities": "3.16.0-next.18"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"@testing-library/jest-dom": "~5.16.5",
|
|
72
72
|
"@testing-library/react": "~12.1.3",
|
|
73
73
|
"styled-components": "~5.3.9",
|
|
74
|
-
"@elliemae/ds-icons": "3.16.0-next.
|
|
74
|
+
"@elliemae/ds-icons": "3.16.0-next.18"
|
|
75
75
|
},
|
|
76
76
|
"peerDependencies": {
|
|
77
77
|
"react": "^17.0.2",
|