@atlaskit/smart-card 17.2.0 → 17.3.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/smart-card
 
+## 17.3.2
+
+### Patch Changes
+
+- [`02ed34221ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/02ed34221ef) - Flexible UI: Add Snippet element
+
+## 17.3.1
+
+### Patch Changes
+
+- [`66dc86e0331`](https://bitbucket.org/atlassian/atlassian-frontend/commits/66dc86e0331) - Flexible UI: Check for null element
+
+## 17.3.0
+
+### Minor Changes
+
+- [`dab29fc6697`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dab29fc6697) - [ux] Flexible UI: AvatarGroup sizing updated for small and medium size
+
+### Patch Changes
+
+- [`25408fac413`](https://bitbucket.org/atlassian/atlassian-frontend/commits/25408fac413) - Flexible UI: Add MetadataBlock example
+
+## 17.2.1
+
+### Patch Changes
+
+- [`1d701660954`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1d701660954) - Refactored deleteAction into a re-usable action component
+
 ## 17.2.0
 
 ### Minor Changes

package/dist/cjs/constants.js

@@ -60,7 +60,20 @@ exports.SmartLinkTheme = SmartLinkTheme;
   SmartLinkTheme["Link"] = "link";
 })(SmartLinkTheme || (exports.SmartLinkTheme = SmartLinkTheme = {}));
 
-var SmartLinkWidth;
+var SmartLinkWidth; // 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)
+
 exports.SmartLinkWidth = SmartLinkWidth;
 
 (function (SmartLinkWidth) {
@@ -82,6 +95,7 @@ exports.ElementName = ElementName;
   ElementName["ModifiedOn"] = "ModifiedOn";
   ElementName["Priority"] = "Priority";
   ElementName["ProgrammingLanguage"] = "ProgrammingLanguage";
+  ElementName["Snippet"] = "Snippet";
   ElementName["State"] = "State";
   ElementName["SubscriberCount"] = "SubscriberCount";
   ElementName["Title"] = "Title";

package/dist/cjs/extractors/flexible/index.js

@@ -43,6 +43,8 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     modifiedOn: (0, _extractDateUpdated.extractDateUpdated)(data),
     priority: (0, _extractPriority.default)(data),
     programmingLanguage: (0, _utils.extractProgrammingLanguage)(data),
+    snippet: (0, _primitives.extractSummary)(data) || undefined,
+    // Explicitly set here to remove an empty string
     state: (0, _lozenge.extractLozenge)(data),
     subscriberCount: (0, _utils.extractSubscriberCount)(data),
     title: (0, _primitives.extractTitle)(data) || url,

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/actions/{delete-action → action}/index.js

@@ -11,22 +11,16 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
-
 var _core = require("@emotion/core");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
-var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
-
 var _constants = require("../../../../../constants");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _utils = require("../../utils");
 
-var _messages = require("../../../../../messages");
-
 var _token = require("../../../../../utils/token");
 
 var _utils2 = require("../../../../../utils");
@@ -46,38 +40,59 @@ var getWidth = function getWidth(size) {
   }
 };
 
-var getStyles = function getStyles(size) {
+var getIconStyles = function getIconStyles(size) {
   return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), _token.tokens.actionIcon, (0, _utils.getIconSizeStyles)(getWidth(size)));
 };
 
-var DeleteAction = function DeleteAction(_ref) {
-  var _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
-      content = _ref.content,
-      onClick = _ref.onClick,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-action-delete-action' : _ref$testId;
+var ActionIcon = function ActionIcon(_ref) {
+  var size = _ref.size,
+      testId = _ref.testId,
+      icon = _ref.icon;
+  return (0, _core.jsx)("span", {
+    css: getIconStyles(size),
+    "data-testid": "".concat(testId, "-icon")
+  }, icon);
+};
+
+var Action = function Action(_ref2) {
+  var _ref2$appearance = _ref2.appearance,
+      appearance = _ref2$appearance === void 0 ? 'subtle' : _ref2$appearance,
+      content = _ref2.content,
+      onClick = _ref2.onClick,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _constants.SmartLinkSize.Medium : _ref2$size,
+      _ref2$testId = _ref2.testId,
+      testId = _ref2$testId === void 0 ? 'smart-action' : _ref2$testId,
+      icon = _ref2.icon,
+      _ref2$iconPosition = _ref2.iconPosition,
+      iconPosition = _ref2$iconPosition === void 0 ? 'before' : _ref2$iconPosition,
+      tooltipMessage = _ref2.tooltipMessage;
 
   if (!onClick) {
     return null;
   }
 
+  var iconBefore = iconPosition === 'before' ? (0, _core.jsx)(ActionIcon, {
+    size: size,
+    testId: testId,
+    icon: icon
+  }) : undefined;
+  var iconAfter = iconPosition === 'after' ? (0, _core.jsx)(ActionIcon, {
+    size: size,
+    testId: testId,
+    icon: icon
+  }) : undefined;
   return (0, _core.jsx)(_tooltip.default, {
-    content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.delete)
+    content: tooltipMessage
   }, (0, _core.jsx)(_customThemeButton.default, {
     spacing: "none",
     appearance: appearance,
     testId: testId,
-    onClick: (0, _utils2.handleOnClick)(onClick)
-  }, content || (0, _core.jsx)("span", {
-    css: getStyles(size),
-    "data-testid": "".concat(testId, "-icon")
-  }, (0, _core.jsx)(_cross.default, {
-    label: "Delete"
-  }))));
+    onClick: (0, _utils2.handleOnClick)(onClick),
+    iconBefore: iconBefore,
+    iconAfter: iconAfter
+  }, content));
 };
 
-var _default = DeleteAction;
+var _default = Action;
 exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/actions/index.js

@@ -12,5 +12,7 @@ var _utils = require("./utils");
 // Attention: Keep the export name and action name the same.
 // This will help reducing the code for mapping action inside
 // createAction and renderActionItems
-var DeleteAction = (0, _utils.createAction)(_constants.ActionName.DeleteAction);
+// UIActions infer that you do not need to get any data from the context.
+// DataActions infer that the action depends on the data from the context.
+var DeleteAction = (0, _utils.createUIAction)(_constants.ActionName.DeleteAction);
 exports.DeleteAction = DeleteAction;

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createAction = void 0;
+exports.createUIAction = exports.createDataAction = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -19,14 +19,27 @@ var _flexibleUiContext = require("../../../../state/flexible-ui-context");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _deleteAction = _interopRequireDefault(require("./delete-action"));
+var _action = _interopRequireDefault(require("./action"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("../../../../messages");
+
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var actionMappings = (0, _defineProperty2.default)({}, _constants.ActionName.DeleteAction, {
-  component: _deleteAction.default
+  component: _action.default,
+  props: {
+    testId: 'smart-action-delete-action',
+    icon: /*#__PURE__*/_react.default.createElement(_cross.default, {
+      label: "Delete"
+    }),
+    toolTipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete)
+  }
 });
 
 var getContextKey = function getContextKey(name) {
@@ -43,13 +56,12 @@ var getActionData = function getActionData(actionName, contextKey, context) {
   var data = context[contextKey];
 
   switch (actionName) {
-    case _constants.ActionName.DeleteAction:
     default:
       return data;
   }
 };
 
-var createAction = function createAction(name) {
+var createDataAction = function createDataAction(name) {
   var _ref = actionMappings[name] || {},
       BaseAction = _ref.component,
       props = _ref.props;
@@ -67,4 +79,20 @@ var createAction = function createAction(name) {
   };
 };
 
-exports.createAction = createAction;
+exports.createDataAction = createDataAction;
+
+var createUIAction = function createUIAction(name) {
+  var _ref2 = actionMappings[name] || {},
+      BaseAction = _ref2.component,
+      props = _ref2.props;
+
+  if (!BaseAction) {
+    throw Error("Action ".concat(name, " does not exist."));
+  }
+
+  return function (overrides) {
+    return /*#__PURE__*/_react.default.createElement(BaseAction, (0, _extends2.default)({}, props, overrides));
+  };
+};
+
+exports.createUIAction = createUIAction;

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

@@ -19,7 +19,7 @@ var _constants = require("../../../../../constants");
 
 var _templateObject;
 
-var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 0;\n"])));
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 1rem;\n"])));
 
 var ActionGroup = function ActionGroup(_ref) {
   var _ref$items = _ref.items,

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

@@ -37,18 +37,32 @@ 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.
+  //    sides so they line up nicely.
   // 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 lineHeight = getLineHeight(size);
   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 getLineHeight = function getLineHeight(size) {
+  // The maximum height of all elements in specific size.
+  // These heights belongs to AvatarGroup.
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Large:
+      return 1.75;
+
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      return 1.5;
+  }
+};
+
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {
     return DEFAULT_MAX_LINES;

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

@@ -7,16 +7,18 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderElementItems = exports.renderChildren = exports.renderActionItems = exports.getGapSize = exports.getBaseStyles = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.renderElementItems = exports.renderChildren = exports.renderActionItems = exports.getGapSize = exports.getBaseStyles = exports.ElementDisplaySchema = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _core = require("@emotion/core");
@@ -36,12 +38,15 @@ var _elementGroup = _interopRequireDefault(require("./element-group"));
 var _excluded = ["name"],
     _excluded2 = ["name"];
 
-var _templateObject, _templateObject2, _templateObject3;
+var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), _ElementDisplaySchema);
+exports.ElementDisplaySchema = ElementDisplaySchema;
+
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {
     case _constants.SmartLinkDirection.Vertical:
@@ -82,6 +87,16 @@ var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _actionGroup.default;
 };
 
+var isElementDisplayValid = function isElementDisplayValid(name, display) {
+  var _ElementDisplaySchema2, _ElementDisplaySchema3;
+
+  return (_ElementDisplaySchema2 = (_ElementDisplaySchema3 = ElementDisplaySchema[name]) === null || _ElementDisplaySchema3 === void 0 ? void 0 : _ElementDisplaySchema3.includes(display)) !== null && _ElementDisplaySchema2 !== void 0 ? _ElementDisplaySchema2 : false;
+};
+
+var isElementNull = function isElementNull(children) {
+  return Boolean(children.type() === null);
+};
+
 var isElementOrElementGroup = function isElementOrElementGroup(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && ((0, _flexible.isFlexibleUiElement)(node) || node.type === _elementGroup.default);
 };
@@ -104,15 +119,20 @@ exports.renderChildren = renderChildren;
 
 var renderElementItems = function renderElementItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var display = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inline';
   var elements = items.reduce(function (acc, curr, idx) {
     var name = curr.name,
         props = (0, _objectWithoutProperties2.default)(curr, _excluded);
     var Element = Elements[name];
 
-    if (Element) {
-      return [].concat((0, _toConsumableArray2.default)(acc), [/*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
+    if (Element && isElementDisplayValid(name, display)) {
+      var element = /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
         key: idx
-      }, props))]);
+      }, props));
+
+      if (!isElementNull(element)) {
+        return [].concat((0, _toConsumableArray2.default)(acc), [element]);
+      }
     }
 
     return acc;

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

@@ -7,14 +7,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _core = require("@emotion/core");
+
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 
 var _constants = require("../../../../../constants");
 
+var _templateObject;
+
 var MAX_COUNT = 4;
 
+var getStyles = function getStyles(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Large:
+      // Default AK small size
+      return;
+
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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,
@@ -29,13 +49,15 @@ var AvatarGroup = function AvatarGroup(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+  return (0, _core.jsx)("span", {
+    css: getStyles(size)
+  }, (0, _core.jsx)(_avatarGroup.default, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
     data: items,
     testId: testId
-  });
+  }));
 };
 
 var _default = AvatarGroup;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title = exports.SubscriberCount = exports.State = exports.ProgrammingLanguage = exports.Priority = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
+exports.Title = exports.SubscriberCount = exports.State = exports.Snippet = exports.ProgrammingLanguage = exports.Priority = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
 
 var _utils = require("./utils");
 
@@ -32,6 +32,8 @@ var Priority = (0, _utils.createElement)(_constants.ElementName.Priority);
 exports.Priority = Priority;
 var ProgrammingLanguage = (0, _utils.createElement)(_constants.ElementName.ProgrammingLanguage);
 exports.ProgrammingLanguage = ProgrammingLanguage;
+var Snippet = (0, _utils.createElement)(_constants.ElementName.Snippet);
+exports.Snippet = Snippet;
 var State = (0, _utils.createElement)(_constants.ElementName.State);
 exports.State = State;
 var SubscriberCount = (0, _utils.createElement)(_constants.ElementName.SubscriberCount);

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

@@ -19,10 +19,14 @@ var _token = require("../../../../../utils/token");
 
 var _templateObject;
 
-var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(1));
+var getStyles = function getStyles(maxLines) {
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(maxLines));
+};
 
 var Text = function Text(_ref) {
   var content = _ref.content,
+      _ref$maxLines = _ref.maxLines,
+      maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
       message = _ref.message,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-text' : _ref$testId;
@@ -32,7 +36,7 @@ var Text = function Text(_ref) {
   }
 
   return (0, _core.jsx)("span", {
-    css: styles,
+    css: getStyles(maxLines),
     "data-smart-element-text": true,
     "data-testid": testId
   }, (0, _utils.getFormattedMessage)(message) || content);

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

@@ -63,6 +63,11 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   props: {
     icon: _constants.IconType.ProgrammingLanguage
   }
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Snippet, {
+  component: _text.default,
+  props: {
+    maxLines: 3
+  }
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.State, {
   component: _lozenge.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.SubscriberCount, {
@@ -84,17 +89,6 @@ var getContextKey = function getContextKey(name) {
   return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
 };
 
-var getFormattedMessage = function getFormattedMessage(descriptor, value) {
-  return value ? {
-    message: {
-      descriptor: descriptor,
-      values: {
-        context: value
-      }
-    }
-  } : undefined;
-};
-
 var getData = function getData(elementName, contextKey, context) {
   if (!context) {
     return undefined;
@@ -103,52 +97,81 @@ var getData = function getData(elementName, contextKey, context) {
   var data = context[contextKey];
 
   switch (elementName) {
+    case _constants.ElementName.AuthorGroup:
+    case _constants.ElementName.CollaboratorGroup:
+      return toAvatarGroupProps(data);
+
     case _constants.ElementName.CommentCount:
     case _constants.ElementName.ProgrammingLanguage:
     case _constants.ElementName.SubscriberCount:
-      return {
-        label: data
-      };
-
-    case _constants.ElementName.AuthorGroup:
-      return {
-        items: context.authorGroup
-      };
-
-    case _constants.ElementName.CollaboratorGroup:
-      return {
-        items: context.collaboratorGroup
-      };
+      return toBadgeProps(data);
 
     case _constants.ElementName.CreatedBy:
-      return getFormattedMessage(_messages.messages.created_by, context.createdBy);
+      return toFormattedTextProps(_messages.messages.created_by, context.createdBy);
+
+    case _constants.ElementName.CreatedOn:
+      return toDateTimeProps('created', context.createdOn);
 
     case _constants.ElementName.ModifiedBy:
-      return getFormattedMessage(_messages.messages.modified_by, context.modifiedBy);
+      return toFormattedTextProps(_messages.messages.modified_by, context.modifiedBy);
 
     case _constants.ElementName.ModifiedOn:
-      return context.modifiedOn ? {
-        date: new Date(context.modifiedOn),
-        type: 'modified'
-      } : undefined;
+      return toDateTimeProps('modified', context.modifiedOn);
 
-    case _constants.ElementName.CreatedOn:
-      return context.createdOn ? {
-        date: new Date(context.createdOn),
-        type: 'created'
-      } : undefined;
+    case _constants.ElementName.Snippet:
+      return toTextProps(data);
 
     case _constants.ElementName.Title:
-      return {
-        text: context.title,
-        url: context.url
-      };
+      return toLinkProps(context.title, context.url);
 
     default:
       return data;
   }
 };
 
+var toAvatarGroupProps = function toAvatarGroupProps(items) {
+  return items ? {
+    items: items
+  } : undefined;
+};
+
+var toBadgeProps = function toBadgeProps(label) {
+  return label ? {
+    label: label
+  } : undefined;
+};
+
+var toDateTimeProps = function toDateTimeProps(type, dateString) {
+  return dateString ? {
+    date: new Date(dateString),
+    type: type
+  } : undefined;
+};
+
+var toFormattedTextProps = function toFormattedTextProps(descriptor, context) {
+  return context ? {
+    message: {
+      descriptor: descriptor,
+      values: {
+        context: context
+      }
+    }
+  } : undefined;
+};
+
+var toLinkProps = function toLinkProps(text, url) {
+  return text ? {
+    text: text,
+    url: url
+  } : undefined;
+};
+
+var toTextProps = function toTextProps(content) {
+  return content ? {
+    content: content
+  } : undefined;
+};
+
 var createElement = function createElement(name) {
   var _ref = elementMappings[name] || {},
       BaseElement = _ref.component,