@atlaskit/smart-card 16.3.0 → 17.2.0

package/dist/cjs/view/BlockCard/components/Icon.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockCardIconImageClassName = exports.Icon = void 0;
+
+var _core = require("@emotion/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
+
+var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
+
+var _utils = require("../utils");
+
+/** @jsx jsx */
+var blockCardIconImageClassName = 'block-card-icon-image';
+exports.blockCardIconImageClassName = blockCardIconImageClassName;
+
+var Icon = function Icon(_ref) {
+  var url = _ref.url,
+      icon = _ref.icon,
+      defaultIcon = _ref.defaultIcon,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-icon' : _ref$testId;
+  var placeholder = defaultIcon || (0, _core.jsx)(_link.default, {
+    label: "link",
+    size: "small",
+    testId: "".concat(testId, "-default")
+  });
+  var image = url && (0, _core.jsx)(_reactRenderImage.default, {
+    src: url,
+    loaded: (0, _core.jsx)("img", {
+      css: {
+        height: (0, _utils.gs)(2),
+        width: (0, _utils.gs)(2)
+      },
+      src: url,
+      "data-testid": "".concat(testId, "-image")
+    }),
+    errored: placeholder
+  });
+  return (0, _core.jsx)("span", {
+    css: {
+      height: (0, _utils.gs)(2.5),
+      width: (0, _utils.gs)(2),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    "data-testid": testId,
+    className: blockCardIconImageClassName
+  }, icon || image || placeholder);
+};
+
+exports.Icon = Icon;

package/dist/cjs/view/BlockCard/components/Link.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Link = void 0;
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+/** @jsx jsx */
+var Link = function Link(_ref) {
+  var url = _ref.url,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card' : _ref$testId,
+      className = _ref.className;
+  return (0, _core.jsx)("span", {
+    "data-testid": "".concat(testId, "-link"),
+    className: className,
+    css: {
+      color: _colors.B400,
+      wordBreak: 'break-all'
+    }
+  }, url);
+};
+
+exports.Link = Link;

package/dist/cjs/view/BlockCard/components/Metadata.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Metadata = void 0;
+
+var _core = require("@emotion/core");
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _utils = require("../utils");
+
+var _colors = require("@atlaskit/theme/colors");
+
+/** @jsx jsx */
+var Metadata = function Metadata(_ref) {
+  var text = _ref.text,
+      icon = _ref.icon,
+      iconUrl = _ref.iconUrl,
+      tooltip = _ref.tooltip;
+  var metadataIcon = icon || null;
+
+  if (!metadataIcon && iconUrl) {
+    metadataIcon = (0, _core.jsx)("img", {
+      src: iconUrl,
+      css: {
+        width: (0, _utils.gs)(1),
+        height: (0, _utils.gs)(1)
+      }
+    });
+  }
+
+  var metadata = (0, _core.jsx)("div", {
+    css: {
+      display: 'flex',
+      alignItems: 'center',
+      marginRight: (0, _utils.gs)(0.5)
+    }
+  }, metadataIcon, (0, _core.jsx)("span", {
+    css: {
+      fontSize: (0, _utils.gs)(1.5),
+      color: "".concat(_colors.N300),
+      marginRight: (0, _utils.gs)(0.5),
+      marginLeft: '2px'
+    }
+  }, text));
+
+  if (tooltip) {
+    return (0, _core.jsx)(_tooltip.default, {
+      content: tooltip
+    }, metadata);
+  }
+
+  return metadata;
+};
+
+exports.Metadata = Metadata;

package/dist/cjs/view/BlockCard/components/MetadataList.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.metadataListClassName = exports.MetadataList = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _core = require("@emotion/core");
+
+var _Metadata = require("./Metadata");
+
+var _utils = require("../utils");
+
+/** @jsx jsx */
+var metadataListClassName = 'smart-link-metadata-list';
+exports.metadataListClassName = metadataListClassName;
+
+var MetadataList = function MetadataList(_ref) {
+  var items = _ref.items,
+      testId = _ref.testId;
+  return (0, _core.jsx)("div", {
+    css: {
+      display: 'flex',
+      marginTop: (0, _utils.gs)(0.5),
+      alignItems: 'center',
+      '&:last-child': {
+        marginRight: '0px'
+      }
+    },
+    "data-testid": testId,
+    className: metadataListClassName
+  }, items.map(function (item) {
+    return (0, _core.jsx)(_Metadata.Metadata, (0, _extends2.default)({
+      key: item.text
+    }, item));
+  }));
+};
+
+exports.MetadataList = MetadataList;

package/dist/cjs/view/BlockCard/components/Modal.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+
+var _ModalHeader = require("./ModalHeader");
+
+var _utils = require("../../../utils");
+
+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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var iframeStyles = {
+  width: "100%",
+  height: 'calc(100vh - 248px)'
+};
+
+var ModalWithErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(ModalWithErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ModalWithErrorBoundary);
+
+  function ModalWithErrorBoundary() {
+    (0, _classCallCheck2.default)(this, ModalWithErrorBoundary);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(ModalWithErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      if (this.props.onOpenFailed) {
+        this.props.onOpenFailed(error, errorInfo);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(Modal, this.props);
+    }
+  }]);
+  return ModalWithErrorBoundary;
+}(_react.default.Component);
+
+var Modal = function Modal(_ref) {
+  var onClose = _ref.onClose,
+      onOpen = _ref.onOpen,
+      src = _ref.src,
+      testId = _ref.testId,
+      showModal = _ref.showModal,
+      providerName = _ref.providerName,
+      metadata = _ref.metadata,
+      icon = _ref.icon,
+      closeLabel = _ref.closeLabel,
+      iframeName = _ref.iframeName,
+      title = _ref.title,
+      url = _ref.url,
+      download = _ref.download,
+      byline = _ref.byline,
+      _ref$isTrusted = _ref.isTrusted,
+      isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
+      onViewActionClick = _ref.onViewActionClick,
+      onDownloadActionClick = _ref.onDownloadActionClick;
+
+  var _useState = (0, _react.useState)(showModal),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var sandbox = (0, _utils.getIframeSandboxAttribute)(isTrusted);
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    height: "100%",
+    width: "large",
+    testId: testId,
+    onOpenComplete: onOpen,
+    onClose: function onClose() {
+      setIsOpen(false);
+    },
+    onCloseComplete: onClose
+  }, /*#__PURE__*/_react.default.createElement(_ModalHeader.Header, {
+    providerName: providerName,
+    icon: icon,
+    metadata: metadata,
+    url: url,
+    title: title,
+    label: closeLabel,
+    download: download,
+    byline: byline,
+    onViewActionClick: onViewActionClick,
+    onDownloadActionClick: onDownloadActionClick
+  }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, src ? /*#__PURE__*/_react.default.createElement("iframe", {
+    style: iframeStyles,
+    name: iframeName,
+    frameBorder: 0,
+    src: src,
+    sandbox: sandbox
+  }) : /*#__PURE__*/_react.default.createElement("iframe", {
+    style: iframeStyles,
+    name: iframeName,
+    frameBorder: 0,
+    sandbox: sandbox
+  }))));
+};
+
+var _default = ModalWithErrorBoundary;
+exports.default = _default;

