* add tag

* add next-env.d.ts

* fix gap

* use $full token for borderRadius

* remove comments

* fix system message render

* fix action type

* rm next-env.d.ts
This commit is contained in:
Felicio Mununga 2023-04-12 16:36:00 +02:00 committed by GitHub
parent c9ae7f8fe2
commit d858c8e0a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 138 additions and 4 deletions

View File

@ -32,7 +32,7 @@ export const AllVariants: Story = {
timestamp="11:12"
type="deleted"
text="Message deleted for you"
action={{ label: 'Undo', onClick: action('undo') }}
action={{ label: 'Undo', onPress: action('undo') }}
state={state}
/>
<SystemMessage

View File

@ -34,7 +34,7 @@ type Props = {
text: string
action?: {
label: string
onClick: () => void
onPress: () => void
}
}
| {
@ -47,7 +47,7 @@ type Props = {
const SystemMessage = (props: Props) => {
const { state = 'default', timestamp, type } = props
const renderMessage = (type: 'pinned' | 'deleted' | 'added') => {
const renderMessage = () => {
switch (type) {
case 'pinned':
return (
@ -89,7 +89,7 @@ const SystemMessage = (props: Props) => {
type === 'deleted' && state === 'landed' ? 'landed_deleted' : state
}
>
{renderMessage(type)}
{renderMessage()}
</Base>
)
}

View File

@ -0,0 +1 @@
export { Tag } from './tag'

View File

@ -0,0 +1,46 @@
import { Stack } from '@tamagui/core'
import { Tag } from './tag'
import type { Meta, StoryObj } from '@storybook/react'
const meta: Meta<typeof Tag> = {
component: Tag,
argTypes: {},
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=180-9685&t=tDEqIV09qddTZgXF-4',
},
},
}
type Story = StoryObj<typeof Tag>
export const Default: Story = {
render: () => {
return (
<Stack space flexDirection="row">
<Stack space alignItems="flex-start">
<Tag emoji="🐷" label="Tag" size={32} />
<Tag emoji="🐷" label="Tag" size={32} selected />
<Tag emoji="🐷" label="Tag" size={32} disabled />
<Tag emoji="🐷" size={32} />
<Tag emoji="🐷" label="Tag" size={24} />
<Tag emoji="🐷" size={24} />
</Stack>
<Stack space alignItems="flex-start">
<Tag label="Tag" size={32} />
<Tag label="Tag" size={32} selected />
<Tag label="Tag" size={32} disabled />
<Tag label="Tag" size={24} />
</Stack>
</Stack>
)
},
}
export default meta

View File

@ -0,0 +1,87 @@
import { Stack, styled } from '@tamagui/core'
import { Text } from '../text'
import type { TextProps } from '../text'
type Props = {
size: 32 | 24
emoji?: string
label?: string
selected?: boolean
disabled?: boolean
}
const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = {
'32': 15,
'24': 13,
}
const Tag = (props: Props) => {
const { size, emoji, label, selected, disabled } = props
return (
<Base
size={size}
selected={selected}
disabled={disabled}
emojiOnly={Boolean(emoji && !label)}
>
{emoji && <Text size={textSizes[size]}>{emoji}</Text>}
{label && (
<Text size={textSizes[size]} weight="medium">
{label}
</Text>
)}
</Base>
)
}
const Base = styled(Stack, {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderColor: '$neutral-20',
borderRadius: '$full',
variants: {
size: {
32: {
height: 32,
minWidth: 32,
paddingHorizontal: 12,
gap: 6,
},
24: {
height: 24,
minWidth: 24,
paddingHorizontal: 8,
gap: 5,
},
},
selected: {
true: {
backgroundColor: '$primary-50-opa-10',
borderColor: '$primary-50',
},
},
disabled: {
true: {
opacity: 0.3,
cursor: 'default',
},
},
emojiOnly: {
true: {
paddingHorizontal: 0,
},
},
},
})
export { Tag }