@atlaskit/media-card 73.6.0 → 74.0.0

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

@@ -3,5 +3,5 @@ import { FileAttributes } from '@atlaskit/media-common';
 import { SSRStatus } from './analytics';
 import { MediaCardError } from '../errors';
 import { FileStateFlags } from '../types';
-export declare const startUfoExperience: (id: string, featureFlagsKeys: string[]) => void;
-export declare const completeUfoExperience: (id: string, status: CardStatus, fileAttributes: FileAttributes, fileStateFlags: FileStateFlags, ssrReliability: SSRStatus, featureFlagsKeys: string[], error?: MediaCardError | undefined) => void;
+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;

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/index.tsx

@@ -6,19 +6,21 @@ import {
   createPollingMaxAttemptsError,
   createRateLimitedError,
   createStorybookMediaClientConfig,
+  enableMediaUfoLogger,
   FeatureFlagsWrapper,
 } from '@atlaskit/media-test-helpers';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import FabricAnalyticsListeners, {
   AnalyticsWebClient,
 } from '@atlaskit/analytics-listeners';
+import { payloadPublisher } from '@atlassian/ufo';
 
 import AnnotateIcon from '@atlaskit/icon/glyph/media-services/annotate';
 import { SelectableCard } from './selectableCard';
 import { Card, CardAppearance, CardEvent, CardAction } from '../src';
-import { getRelevantFeatureFlagNames } from '../src/root/card/cardAnalytics';
 import { MediaCardError } from '../src/errors';
 import DevelopmentUseMessage from './developmentUseMessage';
+import { LOGGED_FEATURE_FLAGS } from '../src/utils/analytics';
 
 const mediaClientConfig = createStorybookMediaClientConfig();
 
@@ -126,19 +128,28 @@ export const wrongCollection = 'adfasdf';
 
 export type MainWrapperProps = {
   developmentOnly?: boolean;
+  disableFeatureFlagWrapper?: boolean;
 };
 
 export const MainWrapper: React.FC<MainWrapperProps> = ({
   children,
   developmentOnly,
-}) => (
-  <>
-    {developmentOnly && <DevelopmentUseMessage />}
-    <FeatureFlagsWrapper filterFlags={getRelevantFeatureFlagNames()}>
-      {children}
-    </FeatureFlagsWrapper>
-  </>
-);
+  disableFeatureFlagWrapper = false,
+}) => {
+  enableMediaUfoLogger(payloadPublisher);
+  return (
+    <>
+      {developmentOnly && <DevelopmentUseMessage />}
+      {!disableFeatureFlagWrapper ? (
+        <FeatureFlagsWrapper filterFlags={LOGGED_FEATURE_FLAGS}>
+          {children}
+        </FeatureFlagsWrapper>
+      ) : (
+        <>{children}</>
+      )}
+    </>
+  );
+};
 
 export const mediaCardErrorState = (
   error?: string,

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.6.0",
+  "version": "74.0.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.1.0",
+    "@atlaskit/dropdown-menu": "^11.2.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.13.0",
-    "@atlaskit/media-ui": "^22.0.0",
-    "@atlaskit/media-viewer": "^46.3.0",
+    "@atlaskit/media-client": "^17.1.0",
+    "@atlaskit/media-common": "^2.15.0",
+    "@atlaskit/media-ui": "^22.1.0",
+    "@atlaskit/media-viewer": "^47.0.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tooltip": "^17.5.0",
@@ -50,14 +50,14 @@
     "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": "*",
@@ -66,7 +66,7 @@
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/radio": "^5.3.2",
     "@atlaskit/range": "^6.0.0",
-    "@atlaskit/select": "^15.2.1",
+    "@atlaskit/select": "^15.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.4.0",
     "@atlaskit/visual-regression": "*",