package/dist/cjs/view/BlockCard/components/ModalHeader.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Header = void 0;
+
+var _core = require("@emotion/core");
+
+var _react = require("react");
+
+var _modalDialog = require("@atlaskit/modal-dialog");
+
+var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
+
+var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _utils = require("../utils");
+
+var _Icon = require("./Icon");
+
+var _MetadataList = require("./MetadataList");
+
+var _Byline = require("./Byline");
+
+var _messages = require("@atlaskit/media-ui/messages");
+
+/** @jsx jsx */
+var Header = function Header(_ref) {
+  var title = _ref.title,
+      label = _ref.label,
+      _ref$metadata = _ref.metadata,
+      metadata = _ref$metadata === void 0 ? {
+    items: []
+  } : _ref$metadata,
+      icon = _ref.icon,
+      providerName = _ref.providerName,
+      url = _ref.url,
+      download = _ref.download,
+      byline = _ref.byline,
+      onViewActionClick = _ref.onViewActionClick,
+      onDownloadActionClick = _ref.onDownloadActionClick;
+
+  var _useModal = (0, _modalDialog.useModal)(),
+      onClose = _useModal.onClose;
+
+  return (0, _core.jsx)("div", {
+    style: {
+      paddingLeft: (0, _utils.gs)(3),
+      paddingRight: (0, _utils.gs)(3),
+      paddingBottom: (0, _utils.gs)(2),
+      paddingTop: (0, _utils.gs)(2)
+    }
+  }, (0, _core.jsx)("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'baseline',
+      borderBottom: "1px solid ".concat(_colors.N30A)
+    }
+  }, (0, _core.jsx)("div", {
+    css: {
+      flex: 1
+    }
+  }, (0, _core.jsx)("div", {
+    css: {
+      display: 'flex'
+    }
+  }, icon && (0, _core.jsx)(_Icon.Icon, icon), (0, _core.jsx)("div", {
+    css: {
+      paddingLeft: (0, _utils.gs)(2),
+      paddingBottom: (0, _utils.gs)(2)
+    }
+  }, (0, _core.jsx)("h3", null, title), (0, _core.jsx)("div", {
+    css: {
+      color: _colors.N100
+    }
+  }, metadata.items.length && (0, _core.jsx)(_MetadataList.MetadataList, {
+    items: metadata.items
+  }) || (0, _core.jsx)(_Byline.Byline, null, byline))))), (0, _core.jsx)("div", null, download && (0, _core.jsx)(_customThemeButton.default, {
+    appearance: "primary",
+    href: download,
+    onClick: onDownloadActionClick
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.download)), url && (0, _core.jsx)(_customThemeButton.default, {
+    href: url,
+    target: "_blank",
+    appearance: "link",
+    testId: "preview-view-action",
+    iconAfter: (0, _core.jsx)(_shortcut.default, {
+      size: "small",
+      label: "go to source"
+    }),
+    onClick: onViewActionClick
+  }, providerName ? (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal)), (0, _core.jsx)(_customThemeButton.default, {
+    appearance: "subtle",
+    iconBefore: (0, _core.jsx)(_close.default, {
+      label: label
+    }),
+    onClick: onClose
+  }))));
+};
+
+exports.Header = Header;

