@atlaskit/smart-card 17.3.1 → 17.3.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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.3.1",
+	"version": "17.3.2",
 	"sideEffects": false
 }

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.getGapSize = exports.getBaseStyles = void 0;
+exports.renderElementItems = exports.renderChildren = exports.renderActionItems = exports.getGapSize = exports.getBaseStyles = exports.ElementDisplaySchema = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -17,6 +17,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 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,12 @@ 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);
 };
@@ -108,12 +119,13 @@ 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) {
+    if (Element && isElementDisplayValid(name, display)) {
       var element = /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
         key: idx
       }, props));

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, {
@@ -113,6 +118,9 @@ var getData = function getData(elementName, contextKey, context) {
     case _constants.ElementName.ModifiedOn:
       return toDateTimeProps('modified', context.modifiedOn);
 
+    case _constants.ElementName.Snippet:
+      return toTextProps(data);
+
     case _constants.ElementName.Title:
       return toLinkProps(context.title, context.url);
 
@@ -158,6 +166,12 @@ var toLinkProps = function toLinkProps(text, url) {
   } : undefined;
 };
 
+var toTextProps = function toTextProps(content) {
+  return content ? {
+    content: content
+  } : undefined;
+};
+
 var createElement = function createElement(name) {
   var _ref = elementMappings[name] || {},
       BaseElement = _ref.component,

package/dist/es2019/constants.js

@@ -48,7 +48,19 @@ export let SmartLinkTheme;
   SmartLinkTheme["Link"] = "link";
 })(SmartLinkTheme || (SmartLinkTheme = {}));
 
