@atlaskit/atlassian-navigation/dist/cjs/components/SkeletonCreateButton/index.js

A horizontal navigation component for Atlassian apps.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SkeletonCreateButton = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _theme = require("../../theme");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var skeletonCreateButtonStyles = (0, _react2.css)({
  height: 32,
  padding: "0 ".concat("var(--ds-space-150, 12px)"),
  alignSelf: 'center',
  border: 0,
  borderRadius: "var(--ds-radius-small, 3px)",
  font: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
  fontWeight: "var(--ds-font-weight-medium, 500)",
  pointerEvents: 'none',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  ':focus, :active, :hover': {
    appearance: 'none',
    border: 0,
    outline: 0
  },
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  '&&': {
    marginInlineStart: "var(--ds-space-150, 12px)"
  }
});
var buttonWrapperStyles = (0, _react2.css)({
  display: 'flex',
  margin: 0
});

/**
 * __Skeleton create button__
 *
 * Skeleton buttons are lightweight HTML button elements with CSS that represent
 * their heavier interactive counterparts, for use when elements of the
 * navigation are loaded dynamically. This one represents the Create button.
 *
 * - [Examples](https://atlassian.design/components/atlassian-navigation/examples#skeleton-button)
 * - [Code](https://atlassian.design/components/atlassian-navigation/code)
 */
var SkeletonCreateButton = exports.SkeletonCreateButton = function SkeletonCreateButton(_ref) {
  var text = _ref.text,
    testId = _ref.testId;
  var theme = (0, _theme.useTheme)();
  return (0, _react2.jsx)("div", {
    role: "listitem",
    css: buttonWrapperStyles
  }, (0, _react2.jsx)("button", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    style: theme.mode.create.default,
    css: skeletonCreateButtonStyles,
    "data-testid": testId,
    type: "button"
  }, text));
};