@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian products.
41 lines (40 loc) • 1.34 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef } from 'react';
import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
import { useTheme } from '../../theme';
import { BadgeContainer } from '../BadgeContainer';
import { IconButton } from '../IconButton';
const HELP_NOTIFICATION_BADGE_ID = 'atlassian-navigation-help-notification-count';
/**
* __Help__
*
* A help button that can be passed into `AtlassianNavigation`'s `renderHelp` prop.
*
* - [Examples](https://atlassian.design/components/atlassian-navigation/examples#help)
* - [Code](https://atlassian.design/components/atlassian-navigation/code)
*/
export const Help = /*#__PURE__*/forwardRef((props, ref) => {
const {
badge,
tooltip,
...iconButtonProps
} = props;
const {
mode: {
navigation
}
} = useTheme();
const button = /*#__PURE__*/React.createElement(IconButton, _extends({
icon: /*#__PURE__*/React.createElement(QuestionCircleIcon, {
label: typeof tooltip === 'string' ? tooltip : 'Help Icon',
secondaryColor: navigation.backgroundColor
}),
ref: ref,
tooltip: tooltip
}, iconButtonProps));
return badge ? /*#__PURE__*/React.createElement(BadgeContainer, {
id: HELP_NOTIFICATION_BADGE_ID,
badge: badge
}, button) : button;
});
export default Help;