@granto-umbrella/umbrella-components 3.0.50 → 3.0.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/umbrella-components.es.js +251 -244
- package/dist/umbrella-components.umd.js +48 -44
- package/package.json +136 -136
- package/src/assets/info.png +0 -0
- package/src/components/atoms/Tooltip/Tooltip.tsx +57 -0
- package/src/components/atoms/Tooltip/Tootip.styles.ts +153 -0
- package/src/components/atoms/Tooltip/tooltip.types.ts +10 -0
package/package.json
CHANGED
|
@@ -1,136 +1,136 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@granto-umbrella/umbrella-components",
|
|
3
|
-
"version": "3.0.
|
|
4
|
-
"description": "Umbrella Components for React",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "src/index.js",
|
|
7
|
-
"module": "src/index.js",
|
|
8
|
-
"repository": {
|
|
9
|
-
"type": "git",
|
|
10
|
-
"url": "https://github.com/grantoseguros/granto-umbrella-components.git"
|
|
11
|
-
},
|
|
12
|
-
"scripts": {
|
|
13
|
-
"dev": "vite",
|
|
14
|
-
"build": "tsc -b && vite build",
|
|
15
|
-
"commit": "cz",
|
|
16
|
-
"pr": "node scripts/open-pr.cjs",
|
|
17
|
-
"typecheck": "npm run typecheck:app && npm run typecheck:test",
|
|
18
|
-
"typecheck:app": "tsc -p tsconfig.app.json --noEmit",
|
|
19
|
-
"typecheck:test": "tsc -p tsconfig.test.json --noEmit",
|
|
20
|
-
"test": "jest --config=jest.config.mjs",
|
|
21
|
-
"test:ci": "jest --config=jest.config.mjs --coverage",
|
|
22
|
-
"test:related": "jest --config=jest.config.mjs -o",
|
|
23
|
-
"test:coverage": "jest --config jest.config.mjs --coverage --coverageReporters",
|
|
24
|
-
"lint": "eslint .",
|
|
25
|
-
"lint:staged": "eslint --max-warnings=0 --ignore-pattern 'storybook-static/**' --ignore-pattern 'coverage/**' --ignore-pattern 'dist/**'",
|
|
26
|
-
"format": "prettier -c .",
|
|
27
|
-
"format:check": "prettier --check .",
|
|
28
|
-
"format:write": "prettier -w .",
|
|
29
|
-
"prepare": "lefthook install",
|
|
30
|
-
"preview": "vite preview",
|
|
31
|
-
"storybook": "storybook dev -p 6006",
|
|
32
|
-
"build-storybook": "storybook build",
|
|
33
|
-
"build:storybook": "storybook build -o storybook-static",
|
|
34
|
-
"predeploy": "npm run build-storybook",
|
|
35
|
-
"deploy": "gh-pages -d storybook-static",
|
|
36
|
-
"version": "npm run build && git add .",
|
|
37
|
-
"release:patch": "npm version patch && git push && git push --tags",
|
|
38
|
-
"release:minor": "npm version minor && git push && git push --tags",
|
|
39
|
-
"release:major": "npm version major && git push && git push --tags",
|
|
40
|
-
"bump:patch": "npm version patch",
|
|
41
|
-
"bump:minor": "npm version minor",
|
|
42
|
-
"bump:major": "npm version major"
|
|
43
|
-
},
|
|
44
|
-
"config": {
|
|
45
|
-
"commitizen": {
|
|
46
|
-
"path": "cz-git"
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
"dependencies": {
|
|
50
|
-
"@hello-pangea/dnd": "^18.0.1",
|
|
51
|
-
"@phosphor-icons/react": "^2.1.10",
|
|
52
|
-
"@radix-ui/react-dialog": "^1.1.15",
|
|
53
|
-
"@radix-ui/react-label": "^2.1.3",
|
|
54
|
-
"@radix-ui/react-popover": "^1.1.11",
|
|
55
|
-
"@radix-ui/react-radio-group": "^1.2.4",
|
|
56
|
-
"cpf-cnpj-validator": "^1.0.3",
|
|
57
|
-
"date-fns": "^4.1.0",
|
|
58
|
-
"lucide-react": "^0.488.0",
|
|
59
|
-
"make-mask": "^1.0.3",
|
|
60
|
-
"phosphor-react": "^1.4.1",
|
|
61
|
-
"radix": "^0.0.0",
|
|
62
|
-
"react": "^18.3.1",
|
|
63
|
-
"react-datepicker": "^8.3.0",
|
|
64
|
-
"react-day-picker": "^9.6.7",
|
|
65
|
-
"react-dom": "^18.3.1",
|
|
66
|
-
"react-hook-form": "^7.63.0",
|
|
67
|
-
"react-router": "^6.30.1",
|
|
68
|
-
"react-router-dom": "^6.30.1",
|
|
69
|
-
"react-select": "^5.10.0",
|
|
70
|
-
"recharts": "^3.2.1",
|
|
71
|
-
"tailwind-merge": "^3.2.0"
|
|
72
|
-
},
|
|
73
|
-
"devDependencies": {
|
|
74
|
-
"@chromatic-com/storybook": "
|
|
75
|
-
"@commitlint/cli": "^20.1.0",
|
|
76
|
-
"@commitlint/config-conventional": "^20.0.0",
|
|
77
|
-
"@eslint/js": "^9.17.0",
|
|
78
|
-
"@storybook/addon-
|
|
79
|
-
"@storybook/addon-
|
|
80
|
-
"@storybook/
|
|
81
|
-
"@
|
|
82
|
-
"@
|
|
83
|
-
"@testing-library/
|
|
84
|
-
"@testing-library/
|
|
85
|
-
"@
|
|
86
|
-
"@types/
|
|
87
|
-
"@types/
|
|
88
|
-
"@types/
|
|
89
|
-
"@types/react": "^18.3.
|
|
90
|
-
"@types/
|
|
91
|
-
"@
|
|
92
|
-
"
|
|
93
|
-
"
|
|
94
|
-
"
|
|
95
|
-
"
|
|
96
|
-
"
|
|
97
|
-
"eslint": "^
|
|
98
|
-
"eslint-plugin-react-
|
|
99
|
-
"eslint-plugin-
|
|
100
|
-
"gh-pages": "^6.3.0",
|
|
101
|
-
"globals": "^15.13.0",
|
|
102
|
-
"identity-obj-proxy": "^3.0.0",
|
|
103
|
-
"jest": "^29.7.0",
|
|
104
|
-
"jest-environment-jsdom": "^29.7.0",
|
|
105
|
-
"jest-styled-components": "^7.2.0",
|
|
106
|
-
"lefthook": "^2.0.1",
|
|
107
|
-
"prettier": "^3.6.2",
|
|
108
|
-
"react-icons": "^5.4.0",
|
|
109
|
-
"styled-components": "^6.1.19",
|
|
110
|
-
"ts-jest": "^29.4.5",
|
|
111
|
-
"ts-node": "^10.9.2",
|
|
112
|
-
"typescript": "~5.6.2",
|
|
113
|
-
"typescript-eslint": "^8.18.1",
|
|
114
|
-
"vite": "^6.0.3"
|
|
115
|
-
},
|
|
116
|
-
"keywords": [
|
|
117
|
-
"cli",
|
|
118
|
-
"vite",
|
|
119
|
-
"components"
|
|
120
|
-
],
|
|
121
|
-
"eslintConfig": {
|
|
122
|
-
"extends": [
|
|
123
|
-
"plugin:storybook/recommended"
|
|
124
|
-
]
|
|
125
|
-
},
|
|
126
|
-
"engines": {
|
|
127
|
-
"node": "20.17.0",
|
|
128
|
-
"yarn": ">=1.22.18"
|
|
129
|
-
},
|
|
130
|
-
"files": [
|
|
131
|
-
"dist",
|
|
132
|
-
"src/**/*",
|
|
133
|
-
"!src/**/*.test.*",
|
|
134
|
-
"!src/**/*.stories.*"
|
|
135
|
-
]
|
|
136
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@granto-umbrella/umbrella-components",
|
|
3
|
+
"version": "3.0.51",
|
|
4
|
+
"description": "Umbrella Components for React",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "src/index.js",
|
|
7
|
+
"module": "src/index.js",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/grantoseguros/granto-umbrella-components.git"
|
|
11
|
+
},
|
|
12
|
+
"scripts": {
|
|
13
|
+
"dev": "vite",
|
|
14
|
+
"build": "tsc -b && vite build",
|
|
15
|
+
"commit": "cz",
|
|
16
|
+
"pr": "node scripts/open-pr.cjs",
|
|
17
|
+
"typecheck": "npm run typecheck:app && npm run typecheck:test",
|
|
18
|
+
"typecheck:app": "tsc -p tsconfig.app.json --noEmit",
|
|
19
|
+
"typecheck:test": "tsc -p tsconfig.test.json --noEmit",
|
|
20
|
+
"test": "jest --config=jest.config.mjs",
|
|
21
|
+
"test:ci": "jest --config=jest.config.mjs --coverage",
|
|
22
|
+
"test:related": "jest --config=jest.config.mjs -o",
|
|
23
|
+
"test:coverage": "jest --config jest.config.mjs --coverage --coverageReporters",
|
|
24
|
+
"lint": "eslint .",
|
|
25
|
+
"lint:staged": "eslint --max-warnings=0 --ignore-pattern 'storybook-static/**' --ignore-pattern 'coverage/**' --ignore-pattern 'dist/**'",
|
|
26
|
+
"format": "prettier -c .",
|
|
27
|
+
"format:check": "prettier --check .",
|
|
28
|
+
"format:write": "prettier -w .",
|
|
29
|
+
"prepare": "lefthook install",
|
|
30
|
+
"preview": "vite preview",
|
|
31
|
+
"storybook": "storybook dev -p 6006",
|
|
32
|
+
"build-storybook": "storybook build",
|
|
33
|
+
"build:storybook": "storybook build -o storybook-static",
|
|
34
|
+
"predeploy": "npm run build-storybook",
|
|
35
|
+
"deploy": "gh-pages -d storybook-static",
|
|
36
|
+
"version": "npm run build && git add .",
|
|
37
|
+
"release:patch": "npm version patch && git push && git push --tags",
|
|
38
|
+
"release:minor": "npm version minor && git push && git push --tags",
|
|
39
|
+
"release:major": "npm version major && git push && git push --tags",
|
|
40
|
+
"bump:patch": "npm version patch",
|
|
41
|
+
"bump:minor": "npm version minor",
|
|
42
|
+
"bump:major": "npm version major"
|
|
43
|
+
},
|
|
44
|
+
"config": {
|
|
45
|
+
"commitizen": {
|
|
46
|
+
"path": "cz-git"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
"dependencies": {
|
|
50
|
+
"@hello-pangea/dnd": "^18.0.1",
|
|
51
|
+
"@phosphor-icons/react": "^2.1.10",
|
|
52
|
+
"@radix-ui/react-dialog": "^1.1.15",
|
|
53
|
+
"@radix-ui/react-label": "^2.1.3",
|
|
54
|
+
"@radix-ui/react-popover": "^1.1.11",
|
|
55
|
+
"@radix-ui/react-radio-group": "^1.2.4",
|
|
56
|
+
"cpf-cnpj-validator": "^1.0.3",
|
|
57
|
+
"date-fns": "^4.1.0",
|
|
58
|
+
"lucide-react": "^0.488.0",
|
|
59
|
+
"make-mask": "^1.0.3",
|
|
60
|
+
"phosphor-react": "^1.4.1",
|
|
61
|
+
"radix": "^0.0.0",
|
|
62
|
+
"react": "^18.3.1",
|
|
63
|
+
"react-datepicker": "^8.3.0",
|
|
64
|
+
"react-day-picker": "^9.6.7",
|
|
65
|
+
"react-dom": "^18.3.1",
|
|
66
|
+
"react-hook-form": "^7.63.0",
|
|
67
|
+
"react-router": "^6.30.1",
|
|
68
|
+
"react-router-dom": "^6.30.1",
|
|
69
|
+
"react-select": "^5.10.0",
|
|
70
|
+
"recharts": "^3.2.1",
|
|
71
|
+
"tailwind-merge": "^3.2.0"
|
|
72
|
+
},
|
|
73
|
+
"devDependencies": {
|
|
74
|
+
"@chromatic-com/storybook": "4.1.3",
|
|
75
|
+
"@commitlint/cli": "^20.1.0",
|
|
76
|
+
"@commitlint/config-conventional": "^20.0.0",
|
|
77
|
+
"@eslint/js": "^9.17.0",
|
|
78
|
+
"@storybook/addon-docs": "10.1.6",
|
|
79
|
+
"@storybook/addon-onboarding": "10.1.6",
|
|
80
|
+
"@storybook/react-vite": "10.1.6",
|
|
81
|
+
"@testing-library/dom": "^10.4.1",
|
|
82
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
83
|
+
"@testing-library/react": "^16.3.0",
|
|
84
|
+
"@testing-library/user-event": "^14.6.1",
|
|
85
|
+
"@types/jest": "^30.0.0",
|
|
86
|
+
"@types/mocha": "^10.0.10",
|
|
87
|
+
"@types/node": "^24.9.2",
|
|
88
|
+
"@types/react": "^18.3.17",
|
|
89
|
+
"@types/react-dom": "^18.3.5",
|
|
90
|
+
"@types/styled-components": "^5.1.34",
|
|
91
|
+
"@vitejs/plugin-react": "^4.7.0",
|
|
92
|
+
"babel-plugin-styled-components": "^2.1.4",
|
|
93
|
+
"commitizen": "^4.3.1",
|
|
94
|
+
"commitlint": "^20.1.0",
|
|
95
|
+
"cz-git": "^1.12.0",
|
|
96
|
+
"eslint": "^9.17.0",
|
|
97
|
+
"eslint-plugin-react-hooks": "^5.0.0",
|
|
98
|
+
"eslint-plugin-react-refresh": "^0.4.16",
|
|
99
|
+
"eslint-plugin-storybook": "10.1.6",
|
|
100
|
+
"gh-pages": "^6.3.0",
|
|
101
|
+
"globals": "^15.13.0",
|
|
102
|
+
"identity-obj-proxy": "^3.0.0",
|
|
103
|
+
"jest": "^29.7.0",
|
|
104
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
105
|
+
"jest-styled-components": "^7.2.0",
|
|
106
|
+
"lefthook": "^2.0.1",
|
|
107
|
+
"prettier": "^3.6.2",
|
|
108
|
+
"react-icons": "^5.4.0",
|
|
109
|
+
"styled-components": "^6.1.19",
|
|
110
|
+
"ts-jest": "^29.4.5",
|
|
111
|
+
"ts-node": "^10.9.2",
|
|
112
|
+
"typescript": "~5.6.2",
|
|
113
|
+
"typescript-eslint": "^8.18.1",
|
|
114
|
+
"vite": "^6.0.3"
|
|
115
|
+
},
|
|
116
|
+
"keywords": [
|
|
117
|
+
"cli",
|
|
118
|
+
"vite",
|
|
119
|
+
"components"
|
|
120
|
+
],
|
|
121
|
+
"eslintConfig": {
|
|
122
|
+
"extends": [
|
|
123
|
+
"plugin:storybook/recommended"
|
|
124
|
+
]
|
|
125
|
+
},
|
|
126
|
+
"engines": {
|
|
127
|
+
"node": "20.17.0",
|
|
128
|
+
"yarn": ">=1.22.18"
|
|
129
|
+
},
|
|
130
|
+
"files": [
|
|
131
|
+
"dist",
|
|
132
|
+
"src/**/*",
|
|
133
|
+
"!src/**/*.test.*",
|
|
134
|
+
"!src/**/*.stories.*"
|
|
135
|
+
]
|
|
136
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
|
|
2
|
+
import React, { useState } from 'react';
|
|
3
|
+
import {
|
|
4
|
+
TooltipContainer,
|
|
5
|
+
TooltipTrigger,
|
|
6
|
+
TooltipContent,
|
|
7
|
+
TooltipText,
|
|
8
|
+
TooltipLink,
|
|
9
|
+
} from '../Tooltip/Tootip.styles';
|
|
10
|
+
import { TooltipProps } from './tooltip.types';
|
|
11
|
+
import { ArrowSquareOut } from '@phosphor-icons/react';
|
|
12
|
+
import info from "../../../assets/info.png";
|
|
13
|
+
|
|
14
|
+
const Tooltip: React.FC<TooltipProps> = ({
|
|
15
|
+
children,
|
|
16
|
+
content,
|
|
17
|
+
position = 'top',
|
|
18
|
+
helpLink,
|
|
19
|
+
}) => {
|
|
20
|
+
const [visible, setVisible] = useState(false);
|
|
21
|
+
|
|
22
|
+
const handleMouseEnter = () => {
|
|
23
|
+
setVisible(true);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const handleMouseLeave = () => {
|
|
27
|
+
setVisible(false);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<TooltipContainer>
|
|
32
|
+
{children}
|
|
33
|
+
<TooltipTrigger
|
|
34
|
+
onMouseEnter={handleMouseEnter}
|
|
35
|
+
onMouseLeave={handleMouseLeave}
|
|
36
|
+
>
|
|
37
|
+
<img src={info} alt="Informação" />
|
|
38
|
+
</TooltipTrigger>
|
|
39
|
+
<TooltipContent
|
|
40
|
+
$position={position}
|
|
41
|
+
$visible={visible}
|
|
42
|
+
onMouseEnter={handleMouseEnter}
|
|
43
|
+
onMouseLeave={handleMouseLeave}
|
|
44
|
+
>
|
|
45
|
+
<TooltipText>{content}</TooltipText>
|
|
46
|
+
{helpLink && (
|
|
47
|
+
<TooltipLink href={helpLink} target="_blank" rel="noopener noreferrer">
|
|
48
|
+
Saiba mais
|
|
49
|
+
<ArrowSquareOut size={12} weight="bold" />
|
|
50
|
+
</TooltipLink>
|
|
51
|
+
)}
|
|
52
|
+
</TooltipContent>
|
|
53
|
+
</TooltipContainer>
|
|
54
|
+
);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export default Tooltip;
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
|
|
2
|
+
import styled, { css } from 'styled-components';
|
|
3
|
+
import {
|
|
4
|
+
semanticColors,
|
|
5
|
+
primitiveColors,
|
|
6
|
+
semanticSizes,
|
|
7
|
+
semanticRadius,
|
|
8
|
+
typographyTokens,
|
|
9
|
+
} from '../../../styles/tokens';
|
|
10
|
+
import { TooltipPosition } from './tooltip.types';
|
|
11
|
+
|
|
12
|
+
const arrowSize = '8px';
|
|
13
|
+
|
|
14
|
+
const positionStyles = {
|
|
15
|
+
top: css`
|
|
16
|
+
bottom: calc(100% + 12px);
|
|
17
|
+
left: 50%;
|
|
18
|
+
transform: translateX(-50%);
|
|
19
|
+
|
|
20
|
+
&::after {
|
|
21
|
+
content: '';
|
|
22
|
+
position: absolute;
|
|
23
|
+
top: 100%;
|
|
24
|
+
left: 50%;
|
|
25
|
+
transform: translateX(-50%);
|
|
26
|
+
border-left: ${arrowSize} solid transparent;
|
|
27
|
+
border-right: ${arrowSize} solid transparent;
|
|
28
|
+
border-top: ${arrowSize} solid ${primitiveColors.base.white};
|
|
29
|
+
}
|
|
30
|
+
`,
|
|
31
|
+
bottom: css`
|
|
32
|
+
top: calc(100% + 12px);
|
|
33
|
+
left: 50%;
|
|
34
|
+
transform: translateX(-50%);
|
|
35
|
+
|
|
36
|
+
&::after {
|
|
37
|
+
content: '';
|
|
38
|
+
position: absolute;
|
|
39
|
+
bottom: 100%;
|
|
40
|
+
left: 50%;
|
|
41
|
+
transform: translateX(-50%);
|
|
42
|
+
border-left: ${arrowSize} solid transparent;
|
|
43
|
+
border-right: ${arrowSize} solid transparent;
|
|
44
|
+
border-bottom: ${arrowSize} solid ${primitiveColors.base.white};
|
|
45
|
+
}
|
|
46
|
+
`,
|
|
47
|
+
left: css`
|
|
48
|
+
right: calc(100% + 12px);
|
|
49
|
+
top: 50%;
|
|
50
|
+
transform: translateY(-50%);
|
|
51
|
+
|
|
52
|
+
&::after {
|
|
53
|
+
content: '';
|
|
54
|
+
position: absolute;
|
|
55
|
+
left: 100%;
|
|
56
|
+
top: 50%;
|
|
57
|
+
transform: translateY(-50%);
|
|
58
|
+
border-top: ${arrowSize} solid transparent;
|
|
59
|
+
border-bottom: ${arrowSize} solid transparent;
|
|
60
|
+
border-left: ${arrowSize} solid ${primitiveColors.base.white};
|
|
61
|
+
}
|
|
62
|
+
`,
|
|
63
|
+
right: css`
|
|
64
|
+
left: calc(100% + 12px);
|
|
65
|
+
top: 50%;
|
|
66
|
+
transform: translateY(-50%);
|
|
67
|
+
|
|
68
|
+
&::after {
|
|
69
|
+
content: '';
|
|
70
|
+
position: absolute;
|
|
71
|
+
right: 100%;
|
|
72
|
+
top: 50%;
|
|
73
|
+
transform: translateY(-50%);
|
|
74
|
+
border-top: ${arrowSize} solid transparent;
|
|
75
|
+
border-bottom: ${arrowSize} solid transparent;
|
|
76
|
+
border-right: ${arrowSize} solid ${primitiveColors.base.white};
|
|
77
|
+
}
|
|
78
|
+
`,
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
export const TooltipContainer = styled.div`
|
|
82
|
+
position: relative;
|
|
83
|
+
display: inline-flex;
|
|
84
|
+
align-items: center;
|
|
85
|
+
gap: ${semanticSizes.global.gap.xs};
|
|
86
|
+
`;
|
|
87
|
+
|
|
88
|
+
export const TooltipTrigger = styled.div`
|
|
89
|
+
display: inline-flex;
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
|
|
92
|
+
img {
|
|
93
|
+
width: 16px;
|
|
94
|
+
height: 16px;
|
|
95
|
+
color: ${semanticColors.global.text.subtitle.enabled};
|
|
96
|
+
opacity: 0.7;
|
|
97
|
+
transition: opacity 0.2s ease;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&:hover img {
|
|
101
|
+
opacity: 1;
|
|
102
|
+
}
|
|
103
|
+
`;
|
|
104
|
+
|
|
105
|
+
export const TooltipContent = styled.div<{
|
|
106
|
+
$position: TooltipPosition;
|
|
107
|
+
$visible: boolean;
|
|
108
|
+
}>`
|
|
109
|
+
position: absolute;
|
|
110
|
+
background: ${primitiveColors.base.white};
|
|
111
|
+
color: ${primitiveColors.gray[900]};
|
|
112
|
+
padding: ${semanticSizes.global.padding.md};
|
|
113
|
+
border-radius: ${semanticRadius.global.radius.md};
|
|
114
|
+
font-size: ${typographyTokens.fontSizes.captionM};
|
|
115
|
+
line-height: ${typographyTokens.lineHeights.captionM};
|
|
116
|
+
max-width: 280px;
|
|
117
|
+
min-width: 200px;
|
|
118
|
+
z-index: 1000;
|
|
119
|
+
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
|
|
120
|
+
border: 1px solid ${primitiveColors.gray[200]};
|
|
121
|
+
white-space: normal;
|
|
122
|
+
word-wrap: break-word;
|
|
123
|
+
|
|
124
|
+
opacity: ${({ $visible }) => ($visible ? '1' : '0')};
|
|
125
|
+
visibility: ${({ $visible }) => ($visible ? 'visible' : 'hidden')};
|
|
126
|
+
transition: opacity 0.2s ease, visibility 0.2s ease;
|
|
127
|
+
pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};
|
|
128
|
+
|
|
129
|
+
${({ $position }) => positionStyles[$position]}
|
|
130
|
+
`;
|
|
131
|
+
|
|
132
|
+
export const TooltipText = styled.p`
|
|
133
|
+
margin: 0 0 ${semanticSizes.global.gap.sm} 0;
|
|
134
|
+
color: ${primitiveColors.gray[800]};
|
|
135
|
+
font-size: ${typographyTokens.fontSizes.captionM};
|
|
136
|
+
line-height: ${typographyTokens.lineHeights.captionM};
|
|
137
|
+
`;
|
|
138
|
+
|
|
139
|
+
export const TooltipLink = styled.a`
|
|
140
|
+
color: ${primitiveColors.blue[600]};
|
|
141
|
+
text-decoration: underline;
|
|
142
|
+
font-weight: ${typographyTokens.fontWeights.medium};
|
|
143
|
+
font-size: ${typographyTokens.fontSizes.captionM};
|
|
144
|
+
display: inline-flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
gap: 4px;
|
|
147
|
+
margin-top: ${semanticSizes.global.gap.xs};
|
|
148
|
+
|
|
149
|
+
&:hover {
|
|
150
|
+
color: ${primitiveColors.blue[800]};
|
|
151
|
+
}
|
|
152
|
+
`;
|
|
153
|
+
|