@atlaskit/media-card 73.7.0 → 74.1.0

package/dist/es2019/root/{styled.js → styles.js}

@@ -1,46 +1,45 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { getCSSUnitValue } from '../utils/getCSSUnitValue';
 import { breakpointStyles } from '../utils/breakpoint';
 import { getSelectedBorderStyle } from '../styles/getSelectedBorderStyle';
 import { getDimensionsWithDefault } from '../utils/lightCards/getDimensionsWithDefault';
+export const inlinePlayerClassName = 'media-card-inline-player';
 
 const getWrapperHeight = dimensions => dimensions && dimensions.height ? `height: ${getCSSUnitValue(dimensions.height)}; max-height: 100%;` : '';
 
 const getWrapperWidth = dimensions => dimensions && dimensions.width ? `width: ${getCSSUnitValue(dimensions.width)}; max-width: 100%;` : '';
 
-export const Wrapper = styled.div`
-  ${({
+export const wrapperStyles = ({
   dimensions,
   breakpointSize = 'medium',
   shouldUsePointerCursor
-}) => {
-  return `
-      ${breakpointStyles({
-    breakpointSize
-  })}
-      ${getWrapperHeight(dimensions)}
+}) => css`
+  ${breakpointStyles({
+  breakpointSize
+})}
+  ${getWrapperHeight(dimensions)}
       ${getWrapperWidth(dimensions)}
-      cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};
-    `;
-}};
+  cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};
 `;
-Wrapper.displayName = 'CardViewWrapper';
-export const InlinePlayerWrapper = styled.div`
-  width: ${props => getDimensionsWithDefault(props.dimensions).width || '100%'};
-  height: ${props => getDimensionsWithDefault(props.dimensions).height || 'auto'};
+wrapperStyles.displayName = 'CardViewWrapper';
+export const inlinePlayerWrapperStyles = ({
+  dimensions,
+  selected
+}) => css`
+  width: ${getDimensionsWithDefault(dimensions).width || '100%'};
+  height: ${getDimensionsWithDefault(dimensions).height || 'auto'};
   overflow: hidden;
   border-radius: ${borderRadius()}px;
   position: relative;
   max-width: 100%;
   max-height: 100%;
 
-  ${getSelectedBorderStyle}
+  ${getSelectedBorderStyle(selected)}
 
   video {
     width: 100%;
     height: 100%;
   }
 `;
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
-export const FormattedMessageWrapper = styled.span``;
+inlinePlayerWrapperStyles.displayName = 'InlinePlayerWrapper';

package/dist/es2019/root/types.js

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

