Skip to content

Commit 30baa9d

Browse files
millusmillus
committed
feat: rename fullName to name on AvatarNameLabel, add image support to NameLabel
- Rename AvatarNameLabel fullName prop to name for API consistency with Avatar - Add src and alt props to AvatarNameLabel — passes through to inner Avatar - Update Figma Code Connect to map figma.string('Full Name') to name prop - Update all tests, stories, types, and descriptions to match - Add NameLabelWithPhoto story and update slot story with real photos - Add src/alt to argTypes under Core category - Reorder stories: Notification before Photo on both Avatar and NameLabel
1 parent b240aec commit 30baa9d

5 files changed

Lines changed: 165 additions & 91 deletions

File tree

‎packages/eds-core-react/src/components/next/Avatar/Avatar.figma.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,15 @@ figma.connect(
4242
'https://www.figma.com/design/dz0XQdc5j7AAtjXr1gTfVR/%F0%9F%94%B9-EDS-Core-Components?node-id=9319-5429',
4343
{
4444
props: {
45-
fullName: figma.string('Full Name'),
45+
name: figma.string('Full Name'),
4646
meta: figma.string('Email'),
4747
layout: figma.enum('Layout', {
4848
Horizontal: 'horizontal',
4949
Vertical: 'vertical',
5050
}),
5151
},
52-
example: ({ fullName, meta, layout }) => (
53-
<AvatarNameLabel fullName={fullName} meta={meta} layout={layout} />
52+
example: ({ name, meta, layout }) => (
53+
<AvatarNameLabel name={name} meta={meta} layout={layout} />
5454
),
5555
},
5656
)

‎packages/eds-core-react/src/components/next/Avatar/Avatar.stories.tsx‎

Lines changed: 130 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,18 @@ const meta: Meta<typeof Avatar> = {
2828
'Override the auto-derived initial(s). 1–2 characters recommended.',
2929
table: { category: 'Core' },
3030
},
31+
src: {
32+
control: 'text',
33+
description:
34+
'Profile photo URL. When provided, renders a circular photo instead of initials.',
35+
table: { category: 'Core' },
36+
},
37+
alt: {
38+
control: 'text',
39+
description:
40+
'Alt text for the photo. Falls back to `name` if not provided.',
41+
table: { category: 'Core' },
42+
},
3143
size: {
3244
control: 'inline-radio',
3345
options: ['sm', 'md', 'lg'],
@@ -77,41 +89,7 @@ Introduction.parameters = {
7789
docs: {
7890
description: {
7991
story:
80-
'Pass `name` to make the avatar accessible — initials are derived automatically and the avatar is announced to screen readers as `role="img"`. Without `name`, the initial is purely decorative. Inside `AvatarNameLabel` this is handled automatically from `fullName`.',
81-
},
82-
},
83-
}
84-
85-
export const Photo: StoryFn = () => (
86-
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
87-
<Avatar
88-
src="https://i.pravatar.cc/150?img=47"
89-
name="Ada Lovelace"
90-
size="sm"
91-
/>
92-
<Avatar
93-
src="https://i.pravatar.cc/150?img=47"
94-
name="Ada Lovelace"
95-
size="md"
96-
/>
97-
<Avatar
98-
src="https://i.pravatar.cc/150?img=47"
99-
name="Ada Lovelace"
100-
size="lg"
101-
/>
102-
<Avatar
103-
src="https://i.pravatar.cc/150?img=47"
104-
name="Ada Lovelace"
105-
size="lg"
106-
notification
107-
/>
108-
</div>
109-
)
110-
Photo.parameters = {
111-
docs: {
112-
description: {
113-
story:
114-
'Pass `src` to show a profile photo instead of initials. The image fills the circle with `object-fit: cover`. Use `name` for the accessible label — it becomes the `alt` text on the image.',
92+
'Pass `name` to make the avatar accessible — initials are derived automatically and the avatar is announced to screen readers as `role="img"`. Without `name`, the initial is purely decorative. Inside `AvatarNameLabel` this is handled automatically from `name`.',
11593
},
11694
},
11795
}
@@ -163,16 +141,50 @@ WithNotification.parameters = {
163141
},
164142
}
165143

144+
export const Photo: StoryFn = () => (
145+
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
146+
<Avatar
147+
src="https://i.pravatar.cc/150?img=47"
148+
name="Ada Lovelace"
149+
size="sm"
150+
/>
151+
<Avatar
152+
src="https://i.pravatar.cc/150?img=47"
153+
name="Ada Lovelace"
154+
size="md"
155+
/>
156+
<Avatar
157+
src="https://i.pravatar.cc/150?img=47"
158+
name="Ada Lovelace"
159+
size="lg"
160+
/>
161+
<Avatar
162+
src="https://i.pravatar.cc/150?img=47"
163+
name="Ada Lovelace"
164+
size="lg"
165+
notification
166+
/>
167+
</div>
168+
)
169+
Photo.parameters = {
170+
docs: {
171+
description: {
172+
story:
173+
'Pass `src` to show a profile photo instead of initials. The image fills the circle with `object-fit: cover`. Use `name` for the accessible label — it becomes the `alt` text on the image.',
174+
},
175+
},
176+
}
177+
166178
export const NameLabelHorizontal: StoryFn<AvatarNameLabelProps> = (args) => (
167179
<AvatarNameLabel {...args} />
168180
)
169181
NameLabelHorizontal.args = {
170-
fullName: 'Ada Lovelace',
182+
name: 'Ada Lovelace',
171183
meta: 'Senior Engineer',
172184
layout: 'horizontal',
173185
}
174186
NameLabelHorizontal.argTypes = {
175-
fullName: {
187+
name: {
176188
control: 'text',
177189
description: 'Full name of the person.',
178190
table: { category: 'Core' },
@@ -187,6 +199,18 @@ NameLabelHorizontal.argTypes = {
187199
description: 'Override the auto-derived initial(s).',
188200
table: { category: 'Core' },
189201
},
202+
src: {
203+
control: 'text',
204+
description:
205+
'Profile photo URL. When provided, renders a circular photo instead of initials.',
206+
table: { category: 'Core' },
207+
},
208+
alt: {
209+
control: 'text',
210+
description:
211+
'Alt text for the photo. Falls back to `name` if not provided.',
212+
table: { category: 'Core' },
213+
},
190214
layout: {
191215
control: 'inline-radio',
192216
options: ['horizontal', 'vertical'],
@@ -227,7 +251,7 @@ export const NameLabelVertical: StoryFn<AvatarNameLabelProps> = (args) => (
227251
<AvatarNameLabel {...args} />
228252
)
229253
NameLabelVertical.args = {
230-
fullName: 'Ada Lovelace',
254+
name: 'Ada Lovelace',
231255
meta: 'ada@equinor.com',
232256
layout: 'vertical',
233257
}
@@ -241,13 +265,39 @@ NameLabelVertical.parameters = {
241265
}
242266

243267
export const NameLabelWithNotification: StoryFn = () => (
244-
<AvatarNameLabel
245-
fullName="Ada Lovelace"
246-
meta="Senior Engineer"
247-
notification
248-
/>
268+
<AvatarNameLabel name="Ada Lovelace" meta="Senior Engineer" notification />
249269
)
250270

271+
export const NameLabelWithPhoto: StoryFn = () => (
272+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
273+
<AvatarNameLabel
274+
name="Ada Lovelace"
275+
meta="Senior Engineer"
276+
src="https://i.pravatar.cc/150?img=47"
277+
/>
278+
<AvatarNameLabel
279+
name="Ada Lovelace"
280+
meta="Senior Engineer"
281+
src="https://i.pravatar.cc/150?img=47"
282+
layout="vertical"
283+
/>
284+
<AvatarNameLabel
285+
name="Ada Lovelace"
286+
meta="Senior Engineer"
287+
src="https://i.pravatar.cc/150?img=47"
288+
notification
289+
/>
290+
</div>
291+
)
292+
NameLabelWithPhoto.parameters = {
293+
docs: {
294+
description: {
295+
story:
296+
'Pass `src` to show a profile photo in the avatar. Works with both layouts and the notification dot.',
297+
},
298+
},
299+
}
300+
251301
export const NameLabelEdgeCases: StoryFn = () => (
252302
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
253303
<div>
@@ -257,15 +307,15 @@ export const NameLabelEdgeCases: StoryFn = () => (
257307
<ListWithDividers maxWidth="200px">
258308
{[
259309
{
260-
fullName: 'Bartholomew Featherstonehaugh',
310+
name: 'Bartholomew Featherstonehaugh',
261311
meta: 'b.featherstonehaugh@equinor.com',
262312
},
263313
{
264-
fullName: 'Mary Jane Elizabeth Watson',
314+
name: 'Mary Jane Elizabeth Watson',
265315
meta: 'mary.watson@equinor.com',
266316
},
267-
].map(({ fullName, meta }) => (
268-
<AvatarNameLabel key={fullName} fullName={fullName} meta={meta} />
317+
].map(({ name, meta }) => (
318+
<AvatarNameLabel key={name} name={name} meta={meta} />
269319
))}
270320
</ListWithDividers>
271321
</div>
@@ -276,18 +326,18 @@ export const NameLabelEdgeCases: StoryFn = () => (
276326
<ListWithDividers>
277327
{[
278328
{
279-
fullName: 'Bartholomew Featherstonehaugh',
329+
name: 'Bartholomew Featherstonehaugh',
280330
meta: 'b.featherstonehaugh@equinor.com',
281331
},
282332
{
283-
fullName: 'Mary Jane Elizabeth Watson',
333+
name: 'Mary Jane Elizabeth Watson',
284334
meta: 'mary.watson@equinor.com',
285335
},
286-
].map(({ fullName, meta }) => (
336+
].map(({ name, meta }) => (
287337
<AvatarNameLabel
288-
key={fullName}
338+
key={name}
289339
layout="vertical"
290-
fullName={fullName}
340+
name={name}
291341
meta={meta}
292342
/>
293343
))}
@@ -329,10 +379,18 @@ export const NameLabelWithSlot: StoryFn = () => (
329379
<p style={sectionLabel}>Overflow menu</p>
330380
<ListWithDividers>
331381
{[
332-
{ fullName: 'Ada Lovelace', meta: 'Senior Engineer' },
333-
{ fullName: 'Mary Jane Watson', meta: 'Reservoir Geoscientist' },
334-
].map(({ fullName, meta }) => (
335-
<AvatarNameLabel key={fullName} fullName={fullName} meta={meta}>
382+
{
383+
name: 'Ada Lovelace',
384+
meta: 'Senior Engineer',
385+
img: 'https://i.pravatar.cc/150?img=47',
386+
},
387+
{
388+
name: 'Mary Jane Watson',
389+
meta: 'Reservoir Geoscientist',
390+
img: 'https://i.pravatar.cc/150?img=32',
391+
},
392+
].map(({ name, meta, img }) => (
393+
<AvatarNameLabel key={name} name={name} meta={meta} src={img}>
336394
<Button variant="ghost" size="sm" aria-label="More options">
337395
<Icon data={more_vertical} />
338396
</Button>
@@ -346,19 +404,21 @@ export const NameLabelWithSlot: StoryFn = () => (
346404
<ListWithDividers>
347405
{[
348406
{
349-
fullName: 'Ada Lovelace',
407+
name: 'Ada Lovelace',
350408
meta: 'ada@equinor.com',
351409
role: 'Admin',
352410
tone: 'info' as const,
411+
img: 'https://i.pravatar.cc/150?img=47',
353412
},
354413
{
355-
fullName: 'Mary Jane Watson',
414+
name: 'Mary Jane Watson',
356415
meta: 'mary@equinor.com',
357416
role: 'Viewer',
358417
tone: 'neutral' as const,
418+
img: 'https://i.pravatar.cc/150?img=32',
359419
},
360-
].map(({ fullName, meta, role, tone }) => (
361-
<AvatarNameLabel key={fullName} fullName={fullName} meta={meta}>
420+
].map(({ name, meta, role, tone, img }) => (
421+
<AvatarNameLabel key={name} name={name} meta={meta} src={img}>
362422
<Badge tone={tone}>{role}</Badge>
363423
</AvatarNameLabel>
364424
))}
@@ -369,14 +429,20 @@ export const NameLabelWithSlot: StoryFn = () => (
369429
<p style={sectionLabel}>Last active</p>
370430
<ListWithDividers>
371431
{[
372-
{ fullName: 'Ada Lovelace', meta: 'Senior Engineer', time: '2h ago' },
373432
{
374-
fullName: 'Mary Jane Watson',
433+
name: 'Ada Lovelace',
434+
meta: 'Senior Engineer',
435+
time: '2h ago',
436+
img: 'https://i.pravatar.cc/150?img=47',
437+
},
438+
{
439+
name: 'Mary Jane Watson',
375440
meta: 'Reservoir Geoscientist',
376441
time: '3d ago',
442+
img: 'https://i.pravatar.cc/150?img=32',
377443
},
378-
].map(({ fullName, meta, time }) => (
379-
<AvatarNameLabel key={fullName} fullName={fullName} meta={meta}>
444+
].map(({ name, meta, time, img }) => (
445+
<AvatarNameLabel key={name} name={name} meta={meta} src={img}>
380446
<span
381447
style={{
382448
fontSize: 'var(--eds-typography-ui-body-xs-font-size)',

0 commit comments

Comments
 (0)