@atlaskit/button
Version:
A button triggers an event or action. They let users know what will happen next.
179 lines (176 loc) • 10.1 kB
JavaScript
/* link.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./link.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _css2 = require("@atlaskit/css");
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _compiled = require("@atlaskit/primitives/compiled");
var _content = _interopRequireDefault(require("../shared/content"));
var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId"],
_excluded2 = ["className", "css", "as", "style"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var styles = {
base: "_2rkofajl _11c8fhey _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
baseT26Shape: "_2rko1qi0",
linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
buttonIconBeforeWithHack: "_bozgu2gc",
buttonIconAfterWithHack: "_y4tiu2gc",
buttonIconBefore: "_bozgutpp _gy1p12x7",
buttonIconAfter: "_y4tiutpp _gy1p12x7",
fullWidth: "_1bsb1osq"
};
var defaultStyles = {
root: "_bfhksm61 _syazazsu _8l3m1l7x _aetrb3bt _1053azsu _f8pjazsu _irr31dpa _30l3azsu _1di6fcek _9h8hazsu"
};
var primaryStyles = {
root: "_bfhk1856 _syaz15cr _105315cr _f8pj15cr _30l315cr _irr3hf2y _9h8h15cr _1di6g6ey"
};
var warningStyles = {
root: "_bfhk1kmu _syaz1yd3 _10531yd3 _f8pj1yd3 _30l31yd3 _irr31spp _9h8h1yd3 _1di64m4m"
};
var dangerStyles = {
root: "_bfhkybec _syaz15cr _105315cr _f8pj15cr _30l315cr _irr3s9hg _9h8h15cr _1di613a9"
};
var discoveryStyles = {
root: "_bfhku5tj _syaz15cr _105315cr _f8pj15cr _30l315cr _irr3fqeg _9h8h15cr _1di61f1m"
};
var subtleStyles = {
root: "_bfhksm61 _syazazsu _1053azsu _f8pj1mjl _irr31dpa _30l3azsu _1di6fcek _9h8hazsu"
};
var selectedStyles = {
root: "_bfhk15s3 _syaz6x5g _8l3mq98m _aetrb3bt _10536x5g _f8pj6x5g _30l36x5g _9h8h6x5g",
warning: "_bfhk15s3 _syaz6x5g _30l36x5g _irr315s3 _9h8h6x5g _1di615s3",
danger: "_bfhk15s3 _syaz6x5g _30l36x5g _irr315s3 _9h8h6x5g _1di615s3",
discovery: "_bfhk15s3 _syaz6x5g _30l36x5g _irr315s3 _9h8h6x5g _1di615s3"
};
/**
* __Link Button__
*
* Renders a link in the style of a button.
*
* - [Examples](https://atlassian.design/components/link-button/examples)
* - [Code](https://atlassian.design/components/link-button/code)
* - [Usage](https://atlassian.design/components/link-button/usage)
*/
var LinkButtonBase = function LinkButtonBase(_ref, ref) {
var analyticsContext = _ref.analyticsContext,
_ref$appearance = _ref.appearance,
appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
ariaLabel = _ref['aria-label'],
ariaLabelledBy = _ref['aria-labelledby'],
_ref$autoFocus = _ref.autoFocus,
autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
children = _ref.children,
href = _ref.href,
iconAfter = _ref.iconAfter,
iconBefore = _ref.iconBefore,
interactionName = _ref.interactionName,
isDisabled = _ref.isDisabled,
isSelected = _ref.isSelected,
onClick = _ref.onClick,
onClickCapture = _ref.onClickCapture,
onKeyDownCapture = _ref.onKeyDownCapture,
onKeyUpCapture = _ref.onKeyUpCapture,
onMouseDownCapture = _ref.onMouseDownCapture,
onMouseUpCapture = _ref.onMouseUpCapture,
onPointerDownCapture = _ref.onPointerDownCapture,
onPointerUpCapture = _ref.onPointerUpCapture,
onTouchEndCapture = _ref.onTouchEndCapture,
onTouchStartCapture = _ref.onTouchStartCapture,
shouldFitContainer = _ref.shouldFitContainer,
spacing = _ref.spacing,
testId = _ref.testId,
unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
// @ts-expect-error
var _className = unsafeRest.className,
_css = unsafeRest.css,
_as = unsafeRest.as,
_style = unsafeRest.style,
saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
var hasIconAfter = Boolean(iconAfter);
var hasIconBefore = Boolean(iconBefore);
var localRef = (0, _react.useRef)(null);
(0, _useAutoFocus.default)(localRef, autoFocus);
var combinedRef = (0, _mergeRefs.default)([localRef, ref]);
return /*#__PURE__*/React.createElement(_compiled.Anchor, (0, _extends2.default)({
analyticsContext: analyticsContext,
ref: combinedRef
/**
* Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
* @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
*/
// @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
,
href: isDisabled ? undefined : href,
role: isDisabled ? 'link' : undefined,
"aria-disabled": isDisabled === true ? true : undefined,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
onClick: onClick,
onClickCapture: onClickCapture,
onKeyDownCapture: onKeyDownCapture,
onKeyUpCapture: onKeyUpCapture,
onMouseDownCapture: onMouseDownCapture,
onMouseUpCapture: onMouseUpCapture,
onPointerDownCapture: onPointerDownCapture,
onPointerUpCapture: onPointerUpCapture,
onTouchEndCapture: onTouchEndCapture,
onTouchStartCapture: onTouchStartCapture,
testId: testId,
componentName: "LinkButton",
interactionName: interactionName
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, saferRest, {
xcss: (0, _css2.cx)(styles.base, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && !(0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconBeforeWithHack,
//to remove when platform-button-icon-spacing-cleanup is removed
hasIconAfter && !(0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
//to remove when platform-button-icon-spacing-cleanup is removed
hasIconBefore && (0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
//to keep when platform-button-icon-spacing-cleanup is removed
hasIconAfter && (0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconAfter,
//to keep when platform-button-icon-spacing-cleanup is removed
shouldFitContainer && styles.fullWidth)
}), iconBefore && /*#__PURE__*/React.createElement(_content.default, {
type: "icon",
position: "before",
isLoading: false
}, /*#__PURE__*/React.createElement(_iconRenderer.default, {
icon: iconBefore
})), children && /*#__PURE__*/React.createElement(_content.default, {
isLoading: false
}, children), iconAfter && /*#__PURE__*/React.createElement(_content.default, {
type: "icon",
position: "after",
isLoading: false
}, /*#__PURE__*/React.createElement(_iconRenderer.default, {
icon: iconAfter
})));
};
// Workarounds to support generic types with forwardRef
/**
* __Link Button__
*
* Renders a link in the style of a button.
*
* - [Examples](https://atlassian.design/components/link-button/examples)
* - [Code](https://atlassian.design/components/link-button/code)
* - [Usage](https://atlassian.design/components/link-button/usage)
*/
var LinkButton = /*#__PURE__*/(0, _react.forwardRef)(LinkButtonBase);
LinkButton.displayName = 'LinkButton';
var _default = exports.default = LinkButton;