@atlaskit/smart-card 18.0.12 → 18.0.15

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

@@ -19,17 +19,23 @@ var _token = require("../../../../../utils/token");
 
 var _templateObject;
 
-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 getStyles = function getStyles(maxLines) {
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(maxLines));
 };
+/**
+ * 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 ? _token.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;
 
@@ -38,7 +44,7 @@ var Text = function Text(_ref) {
   }
 
   return (0, _core.jsx)("span", {
-    css: getStyles(maxLines, color),
+    css: [getStyles(maxLines), overrideCss],
     "data-separator": true,
     "data-smart-element-text": true,
     "data-testid": testId

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

@@ -13,8 +13,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireWildcard(require("react"));
 
+var _core = require("@emotion/core");
+
 var _constants = require("../../../../constants");
 
 var _icon = _interopRequireDefault(require("./icon"));
@@ -39,7 +43,7 @@ var _dateTime = _interopRequireDefault(require("./date-time"));
 
 var _token = require("../../../../utils/token");
 
-var _elementMappings;
+var _templateObject, _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); }
 
@@ -88,8 +92,8 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Snippet, {
   component: _text.default,
   props: {
-    color: _token.tokens.snippet,
-    maxLines: SNIPPET_DEFAULT_MAX_LINES
+    maxLines: SNIPPET_DEFAULT_MAX_LINES,
+    overrideCss: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n      "])), _token.tokens.snippet)
   }
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.State, {
   component: _lozenge.default

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

@@ -17,6 +17,12 @@ var _flexibleUiContext = require("../../state/flexible-ui-context");
 
 var _utils = require("./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,
       children = _ref.children,

package/dist/cjs/view/HoverCard/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HoverCard = void 0;
+exports.HoverCardComponent = exports.HoverCard = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -31,14 +31,28 @@ var _styled = require("./styled");
 
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _analytics = require("../../utils/analytics");
+
+var _store = require("../../state/store");
+
+var _analytics2 = require("../../state/analytics");
+
+var _helpers = require("../../state/helpers");
+
 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; }
 
 /** @jsx jsx */
-var HoverCard = function HoverCard(_ref) {
+var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
-      url = _ref.url;
+      url = _ref.url,
+      createAnalyticsEvent = _ref.createAnalyticsEvent;
+  var analyticsHandler = (0, _react.useCallback)(function (analyticsPayload) {
+    (0, _analytics.fireSmartLinkEvent)(analyticsPayload, createAnalyticsEvent);
+  }, [createAnalyticsEvent]);
   var delay = 300;
 
   var _React$useState = _react.default.useState(false),
@@ -48,26 +62,45 @@ var HoverCard = function HoverCard(_ref) {
 
   var fadeOutTimeoutId = (0, _react.useRef)();
   var fadeInTimeoutId = (0, _react.useRef)();
+  var cardOpenTime = (0, _react.useRef)();
+  var linkState = (0, _store.useSmartCardState)(url);
+  var analytics = (0, _analytics2.useSmartLinkAnalytics)(analyticsHandler);
+  var extensionKey = (0, _react.useMemo)(function () {
+    return (0, _helpers.getExtensionKey)(linkState.details);
+  }, [linkState]);
+  var definitionId = (0, _react.useMemo)(function () {
+    return (0, _helpers.getDefinitionId)(linkState.details);
+  }, [linkState]);
   var initHideCard = (0, _react.useCallback)(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
 
     fadeOutTimeoutId.current = setTimeout(function () {
+      //Check its previously open to avoid firing events when moving between the child and hover card components
+      if (isOpen === true && cardOpenTime.current) {
+        var hoverTime = Date.now() - cardOpenTime.current;
+        analytics.ui.hoverCardDismissedEvent('card', hoverTime, definitionId, extensionKey);
+      }
+
       setIsOpen(false);
     }, delay);
-  }, [delay]);
+  }, [delay, isOpen, definitionId, extensionKey, analytics]);
   var initShowCard = (0, _react.useCallback)(function () {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
     }
 
     fadeInTimeoutId.current = setTimeout(function () {
+      //Check if its previously closed to avoid firing events when moving between the child and hover card components
+      if (isOpen === false) {
+        cardOpenTime.current = Date.now();
+        analytics.ui.hoverCardViewedEvent('card', definitionId, extensionKey);
+      }
+
       setIsOpen(true);
     }, delay);
-  }, [delay]); //TODO: EDM-2905: Add analytics events
-
-  var analyticsHandler = (0, _react.useCallback)(function () {}, []);
+  }, [delay, isOpen, definitionId, extensionKey, analytics]);
   var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
     url: url,
     appearance: 'block',
