@atlaskit/smart-card 17.3.1 → 17.4.2

package/dist/cjs/index.js

@@ -101,6 +101,12 @@ Object.defineProperty(exports, "SmartLinkTheme", {
     return _constants.SmartLinkTheme;
   }
 });
+Object.defineProperty(exports, "SnippetBlock", {
+  enumerable: true,
+  get: function get() {
+    return _blocks.SnippetBlock;
+  }
+});
 Object.defineProperty(exports, "TitleBlock", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/flexible.js

@@ -19,8 +19,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 isFlexibleUiCard = function isFlexibleUiCard(appearance, children) {
-  if ((appearance === 'inline' || appearance === 'block') && children && _react.default.Children.toArray(children).some(function (child) {
+var isFlexibleUiCard = function isFlexibleUiCard(children) {
+  if (children && _react.default.Children.toArray(children).some(function (child) {
     return isFlexibleUiBlock(child);
   })) {
     return true;

package/dist/cjs/utils/token.js

@@ -29,6 +29,7 @@ var tokens = {
   elevation: safeToken('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
   errorMessage: safeToken('color.text.disabled', '#6B778C'),
   errorMessageHover: safeToken('color.text.subtle', '#8993A4'),
+  snippet: safeToken('color.text', '#172B4D'),
   text: safeToken('color.text.subtlest', '#626F86')
 };
 exports.tokens = tokens;

package/dist/cjs/version.json

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

package/dist/cjs/view/CardWithUrl/component.js

@@ -109,7 +109,7 @@ function CardWithUrlContent(_ref) {
     throw error;
   }
 
-  if ((0, _flexible.isFlexibleUiCard)(appearance, children)) {
+  if ((0, _flexible.isFlexibleUiCard)(children)) {
     return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
       cardState: state,
       onAuthorize: services.length && handleAuthorize || undefined,

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

@@ -11,6 +11,12 @@ Object.defineProperty(exports, "MetadataBlock", {
     return _metadataBlock.default;
   }
 });
+Object.defineProperty(exports, "SnippetBlock", {
+  enumerable: true,
+  get: function get() {
+    return _snippetBlock.default;
+  }
+});
 Object.defineProperty(exports, "TitleBlock", {
   enumerable: true,
   get: function get() {
@@ -18,6 +24,8 @@ Object.defineProperty(exports, "TitleBlock", {
   }
 });
 
-var _titleBlock = _interopRequireDefault(require("./title-block"));
+var _metadataBlock = _interopRequireDefault(require("./metadata-block"));
+
+var _snippetBlock = _interopRequireDefault(require("./snippet-block"));
 
-var _metadataBlock = _interopRequireDefault(require("./metadata-block"));
+var _titleBlock = _interopRequireDefault(require("./title-block"));

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

@@ -0,0 +1,51 @@
+"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 _react = _interopRequireDefault(require("react"));
+
+var _block = _interopRequireDefault(require("../block"));
+
+var _constants = require("../../../../../constants");
+
+var _elements = require("../../elements");
+
+var _utils = require("../../utils");
+
+var _excluded = ["maxLines", "status", "testId"];
+var DEFAULT_MAX_LINES = 3;
+var MAXIMUM_MAX_LINES = 3;
+var MINIMUM_MAX_LINES = 1;
+
+var SnippetBlock = function SnippetBlock(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+      maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-snippet' : _ref$testId,
+      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  if (status !== _constants.SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  var snippetMaxLines = (0, _utils.getMaxLines)(maxLines, DEFAULT_MAX_LINES, MAXIMUM_MAX_LINES, MINIMUM_MAX_LINES);
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/_react.default.createElement(_elements.Snippet, {
+    maxLines: snippetMaxLines
+  }));
+};
+
+var _default = SnippetBlock;
+exports.default = _default;

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

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

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']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['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/common/atlaskit-icon/index.js

@@ -300,6 +300,8 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
     case _constants.IconType.Jira:
       // Logo component has a different prop set from other icon components
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
+        "data-testId": testId // Confluence and Jira imports don't have native testId prop
+        ,
         textColor: _colors.N700,
         iconColor: _colors.B200,
         iconGradientStart: _colors.B400,

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

@@ -34,7 +34,7 @@ var iconStyles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _tag
 var labelStyles = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n"])), _token.tokens.badgeText);
 var messageMapper = (_messageMapper = {}, (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityBlocker, _messages.messages.priority_blocker), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityCritical, _messages.messages.priority_critical), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityHigh, _messages.messages.priority_high), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityHighest, _messages.messages.priority_highest), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityLow, _messages.messages.priority_low), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityLowest, _messages.messages.priority_lowest), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMajor, _messages.messages.priority_major), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMedium, _messages.messages.priority_medium), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMinor, _messages.messages.priority_minor), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityTrivial, _messages.messages.priority_trivial), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityUndefined, _messages.messages.priority_undefined), _messageMapper);
 
-var getFormattedMessageOrLabel = function getFormattedMessageOrLabel(icon, content) {
+var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
   if (icon) {
     var descriptor = messageMapper[icon];
 
@@ -44,8 +44,6 @@ var getFormattedMessageOrLabel = function getFormattedMessageOrLabel(icon, conte
       });
     }
   }
