@atlaskit/smart-card 18.0.14 → 18.0.15

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,9 +11,15 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
 
 var _constants = require("../../../../../constants");
 
@@ -21,26 +29,32 @@ var _errored = _interopRequireDefault(require("./errored"));
 
 var _resolving = _interopRequireDefault(require("./resolving"));
 
-var _excluded = ["status", "testId"];
+var _actionGroup = _interopRequireDefault(require("../action-group"));
 
-var TitleBlock = function TitleBlock(_ref) {
-  var _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-title' : _ref$testId,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var _elements = require("../../elements");
+
+var _excluded = ["actions", "anchorTarget", "maxLines", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme"];
+
+var _templateObject, _templateObject2;
+
+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 getActionStyles = function getActionStyles(showOnHover, isOpen) {
+  if (showOnHover && !isOpen) {
+    return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 _constants.SmartLinkStatus.Pending:
     case _constants.SmartLinkStatus.Resolving:
-      return /*#__PURE__*/_react.default.createElement(_resolving.default, (0, _extends2.default)({}, props, {
-        testId: testId
-      }));
+      return _resolving.default;
 
     case _constants.SmartLinkStatus.Resolved:
-      return /*#__PURE__*/_react.default.createElement(_resolved.default, (0, _extends2.default)({}, props, {
-        testId: testId
-      }));
+      return _resolved.default;
 
     case _constants.SmartLinkStatus.Unauthorized:
     case _constants.SmartLinkStatus.Forbidden:
@@ -48,11 +62,72 @@ var TitleBlock = function TitleBlock(_ref) {
     case _constants.SmartLinkStatus.Errored:
     case _constants.SmartLinkStatus.Fallback:
     default:
-      return /*#__PURE__*/_react.default.createElement(_errored.default, (0, _extends2.default)({}, props, {
-        testId: testId
-      }));
+      return _errored.default;
   }
 };
+/**
+ * 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 ? _constants.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      actionDropdownOpen = _useState2[0],
+      setActionDropdownOpen = _useState2[1];
+
+  var actionGroup = actions.length > 0 && /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: function onDropdownOpenChange(isOpen) {
+      return setActionDropdownOpen(isOpen);
+    }
+  });
+
+  var actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
+  var combinedCss = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", " ", "\n  "])), actionStyles, overrideCss);
+  var overrideText = !!text ? {
+    text: text
+  } : {};
+
+  var title = /*#__PURE__*/_react.default.createElement(_elements.Title, (0, _extends2.default)({
+    maxLines: maxLines,
+    onClick: onClick,
+    target: anchorTarget,
+    theme: theme
+  }, overrideText));
+
+  var Component = getTitleBlockViewComponent(status);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
+    actionGroup: actionGroup,
+    overrideCss: combinedCss,
+    testId: testId,
+    title: title
+  }));
+};
 
 var _default = TitleBlock;
 exports.default = _default;

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

@@ -9,17 +9,53 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _core = require("@emotion/core");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _utils = require("../utils");
+var _react = _interopRequireDefault(require("react"));
 