@@ -94,11 +127,12 @@ var HoverCard = function HoverCard(_ref) {
       }),
       iconPosition: 'before',
       onClick: function onClick() {
-        return window.open(url, '_blank');
+        window.open(url, '_blank');
+        analytics.ui.hoverCardOpenLinkClickedEvent('card', definitionId, extensionKey);
       },
       testId: 'hover-card-open-button'
     };
-  }, [url]);
+  }, [url, definitionId, extensionKey, analytics]);
 
   var cardComponent = function cardComponent() {
     return (0, _core.jsx)("div", {
@@ -126,7 +160,7 @@ var HoverCard = function HoverCard(_ref) {
     testId: "hover-card",
     isOpen: isOpen,
     onClose: onClose,
-    placement: "bottom",
+    placement: "bottom-start",
     content: cardComponent,
     trigger: function trigger(triggerProps) {
       return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
@@ -137,4 +171,8 @@ var HoverCard = function HoverCard(_ref) {
   });
 };
 
+exports.HoverCardComponent = HoverCardComponent;
+var HoverCard = (0, _analyticsNext.withAnalyticsContext)({
+  source: 'smartLinkPreviewHoverCard'
+})((0, _analyticsNext.withAnalyticsEvents)()(HoverCardComponent));
 exports.HoverCard = HoverCard;

package/dist/cjs/view/HoverCard/styled.js

@@ -11,7 +11,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _core = require("@emotion/core");
 
+var _index = require("../../index");
+
 var _templateObject;
 
-var HoverCardContainer = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  max-width: 500px;\n  padding: 0;\n"])));
+var HoverCardContainer = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  max-width: 350px;\n  padding: 0;\n\n  .", " {\n    display: none;\n  }\n"])), _index.loadingPlaceholderClassName);
 exports.HoverCardContainer = HoverCardContainer;

package/dist/es2019/state/analytics/useSmartLinkAnalytics.js

@@ -1,4 +1,4 @@
-import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
+import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
 import { useMemo } from 'react';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
 export const useSmartLinkAnalytics = dispatchAnalytics => {
@@ -15,6 +15,9 @@ export const useSmartLinkAnalytics = dispatchAnalytics => {
       });
       dispatchAnalytics(uiActionClickedEvent(extensionKey, actionType, display));
     },
+    hoverCardOpenLinkClickedEvent: (previewDisplay, definitionId, extensionKey, previewInvokeMethod) => {
+      dispatchAnalytics(uiHoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod));
+    },
     closedAuthEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiClosedAuthEvent(display, definitionId, extensionKey)),
     renderSuccessEvent: (display, id, definitionId, extensionKey) => {
       succeedUfoExperience('smart-link-rendered', id, {
@@ -26,7 +29,9 @@ export const useSmartLinkAnalytics = dispatchAnalytics => {
         display
       });
       dispatchAnalytics(uiRenderSuccessEvent(display, definitionId, extensionKey));
-    }
+    },
+    hoverCardViewedEvent: (hoverDisplay, definitionId, extensionKey, previewInvokeMethod) => dispatchAnalytics(uiHoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod)),
+    hoverCardDismissedEvent: (hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) => dispatchAnalytics(uiHoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod))
   }), [dispatchAnalytics]);
   const operational = useMemo(() => ({
     resolvedEvent: (id, definitionId, extensionKey, resourceType) => dispatchAnalytics(resolvedEvent(id, definitionId, extensionKey, resourceType)),

package/dist/es2019/state/flexible-ui-context/index.js

@@ -1,3 +1,8 @@
 import { useContext, createContext } from 'react';
+
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
 export const FlexibleUiContext = /*#__PURE__*/createContext(undefined);
 export const useFlexibleUiContext = () => useContext(FlexibleUiContext);

package/dist/es2019/utils/analytics/analytics.js

@@ -227,4 +227,39 @@ export const uiRenderFailedEvent = (display, error, errorInfo) => ({
     errorInfo,
     display
   }
+});
+export const uiHoverCardViewedEvent = (hoverDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
+  action: 'viewed',
+  actionSubject: 'hoverCard',
+  eventType: 'ui',
+  attributes: { ...context,
+    definitionId: definitionId || '',
+    extensionKey: extensionKey || '',
+    hoverDisplay,
+    previewInvokeMethod
+  }
+});
+export const uiHoverCardDismissedEvent = (hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) => ({
+  action: 'dismissed',
+  actionSubject: 'hoverCard',
+  eventType: 'ui',
+  attributes: { ...context,
+    definitionId: definitionId || '',
+    extensionKey: extensionKey || '',
+    hoverTime,
+    hoverDisplay,
+    previewInvokeMethod
+  }
+});
+export const uiHoverCardOpenLinkClickedEvent = (previewDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
+  action: 'clicked',
+  actionSubject: 'button',
+  actionSubjectId: 'shortcutGoToLink',
+  eventType: 'ui',
+  attributes: { ...context,
+    definitionId: definitionId || '',
+    extensionKey: extensionKey || '',
+    previewDisplay,
+    previewInvokeMethod
+  }
 });

