@atlaskit/smart-card 18.0.14 → 18.0.15

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

@@ -1,30 +1,34 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["status", "testId"];
-import React from 'react';
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["actions", "anchorTarget", "maxLines", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme"];
+
+var _templateObject, _templateObject2;
+
+import React, { useState } from 'react';
+import { css } from '@emotion/core';
 import { SmartLinkStatus } from '../../../../../constants';
 import TitleBlockResolvedView from './resolved';
 import TitleBlockErroredView from './errored';
 import TitleBlockResolvingView from './resolving';
+import ActionGroup from '../action-group';
+import { Title } from '../../elements';
 
-var TitleBlock = function TitleBlock(_ref) {
-  var _ref$status = _ref.status,
-      status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-block-title' : _ref$testId,
-      props = _objectWithoutProperties(_ref, _excluded);
+var getActionStyles = function getActionStyles(showOnHover, isOpen) {
+  if (showOnHover && !isOpen) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      .actions-button-group {\n        visibility: hidden;\n      }\n\n      &:hover {\n        .actions-button-group {\n          visibility: visible;\n        }\n      }\n    "])));
+  }
+};
 
+var getTitleBlockViewComponent = function getTitleBlockViewComponent(status) {
   switch (status) {
     case SmartLinkStatus.Pending:
     case SmartLinkStatus.Resolving:
-      return /*#__PURE__*/React.createElement(TitleBlockResolvingView, _extends({}, props, {
-        testId: testId
-      }));
+      return TitleBlockResolvingView;
 
     case SmartLinkStatus.Resolved:
-      return /*#__PURE__*/React.createElement(TitleBlockResolvedView, _extends({}, props, {
-        testId: testId
-      }));
+      return TitleBlockResolvedView;
 
     case SmartLinkStatus.Unauthorized:
     case SmartLinkStatus.Forbidden:
@@ -32,10 +36,68 @@ var TitleBlock = function TitleBlock(_ref) {
     case SmartLinkStatus.Errored:
     case SmartLinkStatus.Fallback:
     default:
-      return /*#__PURE__*/React.createElement(TitleBlockErroredView, _extends({}, props, {
-        testId: testId
-      }));
+      return TitleBlockErroredView;
   }
 };
+/**
+ * Represents a TitleBlock, which is the foundation of all Flexible Smart Links.
+ * This contains an icon, the link, and any associated metadata and actions in one block.
+ * The TitleBlock will also render differently given the state of the smart link.
+ * This can be found in the corresponding Resolving, Resolved and Errored views.
+ * @param {TitleBlockProps} TitleBlockProps
+ * @see Block
+ * @see TitleBlockResolvingView
+ * @see TitleBlockResolvedView
+ * @see TitleBlockErroredView
+ */
+
+
+var TitleBlock = function TitleBlock(_ref) {
+  var _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      anchorTarget = _ref.anchorTarget,
+      maxLines = _ref.maxLines,
+      onClick = _ref.onClick,
+      overrideCss = _ref.overrideCss,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
+      showActionOnHover = _ref.showActionOnHover,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-title' : _ref$testId,
+      text = _ref.text,
+      theme = _ref.theme,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      actionDropdownOpen = _useState2[0],
+      setActionDropdownOpen = _useState2[1];
+
+  var actionGroup = actions.length > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: function onDropdownOpenChange(isOpen) {
+      return setActionDropdownOpen(isOpen);
+    }
+  });
+  var actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
+  var combinedCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " ", "\n  "])), actionStyles, overrideCss);
+  var overrideText = !!text ? {
+    text: text
+  } : {};
+  var title = /*#__PURE__*/React.createElement(Title, _extends({
+    maxLines: maxLines,
+    onClick: onClick,
+    target: anchorTarget,
+    theme: theme
+  }, overrideText));
+  var Component = getTitleBlockViewComponent(status);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    actionGroup: actionGroup,
+    overrideCss: combinedCss,
+    testId: testId,
+    title: title
+  }));
+};
 
 export default TitleBlock;

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

@@ -1,14 +1,45 @@
 import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "title"];
 import React from 'react';
-import { jsx } from '@emotion/core';
-import { BaseTitleBlockComponent } from '../utils';
+import { LinkIcon } from '../../../elements';
+import Block from '../../block';
+import ElementGroup from '../../element-group';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkWidth } from '../../../../../../constants';
+import { renderElementItems } from '../../utils';
+/**
+ * This renders a fully resolved TitleBlock.
+ * This should render when a Smart Link returns a valid response.
+ * @see TitleBlock
+ */
+
+var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
+  var actionGroup = _ref.actionGroup,
+      _ref$metadata = _ref.metadata,
+      metadata = _ref$metadata === void 0 ? [] : _ref$metadata,
+      position = _ref.position,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === void 0 ? [] : _ref$subtitle,
+      testId = _ref.testId,
+      text = _ref.text,
+      title = _ref.title,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
 