-/** @jsx jsx */
-var TitleBlockResolvedView = function TitleBlockResolvedView(props) {
-  return (0, _core.jsx)(_utils.BaseTitleBlockComponent, (0, _extends2.default)({}, props, {
-    blockTestIdPostfix: "resolved-view"
-  }));
+var _elements = require("../../../elements");
+
+var _block = _interopRequireDefault(require("../../block"));
+
+var _elementGroup = _interopRequireDefault(require("../../element-group"));
+
+var _constants = require("../../../../../../constants");
+
+var _utils = require("../../utils");
+
+var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "title"];
+
+/**
+ * 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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var metadataElements = (0, _utils.renderElementItems)(metadata);
+  var subtitleElements = (0, _utils.renderElementItems)(subtitle);
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/_react.default.createElement(_elements.LinkIcon, {
+    position: position
+  }), /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    direction: _constants.SmartLinkDirection.Vertical,
+    width: _constants.SmartLinkWidth.Flexible
+  }, title, subtitleElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    direction: _constants.SmartLinkDirection.Horizontal
+  }, subtitleElements)), metadataElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    direction: _constants.SmartLinkDirection.Horizontal,
+    align: _constants.SmartLinkAlignment.Right
+  }, metadataElements), actionGroup);
 };
 
 var _default = TitleBlockResolvedView;

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

@@ -9,17 +9,20 @@ 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 _core = require("@emotion/core");
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
+var _block = _interopRequireDefault(require("../../block"));
+
 var _constants = require("../../../../../../constants");
 
-var _utils = require("../utils");
+var _excluded = ["actionGroup", "testId", "title"];
 
-/** @jsx jsx */
 var getSpinnerSize = function getSpinnerSize(size) {
   // Spinner sizes should be equivalent or smaller than Icon size
   // to avoid the jumping.
@@ -38,19 +41,27 @@ 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 ? _constants.SmartLinkSize.Medium : _props$size,
-      testId = props.testId;
-  var spinnerIcon = (0, _core.jsx)(_spinner.default, {
+var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
+  var actionGroup = _ref.actionGroup,
+      testId = _ref.testId,
+      title = _ref.title,
+      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolving-view")
+  }), (0, _core.jsx)(_spinner.default, {
     size: getSpinnerSize(size),
     testId: "".concat(testId, "-resolving-spinner")
-  });
-  return (0, _core.jsx)(_utils.BaseTitleBlockComponent, (0, _extends2.default)({}, props, {
-    blockIcon: spinnerIcon,
-    blockTestIdPostfix: "resolving-view"
-  }));
+  }), title, actionGroup);
 };
 
 var _default = TitleBlockResolvingView;

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

@@ -77,6 +77,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/cjs/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -34,12 +34,21 @@ var getStyles = function getStyles(size) {
       return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])));
   }
 };
+/**
+ * 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 ? _constants.SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
@@ -50,7 +59,9 @@ var AvatarGroup = function AvatarGroup(_ref) {
   }
 
   return (0, _core.jsx)("span", {
-    css: getStyles(size)
+    css: [getStyles(size), overrideCss],
+    "data-smart-element-avatar-group": true,
+    "data-testid": testId
   }, (0, _core.jsx)(_avatarGroup.default, {
     maxCount: maxCount,
     appearance: "stack",

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

@@ -64,13 +64,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);
 
@@ -79,7 +94,7 @@ var Badge = function Badge(_ref) {
   }
 
   return (0, _core.jsx)("div", {
-    css: badgeStyles,
+    css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-badge": true,
     "data-testid": testId

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

@@ -32,9 +32,17 @@ var typeToDescriptorMap = {
   created: _messages.messages.created_on,
   modified: _messages.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;
@@ -54,7 +62,7 @@ var DateTime = function DateTime(_ref) {
     numeric: 'auto'
   });
   return (0, _core.jsx)("span", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId

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

@@ -93,6 +93,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,
@@ -100,6 +107,7 @@ var Icon = function Icon(_ref) {
       label = _ref$label === void 0 ? 'Link' : _ref$label,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? _constants.SmartLinkPosition.Top : _ref$position,
+      overrideCss = _ref.overrideCss,
       render = _ref.render,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
@@ -114,7 +122,7 @@ var Icon = function Icon(_ref) {
   var styles = getIconStyles(size, position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return (0, _core.jsx)("div", {
-    css: [styles, renderStyles],
+    css: [styles, renderStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-icon": true,
     "data-testid": testId

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

@@ -12,41 +12,137 @@ var _constants = require("../../../../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
+ */
 var AuthorGroup = (0, _utils.createElement)(_constants.ElementName.AuthorGroup);
+/**
+ * Creates an AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
+
 exports.AuthorGroup = AuthorGroup;
 var CollaboratorGroup = (0, _utils.createElement)(_constants.ElementName.CollaboratorGroup);
+/**
+ * Creates a CommentCount Badge element using the data from CommentCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.CollaboratorGroup = CollaboratorGroup;
 var CommentCount = (0, _utils.createElement)(_constants.ElementName.CommentCount);
+/**
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.CommentCount = CommentCount;
 var ViewCount = (0, _utils.createElement)(_constants.ElementName.ViewCount);
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.ViewCount = ViewCount;
 var ReactCount = (0, _utils.createElement)(_constants.ElementName.ReactCount);
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.ReactCount = ReactCount;
 var VoteCount = (0, _utils.createElement)(_constants.ElementName.VoteCount);
+/**
+ * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
+ * @see Text
+ */
+
 exports.VoteCount = VoteCount;
 var CreatedBy = (0, _utils.createElement)(_constants.ElementName.CreatedBy);
