@atlaskit/smart-card 17.4.3 → 17.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.4.3",
+	"version": "17.5.0",
 	"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,6 +5,12 @@ 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() {
@@ -24,6 +30,8 @@ Object.defineProperty(exports, "TitleBlock", {
   }
 });
 
+var _footerBlock = _interopRequireDefault(require("./footer-block"));
+
 var _metadataBlock = _interopRequireDefault(require("./metadata-block"));
 
 var _snippetBlock = _interopRequireDefault(require("./snippet-block"));

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,6 +44,10 @@ 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 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);
 exports.ElementDisplaySchema = ElementDisplaySchema;
 
@@ -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/es2019/version.json

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

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'],
@@ -130,19 +129,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/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.4.3",
+	"version": "17.5.0",
 	"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,8 +19,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 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);
 
 var getDirectionStyles = function getDirectionStyles(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,

package/dist/types/view/FlexibleCard/components/blocks/action-group/types.d.ts

@@ -1,8 +1,10 @@
 import { SmartLinkSize, SmartLinkDirection } from '../../../../../constants';
 import { ActionItem } from '../types';
+import { Appearance } from '@atlaskit/button';
 export declare type ActionGroupProps = {
     items: ActionItem[];
     size?: SmartLinkSize;
     direction?: SmartLinkDirection;
     testId?: string;
+    appearance?: Appearance;
 };

package/dist/types/view/FlexibleCard/components/blocks/footer-block/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FooterBlockProps } from './types';
+declare const FooterBlock: React.FC<FooterBlockProps>;
+export default FooterBlock;

package/dist/types/view/FlexibleCard/components/blocks/footer-block/types.d.ts

@@ -0,0 +1,4 @@
+import { ActionItem, BlockProps } from '../types';
+export declare type FooterBlockProps = BlockProps & {
+    actions?: ActionItem[];
+};

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

@@ -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/types/view/FlexibleCard/components/blocks/types.d.ts

@@ -13,5 +13,7 @@ export declare type ElementItem = {
 export declare type ActionItem = {
     name: ActionName;
     testId?: string;
+    hideContent?: boolean;
+    hideIcon?: boolean;
     onClick: () => any;
 };

package/dist/types/view/FlexibleCard/components/blocks/utils.d.ts

@@ -8,4 +8,4 @@ export declare const getGapSize: (size: SmartLinkSize) => number;
 export declare const getBaseStyles: (direction: SmartLinkDirection, size: SmartLinkSize) => SerializedStyles;
 export declare const renderChildren: (children: React.ReactNode, size: SmartLinkSize) => React.ReactNode;
 export declare const renderElementItems: (items?: ElementItem[], display?: ElementDisplaySchemaType) => React.ReactNode | undefined;
-export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize) => React.ReactNode | undefined;
+export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize, appearance?: "link" | "default" | "danger" | "primary" | "subtle" | "subtle-link" | "warning" | undefined) => React.ReactNode | undefined;

package/package.json

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