-var TitleBlockResolvedView = function TitleBlockResolvedView(props) {
-  return jsx(BaseTitleBlockComponent, _extends({}, props, {
-    blockTestIdPostfix: "resolved-view"
-  }));
+  var metadataElements = renderElementItems(metadata);
+  var subtitleElements = renderElementItems(subtitle);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/React.createElement(LinkIcon, {
+    position: position
+  }), /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Vertical,
+    width: SmartLinkWidth.Flexible
+  }, title, subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal
+  }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    align: SmartLinkAlignment.Right
+  }, metadataElements), actionGroup);
 };
 
 export default TitleBlockResolvedView;

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

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["actionGroup", "testId", "title"];
 
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/core';
 import Spinner from '@atlaskit/spinner';
+import Block from '../../block';
 import { SmartLinkSize } from '../../../../../../constants';
-import { BaseTitleBlockComponent } from '../utils';
 
 var getSpinnerSize = function getSpinnerSize(size) {
   // Spinner sizes should be equivalent or smaller than Icon size
@@ -25,19 +27,28 @@ var getSpinnerSize = function getSpinnerSize(size) {
       return 12;
   }
 };
+/**
+ * This represents a TitleBlock for a Smart Link that is currently waiting
+ * for a request to finish.
+ * This should render when a Smart Link has sent a request.
+ * @see TitleBlock
+ */
 
-var TitleBlockResolvingView = function TitleBlockResolvingView(props) {
-  var _props$size = props.size,
-      size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
-      testId = props.testId;
-  var spinnerIcon = jsx(Spinner, {
+
+var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
+  var actionGroup = _ref.actionGroup,
+      testId = _ref.testId,
+      title = _ref.title,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  return jsx(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolving-view")
+  }), jsx(Spinner, {
     size: getSpinnerSize(size),
     testId: "".concat(testId, "-resolving-spinner")
-  });
-  return jsx(BaseTitleBlockComponent, _extends({}, props, {
-    blockIcon: spinnerIcon,
-    blockTestIdPostfix: "resolving-view"
-  }));
+  }), title, actionGroup);
 };
 
 export default TitleBlockResolvingView;

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

@@ -62,6 +62,11 @@ var renderChildren = function renderChildren(children, containerSize, containerT
     }
   });
 };
+/**
+ * This represents the container in which all Flexible UI Smart Links are rendered.
+ * @see Block
+ */
+
 
 var Container = function Container(_ref) {
   var children = _ref.children,

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

@@ -22,12 +22,21 @@ var getStyles = function getStyles(size) {
       return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])));
   }
 };
