@atlaskit/smart-card 17.0.1 → 17.3.0

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

@@ -1,26 +1,16 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-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; }
+var _templateObject, _templateObject2;
 
 /** @jsx jsx */
 import React from 'react';
-import { N0, N40A, N50A } from '@atlaskit/theme/colors';
 import { css, jsx } from '@emotion/core';
-import { SmartLinkSize } from '../../../../constants';
-import { token } from '@atlaskit/tokens';
-
-var getElevationStyles = function getElevationStyles() {
-  return {
-    border: "1px solid transparent",
-    borderRadius: '1.5px',
-    boxShadow: token('elevation.shadow.raised', "0 1px 1px ".concat(N50A, ", 0 0 1px 1px ").concat(N40A)),
-    margin: '2px'
-  };
-};
+import { SmartLinkSize, SmartLinkTheme } from '../../../../constants';
+import { isFlexibleUiBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
+import { tokens } from '../../../../utils/token';
+var elevationStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), tokens.elevation);
 
-var getGapSize = function getGapSize(size) {
+var getGap = function getGap(size) {
   switch (size) {
     case SmartLinkSize.XLarge:
       return '1.25rem';
@@ -37,7 +27,7 @@ var getGapSize = function getGapSize(size) {
   }
 };
 
-var getPaddingSize = function getPaddingSize(size) {
+var getPadding = function getPadding(size) {
   switch (size) {
     case SmartLinkSize.XLarge:
       return '1.5rem';
@@ -55,28 +45,20 @@ var getPaddingSize = function getPaddingSize(size) {
 };
 
 export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding) {
-  var elevation = hideElevation ? {} : getElevationStyles();
-  return css(_objectSpread({
-    backgroundColor: hideBackground ? undefined : token('elevation.surface', N0),
-    display: 'flex',
-    gap: "".concat(getGapSize(size), " 0"),
-    flexDirection: 'column',
-    minWidth: 0,
-    overflow: 'hidden',
-    padding: hidePadding ? undefined : getPaddingSize(size)
-  }, elevation));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n  ", "\n  ", "\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles);
 };
 
-var renderChildren = function renderChildren(children, containerSize) {
+var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry) {
   return React.Children.map(children, function (child) {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
+    if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
       var blockSize = child.props.size;
       return /*#__PURE__*/React.cloneElement(child, {
-        size: blockSize || containerSize
+        retry: isFlexibleUiTitleBlock(child) ? retry : undefined,
+        size: blockSize || containerSize,
+        status: status,
+        theme: containerTheme
       });
     }
-
-    return child;
   });
 };
 
@@ -88,15 +70,19 @@ var Container = function Container(_ref) {
       hideElevation = _ref$hideElevation === void 0 ? false : _ref$hideElevation,
       _ref$hidePadding = _ref.hidePadding,
       hidePadding = _ref$hidePadding === void 0 ? false : _ref$hidePadding,
+      retry = _ref.retry,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+      status = _ref.status,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-links-container' : _ref$testId;
+      testId = _ref$testId === void 0 ? 'smart-links-container' : _ref$testId,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? SmartLinkTheme.Link : _ref$theme;
   return jsx("div", {
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, renderChildren(children, size));
+  }, renderChildren(children, size, theme, status, retry));
 };
 
 export default Container;

package/dist/esm/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -0,0 +1,51 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
+import { SmartLinkSize } from '../../../../../constants';
+var MAX_COUNT = 4;
+
+var getStyles = function getStyles(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      // Default AK small size
+      return;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])));
+  }
+};
+
+var AvatarGroup = function AvatarGroup(_ref) {
+  var _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$maxCount = _ref.maxCount,
+      maxCount = _ref$maxCount === void 0 ? MAX_COUNT : _ref$maxCount,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId;
+
+  if (!items.length) {
+    return null;
+  }
+
+  return jsx("span", {
+    css: getStyles(size)
+  }, jsx(AtlaskitAvatarGroup, {
+    maxCount: maxCount,
+    appearance: "stack",
+    size: "small",
+    data: items,
+    testId: testId
+  }));
+};
+
+export default AvatarGroup;

package/dist/esm/view/FlexibleCard/components/elements/avatar-group/types.js

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

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

