@atlaskit/media-card 73.7.0 → 74.1.0

package/dist/types/utils/mediaTypeIcon/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { MediaType } from '@atlaskit/media-client';
+export interface IconWrapperProps {
+    type: MediaType;
+    children?: JSX.Element;
+}

package/dist/types/utils/progressBar/index.d.ts

@@ -1,7 +1,9 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 export interface ProgressBarProps {
     progress?: number;
 }
 export declare class ProgressBar extends Component<ProgressBarProps, {}> {
-    render(): JSX.Element | null;
+    render(): jsx.JSX.Element | null;
 }

package/dist/types/utils/progressBar/styles.d.ts

@@ -0,0 +1 @@
+export declare const progressWrapperStyles: import("@emotion/react").SerializedStyles;

package/dist/types/utils/ufoExperiences.d.ts

@@ -4,4 +4,4 @@ import { SSRStatus } from './analytics';
 import { MediaCardError } from '../errors';
 import { FileStateFlags } from '../types';
 export declare const startUfoExperience: (id: string) => void;
-export declare const completeUfoExperience: (id: string, status: CardStatus, fileAttributes: FileAttributes, fileStateFlags: FileStateFlags, ssrReliability: SSRStatus, error?: MediaCardError | undefined) => void;
+export declare const completeUfoExperience: (id: string, status: CardStatus, fileAttributes: FileAttributes, fileStateFlags: FileStateFlags, ssrReliability: SSRStatus, error?: MediaCardError) => void;

package/dist/types/utils/viewportDetector.d.ts

@@ -1,16 +1,6 @@
 import React from 'react';
-/**
- * As IntersectionObserver::rootMargin doesn't work within IFrames, we use an empty div + dynamic offsetTop to eagerly detect cards entering viewport.
- * Using this approach, we can lazy load cards ABS_VIEWPORT_ANCHOR_OFFSET_TOP px before they enter viewport.
- */
-export declare const ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900;
-export declare const ViewportAnchor: React.ForwardRefExoticComponent<{
-    offsetTop: number;
-} & React.RefAttributes<HTMLDivElement>>;
 export declare type ViewportDetectorProps = {
     cardEl: HTMLElement | null;
-    preAnchorRef: React.RefObject<HTMLDivElement>;
-    postAnchorRef: React.RefObject<HTMLDivElement>;
     onVisible: () => void;
 };
 export declare const ViewportDetector: React.FC<ViewportDetectorProps>;

package/example-helpers/cardViewWrapper.tsx

@@ -0,0 +1,26 @@
+/**@jsx jsx */
+import { css, jsx } from '@emotion/react';
+
+type CardViewWrapperProps = {
+  wrapperDimensions: { width: string; height: string };
+  displayInline?: boolean;
+  children?: JSX.Element;
+};
+
+const displayInlineStyles = (displayInline?: boolean) => {
+  return displayInline ? 'display: inline-block;' : '';
+};
+
+const cardWrapperStyles = ({
+  wrapperDimensions,
+  displayInline,
+}: CardViewWrapperProps) => css`
+  ${displayInlineStyles(displayInline)}
+  width: ${wrapperDimensions.width};
+  height: ${wrapperDimensions.height};
+  margin: 15px 20px;
+`;
+
+export const CardViewWrapper = (props: CardViewWrapperProps) => {
+  return <div css={cardWrapperStyles(props)}>{props.children}</div>;
+};

package/example-helpers/cards.tsx

