Skip to content

Commit 11c09e7

Browse files
devpedrodiassdevpedrodiass
committed
feat: Toast and Tooltip Component
1 parent c151dfe commit 11c09e7

12 files changed

Lines changed: 280 additions & 3 deletions

File tree

‎packages/docs/src/stories/Toast.stories.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import type { StoryObj, Meta } from '@storybook/react'
2+
import { Toast, ToastProps } from '@pearl-ui/react'
3+
import React from 'react'
4+
5+
export default {
6+
title: 'Components/Toast',
7+
component: Toast,
8+
args: {
9+
title: 'This is a Toast',
10+
description: 'Description',
11+
},
12+
argTypes: {
13+
title: {
14+
control: {
15+
type: 'text',
16+
},
17+
},
18+
description: {
19+
control: {
20+
type: 'text',
21+
},
22+
},
23+
variant: {
24+
options: ['default', 'success', 'warning', 'error'],
25+
control: {
26+
type: 'inline-radio',
27+
},
28+
},
29+
onClose: {
30+
action: 'clicked',
31+
},
32+
},
33+
} as Meta<ToastProps>
34+
35+
export const Default: StoryObj<ToastProps> = {}
36+
export const Success: StoryObj<ToastProps> = {
37+
args: {
38+
variant: 'success',
39+
},
40+
}
41+
export const Warning: StoryObj<ToastProps> = {
42+
args: {
43+
variant: 'warning',
44+
},
45+
}
46+
export const Error: StoryObj<ToastProps> = {
47+
args: {
48+
variant: 'error',
49+
},
50+
}

‎packages/docs/src/stories/Tooltip.stories.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import type { StoryObj, Meta } from '@storybook/react'
2+
import { Box, Button, Tooltip, TooltipProps } from '@pearl-ui/react'
3+
import React from 'react'
4+
5+
export default {
6+
title: 'Components/Tooltip',
7+
component: Tooltip,
8+
args: {
9+
text: 'This is a Tooltip',
10+
children: <Button>Hover me</Button>,
11+
},
12+
argTypes: {
13+
children: {
14+
control: {
15+
type: 'null',
16+
},
17+
},
18+
},
19+
decorators: [
20+
(Story) => (
21+
<Box
22+
css={{
23+
height: '100vh',
24+
display: 'flex',
25+
justifyContent: 'center',
26+
alignItems: 'center',
27+
}}
28+
>
29+
{Story()}
30+
</Box>
31+
),
32+
],
33+
} as Meta<TooltipProps>
34+
35+
export const Primary: StoryObj<TooltipProps> = {}

‎packages/react/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# @pearl-ui/react
22

3+
## 3.0.0
4+
5+
### Major Changes
6+
7+
- Tooltip and Toast Component
8+
39
## 2.0.0
410

511
### Major Changes

‎packages/react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@pearl-ui/react",
3-
"version": "2.0.0",
3+
"version": "3.0.0",
44
"description": "",
55
"main": "dist/index.js",
66
"module": "dist/index.mjs",

‎packages/react/src/components/Toast/index.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { X } from 'phosphor-react'
2+
import React, { ComponentProps } from 'react'
3+
import { Text } from '../Text'
4+
import {
5+
StyledText,
6+
TitleContainer,
7+
ToastContainer,
8+
StyledButton,
9+
} from './styles'
10+
11+
export function Toast({ title, description, variant, onClose }: ToastProps) {
12+
return (
13+
<ToastContainer variant={variant}>
14+
<TitleContainer>
15+
<Text size="lg">{title}</Text>
16+
<StyledButton
17+
onClick={onClose}
18+
variant={'tertiary'}
19+
size="sm"
20+
type="button"
21+
>
22+
<X size={24} />
23+
</StyledButton>
24+
</TitleContainer>
25+
<StyledText>{description}</StyledText>
26+
</ToastContainer>
27+
)
28+
}
29+
30+
export interface ToastProps extends ComponentProps<typeof ToastContainer> {
31+
title: string
32+
description: string
33+
onClose: () => void
34+
}
35+
36+
Toast.displayName = 'Toast'

