@storybook/design-system/dist/components/marketing/DisplayCard/DisplayCard.js

Storybook design system

"use strict";

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

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

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

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

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

var _humanFormat = _interopRequireDefault(require("human-format"));

var _coloredIcons = require("../../../images/colored-icons");

var _VerifiedBadge = require("../VerifiedBadge");

var _DisplayCard = require("./DisplayCard.styles");

var _excluded = ["image", "name", "displayName", "description", "weeklyDownloads", "authors", "orientation", "appearance", "isLoading", "verifiedCreator", "from", "clickIntercept"];

var DisplayCard = function DisplayCard(_ref) {
  var _ref$image = _ref.image,
      ImageProp = _ref$image === void 0 ? _coloredIcons.CustomAddon : _ref$image,
      _ref$name = _ref.name,
      name = _ref$name === void 0 ? '' : _ref$name,
      displayName = _ref.displayName,
      _ref$description = _ref.description,
      description = _ref$description === void 0 ? '' : _ref$description,
      _ref$weeklyDownloads = _ref.weeklyDownloads,
      weeklyDownloads = _ref$weeklyDownloads === void 0 ? 0 : _ref$weeklyDownloads,
      _ref$authors = _ref.authors,
      authors = _ref$authors === void 0 ? [] : _ref$authors,
      _ref$orientation = _ref.orientation,
      orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
      _ref$appearance = _ref.appearance,
      appearance = _ref$appearance === void 0 ? 'community' : _ref$appearance,
      _ref$isLoading = _ref.isLoading,
      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
      _ref$verifiedCreator = _ref.verifiedCreator,
      verifiedCreator = _ref$verifiedCreator === void 0 ? '' : _ref$verifiedCreator,
      from = _ref.from,
      clickIntercept = _ref.clickIntercept,
      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement(_DisplayCard.CardWrapper, (0, _extends2["default"])({
    orientation: orientation
  }, props), !isLoading && clickIntercept, /*#__PURE__*/_react["default"].createElement(_DisplayCard.Info, {
    orientation: orientation
  }, /*#__PURE__*/_react["default"].createElement(_DisplayCard.Image, (0, _extends2["default"])({
    orientation: orientation,
    isLoading: isLoading // TODO: Might need a different default icon for component catalog as opposed to the addon catalog
    // eslint-disable-next-line no-nested-ternary

  }, ImageProp && !isLoading ? typeof ImageProp === 'string' && ImageProp !== '' ? {
    src: ImageProp
  } : {
    as: ImageProp
  } : undefined)), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_DisplayCard.Title, {
    isLoading: isLoading
  }, /*#__PURE__*/_react["default"].createElement("span", null, isLoading ? 'loading' : displayName || name), ['official', 'integrators'].includes(appearance) && /*#__PURE__*/_react["default"].createElement(_VerifiedBadge.VerifiedBadge, {
    appearance: appearance,
    creator: verifiedCreator
  })), /*#__PURE__*/_react["default"].createElement(_DisplayCard.Description, {
    isLoading: isLoading
  }, /*#__PURE__*/_react["default"].createElement("span", null, isLoading ? 'loading description of addon' : description)))), /*#__PURE__*/_react["default"].createElement(_DisplayCard.Spacer, null), /*#__PURE__*/_react["default"].createElement(_DisplayCard.Meta, null, /*#__PURE__*/_react["default"].createElement(_DisplayCard.Stats, {
    size: "small",
    count: isLoading ? undefined : (0, _humanFormat["default"])(weeklyDownloads || 0, {
      decimals: 1,
      separator: ''
    }),
    text: isLoading ? undefined : 'Downloads',
    noPlural: true,
    isLoading: isLoading
  }), /*#__PURE__*/_react["default"].createElement(_DisplayCard.Authors, {
    users: isLoading ? undefined : authors,
    isLoading: isLoading
  })));
};

exports.DisplayCard = DisplayCard;