Skip to content

Commit

Permalink
feat: set collect arrow position
Browse files Browse the repository at this point in the history
  • Loading branch information
Pridesd committed Jun 29, 2024
1 parent 946b3b1 commit 5e84cbe
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 22 deletions.
22 changes: 8 additions & 14 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
'use client'

import { Button, Chip, ChipButton, QRCode, Typography } from '@/components'
import Tooltip from '@/components/tooltip'

const Home = () => {
return (
Expand All @@ -23,21 +26,12 @@ const Home = () => {
<Typography size="body2">Typography</Typography>
<Typography size="body3">Typography</Typography>
<Typography size="body4">Typography</Typography>
<Chip size="sm" fontSize="h7" colorScheme="orange">
진영 Pick
</Chip>
<Chip size="md" fontSize="body3" colorScheme="neutral-400">
🍝 태그설명
</Chip>
<Chip size="md" fontSize="body3" colorScheme="orange">
🍝 태그설명
</Chip>
<Chip size="lg" fontSize="body0" colorScheme="neutral-500">
도라방스
</Chip>
<ChipButton rightIcon={{ type: 'close' }}>한우갈비</ChipButton>

<Tooltip label="아아아아아아아" onClose={() => null}>
테스트 테스트
</Tooltip>
</main>
)
}

export default Home
export default Home
3 changes: 3 additions & 0 deletions src/components/common/icons/RoundedTriangle.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/components/common/icons/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import HeartStraightOutlined from './HeartStraightOutlined.svg'
import Info from './Info.svg'
import InfoCircle from './InfoCircle.svg'
import Plus from './Plus.svg'
import RoundedTriangle from './RoundedTriangle.svg'
import Search from './Search.svg'
import ShareNetwork from './ShareNetwork.svg'
import SignOut from './SignOut.svg'
Expand All @@ -26,6 +27,7 @@ export const icons = {
info: Info,
infoCircle: InfoCircle,
plus: Plus,
roundedTriangle: RoundedTriangle,
search: Search,
shareNetwork: ShareNetwork,
signOut: SignOut,
Expand Down
25 changes: 18 additions & 7 deletions src/components/tooltip/index.tsx → src/components/tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,24 @@ import { HTMLAttributes, forwardRef } from 'react'

import cn from '@/utils/cn'
import { VariantProps, cva } from 'class-variance-authority'
import AccessibleIconButton from '../accessible-icon-button'
import AccessibleIconButton from './accessible-icon-button'
import Typography from './common/typography'
import RoundedTriangle from './common/icons/RoundedTriangle.svg'
import { Icon } from '.'

/* Polygon 3 */

const TooltipVariants = cva<{
color: Record<'orange' | 'neutral', string>
size: Record<'sm' | 'md' | 'lg', string>
}>(
`absolute whitespace-nowrap flex gap-2.5 items-center z-10 text-white rounded-full left-0 top-[calc(100%+20px)] after:content-[''] after:absolute after:border-8 after:rounded-sm after:bottom-[calc(100%-11px)] after:left-6 after:rotate-45`,
`absolute whitespace-nowrap flex gap-2.5 items-center z-10 text-white rounded-full left-0 top-[calc(100%+20px)]
`,
{
variants: {
color: {
neutral: `bg-neutral-500 after:border-neutral-500`,
orange: `bg-orange-400 after:border-orange-400`,
neutral: `bg-neutral-500`,
orange: `bg-orange-400`,
},
size: {
lg: 'px-7 py-5 ',
Expand All @@ -40,24 +46,29 @@ interface TooltipProps
const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
({ size, color, className, label, children, onClose, ...props }, ref) => {
return (
<div className="relative">
<div className="relative ">
{children}
<div
role="tooltip"
{...props}
ref={ref}
className={cn(TooltipVariants({ color, size }), className)}
>
<span className="text-white font-bold leading-tight text-[15px]">
<Typography size="h5-2" className="text-white">
{label}
</span>
</Typography>
<Icon
type="roundedTriangle"
className="absolute bottom-[calc(100%-6px)] left-5 w-[22px] h-[18px]"
/>
<AccessibleIconButton
label="닫기"
icon={{
type: 'close',
onClick: onClose,
stroke: 'neutral-000',
'aria-hidden': true,
size: 'sm',
}}
/>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react'

import Tooltip from '@/components/tooltip/index'
import Tooltip from '@/components/tooltip'

const meta = {
title: 'DesignSystem/Tooltip',
Expand Down

0 comments on commit 5e84cbe

Please sign in to comment.