@atlaskit/media-card 77.5.2 → 77.6.1

package/dist/es2019/card/v2/cardviews/processingCardView.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useEffect, useRef } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import { createAndFireMediaCardEvent } from '../../../utils/analytics';
+import { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
+import { CreatingPreview } from '../../ui/iconMessage';
+import { useBreakpoint } from '../../useBreakpoint';
+import { CardViewWrapper } from './cardViewWrapper';
+const ProcessingCardViewBase = props => {
+  const {
+    disableAnimation,
+    dimensions,
+    metadata,
+    disableOverlay,
+    innerRef
+  } = props;
+  const divRef = useRef(null);
+  const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  useEffect(() => {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  const {
+    name,
+    size,
+    mediaType,
+    mimeType
+  } = metadata || {};
+  const isZeroSize = size === 0;
+  const hasTitleBox = !disableOverlay && !!name;
+  return jsx(CardViewWrapper, _extends({}, props, {
+    metadata: metadata,
+    breakpoint: breakpoint,
+    "data-test-status": "processing",
+    ref: divRef
+  }), jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(MimeTypeIcon, {
+    testId: "media-card-file-type-icon",
+    mediaType: mediaType,
+    mimeType: mimeType,
+    name: name
+  }), !isZeroSize && jsx(CreatingPreview, {
+    disableAnimation: disableAnimation
+  })));
+};
+
+// TODO: check if analytics is correct
+
+export const ProcessingCardView = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(ProcessingCardViewBase);

package/dist/es2019/card/v2/cardviews/videoCardView.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useEffect, useRef } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireMediaCardEvent } from '../../../utils/analytics';
+import { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
+import { PlayButton } from '../../ui/playButton/playButton';
+import { ImageRenderer } from '../../ui/imageRenderer/imageRenderer';
+import { useBreakpoint } from '../../useBreakpoint';
+import { CardViewWrapper } from './cardViewWrapper';
+import { ProgressBar } from '../../ui/progressBar/progressBar';
+import { Blanket } from '../../ui/blanket/blanket';
+const VideoCardViewBase = props => {
+  const {
+    status,
+    dimensions,
+    metadata,
+    disableOverlay,
+    innerRef,
+    progress,
+    cardPreview,
+    alt,
+    resizeMode,
+    onDisplayImage,
+    nativeLazyLoad,
+    forceSyncDisplay,
+    onImageLoad,
+    onImageError
+  } = props;
+  const divRef = useRef(null);
+  const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  useEffect(() => {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  const {
+    name,
+    mediaType = 'unknown'
+  } = metadata || {};
+  const hasTitleBox = !disableOverlay && !!name;
+  const isUploading = status === 'uploading';
+  return jsx(CardViewWrapper, _extends({}, props, {
+    breakpoint: breakpoint,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    ref: divRef,
+    customBlanket: () => disableOverlay ? null : jsx(Blanket, {
+      isFixed: isUploading
+    }),
+    progressBar: isUploading ? () => jsx(ProgressBar, {
+      progress: progress,
+      breakpoint: breakpoint,
+      positionBottom: !hasTitleBox
+    }) : undefined
+  }), jsx(ImageRenderer, {
+    cardPreview: cardPreview,
+    mediaType: mediaType,
+    alt: alt,
+    resizeMode: resizeMode,
+    onDisplayImage: onDisplayImage,
+    onImageLoad: () => onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(cardPreview),
+    onImageError: () => onImageError === null || onImageError === void 0 ? void 0 : onImageError(cardPreview),
+    nativeLazyLoad: nativeLazyLoad,
+    forceSyncDisplay: forceSyncDisplay
+  }), cardPreview && jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(PlayButton, null)));
+};
+
+// TODO: check if analytics is correct
+
+export const VideoCardView = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(VideoCardViewBase);

package/dist/es2019/card/v2/fileCard.js

@@ -1,3 +1,4 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { globalMediaEventEmitter, isImageRepresentationReady, RECENTS_COLLECTION } from '@atlaskit/media-client';
 import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
@@ -20,8 +21,10 @@ import { getDefaultCardDimensions } from '../../utils/cardDimensions';
 import { fireCommencedEvent, fireCopiedEvent, fireNonCriticalErrorEvent, fireOperationalEvent, fireScreenEvent } from '../cardAnalytics';
 import { isSSRPreview } from '../getCardPreview';
 import { CardViewV2 } from './cardViewV2';
+import { CardViews } from './cardviews';
 import { InlinePlayerLazyV2 } from './inlinePlayerLazyV2';
 import { useFilePreview } from './useFilePreview';
+const LoadedCardView = getBooleanFF('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardViewV2;
 export const FileCard = ({
   appearance = 'auto',
   resizeMode = 'crop',
@@ -468,7 +471,7 @@ export const FileCard = ({
     // Force Media Image to always display img for SSR
     const forceSyncDisplay = !!ssr;
     const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!cardPreview, metadata.mediaType);
-    const card = /*#__PURE__*/React.createElement(CardViewV2, {
+    const card = /*#__PURE__*/React.createElement(LoadedCardView, {
       status: cardStatusOverride || finalStatus,
       error: finalError,
       mediaItemType: mediaItemType,

package/dist/es2019/card/v2/useFilePreview/analytics.js

@@ -0,0 +1,44 @@
+import { getMediaClientErrorReason, isRequestError } from '@atlaskit/media-client';
+import { isMediaFilePreviewError, getFileStateErrorReason, isMediaFileStateError } from './errors';
+export const getErrorTraceContext = error => {
+  if (isMediaFilePreviewError(error) && !!error.secondaryError) {
+    if (isRequestError(error.secondaryError)) {
+      var _error$secondaryError;
+      return (_error$secondaryError = error.secondaryError.metadata) === null || _error$secondaryError === void 0 ? void 0 : _error$secondaryError.traceContext;
+    } else if (isMediaFileStateError(error.secondaryError)) {
+      var _error$secondaryError2, _error$secondaryError3;
+      return (_error$secondaryError2 = error.secondaryError.details) === null || _error$secondaryError2 === void 0 ? void 0 : (_error$secondaryError3 = _error$secondaryError2.metadata) === null || _error$secondaryError3 === void 0 ? void 0 : _error$secondaryError3.traceContext;
+    }
+  }
+};
+export const getRenderErrorFailReason = error => {
+  if (isMediaFilePreviewError(error)) {
+    return error.primaryReason;
+  } else {
+    return 'nativeError';
+  }
+};
+export const getRenderErrorErrorReason = error => {
+  if (isMediaFilePreviewError(error) && error.secondaryError) {
+    const mediaClientReason = isMediaFileStateError(error.secondaryError) ? getFileStateErrorReason(error.secondaryError) : getMediaClientErrorReason(error.secondaryError);
+    if (mediaClientReason !== 'unknown') {
+      return mediaClientReason;
+    }
+  }
+  return 'nativeError';
+};
+export const getRenderErrorErrorDetail = error => {
+  if (isMediaFilePreviewError(error) && error.secondaryError) {
+    return error.secondaryError.message;
+  } else {
+    return error.message;
+  }
+};
+export const extractErrorInfo = (error, metadataTraceContext) => {
+  return {
+    failReason: getRenderErrorFailReason(error),
+    error: getRenderErrorErrorReason(error),
+    errorDetail: getRenderErrorErrorDetail(error),
+    metadataTraceContext: metadataTraceContext !== null && metadataTraceContext !== void 0 ? metadataTraceContext : getErrorTraceContext(error)
+  };
+};

package/dist/es2019/card/v2/useFilePreview/errors.js

@@ -1,3 +1,5 @@
+import { MediaFileStateError } from '@atlaskit/media-client-react';
+
 /**
  * Primary reason is logged through Data Portal.
  * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
@@ -78,4 +80,11 @@ export const ensureMediaFilePreviewError = (primaryReason, error, updatePrimaryR
     return error;
   }
   return new MediaFilePreviewError(primaryReason, error);
-};
+};
+export function isMediaFileStateError(err) {
+  return err instanceof MediaFileStateError;
+}
+export function getFileStateErrorReason(err) {
+  var _err$details$reason, _err$details;
+  return (_err$details$reason = (_err$details = err.details) === null || _err$details === void 0 ? void 0 : _err$details.reason) !== null && _err$details$reason !== void 0 ? _err$details$reason : 'unknown';
+}

package/dist/es2019/card/v2/useFilePreview/helpers.js

@@ -46,7 +46,7 @@ export const createRequestDimensions = dimensions => {
   return result;
 };
 
-/** Stores the provided value in a   */
+/** Stores the provided value in a ref object to avoid "component rerenders" when the value is used as a hook dependency */
 export function useCurrentValueRef(value) {
   const ref = useRef(value);
   ref.current = value;

package/dist/es2019/card/v2/useFilePreview/useFilePreview.js

@@ -3,7 +3,7 @@ import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/med
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { ensureMediaFilePreviewError, ImageLoadError, isLocalPreviewError, isUnsupportedLocalPreviewError, MediaFilePreviewError } from './errors';
-import { extractErrorInfo } from '../../../utils/analytics';
+import { extractErrorInfo } from './analytics';
 import { isBigger, createRequestDimensions, useCurrentValueRef, usePrevious } from './helpers';
 import { generateScriptProps, getSSRData } from './globalScope';
 import { getAndCacheRemotePreview, getSSRCardPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, isPreviewableStatus, extractFilePreviewStatus, mediaFilePreviewCache, getAndCacheLocalPreview } from './getPreview';

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "77.5.2",
+      packageName: "77.6.1",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.5.2";
+const packageVersion = "77.6.1";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -40,7 +40,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.5.2";
+var packageVersion = "77.6.1";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.5.2";
+var packageVersion = "77.6.1";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/card/v2/cardV2.js

@@ -9,7 +9,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.5.2";
+var packageVersion = "77.6.1";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/v2/cardviews/cardViewWrapper.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["cardPreview", "testId", "dimensions", "appearance", "metadata", "selected", "selectable", "actions", "breakpoint", "disableOverlay", "titleBoxBgColor", "titleBoxIcon", "shouldHideTooltip", "children", "onClick", "onMouseEnter", "mediaCardCursor", "customBlanket", "customTitleBox", "progressBar"];
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { Wrapper } from '../../ui/wrapper';
+import { attachDetailsToActions } from '../../actions';
+import { cardImageContainerStyles } from '../../ui/styles';
+import { TitleBox } from '../../ui/titleBox/titleBox';
+import { TickBox } from '../../ui/tickBox/tickBox';
+import { Blanket } from '../../ui/blanket/blanket';
+import { ActionsBar } from '../../ui/actionsBar/actionsBar';
+import { fileCardImageViewSelector } from '../../classnames';
+export var CardViewWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var cardPreview = _ref.cardPreview,
+    testId = _ref.testId,
+    dimensions = _ref.dimensions,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
+    metadata = _ref.metadata,
+    selected = _ref.selected,
+    selectable = _ref.selectable,
+    actions = _ref.actions,
+    breakpoint = _ref.breakpoint,
+    disableOverlay = _ref.disableOverlay,
+    titleBoxBgColor = _ref.titleBoxBgColor,
+    titleBoxIcon = _ref.titleBoxIcon,
+    shouldHideTooltip = _ref.shouldHideTooltip,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    mediaCardCursor = _ref.mediaCardCursor,
+    customBlanket = _ref.customBlanket,
+    customTitleBox = _ref.customTitleBox,
+    progressBar = _ref.progressBar,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _ref2 = metadata || {},
+    name = _ref2.name,
+    createdAt = _ref2.createdAt,
+    mediaType = _ref2.mediaType;
+  var actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
+  var defaultBlanket = !disableOverlay && jsx(Blanket, null);
+  var defaultTitleBox = !disableOverlay && !!name && jsx(TitleBox, {
+    name: name,
+    createdAt: createdAt,
+    breakpoint: breakpoint,
+    titleBoxIcon: titleBoxIcon,
+    titleBoxBgColor: titleBoxBgColor
+  });
+  var content = jsx(React.Fragment, null, jsx("div", _extends({
+    css: cardImageContainerStyles,
+    className: fileCardImageViewSelector,
+    "data-testid": fileCardImageViewSelector,
+    "data-test-media-name": name,
+    "data-test-selected": selected ? true : undefined
+  }, props), children, customBlanket ? customBlanket() : defaultBlanket, customTitleBox ? customTitleBox() : defaultTitleBox, !disableOverlay && !!selectable && jsx(TickBox, {
+    selected: selected
+  }), progressBar && progressBar()), !disableOverlay && actions && actions.length !== 0 && jsx(ActionsBar, {
+    actions: actionsWithDetails
+  }));
+  var shouldRenderPlayButton = function shouldRenderPlayButton() {
+    if (mediaType !== 'video' || !cardPreview) {
+      return false;
+    }
+    return true;
+  };
+  var isPlayButtonClickable = shouldRenderPlayButton() && disableOverlay;
+  var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
+  var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
+  var shouldDisplayBackground = !cardPreview || !disableOverlay;
+  return jsx(Wrapper, {
+    testId: testId || 'media-card-view',
+    dimensions: dimensions,
+    appearance: appearance,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    innerRef: ref,
+    breakpoint: breakpoint,
+    mediaCardCursor: mediaCardCursor,
+    disableOverlay: !!disableOverlay,
+    selected: !!selected,
+    displayBackground: shouldDisplayBackground,
+    isPlayButtonClickable: !!isPlayButtonClickable,
+    isTickBoxSelectable: isTickBoxSelectable,
+    shouldDisplayTooltip: shouldDisplayTooltip
+  }, shouldDisplayTooltip ? jsx(Tooltip, {
+    content: name,
+    position: "bottom",
+    tag: "div"
+  }, content) : content);
+});

package/dist/esm/card/v2/cardviews/errorCardView.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useRef } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireMediaCardEvent } from '../../../utils/analytics';
+import { useBreakpoint } from '../../useBreakpoint';
+import { CardViewWrapper } from './cardViewWrapper';
+import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
+import { FailedTitleBox } from '../../ui/titleBox/failedTitleBox';
+import { PreviewUnavailable, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from '../../ui/iconMessage';
+import { isUploadError, isRateLimitedError, isPollingError } from '../../../errors';
+import { messages } from '@atlaskit/media-ui';
+var IconMessage = function IconMessage(_ref) {
+  var error = _ref.error,
+    metadata = _ref.metadata;
+  var _ref2 = error || {},
+    secondaryError = _ref2.secondaryError;
+  if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
+    return jsx(PreviewCurrentlyUnavailable, null);
+  } else if (isUploadError(error)) {
+    return jsx(FailedToUpload, null);
+  } else if (!metadata) {
+    return jsx(FailedToLoad, null);
+  } else {
+    return jsx(PreviewUnavailable, null);
+  }
+};
+var ErrorCardViewBase = function ErrorCardViewBase(props) {
+  var error = props.error,
+    metadata = props.metadata,
+    dimensions = props.dimensions,
+    disableOverlay = props.disableOverlay;
+  var _ref3 = metadata || {},
+    name = _ref3.name,
+    mediaType = _ref3.mediaType,
+    mimeType = _ref3.mimeType;
+  var divRef = useRef(null);
+  var breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  var customMessage = isUploadError(props.error) ? messages.failed_to_upload : undefined;
+  var renderFailedTitleBox = !disableOverlay && (!name || !!customMessage);
+  var renderTitleBox = !disableOverlay && !!name && !customMessage;
+  var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
+  return jsx(CardViewWrapper, _extends({}, props, {
+    metadata: metadata,
+    breakpoint: breakpoint,
+    "data-test-status": "error",
+    ref: divRef,
+    customTitleBox: renderFailedTitleBox ? function () {
+      return jsx(FailedTitleBox, {
+        breakpoint: breakpoint,
+        customMessage: customMessage
+      });
+    } : undefined
+  }), jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(MimeTypeIcon, {
+    testId: "media-card-file-type-icon",
+    mediaType: mediaType,
+    mimeType: mimeType,
+    name: name
+  }), !renderFailedTitleBox && jsx(IconMessage, {
+    error: error,
+    metadata: metadata
+  })));
+};
+
+// TODO: check if analytics is correct
+
+export var ErrorCardView = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(ErrorCardViewBase);

package/dist/esm/card/v2/cardviews/iconCardView.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useEffect, useRef } from 'react';
+import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireMediaCardEvent } from '../../../utils/analytics';
+import { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
+import { useBreakpoint } from '../../useBreakpoint';
+import { CardViewWrapper } from './cardViewWrapper';
+import { ProgressBar } from '../../ui/progressBar/progressBar';
+import { Blanket } from '../../ui/blanket/blanket';
+// NOTE: should we call this Icon or UploadingCardView since we now have ProgressBar?
+
+var IconCardViewBase = function IconCardViewBase(props) {
+  var dimensions = props.dimensions,
+    metadata = props.metadata,
+    disableOverlay = props.disableOverlay,
+    innerRef = props.innerRef,
+    progress = props.progress,
+    status = props.status;
+  var divRef = useRef(null);
+  var breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  useEffect(function () {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  var _ref = metadata || {},
+    name = _ref.name,
+    mediaType = _ref.mediaType,
+    mimeType = _ref.mimeType;
+  var hasTitleBox = !disableOverlay && !!name;
+  var isUploading = status === 'uploading';
+  return jsx(CardViewWrapper, _extends({}, props, {
+    metadata: metadata,
+    breakpoint: breakpoint,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    ref: divRef,
+    customBlanket: function customBlanket() {
+      return jsx(Blanket, {
+        isFixed: isUploading
+      });
+    },
+    progressBar: isUploading ? function () {
+      return jsx(ProgressBar, {
+        progress: progress,
+        breakpoint: breakpoint,
+        positionBottom: !hasTitleBox
+      });
+    } : undefined
+  }), jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(MimeTypeIcon, {
+    testId: "media-card-file-type-icon",
+    mediaType: mediaType,
+    mimeType: mimeType,
+    name: name
+  })));
+};
+
+// TODO: check if analytics is correct
+
+export var IconCardView = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(IconCardViewBase);

package/dist/esm/card/v2/cardviews/imageCardView.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useEffect, useRef } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireMediaCardEvent } from '../../../utils/analytics';
+import { ImageRenderer } from '../../ui/imageRenderer/imageRenderer';
+import { useBreakpoint } from '../../useBreakpoint';
+import { CardViewWrapper } from './cardViewWrapper';
+import { ProgressBar } from '../../ui/progressBar/progressBar';
+import { Blanket } from '../../ui/blanket/blanket';
+var ImageCardViewBase = function ImageCardViewBase(props) {
+  var status = props.status,
+    dimensions = props.dimensions,
+    metadata = props.metadata,
+    disableOverlay = props.disableOverlay,
+    innerRef = props.innerRef,
+    progress = props.progress,
+    cardPreview = props.cardPreview,
+    alt = props.alt,
+    resizeMode = props.resizeMode,
+    onDisplayImage = props.onDisplayImage,
+    nativeLazyLoad = props.nativeLazyLoad,
+    forceSyncDisplay = props.forceSyncDisplay,
+    _onImageLoad = props.onImageLoad,
+    _onImageError = props.onImageError;
+  var divRef = useRef(null);
+  var breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  useEffect(function () {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  var _ref = metadata || {},
+    name = _ref.name,
+    _ref$mediaType = _ref.mediaType,
+    mediaType = _ref$mediaType === void 0 ? 'unknown' : _ref$mediaType;
+  var hasTitleBox = !disableOverlay && !!name;
+  var isUploading = status === 'uploading';
+  return jsx(CardViewWrapper, _extends({}, props, {
+    breakpoint: breakpoint,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    ref: divRef,
+    customBlanket: function customBlanket() {
+      return jsx(Blanket, {
+        isFixed: isUploading
+      });
+    },
+    progressBar: isUploading ? function () {
+      return jsx(ProgressBar, {
+        progress: progress,
+        breakpoint: breakpoint,
+        positionBottom: !hasTitleBox
+      });
+    } : undefined
+  }), jsx(ImageRenderer, {
+    cardPreview: cardPreview,
+    mediaType: mediaType,
+    alt: alt,
+    resizeMode: resizeMode,
+    onDisplayImage: onDisplayImage,
+    onImageLoad: function onImageLoad() {
+      return _onImageLoad === null || _onImageLoad === void 0 ? void 0 : _onImageLoad(cardPreview);
+    },
+    onImageError: function onImageError() {
+      return _onImageError === null || _onImageError === void 0 ? void 0 : _onImageError(cardPreview);
+    },
+    nativeLazyLoad: nativeLazyLoad,
+    forceSyncDisplay: forceSyncDisplay
+  }));
+};
+
+// TODO: check if analytics is correct
+
+export var ImageCardView = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(ImageCardViewBase);