@shopify/polaris/dist/esm/components/Link/Link.js

Shopify’s product component library

import React$1 from 'react';
import { useFeatures } from '../../utilities/features/hooks.js';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { classNames } from '../../utilities/css.js';
import { ExternalSmallMinor } from '@shopify/polaris-icons';
import { Icon as Icon$1 } from '../Icon/Icon.js';
import { UnstyledLink as UnstyledLink$1 } from '../UnstyledLink/UnstyledLink.js';
import { BannerContext } from '../../utilities/banner-context.js';
import styles from './Link.scss.js';

function Link({
  url,
  children,
  onClick,
  external,
  id,
  monochrome
}) {
  var i18n = useI18n();
  var childrenMarkup = children;
  var {
    newDesignLanguage
  } = useFeatures();

  if (external && typeof children === 'string') {
    var iconLabel = i18n.translate('Polaris.Common.newWindowAccessibilityHint');
    childrenMarkup = /*#__PURE__*/React$1.createElement(React$1.Fragment, null, children, /*#__PURE__*/React$1.createElement("span", {
      className: styles.IconLockup
    }, /*#__PURE__*/React$1.createElement("span", {
      className: styles.IconLayout
    }, /*#__PURE__*/React$1.createElement(Icon$1, {
      accessibilityLabel: iconLabel,
      source: ExternalSmallMinor
    }))));
  }

  return /*#__PURE__*/React$1.createElement(BannerContext.Consumer, null, BannerContext => {
    var shouldBeMonochrome = monochrome || BannerContext;
    var className = classNames(styles.Link, shouldBeMonochrome && styles.monochrome, newDesignLanguage && styles.newDesignLanguage);
    return url ? /*#__PURE__*/React$1.createElement(UnstyledLink$1, {
      onClick: onClick,
      className: className,
      url: url,
      external: external,
      id: id
    }, childrenMarkup) : /*#__PURE__*/React$1.createElement("button", {
      type: "button",
      onClick: onClick,
      className: className,
      id: id
    }, childrenMarkup);
  });
}

export { Link };