|
1 | 1 | import * as React from 'react'; |
2 | 2 | import {Stack} from '@twilio-paste/stack'; |
3 | 3 | import {UserIcon} from '@twilio-paste/icons/esm/UserIcon'; |
4 | | -import Avatar10 from '../../../../../.storybook/static/avatars/avatar-sizeIcon10.png'; |
5 | | -import Avatar20 from '../../../../../.storybook/static/avatars/avatar-sizeIcon20.png'; |
6 | | -import Avatar30 from '../../../../../.storybook/static/avatars/avatar-sizeIcon30.png'; |
7 | | -import Avatar40 from '../../../../../.storybook/static/avatars/avatar-sizeIcon40.png'; |
8 | | -import Avatar50 from '../../../../../.storybook/static/avatars/avatar-sizeIcon50.png'; |
9 | | -import Avatar60 from '../../../../../.storybook/static/avatars/avatar-sizeIcon60.png'; |
10 | | -import Avatar70 from '../../../../../.storybook/static/avatars/avatar-sizeIcon70.png'; |
11 | | -import Avatar80 from '../../../../../.storybook/static/avatars/avatar-sizeIcon80.png'; |
12 | | -import Avatar90 from '../../../../../.storybook/static/avatars/avatar-sizeIcon90.png'; |
13 | | -import Avatar100 from '../../../../../.storybook/static/avatars/avatar-sizeIcon100.png'; |
14 | | -import Avatar110 from '../../../../../.storybook/static/avatars/avatar-sizeIcon110.png'; |
15 | 4 | import {Avatar} from '../src'; |
16 | 5 |
|
17 | 6 | // eslint-disable-next-line import/no-default-export |
@@ -58,17 +47,17 @@ export const Initials = (): React.ReactNode => { |
58 | 47 | export const Image = (): React.ReactNode => { |
59 | 48 | return ( |
60 | 49 | <Stack orientation="horizontal" spacing="space40"> |
61 | | - <Avatar size="sizeIcon10" name="avatar example" src={Avatar10} /> |
62 | | - <Avatar size="sizeIcon20" name="avatar example" src={Avatar20} /> |
63 | | - <Avatar size="sizeIcon30" name="avatar example" src={Avatar30} /> |
64 | | - <Avatar size="sizeIcon40" name="avatar example" src={Avatar40} /> |
65 | | - <Avatar size="sizeIcon50" name="avatar example" src={Avatar50} /> |
66 | | - <Avatar size="sizeIcon60" name="avatar example" src={Avatar60} /> |
67 | | - <Avatar size="sizeIcon70" name="avatar example" src={Avatar70} /> |
68 | | - <Avatar size="sizeIcon80" name="avatar example" src={Avatar80} /> |
69 | | - <Avatar size="sizeIcon90" name="avatar example" src={Avatar90} /> |
70 | | - <Avatar size="sizeIcon100" name="avatar example" src={Avatar100} /> |
71 | | - <Avatar size="sizeIcon110" name="avatar example" src={Avatar110} /> |
| 50 | + <Avatar size="sizeIcon10" name="avatar example" src="./avatars/avatar-sizeIcon10.png" /> |
| 51 | + <Avatar size="sizeIcon20" name="avatar example" src="./avatars/avatar-sizeIcon20.png" /> |
| 52 | + <Avatar size="sizeIcon30" name="avatar example" src="./avatars/avatar-sizeIcon30.png" /> |
| 53 | + <Avatar size="sizeIcon40" name="avatar example" src="./avatars/avatar-sizeIcon40.png" /> |
| 54 | + <Avatar size="sizeIcon50" name="avatar example" src="./avatars/avatar-sizeIcon50.png" /> |
| 55 | + <Avatar size="sizeIcon60" name="avatar example" src="./avatars/avatar-sizeIcon60.png" /> |
| 56 | + <Avatar size="sizeIcon70" name="avatar example" src="./avatars/avatar-sizeIcon70.png" /> |
| 57 | + <Avatar size="sizeIcon80" name="avatar example" src="./avatars/avatar-sizeIcon80.png" /> |
| 58 | + <Avatar size="sizeIcon90" name="avatar example" src="./avatars/avatar-sizeIcon90.png" /> |
| 59 | + <Avatar size="sizeIcon100" name="avatar example" src="./avatars/avatar-sizeIcon100.png" /> |
| 60 | + <Avatar size="sizeIcon110" name="avatar example" src="./avatars/avatar-sizeIcon110.png" /> |
72 | 61 | </Stack> |
73 | 62 | ); |
74 | 63 | }; |
@@ -106,7 +95,11 @@ export const ResponsiveInitials = (): React.ReactNode => { |
106 | 95 | export const ResponsiveImage = (): React.ReactNode => { |
107 | 96 | return ( |
108 | 97 | <Stack orientation="horizontal" spacing="space40"> |
109 | | - <Avatar size={['sizeIcon10', 'sizeIcon50', 'sizeIcon110']} name="avatar example" src={Avatar50} /> |
| 98 | + <Avatar |
| 99 | + size={['sizeIcon10', 'sizeIcon50', 'sizeIcon110']} |
| 100 | + name="avatar example" |
| 101 | + src="./avatars/avatar-sizeIcon50.png" |
| 102 | + /> |
110 | 103 | </Stack> |
111 | 104 | ); |
112 | 105 | }; |
|
0 commit comments