@integrigo/integrigo-ui 1.6.16-d → 1.6.16-f
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/index.esm.js +1 -1
- package/lib/index.js +1 -1
- package/lib/src/components/atoms/Chip/Chip.d.ts +5 -18
- package/lib/src/components/atoms/Divider/Divider.stories.d.ts +4 -4
- package/lib/src/components/atoms/Dot/Dot.stories.d.ts +3 -3
- package/lib/src/components/atoms/Icon/Icon.d.ts +1 -0
- package/lib/src/components/atoms/Icon/Icon.stories.d.ts +2 -2
- package/lib/src/components/atoms/Icon/icons/CalendarSlash.d.ts +3 -0
- package/lib/src/components/molecules/Checkbox/Checkbox.stories.d.ts +4 -4
- package/lib/src/components/molecules/Input/Input.d.ts +1 -1
- package/lib/src/components/molecules/Input/Input.stories.d.ts +9 -9
- package/lib/src/components/molecules/Radio/Radio.stories.d.ts +4 -4
- package/package.json +1 -1
- package/src/components/atoms/Chip/Chip.test.tsx +11 -9
- package/src/components/atoms/Chip/Chip.tsx +91 -79
- package/src/components/atoms/Icon/Icon.tsx +2 -0
- package/src/components/atoms/Icon/icons/CalendarSlash.tsx +9 -0
- package/src/components/molecules/Profile/Profile.tsx +1 -1
@@ -1,105 +1,95 @@
|
|
1
|
-
import { MouseEvent, FC } from
|
2
|
-
import styled from
|
3
|
-
import { Icon, IconType } from
|
1
|
+
import { MouseEvent, FC } from "react";
|
2
|
+
import styled from "styled-components";
|
3
|
+
import { Icon, IconType } from "../Icon";
|
4
4
|
|
5
5
|
type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
|
6
6
|
|
7
7
|
export interface ChipProps {
|
8
|
-
iconLeft?: IconType
|
9
|
-
iconRight?: IconType
|
10
|
-
size?:
|
11
|
-
label:
|
12
|
-
variant?:
|
8
|
+
iconLeft?: IconType;
|
9
|
+
iconRight?: IconType;
|
10
|
+
size?: 's' | 'm' | 'l' | 'xl';
|
11
|
+
label: React.ReactNode;
|
12
|
+
variant?: 'transparent' | 'white' | 'primary' | 'secondary' | 'grey';
|
13
13
|
onClick?: OnClickFunctionType;
|
14
14
|
}
|
15
15
|
|
16
|
-
export enum ChipVariant {
|
17
|
-
transparent = 'transparent',
|
18
|
-
white = 'white',
|
19
|
-
primary = 'primary',
|
20
|
-
secondary = 'secondary',
|
21
|
-
grey = 'grey'
|
22
|
-
}
|
23
|
-
|
24
|
-
export enum ChipSize {
|
25
|
-
xl = 'xl',
|
26
|
-
l = 'l',
|
27
|
-
m = 'm',
|
28
|
-
s = 's',
|
29
|
-
}
|
30
|
-
|
31
16
|
const sizeVariant = {
|
32
17
|
xl: {
|
33
18
|
iconSize: {
|
34
19
|
width: 25,
|
35
20
|
height: 25,
|
36
21
|
},
|
37
|
-
gap:
|
38
|
-
paddingY:
|
39
|
-
paddingX:
|
40
|
-
border:
|
41
|
-
fontSize:
|
42
|
-
lineHeight:
|
22
|
+
gap: "12.5px",
|
23
|
+
paddingY: "12.5px",
|
24
|
+
paddingX: "17.5px",
|
25
|
+
border: "2px",
|
26
|
+
fontSize: "20px",
|
27
|
+
lineHeight: "30px",
|
43
28
|
},
|
44
29
|
l: {
|
45
30
|
iconSize: {
|
46
31
|
width: 20,
|
47
32
|
height: 20,
|
48
33
|
},
|
49
|
-
gap:
|
50
|
-
paddingY:
|
51
|
-
paddingX:
|
52
|
-
border:
|
53
|
-
fontSize:
|
54
|
-
lineHeight:
|
34
|
+
gap: "10px",
|
35
|
+
paddingY: "10px",
|
36
|
+
paddingX: "14px",
|
37
|
+
border: "2px",
|
38
|
+
fontSize: "16px",
|
39
|
+
lineHeight: "24px",
|
55
40
|
},
|
56
41
|
m: {
|
57
42
|
iconSize: {
|
58
43
|
width: 15,
|
59
44
|
height: 15,
|
60
45
|
},
|
61
|
-
gap:
|
62
|
-
paddingY:
|
63
|
-
paddingX:
|
64
|
-
border:
|
65
|
-
fontSize:
|
66
|
-
lineHeight:
|
46
|
+
gap: "7.5px",
|
47
|
+
paddingY: "7.5px",
|
48
|
+
paddingX: "10.5px",
|
49
|
+
border: "2px",
|
50
|
+
fontSize: "12px",
|
51
|
+
lineHeight: "18px",
|
67
52
|
},
|
68
53
|
s: {
|
69
54
|
iconSize: {
|
70
55
|
width: 10,
|
71
56
|
height: 10,
|
72
57
|
},
|
73
|
-
gap:
|
74
|
-
paddingY:
|
75
|
-
paddingX:
|
76
|
-
border:
|
77
|
-
fontSize:
|
78
|
-
lineHeight:
|
58
|
+
gap: "5px",
|
59
|
+
paddingY: "5px",
|
60
|
+
paddingX: "7px",
|
61
|
+
border: "1.5px",
|
62
|
+
fontSize: "8px",
|
63
|
+
lineHeight: "12px",
|
79
64
|
},
|
80
65
|
};
|
81
66
|
|
82
67
|
const colorVariant = {
|
83
68
|
primary: {
|
84
|
-
fontColor:
|
69
|
+
fontColor: "var(--shades-of-grey-0)",
|
85
70
|
},
|
86
71
|
secondary: {
|
87
|
-
fontColor:
|
72
|
+
fontColor: "var(--color-orange)",
|
88
73
|
},
|
89
74
|
transparent: {
|
90
|
-
fontColor:
|
75
|
+
fontColor: "var(--shades-of-grey-100)",
|
91
76
|
},
|
92
77
|
white: {
|
93
|
-
fontColor:
|
78
|
+
fontColor: "var(--shades-of-grey-100);",
|
94
79
|
},
|
95
80
|
grey: {
|
96
|
-
fontColor:
|
97
|
-
}
|
81
|
+
fontColor: "var(--shades-of-grey-100)",
|
82
|
+
},
|
98
83
|
};
|
99
84
|
|
100
85
|
export const Chip: FC<ChipProps> = (props: ChipProps) => {
|
101
86
|
const {
|
102
|
-
iconLeft,
|
87
|
+
iconLeft,
|
88
|
+
iconRight,
|
89
|
+
label,
|
90
|
+
size = 'm',
|
91
|
+
variant = 'primary',
|
92
|
+
onClick,
|
103
93
|
} = props;
|
104
94
|
|
105
95
|
return (
|
@@ -127,16 +117,18 @@ export const Chip: FC<ChipProps> = (props: ChipProps) => {
|
|
127
117
|
);
|
128
118
|
};
|
129
119
|
|
130
|
-
const getVariantStyles = (variant:
|
120
|
+
const getVariantStyles = (variant: ChipProps['variant'], clickable: boolean): string => {
|
131
121
|
switch (variant) {
|
132
|
-
case
|
122
|
+
case 'secondary':
|
133
123
|
return `
|
134
124
|
background-color: var(--color-white);
|
135
125
|
opacity: 0.9;
|
136
126
|
border-color: var(--color-orange);
|
137
127
|
border-style: solid;
|
138
128
|
|
139
|
-
${
|
129
|
+
${
|
130
|
+
clickable &&
|
131
|
+
`
|
140
132
|
cursor: pointer;
|
141
133
|
|
142
134
|
&:hover {
|
@@ -146,11 +138,14 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
|
|
146
138
|
&:active {
|
147
139
|
opacity: 0.65;
|
148
140
|
}
|
149
|
-
`
|
141
|
+
`
|
142
|
+
}
|
150
143
|
`;
|
151
|
-
case
|
144
|
+
case 'transparent':
|
152
145
|
return `
|
153
|
-
${
|
146
|
+
${
|
147
|
+
clickable &&
|
148
|
+
`
|
154
149
|
&:hover {
|
155
150
|
background-color: var(--shades-of-grey-40);
|
156
151
|
}
|
@@ -158,13 +153,16 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
|
|
158
153
|
&:active {
|
159
154
|
background-color: var(--shades-of-grey-60);
|
160
155
|
}
|
161
|
-
`
|
156
|
+
`
|
157
|
+
}
|
162
158
|
`;
|
163
|
-
case
|
159
|
+
case 'grey':
|
164
160
|
return `
|
165
161
|
background-color: var(--shades-of-grey-20);
|
166
162
|
|
167
|
-
${
|
163
|
+
${
|
164
|
+
clickable &&
|
165
|
+
`
|
168
166
|
&:hover {
|
169
167
|
background-color: var(--shades-of-grey-40);
|
170
168
|
}
|
@@ -172,15 +170,18 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
|
|
172
170
|
&:active {
|
173
171
|
background-color: var(--shades-of-grey-40);
|
174
172
|
}
|
175
|
-
`
|
173
|
+
`
|
174
|
+
}
|
176
175
|
`;
|
177
|
-
case
|
176
|
+
case 'white':
|
178
177
|
return `
|
179
178
|
background-color: var(--color-white);
|
180
179
|
border-color: var(--shades-of-grey-40);
|
181
180
|
border-style: solid;
|
182
181
|
|
183
|
-
${
|
182
|
+
${
|
183
|
+
clickable &&
|
184
|
+
`
|
184
185
|
&:hover {
|
185
186
|
background-color: var(--shades-of-grey-20);
|
186
187
|
}
|
@@ -188,16 +189,19 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
|
|
188
189
|
&:active {
|
189
190
|
border-color: var(--shades-of-grey-100);
|
190
191
|
}
|
191
|
-
`
|
192
|
+
`
|
193
|
+
}
|
192
194
|
`;
|
193
|
-
case
|
195
|
+
case 'primary':
|
194
196
|
default:
|
195
197
|
return `
|
196
198
|
background-color: var(--color-orange);
|
197
199
|
border-color: var(--color-orange);
|
198
200
|
border-style: solid;
|
199
201
|
|
200
|
-
${
|
202
|
+
${
|
203
|
+
clickable &&
|
204
|
+
`
|
201
205
|
&:hover {
|
202
206
|
opacity: 0.8;
|
203
207
|
}
|
@@ -205,27 +209,35 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
|
|
205
209
|
&:active {
|
206
210
|
opacity: 0.65;
|
207
211
|
}
|
208
|
-
`
|
212
|
+
`
|
213
|
+
}
|
209
214
|
`;
|
210
215
|
}
|
211
216
|
};
|
212
217
|
|
213
|
-
Chip.displayName =
|
218
|
+
Chip.displayName = "Chip";
|
214
219
|
|
215
|
-
const ChipWrapper = styled.div<{
|
220
|
+
const ChipWrapper = styled.div<{
|
221
|
+
size: Exclude<ChipProps['size'], undefined>;
|
222
|
+
variant: Exclude<ChipProps['variant'], undefined>;
|
223
|
+
onClick?: OnClickFunctionType;
|
224
|
+
}>`
|
216
225
|
border-radius: 100px;
|
217
226
|
display: flex;
|
218
227
|
justify-content: center;
|
219
228
|
width: min-content;
|
220
|
-
|
229
|
+
|
221
230
|
${(p) => `
|
222
231
|
border-width: ${sizeVariant[p.size].border};
|
223
232
|
padding: ${sizeVariant[p.size].paddingY} ${sizeVariant[p.size].paddingX};
|
224
233
|
color: ${colorVariant[p.variant].fontColor};
|
225
|
-
${getVariantStyles(p.variant, typeof p.onClick ===
|
226
|
-
${
|
234
|
+
${getVariantStyles(p.variant, typeof p.onClick === "function")}
|
235
|
+
${
|
236
|
+
typeof p.onClick === "function" &&
|
237
|
+
`
|
227
238
|
cursor: pointer;
|
228
|
-
`
|
239
|
+
`
|
240
|
+
}
|
229
241
|
`}
|
230
242
|
`;
|
231
243
|
|
@@ -234,10 +246,10 @@ const IconWrapper = styled.span`
|
|
234
246
|
align-items: center;
|
235
247
|
`;
|
236
248
|
|
237
|
-
IconWrapper.displayName =
|
249
|
+
IconWrapper.displayName = "IconWrapper";
|
238
250
|
|
239
251
|
const Text = styled.span<{
|
240
|
-
size:
|
252
|
+
size: Exclude<ChipProps['size'], undefined>;
|
241
253
|
}>`
|
242
254
|
color: inherit;
|
243
255
|
font-weight: bold;
|
@@ -248,4 +260,4 @@ const Text = styled.span<{
|
|
248
260
|
`}
|
249
261
|
`;
|
250
262
|
|
251
|
-
Text.displayName =
|
263
|
+
Text.displayName = "Text";
|
@@ -6,6 +6,7 @@ import ArrowLeft from "./icons/ArrowLeft";
|
|
6
6
|
import ArrowRight from "./icons/ArrowRight";
|
7
7
|
import Bars from "./icons/Bars";
|
8
8
|
import Bell from "./icons/Bell";
|
9
|
+
import CalendarSlash from "./icons/CalendarSlash";
|
9
10
|
import CheckCircle from "./icons/CheckCircle";
|
10
11
|
import CheckSquare from "./icons/CheckSquare";
|
11
12
|
import ClipboardNotes from "./icons/ClipboardNotes";
|
@@ -43,6 +44,7 @@ export const iconHashMap = {
|
|
43
44
|
"arrow-right": ArrowRight,
|
44
45
|
bars: Bars,
|
45
46
|
bell: Bell,
|
47
|
+
"calendar-slash": CalendarSlash,
|
46
48
|
"check-circle": CheckCircle,
|
47
49
|
"check-square": CheckSquare,
|
48
50
|
"clipboad-notes": ClipboardNotes,
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import React from "react";
|
2
|
+
|
3
|
+
const CalendarSlash: React.FCS = (props) => (
|
4
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
|
5
|
+
<path d="M11.6599 7H14.9999V8C14.9999 8.26522 15.1053 8.51957 15.2928 8.70711C15.4804 8.89465 15.7347 9 15.9999 9C16.2652 9 16.5195 8.89465 16.707 8.70711C16.8946 8.51957 16.9999 8.26522 16.9999 8V7H17.9999C18.2652 7 18.5195 7.10536 18.707 7.2929C18.8946 7.48043 18.9999 7.73479 18.9999 8V11H17.6599C17.3947 11 17.1404 11.1054 16.9528 11.2929C16.7653 11.4804 16.6599 11.7348 16.6599 12C16.6599 12.2652 16.7653 12.5196 16.9528 12.7071C17.1404 12.8946 17.3947 13 17.6599 13H18.9999V14.34C18.9999 14.6052 19.1053 14.8596 19.2928 15.0471C19.4804 15.2346 19.7347 15.34 19.9999 15.34C20.2652 15.34 20.5195 15.2346 20.707 15.0471C20.8946 14.8596 20.9999 14.6052 20.9999 14.34V8C20.9999 7.20435 20.6839 6.44129 20.1213 5.87868C19.5587 5.31607 18.7956 5 17.9999 5H16.9999V4C16.9999 3.73479 16.8946 3.48043 16.707 3.2929C16.5195 3.10536 16.2652 3 15.9999 3C15.7347 3 15.4804 3.10536 15.2928 3.2929C15.1053 3.48043 14.9999 3.73479 14.9999 4V5H11.6599C11.3947 5 11.1404 5.10536 10.9528 5.2929C10.7653 5.48043 10.6599 5.73479 10.6599 6C10.6599 6.26522 10.7653 6.51957 10.9528 6.70711C11.1404 6.89465 11.3947 7 11.6599 7ZM21.7099 20.29L20.1099 18.69L3.70994 2.29C3.6167 2.19676 3.50601 2.1228 3.38419 2.07234C3.26237 2.02188 3.1318 1.99591 2.99994 1.99591C2.86808 1.99591 2.73751 2.02188 2.61569 2.07234C2.49387 2.1228 2.38318 2.19676 2.28994 2.29C2.10164 2.47831 1.99585 2.7337 1.99585 3C1.99585 3.2663 2.10164 3.5217 2.28994 3.71L4.19994 5.61C3.8287 5.88843 3.52711 6.24918 3.31889 6.66389C3.11067 7.0786 3.00149 7.53596 2.99994 8V18C2.99994 18.7957 3.31601 19.5587 3.87862 20.1213C4.44123 20.6839 5.20429 21 5.99994 21H17.9999C18.4469 20.9974 18.8877 20.8949 19.2899 20.7L20.2899 21.7C20.3829 21.7937 20.4935 21.8681 20.6154 21.9189C20.7372 21.9697 20.8679 21.9958 20.9999 21.9958C21.132 21.9958 21.2627 21.9697 21.3845 21.9189C21.5064 21.8681 21.617 21.7937 21.7099 21.7C21.8962 21.5126 22.0007 21.2592 22.0007 20.995C22.0007 20.7308 21.8962 20.4774 21.7099 20.29ZM4.99994 8C5.00207 7.7962 5.06642 7.59791 5.18438 7.4317C5.30234 7.26549 5.46827 7.13929 5.65994 7.07L9.58994 11H4.99994V8ZM5.99994 19C5.73472 19 5.48037 18.8946 5.29283 18.7071C5.1053 18.5196 4.99994 18.2652 4.99994 18V13H11.5899L17.5899 19H5.99994Z" />
|
6
|
+
</svg>
|
7
|
+
);
|
8
|
+
|
9
|
+
export default CalendarSlash;
|