@atlaskit/smart-card 17.4.1 → 17.5.0

package/dist/esm/utils/token.js

@@ -1,23 +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'),
-  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.1",
+	"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,2 +1,4 @@
-export { default as TitleBlock } from './title-block';
-export { default as MetadataBlock } from './metadata-block';
+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/snippet-block/index.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["maxLines", "status", "testId"];
+import React from 'react';
+import Block from '../block';
+import { SmartLinkStatus } from '../../../../../constants';
+import { Snippet } from '../../elements';
+import { getMaxLines } from '../../utils';
+var DEFAULT_MAX_LINES = 3;
+var MAXIMUM_MAX_LINES = 3;
+var MINIMUM_MAX_LINES = 1;
+
+var SnippetBlock = function SnippetBlock(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+      maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-snippet' : _ref$testId,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  if (status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  var snippetMaxLines = getMaxLines(maxLines, DEFAULT_MAX_LINES, MAXIMUM_MAX_LINES, MINIMUM_MAX_LINES);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/React.createElement(Snippet, {
+    maxLines: snippetMaxLines
+  }));
+};
+
+export default SnippetBlock;

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

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

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/esm/view/FlexibleCard/components/elements/text/index.js

@@ -8,12 +8,14 @@ import { css, jsx } from '@emotion/core';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 
-var getStyles = function getStyles(maxLines) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), tokens.text, getTruncateStyles(maxLines));
+var getStyles = function getStyles(maxLines, color) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), color, getTruncateStyles(maxLines));
 };
 
 var Text = function Text(_ref) {
-  var content = _ref.content,
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? tokens.text : _ref$color,
+      content = _ref.content,
       _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
       message = _ref.message,
@@ -25,7 +27,7 @@ var Text = function Text(_ref) {
   }
 
   return jsx("span", {
-    css: getStyles(maxLines),
+    css: getStyles(maxLines, color),
     "data-smart-element-text": true,
     "data-testid": testId
   }, getFormattedMessage(message) || content);

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

@@ -14,6 +14,8 @@ import AvatarGroup from './avatar-group';
 import Text from './text';
 import { messages } from '../../../../messages';
 import DateTime from './date-time';
+import { tokens } from '../../../../utils/token';
+var SNIPPET_DEFAULT_MAX_LINES = 3;
 var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings, ElementName.AuthorGroup, {
   component: AvatarGroup
 }), _defineProperty(_elementMappings, ElementName.CollaboratorGroup, {
@@ -39,7 +41,8 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
 }), _defineProperty(_elementMappings, ElementName.Snippet, {
   component: Text,
   props: {
-    maxLines: 3
+    color: tokens.snippet,
+    maxLines: SNIPPET_DEFAULT_MAX_LINES
   }
 }), _defineProperty(_elementMappings, ElementName.State, {
   component: Lozenge

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

@@ -51,6 +51,17 @@ export var getLinkSizeStyles = function getLinkSizeStyles(size) {
       return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        letter-spacing: 0em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
   }
 };
+export var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
+  if (value > max) {
+    return defaultValue;
+  }
+
+  if (value < min) {
+    return min;
+  }
+
+  return value;
+};
 export var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), maxLines, maxLines, lineHeight);

package/dist/types/constants.d.ts

@@ -1,21 +1,41 @@
+/**
+ * The alignment of Flexible UI component.
+ */
 export declare enum SmartLinkAlignment {
     Left = "left",
     Right = "right"
 }
