@atlaskit/media-card 73.6.0 → 74.0.0

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

@@ -31,7 +31,7 @@ var _document = _interopRequireDefault(require("@atlaskit/icon/glyph/document"))
 
 var _page = _interopRequireDefault(require("@atlaskit/icon/glyph/page"));
 
-var _styled = require("./styled");
+var _iconWrapper = require("./iconWrapper");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -66,7 +66,7 @@ var MediaTypeIcon = /*#__PURE__*/function (_React$Component) {
           size = _this$props$size === void 0 ? 'small' : _this$props$size,
           className = _this$props.className;
       var Icon = type && icons[type] || icons.unknown;
-      return /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {
         type: type || 'unknown'
       }, /*#__PURE__*/_react.default.createElement(Icon, {
         label: "media-type",

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

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconWrapper = void 0;
+exports.iconWrapperStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -25,9 +25,13 @@ var typeToColorMap = {
 
 };
 
-var IconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  color: ", ";\n"])), function (_ref) {
+var getWrapperColor = function getWrapperColor(_ref) {
   var type = _ref.type;
   return typeToColorMap[type] || typeToColorMap.unknown;
-});
+};
+
+var iconWrapperStyles = function iconWrapperStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  color: ", ";\n"])), getWrapperColor(props));
+};
 
-exports.IconWrapper = IconWrapper;
+exports.iconWrapperStyles = iconWrapperStyles;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,13 +17,11 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _styled = require("./styled");
+var _react = require("@emotion/react");
 
-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); }
+var _react2 = require("react");
 
-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 _styles = require("./styles");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -52,13 +48,15 @@ var ProgressBar = /*#__PURE__*/function (_Component) {
       var progressBarStyle = {
         width: "".concat(progress * 100, "%")
       };
-      return /*#__PURE__*/_react.default.createElement(_styled.ProgressWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react.jsx)("div", {
+        css: _styles.progressWrapperStyles
+      }, (0, _react.jsx)("div", {
         className: 'progressBar',
         style: progressBarStyle
       }));
     }
   }]);
   return ProgressBar;
-}(_react.Component);
+}(_react2.Component);
 
 exports.ProgressBar = ProgressBar;

package/dist/cjs/utils/progressBar/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.progressWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _templateObject;
+
+var progressWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " z-index: 30;\n  overflow: hidden;\n  background-color: rgba(255, 255, 255, 0.3);\n\n  .progressBar {\n    width: 0%;\n    height: 3px;\n    transition: width 0.25s ease-in;\n    background-color: white;\n  }\n"])), _mediaUi.borderRadius);
+exports.progressWrapperStyles = progressWrapperStyles;

package/dist/cjs/utils/ufoExperiences.js

@@ -11,8 +11,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _ufo = require("@atlaskit/ufo");
 
-var _version = require("../version.json");
-
 var _analytics = require("./analytics");
 
 var _mediaClient = require("@atlaskit/media-client");
@@ -21,9 +19,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.0.0";
 var concurrentExperience;
 
-var getExperience = function getExperience(id, featureFlagsKeys) {
+var getExperience = function getExperience(id) {
   if (!concurrentExperience) {
     var inlineExperience = {
       platform: {
@@ -31,7 +31,7 @@ var getExperience = function getExperience(id, featureFlagsKeys) {
       },
       type: _ufo.ExperienceTypes.Experience,
       performanceType: _ufo.ExperiencePerformanceTypes.InlineResult,
-      featureFlagsKeys: featureFlagsKeys
+      featureFlags: _analytics.LOGGED_FEATURE_FLAG_KEYS
     };
     concurrentExperience = new _ufo.ConcurrentExperience('media-card-render', inlineExperience);
   }
@@ -39,16 +39,16 @@ var getExperience = function getExperience(id, featureFlagsKeys) {
   return concurrentExperience.getInstance(id);
 };
 
-var startUfoExperience = function startUfoExperience(id, featureFlagsKeys) {
-  getExperience(id, featureFlagsKeys).start();
+var startUfoExperience = function startUfoExperience(id) {
+  getExperience(id).start();
 };
 
 exports.startUfoExperience = startUfoExperience;
 
-var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability, featureFlagsKeys, error) {
+var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability, error) {
   switch (status) {
     case 'complete':
-      succeedUfoExperience(id, featureFlagsKeys, {
+      succeedUfoExperience(id, {
         fileAttributes: fileAttributes,
         ssrReliability: ssrReliability,
         fileStateFlags: fileStateFlags
@@ -56,7 +56,7 @@ var completeUfoExperience = function completeUfoExperience(id, status, fileAttri
       break;
 
     case 'failed-processing':
-      failUfoExperience(id, featureFlagsKeys, {
+      failUfoExperience(id, {
         fileAttributes: fileAttributes,
         failReason: 'failed-processing',
         ssrReliability: ssrReliability,
@@ -65,7 +65,7 @@ var completeUfoExperience = function completeUfoExperience(id, status, fileAttri
       break;
 
     case 'error':
-      error && failUfoExperience(id, featureFlagsKeys, _objectSpread(_objectSpread({
+      error && failUfoExperience(id, _objectSpread(_objectSpread({
         fileAttributes: fileAttributes
       }, (0, _analytics.extractErrorInfo)(error)), {}, {
         request: (0, _analytics.getRenderErrorRequestMetadata)(error),
@@ -78,22 +78,22 @@ var completeUfoExperience = function completeUfoExperience(id, status, fileAttri
 
 exports.completeUfoExperience = completeUfoExperience;
 
-var succeedUfoExperience = function succeedUfoExperience(id, featureFlagsKeys, properties) {
-  getExperience(id, featureFlagsKeys).success({
+var succeedUfoExperience = function succeedUfoExperience(id, properties) {
+  getExperience(id).success({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
-      packageName: _version.name,
-      packageVersion: _version.version,
+      packageName: packageName,
+      packageVersion: packageVersion,
       mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
       mediaRegion: (0, _mediaClient.getMediaRegion)()
     })
   });
 };
 
-var failUfoExperience = function failUfoExperience(id, featureFlagsKeys, properties) {
-  getExperience(id, featureFlagsKeys).failure({
+var failUfoExperience = function failUfoExperience(id, properties) {
+  getExperience(id).failure({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
-      packageName: _version.name,
-      packageVersion: _version.version,
+      packageName: packageName,
+      packageVersion: packageVersion,
       mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
       mediaRegion: (0, _mediaClient.getMediaRegion)()
     })

package/dist/cjs/version.json

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

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

@@ -0,0 +1,43 @@
+/**@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 const CardImageViewWrapper = props => {
+  const {
+    disableOverlay,
+    selectable,
+    selected,
+    mediaType,
+    mediaName,
+    status,
+    progress
+  } = props;
+  const 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,
+      disableOverlay,
+      selectable,
+      selected,
+      mediaType
+    }),
+    className: `${fileCardImageViewSelector} ${selected ? fileCardImageViewSelectedSelector : ''}`
+  }, props.children);
+};
+export const PlayIconWrapper = props => {
+  return jsx("div", {
+    css: playIconWrapperStyles
+  }, props.children);
+};
+export const ProgressBarWrapper = props => {
+  return jsx("div", {
+    css: progressBarWrapperStyles
+  }, props.children);
+};

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;
 `;