@@ -0,0 +1,79 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _messageMapper;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { tokens } from '../../../../../utils/token';
+import { getFormattedMessage, getIconSizeStyles } from '../../utils';
+import { IconType } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import ImageIcon from '../../common/image-icon';
+import AtlaskitIcon from '../../common/atlaskit-icon';
+var badgeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  min-width: fit-content;\n"])));
+var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n  span,\n  svg {\n    line-height: 0;\n  }\n"])), tokens.badgeIcon, getIconSizeStyles('1rem'));
+var labelStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n"])), tokens.badgeText);
+var messageMapper = (_messageMapper = {}, _defineProperty(_messageMapper, IconType.PriorityBlocker, messages.priority_blocker), _defineProperty(_messageMapper, IconType.PriorityCritical, messages.priority_critical), _defineProperty(_messageMapper, IconType.PriorityHigh, messages.priority_high), _defineProperty(_messageMapper, IconType.PriorityHighest, messages.priority_highest), _defineProperty(_messageMapper, IconType.PriorityLow, messages.priority_low), _defineProperty(_messageMapper, IconType.PriorityLowest, messages.priority_lowest), _defineProperty(_messageMapper, IconType.PriorityMajor, messages.priority_major), _defineProperty(_messageMapper, IconType.PriorityMedium, messages.priority_medium), _defineProperty(_messageMapper, IconType.PriorityMinor, messages.priority_minor), _defineProperty(_messageMapper, IconType.PriorityTrivial, messages.priority_trivial), _defineProperty(_messageMapper, IconType.PriorityUndefined, messages.priority_undefined), _messageMapper);
+
+var getFormattedMessageOrLabel = function getFormattedMessageOrLabel(icon, content) {
+  if (icon) {
+    var descriptor = messageMapper[icon];
+
+    if (descriptor) {
+      return getFormattedMessage({
+        descriptor: descriptor
+      });
+    }
+  }
+
+  return content;
+};
+
+var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
+  if (icon) {
+    return jsx(AtlaskitIcon, {
+      icon: icon,
+      label: icon,
+      testId: "".concat(testId, "-icon")
+    });
+  }
+};
+
+var renderImageIcon = function renderImageIcon(url, testId) {
+  if (url) {
+    return jsx(ImageIcon, {
+      testId: testId,
+      url: url
+    });
+  }
+};
+
+var Badge = function Badge(_ref) {
+  var icon = _ref.icon,
+      url = _ref.url,
+      label = _ref.label,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId;
+  var formattedMessageOrLabel = getFormattedMessageOrLabel(icon, label);
+  var badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
+
+  if (!formattedMessageOrLabel || !badgeIcon) {
+    return null;
+  }
+
+  return jsx("div", {
+    css: badgeStyles,
+    "data-fit-to-content": true,
+    "data-smart-element-badge": true,
+    "data-testid": testId
+  }, jsx("span", {
+    css: iconStyles
+  }, badgeIcon), jsx("span", {
+    css: labelStyles,
+    "data-testid": "".concat(testId, "-label")
+  }, formattedMessageOrLabel));
+};
+
+export default Badge;

package/dist/esm/view/FlexibleCard/components/elements/badge/types.js

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

package/dist/esm/view/FlexibleCard/components/elements/date-time/index.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { useIntl, FormattedMessage } from 'react-intl-next';
+import { css, jsx } from '@emotion/core';
+import { getTruncateStyles } from '../../utils';
+import { tokens } from '../../../../../utils/token';
+import { selectUnit } from '@formatjs/intl-utils';
+import { messages } from '../../../../../messages';
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), tokens.text, getTruncateStyles(1));
+var typeToDescriptorMap = {
+  created: messages.created_on,
+  modified: messages.modified_on
+};
+
+var DateTime = function DateTime(_ref) {
+  var date = _ref.date,
+      type = _ref.type,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId;
+
+  var _useIntl = useIntl(),
+      formatRelativeTime = _useIntl.formatRelativeTime;
+
+  if (!type || !date) {
+    return null;
+  }
+
+  var _selectUnit = selectUnit(date, Date.now()),
+      value = _selectUnit.value,
+      unit = _selectUnit.unit;
+
+  var context = formatRelativeTime(value, unit, {
+    numeric: 'auto'
+  });
+  return jsx("span", {
+    css: styles,
+    "data-smart-element-date-time": true,
+    "data-testid": testId
+  }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type], {
+    values: {
+      context: context
+    }
+  })));
+};
+
+export default DateTime;

package/dist/esm/view/FlexibleCard/components/elements/date-time/types.js

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

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

@@ -1,76 +1,50 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-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; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
 import React, { useMemo } from 'react';
 import LinkIcon from '@atlaskit/icon/glyph/link';
 import { css, jsx } from '@emotion/core';
