@atlaskit/media-card 73.8.0 → 74.0.0

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 {};

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

@@ -0,0 +1,78 @@
+import { css } from '@emotion/react';
+import { borderRadius } from '@atlaskit/media-ui';
+import { N60A } from '@atlaskit/theme/colors';
+import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
+import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
+import { getDefaultCardDimensions } from '../../utils/cardDimensions';
+import { tickBoxClassName, tickboxFixedStyles } from './tickBox/styles';
+import { fixedPlayButtonStyles, playButtonClassName } from './playButton/styles';
+import { Breakpoint, responsiveSettings } from './common';
+const breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
+export const calcBreakpointSize = (wrapperWidth = 0) => {
+  const [breakpoint] = breakpointSizes.find(([_breakpoint, limit]) => wrapperWidth <= limit) || [Breakpoint.SMALL];
+  return breakpoint;
+};
+export const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
+  const setting = responsiveSettings[breakpoint];
+  return `
+    font-size: ${setting.fontSize}px;
+    line-height: ${setting.lineHeight}px;
+  `;
+};
+export const getWrapperDimensions = (dimensions, appearance) => {
+  const {
+    width,
+    height
+  } = dimensions || {};
+  const {
+    width: defaultWidth,
+    height: defaultHeight
+  } = getDefaultCardDimensions(appearance);
+  return `
+    width: ${getCSSUnitValue(width || defaultWidth)};
+    max-width: 100%;
+    height: ${getCSSUnitValue(height || defaultHeight)};
+    max-height: 100%;
+  `;
+}; // This is a trick to simulate the blue border without affecting the dimensions.
+// CSS outline has no 'radius', therefore we can't achieve the same effect with it
+
+export const getWrapperShadow = (disableOverlay, selected) => {
+  const withOverlayShadow = !disableOverlay ? `0 1px 1px ${N60A}, 0 0 1px 0 ${N60A}` : '';
+  const selectedShadow = selected ? akEditorSelectedBoxShadow : '';
+  const shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
+  return shadow ? `box-shadow: ${shadow};` : '';
+};
+export const getCursorStyle = cursor => !!cursor ? `cursor: ${cursor};` : '';
+export const getClickablePlayButtonStyles = isPlayButtonClickable => {
+  if (!isPlayButtonClickable) {
+    return '';
+  }
+
+  return `
+    &:hover .${playButtonClassName} {
+      ${fixedPlayButtonStyles}
+    }
+  `;
+};
+export const getSelectableTickBoxStyles = isTickBoxSelectable => {
+  if (!isTickBoxSelectable) {
+    return '';
+  }
+
+  return `
+    &:hover .${tickBoxClassName} {
+      ${tickboxFixedStyles}
+    }
+  `;
+};
+export const cardImageContainerStyles = css`
+  display: flex;
+  position: relative;
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  ${borderRadius}
+`;

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

@@ -0,0 +1,30 @@
+import { css } from '@emotion/react';
+import { transition } from '../../../styles';
+import { B200, N0, N100 } from '@atlaskit/theme/colors';
+export const tickBoxClassName = 'media-card-tickbox';
+export const tickboxFixedStyles = `
+  background-color: ${N0};
+  color: ${N100};
+`;
+export const getSelectedStyles = selected => selected ? `background-color: ${B200};
+      color: white;` : ``;
+export const wrapperStyles = selected => css`
+  ${transition()}
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  top: 7px;
+  left: 7px;
+  border-radius: 20px;
+  color: transparent;
+  /* Enforce dimensions and position of "tick" icon */
+  span {
+    display: block;
+    svg {
+      height: 14px;
+    }
+  }
+  ${getSelectedStyles(selected)}
+`;
+wrapperStyles.displayName = 'TickBoxWrapper';

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Wrapper } from './styled';
 import TickIcon from '@atlaskit/icon/glyph/check';
+import { TickBoxWrapper } from './tickBoxWrapper';
 export const TickBox = ({
   selected
-}) => /*#__PURE__*/React.createElement(Wrapper, {
+}) => /*#__PURE__*/React.createElement(TickBoxWrapper, {
   selected: selected
 }, /*#__PURE__*/React.createElement(TickIcon, {
   label: "tick"

package/dist/es2019/root/ui/tickBox/tickBoxWrapper.js

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

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

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

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

@@ -1,10 +1,9 @@
 import React from 'react';
-import { TitleBoxWrapper, ErrorMessageWrapper } from './styled';
+import { FormattedMessage } from 'react-intl-next';
 import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
-import { FormattedMessage } from 'react-intl-next';
-import { FormattedMessageWrapper } from '../../styled';
+import { ErrorMessageWrapper, TitleBoxWrapper } from './titleBoxComponents';
 export const FailedTitleBox = ({
   breakpoint,
   customMessage = messages.failed_to_load
@@ -15,5 +14,5 @@ export const FailedTitleBox = ({
     label: 'Warning',
     size: 'small',
     primaryColor: R300
-  }), /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
+  }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

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

@@ -0,0 +1,68 @@
+import { css } from '@emotion/react';
+import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
+import { N0 } from '@atlaskit/theme/colors';
+import { rgba } from '../../../styles/mixins';
+
+const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
+  const setting = responsiveSettings[breakpoint];
+  const verticalPadding = setting.titleBox.verticalPadding;
+  const horizontalPadding = setting.titleBox.horizontalPadding;
+  const height = getTitleBoxHeight(breakpoint);
+  return `height: ${height}px;
+    padding: ${verticalPadding}px ${horizontalPadding}px;`;
+};
+
+const HEX_REGEX = /^#[0-9A-F]{6}$/i;
+export const titleBoxWrapperStyles = ({
+  breakpoint,
+  titleBoxBgColor
+}) => css`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 0.8)};
+  color: inherit;
+  cursor: inherit;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  ${generateResponsiveStyles(breakpoint)}
+`;
+titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
+const infoStyles = `white-space: nowrap;
+  overflow: hidden;`;
+const iconOverlapStyles = `padding-right: 10px;`;
+export const titleBoxHeaderStyles = ({
+  hasIconOverlap
+}) => css`
+  font-weight: 600;
+  ${infoStyles}
+  ${hasIconOverlap && iconOverlapStyles}
+`;
+titleBoxHeaderStyles.displayName = 'FailedTitleBoxHeader';
+export const titleBoxFooterStyles = ({
+  hasIconOverlap
+}) => css`
+  text-overflow: ellipsis;
+  ${infoStyles}
+  ${hasIconOverlap && iconOverlapStyles}
+`;
+titleBoxFooterStyles.displayName = 'TitleBoxFooter';
+export const titleBoxIconStyles = css`
+  position: absolute;
+  right: 4px;
+  bottom: 0px;
+`;
+export const errorMessageWrapperStyles = css`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  span {
+    vertical-align: middle;
+    :nth-child(2) {
+      margin-left: 4px;
+      margin-right: 4px;
+    }
+  }
+`;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import LockFilledIcon from '@atlaskit/icon/glyph/lock-filled';
 import { injectIntl } from 'react-intl-next';
-import { TitleBoxWrapper, TitleBoxHeader, TitleBoxFooter, TitleBoxIcon } from './styled';
+import LockFilledIcon from '@atlaskit/icon/glyph/lock-filled';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { formatDate } from '@atlaskit/media-ui/formatDate';
+import { TitleBoxWrapper, TitleBoxFooter, TitleBoxHeader, TitleBoxIcon } from './titleBoxComponents';
 export const FormattedDate = injectIntl(({
   timestamp,
   intl