@atlaskit/media-card 73.7.0 → 74.1.0

package/dist/es2019/utils/lightCards/{styled.js → styles.js}

@@ -1,4 +1,5 @@
-import styled, { keyframes } from 'styled-components';
+import { css } from '@emotion/react';
+import { keyframes } from '@emotion/react';
 import { center, borderRadius } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import { N20, DN50, N50, DN100 } from '@atlaskit/theme/colors';
@@ -15,25 +16,31 @@ export const blinkLoadingAnimation = keyframes`
     opacity: 1;
   }
 `;
-export const Wrapper = styled.div`
-  ${center} background: ${themed({
+export const wrapperStyles = ({
+  dimensions,
+  theme
+}) => css`
+  ${center}
+  background: ${themed({
   light: N20,
   dark: DN50
+})({
+  theme
 })};
   color: ${themed({
   light: N50,
   dark: DN100
+})({
+  theme
 })};
   ${borderRadius}
   max-height: 100%;
   max-width: 100%;
-
-  ${props => `
-      width: ${props.dimensions.width};
-      height: ${props.dimensions.height};
-    `}
+  width: ${dimensions.width};
+  height: ${dimensions.height};
 `;
-export const AnimatedWrapper = styled(Wrapper)`
+export const animatedWrapperStyles = props => css`
+  ${wrapperStyles(props)}
   > span {
     animation: ${blinkLoadingAnimation} 0.8s infinite;
   }

package/dist/es2019/utils/mediaTypeIcon/iconWrapper.js

@@ -0,0 +1,9 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { iconWrapperStyles } from './styles';
+export const IconWrapper = props => {
+  return jsx("div", {
+    id: "iconWrapper",
+    css: iconWrapperStyles(props)
+  }, props.children);
+};

package/dist/es2019/utils/mediaTypeIcon/index.js

@@ -5,7 +5,7 @@ import ArchiveIcon from '@atlaskit/icon/glyph/media-services/zip';
 import VideoIcon from '@atlaskit/icon/glyph/media-services/video';
 import DocIcon from '@atlaskit/icon/glyph/document';
 import UnknownIcon from '@atlaskit/icon/glyph/page';
-import { IconWrapper } from './styled';
+import { IconWrapper } from './iconWrapper';
 const icons = {
   image: ImageIcon,
   audio: AudioIcon,

package/dist/es2019/utils/mediaTypeIcon/{styled.js → styles.js}

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { Y200, P200, B300 } from '@atlaskit/theme/colors';
 const typeToColorMap = {
   image: Y200,
@@ -9,9 +9,14 @@ const typeToColorMap = {
   archive: '' // TODO [BMPT-389]: Remove this and use existing MediaTypeIcon in media-ui
 
 };
-export const IconWrapper = styled.div`
-  display: inline-flex;
-  color: ${({
+
+const getWrapperColor = ({
   type
-}) => typeToColorMap[type] || typeToColorMap.unknown};
+}) => {
+  return typeToColorMap[type] || typeToColorMap.unknown;
+};
+
+export const iconWrapperStyles = props => css`
+  display: inline-flex;
+  color: ${getWrapperColor(props)};
 `;

package/dist/es2019/utils/mediaTypeIcon/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/utils/progressBar/index.js