-import { SmartLinkSize } from '../../../../../constants';
-import AtlaskitIcon from './atlaskit-icon';
-import ImageIcon from './image-icon';
-
-var getDimensionStyles = function getDimensionStyles(value) {
-  return {
-    maxHeight: value,
-    maxWidth: value,
-    minHeight: value,
-    minWidth: value,
-    height: value,
-    width: value
-  };
-};
-
-var getSizeStyles = function getSizeStyles(size) {
-  switch (size) {
-    case SmartLinkSize.XLarge:
-      return getDimensionStyles('1.75rem');
+import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
+import AtlaskitIcon from '../../common/atlaskit-icon';
+import ImageIcon from '../../common/image-icon';
+import { getIconSizeStyles, getTruncateStyles } from '../../utils';
 
-    case SmartLinkSize.Large:
-      return getDimensionStyles('1.5rem');
-
-    case SmartLinkSize.Medium:
-      return getDimensionStyles('1rem');
+var getPositionStyles = function getPositionStyles(size, position) {
+  switch (position) {
+    case SmartLinkPosition.Center:
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        align-self: center;\n      "])));
 
-    case SmartLinkSize.Small:
+    case SmartLinkPosition.Top:
     default:
-      return getDimensionStyles('.75rem');
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        align-self: flex-start;\n        margin: 0;\n      "])));
   }
 };
 
-var getMargin = function getMargin(size) {
+var getWidth = function getWidth(size) {
   switch (size) {
     case SmartLinkSize.XLarge:
-      return '0.12em 0 0 0';
+      return '2rem';
 
     case SmartLinkSize.Large:
-      return '0';
+      return '1.5rem';
 
     case SmartLinkSize.Medium:
-      return '0';
+      return '1rem';
 
     case SmartLinkSize.Small:
     default:
-      return '-.05em 0 0 0';
+      return '.75rem';
   }
 };
 
-var getIconStyles = function getIconStyles(size) {
-  var styles = getSizeStyles(size);
-  return css(_objectSpread(_objectSpread({
-    flex: '0 0 auto',
-    alignSelf: 'flex-start',
-    margin: getMargin(size)
-  }, styles), {}, {
-    '[class$="-Icon"],[class$="-Wrapper"]': _objectSpread(_objectSpread({}, styles), {}, {
-      '> svg': _objectSpread(_objectSpread({}, styles), {}, {
-        padding: 0
-      })
-    }),
-    '& > img': styles
-  }));
+var getIconStyles = function getIconStyles(size, position, width) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), getPositionStyles(size, position), getIconSizeStyles(width));
+};
+
+var getCustomRenderStyles = function getCustomRenderStyles(value) {
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  line-height: ", ";\n  font-size: ", ";\n  text-align: center;\n  text-overflow: clip;\n  -webkit-box-orient: unset;\n  span {\n    margin: 0;\n    padding: 0;\n    vertical-align: baseline;\n  }\n"])), getTruncateStyles(1, value), value, value);
 };
 
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, label, testId) {
@@ -104,6 +78,9 @@ var Icon = function Icon(_ref) {
   var icon = _ref.icon,
       _ref$label = _ref.label,
       label = _ref$label === void 0 ? 'Link' : _ref$label,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? SmartLinkPosition.Top : _ref$position,
+      render = _ref.render,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
@@ -111,11 +88,14 @@ var Icon = function Icon(_ref) {
       url = _ref.url;
   var element = useMemo(function () {
     var defaultIcon = renderDefaultIcon(label, testId);
-    return renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
-  }, [icon, label, testId, url]);
-  var styles = getIconStyles(size);
+    return (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
+  }, [icon, label, render, testId, url]);
+  var width = getWidth(size);
+  var styles = getIconStyles(size, position, width);
+  var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return jsx("div", {
-    css: styles,
+    css: [styles, renderStyles],
+    "data-fit-to-content": true,
     "data-smart-element-icon": true,
     "data-testid": testId
   }, element);

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

@@ -0,0 +1,18 @@
+import { createElement } from './utils';
+import { ElementName } from '../../../../constants';
+// Attention: Keep the export name and element name the same.
+// This will help reducing the code for mapping elements inside
+// createElement and renderElementItems
+export var AuthorGroup = createElement(ElementName.AuthorGroup);
+export var CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
+export var CommentCount = createElement(ElementName.CommentCount);
+export var CreatedBy = createElement(ElementName.CreatedBy);
+export var CreatedOn = createElement(ElementName.CreatedOn);
+export var LinkIcon = createElement(ElementName.LinkIcon);
+export var ModifiedBy = createElement(ElementName.ModifiedBy);
+export var ModifiedOn = createElement(ElementName.ModifiedOn);
+export var Priority = createElement(ElementName.Priority);
+export var ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
+export var State = createElement(ElementName.State);
+export var SubscriberCount = createElement(ElementName.SubscriberCount);
+export var Title = createElement(ElementName.Title);

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

@@ -1,89 +1,33 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-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; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
 import React from 'react';
-import { B400, N800, N900, B500 } from '@atlaskit/theme/colors';
-import { h200, h400, h600, h800 } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { css, jsx } from '@emotion/core';
+import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
+import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../utils';
+import { tokens } from '../../../../../utils/token';
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
-
-var getSizeStyles = function getSizeStyles(size) {
-  var overrides = {
-    marginTop: 'unset'
-  };
-
-  switch (size) {
-    case SmartLinkSize.XLarge:
-      return _objectSpread(_objectSpread({}, h800()), overrides);
-
-    case SmartLinkSize.Large:
-      return _objectSpread(_objectSpread({}, h600()), overrides);
-
-    case SmartLinkSize.Medium:
-      return _objectSpread(_objectSpread({}, h400()), overrides);
-
-    case SmartLinkSize.Small:
-    default:
-      return _objectSpread(_objectSpread({}, h200()), overrides);
-  }
-};
+var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n"])));
 
 var getThemeStyles = function getThemeStyles(theme) {
   switch (theme) {
     case SmartLinkTheme.Black:
-      return {
-        color: token('color.text.subtle', N800),
-        fontWeight: 500,
-        ':active': {
-          color: token('color.text', N900)
-        },
-        ':hover': {
-          color: token('color.text.subtle', N800),
-          textDecoration: 'underline'
-        }
-      };
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), tokens.blackLink, tokens.blackLinkPressed, tokens.blackLink);
 
     case SmartLinkTheme.Link:
     default:
-      return {
-        color: token('color.link', B400),
-        ':active': {
-          color: token('color.link.pressed', B500)
-        },
-        ':hover': {
-          color: token('color.link', B400),
-          textDecoration: 'underline'
-        }
-      };
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), tokens.blueLink, tokens.blueLinkPressed, tokens.blueLink);
   }
 };
 
