@atlaskit/media-card 73.8.0 → 74.0.0

package/dist/es2019/root/ui/titleBox/titleBoxComponents.js

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { errorMessageWrapperStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
+export const TitleBoxWrapper = props => {
+  const {
+    breakpoint,
+    titleBoxBgColor
+  } = props;
+  return jsx("div", {
+    id: "titleBoxWrapper",
+    css: titleBoxWrapperStyles({
+      breakpoint: breakpoint,
+      titleBoxBgColor: titleBoxBgColor
+    })
+  }, props.children);
+};
+export const TitleBoxHeader = props => {
+  const {
+    hasIconOverlap
+  } = props;
+  return jsx("div", {
+    id: "titleBoxHeader",
+    css: titleBoxHeaderStyles({
+      hasIconOverlap
+    })
+  }, props.children);
+};
+export const TitleBoxFooter = props => {
+  const {
+    hasIconOverlap
+  } = props;
+  return jsx("div", {
+    id: "titleBoxFooter",
+    css: titleBoxFooterStyles({
+      hasIconOverlap
+    })
+  }, props.children);
+};
+export const TitleBoxIcon = props => {
+  return jsx("div", {
+    id: "titleBoxIcon",
+    css: titleBoxIconStyles
+  }, props.children);
+};
+export const ErrorMessageWrapper = props => {
+  return jsx("div", {
+    css: errorMessageWrapperStyles
+  }, props.children);
+};

package/dist/es2019/root/ui/titleBox/types.js

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

package/dist/es2019/styles/animations.js

@@ -1,4 +1,4 @@
-import { keyframes } from 'styled-components';
+import { keyframes } from '@emotion/react';
 export const spin = keyframes`
   to { transform: rotate(360deg); }
 `;

package/dist/es2019/styles/index.js

@@ -1,11 +1,11 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { fontFamily } from '@atlaskit/theme/constants';
 import { fadeIn } from '@atlaskit/media-ui';
 export { defaultTransitionDuration } from './config';
 export { antialiased, borderRadiusLeft, capitalize, centerSelf, centerSelfX, centerSelfY, centerX, hexToRgb, rgba, spaceAround, transition, withAppearance } from './mixins';
 export { easeOutCubic, easeOutExpo } from './easing';
 export { spin } from './animations';
-export const Root = styled.div`
+export const rootStyles = () => css`
   box-sizing: border-box;
   font-family: ${fontFamily()};
 
@@ -16,7 +16,7 @@ export const Root = styled.div`
 export const cardShadow = `
   box-shadow: 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24);
 `;
-export const FadeinImage = styled.div`
+export const fadeinImageStyles = () => css`
   ${fadeIn};
 `;
-export default Root;
+export default rootStyles;

package/dist/es2019/utils/cardActions/cardActionButton.js

@@ -0,0 +1,13 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { cardActionButtonStyles } from './styles';
+export const CardActionButton = props => {
+  return jsx("div", {
+    id: "cardActionButton",
+    "data-testid": "media-card-primary-action",
+    css: cardActionButtonStyles(props),
+    style: props.style,
+    onClick: props.onClick,
+    onMouseDown: props.onMouseDown
+  }, props.children);
+};

