@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian apps.
122 lines (120 loc) • 4.76 kB
JavaScript
/**
* @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';
const VAR_PRIMARY_BUTTON_BEFORE_HIGHLIGHTED_BACKGROUND_COLOR = '--primary-button-before-highlighted-background-color';
const VAR_PRIMARY_BUTTON_AFTER_DROPDOWN_BORDER_COLOR = '--primary-button-after-dropdown-border-color';
const primaryButtonSkeletonStyles = css({
margin: `0 ${"var(--ds-space-075, 6px)"}`,
padding: `0 ${"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
}
});
const 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(${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)"
}
});
const isHighlightedAndDropdownButtonStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'&:before': {
insetInlineEnd: -10
}
});
const 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)"
}
});
const 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)"} solid`,
borderColor: `var(${VAR_PRIMARY_BUTTON_AFTER_DROPDOWN_BORDER_COLOR})`,
borderInlineEnd: `${"var(--ds-border-width-selected, 2px)"} 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'
}
});
const 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 const SkeletonPrimaryButton = ({
isDropdownButton = false,
isHighlighted = false,
text,
children,
testId
}) => {
const theme = useTheme();
const primaryButton = theme.mode.primaryButton;
const dynamicStyles = stripEmptyProperties({
...primaryButton.default,
...(isHighlighted && {
color: primaryButton.selected.color
}),
[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));
};