@atlaskit/smart-card 17.4.3 → 17.5.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 17.5.2
+
+### Patch Changes
+
+- [`0fb7e85e70a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0fb7e85e70a) - Flexible UI: Add PreviewBlock
+
+## 17.5.1
+
+### Patch Changes
+
+- [`238facb8e1a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/238facb8e1a) - Flexible UI: Add Preview element
+
+## 17.5.0
+
+### Minor Changes
+
+- [`be8dc55e85d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/be8dc55e85d) - [ux] Add Footer block
+
 ## 17.4.3
 
 ### Patch 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/index.js

@@ -59,6 +59,12 @@ Object.defineProperty(exports, "MetadataBlock", {
     return _blocks.MetadataBlock;
   }
 });
+Object.defineProperty(exports, "PreviewBlock", {
+  enumerable: true,
+  get: function get() {
+    return _blocks.PreviewBlock;
+  }
+});
 Object.defineProperty(exports, "Provider", {
   enumerable: true,
   get: function get() {

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/actions/action/index.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -25,9 +27,9 @@ var _token = require("../../../../../utils/token");
 
 var _utils2 = require("../../../../../utils");
 
-var _templateObject;
+var _templateObject, _templateObject2, _sizeToSpacing;
 
-var getWidth = function getWidth(size) {
+var getIconWidth = function getIconWidth(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
     case _constants.SmartLinkSize.Large:
@@ -41,7 +43,11 @@ var getWidth = function getWidth(size) {
 };
 
 var getIconStyles = function getIconStyles(size) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), _token.tokens.actionIcon, (0, _utils.getIconSizeStyles)(getWidth(size)));
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), _token.tokens.actionIcon, (0, _utils.getIconSizeStyles)(getIconWidth(size)));
+};
+
+var getButtonStyle = function getButtonStyle(size, iconOnly) {
+  return size === _constants.SmartLinkSize.Small ? (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        line-height: 1rem;\n        button,\n        button:hover,\n        button:focus,\n        button:active {\n          line-height: 1rem;\n          ", "\n        }\n      "])), iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          ") : '';
 };
 
 var ActionIcon = function ActionIcon(_ref) {
@@ -54,6 +60,8 @@ var ActionIcon = function ActionIcon(_ref) {
   }, icon);
 };
 
+var sizeToSpacing = (_sizeToSpacing = {}, (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Small, 'none'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Medium, 'compact'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Large, 'compact'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.XLarge, 'default'), _sizeToSpacing);
+
 var Action = function Action(_ref2) {
   var _ref2$appearance = _ref2.appearance,
       appearance = _ref2$appearance === void 0 ? 'subtle' : _ref2$appearance,
@@ -72,26 +80,29 @@ var Action = function Action(_ref2) {
     return null;
   }
 
-  var iconBefore = iconPosition === 'before' ? (0, _core.jsx)(ActionIcon, {
+  var iconBefore = icon && iconPosition === 'before' ? (0, _core.jsx)(ActionIcon, {
     size: size,
     testId: testId,
     icon: icon
   }) : undefined;
-  var iconAfter = iconPosition === 'after' ? (0, _core.jsx)(ActionIcon, {
+  var iconAfter = icon && iconPosition === 'after' ? (0, _core.jsx)(ActionIcon, {
     size: size,
     testId: testId,
     icon: icon
   }) : undefined;
+  var iconOnly = !content;
   return (0, _core.jsx)(_tooltip.default, {
     content: tooltipMessage
+  }, (0, _core.jsx)("div", {
+    css: getButtonStyle(size, iconOnly)
   }, (0, _core.jsx)(_customThemeButton.default, {
-    spacing: "none",
+    spacing: sizeToSpacing[size],
     appearance: appearance,
     testId: testId,
     onClick: (0, _utils2.handleOnClick)(onClick),
     iconBefore: iconBefore,
     iconAfter: iconAfter
-  }, content));
+  }, content)));
 };
 
 var _default = Action;

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

@@ -31,10 +31,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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 actionMappings = (0, _defineProperty2.default)({}, _constants.ActionName.DeleteAction, {
   component: _action.default,
   props: {
     testId: 'smart-action-delete-action',
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete),
     icon: /*#__PURE__*/_react.default.createElement(_cross.default, {
       label: "Delete"
     }),
@@ -91,7 +96,9 @@ var createUIAction = function createUIAction(name) {
   }
 
   return function (overrides) {
-    return /*#__PURE__*/_react.default.createElement(BaseAction, (0, _extends2.default)({}, props, overrides));
+    var combinedProps = _objectSpread(_objectSpread({}, props), overrides);
+
+    return /*#__PURE__*/_react.default.createElement(BaseAction, combinedProps);
   };
 };
 

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -25,12 +25,13 @@ var ActionGroup = function ActionGroup(_ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size;
+      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+      appearance = _ref.appearance;
   // Currently we only have delete action available, this prevents others from adding more delete actions
   var actionsToRender = items.slice(0, 1);
   return (0, _core.jsx)("div", {
     css: styles
-  }, (0, _core.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(actionsToRender, size)));
+  }, (0, _core.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(actionsToRender, size, appearance)));
 };
 
 var _default = ActionGroup;

package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _constants = require("../../../../../constants");
+
+var _block = _interopRequireDefault(require("../block"));
+
+var _elementGroup = _interopRequireDefault(require("../element-group"));
+
+var _elements = require("../../elements");
+
+var _actionGroup = _interopRequireDefault(require("../action-group"));
+
+var FooterBlock = function FooterBlock(props) {
+  var status = props.status,
+      actions = props.actions,
+      _props$testId = props.testId,
+      testId = _props$testId === void 0 ? 'smart-footer-block' : _props$testId;
+
+  if (status !== _constants.SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, props, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/_react.default.createElement(_elements.Provider, {
+    testId: "".concat(testId, "-provider")
+  }), actions && actions.length > 0 ? /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    testId: "smart-element-group-actions",
+    align: _constants.SmartLinkAlignment.Right,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible
+  }, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
+    items: actions,
+    appearance: "default"
+  })) : null);
+};
+
+var _default = FooterBlock;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/types.js

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

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

@@ -5,12 +5,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "FooterBlock", {
+  enumerable: true,
+  get: function get() {
+    return _footerBlock.default;
+  }
+});
 Object.defineProperty(exports, "MetadataBlock", {
   enumerable: true,
   get: function get() {
     return _metadataBlock.default;
   }
 });
+Object.defineProperty(exports, "PreviewBlock", {
+  enumerable: true,
+  get: function get() {
+    return _previewBlock.default;
+  }
+});
 Object.defineProperty(exports, "SnippetBlock", {
   enumerable: true,
   get: function get() {
@@ -24,8 +36,12 @@ Object.defineProperty(exports, "TitleBlock", {
   }
 });
 
+var _footerBlock = _interopRequireDefault(require("./footer-block"));
+
 var _metadataBlock = _interopRequireDefault(require("./metadata-block"));
 
+var _previewBlock = _interopRequireDefault(require("./preview-block"));
+
 var _snippetBlock = _interopRequireDefault(require("./snippet-block"));
 
 var _titleBlock = _interopRequireDefault(require("./title-block"));

package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _constants = require("../../../../../constants");
+
+var _block = _interopRequireDefault(require("../block"));
+
+var _elements = require("../../elements");
+
+var _excluded = ["status", "testId"];
+
+var PreviewBlock = function PreviewBlock(_ref) {
+  var _ref$status = _ref.status,
+      status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-preview' : _ref$testId,
+      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  if (status !== _constants.SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/_react.default.createElement(_elements.Preview, null));
+};
+
+var _default = PreviewBlock;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/types.js

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

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

@@ -36,7 +36,7 @@ var _actionGroup = _interopRequireDefault(require("./action-group"));
 var _elementGroup = _interopRequireDefault(require("./element-group"));
 
 var _excluded = ["name"],
-    _excluded2 = ["name"];
+    _excluded2 = ["name", "hideContent", "hideIcon", "onClick"];
 
 var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3;
 
@@ -44,7 +44,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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.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) {
@@ -148,16 +152,32 @@ exports.renderElementItems = renderElementItems;
 var renderActionItems = function renderActionItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.SmartLinkSize.Medium;
+  var appearance = arguments.length > 2 ? arguments[2] : undefined;
   var actions = items.reduce(function (acc, curr, idx) {
     var name = curr.name,
+        hideContent = curr.hideContent,
+        hideIcon = curr.hideIcon,
+        onClick = curr.onClick,
         props = (0, _objectWithoutProperties2.default)(curr, _excluded2);
     var Action = Actions[name];
 
+    var actionProps = _objectSpread({}, props);
+
+    if (hideContent) {
+      actionProps.content = '';
+    }
+
+    if (hideIcon) {
+      actionProps.icon = undefined;
+    }
+
     if (Action) {
       return [].concat((0, _toConsumableArray2.default)(acc), [/*#__PURE__*/_react.default.createElement(Action, (0, _extends2.default)({
         size: size,
-        key: idx
-      }, props))]);
+        key: idx,
+        appearance: appearance,
+        onClick: onClick
+      }, actionProps))]);
     }
 
     return acc;

package/dist/cjs/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -300,7 +300,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
     case _constants.IconType.Jira:
       // Logo component has a different prop set from other icon components
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
-        "data-testId": testId // Confluence and Jira imports don't have native testId prop
+        "data-testid": testId // Confluence and Jira imports don't have native testId prop
         ,
         textColor: _colors.N700,
         iconColor: _colors.B200,

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

@@ -13,4 +13,4 @@ export { contentFooterClassName, metadataListClassName, blockCardResolvingViewCl
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback'; // Flexible UI
 
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
-export { MetadataBlock, SnippetBlock, TitleBlock } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from './view/FlexibleCard/components/blocks';

package/dist/es2019/version.json

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