-
-  return content;
 };
 
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
@@ -73,7 +71,7 @@ var Badge = function Badge(_ref) {
       label = _ref.label,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId;
-  var formattedMessageOrLabel = getFormattedMessageOrLabel(icon, label);
+  var formattedMessageOrLabel = getFormattedMessageFromIcon(icon) || label;
   var badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
 
   if (!formattedMessageOrLabel || !badgeIcon) {

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.Provider = 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,9 +32,13 @@ 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);
 exports.SubscriberCount = SubscriberCount;
 var Title = (0, _utils.createElement)(_constants.ElementName.Title);
-exports.Title = Title;
+exports.Title = Title;
+var Provider = (0, _utils.createElement)(_constants.ElementName.Provider);
+exports.Provider = Provider;

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

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

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

@@ -35,12 +35,15 @@ var _messages = require("../../../../messages");
 
 var _dateTime = _interopRequireDefault(require("./date-time"));
 
+var _token = require("../../../../utils/token");
+
 var _elementMappings;
 
 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 SNIPPET_DEFAULT_MAX_LINES = 3;
 var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.AuthorGroup, {
   component: _avatarGroup.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.CollaboratorGroup, {
@@ -63,6 +66,12 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   props: {
     icon: _constants.IconType.ProgrammingLanguage
   }
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Snippet, {
+  component: _text.default,
+  props: {
+    color: _token.tokens.snippet,
+    maxLines: SNIPPET_DEFAULT_MAX_LINES
+  }
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.State, {
   component: _lozenge.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.SubscriberCount, {
@@ -76,6 +85,8 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   component: _dateTime.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.ModifiedOn, {
   component: _dateTime.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Provider, {
+  component: _badge.default
 }), _elementMappings);
 
 var getContextKey = function getContextKey(name) {
@@ -113,6 +124,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 +172,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/cjs/view/FlexibleCard/components/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTruncateStyles = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
+exports.getTruncateStyles = exports.getMaxLines = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -76,6 +76,20 @@ var getLinkSizeStyles = function getLinkSizeStyles(size) {
 
 exports.getLinkSizeStyles = getLinkSizeStyles;
 
+var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
+  if (value > max) {
+    return defaultValue;
+  }
+
+  if (value < min) {
+    return min;
+  }
+
+  return value;
+};
+
+exports.getMaxLines = getMaxLines;
+
 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    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/es2019/constants.js

@@ -1,4 +1,12 @@
+/**
+ * The alignment of Flexible UI component.
+ */
 export let SmartLinkAlignment;
+/**
+ * The direction of Flexible UI components. It establish the main-axis
+ * or how the child components laid out inside the parent component.
+ * Similar to flex's flex-direction concept.
+ */
 
 (function (SmartLinkAlignment) {
   SmartLinkAlignment["Left"] = "left";
@@ -6,6 +14,10 @@ export let SmartLinkAlignment;
 })(SmartLinkAlignment || (SmartLinkAlignment = {}));
 
 export let SmartLinkDirection;
+/**
+ * The positioning of the component within the parent component.
+ * Similar to flex's align-items or align-self concept.
+ */
 
 (function (SmartLinkDirection) {
   SmartLinkDirection["Horizontal"] = "horizontal";
@@ -13,6 +25,11 @@ export let SmartLinkDirection;
 })(SmartLinkDirection || (SmartLinkDirection = {}));
 
 export let SmartLinkPosition;
+/**
+ * The sizing options of the Flexible UI component. Every component
+ * has or inherits the sizing props. Implementation varies
+ * as per component.
+ */
 
 (function (SmartLinkPosition) {
   SmartLinkPosition["Top"] = "top";
@@ -20,6 +37,9 @@ export let SmartLinkPosition;
 })(SmartLinkPosition || (SmartLinkPosition = {}));
 
 export let SmartLinkSize;
+/**
+ * Smart Links link request status
+ */
 
 (function (SmartLinkSize) {
   SmartLinkSize["XLarge"] = "xlarge";
@@ -29,6 +49,10 @@ export let SmartLinkSize;
 })(SmartLinkSize || (SmartLinkSize = {}));
 
 export let SmartLinkStatus;
+/**
+ * Flexible UI theme available on the Card level.
+ * This determine the styling of the link.
+ */
 
 (function (SmartLinkStatus) {
   SmartLinkStatus["Pending"] = "pending";
@@ -42,6 +66,11 @@ export let SmartLinkStatus;
 })(SmartLinkStatus || (SmartLinkStatus = {}));
 
 export let SmartLinkTheme;
+/**
+ * Determines whether the container size will fit to the content
+ * or expand to the available width or the parent component.
+ * Similar to flex's flex-grow concept.
+ */
 
 (function (SmartLinkTheme) {
   SmartLinkTheme["Black"] = "black";
@@ -49,6 +78,22 @@ export let SmartLinkTheme;
 })(SmartLinkTheme || (SmartLinkTheme = {}));
 
 export let SmartLinkWidth;
+/**
+ * Flexible UI element name - each reflecting the link data its represented.
+ * When adding an element...
+ * 1) Create base element if it doesn't already existed.
+ *    Base element are inside src/view/FlexibleCard/components/elements.
+ *    E.g. Badge,DateTime, Icon, Lozenge, etc.
+ * 2) Update FlexibleUiContext with the new prop for data representing
+ *    the element, preferably with the same name as the element itself.
+ *    (src/state/flexible-ui-context/types.ts)
+ * 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
+ * 4) Set base element and data mapping
+ *    (src/view/FlexibleCard/components/elements/utils.tsx)
+ * 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
+ * 6) Update element ElementDisplaySchema for inline/block display
+ *    (src/view/FlexibleCard/components/blocks/utils.tsx)
+ */
 
 (function (SmartLinkWidth) {
   SmartLinkWidth["FitToContent"] = "fit-to-content";
@@ -56,6 +101,9 @@ export let SmartLinkWidth;
 })(SmartLinkWidth || (SmartLinkWidth = {}));
 
 export let ElementName;
+/**
+ * Flexible UI action (button)
+ */
 
 (function (ElementName) {
   ElementName["AuthorGroup"] = "AuthorGroup";
@@ -68,12 +116,17 @@ export let ElementName;
   ElementName["ModifiedOn"] = "ModifiedOn";
   ElementName["Priority"] = "Priority";
   ElementName["ProgrammingLanguage"] = "ProgrammingLanguage";
+  ElementName["Snippet"] = "Snippet";
   ElementName["State"] = "State";
   ElementName["SubscriberCount"] = "SubscriberCount";
   ElementName["Title"] = "Title";
+  ElementName["Provider"] = "Provider";
 })(ElementName || (ElementName = {}));
 
 export let ActionName;
+/**
+ * Flexible UI icons - each mapped to AK icons.
+ */
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";

package/dist/es2019/extractors/flexible/icon/extract-document-type-icon.js

@@ -3,25 +3,46 @@ import { IconType } from '../../../constants';
 const extractDocumentTypeIcon = (documentType, label) => {
   switch (documentType) {
     case 'schema:BlogPosting':
-      return [IconType.Blog, label || 'Blog'];
+      return {
+        icon: IconType.Blog,
+        label: label || 'Blog'
+      };
 
     case 'schema:DigitalDocument':
-      return [IconType.File, label || 'File'];
+      return {
+        icon: IconType.File,
+        label: label || 'File'
+      };
 
     case 'schema:TextDigitalDocument':
-      return [IconType.Document, label || 'Document'];
+      return {
+        icon: IconType.Document,
+        label: label || 'Document'
+      };
 
     case 'schema:PresentationDigitalDocument':
-      return [IconType.Presentation, label || 'Presentation'];
+      return {
+        icon: IconType.Presentation,
+        label: label || 'Presentation'
+      };
 
     case 'schema:SpreadsheetDigitalDocument':
-      return [IconType.Spreadsheet, label || 'Spreadsheet'];
+      return {
+        icon: IconType.Spreadsheet,
+        label: label || 'Spreadsheet'
+      };
 
     case 'atlassian:Template':
-      return [IconType.Template, label || 'Template'];
+      return {
+        icon: IconType.Template,
+        label: label || 'Template'
+      };
 
     case 'atlassian:UndefinedLink':
-      return [IconType.Document, label || 'Undefined link'];
+      return {
+        icon: IconType.Document,
+        label: label || 'Undefined link'
+      };
 
     default:
       return undefined;