@atlaskit/atlassian-navigation/dist/esm/components/Create/index.js

A horizontal navigation component for Atlassian products.

import _defineProperty from "@babel/runtime/helpers/defineProperty";
/** @jsx jsx */
import { Fragment } from 'react';
import { css, jsx } from '@emotion/react';
import Button from '@atlaskit/button/custom-theme-button';
import AddIcon from '@atlaskit/icon/glyph/editor/add';
import Tooltip from '@atlaskit/tooltip';
import { CREATE_BREAKPOINT, gridSize } from '../../common/constants';
import { useTheme } from '../../theme';
import { IconButton } from '../IconButton';
import { getCreateButtonTheme } from './styles';
var wrapperStyles = css({
  display: 'flex',
  alignItems: 'center',
  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
  '& [data-hide-on-smallscreens]': _defineProperty({}, "@media (max-width: ".concat(CREATE_BREAKPOINT - 1, "px)"), {
    display: 'none !important'
  }),
  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
  '& [data-hide-on-largescreens]': _defineProperty({}, "@media (min-width: ".concat(CREATE_BREAKPOINT, "px)"), {
    display: 'none !important'
  }),
  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
  '&&': {
    marginLeft: gridSize * 1.5
  }
});
var TooltipSwitch = function TooltipSwitch(_ref) {
  var buttonTooltip = _ref.buttonTooltip,
    children = _ref.children;
  return buttonTooltip ? jsx(Tooltip, {
    content: buttonTooltip,
    hideTooltipOnClick: true
  }, children) : jsx(Fragment, null, children);
};

/**
 * _Create__
 *
 * A call to action button that can be passed into `AtlassianNavigation`'s
 * `renderCreate` prop. It is shown after all other primary buttons.
 *
 * - [Examples](https://atlassian.design/components/atlassian-navigation/examples#create)
 * - [Code](https://atlassian.design/components/atlassian-navigation/code)
 */
export var Create = function Create(_ref2) {
  var onClick = _ref2.onClick,
    href = _ref2.href,
    text = _ref2.text,
    buttonTooltip = _ref2.buttonTooltip,
    iconButtonTooltip = _ref2.iconButtonTooltip,
    testId = _ref2.testId;
  var theme = useTheme();
  return jsx("div", {
    css: wrapperStyles,
    "data-testid": "create-button-wrapper"
  }, jsx(TooltipSwitch, {
    buttonTooltip: buttonTooltip
  }, jsx(Button, {
    id: "createGlobalItem",
    onClick: onClick,
    href: href
    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
    ,
    theme: getCreateButtonTheme(theme),
    testId: testId && "".concat(testId, "-button"),
    "data-hide-on-smallscreens": true
  }, text)), jsx(IconButton, {
    id: "createGlobalItemIconButton",
    testId: testId && "".concat(testId, "-icon-button"),
    icon: jsx(AddIcon, {
      label: text
    }),
    onClick: onClick,
    href: href,
    tooltip: iconButtonTooltip
    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
    ,
    theme: getCreateButtonTheme(theme),
    "aria-label": text,
    "data-hide-on-largescreens": true
  }));
};
export default Create;