54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
import { QuestionMarkIcon } from "outline-icons";
|
|
import * as React from "react";
|
|
import {
|
|
useDisclosureState,
|
|
Disclosure,
|
|
DisclosureContent,
|
|
} from "reakit/Disclosure";
|
|
import styled, { useTheme } from "styled-components";
|
|
import Button from "~/components/Button";
|
|
import Text from "~/components/Text";
|
|
|
|
type Props = {
|
|
title: React.ReactNode;
|
|
};
|
|
|
|
const HelpDisclosure: React.FC<Props> = ({ title, children }) => {
|
|
const disclosure = useDisclosureState({ animated: true });
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<div>
|
|
<Disclosure {...disclosure}>
|
|
{(props) => (
|
|
<Button
|
|
icon={<QuestionMarkIcon color={theme.text} />}
|
|
neutral
|
|
borderOnHover
|
|
{...props}
|
|
>
|
|
{title}
|
|
</Button>
|
|
)}
|
|
</Disclosure>
|
|
<HelpContent {...disclosure}>
|
|
<Text type="secondary">
|
|
<br />
|
|
{children}
|
|
</Text>
|
|
</HelpContent>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const HelpContent = styled(DisclosureContent)`
|
|
transition: opacity 250ms ease-in-out;
|
|
opacity: 0;
|
|
|
|
&[data-enter] {
|
|
opacity: 1;
|
|
}
|
|
`;
|
|
|
|
export default HelpDisclosure;
|