@atlaskit/smart-card 17.5.0 → 17.5.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 17.5.1
+
+### Patch Changes
+
+- [`238facb8e1a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/238facb8e1a) - Flexible UI: Add Preview element
+
 ## 17.5.0
 
 ### Minor Changes

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SmartLinkWidth = exports.SmartLinkTheme = exports.SmartLinkStatus = exports.SmartLinkSize = exports.SmartLinkPosition = exports.SmartLinkDirection = exports.SmartLinkAlignment = exports.IconType = exports.ElementName = exports.ActionName = void 0;
+exports.SmartLinkWidth = exports.SmartLinkTheme = exports.SmartLinkStatus = exports.SmartLinkSize = exports.SmartLinkPosition = exports.SmartLinkDirection = exports.SmartLinkAlignment = exports.MediaType = exports.IconType = exports.ElementName = exports.ActionName = void 0;
 
 /**
  * The alignment of Flexible UI component.
@@ -137,6 +137,7 @@ exports.ElementName = ElementName;
   ElementName["LinkIcon"] = "LinkIcon";
   ElementName["ModifiedBy"] = "ModifiedBy";
   ElementName["ModifiedOn"] = "ModifiedOn";
+  ElementName["Preview"] = "Preview";
   ElementName["Priority"] = "Priority";
   ElementName["ProgrammingLanguage"] = "ProgrammingLanguage";
   ElementName["Snippet"] = "Snippet";
@@ -158,6 +159,10 @@ exports.ActionName = ActionName;
 })(ActionName || (exports.ActionName = ActionName = {}));
 
 var IconType;
+/**
+ * Type for Flexible UI's Media element
+ */
+
 exports.IconType = IconType;
 
 (function (IconType) {
@@ -218,4 +223,11 @@ exports.IconType = IconType;
   IconType["PriorityUndefined"] = "Badge:PriorityUndefined";
   IconType["ProgrammingLanguage"] = "Badge:ProgrammingLanguage";
   IconType["Subscriber"] = "Badge:Subscriber";
-})(IconType || (exports.IconType = IconType = {}));
+})(IconType || (exports.IconType = IconType = {}));
+
+var MediaType;
+exports.MediaType = MediaType;
+
+(function (MediaType) {
+  MediaType["Image"] = "image";
+})(MediaType || (exports.MediaType = MediaType = {}));

package/dist/cjs/extractors/flexible/extract-preview.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _preview = require("../common/preview");
+
+var _constants = require("../../constants");
+
+var extractPreview = function extractPreview(data) {
+  var url = (0, _preview.extractImage)(data);
+  return url ? {
+    type: _constants.MediaType.Image,
+    url: url
+  } : undefined;
+};
+
+var _default = extractPreview;
+exports.default = _default;

package/dist/cjs/extractors/flexible/index.js

@@ -27,6 +27,8 @@ var _extractPriority = _interopRequireDefault(require("./extract-priority"));
 
 var _extractProviderIcon = _interopRequireDefault(require("./icon/extract-provider-icon"));
 
+var _extractPreview = _interopRequireDefault(require("./extract-preview"));
+
 var extractFlexibleUiContext = function extractFlexibleUiContext(response, renderers) {
   if (!response) {
     return undefined;
@@ -43,6 +45,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     linkIcon: (0, _icon.extractLinkIcon)(response, renderers),
     modifiedBy: (0, _utils.extractModifiedBy)(data),
     modifiedOn: (0, _extractDateUpdated.extractDateUpdated)(data),
+    preview: (0, _extractPreview.default)(data),
     priority: (0, _extractPriority.default)(data),
     programmingLanguage: (0, _utils.extractProgrammingLanguage)(data),
     snippet: (0, _primitives.extractSummary)(data) || undefined,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.5.0",
+	"version": "17.5.1",
 	"sideEffects": false
 }

package/dist/cjs/view/FlexibleCard/components/blocks/utils.js

@@ -48,7 +48,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), _ElementDisplaySchema);
+var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), _ElementDisplaySchema);
 exports.ElementDisplaySchema = ElementDisplaySchema;
 
 var getDirectionStyles = function getDirectionStyles(direction) {

package/dist/cjs/view/FlexibleCard/components/elements/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title = exports.SubscriberCount = exports.State = exports.Snippet = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
+exports.Title = exports.SubscriberCount = exports.State = exports.Snippet = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
 
 var _utils = require("./utils");
 
@@ -28,6 +28,8 @@ var ModifiedBy = (0, _utils.createElement)(_constants.ElementName.ModifiedBy);
 exports.ModifiedBy = ModifiedBy;
 var ModifiedOn = (0, _utils.createElement)(_constants.ElementName.ModifiedOn);
 exports.ModifiedOn = ModifiedOn;
+var Preview = (0, _utils.createElement)(_constants.ElementName.Preview);
+exports.Preview = Preview;
 var Priority = (0, _utils.createElement)(_constants.ElementName.Priority);
 exports.Priority = Priority;
 var ProgrammingLanguage = (0, _utils.createElement)(_constants.ElementName.ProgrammingLanguage);

package/dist/cjs/view/FlexibleCard/components/elements/media/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
+
+var _templateObject;
+
+var styles = function styles(url) {
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  > img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n"])));
+};
+
+var Media = function Media(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
+      type = _ref.type,
+      url = _ref.url;
+
+  if (!type || !url) {
+    return null;
+  }
+
+  return (0, _core.jsx)("div", {
+    css: styles(url),
+    "data-smart-element-media": true,
+    "data-testid": testId
+  }, (0, _core.jsx)(_imageIcon.default, {
+    testId: "".concat(testId, "-image"),
+    url: url
+  }));
+};
+
+var _default = Media;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/elements/media/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/FlexibleCard/components/elements/utils.js

@@ -29,6 +29,8 @@ var _badge = _interopRequireDefault(require("./badge"));
 
 var _avatarGroup = _interopRequireDefault(require("./avatar-group"));
 
+var _media = _interopRequireDefault(require("./media"));
+
 var _text = _interopRequireDefault(require("./text"));
 
 var _messages = require("../../../../messages");
@@ -59,6 +61,8 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   component: _icon.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.ModifiedBy, {
   component: _text.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Preview, {
+  component: _media.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Priority, {
   component: _badge.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.ProgrammingLanguage, {

package/dist/es2019/constants.js

@@ -114,6 +114,7 @@ export let ElementName;
   ElementName["LinkIcon"] = "LinkIcon";
   ElementName["ModifiedBy"] = "ModifiedBy";
   ElementName["ModifiedOn"] = "ModifiedOn";
+  ElementName["Preview"] = "Preview";
   ElementName["Priority"] = "Priority";
   ElementName["ProgrammingLanguage"] = "ProgrammingLanguage";
   ElementName["Snippet"] = "Snippet";
@@ -133,6 +134,9 @@ export let ActionName;
 })(ActionName || (ActionName = {}));
 
 export let IconType;
+/**
+ * Type for Flexible UI's Media element
+ */
 
 (function (IconType) {
   IconType["Archive"] = "FileType:Archive";
@@ -192,4 +196,10 @@ export let IconType;
   IconType["PriorityUndefined"] = "Badge:PriorityUndefined";
   IconType["ProgrammingLanguage"] = "Badge:ProgrammingLanguage";
   IconType["Subscriber"] = "Badge:Subscriber";
-})(IconType || (IconType = {}));
+})(IconType || (IconType = {}));
+
+export let MediaType;
+
+(function (MediaType) {
+  MediaType["Image"] = "image";
+})(MediaType || (MediaType = {}));

package/dist/es2019/extractors/flexible/extract-preview.js

@@ -0,0 +1,12 @@
+import { extractImage } from '../common/preview';
+import { MediaType } from '../../constants';
+
+const extractPreview = data => {
+  const url = extractImage(data);
+  return url ? {
+    type: MediaType.Image,
+    url
+  } : undefined;
+};
+
+export default extractPreview;

package/dist/es2019/extractors/flexible/index.js

@@ -8,6 +8,7 @@ import { extractDateUpdated } from '../common/date/extractDateUpdated';
 import { extractDateCreated } from '../common/date/extractDateCreated';
 import extractPriority from './extract-priority';
 import extractProviderIcon from './icon/extract-provider-icon';
+import extractPreview from './extract-preview';
 
 const extractFlexibleUiContext = (response, renderers) => {
   if (!response) {
@@ -25,6 +26,7 @@ const extractFlexibleUiContext = (response, renderers) => {
     linkIcon: extractLinkIcon(response, renderers),
     modifiedBy: extractModifiedBy(data),
     modifiedOn: extractDateUpdated(data),
+    preview: extractPreview(data),
     priority: extractPriority(data),
     programmingLanguage: extractProgrammingLanguage(data),
     snippet: extractSummary(data) || undefined,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.5.0",
+	"version": "17.5.1",
 	"sideEffects": false
 }

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -16,6 +16,7 @@ export const ElementDisplaySchema = {
   [ElementName.LinkIcon]: ['inline'],
   [ElementName.ModifiedBy]: ['inline'],
   [ElementName.ModifiedOn]: ['inline'],
+  [ElementName.Preview]: ['block'],
   [ElementName.Priority]: ['inline'],
   [ElementName.ProgrammingLanguage]: ['inline'],
   [ElementName.Snippet]: ['block'],

package/dist/es2019/view/FlexibleCard/components/elements/index.js

@@ -11,6 +11,7 @@ export const CreatedOn = createElement(ElementName.CreatedOn);
 export const LinkIcon = createElement(ElementName.LinkIcon);
 export const ModifiedBy = createElement(ElementName.ModifiedBy);
 export const ModifiedOn = createElement(ElementName.ModifiedOn);
+export const Preview = createElement(ElementName.Preview);
 export const Priority = createElement(ElementName.Priority);
 export const ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
 export const Snippet = createElement(ElementName.Snippet);

package/dist/es2019/view/FlexibleCard/components/elements/media/index.js

@@ -0,0 +1,35 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import ImageIcon from '../../common/image-icon';
+
+const styles = url => css`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  > img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+`;
+
+const Media = ({
+  testId = 'smart-element-media',
+  type,
+  url
+}) => {
+  if (!type || !url) {
+    return null;
+  }
+
+  return jsx("div", {
+    css: styles(url),
+    "data-smart-element-media": true,
+    "data-testid": testId
+  }, jsx(ImageIcon, {
+    testId: `${testId}-image`,
+    url: url
+  }));
+};
+
+export default Media;

package/dist/es2019/view/FlexibleCard/components/elements/media/types.js

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

package/dist/es2019/view/FlexibleCard/components/elements/utils.js

@@ -7,6 +7,7 @@ import Lozenge from './lozenge';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import Badge from './badge';
 import AvatarGroup from './avatar-group';
+import Media from './media';
 import Text from './text';
 import { messages } from '../../../../messages';
 import DateTime from './date-time';
@@ -34,6 +35,9 @@ const elementMappings = {
   [ElementName.ModifiedBy]: {
     component: Text
   },
+  [ElementName.Preview]: {
+    component: Media
+  },
   [ElementName.Priority]: {
     component: Badge
   },

package/dist/esm/constants.js

@@ -114,6 +114,7 @@ export var ElementName;
   ElementName["LinkIcon"] = "LinkIcon";
   ElementName["ModifiedBy"] = "ModifiedBy";
   ElementName["ModifiedOn"] = "ModifiedOn";
+  ElementName["Preview"] = "Preview";
   ElementName["Priority"] = "Priority";
   ElementName["ProgrammingLanguage"] = "ProgrammingLanguage";
   ElementName["Snippet"] = "Snippet";
@@ -133,6 +134,9 @@ export var ActionName;
 })(ActionName || (ActionName = {}));
 
 export var IconType;
+/**
+ * Type for Flexible UI's Media element
+ */
 
 (function (IconType) {
   IconType["Archive"] = "FileType:Archive";
@@ -192,4 +196,10 @@ export var IconType;
   IconType["PriorityUndefined"] = "Badge:PriorityUndefined";
   IconType["ProgrammingLanguage"] = "Badge:ProgrammingLanguage";
   IconType["Subscriber"] = "Badge:Subscriber";
-})(IconType || (IconType = {}));
+})(IconType || (IconType = {}));
+
+export var MediaType;
+
+(function (MediaType) {
+  MediaType["Image"] = "image";
+})(MediaType || (MediaType = {}));

package/dist/esm/extractors/flexible/extract-preview.js

@@ -0,0 +1,12 @@
+import { extractImage } from '../common/preview';
+import { MediaType } from '../../constants';
+
+var extractPreview = function extractPreview(data) {
+  var url = extractImage(data);
+  return url ? {
+    type: MediaType.Image,
+    url: url
+  } : undefined;
+};
+
+export default extractPreview;

package/dist/esm/extractors/flexible/index.js

@@ -8,6 +8,7 @@ import { extractDateUpdated } from '../common/date/extractDateUpdated';
 import { extractDateCreated } from '../common/date/extractDateCreated';
 import extractPriority from './extract-priority';
 import extractProviderIcon from './icon/extract-provider-icon';
+import extractPreview from './extract-preview';
 
 var extractFlexibleUiContext = function extractFlexibleUiContext(response, renderers) {
   if (!response) {
@@ -25,6 +26,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     linkIcon: extractLinkIcon(response, renderers),
     modifiedBy: extractModifiedBy(data),
     modifiedOn: extractDateUpdated(data),
+    preview: extractPreview(data),
     priority: extractPriority(data),
     programmingLanguage: extractProgrammingLanguage(data),
     snippet: extractSummary(data) || undefined,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.5.0",
+	"version": "17.5.1",
 	"sideEffects": false
 }

package/dist/esm/view/FlexibleCard/components/blocks/utils.js

@@ -20,7 +20,7 @@ import * as Actions from '../actions';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
 import ElementGroup from './element-group';
-export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _ElementDisplaySchema);
+export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _ElementDisplaySchema);
 
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {

package/dist/esm/view/FlexibleCard/components/elements/index.js

@@ -11,6 +11,7 @@ export var CreatedOn = createElement(ElementName.CreatedOn);
 export var LinkIcon = createElement(ElementName.LinkIcon);
 export var ModifiedBy = createElement(ElementName.ModifiedBy);
 export var ModifiedOn = createElement(ElementName.ModifiedOn);
+export var Preview = createElement(ElementName.Preview);
 export var Priority = createElement(ElementName.Priority);
 export var ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
 export var Snippet = createElement(ElementName.Snippet);

package/dist/esm/view/FlexibleCard/components/elements/media/index.js

@@ -0,0 +1,34 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import ImageIcon from '../../common/image-icon';
+
+var styles = function styles(url) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  > img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n"])));
+};
+
+var Media = function Media(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
+      type = _ref.type,
+      url = _ref.url;
+
+  if (!type || !url) {
+    return null;
+  }
+
+  return jsx("div", {
+    css: styles(url),
+    "data-smart-element-media": true,
+    "data-testid": testId
+  }, jsx(ImageIcon, {
+    testId: "".concat(testId, "-image"),
+    url: url
+  }));
+};
+
+export default Media;

package/dist/esm/view/FlexibleCard/components/elements/media/types.js

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

package/dist/esm/view/FlexibleCard/components/elements/utils.js

@@ -11,6 +11,7 @@ import Lozenge from './lozenge';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import Badge from './badge';
 import AvatarGroup from './avatar-group';
+import Media from './media';
 import Text from './text';
 import { messages } from '../../../../messages';
 import DateTime from './date-time';
@@ -31,6 +32,8 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   component: Icon
 }), _defineProperty(_elementMappings, ElementName.ModifiedBy, {
   component: Text
+}), _defineProperty(_elementMappings, ElementName.Preview, {
+  component: Media
 }), _defineProperty(_elementMappings, ElementName.Priority, {
   component: Badge
 }), _defineProperty(_elementMappings, ElementName.ProgrammingLanguage, {

package/dist/types/constants.d.ts

@@ -88,6 +88,7 @@ export declare enum ElementName {
     LinkIcon = "LinkIcon",
     ModifiedBy = "ModifiedBy",
     ModifiedOn = "ModifiedOn",
+    Preview = "Preview",
     Priority = "Priority",
     ProgrammingLanguage = "ProgrammingLanguage",
     Snippet = "Snippet",
@@ -164,3 +165,9 @@ export declare enum IconType {
     ProgrammingLanguage = "Badge:ProgrammingLanguage",
     Subscriber = "Badge:Subscriber"
 }
+/**
+ * Type for Flexible UI's Media element
+ */
+export declare enum MediaType {
+    Image = "image"
+}

package/dist/types/extractors/flexible/extract-preview.d.ts

@@ -0,0 +1,4 @@
+import { JsonLd } from 'json-ld-types';
+import { Media } from '../../state/flexible-ui-context/types';
+declare const extractPreview: (data: JsonLd.Data.BaseData) => Media | undefined;
+export default extractPreview;

package/dist/types/state/flexible-ui-context/types.d.ts

@@ -1,6 +1,6 @@
 import { LinkLozenge } from '../../extractors/common/lozenge/types';
 import { LinkPerson } from '../../extractors/common/person/types';
-import { IconType } from '../../constants';
+import { IconType, MediaType } from '../../constants';
 export declare type FlexibleUiDataContext = {
     authorGroup?: LinkPerson[];
     collaboratorGroup?: LinkPerson[];
@@ -10,6 +10,7 @@ export declare type FlexibleUiDataContext = {
     linkIcon?: Icon;
     modifiedBy?: string;
     modifiedOn?: string;
+    preview?: Media;
     priority?: Icon;
     programmingLanguage?: string;
     snippet?: string;
@@ -24,3 +25,7 @@ export declare type Icon = {
     label?: string;
     url?: string;
 };
+export declare type Media = {
+    type: MediaType;
+    url: string;
+};

package/dist/types/view/FlexibleCard/components/elements/index.d.ts

@@ -6,6 +6,7 @@ import { LozengeProps } from './lozenge/types';
 import { AvatarGroupProps } from './avatar-group/types';
 import { TextProps } from './text/types';
 import { DateTimeProps } from './date-time/types';
+import { MediaProps } from './media/types';
 export declare const AuthorGroup: import("react").FC<AvatarGroupProps>;
 export declare const CollaboratorGroup: import("react").FC<AvatarGroupProps>;
 export declare const CommentCount: import("react").FC<BadgeProps>;
@@ -14,6 +15,7 @@ export declare const CreatedOn: import("react").FC<DateTimeProps>;
 export declare const LinkIcon: import("react").FC<IconProps>;
 export declare const ModifiedBy: import("react").FC<TextProps>;
 export declare const ModifiedOn: import("react").FC<DateTimeProps>;
+export declare const Preview: import("react").FC<MediaProps>;
 export declare const Priority: import("react").FC<BadgeProps>;
 export declare const ProgrammingLanguage: import("react").FC<BadgeProps>;
 export declare const Snippet: import("react").FC<TextProps>;

package/dist/types/view/FlexibleCard/components/elements/media/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { MediaProps } from './types';
+declare const Media: React.FC<MediaProps>;
+export default Media;

package/dist/types/view/FlexibleCard/components/elements/media/types.d.ts

@@ -0,0 +1,6 @@
+import { ElementProps } from '../types';
+import { MediaType } from '../../../../../constants';
+export declare type MediaProps = ElementProps & {
+    type?: MediaType;
+    url?: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "17.5.0",
+  "version": "17.5.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"