@atlaskit/media-card 73.8.0 → 74.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/media-card
 
+## 74.0.0
+
+### Major Changes
+
+- [`13d807ed06f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/13d807ed06f) - [MEX-1027] Migrate to @emotion/react in Media-card
+
+### Minor Changes
+
+- [`974e87d133a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/974e87d133a) - [MEX-1574] Updated fetching for caching images
+
+### Patch Changes
+
+- [`e3d4c39b20c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3d4c39b20c) - Remove version.json file.
+  Use injected package name and version from environment variable instead.
+- Updated dependencies
+
 ## 73.8.0
 
 ### Minor Changes

package/dist/cjs/files/cardImageView/cardImageViewWrapper.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBarWrapper = exports.PlayIconWrapper = exports.CardImageViewWrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _components = require("@atlaskit/theme/components");
+
+var _classnames = require("./classnames");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var CardImageViewWrapper = function CardImageViewWrapper(props) {
+  var disableOverlay = props.disableOverlay,
+      selectable = props.selectable,
+      selected = props.selected,
+      mediaType = props.mediaType,
+      mediaName = props.mediaName,
+      status = props.status,
+      progress = props.progress;
+  var theme = (0, _components.useGlobalTheme)();
+  return (0, _react.jsx)("div", {
+    id: "cardImageViewWrapper",
+    "data-testid": "media-file-card-view",
+    "data-test-media-name": mediaName,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    "data-test-selected": selected ? true : undefined,
+    css: (0, _styles.wrapperStyles)({
+      theme: theme,
+      disableOverlay: disableOverlay,
+      selectable: selectable,
+      selected: selected,
+      mediaType: mediaType
+    }),
+    className: "".concat(_classnames.fileCardImageViewSelector, " ").concat(selected ? _classnames.fileCardImageViewSelectedSelector : '')
+  }, props.children);
+};
+
+exports.CardImageViewWrapper = CardImageViewWrapper;
+
+var PlayIconWrapper = function PlayIconWrapper(props) {
+  return (0, _react.jsx)("div", {
+    css: _styles.playIconWrapperStyles
+  }, props.children);
+};
+
+exports.PlayIconWrapper = PlayIconWrapper;
+
+var ProgressBarWrapper = function ProgressBarWrapper(props) {
+  return (0, _react.jsx)("div", {
+    css: _styles.progressBarWrapperStyles
+  }, props.children);
+};
+
+exports.ProgressBarWrapper = ProgressBarWrapper;

package/dist/cjs/files/cardImageView/cardOverlay/cardOverlayComponents.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleWrapper = exports.Overlay = exports.Metadata = exports.ErrorMessage = exports.AltWrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _components = require("@atlaskit/theme/components");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var Overlay = function Overlay(props) {
+  var hasError = props.hasError,
+      noHover = props.noHover,
+      className = props.className;
+  return (0, _react.jsx)("div", {
+    css: (0, _styles.overlayStyles)({
+      hasError: hasError,
+      noHover: noHover
+    }),
+    className: className
+  }, props.children);
+};
+
+exports.Overlay = Overlay;
+
+var ErrorMessage = function ErrorMessage(props) {
+  return (0, _react.jsx)("div", {
+    css: _styles.errorMessageStyles
+  }, props.children);
+};
+
+exports.ErrorMessage = ErrorMessage;
+
+var AltWrapper = function AltWrapper(props) {
+  return (0, _react.jsx)("div", {
+    css: _styles.altWrapperStyles
+  }, props.children);
+};
+
+exports.AltWrapper = AltWrapper;
+
+var TitleWrapper = function TitleWrapper(props) {
+  var theme = (0, _components.useGlobalTheme)();
+  return (0, _react.jsx)("div", {
+    css: (0, _styles.titleWrapperStyles)(theme),
+    className: 'title'
+  }, props.children);
+};
+
+exports.TitleWrapper = TitleWrapper;
+
+var Metadata = function Metadata(props) {
+  return (0, _react.jsx)("div", {
+    css: _styles.metadataStyles,
+    className: props.className
+  }, props.children);
+};
+
+exports.Metadata = Metadata;

package/dist/cjs/files/cardImageView/cardOverlay/index.js

@@ -23,7 +23,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -37,7 +39,9 @@ var _errorIcon = require("../../../utils/errorIcon");
 
 var _cardActions = _interopRequireDefault(require("../../../utils/cardActions"));
 
-var _styled = require("./styled");
+var _styles = require("./styles");
+
+var _cardOverlayComponents = require("./cardOverlayComponents");
 
 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); }
 
@@ -114,21 +118,25 @@ var CardOverlay = /*#__PURE__*/function (_Component) {
           actions = _this$props2.actions;
       var titleText = resolveTitleText(cardStatus, mediaName, error, selected);
       var menuTriggerColor = !persistent ? 'white' : undefined;
-      return /*#__PURE__*/_react.default.createElement(_styled.Overlay, {
+      return (0, _react.jsx)(_cardOverlayComponents.Overlay, {
         hasError: !!error,
         noHover: noHover,
         className: this.wrapperClassNames
-      }, /*#__PURE__*/_react.default.createElement(_styled.TopRow, {
+      }, (0, _react.jsx)("div", {
+        css: _styles.topRowStyles,
         className: 'top-row'
-      }, this.errorLine(), /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, {
-        className: 'title'
-      }, titleText ? /*#__PURE__*/_react.default.createElement(_mediaUi.Ellipsify, {
+      }, this.errorLine(), (0, _react.jsx)(_cardOverlayComponents.TitleWrapper, null, titleText ? (0, _react.jsx)(_mediaUi.Ellipsify, {
         testId: "media-card-file-name",
         text: titleText,
         lines: 2
-      }) : null), this.tickBox()), /*#__PURE__*/_react.default.createElement(_styled.BottomRow, {
+      }) : null), this.tickBox()), (0, _react.jsx)("div", {
+        css: _styles.bottomRowStyles,
         className: 'bottom-row'
-      }, /*#__PURE__*/_react.default.createElement(_styled.LeftColumn, null, this.bottomLeftColumn()), /*#__PURE__*/_react.default.createElement(_styled.RightColumn, null, actions ? /*#__PURE__*/_react.default.createElement(_cardActions.default, {
+      }, (0, _react.jsx)("div", {
+        css: _styles.leftColumnStyles
+      }, this.bottomLeftColumn()), (0, _react.jsx)("div", {
+        css: _styles.rightColumnStyles
+      }, actions ? (0, _react.jsx)(_cardActions.default, {
         actions: actions,
         onToggle: this.onMenuToggle,
         triggerColor: menuTriggerColor
@@ -140,7 +148,11 @@ var CardOverlay = /*#__PURE__*/function (_Component) {
       var _this$props3 = this.props,
           error = _this$props3.error,
           alt = _this$props3.alt;
-      return error && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.ErrorLine, null, /*#__PURE__*/_react.default.createElement(_errorIcon.ErrorIcon, null), /*#__PURE__*/_react.default.createElement(_styled.ErrorMessage, null, error)), alt && /*#__PURE__*/_react.default.createElement(_styled.ErrorLine, null, /*#__PURE__*/_react.default.createElement(_styled.AltWrapper, null, alt)));
+      return error && (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
+        css: _styles.errorLineStyles
+      }, (0, _react.jsx)(_errorIcon.ErrorIcon, null), (0, _react.jsx)(_cardOverlayComponents.ErrorMessage, null, error)), alt && (0, _react.jsx)("div", {
+        css: _styles.errorLineStyles
+      }, (0, _react.jsx)(_cardOverlayComponents.AltWrapper, null, alt)));
     }
   }, {
     key: "tickBox",
@@ -148,17 +160,16 @@ var CardOverlay = /*#__PURE__*/function (_Component) {
       var _this$props4 = this.props,
           selected = _this$props4.selected,
           selectable = _this$props4.selectable;
-
-      var tick = /*#__PURE__*/_react.default.createElement(_check.default, {
+      var tick = (0, _react.jsx)(_check.default, {
         label: "tick"
       });
-
       var className = (0, _classnames.default)('tickbox', {
         selected: selected
       });
-      return selectable && /*#__PURE__*/_react.default.createElement(_styled.TickBox, {
+      return selectable && (0, _react.jsx)("div", {
+        css: _styles.tickBoxStyles,
         className: className
-      }, " ", tick, " ");
+      }, tick);
     }
   }, {
     key: "bottomLeftColumn",
@@ -171,14 +182,15 @@ var CardOverlay = /*#__PURE__*/function (_Component) {
             subtitle = _this$props5.subtitle,
             icon = _this$props5.icon;
         var classNames = (0, _classnames.default)('metadata');
-        var fileIcon = mediaType || icon ? /*#__PURE__*/_react.default.createElement(_fileIcon.FileIcon, {
+        var fileIcon = mediaType || icon ? (0, _react.jsx)(_fileIcon.FileIcon, {
           mediaType: mediaType,
           iconUrl: icon
         }) : null;
-        var subtitleEl = subtitle ? /*#__PURE__*/_react.default.createElement(_styled.Subtitle, {
+        var subtitleEl = subtitle ? (0, _react.jsx)("div", {
+          css: _styles.subtitleStyles,
           className: "file-size"
         }, subtitle) : null;
-        return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styled.Metadata, {
+        return (0, _react.jsx)("div", null, (0, _react.jsx)(_cardOverlayComponents.Metadata, {
           className: classNames
         }, fileIcon, subtitleEl));
       }
@@ -194,7 +206,7 @@ var CardOverlay = /*#__PURE__*/function (_Component) {
     }
   }]);
   return CardOverlay;
-}(_react.Component);
+}(_react2.Component);
 
 exports.CardOverlay = CardOverlay;
 (0, _defineProperty2.default)(CardOverlay, "defaultProps", {

package/dist/cjs/files/cardImageView/cardOverlay/styles.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.topRowStyles = exports.titleWrapperStyles = exports.tickBoxStyles = exports.subtitleStyles = exports.rightColumnStyles = exports.overlayStyles = exports.metadataStyles = exports.leftColumnStyles = exports.errorMessageStyles = exports.errorLineStyles = exports.bottomRowStyles = exports.altWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _components = require("@atlaskit/theme/components");
+
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+
+var _styles = require("../../../styles");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+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; }
+
+var tickBoxStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  border-radius: 20px;\n  color: #798599; /* TODO FIL-3884: Align color with new design */\n  display: flex;\n  opacity: 0;\n\n  &.selected {\n    opacity: 1;\n    color: white;\n    background-color: #0052cc; /* TODO FIL-3884: Align with tickbox icons */\n  }\n\n  /* Enforce dimensions of \"tick\" icon */\n  svg {\n    position: absolute;\n    width: 14px;\n  }\n"])), (0, _mediaUi.size)(14), (0, _styles.transition)(), (0, _styles.rgba)('#ffffff', 0.5));
+exports.tickBoxStyles = tickBoxStyles;
+
+var getOverlayStyles = function getOverlayStyles(_ref) {
+  var hasError = _ref.hasError,
+      noHover = _ref.noHover;
+
+  if (hasError || noHover) {
+    return "\n        cursor: default;\n\n        &:hover {\n          background: transparent;\n        }\n      ";
+  }
+};
+
+var overlayStyles = function overlayStyles(props) {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", " display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  background: transparent;\n  transition: 0.3s background ", ", 0.3s border-color;\n  padding: 16px;\n\n  ", "\n  &:not(.persistent):hover, &.active {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n\n    .bottom-row {\n      .delete-btn {\n        display: flex;\n      }\n    }\n  }\n\n  &.noHover:hover {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  .file-type-icon {\n    display: block;\n  }\n\n  &:not(.persistent) {\n    &:not(.error, .noHover):hover {\n      background-color: ", ";\n    }\n\n    &.selectable {\n      &.selected {\n        background-color: ", ";\n\n        &:hover {\n          /* TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */\n        }\n\n        .title,\n        .bottom-row,\n        .file-size,\n        .more-btn {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.persistent {\n    &:not(.active) {\n      overflow: hidden;\n    }\n\n    .top-row {\n      .title {\n        transition: opacity 0.3s;\n        opacity: 0;\n        color: white;\n        visibility: hidden;\n      }\n    }\n\n    .bottom-row {\n      opacity: 0;\n      transition: transform 0.2s, opacity 0.5s;\n      /* This is the height of the overlay footer, needs to be present now since the parent uses flex and 100% doesn't look right anymore */\n      transform: translateY(35px);\n\n      .file-type-icon {\n        display: none;\n      }\n\n      .file-size {\n        color: white;\n        display: none;\n      }\n\n      .more-btn {\n        color: ", ";\n        display: none;\n\n        &:hover {\n          background-color: rgba(9, 30, 66, 0.2);\n        }\n      }\n\n      .delete-btn {\n        display: none;\n\n        &:hover {\n          background-color: rgba(9, 30, 66, 0.2);\n        }\n      }\n    }\n\n    &:hover,\n    &.active {\n      background-color: ", ";\n\n      .title {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      .file-type-icon,\n      .file-size {\n        display: block;\n      }\n\n      .more-btn {\n        ", " color: ", ";\n      }\n\n      .delete-btn {\n        display: flex;\n      }\n\n      .bottom-row {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    /* Selectable */\n    &.selectable {\n      &:hover {\n        .tickbox {\n          opacity: 1;\n        }\n      }\n\n      &.selected {\n        .tickbox {\n          background-color: ", " !important;\n          border-color: ", " !important;\n          color: white;\n        }\n      }\n    }\n  }\n\n  &.error {\n    .top-row {\n      overflow: visible;\n    }\n    &:hover,\n    &.active {\n      .top-row {\n        .title {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), (0, _mediaUi.size)(), (0, _mediaUi.absolute)(), _mediaUi.borderRadius, _styles.easeOutCubic, getOverlayStyles(props), colors.B400, colors.N800, (0, _styles.rgba)(colors.N900, 0.06), colors.B200, colors.N0, colors.N0, (0, _styles.rgba)(colors.N900, 0.5), _styles.centerX, colors.N0, colors.B200, colors.B200, colors.N800);
+};
+
+exports.overlayStyles = overlayStyles;
+var errorLineStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 24px;\n  display: flex;\n  align-items: center;\n"])));
+exports.errorLineStyles = errorLineStyles;
+var leftColumnStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  position: relative;\n  box-sizing: border-box;\n  vertical-align: middle;\n"])));
+exports.leftColumnStyles = leftColumnStyles;
+var topRowStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
+exports.topRowStyles = topRowStyles;
+var bottomRowStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  height: 16px;\n"])));
+exports.bottomRowStyles = bottomRowStyles;
+var rightColumnStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([""])));
+exports.rightColumnStyles = rightColumnStyles;
+var errorMessageStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  ", " display: inline-block;\n  vertical-align: middle;\n  font-weight: bold;\n  color: ", ";\n  font-size: 12px;\n  line-height: 15px;\n  overflow: hidden;\n  max-width: 'calc(100% - 24px)';\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin: auto 3px;\n"])), _styles.antialiased, colors.N70);
+exports.errorMessageStyles = errorMessageStyles;
+var altWrapperStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  font-weight: normal;\n"])), errorMessageStyles);
+exports.altWrapperStyles = altWrapperStyles;
+
+var titleWrapperStyles = function titleWrapperStyles(theme) {
+  return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  word-wrap: break-word;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n"])), (0, _components.themed)({
+    light: colors.N800,
+    dark: colors.DN900
+  })({
+    theme: theme
+  }));
+};
+
+exports.titleWrapperStyles = titleWrapperStyles;
+var subtitleStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-size: 12px;\n  color: #5e6c84;\n"])), (0, _mediaUi.ellipsis)('100px'));
+exports.subtitleStyles = subtitleStyles;
+var metadataStyles = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+exports.metadataStyles = metadataStyles;

package/dist/cjs/files/cardImageView/index.js

@@ -23,7 +23,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _mediaUi = require("@atlaskit/media-ui");
 
@@ -31,7 +33,7 @@ var _vidPlay = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-play"));
 
 var _cardOverlay = require("./cardOverlay");
 
-var _styled = require("./styled");
+var _styles = require("./styles");
 
 var _cardLoading = require("../../utils/lightCards/cardLoading");
 
@@ -41,7 +43,7 @@ var _progressBar = require("../../utils/progressBar");
 
 var _cardActions = _interopRequireDefault(require("../../utils/cardActions"));
 
-var _classnames = require("./classnames");
+var _cardImageViewWrapper = require("./cardImageViewWrapper");
 
 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); }
 
@@ -90,11 +92,11 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
       return _this.renderSuccessCardContents();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderLoadingContents", function () {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react.jsx)("div", {
         className: "wrapper"
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react.jsx)("div", {
         className: "img-wrapper"
-      }, /*#__PURE__*/_react.default.createElement(_cardLoading.CardLoading, null)));
+      }, (0, _react.jsx)(_cardLoading.CardLoading, null)));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderErrorContents", function () {
       var _this$props2 = _this.props,
@@ -105,9 +107,9 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
           mediaType = _this$props2.mediaType,
           actions = _this$props2.actions,
           fileSize = _this$props2.fileSize;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
         className: "wrapper"
-      }), /*#__PURE__*/_react.default.createElement(_cardOverlay.CardOverlay, {
+      }), (0, _react.jsx)(_cardOverlay.CardOverlay, {
         cardStatus: status,
         error: error,
         persistent: true,
@@ -125,9 +127,9 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
           mediaType = _this$props3.mediaType,
           actions = _this$props3.actions,
           fileSize = _this$props3.fileSize;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
         className: "wrapper"
-      }), /*#__PURE__*/_react.default.createElement(_cardOverlay.CardOverlay, {
+      }), (0, _react.jsx)(_cardOverlay.CardOverlay, {
         cardStatus: status,
         noHover: true,
         persistent: true,
@@ -146,7 +148,7 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
           selectable = _this$props4.selectable,
           selected = _this$props4.selected;
       var isPersistent = mediaType === 'doc' || !dataURI;
-      return /*#__PURE__*/_react.default.createElement(_cardOverlay.CardOverlay, {
+      return (0, _react.jsx)(_cardOverlay.CardOverlay, {
         cardStatus: status,
         persistent: isPersistent,
         mediaName: mediaName,
@@ -171,7 +173,9 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styled.PlayIconWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.PlayIconBackground, null, /*#__PURE__*/_react.default.createElement(_vidPlay.default, {
+      return (0, _react.jsx)(_cardImageViewWrapper.PlayIconWrapper, null, (0, _react.jsx)("div", {
+        css: _styles.playIconBackgroundStyles
+      }, (0, _react.jsx)(_vidPlay.default, {
         testId: "media-card-play-button",
         label: "play",
         size: "large"
@@ -209,7 +213,7 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
         _this.wasThumbnailDisplayed = true;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, {
+      return (0, _react.jsx)(_mediaUi.MediaImage, {
         dataURI: dataURI,
         alt: alt,
         crop: _this.isCropped,
@@ -230,13 +234,23 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styled.ProgressBarWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.Overlay, null, /*#__PURE__*/_react.default.createElement(_styled.Title, null, /*#__PURE__*/_react.default.createElement(_mediaUi.Ellipsify, {
+      return (0, _react.jsx)(_cardImageViewWrapper.ProgressBarWrapper, null, (0, _react.jsx)("div", {
+        css: _styles.overlayStyles
+      }, (0, _react.jsx)("div", {
+        css: _styles.titleStyles
+      }, (0, _react.jsx)(_mediaUi.Ellipsify, {
         testId: "media-card-file-name",
         text: mediaName || '',
         lines: 2
-      })), /*#__PURE__*/_react.default.createElement(_styled.Body, null, /*#__PURE__*/_react.default.createElement(_styled.ProgressWrapper, null, /*#__PURE__*/_react.default.createElement(_progressBar.ProgressBar, {
+      })), (0, _react.jsx)("div", {
+        css: _styles.bodyStyles
+      }, (0, _react.jsx)("div", {
+        css: _styles.progressWrapperStyles
+      }, (0, _react.jsx)(_progressBar.ProgressBar, {
         progress: progress
-      })), /*#__PURE__*/_react.default.createElement(_styled.CardActionsWrapper, null, actions ? /*#__PURE__*/_react.default.createElement(_cardActions.default, {
+      })), (0, _react.jsx)("div", {
+        css: _styles.cardActionsWrapperStyles
+      }, actions ? (0, _react.jsx)(_cardActions.default, {
         actions: actions,
         triggerColor: "white"
       }) : null))));
@@ -258,9 +272,9 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
         }
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react.jsx)("div", {
         className: "wrapper"
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react.jsx)("div", {
         className: "img-wrapper"
       }, _this.renderMediaImage(), _this.renderProgressBar(), _this.renderPlayButton()), overlay);
     });
@@ -275,7 +289,7 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
           selected = _this$props11.selected,
           actions = _this$props11.actions;
       var isPersistent = mediaType === 'doc' || !dataURI;
-      return /*#__PURE__*/_react.default.createElement(_cardOverlay.CardOverlay, {
+      return (0, _react.jsx)(_cardOverlay.CardOverlay, {
         cardStatus: status,
         persistent: isPersistent,
         mediaName: mediaName,
@@ -300,17 +314,14 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
           progress = _this$props12.progress,
           status = _this$props12.status,
           mediaName = _this$props12.mediaName;
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
-        "data-testid": "media-file-card-view",
-        "data-test-media-name": mediaName,
-        "data-test-status": status,
-        "data-test-progress": progress,
-        "data-test-selected": selected ? true : undefined,
+      return (0, _react.jsx)(_cardImageViewWrapper.CardImageViewWrapper, {
+        mediaName: mediaName,
+        status: status,
+        progress: progress,
         disableOverlay: disableOverlay,
         selectable: selectable,
         selected: selected,
-        mediaType: mediaType,
-        className: "".concat(_classnames.fileCardImageViewSelector, " ").concat(selected ? _classnames.fileCardImageViewSelectedSelector : '')
+        mediaType: mediaType
       }, this.renderCardContents());
     }
   }, {
@@ -335,7 +346,7 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
     }
   }]);
   return FileCardImageView;
-}(_react.Component);
+}(_react2.Component);
 
 exports.FileCardImageView = FileCardImageView;
 (0, _defineProperty2.default)(FileCardImageView, "defaultProps", {

package/dist/cjs/files/cardImageView/styles.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapperStyles = exports.titleStyles = exports.progressWrapperStyles = exports.progressBarWrapperStyles = exports.playIconWrapperStyles = exports.playIconBackgroundStyles = exports.overlayStyles = exports.cardActionsWrapperStyles = exports.bodyStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _components = require("@atlaskit/theme/components");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _styles = require("../../styles");
+
+var _getSelectedBorderStyle = require("../../styles/getSelectedBorderStyle");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+var getShadowAttribute = function getShadowAttribute(props) {
+  var disableOverlay = props.disableOverlay;
+  return disableOverlay ? '' : _styles.cardShadow;
+};
+
+var getBackgroundColor = function getBackgroundColor(props) {
+  var mediaType = props.mediaType;
+  return "background: ".concat(mediaType === 'image' ? 'transparent' : (0, _components.themed)({
+    light: _colors.N20,
+    dark: _colors.DN50
+  })(props), ";");
+};
+
+var wrapperStyles = function wrapperStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", "\n  ", "\n\n  line-height: normal;\n  position: relative;\n\n  ", "\n\n  ", " .wrapper {\n    ", ";\n    display: block;\n    height: inherit;\n    position: relative;\n\n    .img-wrapper {\n      position: relative;\n      width: inherit;\n      height: inherit;\n      overflow: hidden;\n      display: block;\n      ", "\n    }\n  }\n"])), (0, _styles.rootStyles)(), getShadowAttribute(props), _mediaUi.borderRadius, getBackgroundColor(props), (0, _getSelectedBorderStyle.getSelectedBorderStyle)(props), (0, _mediaUi.size)(), _mediaUi.borderRadius, _mediaUi.borderRadius);
+};
+
+exports.wrapperStyles = wrapperStyles;
+var playIconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n\n  /* we want to override default icon size and hover state */\n  &:hover > * {\n    width: 64px;\n    height: 64px;\n  }\n"])));
+exports.playIconWrapperStyles = playIconWrapperStyles;
+var playIconBackgroundStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: rgba(23, 43, 77, 0.7);\n  border-radius: 100%;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  width: 56px;\n  height: 56px;\n"])));
+exports.playIconBackgroundStyles = playIconBackgroundStyles;
+var bodyHeight = 26;
+var progressBarWrapperStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n"])));
+exports.progressBarWrapperStyles = progressBarWrapperStyles;
+var overlayStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  border-radius: inherit;\n  background-color: rgba(9, 30, 66, 0.5);\n"])), (0, _mediaUi.absolute)(), (0, _mediaUi.size)());
+exports.overlayStyles = overlayStyles;
+var titleStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", " width: 100%;\n  padding: 8px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  word-wrap: break-word;\n"])), (0, _mediaUi.absolute)(), _colors.N0);
+exports.titleStyles = titleStyles;
+var bodyStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 8px;\n  color: ", ";\n"])), _colors.N0);
+exports.bodyStyles = bodyStyles;
+var progressWrapperStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n\n  /*\n    force the height to always be 20px (the height of the cancel icon),\n    so that the height of the progress bar doesn't jump when cards with\n    and without a cancel icon are rendered side-by-side.\n  */\n  height: ", "px;\n\n  /*\n    vertically center the progress bar within the 20px, keeping the progress bar full width\n  */\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])), bodyHeight);
+exports.progressWrapperStyles = progressWrapperStyles;
+var cardActionsWrapperStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 4px;\n  /*\n    button must appear above overlay\n   */\n  z-index: 2;\n"])));
+exports.cardActionsWrapperStyles = cardActionsWrapperStyles;

package/dist/cjs/index.js

@@ -48,7 +48,7 @@ Object.defineProperty(exports, "fileCardImageViewSelector", {
 Object.defineProperty(exports, "inlinePlayerClassName", {
   enumerable: true,
   get: function get() {
-    return _inlinePlayer.inlinePlayerClassName;
+    return _styles.inlinePlayerClassName;
   }
 });
 Object.defineProperty(exports, "newFileExperienceClassName", {
@@ -68,6 +68,6 @@ var _cardDimensions = require("./utils/cardDimensions");
 
 var _classnames = require("./files/cardImageView/classnames");
 
-var _inlinePlayer = require("./root/inlinePlayer");
+var _styles = require("./root/styles");
 
 var _cardConstants = require("./root/card/cardConstants");

package/dist/cjs/root/card/getCardPreview/cache.js

@@ -15,10 +15,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectURLCache = require("../../../utils/objectURLCache");
 
-// Dimensions are used to create a key.
-// Cache is invalidated when different dimensions are provided.
-var getCacheKey = function getCacheKey(id, dimensions) {
-  return [id, dimensions.height, dimensions.width].join('-');
+var getCacheKey = function getCacheKey(id, mode) {
+  var resizeMode = mode || 'crop';
+  return [id, resizeMode].join('-');
 };
 
 exports.getCacheKey = getCacheKey;
@@ -26,17 +25,17 @@ var CardPreviewCacheImpl = /*#__PURE__*/(0, _createClass2.default)(function Card
   var _this = this;
 
   (0, _classCallCheck2.default)(this, CardPreviewCacheImpl);
-  (0, _defineProperty2.default)(this, "get", function (id, dimensions) {
-    var cacheKey = getCacheKey(id, dimensions);
+  (0, _defineProperty2.default)(this, "get", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
     return _this.previewCache.get(cacheKey);
   });
-  (0, _defineProperty2.default)(this, "set", function (id, dimensions, cardPreview) {
-    var cacheKey = getCacheKey(id, dimensions);
+  (0, _defineProperty2.default)(this, "set", function (id, mode, cardPreview) {
+    var cacheKey = getCacheKey(id, mode);
 
     _this.previewCache.set(cacheKey, cardPreview);
   });
-  (0, _defineProperty2.default)(this, "remove", function (id, dimensions) {
-    var cacheKey = getCacheKey(id, dimensions);
+  (0, _defineProperty2.default)(this, "remove", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
 
     _this.previewCache.remove(cacheKey);
   });