@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian products.
108 lines (106 loc) • 4.77 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SkeletonPrimaryButton = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _theme = require("../../theme");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 = (0, _react.css)({
margin: '0 6px',
padding: '0 4px',
position: 'relative',
appearance: 'none',
border: 0,
fontSize: 14,
fontWeight: 500,
lineHeight: 1,
pointerEvents: 'none',
':focus, :active, :hover': {
appearance: 'none',
border: 0,
outline: 0
},
'::-moz-focus-inner': {
border: 0
}
});
var isHighlightedStyles = (0, _react.css)({
'&:before': {
height: 3,
position: 'absolute',
bottom: 0,
left: 2,
backgroundColor: "var(".concat(VAR_PRIMARY_BUTTON_BEFORE_HIGHLIGHTED_BACKGROUND_COLOR, ")"),
borderTopLeftRadius: 1,
borderTopRightRadius: 1,
content: '""'
}
});
var isHighlightedAndDropdownButtonStyles = (0, _react.css)({
'&:before': {
right: -10
}
});
var isHighlightedNotDropdownButtonStyles = (0, _react.css)({
'&:before': {
right: 2
}
});
var isDropdownButtonStyles = (0, _react.css)({
marginRight: 18,
'&:after': {
display: 'inline-block',
width: 4,
height: 4,
marginLeft: 4,
position: 'absolute',
top: 'calc(50% - 4px)',
left: 'calc(100% - 3px)',
borderBottom: '2px solid',
borderColor: "var(".concat(VAR_PRIMARY_BUTTON_AFTER_DROPDOWN_BORDER_COLOR, ")"),
borderRadius: 1,
borderRight: '2px solid',
content: '""',
opacity: 0.51,
transform: 'rotate(45deg) scale(1.05)',
verticalAlign: 'middle'
}
});
/**
* __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)
*/
var SkeletonPrimaryButton = function SkeletonPrimaryButton(_ref) {
var _objectSpread2;
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 = (0, _theme.useTheme)();
var primaryButton = theme.mode.primaryButton;
var dynamicStyles = _objectSpread(_objectSpread(_objectSpread({}, primaryButton.default), isHighlighted && {
color: primaryButton.selected.color
}), {}, (_objectSpread2 = {}, (0, _defineProperty2.default)(_objectSpread2, VAR_PRIMARY_BUTTON_BEFORE_HIGHLIGHTED_BACKGROUND_COLOR, primaryButton.selected.borderColor), (0, _defineProperty2.default)(_objectSpread2, VAR_PRIMARY_BUTTON_AFTER_DROPDOWN_BORDER_COLOR, isHighlighted ? primaryButton.default.borderColor : primaryButton.default.color), _objectSpread2));
return (0, _react.jsx)("button", {
type: "button",
style: dynamicStyles,
css: [primaryButtonSkeletonStyles, isHighlighted && isHighlightedStyles, isDropdownButton && isDropdownButtonStyles, isHighlighted && (isDropdownButton ? isHighlightedAndDropdownButtonStyles : isHighlightedNotDropdownButtonStyles)],
"data-testid": testId
}, text || children);
};
exports.SkeletonPrimaryButton = SkeletonPrimaryButton;