package/dist/es2019/utils/analytics/index.js

@@ -1,6 +1,6 @@
 import { resolvedEvent, unresolvedEvent } from './analytics';
 import { getMeasure } from '../performance';
-export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent } from './analytics';
+export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent } from './analytics';
 export const instrumentEvent = (id, status, definitionId, extensionKey, resourceType, error) => {
   const measure = getMeasure(id, status) || {
     duration: undefined

package/dist/es2019/version.json

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

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

@@ -25,7 +25,8 @@ export function CardWithUrlContent({
   embedIframeRef,
   inlinePreloaderStyle,
   ui,
-  children
+  children,
+  showHoverPreview
 }) {
   // Get state, actions for this card.
   const {
@@ -123,7 +124,8 @@ export function CardWithUrlContent({
         isSelected: isSelected,
         onResolve: onResolve,
         testId: testId,
-        inlinePreloaderStyle: inlinePreloaderStyle
+        inlinePreloaderStyle: inlinePreloaderStyle,
+        showHoverPreview: showHoverPreview
       });
 
     case 'block':

package/dist/es2019/view/CardWithUrl/loader.js

@@ -38,7 +38,8 @@ export function CardWithURLRenderer(props) {
     inlinePreloaderStyle,
     createAnalyticsEvent,
     children,
-    ui
+    ui,
+    showHoverPreview
   } = props; // Wrapper around analytics.
 
   const dispatchAnalytics = useCallback(analyticsPayload => {
@@ -94,7 +95,8 @@ export function CardWithURLRenderer(props) {
     platform,
     embedIframeRef,
     inlinePreloaderStyle,
-    ui
+    ui,
+    showHoverPreview
   };
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: ErrorFallback,

package/dist/es2019/view/FlexibleCard/components/actions/action/index.js

@@ -27,7 +27,23 @@ const getIconStyles = size => css`
   ${getIconSizeStyles(getIconWidth(size))};
 `;
 
-const getButtonStyle = (size, iconOnly) => size === SmartLinkSize.Small ? css`
+const getButtonStyle = (size, iconOnly) => {
+  switch (size) {
+    case SmartLinkSize.Large:
+      return iconOnly ? css`
+            button,
+            button:hover,
+            button:focus,
+            button:active {
+              padding: 0;
+              > span {
+                margin: 0;
+              }
+            }
+          ` : '';
+
+    case SmartLinkSize.Small:
+      return css`
         font-size: 0.75rem;
         font-weight: 500;
         line-height: 1rem;
@@ -43,7 +59,14 @@ const getButtonStyle = (size, iconOnly) => size === SmartLinkSize.Small ? css`
             padding-right: 0.25rem;
           `}
         }
-      ` : '';
+      `;
+
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Medium:
+    default:
+      return '';
+  }
+};
 
 const ActionIcon = ({
   size,
@@ -60,6 +83,14 @@ export const sizeToSpacing = {
   [SmartLinkSize.Large]: 'compact',
   [SmartLinkSize.XLarge]: 'default'
 };
+/**
+ * An action that can be triggered with an on click.
+ * @public
+ * @param {ActionProps} ActionProps - The props necessary for the Action.
+ * @see DeleteAction
+ * @see EditAction
+ * @see CustomAction
+ */
 
 const Action = ({
   appearance = 'subtle',
@@ -70,7 +101,8 @@ const Action = ({
   icon,
   iconPosition = 'before',
   tooltipMessage,
-  asDropDownItem
+  asDropDownItem,
+  overrideCss
 }) => {
   if (!onClick) {
     return null;
@@ -99,7 +131,8 @@ const Action = ({
     return jsx(Tooltip, {
       content: tooltipMessage
     }, jsx("div", {
-      css: getButtonStyle(size, iconOnly)
+      css: [getButtonStyle(size, iconOnly), overrideCss],
+      "data-testid": `${testId}-button-wrapper`
     }, jsx(Button, {
       spacing: sizeToSpacing[size],
       appearance: appearance,

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

@@ -2,9 +2,25 @@ import { ActionName } from '../../../../constants';
 import { createUIAction } from './utils'; // Attention: Keep the export name and action name the same.
 // This will help reducing the code for mapping action inside
 // createAction and renderActionItems
-// UIActions infer that you do not need to get any data from the context.
-// DataActions infer that the action depends on the data from the context.
+
+/**
+ * Creates a DeleteAction component. Accepts default ActionProps, but defaults
+ * the icon to a cross icon.
+ * @see Action
+ */
 
 export const DeleteAction = createUIAction(ActionName.DeleteAction);
+/**
+ * Creates a EditAction component. Accepts default ActionProps, but defaults
+ * the icon to an edit (pencil) icon.
+ * @see Action
+ */
+
 export const EditAction = createUIAction(ActionName.EditAction);
+/**
+ * Creates a CustomAction component. Accepts default ActionProps. Required to provide
+ * your own icon or text.
+ * @see Action
+ */
+
 export const CustomAction = createUIAction(ActionName.CustomAction);

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -13,6 +13,12 @@ const styles = css`
   display: inline-flex;
   line-height: 1rem;
 `;
+/**
+ * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
+ * preferences.
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
 
 const ActionGroup = ({
   items = [],

package/dist/es2019/view/FlexibleCard/components/blocks/block/index.js

@@ -12,15 +12,22 @@ const getBlockStyles = (direction, size) => css`
     margin-right: ${getGapSize(size)}rem;
   }
 `;
+/**
+ * A block represents a collection of elements and actions that are arranged in a row.
+ * All elements and actions should be contained within a Block.
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
+
 
 const Block = ({
   children,
   direction = SmartLinkDirection.Horizontal,
   size = SmartLinkSize.Medium,
   testId = 'smart-block',
-  extraCss
+  overrideCss
 }) => jsx("div", {
-  css: [getBlockStyles(direction, size), extraCss],
+  css: [getBlockStyles(direction, size), overrideCss],
   "data-smart-block": true,
   "data-testid": testId
 }, renderChildren(children, size));

package/dist/es2019/view/FlexibleCard/components/blocks/element-group/index.js

@@ -27,17 +27,23 @@ export const getElementGroupStyles = (direction, size, align, width) => css`
   min-width: 10%;
   ${width === SmartLinkWidth.Flexible ? `flex: 1 3;` : ''}
 `;
+/**
+ * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
+ * preferences.
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
 
 const ElementGroup = ({
   align = SmartLinkAlignment.Left,
   children,
-  css,
+  overrideCss,
   direction = SmartLinkDirection.Horizontal,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-group',
   width = SmartLinkWidth.FitToContent
 }) => jsx("div", {
-  css: [getElementGroupStyles(direction, size, align, width), css],
+  css: [getElementGroupStyles(direction, size, align, width), overrideCss],
   "data-smart-element-group": true,
   "data-testid": testId
 }, renderChildren(children, size));

package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/index.js

@@ -5,6 +5,12 @@ import Block from '../block';
 import ElementGroup from '../element-group';
 import { Provider } from '../../elements';
 import ActionGroup from '../action-group';
+/**
+ * Represents a FooterBlock, designed to contain elements and actions that should appear
+ * at the bottom of a link card.
+ * @param {FooterBlockProps} FooterBlockProps
+ * @see Block
+ */
 
 const FooterBlock = props => {
   const {

package/dist/es2019/view/FlexibleCard/components/blocks/metadata-block/index.js

@@ -60,6 +60,13 @@ const getMaxLines = maxLines => {
 
   return maxLines;
 };
+/**
+ * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
+ * Accepts an array of elements to be shown either primary (left hand side) or secondary (right hand side).
+ * @param {MetadataBlockProps} MetadataBlockProps
+ * @see Block
+ */
+
 
 const MetadataBlock = ({
   maxLines = DEFAULT_MAX_LINES,
@@ -83,12 +90,12 @@ const MetadataBlock = ({
     testId: `${testId}-resolved-view`
   }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Left,
-    css: elementGroupStyles,
+    overrideCss: elementGroupStyles,
     direction: SmartLinkDirection.Horizontal,
     width: SmartLinkWidth.Flexible
   }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Right,
-    css: elementGroupStyles,
+    overrideCss: elementGroupStyles,
     direction: SmartLinkDirection.Horizontal,
     width: SmartLinkWidth.Flexible
   }, secondaryElements));

package/dist/es2019/view/FlexibleCard/components/blocks/preview-block/index.js

@@ -3,6 +3,11 @@ import React from 'react';
 import { SmartLinkStatus } from '../../../../../constants';
 import Block from '../block';
 import { Preview } from '../../elements';
+/**
+ * Represents a PreviewBlock, which typically contains media or other large format content.
+ * @param {PreviewBlock} PreviewBlock
+ * @see Block
+ */
 
 const PreviewBlock = ({
   status = SmartLinkStatus.Fallback,

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

@@ -7,6 +7,11 @@ import { getMaxLines } from '../../utils';
 const DEFAULT_MAX_LINES = 3;
 const MAXIMUM_MAX_LINES = 3;
 const MINIMUM_MAX_LINES = 1;
+/**
+ * Represents a SnippetBlock, which is used to display longer form text content, like descriptions.
+ * @param {SnippetBlock} SnippetBlock
+ * @see Block
+ */
 
 const SnippetBlock = ({
   maxLines = DEFAULT_MAX_LINES,