@toptal/picasso-user-badge 5.0.0 → 5.1.0
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-user-badge",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.1.0",
|
|
4
4
|
"description": "Toptal UI components library - UserBadge",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
},
|
|
23
23
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@toptal/picasso-avatar": "6.
|
|
25
|
+
"@toptal/picasso-avatar": "6.1.0",
|
|
26
26
|
"@toptal/picasso-container": "3.0.0",
|
|
27
27
|
"@toptal/picasso-typography": "4.0.0",
|
|
28
28
|
"@toptal/picasso-utils": "1.0.3",
|
|
@@ -8,20 +8,22 @@ exports[`UserBadge auto center alignment 1`] = `
|
|
|
8
8
|
<div
|
|
9
9
|
class="items-center flex text-[1rem]"
|
|
10
10
|
>
|
|
11
|
-
<div
|
|
12
|
-
class="flex relative"
|
|
13
|
-
>
|
|
11
|
+
<div>
|
|
14
12
|
<div
|
|
15
|
-
class="relative
|
|
13
|
+
class="relative"
|
|
16
14
|
>
|
|
17
15
|
<div
|
|
18
|
-
class="
|
|
16
|
+
class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
|
|
19
17
|
>
|
|
20
|
-
<
|
|
21
|
-
class="
|
|
18
|
+
<div
|
|
19
|
+
class="uppercase text-[1em]"
|
|
22
20
|
>
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
<p
|
|
22
|
+
class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
|
|
23
|
+
>
|
|
24
|
+
JD
|
|
25
|
+
</p>
|
|
26
|
+
</div>
|
|
25
27
|
</div>
|
|
26
28
|
</div>
|
|
27
29
|
</div>
|
|
@@ -51,20 +53,22 @@ exports[`UserBadge custom name 1`] = `
|
|
|
51
53
|
<div
|
|
52
54
|
class="items-start flex text-[1rem]"
|
|
53
55
|
>
|
|
54
|
-
<div
|
|
55
|
-
class="flex relative"
|
|
56
|
-
>
|
|
56
|
+
<div>
|
|
57
57
|
<div
|
|
58
|
-
class="relative
|
|
58
|
+
class="relative"
|
|
59
59
|
>
|
|
60
60
|
<div
|
|
61
|
-
class="
|
|
61
|
+
class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
|
|
62
62
|
>
|
|
63
|
-
<
|
|
64
|
-
class="
|
|
63
|
+
<div
|
|
64
|
+
class="uppercase text-[1em]"
|
|
65
65
|
>
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
<p
|
|
67
|
+
class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
|
|
68
|
+
>
|
|
69
|
+
JD
|
|
70
|
+
</p>
|
|
71
|
+
</div>
|
|
68
72
|
</div>
|
|
69
73
|
</div>
|
|
70
74
|
</div>
|
|
@@ -97,20 +101,22 @@ exports[`UserBadge custom title 1`] = `
|
|
|
97
101
|
<div
|
|
98
102
|
class="items-start flex text-[1rem]"
|
|
99
103
|
>
|
|
100
|
-
<div
|
|
101
|
-
class="flex relative"
|
|
102
|
-
>
|
|
104
|
+
<div>
|
|
103
105
|
<div
|
|
104
|
-
class="relative
|
|
106
|
+
class="relative"
|
|
105
107
|
>
|
|
106
108
|
<div
|
|
107
|
-
class="
|
|
109
|
+
class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
|
|
108
110
|
>
|
|
109
|
-
<
|
|
110
|
-
class="
|
|
111
|
+
<div
|
|
112
|
+
class="uppercase text-[1em]"
|
|
111
113
|
>
|
|
112
|
-
|
|
113
|
-
|
|
114
|
+
<p
|
|
115
|
+
class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
|
|
116
|
+
>
|
|
117
|
+
JD
|
|
118
|
+
</p>
|
|
119
|
+
</div>
|
|
114
120
|
</div>
|
|
115
121
|
</div>
|
|
116
122
|
</div>
|
|
@@ -148,20 +154,22 @@ exports[`UserBadge invert render 1`] = `
|
|
|
148
154
|
<div
|
|
149
155
|
class="items-start flex text-[1rem]"
|
|
150
156
|
>
|
|
151
|
-
<div
|
|
152
|
-
class="flex relative"
|
|
153
|
-
>
|
|
157
|
+
<div>
|
|
154
158
|
<div
|
|
155
|
-
class="relative
|
|
159
|
+
class="relative"
|
|
156
160
|
>
|
|
157
161
|
<div
|
|
158
|
-
class="
|
|
162
|
+
class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
|
|
159
163
|
>
|
|
160
|
-
<
|
|
161
|
-
class="
|
|
164
|
+
<div
|
|
165
|
+
class="uppercase text-[1em]"
|
|
162
166
|
>
|
|
163
|
-
|
|
164
|
-
|
|
167
|
+
<p
|
|
168
|
+
class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
|
|
169
|
+
>
|
|
170
|
+
JD
|
|
171
|
+
</p>
|
|
172
|
+
</div>
|
|
165
173
|
</div>
|
|
166
174
|
</div>
|
|
167
175
|
</div>
|
|
@@ -196,20 +204,22 @@ exports[`UserBadge manual center alignment 1`] = `
|
|
|
196
204
|
<div
|
|
197
205
|
class="items-center flex text-[1rem]"
|
|
198
206
|
>
|
|
199
|
-
<div
|
|
200
|
-
class="flex relative"
|
|
201
|
-
>
|
|
207
|
+
<div>
|
|
202
208
|
<div
|
|
203
|
-
class="relative
|
|
209
|
+
class="relative"
|
|
204
210
|
>
|
|
205
211
|
<div
|
|
206
|
-
class="
|
|
212
|
+
class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
|
|
207
213
|
>
|
|
208
|
-
<
|
|
209
|
-
class="
|
|
214
|
+
<div
|
|
215
|
+
class="uppercase text-[1em]"
|
|
210
216
|
>
|
|
211
|
-
|
|
212
|
-
|
|
217
|
+
<p
|
|
218
|
+
class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
|
|
219
|
+
>
|
|
220
|
+
JD
|
|
221
|
+
</p>
|
|
222
|
+
</div>
|
|
213
223
|
</div>
|
|
214
224
|
</div>
|
|
215
225
|
</div>
|
|
@@ -244,20 +254,22 @@ exports[`UserBadge override auto center alignment 1`] = `
|
|
|
244
254
|
<div
|
|
245
255
|
class="items-start flex text-[1rem]"
|
|
246
256
|
>
|
|
247
|
-
<div
|
|
248
|
-
class="flex relative"
|
|
249
|
-
>
|
|
257
|
+
<div>
|
|
250
258
|
<div
|
|
251
|
-
class="relative
|
|
259
|
+
class="relative"
|
|
252
260
|
>
|
|
253
261
|
<div
|
|
254
|
-
class="
|
|
262
|
+
class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
|
|
255
263
|
>
|
|
256
|
-
<
|
|
257
|
-
class="
|
|
264
|
+
<div
|
|
265
|
+
class="uppercase text-[1em]"
|
|
258
266
|
>
|
|
259
|
-
|
|
260
|
-
|
|
267
|
+
<p
|
|
268
|
+
class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
|
|
269
|
+
>
|
|
270
|
+
JD
|
|
271
|
+
</p>
|
|
272
|
+
</div>
|
|
261
273
|
</div>
|
|
262
274
|
</div>
|
|
263
275
|
</div>
|
|
@@ -287,20 +299,22 @@ exports[`UserBadge renders 1`] = `
|
|
|
287
299
|
<div
|
|
288
300
|
class="items-start flex text-[1rem]"
|
|
289
301
|
>
|
|
290
|
-
<div
|
|
291
|
-
class="flex relative"
|
|
292
|
-
>
|
|
302
|
+
<div>
|
|
293
303
|
<div
|
|
294
|
-
class="relative
|
|
304
|
+
class="relative"
|
|
295
305
|
>
|
|
296
306
|
<div
|
|
297
|
-
class="
|
|
307
|
+
class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
|
|
298
308
|
>
|
|
299
|
-
<
|
|
300
|
-
class="
|
|
309
|
+
<div
|
|
310
|
+
class="uppercase text-[1em]"
|
|
301
311
|
>
|
|
302
|
-
|
|
303
|
-
|
|
312
|
+
<p
|
|
313
|
+
class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
|
|
314
|
+
>
|
|
315
|
+
JD
|
|
316
|
+
</p>
|
|
317
|
+
</div>
|
|
304
318
|
</div>
|
|
305
319
|
</div>
|
|
306
320
|
</div>
|
|
@@ -335,20 +349,22 @@ exports[`UserBadge small size 1`] = `
|
|
|
335
349
|
<div
|
|
336
350
|
class="items-start flex text-[1rem]"
|
|
337
351
|
>
|
|
338
|
-
<div
|
|
339
|
-
class="flex relative"
|
|
340
|
-
>
|
|
352
|
+
<div>
|
|
341
353
|
<div
|
|
342
|
-
class="relative
|
|
354
|
+
class="relative"
|
|
343
355
|
>
|
|
344
356
|
<div
|
|
345
|
-
class="
|
|
357
|
+
class="relative bg-gray text-[1rem] grid place-items w-[5em] h-[5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_1em_100%,_0_calc(100%-1em))]"
|
|
346
358
|
>
|
|
347
|
-
<
|
|
348
|
-
class="
|
|
359
|
+
<div
|
|
360
|
+
class="uppercase text-[2em]"
|
|
349
361
|
>
|
|
350
|
-
|
|
351
|
-
|
|
362
|
+
<p
|
|
363
|
+
class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
|
|
364
|
+
>
|
|
365
|
+
JD
|
|
366
|
+
</p>
|
|
367
|
+
</div>
|
|
352
368
|
</div>
|
|
353
369
|
</div>
|
|
354
370
|
</div>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { UserBadge, Support16, Avatar } from '@toptal/picasso'
|
|
3
|
+
|
|
4
|
+
const Example = () => (
|
|
5
|
+
<div>
|
|
6
|
+
<UserBadge
|
|
7
|
+
name='Jacqueline Roque'
|
|
8
|
+
title='UI specialist'
|
|
9
|
+
avatar={
|
|
10
|
+
<Avatar.Wrapper size='xsmall'>
|
|
11
|
+
<Support16 color='white' />
|
|
12
|
+
</Avatar.Wrapper>
|
|
13
|
+
}
|
|
14
|
+
/>
|
|
15
|
+
</div>
|
|
16
|
+
)
|
|
17
|
+
|
|
18
|
+
export default Example
|
|
@@ -4,7 +4,7 @@ import PicassoBook from '~/.storybook/components/PicassoBook'
|
|
|
4
4
|
const page = PicassoBook.section('Components').createPage(
|
|
5
5
|
'UserBadge',
|
|
6
6
|
`Show user avatar and name along with addition content
|
|
7
|
-
|
|
7
|
+
|
|
8
8
|
${PicassoBook.createSourceLink(__filename)}
|
|
9
9
|
`
|
|
10
10
|
)
|
|
@@ -33,3 +33,8 @@ page
|
|
|
33
33
|
'With Title',
|
|
34
34
|
'base/UserBadge'
|
|
35
35
|
)
|
|
36
|
+
.addExample(
|
|
37
|
+
'UserBadge/story/WithIcon.example.tsx',
|
|
38
|
+
'With Icon',
|
|
39
|
+
'base/UserBadge'
|
|
40
|
+
)
|