+/**
+ * The direction of Flexible UI components. It establish the main-axis
+ * or how the child components laid out inside the parent component.
+ * Similar to flex's flex-direction concept.
+ */
 export declare enum SmartLinkDirection {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
+/**
+ * The positioning of the component within the parent component.
+ * Similar to flex's align-items or align-self concept.
+ */
 export declare enum SmartLinkPosition {
     Top = "top",
     Center = "center"
 }
+/**
+ * The sizing options of the Flexible UI component. Every component
+ * has or inherits the sizing props. Implementation varies
+ * as per component.
+ */
 export declare enum SmartLinkSize {
     XLarge = "xlarge",
     Large = "large",
     Medium = "medium",
     Small = "small"
 }
+/**
+ * Smart Links link request status
+ */
 export declare enum SmartLinkStatus {
     Pending = "pending",
     Resolving = "resolving",
@@ -26,14 +46,39 @@ export declare enum SmartLinkStatus {
     Unauthorized = "unauthorized",
     Fallback = "fallback"
 }
+/**
+ * Flexible UI theme available on the Card level.
+ * This determine the styling of the link.
+ */
 export declare enum SmartLinkTheme {
     Black = "black",
     Link = "link"
 }
+/**
+ * Determines whether the container size will fit to the content
+ * or expand to the available width or the parent component.
+ * Similar to flex's flex-grow concept.
+ */
 export declare enum SmartLinkWidth {
     FitToContent = "fit-to-content",
     Flexible = "flexible"
 }
+/**
+ * Flexible UI element name - each reflecting the link data its represented.
+ * When adding an element...
+ * 1) Create base element if it doesn't already existed.
+ *    Base element are inside src/view/FlexibleCard/components/elements.
+ *    E.g. Badge,DateTime, Icon, Lozenge, etc.
+ * 2) Update FlexibleUiContext with the new prop for data representing
+ *    the element, preferably with the same name as the element itself.
+ *    (src/state/flexible-ui-context/types.ts)
+ * 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
+ * 4) Set base element and data mapping
+ *    (src/view/FlexibleCard/components/elements/utils.tsx)
+ * 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
+ * 6) Update element ElementDisplaySchema for inline/block display
+ *    (src/view/FlexibleCard/components/blocks/utils.tsx)
+ */
 export declare enum ElementName {
     AuthorGroup = "AuthorGroup",
     CollaboratorGroup = "CollaboratorGroup",
@@ -51,9 +96,15 @@ export declare enum ElementName {
     Title = "Title",
     Provider = "Provider"
 }
+/**
+ * Flexible UI action (button)
+ */
 export declare enum ActionName {
     DeleteAction = "DeleteAction"
 }
+/**
+ * Flexible UI icons - each mapped to AK icons.
+ */
 export declare enum IconType {
     Archive = "FileType:Archive",
     Audio = "FileType:Audio",

package/dist/types/index.d.ts

@@ -17,5 +17,5 @@ export { useSmartLinkEvents } from './view/SmartLinkEvents/useSmartLinkEvents';
 export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName, } from './classNames';
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback';
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, } from './constants';
-export { MetadataBlock, TitleBlock, } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, SnippetBlock, TitleBlock, } from './view/FlexibleCard/components/blocks';
 export type { ActionItem, ElementItem, } from './view/FlexibleCard/components/blocks/types';

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

@@ -1,15 +1,15 @@
-export declare const safeToken: (path: string, fallback?: string | undefined) => any;
 export declare const tokens: {
-    actionIcon: any;
-    background: any;
-    badgeIcon: any;
-    badgeText: any;
-    blackLink: any;
-    blackLinkPressed: any;
-    blueLink: any;
-    blueLinkPressed: any;
-    elevation: any;
-    errorMessage: any;
-    errorMessageHover: any;
-    text: any;
+    actionIcon: "var(--ds-icon)";
+    background: "var(--ds-surface)";
+    badgeIcon: "var(--ds-icon-subtle)";
+    badgeText: "var(--ds-text-subtlest)";
+    blackLink: "var(--ds-text-subtle)";
+    blackLinkPressed: "var(--ds-text)";
+    blueLink: "var(--ds-link)";
+    blueLinkPressed: "var(--ds-link-pressed)";
+    elevation: "var(--ds-shadow-raised)";
+    errorMessage: "var(--ds-text-disabled)";
+    errorMessageHover: "var(--ds-text-subtle)";
+    snippet: "var(--ds-text)";
+    text: "var(--ds-text-subtlest)";
 };

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,2 +1,4 @@
-export { default as TitleBlock } from './title-block';
+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/snippet-block/index.d.ts

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

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

@@ -0,0 +1,4 @@
+import { BlockProps } from '../types';
+export declare type SnippetBlockProps = BlockProps & {
+    maxLines?: number;
+};

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/dist/types/view/FlexibleCard/components/elements/text/types.d.ts

@@ -1,6 +1,7 @@
 import { ElementProps } from '../types';
 import { MessageProps } from '../../types';
 export declare type TextProps = ElementProps & {
+    color?: string;
     content?: string;
     maxLines?: number;
     message?: MessageProps;

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

@@ -6,4 +6,5 @@ export declare const getFormattedMessage: (message?: MessageProps | undefined) =
 export declare const getIconSizeStyles: (width: string) => SerializedStyles;
 export declare const getLinkLineHeight: (size: SmartLinkSize) => string;
 export declare const getLinkSizeStyles: (size: SmartLinkSize) => SerializedStyles;
+export declare const getMaxLines: (value: number, defaultValue: number, max: number, min: number) => number;
 export declare const getTruncateStyles: (maxLines: number, lineHeight?: string) => SerializedStyles;

package/package.json

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