@atlaskit/smart-card 17.3.1 → 17.4.2

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';
@@ -7,6 +7,7 @@ import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractDateUpdated } from '../common/date/extractDateUpdated';
 import { extractDateCreated } from '../common/date/extractDateCreated';
 import extractPriority from './extract-priority';
+import extractProviderIcon from './icon/extract-provider-icon';
 
 var extractFlexibleUiContext = function extractFlexibleUiContext(response, renderers) {
   if (!response) {
@@ -26,9 +27,12 @@ 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,
+    provider: extractProviderIcon(data),
     url: url
   };
 };

package/dist/esm/index.js

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

package/dist/esm/utils/flexible.js

@@ -2,8 +2,8 @@ import React from 'react';
 import * as Blocks from '../view/FlexibleCard/components/blocks';
 import { TitleBlock } from '../view/FlexibleCard/components/blocks';
 import * as Elements from '../view/FlexibleCard/components/elements';
-export var isFlexibleUiCard = function isFlexibleUiCard(appearance, children) {
-  if ((appearance === 'inline' || appearance === 'block') && children && React.Children.toArray(children).some(function (child) {
+export var isFlexibleUiCard = function isFlexibleUiCard(children) {
+  if (children && React.Children.toArray(children).some(function (child) {
     return isFlexibleUiBlock(child);
   })) {
     return true;

package/dist/esm/utils/token.js

@@ -19,5 +19,6 @@ export 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')
 };

package/dist/esm/version.json

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

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

@@ -84,7 +84,7 @@ export function CardWithUrlContent(_ref) {
     throw error;
   }
 
-  if (isFlexibleUiCard(appearance, children)) {
+  if (isFlexibleUiCard(children)) {
     return /*#__PURE__*/React.createElement(FlexibleCard, {
       cardState: state,
       onAuthorize: services.length && handleAuthorize || undefined,

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

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

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

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["maxLines", "status", "testId"];
+import React from 'react';
+import Block from '../block';
+import { SmartLinkStatus } from '../../../../../constants';
+import { Snippet } from '../../elements';
+import { getMaxLines } from '../../utils';
+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 ? SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-snippet' : _ref$testId,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  if (status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  var snippetMaxLines = getMaxLines(maxLines, DEFAULT_MAX_LINES, MAXIMUM_MAX_LINES, MINIMUM_MAX_LINES);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/React.createElement(Snippet, {
+    maxLines: snippetMaxLines
+  }));
+};
+
+export default SnippetBlock;

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

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

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

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

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

@@ -17,7 +17,7 @@ var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLite
 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) {
+var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
   if (icon) {
     var descriptor = messageMapper[icon];
 
@@ -27,8 +27,6 @@ var getFormattedMessageOrLabel = function getFormattedMessageOrLabel(icon, conte
       });
     }
   }
-
-  return content;
 };
 
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
@@ -56,7 +54,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/esm/view/FlexibleCard/components/elements/index.js

@@ -13,6 +13,8 @@ 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);
+export var Title = createElement(ElementName.Title);
+export var Provider = createElement(ElementName.Provider);

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

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

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

@@ -14,6 +14,8 @@ import AvatarGroup from './avatar-group';
 import Text from './text';
 import { messages } from '../../../../messages';
 import DateTime from './date-time';
+import { tokens } from '../../../../utils/token';
+var SNIPPET_DEFAULT_MAX_LINES = 3;
 var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings, ElementName.AuthorGroup, {
   component: AvatarGroup
 }), _defineProperty(_elementMappings, ElementName.CollaboratorGroup, {
@@ -36,6 +38,12 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   props: {
     icon: IconType.ProgrammingLanguage
   }
+}), _defineProperty(_elementMappings, ElementName.Snippet, {
+  component: Text,
+  props: {
+    color: tokens.snippet,
+    maxLines: SNIPPET_DEFAULT_MAX_LINES
+  }
 }), _defineProperty(_elementMappings, ElementName.State, {
   component: Lozenge
 }), _defineProperty(_elementMappings, ElementName.SubscriberCount, {
@@ -49,6 +57,8 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   component: DateTime
 }), _defineProperty(_elementMappings, ElementName.ModifiedOn, {
   component: DateTime
+}), _defineProperty(_elementMappings, ElementName.Provider, {
+  component: Badge
 }), _elementMappings);
 
 var getContextKey = function getContextKey(name) {
@@ -86,6 +96,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 +144,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/esm/view/FlexibleCard/components/utils.js

@@ -51,6 +51,17 @@ export var getLinkSizeStyles = function getLinkSizeStyles(size) {
       return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        letter-spacing: 0em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
   }
 };