@@ -1,6 +1,7 @@
-import React from 'react';
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
-import { ProgressWrapper } from './styled';
+import { progressWrapperStyles } from './styles';
 export class ProgressBar extends Component {
   render() {
     if (typeof this.props.progress !== 'number') {
@@ -11,7 +12,9 @@ export class ProgressBar extends Component {
     const progressBarStyle = {
       width: `${progress * 100}%`
     };
-    return /*#__PURE__*/React.createElement(ProgressWrapper, null, /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
+      css: progressWrapperStyles
+    }, jsx("div", {
       className: 'progressBar',
       style: progressBarStyle
     }));

package/dist/es2019/utils/progressBar/{styled.js → styles.js}

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
-export const ProgressWrapper = styled.div`
+export const progressWrapperStyles = css`
   ${borderRadius} z-index: 30;
   overflow: hidden;
   background-color: rgba(255, 255, 255, 0.3);

package/dist/es2019/utils/ufoExperiences.js

@@ -1,7 +1,9 @@
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
-import { name as packageName, version as packageVersion } from '../version.json';
 import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KEYS } from './analytics';
+import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
+const packageName = "@atlaskit/media-card";
+const packageVersion = "74.1.0";
 let concurrentExperience;
 
 const getExperience = id => {
@@ -23,7 +25,7 @@ const getExperience = id => {
 export const startUfoExperience = id => {
   getExperience(id).start();
 };
-export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags, ssrReliability, error) => {
+export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags, ssrReliability, error = new MediaCardError('missing-error-data')) => {
   switch (status) {
     case 'complete':
       succeedUfoExperience(id, {
@@ -43,7 +45,7 @@ export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags
       break;
 
     case 'error':
-      error && failUfoExperience(id, {
+      failUfoExperience(id, {
         fileAttributes,
         ...extractErrorInfo(error),
         request: getRenderErrorRequestMetadata(error),

package/dist/es2019/utils/viewportDetector.js

@@ -1,27 +1,6 @@
-import React, { useEffect, forwardRef } from 'react';
-/**
- * As IntersectionObserver::rootMargin doesn't work within IFrames, we use an empty div + dynamic offsetTop to eagerly detect cards entering viewport.
- * Using this approach, we can lazy load cards ABS_VIEWPORT_ANCHOR_OFFSET_TOP px before they enter viewport.
- */
-
-export const ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
-
-export const ViewportAnchor = /*#__PURE__*/forwardRef((props, ref) => {
-  if (typeof IntersectionObserver === 'undefined') {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: "media-card-viewport-anchor",
-    style: {
-      position: 'absolute',
-      top: `${props.offsetTop}px`,
-      maxHeight: 0,
-      pointerEvents: 'none'
-    }
-  });
-});
+import React, { useEffect } from 'react';
+import getDocument from './document';
+const ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
 
 const createIntersectionObserverCallback = onVisible => (entries, observer) => {
   for (let entry of entries) {
@@ -36,27 +15,23 @@ const createIntersectionObserverCallback = onVisible => (entries, observer) => {
 const ViewportObserver = ({
   onVisible,
   cardEl,
-  children,
-  preAnchorRef,
-  postAnchorRef
+  children
 }) => {
   useEffect(() => {
-    // IntersectionObserver uses root and target elements to detect intersections, defaulting root to the viewport
-    const intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible));
-    (preAnchorRef === null || preAnchorRef === void 0 ? void 0 : preAnchorRef.current) && intersectionObserver.observe(preAnchorRef.current);
-    (postAnchorRef === null || postAnchorRef === void 0 ? void 0 : postAnchorRef.current) && intersectionObserver.observe(postAnchorRef.current);
+    const intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible), {
+      root: getDocument(),
+      rootMargin: `${ABS_VIEWPORT_ANCHOR_OFFSET_TOP}px`
+    });
     cardEl && intersectionObserver.observe(cardEl);
     return () => {
       intersectionObserver.disconnect();
     };
-  }, [cardEl, preAnchorRef, postAnchorRef, onVisible]);
+  }, [cardEl, onVisible]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 
 export const ViewportDetector = ({
   cardEl,
-  preAnchorRef,
-  postAnchorRef,
   onVisible,
   children
 }) => {
@@ -66,8 +41,6 @@ export const ViewportDetector = ({
 
   return /*#__PURE__*/React.createElement(ViewportObserver, {
     cardEl: cardEl,
-    preAnchorRef: preAnchorRef,
-    postAnchorRef: postAnchorRef,
     onVisible: onVisible
   }, children);
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "73.7.0",
+	"version": "74.1.0",
 	"sideEffects": false
 }

package/dist/esm/errors.js

@@ -10,6 +10,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/**
+ * Primary reason is logged through Data Portal.
+ * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
+ */
 export var MediaCardError = /*#__PURE__*/function (_Error) {
   _inherits(MediaCardError, _Error);
 

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

@@ -0,0 +1,41 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { fileCardImageViewSelectedSelector, fileCardImageViewSelector } from './classnames';
+import { playIconWrapperStyles, progressBarWrapperStyles, wrapperStyles } from './styles';
+export 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 = useGlobalTheme();
+  return 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: wrapperStyles({
+      theme: theme,
+      disableOverlay: disableOverlay,
+      selectable: selectable,
+      selected: selected,
+      mediaType: mediaType
+    }),
+    className: "".concat(fileCardImageViewSelector, " ").concat(selected ? fileCardImageViewSelectedSelector : '')
+  }, props.children);
+};
+export var PlayIconWrapper = function PlayIconWrapper(props) {
+  return jsx("div", {
+    css: playIconWrapperStyles
+  }, props.children);
+};
+export var ProgressBarWrapper = function ProgressBarWrapper(props) {
+  return jsx("div", {
+    css: progressBarWrapperStyles
+  }, props.children);
+};

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

@@ -0,0 +1,39 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { altWrapperStyles, errorMessageStyles, metadataStyles, overlayStyles, titleWrapperStyles } from './styles';
+export var Overlay = function Overlay(props) {
+  var hasError = props.hasError,
+      noHover = props.noHover,
+      className = props.className;
+  return jsx("div", {
+    css: overlayStyles({
+      hasError: hasError,
+      noHover: noHover
+    }),
+    className: className
+  }, props.children);
+};
+export var ErrorMessage = function ErrorMessage(props) {
+  return jsx("div", {
+    css: errorMessageStyles
+  }, props.children);
+};
+export var AltWrapper = function AltWrapper(props) {
+  return jsx("div", {
+    css: altWrapperStyles
+  }, props.children);
+};
+export var TitleWrapper = function TitleWrapper(props) {
+  var theme = useGlobalTheme();
+  return jsx("div", {
+    css: titleWrapperStyles(theme),
+    className: 'title'
+  }, props.children);
+};
+export var Metadata = function Metadata(props) {
+  return jsx("div", {
+    css: metadataStyles,
+    className: props.className
+  }, props.children);
+};

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

@@ -10,6 +10,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import cx from 'classnames';
@@ -19,7 +21,8 @@ import { Ellipsify } from '@atlaskit/media-ui'; // We dont require things direct
 import { FileIcon } from '../../../utils/fileIcon';
 import { ErrorIcon } from '../../../utils/errorIcon';
 import CardActions from '../../../utils/cardActions';
-import { TickBox, Overlay, ErrorLine, LeftColumn, TopRow, BottomRow, RightColumn, ErrorMessage, TitleWrapper, Subtitle, Metadata, AltWrapper } from './styled';
+import { tickBoxStyles, errorLineStyles, leftColumnStyles, topRowStyles, bottomRowStyles, rightColumnStyles, subtitleStyles } from './styles';
+import { Metadata, AltWrapper, ErrorMessage, TitleWrapper, Overlay } from './cardOverlayComponents';
 
 var resolveTitleText = function resolveTitleText(cardStatus, mediaName, error, selected) {
   // don't show title if error
@@ -91,21 +94,25 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
           actions = _this$props2.actions;
       var titleText = resolveTitleText(cardStatus, mediaName, error, selected);
       var menuTriggerColor = !persistent ? 'white' : undefined;
-      return /*#__PURE__*/React.createElement(Overlay, {
+      return jsx(Overlay, {
         hasError: !!error,
         noHover: noHover,
         className: this.wrapperClassNames
-      }, /*#__PURE__*/React.createElement(TopRow, {
+      }, jsx("div", {
+        css: topRowStyles,
         className: 'top-row'
-      }, this.errorLine(), /*#__PURE__*/React.createElement(TitleWrapper, {
-        className: 'title'
-      }, titleText ? /*#__PURE__*/React.createElement(Ellipsify, {
+      }, this.errorLine(), jsx(TitleWrapper, null, titleText ? jsx(Ellipsify, {
         testId: "media-card-file-name",
         text: titleText,
         lines: 2
-      }) : null), this.tickBox()), /*#__PURE__*/React.createElement(BottomRow, {
+      }) : null), this.tickBox()), jsx("div", {
+        css: bottomRowStyles,
         className: 'bottom-row'
-      }, /*#__PURE__*/React.createElement(LeftColumn, null, this.bottomLeftColumn()), /*#__PURE__*/React.createElement(RightColumn, null, actions ? /*#__PURE__*/React.createElement(CardActions, {
+      }, jsx("div", {
+        css: leftColumnStyles
+      }, this.bottomLeftColumn()), jsx("div", {
+        css: rightColumnStyles
+      }, actions ? jsx(CardActions, {
         actions: actions,
         onToggle: this.onMenuToggle,
         triggerColor: menuTriggerColor
@@ -117,7 +124,11 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
       var _this$props3 = this.props,
           error = _this$props3.error,
           alt = _this$props3.alt;
-      return error && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ErrorLine, null, /*#__PURE__*/React.createElement(ErrorIcon, null), /*#__PURE__*/React.createElement(ErrorMessage, null, error)), alt && /*#__PURE__*/React.createElement(ErrorLine, null, /*#__PURE__*/React.createElement(AltWrapper, null, alt)));
+      return error && jsx(React.Fragment, null, jsx("div", {
+        css: errorLineStyles
+      }, jsx(ErrorIcon, null), jsx(ErrorMessage, null, error)), alt && jsx("div", {
+        css: errorLineStyles
+      }, jsx(AltWrapper, null, alt)));
     }
   }, {
     key: "tickBox",
@@ -125,15 +136,16 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
       var _this$props4 = this.props,
           selected = _this$props4.selected,
           selectable = _this$props4.selectable;
-      var tick = /*#__PURE__*/React.createElement(TickIcon, {
+      var tick = jsx(TickIcon, {
         label: "tick"
       });
       var className = cx('tickbox', {
         selected: selected
       });
-      return selectable && /*#__PURE__*/React.createElement(TickBox, {
+      return selectable && jsx("div", {
+        css: tickBoxStyles,
         className: className
-      }, " ", tick, " ");
+      }, tick);
     }
   }, {
     key: "bottomLeftColumn",
@@ -146,14 +158,15 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
             subtitle = _this$props5.subtitle,
             icon = _this$props5.icon;
         var classNames = cx('metadata');
-        var fileIcon = mediaType || icon ? /*#__PURE__*/React.createElement(FileIcon, {
+        var fileIcon = mediaType || icon ? jsx(FileIcon, {
           mediaType: mediaType,
           iconUrl: icon
         }) : null;
-        var subtitleEl = subtitle ? /*#__PURE__*/React.createElement(Subtitle, {
+        var subtitleEl = subtitle ? jsx("div", {
+          css: subtitleStyles,
           className: "file-size"
         }, subtitle) : null;
-        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Metadata, {
+        return jsx("div", null, jsx(Metadata, {
           className: classNames
         }, fileIcon, subtitleEl));
       }

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

@@ -0,0 +1,46 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+/**
+ * Everything about this file change is just wrong.
+ * Mostly because we do bad things with classes.
+ * This is all wrong and hopefully will be removed from existence with card v3,
+ * so please don’t be too sad about all this!
+ */
+import { css } from '@emotion/react';
+import { borderRadius, size, ellipsis, absolute } from '@atlaskit/media-ui';
+import { themed } from '@atlaskit/theme/components';
+import * as colors from '@atlaskit/theme/colors';
+import { rgba, centerX, easeOutCubic, transition, antialiased } from '../../../styles';
+export var tickBoxStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), size(14), transition(), rgba('#ffffff', 0.5));
+
+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      ";
+  }
+};
+
+export var overlayStyles = function overlayStyles(props) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), size(), absolute(), borderRadius, easeOutCubic, getOverlayStyles(props), colors.B400, colors.N800, rgba(colors.N900, 0.06), colors.B200, colors.N0, colors.N0, rgba(colors.N900, 0.5), centerX, colors.N0, colors.B200, colors.B200, colors.N800);
+};
+export var errorLineStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 24px;\n  display: flex;\n  align-items: center;\n"])));
+export var leftColumnStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  box-sizing: border-box;\n  vertical-align: middle;\n"])));
+export var topRowStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
+export var bottomRowStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 16px;\n"])));
+export var rightColumnStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+export var errorMessageStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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"])), antialiased, colors.N70);
+export var altWrapperStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  font-weight: normal;\n"])), errorMessageStyles);
+export var titleWrapperStyles = function titleWrapperStyles(theme) {
+  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  word-wrap: break-word;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n"])), themed({
+    light: colors.N800,
+    dark: colors.DN900
+  })({
+    theme: theme
+  }));
+};
+export var subtitleStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", " font-size: 12px;\n  color: #5e6c84;\n"])), ellipsis('100px'));
+export var metadataStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));

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

@@ -10,17 +10,19 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import { Ellipsify, MediaImage } from '@atlaskit/media-ui';
 import VidPlayIcon from '@atlaskit/icon/glyph/vid-play';
 import { CardOverlay } from './cardOverlay';
-import { PlayIconWrapper, Wrapper, ProgressBarWrapper, Body, CardActionsWrapper, Overlay, ProgressWrapper, Title, PlayIconBackground } from './styled';
+import { bodyStyles, cardActionsWrapperStyles, overlayStyles, progressWrapperStyles, titleStyles, playIconBackgroundStyles } from './styles';
 import { CardLoading } from '../../utils/lightCards/cardLoading';
 import { shouldDisplayImageThumbnail } from '../../utils/shouldDisplayImageThumbnail';
 import { ProgressBar } from '../../utils/progressBar';
 import CardActions from '../../utils/cardActions';
-import { fileCardImageViewSelectedSelector, fileCardImageViewSelector } from './classnames';
+import { CardImageViewWrapper, PlayIconWrapper, ProgressBarWrapper } from './cardImageViewWrapper';
 export var FileCardImageView = /*#__PURE__*/function (_Component) {
   _inherits(FileCardImageView, _Component);
 
@@ -63,11 +65,11 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderLoadingContents", function () {
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "wrapper"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         className: "img-wrapper"
-      }, /*#__PURE__*/React.createElement(CardLoading, null)));
+      }, jsx(CardLoading, null)));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderErrorContents", function () {
@@ -79,9 +81,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           mediaType = _this$props2.mediaType,
           actions = _this$props2.actions,
           fileSize = _this$props2.fileSize;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      return jsx(React.Fragment, null, jsx("div", {
         className: "wrapper"
-      }), /*#__PURE__*/React.createElement(CardOverlay, {
+      }), jsx(CardOverlay, {
         cardStatus: status,
         error: error,
         persistent: true,
@@ -100,9 +102,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           mediaType = _this$props3.mediaType,
           actions = _this$props3.actions,
           fileSize = _this$props3.fileSize;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      return jsx(React.Fragment, null, jsx("div", {
         className: "wrapper"
-      }), /*#__PURE__*/React.createElement(CardOverlay, {
+      }), jsx(CardOverlay, {
         cardStatus: status,
         noHover: true,
         persistent: true,
@@ -122,7 +124,7 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           selectable = _this$props4.selectable,
           selected = _this$props4.selected;
       var isPersistent = mediaType === 'doc' || !dataURI;
-      return /*#__PURE__*/React.createElement(CardOverlay, {
+      return jsx(CardOverlay, {
         cardStatus: status,
         persistent: isPersistent,
         mediaName: mediaName,
@@ -148,7 +150,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(PlayIconWrapper, null, /*#__PURE__*/React.createElement(PlayIconBackground, null, /*#__PURE__*/React.createElement(VidPlayIcon, {
+      return jsx(PlayIconWrapper, null, jsx("div", {
+        css: playIconBackgroundStyles
+      }, jsx(VidPlayIcon, {
         testId: "media-card-play-button",
         label: "play",
         size: "large"
@@ -189,7 +193,7 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         _this.wasThumbnailDisplayed = true;
       }
 
-      return /*#__PURE__*/React.createElement(MediaImage, {
+      return jsx(MediaImage, {
         dataURI: dataURI,
         alt: alt,
         crop: _this.isCropped,
@@ -211,13 +215,23 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(ProgressBarWrapper, null, /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(Ellipsify, {
+      return jsx(ProgressBarWrapper, null, jsx("div", {
+        css: overlayStyles
+      }, jsx("div", {
+        css: titleStyles
+      }, jsx(Ellipsify, {
         testId: "media-card-file-name",
         text: mediaName || '',
         lines: 2
-      })), /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement(ProgressWrapper, null, /*#__PURE__*/React.createElement(ProgressBar, {
+      })), jsx("div", {
+        css: bodyStyles
+      }, jsx("div", {
+        css: progressWrapperStyles
+      }, jsx(ProgressBar, {
         progress: progress
-      })), /*#__PURE__*/React.createElement(CardActionsWrapper, null, actions ? /*#__PURE__*/React.createElement(CardActions, {
+      })), jsx("div", {
+        css: cardActionsWrapperStyles
+      }, actions ? jsx(CardActions, {
         actions: actions,
         triggerColor: "white"
       }) : null))));
@@ -240,9 +254,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         }
       }
 
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "wrapper"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         className: "img-wrapper"
       }, _this.renderMediaImage(), _this.renderProgressBar(), _this.renderPlayButton()), overlay);
     });
@@ -258,7 +272,7 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           selected = _this$props11.selected,
           actions = _this$props11.actions;
       var isPersistent = mediaType === 'doc' || !dataURI;
-      return /*#__PURE__*/React.createElement(CardOverlay, {
+      return jsx(CardOverlay, {
         cardStatus: status,
         persistent: isPersistent,
         mediaName: mediaName,
@@ -284,17 +298,14 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           progress = _this$props12.progress,
           status = _this$props12.status,
           mediaName = _this$props12.mediaName;
-      return /*#__PURE__*/React.createElement(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 jsx(CardImageViewWrapper, {
+        mediaName: mediaName,
+        status: status,
+        progress: progress,
         disableOverlay: disableOverlay,
         selectable: selectable,
         selected: selected,
-        mediaType: mediaType,
-        className: "".concat(fileCardImageViewSelector, " ").concat(selected ? fileCardImageViewSelectedSelector : '')
+        mediaType: mediaType
       }, this.renderCardContents());
     }
   }, {