package/dist/es2019/root/ui/actionsBar/actionsBar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CardActionIconButtonVariant, CardActionsView } from '../../../utils/cardActions';
-import { Wrapper } from './styled';
+import { ActionsBarWrapper } from './actionsBarWrapper';
 export class ActionsBar extends React.Component {
   render() {
     const {
@@ -12,7 +12,7 @@ export class ActionsBar extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(Wrapper, {
+    return /*#__PURE__*/React.createElement(ActionsBarWrapper, {
       isFixed: isFixed
     }, /*#__PURE__*/React.createElement(CardActionsView, {
       actions: actions,

package/dist/es2019/root/ui/actionsBar/actionsBarWrapper.js

@@ -0,0 +1,10 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapperStyles, actionsBarClassName } from './styles';
+export const ActionsBarWrapper = props => {
+  return jsx("div", {
+    id: "actionsBarWrapper",
+    css: wrapperStyles(props.isFixed),
+    className: actionsBarClassName
+  }, props.children);
+};

package/dist/es2019/root/ui/actionsBar/styles.js

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+import { transition } from '../../../styles';
+export const actionsBarClassName = 'media-card-actions-bar';
+export const fixedActionBarStyles = `opacity: 1;`;
+export const wrapperStyles = isFixed => css`
+  ${isFixed ? fixedActionBarStyles : 'opacity: 0;'}
+  ${transition()}
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+`;
+wrapperStyles.displayName = 'ActionsBarWrapper';

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

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

package/dist/es2019/root/ui/blanket/blanket.js

@@ -0,0 +1,12 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { blanketStyles, blanketClassName } from './styles';
+export const Blanket = props => {
+  const {
+    isFixed
+  } = props;
+  return jsx("div", {
+    css: blanketStyles(isFixed),
+    className: blanketClassName
+  });
+};

package/dist/es2019/root/ui/blanket/styles.js

@@ -0,0 +1,17 @@
+import { css } from '@emotion/react';
+import { transition } from '../../../styles';
+import { N90A } from '@atlaskit/theme/colors';
+export const blanketClassName = 'media-card-blanket';
+export const fixedBlanketStyles = `background-color: ${N90A};`;
+export const blanketStyles = isFixed => css`
+  ${transition()}
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  left: 0;
+  top: 0;
+  ${isFixed ? fixedBlanketStyles : ''}
+`;
+blanketStyles.displayName = 'Blanket';

package/dist/es2019/root/ui/iconMessage/iconMessageWrapper.js

@@ -0,0 +1,16 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { iconMessageWrapperStyles } from './styles';
+export const IconMessageWrapper = props => {
+  const {
+    animated,
+    reducedFont
+  } = props;
+  return jsx("div", {
+    id: "iconMessageWrapper",
+    css: iconMessageWrapperStyles({
+      animated: animated,
+      reducedFont: reducedFont
+    })
+  }, props.children);
+};

package/dist/es2019/root/ui/iconMessage/index.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { IconMessageWrapper } from './styled';
+import { IconMessageWrapper } from './iconMessageWrapper';
 import { messages } from '@atlaskit/media-ui';
 import { FormattedMessage } from 'react-intl-next';
-import { FormattedMessageWrapper } from '../../styled';
 export const IconMessage = ({
   messageDescriptor,
   animated = false,
@@ -12,7 +11,7 @@ export const IconMessage = ({
   return /*#__PURE__*/React.createElement(IconMessageWrapper, {
     animated: animated,
     reducedFont: reducedFont
-  }, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
 };
 export const CreatingPreview = ({
   disableAnimation

package/dist/es2019/root/ui/iconMessage/styles.js

@@ -0,0 +1,32 @@
+import { css, keyframes } from '@emotion/react';
+import { N300 } from '@atlaskit/theme/colors';
+const breatheAnimation = keyframes`
+ 0% { opacity: 1}
+ 50% { opacity: 0.3 }
+ 100% { opacity: 1; }`;
+const animatedStyles = css`
+  animation-name: ${breatheAnimation};
+  animation-duration: 3.5s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+`;
+
+const getStylesBasedOnProps = ({
+  animated,
+  reducedFont
+}) => css`
+  overflow: hidden;
+  opacity: 1;
+  font-weight: 450;
+  ${reducedFont ? 'font-size: 0.7em;' : ''}
+  color: ${N300};
+  text-align: center;
+  ${animated ? animatedStyles : ''}
+  margin-bottom: -1em;
+  padding: 3px 10px;
+`;
+
+export const iconMessageWrapperStyles = props => css`
+  ${getStylesBasedOnProps(props)}
+`;
+iconMessageWrapperStyles.displayName = 'IconMessageWrapper';

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

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

package/dist/es2019/root/ui/iconWrapper/iconWrapper.js

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

package/dist/es2019/root/ui/iconWrapper/styles.js

@@ -0,0 +1,25 @@
+import { css } from '@emotion/react';
+import { getTitleBoxHeight } from '../common';
+export function titleBoxHeight(hasTitleBox, breakpoint) {
+  // there is no titlebox
+  if (!hasTitleBox) {
+    return `0px`;
+  } // calculate height of the titlebox
+
+
+  const marginBottom = getTitleBoxHeight(breakpoint);
+  return `${marginBottom}px`;
+}
+export const iconWrapperStyles = ({
+  hasTitleBox,
+  breakpoint
+}) => css`
+  position: absolute;
+  width: 100%;
+  height: calc(100% - ${titleBoxHeight(hasTitleBox, breakpoint)});
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+iconWrapperStyles.displayName = 'MediaIconWrapper';

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

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

package/dist/es2019/root/ui/loadingRateLimited/styles.js

@@ -0,0 +1,41 @@
+import { css } from '@emotion/react';
+import { generateResponsiveStyles } from '../progressBar/styles';
+import { N300 } from '@atlaskit/theme/colors';
+export const loadingRateLimitedContainerStyles = css`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+export const warningIconWrapperStyles = css`
+  width: 100%;
+  justify-content: center;
+  display: flex;
+  /* Required to allow end users to select text in the error message */
+  cursor: auto;
+  user-select: text;
+  > svg {
+    width: 45px;
+  }
+`;
+export const loadingRateLimitedTextWrapperStyles = ({
+  breakpoint,
+  positionBottom
+}) => css`
+  margin-top: 10px;
+  overflow: hidden;
+  color: ${N300};
+  display: block;
+  width: 100%;
+  text-align: center;
+  ${generateResponsiveStyles(breakpoint, positionBottom, false, 1)}
+`;
+loadingRateLimitedTextWrapperStyles.displayName = 'LoadingRateLimitedTextWrapper';
+export const couldntLoadWrapperStyles = css`
+  font-weight: 550;
+`;
+export const errorWrapperStyles = css`
+  font-weight: 350;
+`;

package/dist/es2019/root/ui/newFileExperience/newFileExperienceWrapper.js

@@ -0,0 +1,42 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { newFileExperienceClassName } from '../../../root/card/cardConstants';
+import { newFileExperienceWrapperStyles } from './styles';
+export const NewFileExperienceWrapper = props => {
+  const {
+    testId,
+    dimensions,
+    appearance,
+    onClick,
+    onMouseEnter,
+    innerRef,
+    breakpoint,
+    mediaCardCursor,
+    disableOverlay,
+    selected,
+    displayBackground,
+    isPlayButtonClickable,
+    isTickBoxSelectable,
+    shouldDisplayTooltip
+  } = props;
+  return jsx("div", {
+    id: "newFileExperienceWrapper",
+    className: newFileExperienceClassName,
+    "data-testid": testId,
+    css: newFileExperienceWrapperStyles({
+      breakpoint,
+      dimensions,
+      appearance,
+      disableOverlay,
+      displayBackground,
+      selected,
+      isPlayButtonClickable,
+      isTickBoxSelectable,
+      shouldDisplayTooltip,
+      mediaCardCursor
+    }),
+    ref: innerRef,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  }, props.children);
+};

package/dist/es2019/root/ui/newFileExperience/styles.js

@@ -0,0 +1,50 @@
+import { css } from '@emotion/react';
+import { fontFamily } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/media-ui';
+import { N20 } from '@atlaskit/theme/colors';
+import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
+import { transition } from '../../../styles';
+import { fixedBlanketStyles, blanketClassName } from '.././blanket/styles';
+import { fixedActionBarStyles, actionsBarClassName } from '.././actionsBar/styles';
+import { generateResponsiveStyles, getClickablePlayButtonStyles, getCursorStyle, getSelectableTickBoxStyles, getWrapperDimensions, getWrapperShadow } from '../styles';
+export const newFileExperienceWrapperStyles = ({
+  breakpoint,
+  dimensions,
+  appearance,
+  disableOverlay,
+  displayBackground,
+  selected,
+  isPlayButtonClickable,
+  isTickBoxSelectable,
+  shouldDisplayTooltip,
+  mediaCardCursor
+}) => css`
+  ${transition()}
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+  position: relative;
+  font-family: ${fontFamily()};
+  ${getWrapperDimensions(dimensions, appearance)}
+  ${displayBackground ? `background-color: ${N20};` : ''}
+    ${borderRadius}
+    ${getCursorStyle(mediaCardCursor)}
+    ${getWrapperShadow(disableOverlay, selected)}
+  ${generateResponsiveStyles(breakpoint)};
+  ${hideNativeBrowserTextSelectionStyles}
+
+  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */
+    ${getClickablePlayButtonStyles(isPlayButtonClickable)}
+    ${getSelectableTickBoxStyles(isTickBoxSelectable)}
+    &:hover .${blanketClassName} {
+    ${fixedBlanketStyles}
+  }
+  &:hover .${actionsBarClassName} {
+    ${fixedActionBarStyles}
+  }
+
+  /* Tooltip does not support percentage dimensions. We enforce them here */
+  ${shouldDisplayTooltip ? `> div { width: 100%; height: 100% }` : ''}
+`;
+newFileExperienceWrapperStyles.displayName = 'NewFileExperienceWrapper';

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

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

package/dist/es2019/root/ui/playButton/playButton.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import VidPlayIcon from '@atlaskit/icon/glyph/vid-play';
-import { Wrapper, Background } from './styled';
+import { PlayButtonWrapper } from './playButtonWrapper';
+import { PlayButtonBackground } from './playButtonBackground';
 export const PlayButton = () => {
-  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Background, null), /*#__PURE__*/React.createElement(VidPlayIcon, {
+  return /*#__PURE__*/React.createElement(PlayButtonWrapper, null, /*#__PURE__*/React.createElement(PlayButtonBackground, null), /*#__PURE__*/React.createElement(VidPlayIcon, {
     label: "play",
     size: "large"
   }));

package/dist/es2019/root/ui/playButton/playButtonBackground.js

@@ -0,0 +1,9 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { backgroundStyles, bkgClassName } from './styles';
+export const PlayButtonBackground = () => {
+  return jsx("div", {
+    css: backgroundStyles,
+    className: bkgClassName
+  });
+};

package/dist/es2019/root/ui/playButton/playButtonWrapper.js

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

package/dist/es2019/root/ui/playButton/{styled.js → styles.js}

@@ -1,7 +1,7 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N0, N90A } from '@atlaskit/theme/colors';
 export const playButtonClassName = 'media-card-play-button';
-const bkgClassName = 'play-icon-background';
+export const bkgClassName = 'play-icon-background';
 const discSize = 48;
 const discSizeHover = 56;
 export const fixedPlayButtonStyles = `
@@ -10,9 +10,7 @@ export const fixedPlayButtonStyles = `
     height: ${discSizeHover}px;
   }
 `;
-export const Wrapper = styled.div.attrs({
-  className: playButtonClassName
-})`
+export const playButtonWrapperStyles = css`
   position: absolute;
   top: 0;
   left: 0;
@@ -26,10 +24,7 @@ export const Wrapper = styled.div.attrs({
     position: absolute;
   }
 `;
-Wrapper.displayName = 'PlayButtonWrapper';
-export const Background = styled.div.attrs({
-  className: bkgClassName
-})`
+export const backgroundStyles = css`
   transition-property: width, height;
   transition-duration: 0.1s;
   position: absolute;
@@ -37,5 +32,4 @@ export const Background = styled.div.attrs({
   height: ${discSize}px;
   background: ${N90A};
   border-radius: 100%;
-`;
-Background.displayName = 'PlayButtonBackground';
+`;

package/dist/es2019/root/ui/progressBar/progressBar.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import { StyledBar } from './styled';
+import { StyledBar } from './styledBar';
 import { Breakpoint } from '../common';
+export const getNormalizedProgress = progress => {
+  return Math.min(1, Math.max(0, progress || 0)) * 100;
+};
 export const ProgressBar = ({
   progress,
   breakpoint = Breakpoint.SMALL,
   positionBottom = false,
   showOnTop = false
 }) => {
-  const normalizedProgress = Math.min(1, Math.max(0, progress || 0)) * 100;
   return /*#__PURE__*/React.createElement(StyledBar, {
-    progress: normalizedProgress,
+    progress: getNormalizedProgress(progress),
     breakpoint: breakpoint,
     positionBottom: positionBottom,
     showOnTop: showOnTop

package/dist/es2019/root/ui/progressBar/styledBar.js

@@ -0,0 +1,20 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { styledBarStyles } from './styles';
+export const StyledBar = props => {
+  const {
+    progress,
+    breakpoint,
+    positionBottom,
+    showOnTop
+  } = props;
+  return jsx("div", {
+    id: "styledBar",
+    css: styledBarStyles({
+      progress,
+      breakpoint,
+      positionBottom,
+      showOnTop
+    })
+  });
+};

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
 import { rgba } from '../../../styles/mixins';
 import { N0, N400 } from '@atlaskit/theme/colors';
@@ -23,33 +23,37 @@ export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop,
     ${showOnTop ? 'top' : 'bottom'}: ${marginBottom}px
   `;
 }
-export const StyledBar = styled.div`
-  ${({
+
+const getStyledBarStylesBasedOnProps = ({
   progress,
   breakpoint,
   positionBottom,
   showOnTop
 }) => `
-    ${borderRadius}
-    overflow: hidden;
-    position: absolute;
-    width: ${width}%;
-    left: ${left}%;
-    background-color: ${rgba(N0, 0.8)};
-    height: ${height + padding * 2}px;
-    padding: ${padding}px;
-    box-sizing: border-box;
-
-    ::before {
-      content: '';
-      width: ${progress}%;
-      height: 100%;
-      background-color: ${N400};
-      ${borderRadius}
-      display: block;
-    }
+${borderRadius}
+overflow: hidden;
+position: absolute;
+width: ${width}%;
+left: ${left}%;
+background-color: ${rgba(N0, 0.8)};
+height: ${height + padding * 2}px;
+padding: ${padding}px;
+box-sizing: border-box;
 
-    ${generateResponsiveStyles(breakpoint, positionBottom, showOnTop)}
-`}
+::before {
+  content: '';
+  width: ${progress}%;
+  height: 100%;
+  background-color: ${N400};
+  ${borderRadius}
+  display: block;
+}
+${generateResponsiveStyles(breakpoint, positionBottom, showOnTop)}
 `;
-StyledBar.displayName = 'StyledProgressBar';
+
+export const styledBarStyles = props => {
+  return css`
+    ${getStyledBarStylesBasedOnProps(props)}
+  `;
+};
+styledBarStyles.displayName = 'StyledProgressBar';

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

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