@atlaskit/smart-card 17.4.2 → 17.5.1

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

@@ -8,7 +8,7 @@ import { getIconSizeStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 import { handleOnClick } from '../../../../../utils';
 
-const getWidth = size => {
+const getIconWidth = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Large:
@@ -23,9 +23,27 @@ const getWidth = size => {
 
 const getIconStyles = size => css`
   color: ${tokens.actionIcon};
-  ${getIconSizeStyles(getWidth(size))};
+  ${getIconSizeStyles(getIconWidth(size))};
 `;
 
+const getButtonStyle = (size, iconOnly) => size === SmartLinkSize.Small ? css`
+        font-size: 0.75rem;
+        font-weight: 500;
+        line-height: 1rem;
+        button,
+        button:hover,
+        button:focus,
+        button:active {
+          line-height: 1rem;
+          ${iconOnly ? `
+            padding: 0.125rem;
+          ` : `
+            padding-left: 0.25rem;
+            padding-right: 0.25rem;
+          `}
+        }
+      ` : '';
+
 const ActionIcon = ({
   size,
   testId,
@@ -35,6 +53,13 @@ const ActionIcon = ({
   "data-testid": `${testId}-icon`
 }, icon);
 
+const sizeToSpacing = {
+  [SmartLinkSize.Small]: 'none',
+  [SmartLinkSize.Medium]: 'compact',
+  [SmartLinkSize.Large]: 'compact',
+  [SmartLinkSize.XLarge]: 'default'
+};
+
 const Action = ({
   appearance = 'subtle',
   content,
@@ -49,26 +74,29 @@ const Action = ({
     return null;
   }
 
-  const iconBefore = iconPosition === 'before' ? jsx(ActionIcon, {
+  const iconBefore = icon && iconPosition === 'before' ? jsx(ActionIcon, {
     size: size,
     testId: testId,
     icon: icon
   }) : undefined;
-  const iconAfter = iconPosition === 'after' ? jsx(ActionIcon, {
+  const iconAfter = icon && iconPosition === 'after' ? jsx(ActionIcon, {
     size: size,
     testId: testId,
     icon: icon
   }) : undefined;
+  const iconOnly = !content;
   return jsx(Tooltip, {
     content: tooltipMessage
+  }, jsx("div", {
+    css: getButtonStyle(size, iconOnly)
   }, jsx(Button, {
-    spacing: "none",
+    spacing: sizeToSpacing[size],
     appearance: appearance,
     testId: testId,
     onClick: handleOnClick(onClick),
     iconBefore: iconBefore,
     iconAfter: iconAfter
-  }, content));
+  }, content)));
 };
 
 export default Action;

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

@@ -11,6 +11,7 @@ const actionMappings = {
     component: Action,
     props: {
       testId: 'smart-action-delete-action',
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete),
       icon: /*#__PURE__*/React.createElement(CrossIcon, {
         label: "Delete"
       }),
@@ -66,6 +67,9 @@ export const createUIAction = name => {
   }
 
   return overrides => {
-    return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, overrides));
+    const combinedProps = { ...props,
+      ...overrides
+    };
+    return /*#__PURE__*/React.createElement(BaseAction, combinedProps);
   };
 };

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

@@ -10,13 +10,14 @@ const styles = css`
 
 const ActionGroup = ({
   items = [],
-  size = SmartLinkSize.Medium
+  size = SmartLinkSize.Medium,
+  appearance
 }) => {
   // Currently we only have delete action available, this prevents others from adding more delete actions
   const actionsToRender = items.slice(0, 1);
   return jsx("div", {
     css: styles
-  }, jsx(ButtonGroup, null, renderActionItems(actionsToRender, size)));
+  }, jsx(ButtonGroup, null, renderActionItems(actionsToRender, size, appearance)));
 };
 
 export default ActionGroup;

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

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import Block from '../block';
+import ElementGroup from '../element-group';
+import { Provider } from '../../elements';
+import ActionGroup from '../action-group';
+
+const FooterBlock = props => {
+  const {
+    status,
+    actions,
+    testId = 'smart-footer-block'
+  } = props;
+
+  if (status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
+    testId: `${testId}-resolved-view`
+  }), /*#__PURE__*/React.createElement(Provider, {
+    testId: `${testId}-provider`
+  }), actions && actions.length > 0 ? /*#__PURE__*/React.createElement(ElementGroup, {
+    testId: "smart-element-group-actions",
+    align: SmartLinkAlignment.Right,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    appearance: "default"
+  })) : null);
+};
+
+export default FooterBlock;

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

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

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

@@ -1,3 +1,4 @@
+export { default as FooterBlock } from './footer-block';
 export { default as MetadataBlock } from './metadata-block';
 export { default as SnippetBlock } from './snippet-block';
 export { default as TitleBlock } from './title-block';

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

@@ -6,8 +6,7 @@ import * as Elements from '../elements';
 import * as Actions from '../actions';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
-import ElementGroup from './element-group'; // Determine whether the element can be display as inline/block.
-
+import ElementGroup from './element-group';
 export const ElementDisplaySchema = {
   [ElementName.AuthorGroup]: ['inline'],
   [ElementName.CollaboratorGroup]: ['inline'],
@@ -17,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'],
@@ -130,19 +130,34 @@ export const renderElementItems = (items = [], display = 'inline') => {
     return elements;
   }
 };
-export const renderActionItems = (items = [], size = SmartLinkSize.Medium) => {
+export const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance) => {
   const actions = items.reduce((acc, curr, idx) => {
     const {
       name,
+      hideContent,
+      hideIcon,
+      onClick,
       ...props
     } = curr;
     const Action = Actions[name];
+    const actionProps = { ...props
+    };
+
+    if (hideContent) {
+      actionProps.content = '';
+    }
+
+    if (hideIcon) {
+      actionProps.icon = undefined;
+    }
 
     if (Action) {
       return [...acc, /*#__PURE__*/React.createElement(Action, _extends({
         size: size,
-        key: idx
-      }, props))];
+        key: idx,
+        appearance: appearance,
+        onClick: onClick
+      }, actionProps))];
     }
 
     return acc;

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

@@ -217,7 +217,7 @@ const AtlaskitIcon = ({
     case IconType.Jira:
       // Logo component has a different prop set from other icon components
       return /*#__PURE__*/React.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: N700,
         iconColor: B200,

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/utils/token.js

@@ -1,24 +1,16 @@
-import { token } from '@atlaskit/tokens'; // Temporary safeguard while @atlaskit/tokens is being developed
-
-export var safeToken = function safeToken(path, fallback) {
-  try {
-    return token(path, fallback);
-  } catch (e) {
-    return fallback;
-  }
-};
+import { token } from '@atlaskit/tokens';
 export var tokens = {
-  actionIcon: safeToken('color.icon', '#44546F'),
-  background: safeToken('elevation.surface', '#FFFFFF'),
-  badgeIcon: safeToken('color.icon.subtle', '#626F86'),
-  badgeText: safeToken('color.text.subtlest', '#626F86'),
-  blackLink: safeToken('color.text.subtle', '#44546F'),
-  blackLinkPressed: safeToken('color.text', '#172B4D'),
-  blueLink: safeToken('color.link', '#0C66E4'),
-  blueLinkPressed: safeToken('color.link.pressed', '#0055CC'),
-  elevation: safeToken('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
-  errorMessage: safeToken('color.text.disabled', '#6B778C'),
-  errorMessageHover: safeToken('color.text.subtle', '#8993A4'),
-  snippet: safeToken('color.text', '#172B4D'),
-  text: safeToken('color.text.subtlest', '#626F86')
+  actionIcon: token('color.icon', '#44546F'),
+  background: token('elevation.surface', '#FFFFFF'),
+  badgeIcon: token('color.icon.subtle', '#626F86'),
+  badgeText: token('color.text.subtlest', '#626F86'),
+  blackLink: token('color.text.subtle', '#44546F'),
+  blackLinkPressed: token('color.text', '#172B4D'),
+  blueLink: token('color.link', '#0C66E4'),
+  blueLinkPressed: token('color.link.pressed', '#0055CC'),
+  elevation: token('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
+  errorMessage: token('color.text.disabled', '#6B778C'),
+  errorMessageHover: token('color.text.subtle', '#8993A4'),
+  snippet: token('color.text', '#172B4D'),
+  text: token('color.text.subtlest', '#626F86')
 };

package/dist/esm/version.json

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

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

@@ -1,6 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2, _sizeToSpacing;
 
 /** @jsx jsx */
 import React from 'react';
@@ -12,7 +13,7 @@ import { getIconSizeStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 import { handleOnClick } from '../../../../../utils';
 
-var getWidth = function getWidth(size) {
+var getIconWidth = function getIconWidth(size) {
   switch (size) {
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Large:
@@ -26,7 +27,11 @@ var getWidth = function getWidth(size) {
 };
 
 var getIconStyles = function getIconStyles(size) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n"])), tokens.actionIcon, getIconSizeStyles(getWidth(size)));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n"])), tokens.actionIcon, getIconSizeStyles(getIconWidth(size)));
+};
+
+var getButtonStyle = function getButtonStyle(size, iconOnly) {
+  return size === SmartLinkSize.Small ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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) {
@@ -39,6 +44,8 @@ var ActionIcon = function ActionIcon(_ref) {
   }, icon);
 };
 
+var sizeToSpacing = (_sizeToSpacing = {}, _defineProperty(_sizeToSpacing, SmartLinkSize.Small, 'none'), _defineProperty(_sizeToSpacing, SmartLinkSize.Medium, 'compact'), _defineProperty(_sizeToSpacing, SmartLinkSize.Large, 'compact'), _defineProperty(_sizeToSpacing, SmartLinkSize.XLarge, 'default'), _sizeToSpacing);
+
 var Action = function Action(_ref2) {
   var _ref2$appearance = _ref2.appearance,
       appearance = _ref2$appearance === void 0 ? 'subtle' : _ref2$appearance,
@@ -57,26 +64,29 @@ var Action = function Action(_ref2) {
     return null;
   }
 
-  var iconBefore = iconPosition === 'before' ? jsx(ActionIcon, {
+  var iconBefore = icon && iconPosition === 'before' ? jsx(ActionIcon, {
     size: size,
     testId: testId,
     icon: icon
   }) : undefined;
-  var iconAfter = iconPosition === 'after' ? jsx(ActionIcon, {
+  var iconAfter = icon && iconPosition === 'after' ? jsx(ActionIcon, {
     size: size,
     testId: testId,
     icon: icon
   }) : undefined;
+  var iconOnly = !content;
   return jsx(Tooltip, {
     content: tooltipMessage
+  }, jsx("div", {
+    css: getButtonStyle(size, iconOnly)
   }, jsx(Button, {
-    spacing: "none",
+    spacing: sizeToSpacing[size],
     appearance: appearance,
     testId: testId,
     onClick: handleOnClick(onClick),
     iconBefore: iconBefore,
     iconAfter: iconAfter
-  }, content));
+  }, content)));
 };
 
 export default Action;

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

@@ -1,5 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
 import { ActionName } from '../../../../constants';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import React, { useContext } from 'react';
@@ -12,6 +17,7 @@ var actionMappings = _defineProperty({}, ActionName.DeleteAction, {
   component: Action,
   props: {
     testId: 'smart-action-delete-action',
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete),
     icon: /*#__PURE__*/React.createElement(CrossIcon, {
       label: "Delete"
     }),
@@ -65,6 +71,8 @@ export var createUIAction = function createUIAction(name) {
   }
 
   return function (overrides) {
-    return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, overrides));
+    var combinedProps = _objectSpread(_objectSpread({}, props), overrides);
+
+    return /*#__PURE__*/React.createElement(BaseAction, combinedProps);
   };
 };

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

@@ -13,12 +13,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 ? SmartLinkSize.Medium : _ref$size;
+      size = _ref$size === void 0 ? 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 jsx("div", {
     css: styles
-  }, jsx(ButtonGroup, null, renderActionItems(actionsToRender, size)));
+  }, jsx(ButtonGroup, null, renderActionItems(actionsToRender, size, appearance)));
 };
 
 export default ActionGroup;

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

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import Block from '../block';
+import ElementGroup from '../element-group';
+import { Provider } from '../../elements';
+import ActionGroup from '../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 !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/React.createElement(Provider, {
+    testId: "".concat(testId, "-provider")
+  }), actions && actions.length > 0 ? /*#__PURE__*/React.createElement(ElementGroup, {
+    testId: "smart-element-group-actions",
+    align: SmartLinkAlignment.Right,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    appearance: "default"
+  })) : null);
+};
+
+export default FooterBlock;

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

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

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

@@ -1,3 +1,4 @@
+export { default as FooterBlock } from './footer-block';
 export { default as MetadataBlock } from './metadata-block';
 export { default as SnippetBlock } from './snippet-block';
 export { default as TitleBlock } from './title-block';

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

@@ -4,10 +4,14 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["name"],
-    _excluded2 = ["name"];
+    _excluded2 = ["name", "hideContent", "hideIcon", "onClick"];
 
 var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3;
 
+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) { _defineProperty(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; }
+
 import React from 'react';
 import { css } from '@emotion/core';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
@@ -15,9 +19,8 @@ import * as Elements from '../elements';
 import * as Actions from '../actions';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
-import ElementGroup from './element-group'; // Determine whether the element can be display as inline/block.
-
-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);
+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.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) {
@@ -110,17 +113,33 @@ export var renderElementItems = function renderElementItems() {
 export var renderActionItems = function renderActionItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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 = _objectWithoutProperties(curr, _excluded2);
 
     var Action = Actions[name];
 
+    var actionProps = _objectSpread({}, props);
+
+    if (hideContent) {
+      actionProps.content = '';
+    }
+
+    if (hideIcon) {
+      actionProps.icon = undefined;
+    }
+
     if (Action) {
       return [].concat(_toConsumableArray(acc), [/*#__PURE__*/React.createElement(Action, _extends({
         size: size,
-        key: idx
-      }, props))]);
+        key: idx,
+        appearance: appearance,
+        onClick: onClick
+      }, actionProps))]);
     }
 
     return acc;

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

@@ -281,7 +281,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
     case IconType.Jira:
       // Logo component has a different prop set from other icon components
       return /*#__PURE__*/React.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: N700,
         iconColor: B200,