-var getTruncateStyles = function getTruncateStyles(maxLines) {
-  var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
-  return {
-    display: '-webkit-box',
-    flex: '1 1 auto',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    wordBreak: 'break-word',
-    WebkitLineClamp: maxLines,
-    WebkitBoxOrient: 'vertical',
-    // Fallback options.
-    maxHeight: "".concat((maxLines * lineHeight).toFixed(3), "em")
-  };
-};
-
-var getStyles = function getStyles(size, theme, maxLines) {
-  var sizeStyles = getSizeStyles(size);
-  return css(_objectSpread(_objectSpread(_objectSpread({}, sizeStyles), getTruncateStyles(maxLines, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.lineHeight)), getThemeStyles(theme)));
+var getAnchorStyles = function getAnchorStyles(size, theme, maxLines) {
+  var sizeStyles = getLinkSizeStyles(size);
+  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) {
@@ -109,12 +53,18 @@ var Link = function Link(_ref) {
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? SmartLinkTheme.Link : _ref$theme,
       url = _ref.url;
-  return jsx("a", {
-    css: getStyles(size, theme, getMaxLines(maxLines)),
-    href: url,
+  return jsx("span", {
+    css: containerStyles
+  }, jsx(Tooltip, {
+    content: text,
+    testId: "".concat(testId, "-tooltip"),
+    tag: "span"
+  }, jsx("a", {
+    css: getAnchorStyles(size, theme, getMaxLines(maxLines)),
     "data-smart-element-link": true,
-    "data-testid": testId
-  }, text);
+    "data-testid": testId,
+    href: url
+  }, text)));
 };
 
 export default Link;

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

@@ -0,0 +1,32 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import AtlaskitLozenge from '@atlaskit/lozenge';
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: inherit;\n"])));
+
+var Lozenge = function Lozenge(_ref) {
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+      text = _ref.text,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
+
+  if (!text) {
+    return null;
+  }
+
+  return jsx("span", {
+    css: styles,
+    "data-fit-to-content": true,
+    "data-smart-element-lozenge": true
+  }, jsx(AtlaskitLozenge, {
+    appearance: appearance,
+    testId: testId
+  }, text));
+};
+
+export default Lozenge;

package/dist/esm/view/FlexibleCard/components/elements/lozenge/types.js

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

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

@@ -0,0 +1,29 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { getFormattedMessage, getTruncateStyles } from '../../utils';
+import { tokens } from '../../../../../utils/token';
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), tokens.text, getTruncateStyles(1));
+
+var Text = function Text(_ref) {
+  var content = _ref.content,
+      message = _ref.message,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-text' : _ref$testId;
+
+  if (!message && !content) {
+    return null;
+  }
+
+  return jsx("span", {
+    css: styles,
+    "data-smart-element-text": true,
+    "data-testid": testId
+  }, getFormattedMessage(message) || content);
+};
+
+export default Text;

package/dist/esm/view/FlexibleCard/components/elements/text/types.js

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