@atlaskit/smart-card 16.3.0 → 17.2.0

package/dist/cjs/view/BlockCard/actions/RetryAction.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RetryAction = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("@atlaskit/media-ui/messages");
+
+var RetryAction = function RetryAction(handler) {
+  return {
+    id: 'try-again',
+    promise: function () {
+      var _promise = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", handler());
+
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function promise() {
+        return _promise.apply(this, arguments);
+      }
+
+      return promise;
+    }(),
+    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again)
+  };
+};
+
+exports.RetryAction = RetryAction;

package/dist/cjs/view/BlockCard/actions/ViewAction.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewAction = void 0;
+exports.viewFunction = viewFunction;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("@atlaskit/media-ui/messages");
+
+function viewFunction(_x) {
+  return _viewFunction.apply(this, arguments);
+}
+
+function _viewFunction() {
+  _viewFunction = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+    var url;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            url = _ref.url;
+
+            if (url) {
+              _context.next = 3;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 3:
+            window.open(url, '_blank', 'noopener=yes');
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _viewFunction.apply(this, arguments);
+}
+
+var ViewAction = function ViewAction(_ref2) {
+  var url = _ref2.url;
+  return {
+    id: 'view-content',
+    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.view),
+    promise: function promise() {
+      return viewFunction({
+        url: url
+      });
+    }
+  };
+};
+
+exports.ViewAction = ViewAction;

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.spinnerDelay = exports.Action = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _core = require("@emotion/core");
+
+var _react = require("react");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _ActionIcon = require("./ActionIcon");
+
+/** @jsx jsx */
+var spinnerDelay = 1000;
+exports.spinnerDelay = spinnerDelay;
+
+var Action = function Action(_ref) {
+  var promise = _ref.promise,
+      text = _ref.text,
+      _ref$buttonAppearance = _ref.buttonAppearance,
+      buttonAppearance = _ref$buttonAppearance === void 0 ? 'default' : _ref$buttonAppearance,
+      id = _ref.id;
+
+  var _useState = (0, _react.useState)('init'),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  return (0, _core.jsx)(_customThemeButton.default, {
+    spacing: "compact",
+    appearance: buttonAppearance,
+    isLoading: state === 'loading',
+    testId: "button-".concat(id),
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
+
+      if (state !== 'loading') {
+        setState('loading');
+        promise().then(function () {
+          setState('success');
+          setTimeout(function () {
+            return setState('init');
+          }, spinnerDelay);
+        }).catch(function () {
+          setState('failure');
+          setTimeout(function () {
+            return setState('init');
+          }, spinnerDelay);
+        });
+      }
+    }
+  }, (0, _core.jsx)("div", {
+    css: {
+      transition: 'opacity 0.3s',
+      opacity: state !== 'init' ? 0 : 1
+    }
+  }, text), (0, _core.jsx)(_ActionIcon.ActionIcon, {
+    state: state
+  }));
+};
+
+exports.Action = Action;

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.spinnerStyles = exports.ActionIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _check = _interopRequireDefault(require("@atlaskit/icon/glyph/check"));
+
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+
+/*
+  These styles are taken fro the spinner style for button. There was not an
+  easy way to share tehm between the two components.
+*/
+var spinnerStyles = {
+  display: 'flex',
+  position: 'absolute',
+  left: '50%',
+  top: '50%',
+  transform: 'translate(-50%, -50%)'
+};
+exports.spinnerStyles = spinnerStyles;
+
+var ActionIcon = function ActionIcon(_ref) {
+  var state = _ref.state;
+
+  switch (state) {
+    case 'init':
+    case 'loading':
+      return null;
+
+    case 'success':
+      return /*#__PURE__*/_react.default.createElement("div", {
+        "data-testid": "check-icon",
+        style: spinnerStyles
+      }, /*#__PURE__*/_react.default.createElement(_check.default, {
+        size: "small",
+        label: "check"
+      }));
+
+    case 'failure':
+      return /*#__PURE__*/_react.default.createElement("div", {
+        "data-testid": "cross-icon",
+        style: spinnerStyles
+      }, /*#__PURE__*/_react.default.createElement(_cross.default, {
+        size: "small",
+        label: "check"
+      }));
+  }
+};
+
+exports.ActionIcon = ActionIcon;

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionList = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _core = require("@emotion/core");
+
+var _react = require("react");
+
+var _item = _interopRequireDefault(require("@atlaskit/item"));
+
+var _droplist = _interopRequireDefault(require("@atlaskit/droplist"));
+
+var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _Action = require("./Action");
+
+var _utils = require("../utils");
+
+/** @jsx jsx */
+var ActionList = function ActionList(_ref) {
+  var items = _ref.items;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setOpen = _useState2[1];
+
+  var actionsToShow = items.slice(0, 2);
+  var actionsToList = items.slice(2, items.length);
+  return (0, _core.jsx)("div", {
+    css: (0, _utils.mq)({
+      display: 'flex',
+      marginTop: [(0, _utils.gs)(2), 0]
+    })
+  }, (0, _core.jsx)(_buttonGroup.default, null, actionsToShow.map(function (action) {
+    return (0, _core.jsx)(_Action.Action, (0, _extends2.default)({
+      key: action.id
+    }, action));
+  })), actionsToList.length ? (0, _core.jsx)("div", {
+    css: {
+      marginLeft: (0, _utils.gs)(0.5)
+    }
+  }, (0, _core.jsx)(_droplist.default, {
+    appearance: "default",
+    position: "right top",
+    isTriggerNotTabbable: true,
+    onOpenChange: function onOpenChange() {
+      return setOpen(true);
+    },
+    onClick: function onClick() {
+      return setOpen(!isOpen);
+    },
+    isOpen: isOpen,
+    trigger: (0, _core.jsx)(_customThemeButton.default, {
+      spacing: "compact"
+    }, "...")
+  }, actionsToList.map(function (actionToList) {
+    return (0, _core.jsx)(_item.default, {
+      key: actionToList.id
+    }, actionToList.text);
+  }))) : null);
+};
+
+exports.ActionList = ActionList;

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Byline = void 0;
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _utils = require("../utils");
+
+/** @jsx jsx */
+var Byline = function Byline(_ref) {
+  var text = _ref.text,
+      children = _ref.children,
+      testId = _ref.testId,
+      className = _ref.className;
+  return (0, _core.jsx)("span", {
+    css: (0, _utils.mq)({
+      fontSize: (0, _utils.gs)(1.5),
+      lineHeight: (0, _utils.gs)(2.5),
+      color: "".concat(_colors.N300),
+      fontWeight: 'normal',
+      marginTop: (0, _utils.gs)(0.5),
+      // Spec: only allow two lines MAX to be shown.
+      display: '-webkit-box',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      WebkitLineClamp: 2,
+      WebkitBoxOrient: 'vertical',
+      wordBreak: 'break-word',
+      // Fallback options.
+      maxHeight: (0, _utils.gs)(5),
+      whiteSpace: 'pre-line',
+      // EDM-713: fixes copy-paste from renderer to editor for Firefox
+      // due to HTML its unwrapping behaviour on paste.
+      MozUserSelect: 'none'
+    }),
+    "data-testid": testId,
+    className: className
+  }, text || children);
+};
+
+exports.Byline = Byline;

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollaboratorList = void 0;
+
+var _core = require("@emotion/core");
+
+var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
+
+var _utils = require("../utils");
+
+/** @jsx jsx */
+var CollaboratorList = function CollaboratorList(_ref) {
+  var items = _ref.items,
+      _ref$handleAvatarClic = _ref.handleAvatarClick,
+      handleAvatarClick = _ref$handleAvatarClic === void 0 ? function () {} : _ref$handleAvatarClic,
+      _ref$handleMoreAvatar = _ref.handleMoreAvatarsClick,
+      handleMoreAvatarsClick = _ref$handleMoreAvatar === void 0 ? function () {} : _ref$handleMoreAvatar,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'collaborator-list' : _ref$testId;
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (0, _core.jsx)("span", {
+    css: (0, _utils.mq)({
+      display: ['none', 'inherit']
+    })
+  }, (0, _core.jsx)(_avatarGroup.default, {
+    maxCount: 4,
+    appearance: "stack",
+    size: "small",
+    data: items,
+    onAvatarClick: function onAvatarClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
+      handleAvatarClick(event);
+    },
+    onMoreClick: function onMoreClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
+      handleMoreAvatarsClick(event);
+    },
+    testId: testId
+  }));
+};
+
+exports.CollaboratorList = CollaboratorList;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockCardContentClassName = exports.Content = void 0;
+
+var _core = require("@emotion/core");
+
+var _utils = require("../utils");
+
+/** @jsx jsx */
+var blockCardContentClassName = 'block-card-content';
+exports.blockCardContentClassName = blockCardContentClassName;
+
+var Content = function Content(_ref) {
+  var children = _ref.children,
+      _ref$isCompact = _ref.isCompact,
+      isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact;
+  return (0, _core.jsx)("div", {
+    css: (0, _utils.mq)({
+      padding: isCompact ? (0, _utils.gs)(1) : (0, _utils.gs)(2),
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: isCompact ? 'unset' : ['unset', 'space-between'],
+      flexGrow: 1
+    }),
+    "data-trello-do-not-use-override": "block-card-content",
+    className: blockCardContentClassName
+  }, children);
+};
+
+exports.Content = Content;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contentFooterClassName = exports.ContentFooter = void 0;
+
+var _core = require("@emotion/core");
+
+var _utils = require("../utils");
+
+/** @jsx jsx */
+var contentFooterClassName = 'smart-link-content-footer';
+exports.contentFooterClassName = contentFooterClassName;
+
+var ContentFooter = function ContentFooter(_ref) {
+  var children = _ref.children,
+      _ref$hasSpaceBetween = _ref.hasSpaceBetween,
+      hasSpaceBetween = _ref$hasSpaceBetween === void 0 ? false : _ref$hasSpaceBetween;
+  return (0, _core.jsx)("div", {
+    css: (0, _utils.mq)({
+      display: 'flex',
+      flexDirection: ['column', 'row'],
+      flexGrow: [1, 'unset'],
+      justifyContent: [hasSpaceBetween ? 'space-between' : 'flex-end', 'space-between'],
+      alignItems: ['unset', 'center'],
+      marginTop: [(0, _utils.gs)(1), (0, _utils.gs)(1.5)]
+    }),
+    className: contentFooterClassName
+  }, children);
+};
+
+exports.ContentFooter = ContentFooter;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockCardContentHeaderClassName = exports.ContentHeader = void 0;
+
+var _core = require("@emotion/core");
+
+/** @jsx jsx */
+var blockCardContentHeaderClassName = 'block-card-content-header';
+exports.blockCardContentHeaderClassName = blockCardContentHeaderClassName;
+
+var ContentHeader = function ContentHeader(_ref) {
+  var onClick = _ref.onClick,
+      link = _ref.link,
+      children = _ref.children;
+  return (0, _core.jsx)("a", {
+    onClick: onClick,
+    href: link,
+    target: "_blank",
+    css: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      // EDM-713: fixes copy-paste from renderer to editor for Firefox
+      // due to HTML its unwrapping behaviour on paste.
+      MozUserSelect: 'none'
+    },
+    "data-trello-do-not-use-override": "block-card-content-header",
+    className: blockCardContentHeaderClassName
+  }, children);
+};
+
+exports.ContentHeader = ContentHeader;

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Emoji = void 0;
+
+var _core = require("@emotion/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _utils = require("../utils");
+
+/** @jsx jsx */
+var Emoji = function Emoji(_ref) {
+  var emoji = _ref.emoji;
+  return (0, _core.jsx)("span", {
+    css: {
+      height: (0, _utils.gs)(2.5),
+      width: (0, _utils.gs)(2),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: '-2px'
+    }
+  }, emoji);
+};
+
+exports.Emoji = Emoji;

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

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Frame = exports.ExpandedFrame = exports.CompactFrame = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _core = require("@emotion/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+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 Frame = function Frame() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    isSelected: false,
+    isHoverable: false,
+    isFluidHeight: false
+  };
+  return props.compact ? (0, _core.jsx)(CompactFrame, props) : (0, _core.jsx)(ExpandedFrame, props);
+};
+
+exports.Frame = Frame;
+var sharedFrameStyles = {
+  maxWidth: (0, _utils.gs)(95),
+  width: '100%',
+  display: 'flex',
+  backgroundColor: 'white'
+};
+
+var ExpandedFrame = function ExpandedFrame(_ref) {
+  var children = _ref.children,
+      isSelected = _ref.isSelected,
+      isHoverable = _ref.isHoverable,
+      testId = _ref.testId,
+      className = _ref.className,
+      isFluidHeight = _ref.isFluidHeight;
+  return (0, _core.jsx)("div", {
+    css: (0, _utils.mq)(_objectSpread(_objectSpread({}, sharedFrameStyles), {}, {
+      '&:hover': isHoverable ? {
+        backgroundColor: _colors.N20A,
+        cursor: 'pointer'
+      } : undefined,
+      minHeight: isFluidHeight ? 0 : [(0, _utils.gs)(21), (0, _utils.gs)(15)],
+      borderRadius: isSelected ? (0, _utils.br)() : (0, _utils.br)(0.5),
+      border: "2px solid ".concat(isSelected ? _colors.B200 : 'transparent'),
+      justifyContent: 'space-between',
+      overflow: 'hidden',
+      boxShadow: "0 1px 1px ".concat(_colors.N50A, ", 0 0 1px 1px ").concat(_colors.N40A, ";")
+    })),
+    "data-testid": testId,
+    className: className,
+    "data-trello-do-not-use-override": testId
+  }, children);
+};
+
+exports.ExpandedFrame = ExpandedFrame;
+
+var CompactFrame = function CompactFrame(_ref2) {
+  var children = _ref2.children,
+      isHoverable = _ref2.isHoverable,
+      isSelected = _ref2.isSelected,
+      testId = _ref2.testId,
+      className = _ref2.className,
+      inheritDimensions = _ref2.inheritDimensions;
+  return (0, _core.jsx)("div", {
+    css: (0, _utils.mq)(_objectSpread(_objectSpread({}, sharedFrameStyles), {}, {
+      '&:hover': isHoverable ? {
+        backgroundColor: _colors.N30A
+      } : undefined,
+      borderRadius: isSelected ? (0, _utils.br)() : (0, _utils.br)(0.5),
+      border: isSelected ? "2px solid ".concat(_colors.B200) : '',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: inheritDimensions ? '100%' : (0, _utils.gs)(5),
+      backgroundColor: _colors.N20A,
+      width: ['calc(100% - 16px)', '100%'],
+      padding: ["0px ".concat((0, _utils.gs)(1)), '0']
+    })),
+    "data-testid": testId,
+    className: className
+  }, children);
+};
+
+exports.CompactFrame = CompactFrame;