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

Storybook design system

"use strict";

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

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

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

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

var _pluralize = _interopRequireDefault(require("pluralize"));

var _polished = require("polished");

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

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

var _Link = require("./Link");

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

var _animation = require("./shared/animation");

var _excluded = ["isLoading", "selectable", "onHover", "onClick", "active", "size", "count", "countLink", "text", "noPlural", "status", "CountWrapper", "TextWrapper", "alignment"];

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: "1fsndxc",
  styles: "color:rgba(255, 255, 255, 0.7)"
} : {
  name: "8tf3wg-Count",
  styles: "color:rgba(255, 255, 255, 0.7);label:Count;",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

var Count = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e13xivpu2"
} : {
  target: "e13xivpu2",
  label: "Count"
})("color:", _styles.color.darker, ";display:block;", function (props) {
  return props.status === 'positive' && /*#__PURE__*/(0, _theming.css)("color:", _styles.color.positive, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Count;"));
}, ";", function (props) {
  return props.status === 'negative' && /*#__PURE__*/(0, _theming.css)("color:", _styles.color.negative, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Count;"));
}, ";", function (props) {
  return props.status === 'warning' && /*#__PURE__*/(0, _theming.css)("color:", _styles.color.warning, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Count;"));
}, ";", function (props) {
  return props.status === 'neutral' && /*#__PURE__*/(0, _theming.css)("color:", _styles.color.dark, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Count;"));
}, ";", function (props) {
  return props.status === 'link' && /*#__PURE__*/(0, _theming.css)("color:", _styles.color.secondary, ";text-decoration:none;&:hover{color:", (0, _polished.darken)(0.07, _styles.color.secondary), ";}&:active{color:", (0, _polished.darken)(0.1, _styles.color.secondary), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Count;"));
}, ";", function (props) {
  return props.status === 'inverse' && _ref3;
}, ";span{display:inline-block;}");
var Text = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e13xivpu1"
} : {
  target: "e13xivpu1",
  label: "Text"
})(process.env.NODE_ENV === "production" ? {
  name: "fkcdmb",
  styles: "span{display:inline-block;}"
} : {
  name: "fkcdmb",
  styles: "span{display:inline-block;}",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});

var _ref = process.env.NODE_ENV === "production" ? {
  name: "1gj4nfm",
  styles: "a{color:rgba(255, 255, 255, 0.7);}"
} : {
  name: "1qcdyxb-CardinalInner",
  styles: "a{color:rgba(255, 255, 255, 0.7);};label:CardinalInner;",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

var _ref2 = process.env.NODE_ENV === "production" ? {
  name: "mhsd5o",
  styles: "&:hover{background:rgba(255, 255, 255, 0.2);}"
} : {
  name: "i2sgek-CardinalInner",
  styles: "&:hover{background:rgba(255, 255, 255, 0.2);};label:CardinalInner;",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

var CardinalInner = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e13xivpu0"
} : {
  target: "e13xivpu0",
  label: "CardinalInner"
})("display:inline-block;vertical-align:top;padding:8px 12px;border-radius:", _styles.spacing.borderRadius.small, "px;text-align:", function (props) {
  return props.alignment;
}, ";svg{width:12px;height:12px;margin:1px 0 0 4px;vertical-align:top;color:inherit;}", function (props) {
  return props.isLoading && /*#__PURE__*/(0, _theming.css)(Count, ",", Text, "{overflow:hidden;>span,a{", _animation.inlineGlow, ";}img{opacity:0;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:CardinalInner;"));
}, ";", function (props) {
  return props.selectable && /*#__PURE__*/(0, _theming.css)("cursor:pointer;&:hover{background:", _styles.background.app, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:CardinalInner;"));
}, ";", function (props) {
  return props.selectable && (props.inverse ? _ref2 : /*#__PURE__*/(0, _theming.css)("cursor:pointer;&:hover{background:", _styles.background.app, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:CardinalInner;")));
}, ";", Count, "{font-weight:", function (props) {
  return props.size === 'small' ? _styles.typography.weight.bold : _styles.typography.weight.regular;
}, ";font-size:", function (props) {
  return props.size === 'small' ? _styles.typography.size.s2 : _styles.typography.size.m3;
}, "px;line-height:", function (props) {
  return props.size === 'small' ? _styles.typography.size.s3 : _styles.typography.size.m3;
}, "px;margin-bottom:", function (props) {
  return props.size === 'small' ? 2 : 4;
}, "px;}", Text, "{color:", function (props) {
  return props.inverse ? 'rgba(255, 255, 255, 0.5)' : _styles.color.dark;
}, ";font-size:", function (props) {
  return props.size === 'small' ? _styles.typography.size.s1 : _styles.typography.size.s2;
}, "px;line-height:", function (props) {
  return props.size === 'small' ? _styles.typography.size.s2 : _styles.typography.size.m1;
}, "px;clear:both;}", function (props) {
  return props.inverse && _ref;
}, ";");

function Cardinal(_ref4) {
  var isLoading = _ref4.isLoading,
      selectable = _ref4.selectable,
      onHover = _ref4.onHover,
      onClick = _ref4.onClick,
      active = _ref4.active,
      size = _ref4.size,
      count = _ref4.count,
      countLink = _ref4.countLink,
      text = _ref4.text,
      noPlural = _ref4.noPlural,
      status = _ref4.status,
      CountWrapper = _ref4.CountWrapper,
      TextWrapper = _ref4.TextWrapper,
      alignment = _ref4.alignment,
      props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
  var countValue = count;

  if (countLink) {
    countValue = /*#__PURE__*/_react["default"].createElement(_Link.Link, {
      href: countLink,
      inverse: status === 'inverse'
    }, count);
  }

  var events = {};

  if (selectable) {
    events = {
      onMouseEnter: function onMouseEnter() {
        return onHover(true);
      },
      onMouseLeave: function onMouseLeave() {
        return onHover(false);
      },
      onClick: onClick
    };
  }

  return /*#__PURE__*/_react["default"].createElement(CardinalInner, (0, _extends2["default"])({
    isLoading: isLoading,
    selectable: selectable,
    active: active,
    size: size,
    alignment: alignment,
    inverse: status === 'inverse'
  }, events, props), /*#__PURE__*/_react["default"].createElement(Count, {
    status: status
  }, /*#__PURE__*/_react["default"].createElement(CountWrapper, null, countValue)), /*#__PURE__*/_react["default"].createElement(Text, null, /*#__PURE__*/_react["default"].createElement(TextWrapper, null, !noPlural && typeof count === 'number' ? (0, _pluralize["default"])(text, count) : text)));
}

var DefaultWrapper = function DefaultWrapper(_ref5) {
  var children = _ref5.children;
  return /*#__PURE__*/_react["default"].createElement("span", null, children);
};

Cardinal.defaultProps = {
  isLoading: false,
  selectable: false,
  onHover: function onHover() {
    return 0;
  },
  onClick: function onClick() {
    return 0;
  },
  active: false,
  size: 'large',
  status: 'default',
  count: '000',
  countLink: null,
  noPlural: false,
  text: 'loading',
  CountWrapper: DefaultWrapper,
  TextWrapper: DefaultWrapper,
  alignment: 'left'
};