+export var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
+  if (value > max) {
+    return defaultValue;
+  }
+
+  if (value < min) {
+    return min;
+  }
+
+  return value;
+};
 export var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), maxLines, maxLines, lineHeight);

package/dist/types/__fixtures__/flexible-ui-data-context.d.ts

@@ -0,0 +1,3 @@
+import { FlexibleUiDataContext } from '../state/flexible-ui-context/types';
+declare const context: FlexibleUiDataContext;
+export default context;

package/dist/types/constants.d.ts

@@ -1,21 +1,41 @@
+/**
+ * The alignment of Flexible UI component.
+ */
 export declare enum SmartLinkAlignment {
     Left = "left",
     Right = "right"
 }
+/**
+ * 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.
+ */
 export declare enum SmartLinkDirection {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
+/**
+ * The positioning of the component within the parent component.
+ * Similar to flex's align-items or align-self concept.
+ */
 export declare enum SmartLinkPosition {
     Top = "top",
     Center = "center"
 }
+/**
+ * The sizing options of the Flexible UI component. Every component
+ * has or inherits the sizing props. Implementation varies
+ * as per component.
+ */
 export declare enum SmartLinkSize {
     XLarge = "xlarge",
     Large = "large",
     Medium = "medium",
     Small = "small"
 }
+/**
+ * Smart Links link request status
+ */
 export declare enum SmartLinkStatus {
     Pending = "pending",
     Resolving = "resolving",
@@ -26,14 +46,39 @@ export declare enum SmartLinkStatus {
     Unauthorized = "unauthorized",
     Fallback = "fallback"
 }
+/**
+ * Flexible UI theme available on the Card level.
+ * This determine the styling of the link.
+ */
 export declare enum SmartLinkTheme {
     Black = "black",
     Link = "link"
 }
+/**
+ * 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.
+ */
 export declare enum SmartLinkWidth {
     FitToContent = "fit-to-content",
     Flexible = "flexible"
 }
+/**
+ * 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)
+ */
 export declare enum ElementName {
     AuthorGroup = "AuthorGroup",
     CollaboratorGroup = "CollaboratorGroup",
@@ -45,13 +90,21 @@ export declare enum ElementName {
     ModifiedOn = "ModifiedOn",
     Priority = "Priority",
     ProgrammingLanguage = "ProgrammingLanguage",
+    Snippet = "Snippet",
     State = "State",
     SubscriberCount = "SubscriberCount",
-    Title = "Title"
+    Title = "Title",
+    Provider = "Provider"
 }
+/**
+ * Flexible UI action (button)
+ */
 export declare enum ActionName {
     DeleteAction = "DeleteAction"
 }
+/**
+ * Flexible UI icons - each mapped to AK icons.
+ */
 export declare enum IconType {
     Archive = "FileType:Archive",
     Audio = "FileType:Audio",

package/dist/types/extractors/flexible/icon/extract-provider-icon.d.ts

@@ -1,4 +1,4 @@
 import { JsonLd } from 'json-ld-types';
 import { IconDescriptor } from './types';
-declare const extractProviderIcon: (provider?: string | undefined, icon?: string | JsonLd.Primitives.LinkModel | JsonLd.Primitives.Image | undefined, label?: string | undefined) => IconDescriptor | undefined;
+declare const extractProviderIcon: (data?: JsonLd.Data.BaseData | undefined) => IconDescriptor | undefined;
 export default extractProviderIcon;

package/dist/types/extractors/flexible/icon/index.d.ts

@@ -3,10 +3,10 @@ import { JsonLd } from 'json-ld-types';
 import { IconType, SmartLinkStatus } from '../../../constants';
 import { CardProviderRenderers } from '../../../state/context/types';
 export declare const extractLinkIcon: (response: JsonLd.Response, renderers?: CardProviderRenderers | undefined) => {
-    icon: IconType | undefined;
-    label: string | undefined;
     render: (() => import("react").ReactNode) | undefined;
-    url: string | undefined;
+    icon?: IconType | undefined;
+    label?: string | undefined;
+    url?: string | undefined;
 };
 export declare const extractErrorIcon: (response?: JsonLd.Response<JsonLd.Data.BaseData> | undefined, status?: SmartLinkStatus | undefined) => {
     icon: IconType | undefined;

package/dist/types/extractors/flexible/icon/types.d.ts

@@ -1,2 +1,6 @@
 import { IconType } from '../../../constants';
-export declare type IconDescriptor = [IconType?, string?, string?];
+export declare type IconDescriptor = {
+    icon?: IconType;
+    label?: string;
+    url?: string;
+};

package/dist/types/index.d.ts

@@ -17,5 +17,5 @@ export { useSmartLinkEvents } from './view/SmartLinkEvents/useSmartLinkEvents';
 export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName, } from './classNames';
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback';
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, } from './constants';
-export { MetadataBlock, TitleBlock, } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, SnippetBlock, TitleBlock, } from './view/FlexibleCard/components/blocks';
 export type { ActionItem, ElementItem, } from './view/FlexibleCard/components/blocks/types';

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,12 @@ export declare type FlexibleUiDataContext = {
     modifiedOn?: string;
     priority?: Icon;
     programmingLanguage?: string;
+    snippet?: string;
     subscriberCount?: number;
     state?: LinkLozenge;
     title?: string;
     url?: string;
-    authorGroup?: LinkPerson[];
-    collaboratorGroup?: LinkPerson[];
+    provider?: Icon;
 };
 export declare type Icon = {
     icon?: IconType;

package/dist/types/utils/flexible.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { CardAppearance } from '../view/Card';
-export declare const isFlexibleUiCard: (appearance: CardAppearance, children?: React.ReactNode) => boolean;
+export declare const isFlexibleUiCard: (children?: React.ReactNode) => boolean;
 export declare const isFlexibleUiBlock: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiElement: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiTitleBlock: (node: React.ReactNode) => boolean;

package/dist/types/utils/token.d.ts

@@ -11,5 +11,6 @@ export declare const tokens: {
     elevation: any;
     errorMessage: any;
     errorMessageHover: any;
+    snippet: any;
     text: any;
 };

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

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

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

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

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

@@ -0,0 +1,4 @@
+import { BlockProps } from '../types';
+export declare type SnippetBlockProps = BlockProps & {
+    maxLines?: number;
+};

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,8 @@ 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>;
+export declare const Provider: import("react").FC<BadgeProps>;

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

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

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

@@ -6,4 +6,5 @@ export declare const getFormattedMessage: (message?: MessageProps | undefined) =
 export declare const getIconSizeStyles: (width: string) => SerializedStyles;
 export declare const getLinkLineHeight: (size: SmartLinkSize) => string;
 export declare const getLinkSizeStyles: (size: SmartLinkSize) => SerializedStyles;
+export declare const getMaxLines: (value: number, defaultValue: number, max: number, min: number) => number;
 export declare const getTruncateStyles: (maxLines: number, lineHeight?: string) => SerializedStyles;

package/package.json

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