@atlaskit/smart-card 17.1.0 → 17.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 17.2.0
+
+### Minor Changes
+
+- [`3200ce3abc5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3200ce3abc5) - Flexible UI: Add MetadataBlock
+
 ## 17.1.0
 
 ### Minor Changes

package/dist/cjs/index.js

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

package/dist/cjs/version.json

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

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

@@ -17,21 +17,21 @@ var _constants = require("../../../../../constants");
 
 var _utils = require("../utils");
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3;
 
-var getFlexJustifyContent = function getFlexJustifyContent(align) {
+var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
     case _constants.SmartLinkAlignment.Right:
-      return 'flex-end';
+      return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        justify-content: flex-end;\n        text-align: right;\n      "])));
 
     case _constants.SmartLinkAlignment.Left:
     default:
-      return 'flex-start';
+      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        justify-content: flex-start;\n        text-align: left;\n      "])));
   }
 };
 
 var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  justify-content: ", ";\n  min-width: 10%;\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getFlexJustifyContent(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '');
+  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '');
 };
 
 exports.getElementGroupStyles = getElementGroupStyles;
@@ -40,6 +40,7 @@ var ElementGroup = function ElementGroup(_ref) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? _constants.SmartLinkAlignment.Left : _ref$align,
       children = _ref.children,
+      css = _ref.css,
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? _constants.SmartLinkDirection.Horizontal : _ref$direction,
       _ref$size = _ref.size,
@@ -49,7 +50,7 @@ var ElementGroup = function ElementGroup(_ref) {
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? _constants.SmartLinkWidth.FitToContent : _ref$width;
   return (0, _core.jsx)("div", {
-    css: getElementGroupStyles(direction, size, align, width),
+    css: [getElementGroupStyles(direction, size, align, width), css],
     "data-smart-element-group": true,
     "data-testid": testId
   }, (0, _utils.renderChildren)(children, size));

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, "MetadataBlock", {
+  enumerable: true,
+  get: function get() {
+    return _metadataBlock.default;
+  }
+});
 Object.defineProperty(exports, "TitleBlock", {
   enumerable: true,
   get: function get() {
@@ -12,4 +18,6 @@ Object.defineProperty(exports, "TitleBlock", {
   }
 });
 
-var _titleBlock = _interopRequireDefault(require("./title-block"));
+var _titleBlock = _interopRequireDefault(require("./title-block"));
+
+var _metadataBlock = _interopRequireDefault(require("./metadata-block"));

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

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _constants = require("../../../../../constants");
+
+var _utils = require("../utils");
+
+var _block = _interopRequireDefault(require("../block"));
+
+var _elementGroup = _interopRequireDefault(require("../element-group"));
+
+var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
+
+var _templateObject;
+
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+
+var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
+  // MetadataBlock allows metadata elements to be displayed in
+  // multiple lines, with maximum of 2 lines.
+  // a) We need the height of the line to be equal on both left and right
+  //    sides so they line up nicely. 1.75 is the The maximum height of
+  //    all elements in specific size. This height belongs to AvatarGroup.
+  // b) There is no way to truncate non-text elements nicely. Here
+  //    it's fix max height of the element group so that anything that is
+  //    overflown will not be visible.
+  var lineHeight = 1.75;
+  var gap = (0, _utils.getGapSize)(size);
+  var gapHeight = gap * (maxLines - 1);
+  var height = lineHeight * maxLines + gapHeight;
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    flex-wrap: wrap;\n    line-height: ", "rem;\n    max-height: ", "rem;\n    > span,\n    > div {\n      min-height: ", "rem;\n      max-height: ", "rem;\n      line-height: ", "rem;\n    }\n  "])), lineHeight, height, lineHeight, lineHeight, lineHeight);
+};
+
+var getMaxLines = function getMaxLines(maxLines) {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+
+  return maxLines;
+};
+
+var MetadataBlock = function MetadataBlock(_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 ? _constants.SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-metadata' : _ref$testId,
+      _ref$primary = _ref.primary,
+      primary = _ref$primary === void 0 ? [] : _ref$primary,
+      _ref$secondary = _ref.secondary,
+      secondary = _ref$secondary === void 0 ? [] : _ref$secondary,
+      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  if (primary.length === 0 && secondary.length === 0 || status !== _constants.SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  var primaryElements = (0, _utils.renderElementItems)(primary);
+  var secondaryElements = (0, _utils.renderElementItems)(secondary);
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  var elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), primaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    align: _constants.SmartLinkAlignment.Left,
+    css: elementGroupStyles,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible
+  }, primaryElements), secondaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    align: _constants.SmartLinkAlignment.Right,
+    css: elementGroupStyles,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible
+  }, secondaryElements));
+};
+
+var _default = MetadataBlock;
+exports.default = _default;

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

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

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

@@ -39,7 +39,7 @@ var actionStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _tag
 
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), _token.tokens.errorMessage);
+  return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), _token.tokens.errorMessage);
 };
 
 var TitleBlockErroredView = function TitleBlockErroredView(_ref) {

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderElementItems = exports.renderChildren = exports.renderActionItems = exports.getBaseStyles = void 0;
+exports.renderElementItems = exports.renderChildren = exports.renderActionItems = exports.getGapSize = exports.getBaseStyles = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -56,22 +56,24 @@ var getDirectionStyles = function getDirectionStyles(direction) {
 var getGapSize = function getGapSize(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
-      return '1.25rem';
+      return 1.25;
 
     case _constants.SmartLinkSize.Large:
-      return '1rem';
+      return 1;
 
     case _constants.SmartLinkSize.Medium:
-      return '.5rem';
+      return 0.5;
 
     case _constants.SmartLinkSize.Small:
     default:
-      return '.25rem';
+      return 0.25;
   }
 };
 
+exports.getGapSize = getGapSize;
+
 var getBaseStyles = function getBaseStyles(direction, size) {
-  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", ";\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  overflow-y: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
+  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  overflow-y: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
 };
 
 exports.getBaseStyles = getBaseStyles;

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

@@ -41,7 +41,7 @@ var getThemeStyles = function getThemeStyles(theme) {
 
 var getAnchorStyles = function getAnchorStyles(size, theme, maxLines) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size)), getThemeStyles(theme));
+  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size)), getThemeStyles(theme));
 };
 
 var getMaxLines = function getMaxLines(maxLines) {

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

@@ -78,7 +78,7 @@ exports.getLinkSizeStyles = getLinkSizeStyles;
 
 var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
-  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    flex: 1 1 auto;\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);
+  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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);
 };
 
 exports.getTruncateStyles = getTruncateStyles;

package/dist/es2019/index.js

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

package/dist/es2019/version.json

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

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

@@ -4,20 +4,26 @@ import { css, jsx } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 import { getBaseStyles, renderChildren } from '../utils';
 
-const getFlexJustifyContent = align => {
+const getAlignmentStyles = align => {
   switch (align) {
     case SmartLinkAlignment.Right:
-      return 'flex-end';
+      return css`
+        justify-content: flex-end;
+        text-align: right;
+      `;
 
     case SmartLinkAlignment.Left:
     default:
-      return 'flex-start';
+      return css`
+        justify-content: flex-start;
+        text-align: left;
+      `;
   }
 };
 
 export const getElementGroupStyles = (direction, size, align, width) => css`
   ${getBaseStyles(direction, size)}
-  justify-content: ${getFlexJustifyContent(align)};
+  ${getAlignmentStyles(align)}
   min-width: 10%;
   ${width === SmartLinkWidth.Flexible ? `flex: 1 3;` : ''}
 `;
@@ -25,12 +31,13 @@ export const getElementGroupStyles = (direction, size, align, width) => css`
 const ElementGroup = ({
   align = SmartLinkAlignment.Left,
   children,
+  css,
   direction = SmartLinkDirection.Horizontal,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-group',
   width = SmartLinkWidth.FitToContent
 }) => jsx("div", {
-  css: getElementGroupStyles(direction, size, align, width),
+  css: [getElementGroupStyles(direction, size, align, width), css],
   "data-smart-element-group": true,
   "data-testid": testId
 }, renderChildren(children, size));

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

@@ -1 +1,2 @@
-export { default as TitleBlock } from './title-block';
+export { default as TitleBlock } from './title-block';
+export { default as MetadataBlock } from './metadata-block';

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

@@ -0,0 +1,83 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { css } from '@emotion/core';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import { getGapSize, renderElementItems } from '../utils';
+import Block from '../block';
+import ElementGroup from '../element-group';
+const DEFAULT_MAX_LINES = 2;
+const MAXIMUM_MAX_LINES = 2;
+const MINIMUM_MAX_LINES = 1;
+
+const getElementGroupStyles = (size, maxLines) => {
+  // MetadataBlock allows metadata elements to be displayed in
+  // multiple lines, with maximum of 2 lines.
+  // a) We need the height of the line to be equal on both left and right
+  //    sides so they line up nicely. 1.75 is the The maximum height of
+  //    all elements in specific size. This height belongs to AvatarGroup.
+  // b) There is no way to truncate non-text elements nicely. Here
+  //    it's fix max height of the element group so that anything that is
+  //    overflown will not be visible.
+  const lineHeight = 1.75;
+  const gap = getGapSize(size);
+  const gapHeight = gap * (maxLines - 1);
+  const height = lineHeight * maxLines + gapHeight;
+  return css`
+    flex-wrap: wrap;
+    line-height: ${lineHeight}rem;
+    max-height: ${height}rem;
+    > span,
+    > div {
+      min-height: ${lineHeight}rem;
+      max-height: ${lineHeight}rem;
+      line-height: ${lineHeight}rem;
+    }
+  `;
+};
+
+const getMaxLines = maxLines => {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+
+  return maxLines;
+};
+
+const MetadataBlock = ({
+  maxLines = DEFAULT_MAX_LINES,
+  status = SmartLinkStatus.Fallback,
+  testId = 'smart-block-metadata',
+  primary = [],
+  secondary = [],
+  ...blockProps
+}) => {
+  if (primary.length === 0 && secondary.length === 0 || status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  const primaryElements = renderElementItems(primary);
+  const secondaryElements = renderElementItems(secondary);
+  const {
+    size = SmartLinkSize.Medium
+  } = blockProps;
+  const elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: `${testId}-resolved-view`
+  }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Left,
+    css: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Right,
+    css: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, secondaryElements));
+};
+
+export default MetadataBlock;

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

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

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

