grafana/public/app/features/query/components/HelpToggle.tsx
Josh Hunt 3c6e0e8ef8
Chore: ESlint import order (#44959)
* Add and configure eslint-plugin-import

* Fix the lint:ts npm command

* Autofix + prettier all the files

* Manually fix remaining files

* Move jquery code in jest-setup to external file to safely reorder imports

* Resolve issue caused by circular dependencies within Prometheus

* Update .betterer.results

* Fix missing // @ts-ignore

* ignore iconBundle.ts

* Fix missing // @ts-ignore
2022-04-22 14:33:13 +01:00

28 lines
850 B
TypeScript

import { css, cx } from '@emotion/css';
import React, { useState } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { Icon, InfoBox, stylesFactory, useTheme } from '@grafana/ui';
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
infoBox: css`
margin-top: ${theme.spacing.xs};
`,
}));
export const HelpToggle: React.FunctionComponent = ({ children }) => {
const [isHelpVisible, setIsHelpVisible] = useState(false);
const theme = useTheme();
const styles = getStyles(theme);
return (
<>
<button className="gf-form-label query-keyword pointer" onClick={(_) => setIsHelpVisible(!isHelpVisible)}>
Help
<Icon name={isHelpVisible ? 'angle-down' : 'angle-right'} />
</button>
{isHelpVisible && <InfoBox className={cx(styles.infoBox)}>{children}</InfoBox>}
</>
);
};