mirror of
https://github.com/grafana/grafana.git
synced 2025-02-13 00:55:47 -06:00
* 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
28 lines
850 B
TypeScript
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>}
|
|
</>
|
|
);
|
|
};
|