@@ -21,6 +21,7 @@ const actionStyles = css`
 const getMessageStyles = (size, hasAction) => {
   const sizeStyles = getLinkSizeStyles(size);
   return css`
+    flex: 1 1 auto;
     justify-content: flex-end;
     ${hasAction ? actionStyles : ''}
     ${sizeStyles}

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

@@ -25,26 +25,25 @@ const getDirectionStyles = direction => {
   }
 };
 
-const getGapSize = size => {
+export const getGapSize = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
-      return '1.25rem';
+      return 1.25;
 
     case SmartLinkSize.Large:
-      return '1rem';
+      return 1;
 
     case SmartLinkSize.Medium:
-      return '.5rem';
+      return 0.5;
 
     case SmartLinkSize.Small:
     default:
-      return '.25rem';
+      return 0.25;
   }
 };
-
 export const getBaseStyles = (direction, size) => css`
   display: flex;
-  gap: ${getGapSize(size)};
+  gap: ${getGapSize(size)}rem;
   line-height: 1rem;
   min-width: 0;
   overflow: hidden;

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

@@ -44,6 +44,7 @@ const getThemeStyles = theme => {
 const getAnchorStyles = (size, theme, maxLines) => {
   const sizeStyles = getLinkSizeStyles(size);
   return css`
