@atlaskit/media-card 75.0.0 → 76.0.0

package/dist/es2019/card/cardImageView/styles.js

@@ -1,131 +0,0 @@
-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 { rootStyles, cardShadow } from '../styles';
-import { getSelectedBorderStyle } from '../styles/getSelectedBorderStyle';
-const getShadowAttribute = props => {
-  const {
-    disableOverlay
-  } = props;
-  return disableOverlay ? '' : cardShadow;
-};
-const getBackgroundColor = props => {
-  const {
-    mediaType
-  } = props;
-  return `background: ${mediaType === 'image' ? 'transparent' : themed({
-    light: `var(--ds-background-neutral, ${N20})`,
-    dark: `var(--ds-background-neutral, ${DN50})`
-  })(props)};`;
-};
-export const wrapperStyles = props => css`
-  ${rootStyles()}
-  ${getShadowAttribute(props)}
-  ${borderRadius}
-  ${getBackgroundColor(props)}
-
-  line-height: normal;
-  position: relative;
-
-  ${getSelectedBorderStyle(props)}
-
-  ${size()} .wrapper {
-    ${borderRadius};
-    display: block;
-    height: inherit;
-    position: relative;
-
-    .img-wrapper {
-      position: relative;
-      width: inherit;
-      height: inherit;
-      overflow: hidden;
-      display: block;
-      ${borderRadius}
-    }
-  }
-`;
-export const playIconWrapperStyles = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${"var(--ds-icon-inverse, white)"};
-
-  /* we want to override default icon size and hover state */
-  &:hover > * {
-    width: 64px;
-    height: 64px;
-  }
-`;
-export const playIconBackgroundStyles = css`
-  background: ${"var(--ds-background-neutral-bold, rgba(23, 43, 77, 0.7))"};
-  border-radius: 100%;
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition-property: width, height;
-  transition-duration: 0.1s;
-  width: 56px;
-  height: 56px;
-`;
-const bodyHeight = 26;
-export const progressBarWrapperStyles = css`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-`;
-export const overlayStyles = css`
-  ${absolute()}
-  ${size()}
-  border-radius: inherit;
-  background-color: ${"var(--ds-blanket, rgba(9, 30, 66, 0.5))"};
-`;
-export const titleStyles = css`
-  ${absolute()} width: 100%;
-  padding: 8px;
-  color: ${`var(--ds-text-inverse, ${N0})`};
-  font-size: 12px;
-  line-height: 18px;
-  word-wrap: break-word;
-`;
-export const bodyStyles = css`
-  display: flex;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  padding: 8px;
-  color: ${`var(--ds-text-inverse, ${N0})`};
-`;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
-export const progressWrapperStyles = css`
-  flex-grow: 1;
-
-  /*
-    force the height to always be 20px (the height of the cancel icon),
-    so that the height of the progress bar doesn't jump when cards with
-    and without a cancel icon are rendered side-by-side.
-  */
-  height: ${bodyHeight}px;
-
-  /*
-    vertically center the progress bar within the 20px, keeping the progress bar full width
-  */
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`;
-export const cardActionsWrapperStyles = css`
-  margin-left: 4px;
-  /*
-    button must appear above overlay
-   */
-  z-index: 2;
-`;

package/dist/es2019/card/styles/animations.js

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

package/dist/es2019/card/styles/config.js

@@ -1 +0,0 @@
-export const defaultTransitionDuration = '.3s';

package/dist/es2019/card/styles/easing.js

@@ -1,2 +0,0 @@
-export const easeOutCubic = 'cubic-bezier(0.215, 0.61, 0.355, 1)';
-export const easeOutExpo = 'cubic-bezier(0.19, 1, 0.22, 1)';

package/dist/es2019/card/styles/getSelectedBorderStyle.js

@@ -1,24 +0,0 @@
-import { borderRadius } from '@atlaskit/media-ui';
-import { getSelectionStyles, SelectionStyle, hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
-
-/*
- * Used to display the blue border around a selected card without
- * shrinking the image OR growing the card size
- */
-export const getSelectedBorderStyle = ({
-  selected
-}) => `
-    ${hideNativeBrowserTextSelectionStyles}
-
-    &::after {
-      content: '';
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      box-sizing: border-box;
-      pointer-events: none;
-      ${borderRadius}
-      ${selected ? getSelectionStyles([SelectionStyle.Border]) : ''}
-    }
-  `;

package/dist/es2019/card/styles/index.js

@@ -1,18 +0,0 @@
-import { css } from '@emotion/react';
-import { fontFamily } from '@atlaskit/theme/constants';
-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 rootStyles = () => css`
-  box-sizing: border-box;
-  font-family: ${fontFamily()};
-
-  * {
-    box-sizing: border-box;
-  }
-`;
-export const cardShadow = `
-  box-shadow: ${"var(--ds-shadow-raised, 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24))"};
-`;
-export default rootStyles;

package/dist/es2019/card/styles/mixins.js

@@ -1,51 +0,0 @@
-import { borderRadius } from '@atlaskit/theme/constants';
-import { defaultTransitionDuration } from './config';
-export const centerX = `
-  display: flex;
-  justify-content: center;
-`;
-export const antialiased = `
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-`;
-export const centerSelfY = `
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-`;
-export const centerSelfX = `
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-`;
-export const centerSelf = `
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-`;
-export const borderRadiusLeft = `
-  border-top-left-radius: ${borderRadius()};
-  border-bottom-left-radius: ${borderRadius()};
-`;
-export const spaceAround = `
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-`;
-export const transition = (propertyName = 'all') => `
-  transition: ${propertyName} ${defaultTransitionDuration};
-`;
-export const hexToRgb = hex => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? `${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)}` : null;
-};
-export const rgba = (hex, opacity) => `rgba(${hexToRgb(hex)}, ${opacity})`;
-export const capitalize = `
-  &::first-letter {
-    text-transform: uppercase;
-  }
-`;
-export const withAppearance = styleMap => ({
-  appearance
-}) => appearance && styleMap[appearance] || '';

package/dist/es2019/card/styles/styles.js

@@ -1,42 +0,0 @@
-import { css } from '@emotion/react';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
-import { breakpointStyles } from '../../utils/breakpoint';
-import { getSelectedBorderStyle } from './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 wrapperStyles = ({
-  dimensions,
-  breakpointSize = 'medium',
-  shouldUsePointerCursor
-}) => css`
-  ${breakpointStyles({
-  breakpointSize
-})}
-  ${getWrapperHeight(dimensions)}
-      ${getWrapperWidth(dimensions)}
-  cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};
-`;
-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(selected)}
-
-  video {
-    width: 100%;
-    height: 100%;
-  }
-`;
-inlinePlayerWrapperStyles.displayName = 'InlinePlayerWrapper';

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