-export let SmartLinkWidth;
+export let 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)
 
 (function (SmartLinkWidth) {
   SmartLinkWidth["FitToContent"] = "fit-to-content";
@@ -68,6 +80,7 @@ export let ElementName;
   ElementName["ModifiedOn"] = "ModifiedOn";
   ElementName["Priority"] = "Priority";
   ElementName["ProgrammingLanguage"] = "ProgrammingLanguage";
+  ElementName["Snippet"] = "Snippet";
   ElementName["State"] = "State";
   ElementName["SubscriberCount"] = "SubscriberCount";
   ElementName["Title"] = "Title";

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

@@ -1,4 +1,4 @@
-import { extractLink, extractTitle } from '../common/primitives';
+import { extractLink, extractSummary, extractTitle } from '../common/primitives';
 import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
 import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount } from './utils';
@@ -26,6 +26,8 @@ const extractFlexibleUiContext = (response, renderers) => {
     modifiedOn: extractDateUpdated(data),
     priority: extractPriority(data),
     programmingLanguage: extractProgrammingLanguage(data),
+    snippet: extractSummary(data) || undefined,
+    // Explicitly set here to remove an empty string
     state: extractLozenge(data),
     subscriberCount: extractSubscriberCount(data),
     title: extractTitle(data) || url,

package/dist/es2019/version.json

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

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

@@ -1,12 +1,29 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { css } from '@emotion/core';
-import { SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
 import * as Elements from '../elements';
 import * as Actions from '../actions';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
-import ElementGroup from './element-group';
+import ElementGroup from './element-group'; // Determine whether the element can be display as inline/block.
+
+export const ElementDisplaySchema = {
+  [ElementName.AuthorGroup]: ['inline'],
+  [ElementName.CollaboratorGroup]: ['inline'],
+  [ElementName.CommentCount]: ['inline'],
+  [ElementName.CreatedBy]: ['inline'],
+  [ElementName.CreatedOn]: ['inline'],
+  [ElementName.LinkIcon]: ['inline'],
+  [ElementName.ModifiedBy]: ['inline'],
+  [ElementName.ModifiedOn]: ['inline'],
+  [ElementName.Priority]: ['inline'],
+  [ElementName.ProgrammingLanguage]: ['inline'],
+  [ElementName.Snippet]: ['block'],
+  [ElementName.State]: ['inline'],
+  [ElementName.SubscriberCount]: ['inline'],
+  [ElementName.Title]: ['inline']
+};
 
 const getDirectionStyles = direction => {
   switch (direction) {
@@ -62,6 +79,12 @@ export const getBaseStyles = (direction, size) => css`
 
 const isActionGroup = node => /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;
 
+const isElementDisplayValid = (name, display) => {
+  var _ElementDisplaySchema, _ElementDisplaySchema2;
+
+  return (_ElementDisplaySchema = (_ElementDisplaySchema2 = ElementDisplaySchema[name]) === null || _ElementDisplaySchema2 === void 0 ? void 0 : _ElementDisplaySchema2.includes(display)) !== null && _ElementDisplaySchema !== void 0 ? _ElementDisplaySchema : false;
+};
+
 const isElementNull = children => {
   return Boolean(children.type() === null);
 };
@@ -81,7 +104,7 @@ export const renderChildren = (children, size) => React.Children.map(children, c
 
   return child;
 });
-export const renderElementItems = (items = []) => {
+export const renderElementItems = (items = [], display = 'inline') => {
   const elements = items.reduce((acc, curr, idx) => {
     const {
       name,
@@ -89,7 +112,7 @@ export const renderElementItems = (items = []) => {
     } = curr;
     const Element = Elements[name];
 
-    if (Element) {
+    if (Element && isElementDisplayValid(name, display)) {
       const element = /*#__PURE__*/React.createElement(Element, _extends({
         key: idx
       }, props));

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

@@ -13,6 +13,7 @@ export const ModifiedBy = createElement(ElementName.ModifiedBy);
 export const ModifiedOn = createElement(ElementName.ModifiedOn);
 export const Priority = createElement(ElementName.Priority);
 export const ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
+export const Snippet = createElement(ElementName.Snippet);
 export const State = createElement(ElementName.State);
 export const SubscriberCount = createElement(ElementName.SubscriberCount);
 export const Title = createElement(ElementName.Title);

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

@@ -3,15 +3,17 @@ import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
-const styles = css`
+
+const getStyles = maxLines => css`
   color: ${tokens.text};
   font-size: 0.75rem;
   line-height: 1rem;
-  ${getTruncateStyles(1)}
+  ${getTruncateStyles(maxLines)}
 `;
 
 const Text = ({
   content,
+  maxLines = 1,
   message,
   testId = 'smart-element-text'
 }) => {
@@ -20,7 +22,7 @@ const Text = ({
   }
 
   return jsx("span", {
-    css: styles,
+    css: getStyles(maxLines),
     "data-smart-element-text": true,
     "data-testid": testId
   }, getFormattedMessage(message) || content);

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

@@ -41,6 +41,12 @@ const elementMappings = {
       icon: IconType.ProgrammingLanguage
     }
   },
+  [ElementName.Snippet]: {
+    component: Text,
+    props: {
+      maxLines: 3
+    }
+  },
   [ElementName.State]: {
     component: Lozenge
   },
@@ -96,6 +102,9 @@ const getData = (elementName, contextKey, context) => {
     case ElementName.ModifiedOn:
       return toDateTimeProps('modified', context.modifiedOn);
 
+    case ElementName.Snippet:
+      return toTextProps(data);
+
     case ElementName.Title:
       return toLinkProps(context.title, context.url);
 
@@ -141,6 +150,12 @@ const toLinkProps = (text, url) => {
   } : undefined;
 };
 
+const toTextProps = content => {
+  return content ? {
+    content
+  } : undefined;
+};
+
 export const createElement = name => {
   const {
     component: BaseElement,

package/dist/esm/constants.js

@@ -48,7 +48,19 @@ export var SmartLinkTheme;
   SmartLinkTheme["Link"] = "link";
 })(SmartLinkTheme || (SmartLinkTheme = {}));
 
-export var SmartLinkWidth;
+export 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)
 
 (function (SmartLinkWidth) {
   SmartLinkWidth["FitToContent"] = "fit-to-content";
@@ -68,6 +80,7 @@ export var ElementName;
   ElementName["ModifiedOn"] = "ModifiedOn";
   ElementName["Priority"] = "Priority";
   ElementName["ProgrammingLanguage"] = "ProgrammingLanguage";
+  ElementName["Snippet"] = "Snippet";
   ElementName["State"] = "State";
   ElementName["SubscriberCount"] = "SubscriberCount";
   ElementName["Title"] = "Title";

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

@@ -1,4 +1,4 @@
-import { extractLink, extractTitle } from '../common/primitives';
+import { extractLink, extractSummary, extractTitle } from '../common/primitives';
 import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
 import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount } from './utils';
@@ -26,6 +26,8 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     modifiedOn: extractDateUpdated(data),
     priority: extractPriority(data),
     programmingLanguage: extractProgrammingLanguage(data),
+    snippet: extractSummary(data) || undefined,
+    // Explicitly set here to remove an empty string
     state: extractLozenge(data),
     subscriberCount: extractSubscriberCount(data),
     title: extractTitle(data) || url,

package/dist/esm/version.json

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

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

@@ -2,19 +2,22 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["name"],
     _excluded2 = ["name"];
 
-var _templateObject, _templateObject2, _templateObject3;
+var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3;
 
 import React from 'react';
 import { css } from '@emotion/core';
-import { SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
 import * as Elements from '../elements';
 import * as Actions from '../actions';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
-import ElementGroup from './element-group';
+import ElementGroup from './element-group'; // Determine whether the element can be display as inline/block.
+
+export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _ElementDisplaySchema);
 
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {
@@ -51,6 +54,12 @@ var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;
 };
 
+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);
 };
@@ -74,13 +83,14 @@ export var renderChildren = function renderChildren(children, size) {
 };
 export 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 = _objectWithoutProperties(curr, _excluded);
 
     var Element = Elements[name];
 
-    if (Element) {
+    if (Element && isElementDisplayValid(name, display)) {
       var element = /*#__PURE__*/React.createElement(Element, _extends({
         key: idx
       }, props));

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

@@ -13,6 +13,7 @@ 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 Snippet = createElement(ElementName.Snippet);
 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/text/index.js

@@ -7,10 +7,15 @@ 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 getStyles = function getStyles(maxLines) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), tokens.text, getTruncateStyles(maxLines));
+};
 
 var 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;
@@ -20,7 +25,7 @@ var Text = function Text(_ref) {
   }
 
   return jsx("span", {
-    css: styles,
+    css: getStyles(maxLines),
     "data-smart-element-text": true,
     "data-testid": testId
   }, getFormattedMessage(message) || content);

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

@@ -36,6 +36,11 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   props: {
     icon: IconType.ProgrammingLanguage
   }
+}), _defineProperty(_elementMappings, ElementName.Snippet, {
+  component: Text,
+  props: {
+    maxLines: 3
+  }
 }), _defineProperty(_elementMappings, ElementName.State, {
   component: Lozenge
 }), _defineProperty(_elementMappings, ElementName.SubscriberCount, {
@@ -86,6 +91,9 @@ var getData = function getData(elementName, contextKey, context) {
     case ElementName.ModifiedOn:
       return toDateTimeProps('modified', context.modifiedOn);
 
+    case ElementName.Snippet:
+      return toTextProps(data);
+
     case ElementName.Title:
       return toLinkProps(context.title, context.url);
 
@@ -131,6 +139,12 @@ var toLinkProps = function toLinkProps(text, url) {
   } : undefined;
 };
 
+var toTextProps = function toTextProps(content) {
+  return content ? {
+    content: content
+  } : undefined;
+};
+
 export var createElement = function createElement(name) {
   var _ref = elementMappings[name] || {},
       BaseElement = _ref.component,

package/dist/types/constants.d.ts

@@ -45,6 +45,7 @@ export declare enum ElementName {
     ModifiedOn = "ModifiedOn",
     Priority = "Priority",
     ProgrammingLanguage = "ProgrammingLanguage",
+    Snippet = "Snippet",
     State = "State",
     SubscriberCount = "SubscriberCount",
     Title = "Title"

package/dist/types/state/flexible-ui-context/types.d.ts

@@ -2,6 +2,8 @@ import { LinkLozenge } from '../../extractors/common/lozenge/types';
 import { LinkPerson } from '../../extractors/common/person/types';
 import { IconType } from '../../constants';
 export declare type FlexibleUiDataContext = {
+    authorGroup?: LinkPerson[];
+    collaboratorGroup?: LinkPerson[];
     commentCount?: number;
     createdBy?: string;
     createdOn?: string;
@@ -10,12 +12,11 @@ export declare type FlexibleUiDataContext = {
     modifiedOn?: string;
     priority?: Icon;
     programmingLanguage?: string;
+    snippet?: string;
     subscriberCount?: number;
     state?: LinkLozenge;
     title?: string;
     url?: string;
-    authorGroup?: LinkPerson[];
-    collaboratorGroup?: LinkPerson[];
 };
 export declare type Icon = {
     icon?: IconType;

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { SerializedStyles } from '@emotion/core';
 import { ActionItem, ElementItem } from './types';
-import { SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+export declare type ElementDisplaySchemaType = 'inline' | 'block';
+export declare const ElementDisplaySchema: Record<ElementName, ElementDisplaySchemaType[]>;
 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;
+export declare const renderElementItems: (items?: ElementItem[], display?: ElementDisplaySchemaType) => React.ReactNode | undefined;
 export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize) => React.ReactNode | undefined;

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

@@ -16,6 +16,7 @@ export declare const ModifiedBy: import("react").FC<TextProps>;
 export declare const ModifiedOn: import("react").FC<DateTimeProps>;
 export declare const Priority: import("react").FC<BadgeProps>;
 export declare const ProgrammingLanguage: import("react").FC<BadgeProps>;
+export declare const Snippet: import("react").FC<TextProps>;
 export declare const State: import("react").FC<LozengeProps>;
 export declare const SubscriberCount: import("react").FC<BadgeProps>;
 export declare const Title: import("react").FC<LinkProps>;

package/dist/types/view/FlexibleCard/components/elements/text/types.d.ts

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

package/package.json

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