@atlaskit/media-card 73.7.0 → 74.1.0

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

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

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

@@ -1,4 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import cx from 'classnames';
@@ -8,7 +11,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';
 
 const resolveTitleText = (cardStatus, mediaName, error, selected) => {
   // don't show title if error
@@ -72,21 +76,25 @@ export class CardOverlay extends Component {
     } = this.props;
     const titleText = resolveTitleText(cardStatus, mediaName, error, selected);
     const 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
@@ -98,7 +106,11 @@ export class CardOverlay extends Component {
       error,
       alt
     } = this.props;
-    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)));
   }
 
   tickBox() {
@@ -106,15 +118,16 @@ export class CardOverlay extends Component {
       selected,
       selectable
     } = this.props;
-    const tick = /*#__PURE__*/React.createElement(TickIcon, {
+    const tick = jsx(TickIcon, {
       label: "tick"
     });
     const className = cx('tickbox', {
       selected
     });
-    return selectable && /*#__PURE__*/React.createElement(TickBox, {
+    return selectable && jsx("div", {
+      css: tickBoxStyles,
       className: className
-    }, " ", tick, " ");
+    }, tick);
   }
 
   bottomLeftColumn() {
@@ -129,14 +142,15 @@ export class CardOverlay extends Component {
         icon
       } = this.props;
       const classNames = cx('metadata');
-      const fileIcon = mediaType || icon ? /*#__PURE__*/React.createElement(FileIcon, {
+      const fileIcon = mediaType || icon ? jsx(FileIcon, {
         mediaType: mediaType,
         iconUrl: icon
       }) : null;
-      const subtitleEl = subtitle ? /*#__PURE__*/React.createElement(Subtitle, {
+      const 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/es2019/files/cardImageView/cardOverlay/{styled.js → styles.js}

@@ -4,13 +4,15 @@
  * 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 styled from 'styled-components';
-import { rgba, centerX, easeOutCubic, transition, antialiased } from '../../../styles';
+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';
-export const TickBox = styled.div`
-  ${size(14)} ${transition()} background-color: ${rgba('#ffffff', 0.5)};
+import { rgba, centerX, easeOutCubic, transition, antialiased } from '../../../styles';
+export const tickBoxStyles = css`
+  ${size(14)}
+  ${transition()}
+  background-color: ${rgba('#ffffff', 0.5)};
   position: absolute;
   top: 8px;
   right: 8px;
@@ -31,15 +33,8 @@ export const TickBox = styled.div`
     width: 14px;
   }
 `;
-export const Overlay = styled.div`
-  ${size()} ${absolute()} ${borderRadius} display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  background: transparent;
-  transition: 0.3s background ${easeOutCubic}, 0.3s border-color;
-  padding: 16px;
 
-  ${({
+const getOverlayStyles = ({
   hasError,
   noHover
 }) => {
@@ -52,9 +47,20 @@ export const Overlay = styled.div`
         }
       `;
   }
+};
+
+export const overlayStyles = props => css`
+  ${size()}
+  ${absolute()}
+  ${borderRadius} display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  background: transparent;
+  transition: 0.3s background ${easeOutCubic}, 0.3s border-color;
+  padding: 16px;
 
-  return '';
-}} &:not(.persistent):hover, &.active {
+  ${getOverlayStyles(props)}
+  &:not(.persistent):hover, &.active {
     .top-row {
       .title {
         color: ${colors.B400};
@@ -210,25 +216,25 @@ export const Overlay = styled.div`
     }
   }
 `;
-export const ErrorLine = styled.div`
+export const errorLineStyles = css`
   height: 24px;
   display: flex;
   align-items: center;
 `;
-export const LeftColumn = styled.div`
+export const leftColumnStyles = css`
   width: 100%;
   position: relative;
   box-sizing: border-box;
   vertical-align: middle;
 `;
-export const TopRow = styled.div``;
-export const BottomRow = styled.div`
+export const topRowStyles = css``;
+export const bottomRowStyles = css`
   display: flex;
   align-items: center;
   height: 16px;
 `;
-export const RightColumn = styled.div``;
-export const ErrorMessage = styled.div`
+export const rightColumnStyles = css``;
+export const errorMessageStyles = css`
   ${antialiased} display: inline-block;
   vertical-align: middle;
   font-weight: bold;
@@ -236,29 +242,32 @@ export const ErrorMessage = styled.div`
   font-size: 12px;
   line-height: 15px;
   overflow: hidden;
-  max-width: ~'calc(100% - 24px)';
+  max-width: 'calc(100% - 24px)';
   text-overflow: ellipsis;
   white-space: nowrap;
   margin: auto 3px;
 `;
-export const AltWrapper = styled(ErrorMessage)`
+export const altWrapperStyles = css`
+  ${errorMessageStyles}
   font-weight: normal;
 `;
-export const TitleWrapper = styled.div`
+export const titleWrapperStyles = theme => css`
   box-sizing: border-box;
   word-wrap: break-word;
   color: ${themed({
   light: colors.N800,
   dark: colors.DN900
+})({
+  theme
 })};
   font-size: 12px;
   line-height: 18px;
 `;
-export const Subtitle = styled.div`
+export const subtitleStyles = css`
   ${ellipsis('100px')} font-size: 12px;
   color: #5e6c84;
 `;
-export const Metadata = styled.div`
+export const metadataStyles = css`
   display: flex;
   align-items: center;
 `;

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

@@ -1,15 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/**@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 class FileCardImageView extends Component {
   constructor(...args) {
     super(...args);
@@ -41,11 +44,11 @@ export class FileCardImageView extends Component {
     });
 
     _defineProperty(this, "renderLoadingContents", () => {
-      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(this, "renderErrorContents", () => {
@@ -58,9 +61,9 @@ export class FileCardImageView extends Component {
         actions,
         fileSize
       } = this.props;
-      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,
@@ -80,9 +83,9 @@ export class FileCardImageView extends Component {
         actions,
         fileSize
       } = this.props;
-      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,
@@ -103,7 +106,7 @@ export class FileCardImageView extends Component {
         selected
       } = this.props;
       const isPersistent = mediaType === 'doc' || !dataURI;
-      return /*#__PURE__*/React.createElement(CardOverlay, {
+      return jsx(CardOverlay, {
         cardStatus: status,
         persistent: isPersistent,
         mediaName: mediaName,
@@ -130,7 +133,9 @@ export class FileCardImageView extends 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"
@@ -174,7 +179,7 @@ export class FileCardImageView extends Component {
         this.wasThumbnailDisplayed = true;
       }
 
-      return /*#__PURE__*/React.createElement(MediaImage, {
+      return jsx(MediaImage, {
         dataURI: dataURI,
         alt: alt,
         crop: this.isCropped,
@@ -197,13 +202,23 @@ export class FileCardImageView extends 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))));
@@ -227,9 +242,9 @@ export class FileCardImageView extends 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);
     });
@@ -246,7 +261,7 @@ export class FileCardImageView extends Component {
         actions
       } = this.props;
       const isPersistent = mediaType === 'doc' || !dataURI;
-      return /*#__PURE__*/React.createElement(CardOverlay, {
+      return jsx(CardOverlay, {
         cardStatus: status,
         persistent: isPersistent,
         mediaName: mediaName,
@@ -269,17 +284,14 @@ export class FileCardImageView extends Component {
       status,
       mediaName
     } = this.props;
-    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: `${fileCardImageViewSelector} ${selected ? fileCardImageViewSelectedSelector : ''}`
+      mediaType: mediaType
     }, this.renderCardContents());
   }
 

package/dist/es2019/files/cardImageView/{styled.js → styles.js}

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { absolute, borderRadius, size } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import { N20, DN50, N0 } from '@atlaskit/theme/colors';
-import { Root, cardShadow } from '../../styles';
+import { rootStyles, cardShadow } from '../../styles';
 import { getSelectedBorderStyle } from '../../styles/getSelectedBorderStyle';
 
 const getShadowAttribute = props => {
@@ -22,15 +22,16 @@ const getBackgroundColor = props => {
   })(props)};`;
 };
 
-export const Wrapper = styled(Root)`
-  ${getShadowAttribute}
+export const wrapperStyles = props => css`
+  ${rootStyles()}
+  ${getShadowAttribute(props)}
   ${borderRadius}
-  ${getBackgroundColor}
+  ${getBackgroundColor(props)}
 
   line-height: normal;
   position: relative;
 
-  ${getSelectedBorderStyle}
+  ${getSelectedBorderStyle(props)}
 
   ${size()} .wrapper {
     ${borderRadius};
@@ -48,7 +49,7 @@ export const Wrapper = styled(Root)`
     }
   }
 `;
-export const PlayIconWrapper = styled.div`
+export const playIconWrapperStyles = css`
   position: absolute;
   top: 0;
   left: 0;
@@ -65,7 +66,7 @@ export const PlayIconWrapper = styled.div`
     height: 64px;
   }
 `;
-export const PlayIconBackground = styled.div`
+export const playIconBackgroundStyles = css`
   background: rgba(23, 43, 77, 0.7);
   border-radius: 100%;
   padding: 10px;
@@ -78,18 +79,18 @@ export const PlayIconBackground = styled.div`
   height: 56px;
 `;
 const bodyHeight = 26;
-export const ProgressBarWrapper = styled.div`
+export const progressBarWrapperStyles = css`
   position: absolute;
   height: 100%;
   width: 100%;
 `;
-export const Overlay = styled.div`
+export const overlayStyles = css`
   ${absolute()}
   ${size()}
   border-radius: inherit;
   background-color: rgba(9, 30, 66, 0.5);
 `;
-export const Title = styled.div`
+export const titleStyles = css`
   ${absolute()} width: 100%;
   padding: 8px;
   color: ${N0};
@@ -97,7 +98,7 @@ export const Title = styled.div`
   line-height: 18px;
   word-wrap: break-word;
 `;
-export const Body = styled.div`
+export const bodyStyles = css`
   display: flex;
   position: absolute;
   bottom: 0;
@@ -105,7 +106,7 @@ export const Body = styled.div`
   padding: 8px;
   color: ${N0};
 `;
-export const ProgressWrapper = styled.div`
+export const progressWrapperStyles = css`
   flex-grow: 1;
 
   /*
@@ -122,7 +123,7 @@ export const ProgressWrapper = styled.div`
   flex-direction: column;
   justify-content: center;
 `;
-export const CardActionsWrapper = styled.div`
+export const cardActionsWrapperStyles = css`
   margin-left: 4px;
   /*
     button must appear above overlay

package/dist/es2019/index.js

@@ -3,5 +3,5 @@ export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';
 export { defaultImageCardDimensions } from './utils/cardDimensions';
 export { fileCardImageViewSelector, fileCardImageViewSelectedSelector } from './files/cardImageView/classnames';
-export { inlinePlayerClassName } from './root/inlinePlayer';
+export { inlinePlayerClassName } from './root/styles';
 export { newFileExperienceClassName } from './root/card/cardConstants';

package/dist/es2019/root/card/cardAnalytics.js

@@ -1,5 +1,6 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) => {
+import { MediaCardError } from './../../errors';
+export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error = new MediaCardError('missing-error-data')) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 
   switch (status) {
@@ -12,7 +13,7 @@ export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttribute
       break;
 
     case 'error':
-      error && fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability));
+      fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability));
       break;
   }
 };

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

@@ -1,24 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createObjectURLCache } from '../../../utils/objectURLCache';
-// Dimensions are used to create a key.
-// Cache is invalidated when different dimensions are provided.
-export const getCacheKey = (id, dimensions) => {
-  return [id, dimensions.height, dimensions.width].join('-');
+export const getCacheKey = (id, mode) => {
+  const resizeMode = mode || 'crop';
+  return [id, resizeMode].join('-');
 };
 export class CardPreviewCacheImpl {
   constructor(previewCache) {
-    _defineProperty(this, "get", (id, dimensions) => {
-      const cacheKey = getCacheKey(id, dimensions);
+    _defineProperty(this, "get", (id, mode) => {
+      const cacheKey = getCacheKey(id, mode);
       return this.previewCache.get(cacheKey);
     });
 
-    _defineProperty(this, "set", (id, dimensions, cardPreview) => {
-      const cacheKey = getCacheKey(id, dimensions);
+    _defineProperty(this, "set", (id, mode, cardPreview) => {
+      const cacheKey = getCacheKey(id, mode);
       this.previewCache.set(cacheKey, cardPreview);
     });
 
-    _defineProperty(this, "remove", (id, dimensions) => {
-      const cacheKey = getCacheKey(id, dimensions);
+    _defineProperty(this, "remove", (id, mode) => {
+      const cacheKey = getCacheKey(id, mode);
       this.previewCache.remove(cacheKey);
     });