@@ -0,0 +1,417 @@
+import React from 'react';
+
+import {
+  createStorybookMediaClientConfig,
+  imageFileId,
+  unknownFileId,
+  errorFileId,
+  videoFileId,
+  audioFileId,
+  docFileId,
+  smallImageFileId,
+  wideImageFileId,
+  largeImageFileId,
+} from '@atlaskit/media-test-helpers';
+import { FileIdentifier } from '@atlaskit/media-client';
+
+import { createApiCards, actions } from '.';
+import { CardLoading, CardError, Card } from '../src';
+
+const mediaClientConfig = createStorybookMediaClientConfig();
+// standard
+const successIdentifier: FileIdentifier = imageFileId;
+export const standardCards = [
+  {
+    title: 'Image',
+    content: (
+      <Card
+        identifier={successIdentifier}
+        mediaClientConfig={mediaClientConfig}
+        appearance="image"
+      />
+    ),
+  },
+];
+
+export const cardWithContextId = [
+  {
+    title: 'Image with parameter',
+    content: (
+      <Card
+        identifier={successIdentifier}
+        mediaClientConfig={mediaClientConfig}
+        appearance="image"
+        contextId="some-id"
+      />
+    ),
+  },
+];
+
+//error cards
+export const errorCardsDark = [
+  {
+    title: 'Image',
+    content: (
+      <Card
+        identifier={errorFileId}
+        mediaClientConfig={mediaClientConfig}
+        appearance="image"
+      />
+    ),
+  },
+];
+
+export const errorCards = [
+  {
+    title: 'Image',
+    content: (
+      <Card
+        identifier={errorFileId}
+        mediaClientConfig={mediaClientConfig}
+        appearance="image"
+      />
+    ),
+  },
+  {
+    title: 'Image with alt text',
+    content: (
+      <Card
+        identifier={errorFileId}
+        mediaClientConfig={mediaClientConfig}
+        alt="When an image fails to load, you will see the alt text value here (if present)"
+        appearance="image"
+      />
+    ),
+  },
+];
+
+export const menuCards = [
+  {
+    title: 'Image',
+    content: (
+      <Card
+        identifier={successIdentifier}
+        mediaClientConfig={mediaClientConfig}
+        appearance="image"
+        actions={actions}
+      />
+    ),
+  },
+];
+
+// api cards
+export const apiCards = createApiCards('image', successIdentifier);
+
+// no thumbnail
+export const noThumbnailCards = [
+  {
+    title: 'Image',
+    content: (
+      <Card
+        identifier={unknownFileId}
+        mediaClientConfig={mediaClientConfig}
+        appearance="image"
+      />
+    ),
+  },
+];
+
+// lazy load
+export const lazyLoadCards = [
+  {
+    title: 'Lazy',
+    content: (
+      <Card
+        isLazy={true}
+        identifier={successIdentifier}
+        mediaClientConfig={mediaClientConfig}
+        appearance="image"
+      />
+    ),
+  },
+  {
+    title: 'No lazy',
+    content: (
+      <Card
+        isLazy={false}
+        identifier={successIdentifier}
+        mediaClientConfig={mediaClientConfig}
+        appearance="image"
+      />
+    ),
+  },
+];
+
+// no hover state cards
+export const noHoverStateCards = [
+  {
+    title: 'Overlay disabled',
+    content: (
+      <Card
+        identifier={successIdentifier}
+        mediaClientConfig={mediaClientConfig}
+        appearance="image"
+        disableOverlay={true}
+      />
+    ),
+  },
+  {
+    title: 'Selected',
+    content: (
+      <Card
+        identifier={successIdentifier}
+        mediaClientConfig={mediaClientConfig}
+        appearance="image"
+        disableOverlay={true}
+        selectable={true}
+        selected={true}
+      />
+    ),
+  },
+];
+
+// collection and no collection configuration of files
+export const fileWithNoCollection: FileIdentifier = {
+  mediaItemType: 'file',
+  id: 'e84c54a4-38b2-463f-ae27-5ba043c3e4c2',
+};
+
+export const collectionConfigCards = [
+  {
+    title: 'Standalone file (NO collection)',
+    content: (
+      <Card
+        identifier={fileWithNoCollection}
+        mediaClientConfig={mediaClientConfig}
+      />
+    ),
+  },
+  {
+    title: 'File within collection',
+    content: (
+      <Card
+        identifier={successIdentifier}
+        mediaClientConfig={mediaClientConfig}
+      />
+    ),
+  },
+];
+
+const divStyle = {
+  width: '100px',
+  height: '100px',
+};
+const dimensions = { height: 50, width: 50 };
+
+export const lightDefaultCards = [
+  {
+    title: 'Medium Loading',
+    content: (
+      <div style={divStyle}>
+        <CardLoading />
+      </div>
+    ),
+  },
+  {
+    title: 'Medium Error',
+    content: (
+      <div style={divStyle}>
+        <CardError />
+      </div>
+    ),
+  },
+];
+
+export const lightResizedCards = [
+  {
+    title: 'Medium Loading',
+    content: <CardLoading dimensions={dimensions} />,
+  },
+  {
+    title: 'Medium Error',
+    content: <CardError dimensions={dimensions} />,
+  },
+];
+
+// file cards
+export const videoFileCard = (
+  <Card mediaClientConfig={mediaClientConfig} identifier={videoFileId} />
+);
+
+export const imageFileCard = (
+  <Card mediaClientConfig={mediaClientConfig} identifier={imageFileId} />
+);
+
+export const audioFileCard = (
+  <Card mediaClientConfig={mediaClientConfig} identifier={audioFileId} />
+);
+
+export const docFileCard = (
+  <Card mediaClientConfig={mediaClientConfig} identifier={docFileId} />
+);
+
+export const unknownFileCard = (
+  <Card mediaClientConfig={mediaClientConfig} identifier={unknownFileId} />
+);
+
+export const resizingDefaultCards = [
+  {
+    title: 'Small',
+    content: (
+      <Card
+        identifier={smallImageFileId}
+        mediaClientConfig={mediaClientConfig}
+      />
+    ),
+  },
+  {
+    title: 'Wide',
+    content: (
+      <Card
+        identifier={wideImageFileId}
+        mediaClientConfig={mediaClientConfig}
+      />
+    ),
+  },
+  {
+    title: 'Large',
+    content: (
+      <Card
+        identifier={largeImageFileId}
+        mediaClientConfig={mediaClientConfig}
+      />
+    ),
+  },
+];
+
+export const croppedCards = [
+  {
+    title: 'Small',
+    content: (
+      <Card
+        identifier={smallImageFileId}
+        mediaClientConfig={mediaClientConfig}
+        resizeMode="crop"
+      />
+    ),
+  },
+  {
+    title: 'Wide',
+    content: (
+      <Card
+        identifier={wideImageFileId}
+        mediaClientConfig={mediaClientConfig}
+        resizeMode="crop"
+      />
+    ),
+  },
+  {
+    title: 'Large',
+    content: (
+      <Card
+        identifier={largeImageFileId}
+        mediaClientConfig={mediaClientConfig}
+        resizeMode="crop"
+      />
+    ),
+  },
+];
+
+export const fitCards = [
+  {
+    title: 'Small',
+    content: (
+      <Card
+        identifier={smallImageFileId}
+        mediaClientConfig={mediaClientConfig}
+        resizeMode="fit"
+      />
+    ),
+  },
+  {
+    title: 'Wide',
+    content: (
+      <Card
+        identifier={wideImageFileId}
+        mediaClientConfig={mediaClientConfig}
+        resizeMode="fit"
+      />
+    ),
+  },
+  {
+    title: 'Large',
+    content: (
+      <Card
+        identifier={largeImageFileId}
+        mediaClientConfig={mediaClientConfig}
+        resizeMode="fit"
+      />
+    ),
+  },
+];
+
+export const fullFitCards = [
+  {
+    title: 'Small',
+    content: (
+      <Card
+        identifier={smallImageFileId}
+        mediaClientConfig={mediaClientConfig}
+        resizeMode="full-fit"
+      />
+    ),
+  },
+  {
+    title: 'Wide',
+    content: (
+      <Card
+        identifier={wideImageFileId}
+        mediaClientConfig={mediaClientConfig}
+        resizeMode="full-fit"
+      />
+    ),
+  },
+  {
+    title: 'Large',
+    content: (
+      <Card
+        identifier={largeImageFileId}
+        mediaClientConfig={mediaClientConfig}
+        resizeMode="full-fit"
+      />
+    ),
+  },
+];
+
+export const stretchyFitCards = [
+  {
+    title: 'Small',
+    content: (
+      <Card
+        identifier={smallImageFileId}
+        mediaClientConfig={mediaClientConfig}
+        resizeMode="stretchy-fit"
+      />
+    ),
+  },
+  {
+    title: 'Wide',
+    content: (
+      <Card
+        identifier={wideImageFileId}
+        mediaClientConfig={mediaClientConfig}
+        resizeMode="stretchy-fit"
+      />
+    ),
+  },
+  {
+    title: 'Large',
+    content: (
+      <Card
+        identifier={largeImageFileId}
+        mediaClientConfig={mediaClientConfig}
+        resizeMode="stretchy-fit"
+      />
+    ),
+  },
+];