+/**
+ * An element that displays a group of avatars.
+ * @public
+ * @param {AvatarGroupProps} AvatarGroupProps - The props necessary for the AvatarGroup.
+ * @see AuthorGroup
+ * @see CollaboratorGroup
+ */
+
 
 var AvatarGroup = function AvatarGroup(_ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
       _ref$maxCount = _ref.maxCount,
       maxCount = _ref$maxCount === void 0 ? MAX_COUNT : _ref$maxCount,
+      overrideCss = _ref.overrideCss,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
@@ -38,7 +47,9 @@ var AvatarGroup = function AvatarGroup(_ref) {
   }
 
   return jsx("span", {
-    css: getStyles(size)
+    css: [getStyles(size), overrideCss],
+    "data-smart-element-avatar-group": true,
+    "data-testid": testId
   }, jsx(AtlaskitAvatarGroup, {
     maxCount: maxCount,
     appearance: "stack",

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

@@ -47,13 +47,28 @@ var renderImageIcon = function renderImageIcon(url, testId) {
     });
   }
 };
+/**
+ * An element that displays some text with an associated icon.
+ * @public
+ * @param {BadgeProps} BadgeProps - The props necessary for the Badge.
+ * @see CommentCount
+ * @see ViewCount
+ * @see ReactCount
+ * @see VoteCount
+ * @see SubscriberCount
+ * @see Priority
+ * @see ProgrammingLanguage
+ * @see Provider
+ */
+
 
 var Badge = function Badge(_ref) {
   var icon = _ref.icon,
-      url = _ref.url,
       label = _ref.label,
+      overrideCss = _ref.overrideCss,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId;
+      testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId,
+      url = _ref.url;
   var formattedMessageOrLabel = getFormattedMessageFromIcon(icon) || label;
   var badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
 
@@ -62,7 +77,7 @@ var Badge = function Badge(_ref) {
   }
 
   return jsx("div", {
-    css: badgeStyles,
+    css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-badge": true,
     "data-testid": testId

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

@@ -16,9 +16,17 @@ var typeToDescriptorMap = {
   created: messages.created_on,
   modified: messages.modified_on
 };
+/**
+ * An element that displays an ISO Timestamp in text.
+ * @public
+ * @param {DateTimeProps} DateTimeProps - The props necessary for the DateTime element.
+ * @see CreatedOn
+ * @see ModifiedOn
+ */
 
 var DateTime = function DateTime(_ref) {
   var date = _ref.date,
+      overrideCss = _ref.overrideCss,
       type = _ref.type,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId;
@@ -38,7 +46,7 @@ var DateTime = function DateTime(_ref) {
     numeric: 'auto'
   });
   return jsx("span", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId

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

@@ -73,6 +73,13 @@ var renderImageIcon = function renderImageIcon(defaultIcon, icon, url, testId) {
     });
   }
 };
+/**
+ * An element that displays an Icon or favicon.
+ * @public
+ * @param {IconProps} IconProps - The props necessary for the Icon element.
+ * @see LinkIcon
+ */
+
 
 var Icon = function Icon(_ref) {
   var icon = _ref.icon,
@@ -80,6 +87,7 @@ var Icon = function Icon(_ref) {
       label = _ref$label === void 0 ? 'Link' : _ref$label,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? SmartLinkPosition.Top : _ref$position,
+      overrideCss = _ref.overrideCss,
       render = _ref.render,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
@@ -94,7 +102,7 @@ var Icon = function Icon(_ref) {
   var styles = getIconStyles(size, position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return jsx("div", {
-    css: [styles, renderStyles],
+    css: [styles, renderStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-icon": true,
     "data-testid": testId

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

@@ -3,22 +3,118 @@ import { ElementName } from '../../../../constants';
 // Attention: Keep the export name and element name the same.
 // This will help reducing the code for mapping elements inside
 // createElement and renderElementItems
+
+/**
+ * Creates an AvatarGroup element using the data from AuthorGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
 export var AuthorGroup = createElement(ElementName.AuthorGroup);
+/**
+ * Creates an AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
+
 export var CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
+/**
+ * Creates a CommentCount Badge element using the data from CommentCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var CommentCount = createElement(ElementName.CommentCount);
+/**
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var ViewCount = createElement(ElementName.ViewCount);
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var ReactCount = createElement(ElementName.ReactCount);
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var VoteCount = createElement(ElementName.VoteCount);
+/**
+ * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
+ * @see Text
+ */
+
 export var CreatedBy = createElement(ElementName.CreatedBy);
+/**
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
+ */
+
 export var CreatedOn = createElement(ElementName.CreatedOn);
+/**
+ * Creates a LinkIcon Icon element using the data from LinkIcon in the Flexible UI Context.
+ * @see Icon
+ */
+
 export var LinkIcon = createElement(ElementName.LinkIcon);
+/**
+ * Creates a ModifiedBy Text element using the data from ModifiedBy in the Flexible UI Context.
+ * @see Text
+ */
+
 export var ModifiedBy = createElement(ElementName.ModifiedBy);
+/**
+ * Creates a ModifiedOn DateTime element using the data from ModifiedOn in the Flexible UI Context.
+ * @see DateTime
+ */
+
 export var ModifiedOn = createElement(ElementName.ModifiedOn);
+/**
+ * Creates a Preview element using the data from Preview in the Flexible UI Context.
+ * @see Preview
+ */
+
 export var Preview = createElement(ElementName.Preview);
+/**
+ * Creates a Priority Badge element using the data from Priority in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var Priority = createElement(ElementName.Priority);
+/**
+ * Creates a ProgrammingLanguage Badge element using the data from ProgrammingLanguage in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
+/**
+ * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
+ * @see Text
+ */
+
 export var Snippet = createElement(ElementName.Snippet);
+/**
+ * Creates a State Lozenge element using the data from State in the Flexible UI Context.
+ * @see Lozenge
+ */
+
 export var State = createElement(ElementName.State);
+/**
+ * Creates a SubscriberCount Badge element using the data from SubscriberCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var SubscriberCount = createElement(ElementName.SubscriberCount);
+/**
+ * Creates a Title Link element using the data from Title in the Flexible UI Context.
+ * This represents the main link text within the Smart Link.
+ * @see Link
+ */
+
 export var Title = createElement(ElementName.Title);
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+
 export var Provider = createElement(ElementName.Provider);

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

@@ -41,10 +41,18 @@ var getMaxLines = function getMaxLines(maxLines) {
 
   return maxLines;
 };
+/**
+ * An element that represent.
+ * @public
+ * @param {LinkProps} LinkProps - The props necessary for the Icon element.
+ * @see LinkIcon
+ */
+
 
 var Link = function Link(_ref) {
   var _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      overrideCss = _ref.overrideCss,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
@@ -62,7 +70,7 @@ var Link = function Link(_ref) {
     testId: "".concat(testId, "-tooltip"),
     tag: "span"
   }, jsx("a", {
-    css: getAnchorStyles(size, theme, getMaxLines(maxLines)),
+    css: [getAnchorStyles(size, theme, getMaxLines(maxLines)), overrideCss],
     "data-smart-element-link": true,
     "data-testid": testId,
     onClick: onClick,

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

@@ -7,10 +7,17 @@ import React from 'react';
 import { css, jsx } from '@emotion/core';
 import AtlaskitLozenge from '@atlaskit/lozenge';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: inherit;\n"])));
+/**
+ * An element that displays a Lozenge.
+ * @public
+ * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
+ * @see State
+ */
 
 var Lozenge = function Lozenge(_ref) {
   var _ref$appearance = _ref.appearance,
       appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+      overrideCss = _ref.overrideCss,
       text = _ref.text,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
@@ -20,12 +27,13 @@ var Lozenge = function Lozenge(_ref) {
   }
 
   return jsx("span", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-fit-to-content": true,
-    "data-smart-element-lozenge": true
+    "data-smart-element-lozenge": true,
+    "data-testid": testId
   }, jsx(AtlaskitLozenge, {
     appearance: appearance,
-    testId: testId
+    testId: "".concat(testId, "-lozenge")
   }, text));
 };
 

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

@@ -18,9 +18,16 @@ import ImageIcon from '../../common/image-icon';
  * contents within the element's box.
  */
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
+/**
+ * An element that displays a Media.
+ * @public
+ * @param {MediaProps} MediaProps - The props necessary for the Media element.
+ * @see Preview
+ */
 
 var Media = function Media(_ref) {
-  var _ref$testId = _ref.testId,
+  var overrideCss = _ref.overrideCss,
+      _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
       type = _ref.type,
       url = _ref.url;
@@ -30,7 +37,7 @@ var Media = function Media(_ref) {
   }
 
   return jsx("div", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-smart-element-media": true,
     "data-testid": testId
   }, jsx(ImageIcon, {

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

@@ -8,17 +8,23 @@ import { css, jsx } from '@emotion/core';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 
-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 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));
 };
+/**
+ * An element that displays some Text.
+ * @public
+ * @param {TextProps} TextProps - The props necessary for the Text element.
+ * @see Title
+ */
+
 
 var Text = function Text(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? tokens.text : _ref$color,
-      content = _ref.content,
+  var content = _ref.content,
       _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
       message = _ref.message,
+      overrideCss = _ref.overrideCss,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-text' : _ref$testId;
 
@@ -27,7 +33,7 @@ var Text = function Text(_ref) {
   }
 
   return jsx("span", {
-    css: getStyles(maxLines, color),
+    css: [getStyles(maxLines), overrideCss],
     "data-separator": true,
     "data-smart-element-text": true,
     "data-testid": testId

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

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _elementMappings;
+var _templateObject, _elementMappings;
 
 import React, { useContext } from 'react';
+import { css } from '@emotion/core';
 import { ElementName, IconType } from '../../../../constants';
 import Icon from './icon';
 import Link from './link';
@@ -59,8 +61,8 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
 }), _defineProperty(_elementMappings, ElementName.Snippet, {
   component: Text,
   props: {
-    color: tokens.snippet,
-    maxLines: SNIPPET_DEFAULT_MAX_LINES
+    maxLines: SNIPPET_DEFAULT_MAX_LINES,
+    overrideCss: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), tokens.snippet)
   }
 }), _defineProperty(_elementMappings, ElementName.State, {
   component: Lozenge

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

@@ -3,6 +3,12 @@ import React from 'react';
 import Container from './components/container';
 import { FlexibleUiContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
+/**
+ * This represents a Flexible Card: a link represented by a card with metadata.
+ * This is the container in which all Flexible UI Blocks and Elements exist.
+ * Note: TitleBlock is mandatory for a Flexible Card to render.
+ * @see Container
+ */
 
 var FlexibleCard = function FlexibleCard(_ref) {
   var cardState = _ref.cardState,