‎packages/react/src/components/Toast/styles.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { styled } from "../../styles";
2+
import { Box } from "../Box";
3+
import { Button } from "../Button";
4+
import { Text } from "../Text";
5+
6+
export const ToastContainer = styled(Box, {
7+
position: 'fixed',
8+
bottom: '10px',
9+
right: '10px',
10+
zIndex: '9999',
11+
minWidth: 180,
12+
maxHeight: 82,
13+
14+
variants: {
15+
variant: {
16+
default: {
17+
border: '2px solid $gray800',
18+
},
19+
success: {
20+
border: '2px solid $pearl500',
21+
},
22+
warning: {
23+
border: '2px solid $yellow300',
24+
},
25+
error: {
26+
border: '2px solid $red300',
27+
}
28+
}
29+
},
30+
31+
defaultVariant: {
32+
variant: 'default'
33+
}
34+
})
35+
36+
export const TitleContainer = styled('div', {
37+
display: 'flex',
38+
alignItems: 'center',
39+
justifyContent: 'space-between',
40+
gap: '0.5rem',
41+
color: '$white',
42+
p: {
43+
fontWeight: 'bold',
44+
},
45+
svg: {
46+
color: '$gray200'
47+
}
48+
})
49+
50+
export const StyledButton = styled(Button, {
51+
minWidth: 30,
52+
padding: '0px 0px',
53+
})
54+
55+
export const StyledText = styled(Text, {
56+
color: '$gray400'
57+
})

‎packages/react/src/components/Tooltip/index.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
import { Text } from '../Text'
3+
import {
4+
TooltipArrow,
5+
TooltipContainer,
6+
TooltipContent,
7+
TooltipPopup,
8+
} from './styles'
9+
10+
export interface TooltipProps {
11+
text: string
12+
children: React.ReactNode
13+
}
14+
15+
export function Tooltip({ text, children }: TooltipProps) {
16+
return (
17+
<TooltipContainer>
18+
{children}
19+
<TooltipPopup role="tooltip">
20+
<TooltipContent>
21+
<Text>{text}</Text>
22+
<TooltipArrow />
23+
</TooltipContent>
24+
</TooltipPopup>
25+
</TooltipContainer>
26+
)
27+
}
28+
29+
Tooltip.displayName = 'Tooltip'

‎packages/react/src/components/Tooltip/styles.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { styled } from '../../styles'
2+
3+
export const TooltipContainer = styled('div', {
4+
display: 'flex',
5+
alignItems: 'center',
6+
position: 'relative',
7+
'&:hover': {
8+
'& > [role=tooltip]': {
9+
opacity: 1,
10+
},
11+
},
12+
})
13+
14+
export const TooltipPopup = styled('div', {
15+
position: 'absolute',
16+
zIndex: 1000,
17+
minWidth: 180,
18+
height: 'calc(44px - 1.5rem)',
19+
backgroundColor: '$gray900',
20+
padding: '0.75rem 1rem',
21+
borderRadius: '$sm',
22+
top: '-50px',
23+
left: '50%',
24+
transform: 'translateX(-50%)',
25+
opacity: 0,
26+
27+
boxShadow: '0 0 0 1px $colors$gray900, 0 4px 5px $colors$gray900',
28+
})
29+
30+
export const TooltipContent = styled('div', {
31+
position: 'relative',
32+
width: '100%',
33+
height: '100%',
34+
display: 'flex',
35+
alignItems: 'center',
36+
justifyContent: 'center',
37+
textAlign: 'center',
38+
39+
'&::after': {
40+
content: '',
41+
position: 'absolute',
42+
width: 0,
43+
height: 0,
44+
borderWidth: '10px',
45+
borderStyle: 'solid',
46+
borderColor: '$gray900 transparent transparent transparent',
47+
bottom: '-35px',
48+
left: '50%',
49+
right: '50%',
50+
transform: 'translateX(-50%)',
51+
},
52+
})
53+
54+
export const TooltipArrow = styled('span', {})

‎packages/react/src/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,5 @@ export * from './components/TextInput'
1010
export * from './components/TextArea'
1111
export * from './components/Checkbox'
1212
export * from './components/MultiStep'
13+
export * from './components/Toast'
14+
export * from './components/Tooltip'

‎packages/tokens/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# @pearl-ui/tokens
22

3+
## 3.0.0
4+
5+
### Major Changes
6+
7+
- Tooltip and Toast Component
8+
39
## 2.1.0
410

511
### Minor Changes

0 commit comments

Comments
 (0)