package/example-helpers/styles.ts

@@ -0,0 +1,115 @@
+import { css } from '@emotion/react';
+
+export const editableCardOptionsStyles = css`
+  padding: 20px;
+  border-bottom: 1px solid #ccc;
+  max-width: 700px;
+`;
+
+export const sliderWrapperStyles = css`
+  display: flex;
+  width: 50%;
+
+  > * {
+    flex: 1;
+    margin: 10px;
+  }
+`;
+
+export const editableCardContentStyles = css`
+  /* Not making the wrapper fancier or center elements in order to have a more realistic scenario */
+  padding: 20px;
+  border: 2px dashed;
+  margin: 0 10px 50px 10px;
+  overflow: hidden;
+  background: antiquewhite;
+  box-sizing: border-box;
+`;
+
+export const optionsWrapperStyles = css`
+  display: flex;
+
+  > * {
+    flex: 1;
+    margin: 10px;
+  }
+`;
+
+export const cardDimensionsWrapperStyles = css`
+  margin: 10px 10px 20px 10px;
+  display: flex;
+
+  > div {
+    border: 1px solid;
+    margin: 5px;
+    padding: 5px;
+    border-radius: 3px;
+  }
+`;
+
+export const flexWrapperStyles = css`
+  display: flex;
+`;
+export const cardPreviewWrapperStyles = css`
+  flex: 1;
+`;
+
+export const cardWrapperStyles = css`
+  border: 1px solid;
+  padding: 10px;
+  margin: 5px;
+  flex-direction: column;
+  width: 310px;
+  height: 280px;
+  overflow: auto;
+  display: inline-block;
+`;
+
+export const cardFlowHeaderStyles = css`
+  margin: 20px auto;
+  padding: 10px 0;
+`;
+
+export const externalIdentifierWrapperStyles = css`
+  display: flex;
+  justify-content: space-around;
+  margin: 0 auto;
+
+  h2 {
+    margin-bottom: 10px;
+  }
+`;
+
+export const inlineCardVideoWrapperItemStyles = css`
+  padding: 10px;
+  border: 1px solid;
+  margin: 10px;
+`;
+
+export const mediaViewerExampleColumnStyles = css`
+  flex: 1;
+
+  > div {
+    width: initial;
+    height: initial;
+  }
+`;
+
+export const mediaViewerExampleWrapperStyles = css`
+  display: flex;
+`;
+
+export const mediaInlineWrapperStyles = css`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin: 100px;
+`;
+
+export const mediaInlineTableStyles = css`
+  width: 800px;
+  tr,
+  td {
+    border: 1px solid #ddd;
+  }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "73.7.0",
+  "version": "74.1.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,14 +30,14 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/dropdown-menu": "^11.2.0",
+    "@atlaskit/dropdown-menu": "^11.3.0",
     "@atlaskit/editor-shared-styles": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/media-client": "^16.0.0",
-    "@atlaskit/media-common": "^2.14.0",
+    "@atlaskit/media-client": "^17.1.0",
+    "@atlaskit/media-common": "^2.16.0",
     "@atlaskit/media-ui": "^22.1.0",
-    "@atlaskit/media-viewer": "^46.4.0",
+    "@atlaskit/media-viewer": "^47.0.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tooltip": "^17.5.0",
@@ -50,23 +50,24 @@
     "video-snapshot": "^1.0.11"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.7.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl-next": "npm:react-intl@^5.18.1",
-    "styled-components": "^3.2.6"
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@atlaskit/analytics-listeners": "^8.2.0",
-    "@atlaskit/analytics-namespaced-context": "^6.4.0",
+    "@atlaskit/analytics-listeners": "^8.3.0",
+    "@atlaskit/analytics-namespaced-context": "^6.5.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/inline-message": "^11.2.0",
+    "@atlaskit/inline-message": "^11.3.0",
     "@atlaskit/media-core": "^33.0.0",
+    "@atlaskit/media-picker": "^63.0.1",
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/radio": "^5.3.2",
     "@atlaskit/range": "^6.0.0",
-    "@atlaskit/select": "^15.3.0",
+    "@atlaskit/select": "^15.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.4.0",
     "@atlaskit/visual-regression": "*",