forked from hexbear-collective/hexbear-frontend
5 changed files with 132 additions and 1 deletions
-
1package.json
-
2src/components/ErrorFallback.tsx
-
32src/components/Tooltip.tsx
-
60src/stories/Tooltip.stories.tsx
-
38yarn.lock
@ -0,0 +1,32 @@ |
|||
import React from 'react'; |
|||
import ReachTooltip, { TooltipProps } from '@reach/tooltip'; |
|||
|
|||
// const centered = (triggerRect, tooltipRect) => {
|
|||
// const triggerCenter = triggerRect.left + triggerRect.width / 2;
|
|||
// const left = triggerCenter - tooltipRect.width / 2;
|
|||
// const maxLeft = window.innerWidth - tooltipRect.width - 2;
|
|||
// return {
|
|||
// left: Math.min(Math.max(2, left), maxLeft) + window.scrollX,
|
|||
// top: triggerRect.bottom + 8 + window.scrollY,
|
|||
// };
|
|||
// };
|
|||
|
|||
export default function Tooltip({ |
|||
style, |
|||
...props |
|||
}: { style?: React.CSSProperties } & TooltipProps) { |
|||
return ( |
|||
<ReachTooltip |
|||
isVisible |
|||
style={{ |
|||
background: 'hsla(0, 0%, 0%, 0.75)', |
|||
color: 'white', |
|||
border: 'none', |
|||
borderRadius: '4px', |
|||
padding: '0.5em 1em', |
|||
...style, |
|||
}} |
|||
{...props} |
|||
/> |
|||
); |
|||
} |
@ -0,0 +1,60 @@ |
|||
import React, { useState } from 'react'; |
|||
import { |
|||
Box, |
|||
Label, |
|||
Input, |
|||
Select, |
|||
Textarea, |
|||
Radio, |
|||
Flex, |
|||
Checkbox, |
|||
Slider, |
|||
} from 'theme-ui'; |
|||
import '@reach/tooltip/styles.css'; |
|||
import Button from '../components/elements/Button'; |
|||
import { Icon } from '../components/icon'; |
|||
import { ThemeSystemProvider } from '../components/ThemeSystemProvider'; |
|||
import { themes } from '../theme'; |
|||
import Tooltip from '../components/Tooltip'; |
|||
import Block from '../components/elements/Block'; |
|||
|
|||
export default { title: 'Tooltip' }; |
|||
|
|||
export const Basic = () => { |
|||
return ( |
|||
<Block> |
|||
<Block> |
|||
<Tooltip label="Settings"> |
|||
<Icon name="settings" /> |
|||
</Tooltip> |
|||
</Block> |
|||
{/* {Object.keys(themes).map(theme => { |
|||
return ( |
|||
<ThemeSystemProvider key={theme} initialTheme={theme}> |
|||
<Box bg="background" p={2}> |
|||
<Button mx={1}>Primary</Button> |
|||
<Button variant="secondary" mx={1}> |
|||
Secondary |
|||
</Button> |
|||
<Button variant="highlight" mx={1}> |
|||
Highlight |
|||
</Button> |
|||
<Button variant="muted" mx={1}> |
|||
Muted |
|||
</Button> |
|||
<Button disabled mx={1}> |
|||
Disabled |
|||
</Button> |
|||
<Button variant="danger" mx={1}> |
|||
Danger |
|||
</Button> |
|||
<Button variant="outline" mx={1}> |
|||
Outline |
|||
</Button> |
|||
</Box> |
|||
</ThemeSystemProvider> |
|||
); |
|||
})} */} |
|||
</Block> |
|||
); |
|||
}; |
@ -1820,6 +1820,14 @@ |
|||
"@reach/utils" "0.10.5" |
|||
tslib "^2.0.0" |
|||
|
|||
"@reach/[email protected]": |
|||
version "0.11.2" |
|||
resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.11.2.tgz#19a671be9ff010a345892b81e710cb6e4d9f9762" |
|||
integrity sha512-/53A/rY5oX2Y7D5TpvsP+V5cSd+4MPY6f21mAmVn4DCVwpkCFOlJ059ZL7ixS85M0Jz48YQnnvBJUqwkxqUG/g== |
|||
dependencies: |
|||
"@reach/utils" "0.11.2" |
|||
tslib "^2.0.0" |
|||
|
|||
"@reach/[email protected]": |
|||
version "0.10.5" |
|||
resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.10.5.tgz#ba68722f155b146c6790e7d10a97dca1fd7ab14e" |
|||
@ -1830,6 +1838,16 @@ |
|||
prop-types "^15.7.2" |
|||
tslib "^2.0.0" |
|||
|
|||
"@reach/[email protected]": |
|||
version "0.11.2" |
|||
resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.11.2.tgz#bc92f97f87e81d1307054fd41c40874d3fbf5491" |
|||
integrity sha512-eoUWayAADi1ITtrc+8jN9NsBTUkfpORkOs5bQb4RnR6UA/3zlxo5VPuxWgWAG0BCohZlqsxg7NpvckNAyaiAAQ== |
|||
dependencies: |
|||
"@reach/observe-rect" "1.2.0" |
|||
"@reach/utils" "0.11.2" |
|||
prop-types "^15.7.2" |
|||
tslib "^2.0.0" |
|||
|
|||
"@reach/[email protected]^1.2.1", "@reach/[email protected]^1.3.3": |
|||
version "1.3.4" |
|||
resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.4.tgz#d2574b19370a70c80480ed91f3da840136d10f8c" |
|||
@ -1851,6 +1869,19 @@ |
|||
prop-types "^15.7.2" |
|||
tslib "^2.0.0" |
|||
|
|||
"@reach/[email protected]^0.11.2": |
|||
version "0.11.2" |
|||
resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.11.2.tgz#db5c11fa72995801baac157db46f5bb6cacd494b" |
|||
integrity sha512-aTi3aLkRZMHrNiHt84vnyTWNj84rPdGYkxAfaFpxgkaKpos3XmaOPiR+n/3YzQUoJXISuw8mZezcrDtsSpr3aA== |
|||
dependencies: |
|||
"@reach/auto-id" "0.11.2" |
|||
"@reach/portal" "0.11.2" |
|||
"@reach/rect" "0.11.2" |
|||
"@reach/utils" "0.11.2" |
|||
"@reach/visually-hidden" "0.11.1" |
|||
prop-types "^15.7.2" |
|||
tslib "^2.0.0" |
|||
|
|||
"@reach/[email protected]": |
|||
version "0.10.5" |
|||
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.10.5.tgz#fbac944d29565f6dd7abd0e1b13950e99b1e470b" |
|||
@ -1869,6 +1900,13 @@ |
|||
tslib "^2.0.0" |
|||
warning "^4.0.3" |
|||
|
|||
"@reach/[email protected]": |
|||
version "0.11.1" |
|||
resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.11.1.tgz#3d7a5742acf18372f35b9e216680edd8073f35e3" |
|||
integrity sha512-TZZNSttor2jG6ZPGI35s/8G0FNSz49QrJIhAZbnUqHyPf3+jtNqAC0dOWW8Nuk+mApDDDVYd2KZ9P2vnzllNnQ== |
|||
dependencies: |
|||
tslib "^2.0.0" |
|||
|
|||
"@rollup/[email protected]^14.0.0": |
|||
version "14.0.0" |
|||
resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-14.0.0.tgz#4285f9ec2db686a31129e5a2b415c94aa1f836f0" |
|||
|
Write
Preview
Loading…
Cancel
Save
Reference in new issue