diff --git a/.changeset/few-coins-notice.md b/.changeset/few-coins-notice.md new file mode 100644 index 00000000..6d4e6c63 --- /dev/null +++ b/.changeset/few-coins-notice.md @@ -0,0 +1,5 @@ +--- +'@status-im/components': patch +--- + +update Context Tag diff --git a/packages/components/src/avatar/avatar.tsx b/packages/components/src/avatar/avatar.tsx index 3d9c86bc..01874027 100644 --- a/packages/components/src/avatar/avatar.tsx +++ b/packages/components/src/avatar/avatar.tsx @@ -51,7 +51,7 @@ type ChannelAvatarProps = { type CommunityAvatarProps = { type: 'community' - size: 80 | 32 | 28 | 24 | 20 + size: 80 | 32 | 28 | 24 | 20 | 16 name: string src?: string backgroundColor?: ColorTokens @@ -59,7 +59,7 @@ type CommunityAvatarProps = { type AccountAvatarProps = { type: 'account' - size: 80 | 48 | 32 | 28 | 24 | 20 + size: 80 | 48 | 32 | 28 | 24 | 20 | 16 name: string src?: string backgroundColor?: ColorTokens @@ -67,7 +67,7 @@ type AccountAvatarProps = { type IconAvatarProps = { type: 'icon' - size: 48 | 32 | 28 | 24 | 20 + size: 48 | 32 | 28 | 24 | 20 | 16 icon: React.ReactElement backgroundColor?: ColorTokens color?: ColorTokens @@ -102,6 +102,7 @@ const accountRadiusSizes: Record = { '28': '$8', '24': '$8', '20': '$6', + '16': '$6', } const channelEmojiSizes: Record = diff --git a/packages/components/src/context-tag/context-tag.stories.tsx b/packages/components/src/context-tag/context-tag.stories.tsx index ee5d1c7e..dfa702a0 100644 --- a/packages/components/src/context-tag/context-tag.stories.tsx +++ b/packages/components/src/context-tag/context-tag.stories.tsx @@ -9,7 +9,7 @@ const meta: Meta = { component: ContextTag, argTypes: { type: [ - 'default', + 'user', 'account', 'group', 'community', @@ -29,10 +29,10 @@ const meta: Meta = { type Story = StoryObj -export const Default: Story = { +export const user: Story = { args: { type: 'account', - user: { name: 'user name ', emoji: '🐷' }, + account: { name: 'user name ', emoji: '🐷' }, size: 24, outline: false, blur: false, @@ -43,15 +43,92 @@ export const AllVariants: Story = { args: {}, render: () => ( - + + , + }} + size={20} + /> + + + + + + + + } + type="icon" + label="Context" + size={20} + /> + + + + + , }} size={24} + textSize={13} /> + - } type="icon" label="Context" size={24} + textSize={13} + /> + - + , + }} + size={24} + textSize={15} + /> + + + + + + + + } + type="icon" + label="Context" + size={24} + textSize={15} + /> + + + + + - + + , + }} + size={20} + outline + /> + + + + + + + + } + type="icon" + label="Context" + size={20} + outline + /> + + + + + , }} size={24} + textSize={13} outline /> + - } type="icon" label="Context" size={24} + textSize={13} + outline + /> + - + , + }} + size={24} + textSize={15} + outline + /> + + + + + + + + } + type="icon" + label="Context" + size={24} + textSize={15} + outline + /> + + + + + - + + , + }} + size={20} + blur + /> + + + + + + + + } + type="icon" + label="Context" + size={20} + blur + /> + + + + + , }} size={24} + textSize={13} blur /> + - } type="icon" label="Context" size={24} + textSize={13} + blur + /> + - + , + }} + size={24} + textSize={15} + blur + /> + + + + + + + + } + type="icon" + label="Context" + size={24} + textSize={15} + blur + /> + + + + + , TextProps['size']> = { +const textSizes: Record< + Exclude, 24>, + Extract +> = { '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, 28 | 20> = { +const avatarSizes: Record< + NonNullable, + Extract +> = { '32': 28, '24': 20, + '20': 16, } -const Label = ({ - children, - size, - type = 'default', -}: { +const iconSizes: Record, IconProps['size']> = { + '32': 20, + '24': 12, + '20': 12, +} + +const Label = (props: { children: string - size: 24 | 32 + size: 13 | 15 type?: 'default' | 'monospace' -}) => ( - - {children} - -) +}) => { + const { children, size, type = 'default' } = props + + return ( + + {children} + + ) +} const ContextTag = (props: Props) => { const { size = 24, blur = false, outline, type } = props 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 = () => { switch (type) { - case 'default': { + case 'user': { return ( <> { src={props.user.src} name={props.user.name} /> - + ) } @@ -89,7 +119,7 @@ const ContextTag = (props: Props) => { src={props.community.src} name={props.community.name} /> - + ) } @@ -103,9 +133,9 @@ const ContextTag = (props: Props) => { name={props.channel.name} /> - + - + ) @@ -119,13 +149,13 @@ const ContextTag = (props: Props) => { src={props.token.src} name={props.token.name} /> - + ) } case 'address': { return ( -