+/**
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
+ */
+
 exports.CreatedBy = CreatedBy;
 var CreatedOn = (0, _utils.createElement)(_constants.ElementName.CreatedOn);
+/**
+ * Creates a LinkIcon Icon element using the data from LinkIcon in the Flexible UI Context.
+ * @see Icon
+ */
+
 exports.CreatedOn = CreatedOn;
 var LinkIcon = (0, _utils.createElement)(_constants.ElementName.LinkIcon);
+/**
+ * Creates a ModifiedBy Text element using the data from ModifiedBy in the Flexible UI Context.
+ * @see Text
+ */
+
 exports.LinkIcon = LinkIcon;
 var ModifiedBy = (0, _utils.createElement)(_constants.ElementName.ModifiedBy);
+/**
+ * Creates a ModifiedOn DateTime element using the data from ModifiedOn in the Flexible UI Context.
+ * @see DateTime
+ */
+
 exports.ModifiedBy = ModifiedBy;
 var ModifiedOn = (0, _utils.createElement)(_constants.ElementName.ModifiedOn);
+/**
+ * Creates a Preview element using the data from Preview in the Flexible UI Context.
+ * @see Preview
+ */
+
 exports.ModifiedOn = ModifiedOn;
 var Preview = (0, _utils.createElement)(_constants.ElementName.Preview);
+/**
+ * Creates a Priority Badge element using the data from Priority in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.Preview = Preview;
 var Priority = (0, _utils.createElement)(_constants.ElementName.Priority);
+/**
+ * Creates a ProgrammingLanguage Badge element using the data from ProgrammingLanguage in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.Priority = Priority;
 var ProgrammingLanguage = (0, _utils.createElement)(_constants.ElementName.ProgrammingLanguage);
+/**
+ * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
+ * @see Text
+ */
+
 exports.ProgrammingLanguage = ProgrammingLanguage;
 var Snippet = (0, _utils.createElement)(_constants.ElementName.Snippet);
+/**
+ * Creates a State Lozenge element using the data from State in the Flexible UI Context.
+ * @see Lozenge
+ */
+
 exports.Snippet = Snippet;
 var State = (0, _utils.createElement)(_constants.ElementName.State);
+/**
+ * Creates a SubscriberCount Badge element using the data from SubscriberCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.State = State;
 var SubscriberCount = (0, _utils.createElement)(_constants.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
+ */
+
 exports.SubscriberCount = SubscriberCount;
 var Title = (0, _utils.createElement)(_constants.ElementName.Title);
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+
 exports.Title = Title;
 var Provider = (0, _utils.createElement)(_constants.ElementName.Provider);
 exports.Provider = Provider;

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

@@ -55,10 +55,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 ? _constants.SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
@@ -76,7 +84,7 @@ var Link = function Link(_ref) {
     testId: "".concat(testId, "-tooltip"),
     tag: "span"
   }, (0, _core.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/cjs/view/FlexibleCard/components/elements/lozenge/index.js

@@ -18,10 +18,17 @@ var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _templateObject;
 
 var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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;
@@ -31,12 +38,13 @@ var Lozenge = function Lozenge(_ref) {
   }
 
   return (0, _core.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
   }, (0, _core.jsx)(_lozenge.default, {
     appearance: appearance,
-    testId: testId
+    testId: "".concat(testId, "-lozenge")
   }, text));
 };
 

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

@@ -28,9 +28,16 @@ var _templateObject;
  * contents within the element's box.
  */
 var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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;
@@ -40,7 +47,7 @@ var Media = function Media(_ref) {
   }
 
   return (0, _core.jsx)("div", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-smart-element-media": true,
     "data-testid": testId
   }, (0, _core.jsx)(_imageIcon.default, {