package/dist/es2019/utils/cardActions/cardActionIconButton.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Component } from 'react';
-import { CardActionButton } from './styled';
+import { CardActionButton } from './cardActionButton';
 export class CardActionIconButton extends Component {
   constructor(...args) {
     super(...args);
@@ -19,7 +19,6 @@ export class CardActionIconButton extends Component {
       variant
     } = this.props;
     return /*#__PURE__*/React.createElement(CardActionButton, {
-      "data-testid": "media-card-primary-action",
       onClick: onClick,
       onMouseDown: this.onMouseDown,
       style: {

package/dist/es2019/utils/cardActions/cardActionsDropdownMenu.js

@@ -3,9 +3,9 @@ import React from 'react';
 import { Component } from 'react';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import DropdownMenu, { DropdownItemGroup, DropdownItem } from '@atlaskit/dropdown-menu';
-import { CardActionButton } from './styled';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireMediaCardEvent } from '../analytics';
+import { CardActionButton } from './cardActionButton';
 
 const CardActionButtonWithProps = props => /*#__PURE__*/React.createElement(CardActionButton, props);
 

package/dist/es2019/utils/cardActions/cardActionsView.js

@@ -1,13 +1,14 @@
-import React from 'react';
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
-import { Wrapper } from './styled';
 import { CardActionIconButton } from './cardActionIconButton';
+import { wrapperStyles } from './styles';
 import { CardActionsDropdownMenu } from './cardActionsDropdownMenu';
 import { PreventClickThrough } from '../preventClickThrough';
 import { createAndFireMediaCardEvent } from '../analytics';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 
-const CardActionIconButtonWithProps = props => /*#__PURE__*/React.createElement(CardActionIconButton, props);
+const CardActionIconButtonWithProps = props => jsx(CardActionIconButton, props);
 
 export class CardActionsView extends Component {
   render() {
@@ -21,7 +22,9 @@ export class CardActionsView extends Component {
 
     const primaryAction = actions.find(actionWithIcon);
     const otherActions = actions.filter(actionNotEqualTo(primaryAction));
-    return /*#__PURE__*/React.createElement(PreventClickThrough, null, /*#__PURE__*/React.createElement(Wrapper, null, primaryAction ? this.renderActionIconButton(primaryAction, true) : null, this.renderOtherActionButtons(otherActions)));
+    return jsx(PreventClickThrough, null, jsx("div", {
+      css: wrapperStyles
+    }, primaryAction ? this.renderActionIconButton(primaryAction, true) : null, this.renderOtherActionButtons(otherActions)));
   }
 
   renderActionIconButton(action, isPrimary) {
@@ -46,7 +49,7 @@ export class CardActionsView extends Component {
         }
       })
     })(CardActionIconButtonWithProps);
-    return /*#__PURE__*/React.createElement(CardActionIconButtonWithAnalytics, {
+    return jsx(CardActionIconButtonWithAnalytics, {
       icon: icon,
       triggerColor: triggerColor,
       onClick: () => handler(),
@@ -69,7 +72,7 @@ export class CardActionsView extends Component {
       if (firstActionWithIcon && otherActions.length === 0) {
         return this.renderActionIconButton(firstActionWithIcon, false);
       } else {
-        return /*#__PURE__*/React.createElement(CardActionsDropdownMenu, {
+        return jsx(CardActionsDropdownMenu, {
           actions: actions,
           triggerColor: triggerColor,
           onOpenChange: onToggle,

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

@@ -1,4 +1,4 @@
 export { CardActionsView as default, CardActionsView } from './cardActionsView';
 export { CardActionIconButton } from './cardActionIconButton';
 export { CardActionsDropdownMenu } from './cardActionsDropdownMenu';
-export { CardActionIconButtonVariant } from './styled';
+export { CardActionIconButtonVariant } from './styles';

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

@@ -1,8 +1,9 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N500, N0 } from '@atlaskit/theme/colors';
 import { borderRadius, size, center } from '@atlaskit/media-ui';
-import { Root } from '../../styles';
-export const Wrapper = styled(Root)`
+import { rootStyles } from '../../styles';
+export const wrapperStyles = css`
+  ${rootStyles()}
   display: flex;
   position: relative;
   line-height: 0;
@@ -34,16 +35,17 @@ const getVariantStyles = variant => {
   `;
 };
 
-export const CardActionButton = styled.div`
-  ${({
+export const cardActionButtonStyles = ({
   variant
-}) => `
-    ${center} ${borderRadius} ${size(26)} color: ${N500};
+}) => css`
+  ${center}
+  ${borderRadius}
+    ${size(26)}
+    color: ${N500};
 
-    &:hover {
-      cursor: pointer;
-    }
+  &:hover {
+    cursor: pointer;
+  }
 
-    ${getVariantStyles(variant)}
-  `}
+  ${getVariantStyles(variant)}
 `;

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

@@ -1,14 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
-import { ErrorIconWrapper } from './styled';
+import { errorIconWrapperStyles } from './styles';
 export class ErrorIcon extends Component {
   render() {
     const {
       size
     } = this.props;
-    return /*#__PURE__*/React.createElement(ErrorIconWrapper, null, /*#__PURE__*/React.createElement(WarningIcon, {
+    return jsx("div", {
+      css: errorIconWrapperStyles
+    }, jsx(WarningIcon, {
       label: "Error",
       size: size
     }));

package/dist/es2019/utils/errorIcon/styles.js

@@ -0,0 +1,5 @@
+import { css } from '@emotion/react';
+export const errorIconWrapperStyles = css`
+  display: flex;
+  color: #ff991f;
+`;

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

@@ -1,7 +1,8 @@
-import React from 'react';
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import { MediaTypeIcon } from '../mediaTypeIcon';
-import { FileTypeIcon } from './styled';
+import { fileTypeIconStyles } from './styles';
 const fileTypeIconClass = 'file-type-icon';
 export class FileIcon extends Component {
   render() {
@@ -11,17 +12,18 @@ export class FileIcon extends Component {
       style
     } = this.props;
     const type = mediaType || 'unknown';
-    const defaultIcon = /*#__PURE__*/React.createElement(MediaTypeIcon, {
+    const defaultIcon = jsx(MediaTypeIcon, {
       type: mediaType,
       size: "small",
       className: fileTypeIconClass
     });
-    const icon = iconUrl ? /*#__PURE__*/React.createElement("img", {
+    const icon = iconUrl ? jsx("img", {
       src: iconUrl,
       className: "custom-icon",
       alt: type
     }) : defaultIcon;
-    return /*#__PURE__*/React.createElement(FileTypeIcon, {
+    return jsx("div", {
+      css: fileTypeIconStyles,
       style: style,
       className: fileTypeIconClass
     }, icon);

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

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { size } from '@atlaskit/media-ui';
-export const FileTypeIcon = styled.div`
+export const fileTypeIconStyles = css`
   float: left;
   margin-right: 6px;
   position: relative;

package/dist/es2019/utils/lightCards/cardError.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Component } from 'react';
 import { ErrorIcon } from '../errorIcon';
-import { Wrapper } from './styled';
+import { Wrapper } from './lightCardWrappers';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
 export class CardError extends Component {
   render() {

package/dist/es2019/utils/lightCards/cardLoading.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Component } from 'react';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
-import { Wrapper, AnimatedWrapper } from './styled';
+import { Wrapper, AnimatedWrapper } from './lightCardWrappers';
 import SpinnerIcon from '@atlaskit/spinner';
 import FileIcon from '@atlaskit/icon/glyph/file';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';

package/dist/es2019/utils/lightCards/lightCardWrappers.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapperStyles, animatedWrapperStyles } from './styles';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+export const Wrapper = props => {
+  const theme = useGlobalTheme();
+  return jsx("div", _extends({
+    css: wrapperStyles({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};
+export const AnimatedWrapper = props => {
+  const theme = useGlobalTheme();
+  return jsx("div", _extends({
+    css: animatedWrapperStyles({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};

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,8 @@
 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 { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
+const packageName = "@atlaskit/media-card";
+const packageVersion = "74.0.0";
 let concurrentExperience;
 
 const getExperience = id => {

package/dist/es2019/version.json

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

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);
+};