@storybook/design-system/dist/components/Link.js

Storybook design system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Link = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _theming = require("@storybook/theming");

var _polished = require("polished");

var _Icon = require("./Icon");

var _styles = require("./shared/styles");

var _excluded = ["containsIcon", "inverse", "isButton", "LinkWrapper", "nochrome", "secondary", "tertiary"],
    _excluded2 = ["children", "withArrow"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

var _ref3 = process.env.NODE_ENV === "production" ? {
  name: "1lnhbgp",
  styles: ">svg:last-of-type{height:0.65em;width:0.65em;margin-right:0;margin-left:0.25em;bottom:auto;vertical-align:inherit;}"
} : {
  name: "17nny33-LinkInner",
  styles: ">svg:last-of-type{height:0.65em;width:0.65em;margin-right:0;margin-left:0.25em;bottom:auto;vertical-align:inherit;};label:LinkInner;",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

var LinkInner = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
  target: "e1ja7avb3"
} : {
  target: "e1ja7avb3",
  label: "LinkInner"
})(function (props) {
  return props.withArrow && _ref3;
}, ";");

var _ref = process.env.NODE_ENV === "production" ? {
  name: "13jr1vs",
  styles: "color:inherit;&:hover,&:active{color:inherit;text-decoration:underline;}"
} : {
  name: "16pak9f-StyledLink",
  styles: "color:inherit;&:hover,&:active{color:inherit;text-decoration:underline;};label:StyledLink;",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

var _ref2 = process.env.NODE_ENV === "production" ? {
  name: "m8gvx1",
  styles: "svg{height:1em;width:1em;vertical-align:middle;position:relative;bottom:0;margin-right:0;}"
} : {
  name: "1o567zm-StyledLink",
  styles: "svg{height:1em;width:1em;vertical-align:middle;position:relative;bottom:0;margin-right:0;};label:StyledLink;",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

var StyledLink = (0, _theming.styled)("a", process.env.NODE_ENV === "production" ? {
  target: "e1ja7avb2"
} : {
  target: "e1ja7avb2",
  label: "StyledLink"
})("display:inline-block;transition:transform 150ms ease-out,color 150ms ease-out;text-decoration:none;color:", _styles.color.secondary, ";&:hover,&:focus-visible{cursor:pointer;transform:translateY(-1px);color:", (0, _polished.darken)(0.07, _styles.color.secondary), ";}&:active{transform:translateY(0);color:", (0, _polished.darken)(0.1, _styles.color.secondary), ";}svg{display:inline-block;height:1em;width:1em;vertical-align:text-top;position:relative;bottom:-0.125em;margin-right:0.4em;}", function (props) {
  return props.containsIcon && _ref2;
}, ";", function (props) {
  return props.secondary && /*#__PURE__*/(0, _theming.css)("color:", _styles.color.mediumdark, ";&:hover{color:", _styles.color.dark, ";}&:active{color:", _styles.color.darker, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:StyledLink;"));
}, ";", function (props) {
  return props.tertiary && /*#__PURE__*/(0, _theming.css)("color:", _styles.color.dark, ";&:hover{color:", _styles.color.darkest, ";}&:active{color:", _styles.color.mediumdark, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:StyledLink;"));
}, ";", function (props) {
  return props.nochrome && _ref;
}, ";", function (props) {
  return props.inverse && /*#__PURE__*/(0, _theming.css)("color:", _styles.color.lightest, ";&:hover{color:", _styles.color.lighter, ";}&:active{color:", _styles.color.light, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:StyledLink;"));
}, ";");
var UnstyledLink = (0, _theming.styled)("a", process.env.NODE_ENV === "production" ? {
  target: "e1ja7avb1"
} : {
  target: "e1ja7avb1",
  label: "UnstyledLink"
})();
var LinkButton = (0, _theming.styled)("button", process.env.NODE_ENV === "production" ? {
  target: "e1ja7avb0"
} : {
  target: "e1ja7avb0",
  label: "LinkButton"
})(process.env.NODE_ENV === "production" ? {
  name: "152yo6p",
  styles: "background:none;border:none;padding:0;font:inherit;cursor:pointer"
} : {
  name: "152yo6p",
  styles: "background:none;border:none;padding:0;font:inherit;cursor:pointer",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
/**
 * Links can contains text and/or icons. Be careful using only icons, you must provide a text alternative via aria-label for accessibility.
 */

// The main purpose of this component is to strip certain props that get passed
// down to the styled component, so that we don't end up passing them to a
// tag which would throw warnings for non-standard props.
var LinkComponentPicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
  var containsIcon = _ref4.containsIcon,
      inverse = _ref4.inverse,
      isButton = _ref4.isButton,
      LinkWrapper = _ref4.LinkWrapper,
      nochrome = _ref4.nochrome,
      secondary = _ref4.secondary,
      tertiary = _ref4.tertiary,
      rest = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);

  // Use the UnstyledLink here to avoid duplicating styles and creating
  // specificity conflicts by first rendering the StyledLink higher up the chain
  // and then re-rendering it through the 'as' prop.

  /* eslint no-else-return: ["error", { allowElseIf: true }] */
  if (isButton) {
    return /*#__PURE__*/_react["default"].createElement(LinkButton, (0, _extends2["default"])({}, rest, {
      ref: ref
    }));
  } else if (LinkWrapper) {
    return /*#__PURE__*/_react["default"].createElement(LinkWrapper, (0, _extends2["default"])({}, rest, {
      ref: ref
    }));
  }

  return /*#__PURE__*/_react["default"].createElement(UnstyledLink, (0, _extends2["default"])({}, rest, {
    ref: ref
  }));
});
LinkComponentPicker.displayName = 'LinkComponentPicker';
var Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref5, ref) {
  var children = _ref5.children,
      withArrow = _ref5.withArrow,
      rest = (0, _objectWithoutProperties2["default"])(_ref5, _excluded2);

  var content = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(LinkInner, {
    withArrow: withArrow
  }, children, withArrow && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
    icon: "arrowright"
  })));

  return /*#__PURE__*/_react["default"].createElement(StyledLink // @ts-expect-error Emotion 10 doesn't include `as` in its types
  , (0, _extends2["default"])({
    as: LinkComponentPicker,
    ref: ref
  }, rest), content);
});
exports.Link = Link;
Link.displayName = 'Link';
Link.defaultProps = {
  withArrow: false,
  isButton: false,
  containsIcon: false,
  secondary: false,
  tertiary: false,
  nochrome: false,
  inverse: false
};