+    flex: 1 1 auto;
     ${sizeStyles}
     ${getTruncateStyles(maxLines, getLinkLineHeight(size))}
     // Theme should be last to be spread because it contains override values

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

@@ -82,7 +82,6 @@ export const getLinkSizeStyles = size => {
 };
 export const getTruncateStyles = (maxLines, lineHeight = '1rem') => css`
     display: -webkit-box;
-    flex: 1 1 auto;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-word;

package/dist/esm/index.js

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

package/dist/esm/version.json

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

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3;
 
 /** @jsx jsx */
 import React from 'react';
@@ -8,25 +8,26 @@ import { css, jsx } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 import { getBaseStyles, renderChildren } from '../utils';
 
-var getFlexJustifyContent = function getFlexJustifyContent(align) {
+var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
     case SmartLinkAlignment.Right:
-      return 'flex-end';
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        justify-content: flex-end;\n        text-align: right;\n      "])));
 
     case SmartLinkAlignment.Left:
     default:
-      return 'flex-start';
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        justify-content: flex-start;\n        text-align: left;\n      "])));
   }
 };
 
 export var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: ", ";\n  min-width: 10%;\n  ", "\n"])), getBaseStyles(direction, size), getFlexJustifyContent(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '');
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n"])), getBaseStyles(direction, size), getAlignmentStyles(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '');
 };
 
 var ElementGroup = function ElementGroup(_ref) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? SmartLinkAlignment.Left : _ref$align,
       children = _ref.children,
+      css = _ref.css,
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? SmartLinkDirection.Horizontal : _ref$direction,
       _ref$size = _ref.size,
@@ -36,7 +37,7 @@ var ElementGroup = function ElementGroup(_ref) {
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? SmartLinkWidth.FitToContent : _ref$width;
   return jsx("div", {
-    css: getElementGroupStyles(direction, size, align, width),
+    css: [getElementGroupStyles(direction, size, align, width), css],
     "data-smart-element-group": true,
     "data-testid": testId
   }, renderChildren(children, size));

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

@@ -1 +1,2 @@
-export { default as TitleBlock } from './title-block';
+export { default as TitleBlock } from './title-block';
+export { default as MetadataBlock } from './metadata-block';

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

@@ -0,0 +1,83 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
+
+var _templateObject;
+
+import React from 'react';
+import { css } from '@emotion/core';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import { getGapSize, renderElementItems } from '../utils';
+import Block from '../block';
+import ElementGroup from '../element-group';
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+
+var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
+  // MetadataBlock allows metadata elements to be displayed in
+  // multiple lines, with maximum of 2 lines.
+  // a) We need the height of the line to be equal on both left and right
+  //    sides so they line up nicely. 1.75 is the The maximum height of
+  //    all elements in specific size. This height belongs to AvatarGroup.
+  // b) There is no way to truncate non-text elements nicely. Here
+  //    it's fix max height of the element group so that anything that is
+  //    overflown will not be visible.
+  var lineHeight = 1.75;
+  var gap = getGapSize(size);
+  var gapHeight = gap * (maxLines - 1);
+  var height = lineHeight * maxLines + gapHeight;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-wrap: wrap;\n    line-height: ", "rem;\n    max-height: ", "rem;\n    > span,\n    > div {\n      min-height: ", "rem;\n      max-height: ", "rem;\n      line-height: ", "rem;\n    }\n  "])), lineHeight, height, lineHeight, lineHeight, lineHeight);
+};
+
+var getMaxLines = function getMaxLines(maxLines) {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+
+  return maxLines;
+};
+
+var MetadataBlock = function MetadataBlock(_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-metadata' : _ref$testId,
+      _ref$primary = _ref.primary,
+      primary = _ref$primary === void 0 ? [] : _ref$primary,
+      _ref$secondary = _ref.secondary,
+      secondary = _ref$secondary === void 0 ? [] : _ref$secondary,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  if (primary.length === 0 && secondary.length === 0 || status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  var primaryElements = renderElementItems(primary);
+  var secondaryElements = renderElementItems(secondary);
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  var elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Left,
+    css: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Right,
+    css: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, secondaryElements));
+};
+
+export default MetadataBlock;

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

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

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

@@ -19,7 +19,7 @@ var actionStyles = css(_templateObject || (_templateObject = _taggedTemplateLite
 
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = getLinkSizeStyles(size);
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), tokens.errorMessage);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), tokens.errorMessage);
 };
 
 var TitleBlockErroredView = function TitleBlockErroredView(_ref) {

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

@@ -27,25 +27,24 @@ var getDirectionStyles = function getDirectionStyles(direction) {
   }
 };
 
-var getGapSize = function getGapSize(size) {
+export var getGapSize = function getGapSize(size) {
   switch (size) {
     case SmartLinkSize.XLarge:
-      return '1.25rem';
+      return 1.25;
 
     case SmartLinkSize.Large:
-      return '1rem';
+      return 1;
 
     case SmartLinkSize.Medium:
-      return '.5rem';
+      return 0.5;
 
     case SmartLinkSize.Small:
     default:
-      return '.25rem';
+      return 0.25;
   }
 };
-
 export var getBaseStyles = function getBaseStyles(direction, size) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", ";\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  overflow-y: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  overflow-y: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
 };
 
 var isActionGroup = function isActionGroup(node) {

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

@@ -27,7 +27,7 @@ var getThemeStyles = function getThemeStyles(theme) {
 
 var getAnchorStyles = function getAnchorStyles(size, theme, maxLines) {
   var sizeStyles = getLinkSizeStyles(size);
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, getTruncateStyles(maxLines, getLinkLineHeight(size)), getThemeStyles(theme));
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, getTruncateStyles(maxLines, getLinkLineHeight(size)), getThemeStyles(theme));
 };
 
 var getMaxLines = function getMaxLines(maxLines) {

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

@@ -53,5 +53,5 @@ export var getLinkSizeStyles = function getLinkSizeStyles(size) {
 };
 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    flex: 1 1 auto;\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);
+  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/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 { TitleBlock } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, TitleBlock, } from './view/FlexibleCard/components/blocks';
 export type { ActionItem, ElementItem, } from './view/FlexibleCard/components/blocks/types';

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

@@ -1,6 +1,8 @@
+import { Interpolation } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 export declare type ElementGroupProps = {
     align?: SmartLinkAlignment;
+    css?: Interpolation;
     direction?: SmartLinkDirection;
     size?: SmartLinkSize;
     testId?: string;

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

@@ -1 +1,2 @@
 export { default as TitleBlock } from './title-block';
+export { default as MetadataBlock } from './metadata-block';

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

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

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

@@ -0,0 +1,6 @@
+import { BlockProps, ElementItem } from '../types';
+export declare type MetadataBlockProps = BlockProps & {
+    maxLines?: number;
+    primary?: ElementItem[];
+    secondary?: ElementItem[];
+};

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { SerializedStyles } from '@emotion/core';
 import { ActionItem, ElementItem } from './types';
 import { SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+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[]) => React.ReactNode | undefined;

package/package.json

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