@atlaskit/button/dist/es2019/new-button/variants/default/link.js

A button triggers an event or action. They let users know what will happen next.

/* link.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./link.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, useRef } from 'react';
import { cx } from '@atlaskit/css';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
import { fg } from '@atlaskit/platform-feature-flags';
import { Anchor } from '@atlaskit/primitives/compiled';
import Content from '../shared/content';
import IconRenderer from '../shared/icon-renderer';
const 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"
};
const defaultStyles = {
  root: "_bfhksm61 _syazazsu _8l3m1l7x _aetrb3bt _1053azsu _f8pjazsu _irr31dpa _30l3azsu _1di6fcek _9h8hazsu"
};
const primaryStyles = {
  root: "_bfhk1856 _syaz15cr _105315cr _f8pj15cr _30l315cr _irr3hf2y _9h8h15cr _1di6g6ey"
};
const warningStyles = {
  root: "_bfhk1kmu _syaz1yd3 _10531yd3 _f8pj1yd3 _30l31yd3 _irr31spp _9h8h1yd3 _1di64m4m"
};
const dangerStyles = {
  root: "_bfhkybec _syaz15cr _105315cr _f8pj15cr _30l315cr _irr3s9hg _9h8h15cr _1di613a9"
};
const discoveryStyles = {
  root: "_bfhku5tj _syaz15cr _105315cr _f8pj15cr _30l315cr _irr3fqeg _9h8h15cr _1di61f1m"
};
const subtleStyles = {
  root: "_bfhksm61 _syazazsu _1053azsu _f8pj1mjl _irr31dpa _30l3azsu _1di6fcek _9h8hazsu"
};
const 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)
 */
const LinkButtonBase = ({
  analyticsContext,
  appearance = 'default',
  'aria-label': ariaLabel,
  'aria-labelledby': ariaLabelledBy,
  autoFocus = false,
  children,
  href,
  iconAfter,
  iconBefore,
  interactionName,
  isDisabled,
  isSelected,
  onClick,
  onClickCapture,
  onKeyDownCapture,
  onKeyUpCapture,
  onMouseDownCapture,
  onMouseUpCapture,
  onPointerDownCapture,
  onPointerUpCapture,
  onTouchEndCapture,
  onTouchStartCapture,
  shouldFitContainer,
  spacing,
  testId,
  ...unsafeRest
}, ref) => {
  // @ts-expect-error
  const {
    className: _className,
    css: _css,
    as: _as,
    style: _style,
    ...saferRest
  } = unsafeRest;
  const hasIconAfter = Boolean(iconAfter);
  const hasIconBefore = Boolean(iconBefore);
  const localRef = useRef(null);
  useAutoFocus(localRef, autoFocus);
  const combinedRef = mergeRefs([localRef, ref]);
  return /*#__PURE__*/React.createElement(Anchor, _extends({
    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: cx(styles.base, 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 && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBeforeWithHack,
    //to remove when platform-button-icon-spacing-cleanup is removed
    hasIconAfter && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
    //to remove when platform-button-icon-spacing-cleanup is removed
    hasIconBefore && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
    //to keep when platform-button-icon-spacing-cleanup is removed
    hasIconAfter && 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, {
    type: "icon",
    position: "before",
    isLoading: false
  }, /*#__PURE__*/React.createElement(IconRenderer, {
    icon: iconBefore
  })), children && /*#__PURE__*/React.createElement(Content, {
    isLoading: false
  }, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
    type: "icon",
    position: "after",
    isLoading: false
  }, /*#__PURE__*/React.createElement(IconRenderer, {
    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)
 */
const LinkButton = /*#__PURE__*/forwardRef(LinkButtonBase);
LinkButton.displayName = 'LinkButton';
export default LinkButton;