package/dist/cjs/view/BlockCard/components/Name.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockCardContentHeaderNameClassName = exports.Name = void 0;
+
+var _core = require("@emotion/core");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _utils = require("../utils");
+
+/** @jsx jsx */
+var blockCardContentHeaderNameClassName = 'block-card-content-header-name';
+exports.blockCardContentHeaderNameClassName = blockCardContentHeaderNameClassName;
+
+var Name = function Name(_ref) {
+  var name = _ref.name,
+      _ref$isLeftPadded = _ref.isLeftPadded,
+      isLeftPadded = _ref$isLeftPadded === void 0 ? true : _ref$isLeftPadded,
+      testId = _ref.testId,
+      textColor = _ref.textColor;
+  return (0, _core.jsx)("span", {
+    css: {
+      fontSize: "".concat((0, _constants.fontSize)(), "px"),
+      fontWeight: 500,
+      marginLeft: isLeftPadded ? (0, _utils.gs)(1) : '0',
+      lineHeight: (0, _utils.gs)(2.5),
+      // Spec: show max two lines.
+      display: '-webkit-box',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      wordBreak: 'break-word',
+      WebkitLineClamp: 2,
+      WebkitBoxOrient: 'vertical',
+      color: textColor ? textColor : 'inherit',
+      // Fallback options.
+      maxHeight: (0, _utils.gs)(6)
+    },
+    "data-testid": testId,
+    "data-trello-do-not-use-override": "block-card-content-header-name",
+    className: blockCardContentHeaderNameClassName
+  }, name);
+};
+
+exports.Name = Name;

