update ContextTag (#468)

* u Avatar

* u Context Tag

* add changeset

* revert type

* Revert "revert type"

This reverts commit 1d099cf5d2.

* add bigger 24

* c

* f

* f textSize
This commit is contained in:
Felicio Mununga 2023-09-11 12:26:24 +02:00 committed by GitHub
parent 5dc7997dc5
commit 7c96decfc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 755 additions and 91 deletions

View File

@ -0,0 +1,5 @@
---
'@status-im/components': patch
---
update Context Tag

View File

@ -51,7 +51,7 @@ type ChannelAvatarProps = {
type CommunityAvatarProps = { type CommunityAvatarProps = {
type: 'community' type: 'community'
size: 80 | 32 | 28 | 24 | 20 size: 80 | 32 | 28 | 24 | 20 | 16
name: string name: string
src?: string src?: string
backgroundColor?: ColorTokens backgroundColor?: ColorTokens
@ -59,7 +59,7 @@ type CommunityAvatarProps = {
type AccountAvatarProps = { type AccountAvatarProps = {
type: 'account' type: 'account'
size: 80 | 48 | 32 | 28 | 24 | 20 size: 80 | 48 | 32 | 28 | 24 | 20 | 16
name: string name: string
src?: string src?: string
backgroundColor?: ColorTokens backgroundColor?: ColorTokens
@ -67,7 +67,7 @@ type AccountAvatarProps = {
type IconAvatarProps = { type IconAvatarProps = {
type: 'icon' type: 'icon'
size: 48 | 32 | 28 | 24 | 20 size: 48 | 32 | 28 | 24 | 20 | 16
icon: React.ReactElement icon: React.ReactElement
backgroundColor?: ColorTokens backgroundColor?: ColorTokens
color?: ColorTokens color?: ColorTokens
@ -102,6 +102,7 @@ const accountRadiusSizes: Record<AccountAvatarProps['size'], RadiusTokens> = {
'28': '$8', '28': '$8',
'24': '$8', '24': '$8',
'20': '$6', '20': '$6',
'16': '$6',
} }
const channelEmojiSizes: Record<ChannelAvatarProps['size'], TextProps['size']> = const channelEmojiSizes: Record<ChannelAvatarProps['size'], TextProps['size']> =

View File

@ -9,7 +9,7 @@ const meta: Meta<typeof ContextTag> = {
component: ContextTag, component: ContextTag,
argTypes: { argTypes: {
type: [ type: [
'default', 'user',
'account', 'account',
'group', 'group',
'community', 'community',
@ -29,10 +29,10 @@ const meta: Meta<typeof ContextTag> = {
type Story = StoryObj<typeof ContextTag> type Story = StoryObj<typeof ContextTag>
export const Default: Story = { export const user: Story = {
args: { args: {
type: 'account', type: 'account',
user: { name: 'user name ', emoji: '🐷' }, account: { name: 'user name ', emoji: '🐷' },
size: 24, size: 24,
outline: false, outline: false,
blur: false, blur: false,
@ -43,15 +43,92 @@ export const AllVariants: Story = {
args: {}, args: {},
render: () => ( render: () => (
<Stack space flexDirection="row"> <Stack space flexDirection="row">
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start" gap={12}>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag <ContextTag
type="default" type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={20}
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={20}
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
/>
<ContextTag
type="account"
account={{
name: 'User Name',
emoji: '🐷',
}}
size={20}
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
/>
<ContextTag type="address" address="0x045...1ah" size={20} />
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={20}
/>
<ContextTag type="audio" audioLength="00:32" size={20} />
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="user"
user={{ user={{
name: 'User', name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
/> />
<ContextTag <ContextTag
type="group" type="group"
@ -60,6 +137,7 @@ export const AllVariants: Story = {
icon: <MembersIcon size={12} />, icon: <MembersIcon size={12} />,
}} }}
size={24} size={24}
textSize={13}
/> />
<ContextTag <ContextTag
type="channel" type="channel"
@ -69,6 +147,7 @@ export const AllVariants: Story = {
name: 'channel', name: 'channel',
}} }}
size={24} size={24}
textSize={13}
/> />
<ContextTag <ContextTag
type="community" type="community"
@ -77,6 +156,7 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
/> />
<ContextTag <ContextTag
type="token" type="token"
@ -85,6 +165,7 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
/> />
<ContextTag <ContextTag
type="network" type="network"
@ -93,14 +174,16 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
/> />
<ContextTag <ContextTag
type="account" type="account"
user={{ account={{
name: 'User Name', name: 'User Name',
emoji: '🐷', emoji: '🐷',
}} }}
size={24} size={24}
textSize={13}
/> />
<ContextTag <ContextTag
type="collectible" type="collectible"
@ -109,20 +192,127 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
/>
<ContextTag
type="address"
address="0x045...1ah"
size={24}
textSize={13}
/> />
<ContextTag type="address" address="0x045...1ah" size={24} />
<ContextTag <ContextTag
icon={<PendingIcon size={12} />} icon={<PendingIcon size={12} />}
type="icon" type="icon"
label="Context" label="Context"
size={24} size={24}
textSize={13}
/>
<ContextTag
type="audio"
audioLength="00:32"
size={24}
textSize={13}
/> />
<ContextTag type="audio" audioLength="00:32" size={24} />
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag <ContextTag
type="default" type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={24}
textSize={15}
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={24}
textSize={15}
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
/>
<ContextTag
type="account"
account={{
name: 'User Name',
emoji: '🐷',
}}
size={24}
textSize={15}
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
/>
<ContextTag
type="address"
address="0x045...1ah"
size={24}
textSize={15}
/>
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={24}
textSize={15}
/>
<ContextTag
type="audio"
audioLength="00:32"
size={24}
textSize={15}
/>
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="user"
user={{ user={{
name: 'User', name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@ -172,7 +362,7 @@ export const AllVariants: Story = {
/> />
<ContextTag <ContextTag
type="account" type="account"
user={{ account={{
name: 'User Name', name: 'User Name',
emoji: '🐷', emoji: '🐷',
}} }}
@ -197,15 +387,101 @@ export const AllVariants: Story = {
</Stack> </Stack>
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start" gap={12}>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag <ContextTag
type="default" type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
outline
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={20}
outline
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={20}
outline
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
outline
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
outline
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
outline
/>
<ContextTag
type="account"
account={{
name: 'User Name',
emoji: '🐷',
}}
size={20}
outline
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
outline
/>
<ContextTag type="address" address="0x045...1ah" size={20} outline />
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={20}
outline
/>
<ContextTag type="audio" audioLength="00:32" size={20} outline />
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="user"
user={{ user={{
name: 'User', name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
outline outline
/> />
<ContextTag <ContextTag
@ -215,6 +491,7 @@ export const AllVariants: Story = {
icon: <MembersIcon size={12} />, icon: <MembersIcon size={12} />,
}} }}
size={24} size={24}
textSize={13}
outline outline
/> />
<ContextTag <ContextTag
@ -225,6 +502,7 @@ export const AllVariants: Story = {
name: 'channel', name: 'channel',
}} }}
size={24} size={24}
textSize={13}
outline outline
/> />
<ContextTag <ContextTag
@ -234,6 +512,7 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
outline outline
/> />
<ContextTag <ContextTag
@ -243,6 +522,7 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
outline outline
/> />
<ContextTag <ContextTag
@ -252,15 +532,17 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
outline outline
/> />
<ContextTag <ContextTag
type="account" type="account"
user={{ account={{
name: 'User Name', name: 'User Name',
emoji: '🐷', emoji: '🐷',
}} }}
size={24} size={24}
textSize={13}
outline outline
/> />
<ContextTag <ContextTag
@ -270,22 +552,142 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
outline
/>
<ContextTag
type="address"
address="0x045...1ah"
size={24}
textSize={13}
outline outline
/> />
<ContextTag type="address" address="0x045...1ah" size={24} outline />
<ContextTag <ContextTag
icon={<PendingIcon size={12} />} icon={<PendingIcon size={12} />}
type="icon" type="icon"
label="Context" label="Context"
size={24} size={24}
textSize={13}
outline
/>
<ContextTag
type="audio"
audioLength="00:32"
size={24}
textSize={13}
outline outline
/> />
<ContextTag type="audio" audioLength="00:32" size={24} outline />
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag <ContextTag
type="default" type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="account"
account={{
name: 'User Name',
emoji: '🐷',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="address"
address="0x045...1ah"
size={24}
textSize={15}
outline
/>
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={24}
textSize={15}
outline
/>
<ContextTag
type="audio"
audioLength="00:32"
size={24}
textSize={15}
outline
/>
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="user"
user={{ user={{
name: 'User', name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@ -341,7 +743,7 @@ export const AllVariants: Story = {
/> />
<ContextTag <ContextTag
type="account" type="account"
user={{ account={{
name: 'User Name', name: 'User Name',
emoji: '🐷', emoji: '🐷',
}} }}
@ -369,15 +771,101 @@ export const AllVariants: Story = {
</Stack> </Stack>
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start" gap={12}>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag <ContextTag
type="default" type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
blur
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={20}
blur
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={20}
blur
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
blur
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
blur
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
blur
/>
<ContextTag
type="account"
account={{
name: 'User Name',
emoji: '🐷',
}}
size={20}
blur
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
blur
/>
<ContextTag type="address" address="0x045...1ah" size={20} blur />
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={20}
blur
/>
<ContextTag type="audio" audioLength="00:32" size={20} blur />
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="user"
user={{ user={{
name: 'User', name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
blur blur
/> />
<ContextTag <ContextTag
@ -387,6 +875,7 @@ export const AllVariants: Story = {
icon: <MembersIcon size={12} />, icon: <MembersIcon size={12} />,
}} }}
size={24} size={24}
textSize={13}
blur blur
/> />
<ContextTag <ContextTag
@ -397,6 +886,7 @@ export const AllVariants: Story = {
name: 'channel', name: 'channel',
}} }}
size={24} size={24}
textSize={13}
blur blur
/> />
<ContextTag <ContextTag
@ -406,6 +896,7 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
blur blur
/> />
<ContextTag <ContextTag
@ -415,6 +906,7 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
blur blur
/> />
<ContextTag <ContextTag
@ -424,15 +916,17 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
blur blur
/> />
<ContextTag <ContextTag
type="account" type="account"
user={{ account={{
name: 'User Name', name: 'User Name',
emoji: '🐷', emoji: '🐷',
}} }}
size={24} size={24}
textSize={13}
blur blur
/> />
<ContextTag <ContextTag
@ -442,22 +936,142 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}} }}
size={24} size={24}
textSize={13}
blur
/>
<ContextTag
type="address"
address="0x045...1ah"
size={24}
textSize={13}
blur blur
/> />
<ContextTag type="address" address="0x045...1ah" size={24} blur />
<ContextTag <ContextTag
icon={<PendingIcon size={12} />} icon={<PendingIcon size={12} />}
type="icon" type="icon"
label="Context" label="Context"
size={24} size={24}
textSize={13}
blur
/>
<ContextTag
type="audio"
audioLength="00:32"
size={24}
textSize={13}
blur blur
/> />
<ContextTag type="audio" audioLength="00:32" size={24} blur />
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag <ContextTag
type="default" type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="account"
account={{
name: 'User Name',
emoji: '🐷',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="address"
address="0x045...1ah"
size={24}
textSize={15}
blur
/>
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={24}
textSize={15}
blur
/>
<ContextTag
type="audio"
audioLength="00:32"
size={24}
textSize={15}
blur
/>
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="user"
user={{ user={{
name: 'User', name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images', src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@ -513,7 +1127,7 @@ export const AllVariants: Story = {
/> />
<ContextTag <ContextTag
type="account" type="account"
user={{ account={{
name: 'User Name', name: 'User Name',
emoji: '🐷', emoji: '🐷',
}} }}

View File

@ -1,3 +1,5 @@
import { cloneElement } from 'react'
import { ChevronRightIcon, PlayIcon } from '@status-im/icons' import { ChevronRightIcon, PlayIcon } from '@status-im/icons'
import { Stack, styled } from '@tamagui/core' import { Stack, styled } from '@tamagui/core'
import { View } from 'react-native' import { View } from 'react-native'
@ -5,69 +7,97 @@ import { View } from 'react-native'
import { Avatar } from '../avatar' import { Avatar } from '../avatar'
import { Text } from '../text' import { Text } from '../text'
import type { AvatarProps } from '../avatar'
import type { TextProps } from '../text' import type { TextProps } from '../text'
import type { IconProps } from '@status-im/icons'
type Props = { type Props = { blur?: boolean; outline?: boolean } & (
children?: React.ReactNode
size?: 24 | 32
blur?: boolean
outline?: boolean
} & (
| { type: 'default'; user: { name: string; src: string } }
| { type: 'account'; user: { name: string; emoji: string } }
| { | {
type: 'group' size?: 20 | 32
group: { }
name: string | {
icon: React.ReactElement size?: 24
textSize: 13 | 15
}
) &
(
| { type: 'user'; user: { name: string; src: string } }
| { type: 'account'; account: { name: string; emoji: string } }
| {
type: 'group'
group: {
name: string
icon: React.ReactElement
}
} }
} | { type: 'community'; community: { name: string; src?: string } }
| { type: 'community'; community: { name: string; src?: string } } | {
| { type: 'channel'
type: 'channel' channel: { communityName: string; src: string; name: string }
channel: { communityName: string; src: string; name: string } }
} | { type: 'token'; token: { name: string; src: string } }
| { type: 'token'; token: { name: string; src: string } } | { type: 'network'; network: { name: string; src: string } }
| { type: 'network'; network: { name: string; src: string } } | { type: 'collectible'; collectible: { name: string; src: string } }
| { type: 'collectible'; collectible: { name: string; src: string } } | { type: 'address'; address: string }
| { type: 'address'; address: string } | { type: 'icon'; icon: React.ReactElement; label: string }
| { type: 'icon'; icon: React.ReactElement; label: string } | { type: 'audio'; audioLength: string }
| { type: 'audio'; audioLength: string } | { type: 'label'; children: string }
) )
const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = { const textSizes: Record<
Exclude<NonNullable<Props['size']>, 24>,
Extract<TextProps['size'], 13 | 15>
> = {
'32': 15, '32': 15,
'24': 13, /**
* note: "These context sizes are the same size as the ones above (24px), but the text size differs.
* We can have a bigger or smaller text depending on the context."
*
* https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n?node-id=1336:34320&mode=design#541570513
*/
// '24': 15,
'20': 13,
} }
const avatarSizes: Record<NonNullable<Props['size']>, 28 | 20> = { const avatarSizes: Record<
NonNullable<Props['size']>,
Extract<AvatarProps['size'], 28 | 20 | 16>
> = {
'32': 28, '32': 28,
'24': 20, '24': 20,
'20': 16,
} }
const Label = ({ const iconSizes: Record<NonNullable<Props['size']>, IconProps['size']> = {
children, '32': 20,
size, '24': 12,
type = 'default', '20': 12,
}: { }
const Label = (props: {
children: string children: string
size: 24 | 32 size: 13 | 15
type?: 'default' | 'monospace' type?: 'default' | 'monospace'
}) => ( }) => {
<Text size={textSizes[size]} weight="medium" color="$neutral-100" type={type}> const { children, size, type = 'default' } = props
{children}
</Text> return (
) <Text size={size} weight="medium" color="$neutral-100" type={type}>
{children}
</Text>
)
}
const ContextTag = (props: Props) => { const ContextTag = (props: Props) => {
const { size = 24, blur = false, outline, type } = props const { size = 24, blur = false, outline, type } = props
const rounded = type === 'account' || type === 'collectible' const rounded = type === 'account' || type === 'collectible'
const hasAvatar = type !== 'address' const hasAvatar = type !== 'address' && type !== 'icon' && type !== 'label'
const textSize = props.size === 24 ? props.textSize : textSizes[props.size!]
const renderContent = () => { const renderContent = () => {
switch (type) { switch (type) {
case 'default': { case 'user': {
return ( return (
<> <>
<Avatar <Avatar
@ -76,7 +106,7 @@ const ContextTag = (props: Props) => {
src={props.user.src} src={props.user.src}
name={props.user.name} name={props.user.name}
/> />
<Label size={size}>{props.user.name}</Label> <Label size={textSize}>{props.user.name}</Label>
</> </>
) )
} }
@ -89,7 +119,7 @@ const ContextTag = (props: Props) => {
src={props.community.src} src={props.community.src}
name={props.community.name} name={props.community.name}
/> />
<Label size={size}>{props.community.name}</Label> <Label size={textSize}>{props.community.name}</Label>
</> </>
) )
} }
@ -103,9 +133,9 @@ const ContextTag = (props: Props) => {
name={props.channel.name} name={props.channel.name}
/> />
<Stack flexDirection="row" gap="$0" alignItems="center"> <Stack flexDirection="row" gap="$0" alignItems="center">
<Label size={size}>{props.channel.communityName}</Label> <Label size={textSize}>{props.channel.communityName}</Label>
<ChevronRightIcon color="$neutral-50" size={20} /> <ChevronRightIcon color="$neutral-50" size={20} />
<Label size={size}>{`# ` + props.channel.name}</Label> <Label size={textSize}>{`# ` + props.channel.name}</Label>
</Stack> </Stack>
</> </>
) )
@ -119,13 +149,13 @@ const ContextTag = (props: Props) => {
src={props.token.src} src={props.token.src}
name={props.token.name} name={props.token.name}
/> />
<Label size={size}>{props.token.name}</Label> <Label size={textSize}>{props.token.name}</Label>
</> </>
) )
} }
case 'address': { case 'address': {
return ( return (
<Label size={size} type="monospace"> <Label size={textSize} type="monospace">
{props.address} {props.address}
</Label> </Label>
) )
@ -140,7 +170,7 @@ const ContextTag = (props: Props) => {
backgroundColor="$primary-50" backgroundColor="$primary-50"
color="$white-100" color="$white-100"
/> />
<Label size={size}>{props.audioLength}</Label> <Label size={textSize}>{props.audioLength}</Label>
</> </>
) )
} }
@ -150,9 +180,9 @@ const ContextTag = (props: Props) => {
<Avatar <Avatar
type="account" type="account"
size={avatarSizes[size]} size={avatarSizes[size]}
name={props.user.emoji} name={props.account.emoji}
/> />
<Label size={size}>{props.user.name}</Label> <Label size={textSize}>{props.account.name}</Label>
</> </>
) )
} }
@ -166,7 +196,7 @@ const ContextTag = (props: Props) => {
color="$white-70" color="$white-70"
icon={props.group.icon} icon={props.group.icon}
/> />
<Label size={size}>{props.group.name}</Label> <Label size={textSize}>{props.group.name}</Label>
</> </>
) )
} }
@ -179,37 +209,38 @@ const ContextTag = (props: Props) => {
src={props.network.src} src={props.network.src}
name={props.network.name} name={props.network.name}
/> />
<Label size={size}>{props.network.name}</Label> <Label size={textSize}>{props.network.name}</Label>
</> </>
) )
} }
case 'collectible': { case 'collectible': {
return ( return (
<> <>
{/* fixme: not an avatar but a resized image; see https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n?node-id=1336:34320&mode=design#541620575 */}
<Avatar <Avatar
type="account" type="account"
size={avatarSizes[size]} size={avatarSizes[size]}
src={props.collectible.src} src={props.collectible.src}
name={props.collectible.name} name={props.collectible.name}
/> />
<Label size={size}>{props.collectible.name}</Label> <Label size={textSize}>{props.collectible.name}</Label>
</> </>
) )
} }
case 'icon': { case 'icon': {
return ( return (
<> <>
<Avatar {cloneElement(props.icon, {
type="icon" size: iconSizes[size],
size={avatarSizes[size]} color: '$neutral-50',
icon={props.icon} })}
backgroundColor="$transparent" <Label size={textSize}>{props.label}</Label>
color="$neutral-50"
/>
<Label size={size}>{props.label}</Label>
</> </>
) )
} }
case 'label': {
return <Label size={textSize}>{props.children}</Label>
}
} }
} }
@ -219,8 +250,8 @@ const ContextTag = (props: Props) => {
blur={blur} blur={blur}
borderRadius={rounded ? '$8' : '$full'} borderRadius={rounded ? '$8' : '$full'}
size={size} size={size}
paddingVertical={hasAvatar ? 0 : 1} textSize={textSize}
paddingLeft={hasAvatar ? 1 : size === 24 ? 8 : 12} {...(hasAvatar && { paddingLeft: 1 })}
> >
{renderContent()} {renderContent()}
</Base> </Base>
@ -257,10 +288,14 @@ const Base = styled(View, {
}, },
}, },
size: { size: {
20: {
height: 20,
gap: 4,
paddingHorizontal: 6,
},
24: { 24: {
height: 24, height: 24,
gap: 4, gap: 4,
paddingHorizontal: 8,
}, },
32: { 32: {
height: 32, height: 32,
@ -268,5 +303,13 @@ const Base = styled(View, {
paddingHorizontal: 12, paddingHorizontal: 12,
}, },
}, },
textSize: {
13: {
paddingHorizontal: 8,
},
15: {
paddingHorizontal: 6,
},
},
} as const, } as const,
}) })

View File

@ -37,6 +37,7 @@ const PinnedMessage = (props: Props) => {
</Text> </Text>
<ContextTag <ContextTag
size={24} size={24}
textSize={13}
type="channel" type="channel"
channel={{ channel={{
communityName: 'Rarible', communityName: 'Rarible',