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

A horizontal navigation component for Atlassian apps.

import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { useTheme } from '../../theme';
import { stripEmptyProperties } from '../../utils';
var VAR_PRIMARY_BUTTON_BEFORE_HIGHLIGHTED_BACKGROUND_COLOR = '--primary-button-before-highlighted-background-color';
var VAR_PRIMARY_BUTTON_AFTER_DROPDOWN_BORDER_COLOR = '--primary-button-after-dropdown-border-color';
var primaryButtonSkeletonStyles = css({
  margin: "0 ".concat("var(--ds-space-075, 6px)"),
  padding: "0 ".concat("var(--ds-space-050, 4px)"),
  position: 'relative',
  appearance: 'none',
  border: 0,
  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/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  '::-moz-focus-inner': {
    border: 0
  }
});
var isHighlightedStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  '&:before': {
    height: 3,
    position: 'absolute',
    backgroundColor: "var(".concat(VAR_PRIMARY_BUTTON_BEFORE_HIGHLIGHTED_BACKGROUND_COLOR, ")"),
    borderStartEndRadius: "var(--ds-radius-xsmall, 1px)",
    borderStartStartRadius: "var(--ds-radius-xsmall, 1px)",
    content: '""',
    insetBlockEnd: 0,
    insetInlineStart: "var(--ds-space-025, 2px)"
  }
});
var isHighlightedAndDropdownButtonStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  '&:before': {
    insetInlineEnd: -10
  }
});
var isHighlightedNotDropdownButtonStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  '&:before': {
    insetInlineEnd: "var(--ds-space-025, 2px)"
  }
});
var isDropdownButtonStyles = css({
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
  marginInlineEnd: 18,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  '&:after': {
    display: 'inline-block',
    width: 4,
    height: 4,
    position: 'absolute',
    borderBlockEnd: "var(--ds-border-width-selected, 2px)".concat(" solid"),
    borderColor: "var(".concat(VAR_PRIMARY_BUTTON_AFTER_DROPDOWN_BORDER_COLOR, ")"),
    borderInlineEnd: "var(--ds-border-width-selected, 2px)".concat(" solid"),
    borderRadius: "var(--ds-radius-xsmall, 1px)",
    content: '""',
    insetBlockStart: 'calc(50% - 4px)',
    insetInlineStart: 'calc(100% - 3px)',
    marginInlineStart: "var(--ds-space-050, 4px)",
    transform: 'rotate(45deg) scale(1.05)',
    verticalAlign: 'middle'
  }
});
var buttonWrapperStyles = css({
  display: 'flex',
  margin: 0
});

/**
 * __Skeleton primary 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 a primary button.
 *
 * - [Examples](https://atlassian.design/components/atlassian-navigation/examples#skeleton-button)
 * - [Code](https://atlassian.design/components/atlassian-navigation/code)
 */
export var SkeletonPrimaryButton = function SkeletonPrimaryButton(_ref) {
  var _ref$isDropdownButton = _ref.isDropdownButton,
    isDropdownButton = _ref$isDropdownButton === void 0 ? false : _ref$isDropdownButton,
    _ref$isHighlighted = _ref.isHighlighted,
    isHighlighted = _ref$isHighlighted === void 0 ? false : _ref$isHighlighted,
    text = _ref.text,
    children = _ref.children,
    testId = _ref.testId;
  var theme = useTheme();
  var primaryButton = theme.mode.primaryButton;
  var dynamicStyles = stripEmptyProperties(_objectSpread(_objectSpread(_objectSpread({}, primaryButton.default), isHighlighted && {
    color: primaryButton.selected.color
  }), {}, _defineProperty(_defineProperty({}, VAR_PRIMARY_BUTTON_BEFORE_HIGHLIGHTED_BACKGROUND_COLOR, primaryButton.selected.borderColor), VAR_PRIMARY_BUTTON_AFTER_DROPDOWN_BORDER_COLOR, isHighlighted ? primaryButton.default.borderColor : primaryButton.default.color)));
  return jsx("div", {
    role: "listitem",
    css: buttonWrapperStyles
  }, jsx("button", {
    type: "button"
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: dynamicStyles,
    css: [primaryButtonSkeletonStyles, isHighlighted && isHighlightedStyles, isDropdownButton && isDropdownButtonStyles, isHighlighted && (isDropdownButton ? isHighlightedAndDropdownButtonStyles : isHighlightedNotDropdownButtonStyles)],
    "data-testid": testId
  }, text || children));
};