@@ -1,41 +0,0 @@
-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: ${`var(--ds-text-subtlest, ${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/utils/breakpoint.js

@@ -1,83 +0,0 @@
-import { size } from '@atlaskit/media-ui';
-export const breakpointSize = (width, sizes = cardBreakpointSizes) => {
-  const value = parseInt(`${width}`, 10); // Normalize value
-  const keys = Object.keys(sizes);
-  const defaultValue = keys[0];
-  let breakpoint;
-  keys.forEach(label => {
-    if (value < sizes[label] && !breakpoint) {
-      breakpoint = label;
-    }
-  });
-  return breakpoint || defaultValue;
-};
-export const cardBreakpointSizes = {
-  small: 173,
-  medium: 225,
-  large: 300,
-  xlarge: Infinity
-};
-export const breakpointStyles = ({
-  breakpointSize
-}) => {
-  switch (breakpointSize) {
-    case 'small':
-      return `
-        .title {
-          font-size: 12px;
-        }
-        .file-type-icon span {
-          // We need to use important here since we can't use the dimensions provided by the Icon component
-          ${size('14px !important')}
-        }
-      `;
-    case 'medium':
-      return `
-        .title {
-          font-size: 14px;
-        }
-        .file-type-icon span {
-          ${size('16px !important')}
-        }
-      `;
-    case 'large':
-      return `
-        .overlay {
-          padding: 24px;
-        }
-        .title {
-          font-size: 14px;
-        }
-        .file-size {
-          font-size: 14px;
-        }
-        .file-type-icon span {
-          ${size('18px !important')}
-        }
-      `;
-    case 'xlarge':
-      return `
-        border-radius: 2px;
-
-        .title {
-          font-size: 16px;
-        }
-
-        .file-size {
-          font-size: 14px;
-        }
-        
-        .wrapper, .img-wrapper {
-          border-radius: 2px;
-        }
-
-        .overlay {
-          padding: 24px;
-        }
-
-        .file-type-icon span {
-          ${size('18px !important')}
-        }
-      `;
-  }
-};

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

@@ -1,31 +0,0 @@
-/**@jsx jsx */
-import { jsx } from '@emotion/react';
-import { Component } from 'react';
-import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
-import { fileTypeIconStyles } from './styles';
-const fileTypeIconClass = 'file-type-icon';
-export class FileIcon extends Component {
-  render() {
-    const {
-      mediaType,
-      iconUrl,
-      style
-    } = this.props;
-    const type = mediaType || 'unknown';
-    const defaultIcon = jsx(MediaTypeIcon, {
-      type: mediaType,
-      size: "small",
-      className: fileTypeIconClass
-    });
-    const icon = iconUrl ? jsx("img", {
-      src: iconUrl,
-      className: "custom-icon",
-      alt: type
-    }) : defaultIcon;
-    return jsx("div", {
-      css: fileTypeIconStyles,
-      style: style,
-      className: fileTypeIconClass
-    }, icon);
-  }
-}

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

@@ -1,11 +0,0 @@
-import { css } from '@emotion/react';
-import { size } from '@atlaskit/media-ui';
-export const fileTypeIconStyles = css`
-  float: left;
-  margin-right: 6px;
-  position: relative;
-  top: 1px;
-  img {
-    ${size('12px !important')};
-  }
-`;

package/dist/es2019/utils/getErrorMessage.js

@@ -1,4 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl-next';
-import { messages } from '@atlaskit/media-ui';
-export const getErrorMessage = status => status === 'error' && /*#__PURE__*/React.createElement(FormattedMessage, messages.failed_to_load);

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

@@ -1,21 +0,0 @@
-/**@jsx jsx */
-import { jsx } from '@emotion/react';
-import { Component } from 'react';
-import { progressWrapperStyles } from './styles';
-export class ProgressBar extends Component {
-  render() {
-    if (typeof this.props.progress !== 'number') {
-      return null;
-    }
-    const progress = Math.min(1, Math.max(0, this.props.progress));
-    const progressBarStyle = {
-      width: `${progress * 100}%`
-    };
-    return jsx("div", {
-      css: progressWrapperStyles
-    }, jsx("div", {
-      className: 'progressBar',
-      style: progressBarStyle
-    }));
-  }
-}

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

@@ -1,15 +0,0 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-import { css } from '@emotion/react';
-import { borderRadius } from '@atlaskit/media-ui';
-export const progressWrapperStyles = css`
-  ${borderRadius} z-index: 30;
-  overflow: hidden;
-  background-color: rgba(255, 255, 255, 0.3);
-
-  .progressBar {
-    width: 0%;
-    height: 3px;
-    transition: width 0.25s ease-in;
-    background-color: white;
-  }
-`;

package/dist/es2019/utils/shouldDisplayImageThumbnail.js

@@ -1,10 +0,0 @@
-import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-client';
-export const shouldDisplayImageThumbnail = (cardStatus, mediaItemType, dataURI, mediaType, mimeType) => {
-  if (mediaType === 'doc' || !mimeType && mediaItemType === 'file') {
-    return false;
-  }
-  if (dataURI) {
-    return mediaItemType === 'external-image' || mimeType && isMimeTypeSupportedByBrowser(mimeType) || cardStatus === 'complete' || cardStatus === 'loading-preview';
-  }
-  return false;
-};

package/dist/esm/card/cardImageView/cardImageViewWrapper.js

@@ -1,41 +0,0 @@
-/**@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/card/cardImageView/cardOverlay/cardOverlayComponents.js

@@ -1,39 +0,0 @@
-/**@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);
-};