@atom-learning/components 2.12.2 → 2.13.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/CHANGELOG.md +10 -2
- package/dist/components/avatar/Avatar.d.ts +565 -0
- package/dist/components/avatar/Avatar.js +1 -0
- package/dist/components/avatar/AvatarIcon.d.ts +7 -0
- package/dist/components/avatar/AvatarIcon.js +1 -0
- package/dist/components/avatar/AvatarImage.d.ts +7 -0
- package/dist/components/avatar/AvatarImage.js +1 -0
- package/dist/components/avatar/AvatarInitial.d.ts +2 -0
- package/dist/components/avatar/AvatarInitial.js +1 -0
- package/dist/components/avatar/AvatarPlaceholder.d.ts +2 -0
- package/dist/components/avatar/AvatarPlaceholder.js +1 -0
- package/dist/components/avatar/index.d.ts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/docgen.json +1 -1
- package/dist/docs/Avatar.mdx +129 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Avatar
|
|
3
|
+
component: Avatar
|
|
4
|
+
description: Show a thumbnail representation of an individual or entity.
|
|
5
|
+
category: Media
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
The `Avatar` component can be used to show a visual representation of a user or entity. It helps to quickly identify users or objects.
|
|
9
|
+
|
|
10
|
+
```jsx preview
|
|
11
|
+
<Avatar name="Alice Smith">
|
|
12
|
+
<Avatar.Image
|
|
13
|
+
alt="Alice Smith's avatar"
|
|
14
|
+
src="https://thispersondoesnotexist.com/image"
|
|
15
|
+
/>
|
|
16
|
+
</Avatar>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Instead of an image, the initial of the name or a placeholder icon can be used
|
|
20
|
+
|
|
21
|
+
```jsx preview
|
|
22
|
+
<>
|
|
23
|
+
<Avatar name="Alice Smith">
|
|
24
|
+
<Avatar.Initial />
|
|
25
|
+
</Avatar>
|
|
26
|
+
<Avatar>
|
|
27
|
+
<Avatar.Placeholder />
|
|
28
|
+
</Avatar>
|
|
29
|
+
</>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
When an image src is missing it will fallback to the initial of the name.
|
|
33
|
+
|
|
34
|
+
```jsx preview
|
|
35
|
+
<Avatar name="Alice Smith">
|
|
36
|
+
<Avatar.Image alt="" src="" />
|
|
37
|
+
</Avatar>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
When the name is also missing it will fallback to the placeholder icon.
|
|
41
|
+
|
|
42
|
+
```jsx preview
|
|
43
|
+
<Avatar name="">
|
|
44
|
+
<Avatar.Image alt="Alice Smith's avatar" src="" />
|
|
45
|
+
</Avatar>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
When `<Avatar.Initial />` is used but the name is missing, it will fallback to the placeholder icon.
|
|
49
|
+
|
|
50
|
+
```jsx preview
|
|
51
|
+
<Avatar name="">
|
|
52
|
+
<Avatar.Initial />
|
|
53
|
+
</Avatar>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
An `onClick` prop can be used, this will make the component focusable using the keyboard, as it uses a `<button>` under the hood.
|
|
57
|
+
|
|
58
|
+
```jsx preview
|
|
59
|
+
<Avatar name="Alice Smith" onClick={() => alert('Thanks for clicking')}>
|
|
60
|
+
<Avatar.Initial />
|
|
61
|
+
</Avatar>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
When disabled, the onClick won't work.
|
|
65
|
+
|
|
66
|
+
```jsx preview
|
|
67
|
+
<Avatar
|
|
68
|
+
name="Alice Smith"
|
|
69
|
+
disabled
|
|
70
|
+
onClick={() => alert('This message will not appear')}
|
|
71
|
+
>
|
|
72
|
+
<Avatar.Initial />
|
|
73
|
+
</Avatar>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
Instead of an image, an icon can be passed.
|
|
77
|
+
|
|
78
|
+
```jsx preview
|
|
79
|
+
<>
|
|
80
|
+
<Avatar>
|
|
81
|
+
<Avatar.Icon is={BatteryMedium} />
|
|
82
|
+
</Avatar>
|
|
83
|
+
</>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Size
|
|
87
|
+
|
|
88
|
+
The available `size`s for this component are: `xs`, `sm`, `md`, `lg`, `xl` and `xxl`. The default is `lg`.
|
|
89
|
+
|
|
90
|
+
```jsx live
|
|
91
|
+
<>
|
|
92
|
+
<Avatar size="xs" name="Alice Smith">
|
|
93
|
+
<Avatar.Image
|
|
94
|
+
alt="Alice Smith's avatar"
|
|
95
|
+
src="https://thispersondoesnotexist.com/image"
|
|
96
|
+
/>
|
|
97
|
+
</Avatar>
|
|
98
|
+
<Avatar size="sm" name="Alice Smith">
|
|
99
|
+
<Avatar.Image
|
|
100
|
+
alt="Alice Smith's avatar"
|
|
101
|
+
src="https://thispersondoesnotexist.com/image"
|
|
102
|
+
/>
|
|
103
|
+
</Avatar>
|
|
104
|
+
<Avatar size="md" name="Alice Smith">
|
|
105
|
+
<Avatar.Image
|
|
106
|
+
alt="Alice Smith's avatar"
|
|
107
|
+
src="https://thispersondoesnotexist.com/image"
|
|
108
|
+
/>
|
|
109
|
+
</Avatar>
|
|
110
|
+
<Avatar size="lg" name="Alice Smith">
|
|
111
|
+
<Avatar.Image
|
|
112
|
+
alt="Alice Smith's avatar"
|
|
113
|
+
src="https://thispersondoesnotexist.com/image"
|
|
114
|
+
/>
|
|
115
|
+
</Avatar>
|
|
116
|
+
<Avatar size="xl" name="Alice Smith">
|
|
117
|
+
<Avatar.Image
|
|
118
|
+
alt="Alice Smith's avatar"
|
|
119
|
+
src="https://thispersondoesnotexist.com/image"
|
|
120
|
+
/>
|
|
121
|
+
</Avatar>
|
|
122
|
+
<Avatar size="xxl" name="Alice Smith">
|
|
123
|
+
<Avatar.Image
|
|
124
|
+
alt="Alice Smith's avatar"
|
|
125
|
+
src="https://thispersondoesnotexist.com/image"
|
|
126
|
+
/>
|
|
127
|
+
</Avatar>
|
|
128
|
+
</>
|
|
129
|
+
```
|