package/dist/cjs/view/BlockCard/components/Provider.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Provider = void 0;
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _utils = require("../utils");
+
+/** @jsx jsx */
+var Provider = function Provider(_ref) {
+  var name = _ref.name,
+      icon = _ref.icon;
+  var iconToRender = icon || null;
+
+  if (typeof icon === 'string') {
+    iconToRender = (0, _core.jsx)("img", {
+      className: "smart-link-icon",
+      css: {
+        height: (0, _utils.gs)(1.5),
+        width: (0, _utils.gs)(1.5)
+      },
+      src: icon
+    });
+  }
+
+  return (0, _core.jsx)("div", {
+    css: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, iconToRender, (0, _core.jsx)("span", {
+    css: {
+      fontSize: (0, _utils.gs)(1.5),
+      color: _colors.N300,
+      margin: 0,
+      marginLeft: (0, _utils.gs)(0.5),
+      // EDM-713: fixes copy-paste from renderer to editor for Firefox
+      // due to HTML its unwrapping behaviour on paste.
+      MozUserSelect: 'none'
+    }
+  }, name));
+};
+
+exports.Provider = Provider;

package/dist/cjs/view/BlockCard/components/Thumbnail.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThumbnailWithBackground = exports.ThumbnailDefault = exports.Thumbnail = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _core = require("@emotion/core");
+
+var _utils = require("../utils");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var Thumbnail = function Thumbnail(props) {
+  return props.color ? (0, _core.jsx)(ThumbnailWithBackground, props) : (0, _core.jsx)(ThumbnailDefault, props);
+};
+
+exports.Thumbnail = Thumbnail;
+var sharedStyles = {
+  // The dimensions of the image are set in this manner
+  // in order for `flex` to respect this value.
+  minWidth: [(0, _utils.gs)(13), (0, _utils.gs)(20)],
+  maxWidth: [(0, _utils.gs)(13), (0, _utils.gs)(20)]
+};
+
+var ThumbnailDefault = function ThumbnailDefault(_ref) {
+  var src = _ref.src,
+      testId = _ref.testId;
+  return (0, _core.jsx)("div", {
+    css: (0, _utils.mq)(_objectSpread(_objectSpread({}, sharedStyles), {}, {
+      backgroundSize: 'cover',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: '50% 50%',
+      backgroundImage: "url(".concat(src, ")")
+    })),
+    "data-testid": testId,
+    "data-trello-do-not-use-override": testId
+  });
+};
+
+exports.ThumbnailDefault = ThumbnailDefault;
+
+var ThumbnailWithBackground = function ThumbnailWithBackground(_ref2) {
+  var src = _ref2.src,
+      color = _ref2.color,
+      testId = _ref2.testId;
+  return (0, _core.jsx)("div", {
+    css: (0, _utils.mq)(_objectSpread(_objectSpread({}, sharedStyles), {}, {
+      backgroundColor: color,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    })),
+    "data-testid": testId,
+    "data-trello-do-not-use-override": testId
+  }, (0, _core.jsx)("img", {
+    src: src,
+    css: {
+      height: '90px',
+      width: '90px'
+    }
+  }));
+};
+
+exports.ThumbnailWithBackground = ThumbnailWithBackground;

package/dist/cjs/view/BlockCard/components/UnresolvedText.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnresolvedText = void 0;
+
+var _core = require("@emotion/core");
+
+/** @jsx jsx */
+var UnresolvedText = function UnresolvedText(_ref) {
+  var icon = _ref.icon,
+      text = _ref.text;
+  return (0, _core.jsx)("span", {
+    css: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, icon, text);
+};
+
+exports.UnresolvedText = UnresolvedText;