@atlaskit/smart-card 18.0.14 → 18.0.15

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

@@ -11,9 +11,18 @@ import { SmartLinkSize, ActionName } from '../../constants';
 import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
 import { HoverCardContainer } from './styled';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-export var HoverCard = function HoverCard(_ref) {
+import { withAnalyticsEvents, withAnalyticsContext } from '@atlaskit/analytics-next';
+import { fireSmartLinkEvent } from '../../utils/analytics';
+import { useSmartCardState as useLinkState } from '../../state/store';
+import { useSmartLinkAnalytics } from '../../state/analytics';
+import { getExtensionKey, getDefinitionId } from '../../state/helpers';
+export var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
-      url = _ref.url;
+      url = _ref.url,
+      createAnalyticsEvent = _ref.createAnalyticsEvent;
+  var analyticsHandler = useCallback(function (analyticsPayload) {
+    fireSmartLinkEvent(analyticsPayload, createAnalyticsEvent);
+  }, [createAnalyticsEvent]);
   var delay = 300;
 
   var _React$useState = React.useState(false),
@@ -23,26 +32,45 @@ export var HoverCard = function HoverCard(_ref) {
 
   var fadeOutTimeoutId = useRef();
   var fadeInTimeoutId = useRef();
+  var cardOpenTime = useRef();
+  var linkState = useLinkState(url);
+  var analytics = useSmartLinkAnalytics(analyticsHandler);
+  var extensionKey = useMemo(function () {
+    return getExtensionKey(linkState.details);
+  }, [linkState]);
+  var definitionId = useMemo(function () {
+    return getDefinitionId(linkState.details);
+  }, [linkState]);
   var initHideCard = 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 = 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 = useCallback(function () {}, []);
+  }, [delay, isOpen, definitionId, extensionKey, analytics]);
   var linkActions = useSmartLinkActions({
     url: url,
     appearance: 'block',
@@ -69,11 +97,12 @@ export 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 jsx("div", {
@@ -101,7 +130,7 @@ export var HoverCard = function HoverCard(_ref) {
     testId: "hover-card",
     isOpen: isOpen,
     onClose: onClose,
-    placement: "bottom",
+    placement: "bottom-start",
     content: cardComponent,
     trigger: function trigger(triggerProps) {
       return jsx("span", _extends({}, triggerProps, {
@@ -110,4 +139,7 @@ export var HoverCard = function HoverCard(_ref) {
       }), children);
     }
   });
-};
+};
+export var HoverCard = withAnalyticsContext({
+  source: 'smartLinkPreviewHoverCard'
+})(withAnalyticsEvents()(HoverCardComponent));

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

@@ -3,4 +3,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from '@emotion/core';
-export var HoverCardContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  max-width: 500px;\n  padding: 0;\n"])));
+import { loadingPlaceholderClassName } from '../../index';
+export var HoverCardContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  max-width: 350px;\n  padding: 0;\n\n  .", " {\n    display: none;\n  }\n"])), loadingPlaceholderClassName);

package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts

@@ -1,5 +1,6 @@
 import { AnalyticsHandler } from '../../utils/types';
 import { CardInnerAppearance } from '../../view/Card/types';
+import { PreviewDisplay, PreviewInvokeMethod } from '../../view/HoverCard/types';
 import { CardType } from '../store/types';
 import { APIError } from '../../client/errors';
 import { InvokeType } from '../../model/invoke-opts';
@@ -9,8 +10,11 @@ export declare const useSmartLinkAnalytics: (dispatchAnalytics: AnalyticsHandler
         authAlternateAccountEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
         cardClickedEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined) => void;
         actionClickedEvent: (id: string, extensionKey: string, actionType: string, display: CardInnerAppearance, invokeType: InvokeType) => void;
+        hoverCardOpenLinkClickedEvent: (previewDisplay: PreviewDisplay, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: PreviewInvokeMethod | undefined) => void;
         closedAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
         renderSuccessEvent: (display: CardInnerAppearance, id: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+        hoverCardViewedEvent: (hoverDisplay: PreviewDisplay, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: PreviewInvokeMethod | undefined) => void;
+        hoverCardDismissedEvent: (hoverDisplay: PreviewDisplay, hoverTime: number, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: PreviewInvokeMethod | undefined) => void;
     };
     operational: {
         resolvedEvent: (id: string, definitionId?: string | undefined, extensionKey?: string | undefined, resourceType?: string | undefined) => void;

package/dist/types/state/flexible-ui-context/index.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { FlexibleUiDataContext } from './types';
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
 export declare const FlexibleUiContext: import("react").Context<FlexibleUiDataContext | undefined>;
 export declare const useFlexibleUiContext: () => FlexibleUiDataContext | undefined;

package/dist/types/state/flexible-ui-context/types.d.ts

@@ -1,26 +1,128 @@
 import { LinkLozenge } from '../../extractors/common/lozenge/types';
 import { LinkPerson } from '../../extractors/common/person/types';
 import { IconType, MediaType } from '../../constants';
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
 export declare type FlexibleUiDataContext = {
+    /**
+     * An array containing data used to populate the AuthorGroup element.
+     * @see AvatarGroup
+     */
     authorGroup?: LinkPerson[];
+    /**
+     * An array containing a @type {LinkPerson} used to populate the CollaboratorGroup element.
+     * @see CollaboratorGroup
+     */
     collaboratorGroup?: LinkPerson[];
+    /**
+     * Contains the number of comments of the linked resource.
+     * @type number
+     * @see CommentCount
+     */
     commentCount?: number;
+    /**
+     * Contains the number of views of the linked resource.
+     * @type number
+     * @see ViewCount
+     */
     viewCount?: number;
+    /**
+     * Contains the number of react of the linked resource.
+     * @type number
+     * @see ReactCount
+     */
     reactCount?: number;
+    /**
+     * Contains the number of votes of the linked resource.
+     * @type number
+     * @see VoteCount
+     */
     voteCount?: number;
+    /**
+     * Contains the name of the entity that created the resource.
+     * @type string
+     * @see CreatedBy
+     */
     createdBy?: string;
+    /**
+     * Contains the ISO timestamp of when the resource was created.
+     * @type string - ISO Timestamp
+     * @see CreatedOn
+     */
     createdOn?: string;
+    /**
+     * Contains the favicon of the resource.
+     * @type Icon
+     * @see LinkIcon
+     */
     linkIcon?: Icon;
+    /**
+     * Contains the name of the entity that last modified the resource.
+     * @type string
+     * @see ModifiedBy
+     */
     modifiedBy?: string;
+    /**
+     * Contains the ISO timestamp of when the resource was last modified.
+     * @type string - ISO Timestamp
+     * @see ModifiedOn
+     */
     modifiedOn?: string;
+    /**
+     * Contains the preview (typically the thumbnail) of the resource.
+     * @type Media
+     * @see Preview
+     */
     preview?: Media;
+    /**
+     * Contains the priority icon of the resource.
+     * @type Icon
+     * @see Priority
+     */
     priority?: Icon;
+    /**
+     * Contains the programming language of the resource.
+     * @type string
+     * @see ProgrammingLanguage
+     */
     programmingLanguage?: string;
+    /**
+     * Contains the snippet of the resource.
+     * @type string
+     * @see Snippet
+     */
     snippet?: string;
+    /**
+     * Contains the number of subscribers of the linked resource.
+     * @type number
+     * @see SubscriberCount
+     */
     subscriberCount?: number;
+    /**
+     * Contains the number of subscribers of the linked resource.
+     * @type number
+     * @see SubscriberCount
+     */
     state?: LinkLozenge;
+    /**
+     * Contains the Title of the linked resource.
+     * @type string
+     * @see Title
+     */
     title?: string;
+    /**
+     * Contains the url of the linked resource.
+     * @type string
+     * @see Title
+     */
     url?: string;
+    /**
+     * Contains the provider icon of the linked resource.
+     * @type Icon
+     * @see Provider
+     */
     provider?: Icon;
 };
 export declare type Icon = {

package/dist/types/state/hooks/useSmartLink.d.ts

@@ -14,8 +14,11 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
             authAlternateAccountEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
             cardClickedEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined) => void;
             actionClickedEvent: (id: string, extensionKey: string, actionType: string, display: import("../../view/Card/types").CardInnerAppearance, invokeType: import("../../model/invoke-opts").InvokeType) => void;
+            hoverCardOpenLinkClickedEvent: (previewDisplay: import("../../view/HoverCard/types").PreviewDisplay, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: import("../../view/HoverCard/types").PreviewInvokeMethod | undefined) => void;
             closedAuthEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
             renderSuccessEvent: (display: import("../../view/Card/types").CardInnerAppearance, id: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+            hoverCardViewedEvent: (hoverDisplay: import("../../view/HoverCard/types").PreviewDisplay, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: import("../../view/HoverCard/types").PreviewInvokeMethod | undefined) => void;
+            hoverCardDismissedEvent: (hoverDisplay: import("../../view/HoverCard/types").PreviewDisplay, hoverTime: number, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: import("../../view/HoverCard/types").PreviewInvokeMethod | undefined) => void;
         };
         operational: {
             resolvedEvent: (id: string, definitionId?: string | undefined, extensionKey?: string | undefined, resourceType?: string | undefined) => void;

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

@@ -2,6 +2,7 @@ import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { AnalyticsPayload } from '../types';
 import { ErrorInfo } from 'react';
 import { CardInnerAppearance } from '../../view/Card/types';
+import { PreviewDisplay, PreviewInvokeMethod } from '../../view/HoverCard/types';
 import { APIError } from '../../client/errors';
 export declare const ANALYTICS_CHANNEL = "media";
 export declare const context: {
@@ -28,3 +29,6 @@ export declare const uiClosedAuthEvent: (display: CardInnerAppearance, definitio
 export declare const screenAuthPopupEvent: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const uiRenderSuccessEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const uiRenderFailedEvent: (display: CardInnerAppearance, error: Error, errorInfo: ErrorInfo) => AnalyticsPayload;
+export declare const uiHoverCardViewedEvent: (hoverDisplay: PreviewDisplay, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: PreviewInvokeMethod | undefined) => AnalyticsPayload;
+export declare const uiHoverCardDismissedEvent: (hoverDisplay: PreviewDisplay, hoverTime: number, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: PreviewInvokeMethod | undefined) => AnalyticsPayload;
+export declare const uiHoverCardOpenLinkClickedEvent: (previewDisplay: string, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: PreviewInvokeMethod | undefined) => AnalyticsPayload;

package/dist/types/utils/analytics/index.d.ts

@@ -1,5 +1,5 @@
 import { CardType } from '../../state/store/types';
 import { APIError } from '../../client/errors';
 import { AnalyticsPayload } from '../types';
-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 declare const instrumentEvent: (id: string, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, resourceType?: string | undefined, error?: APIError | undefined) => AnalyticsPayload | undefined;

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

@@ -1,7 +1,7 @@
 import { GasPayload } from '@atlaskit/analytics-gas-types';
 import { CardInnerAppearance } from '../view/Card/types';
-export declare type AnalyticsAction = 'resolved' | 'unresolved' | 'connectSucceeded' | 'connectFailed' | 'connected' | 'clicked' | 'closed' | 'renderFailed' | 'renderWithStatus' | 'renderSuccess' | 'inserted';
-export declare type AnalyticsActionSubject = 'smartLink' | 'smartLinkAction' | 'applicationAccount' | 'button' | 'consentModal';
+export declare type AnalyticsAction = 'resolved' | 'unresolved' | 'connectSucceeded' | 'connectFailed' | 'connected' | 'clicked' | 'closed' | 'renderFailed' | 'renderWithStatus' | 'renderSuccess' | 'inserted' | 'viewed' | 'dismissed';
+export declare type AnalyticsActionSubject = 'smartLink' | 'smartLinkAction' | 'applicationAccount' | 'button' | 'consentModal' | 'hoverCard';
 export declare type AnalyticsPayload = GasPayload & {
     action?: AnalyticsAction;
     actionSubject: AnalyticsActionSubject;

package/dist/types/view/Card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "onClick" | "analyticsContext" | "key" | "url" | "ui" | "showActions" | "onResolve" | "platform" | "forwardedRef" | "isFrameVisible" | "importer" | "container" | "embedIframeRef" | "inlinePreloaderStyle"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "onClick" | "analyticsContext" | "key" | "url" | "ui" | "showActions" | "onResolve" | "platform" | "isFrameVisible" | "embedIframeRef" | "forwardedRef" | "importer" | "container" | "inlinePreloaderStyle" | "showHoverPreview"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types/view/Card/types.d.ts

@@ -29,4 +29,5 @@ export interface CardProps extends WithAnalyticsEventsProps {
     inlinePreloaderStyle?: InlinePreloaderStyle;
     ui?: FlexibleUiOptions;
     children?: React.ReactNode;
+    showHoverPreview?: boolean;
 }

package/dist/types/view/CardWithUrl/component.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CardWithUrlContentProps } from './types';
-export declare function CardWithUrlContent({ id, url, isSelected, isFrameVisible, platform, onClick, appearance, dispatchAnalytics, onResolve, testId, showActions, inheritDimensions, embedIframeRef, inlinePreloaderStyle, ui, children, }: CardWithUrlContentProps): JSX.Element;
+export declare function CardWithUrlContent({ id, url, isSelected, isFrameVisible, platform, onClick, appearance, dispatchAnalytics, onResolve, testId, showActions, inheritDimensions, embedIframeRef, inlinePreloaderStyle, ui, children, showHoverPreview, }: CardWithUrlContentProps): JSX.Element;

package/dist/types/view/CardWithUrl/types.d.ts

@@ -21,4 +21,5 @@ export declare type CardWithUrlContentProps = {
     inlinePreloaderStyle?: InlinePreloaderStyle;
     ui?: FlexibleUiOptions;
     children?: React.ReactNode;
+    showHoverPreview?: boolean;
 };

package/dist/types/view/FlexibleCard/components/actions/action/index.d.ts

@@ -4,5 +4,13 @@ import { Spacing } from '@atlaskit/button';
 import { SmartLinkSize } from '../../../../../constants';
 import { ActionProps } from './types';
 export declare const sizeToSpacing: Record<SmartLinkSize, Spacing>;
+/**
+ * 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
+ */
 declare const Action: React.FC<ActionProps>;
 export default Action;

package/dist/types/view/FlexibleCard/components/actions/action/types.d.ts

@@ -1,9 +1,9 @@
+import { SerializedStyles } from '@emotion/core';
 import { SmartLinkSize } from '../../../../../constants';
 import { Appearance } from '@atlaskit/button/types';
 import { ReactChild } from 'react';
 export declare type ActionProps = {
     size?: SmartLinkSize;
-    testId?: string;
     content?: React.ReactNode;
     appearance?: Appearance;
     onClick: () => any;
@@ -11,9 +11,11 @@ export declare type ActionProps = {
     iconPosition?: 'before' | 'after';
     tooltipMessage?: React.ReactNode;
     asDropDownItem?: boolean;
+    overrideCss?: SerializedStyles;
+    testId?: string;
 };
 export declare type ActionIconProps = {
     size?: SmartLinkSize;
-    testId?: string;
     icon?: ReactChild;
+    testId?: string;
 };

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

@@ -1,5 +1,20 @@
 /// <reference types="react" />
 import { ActionProps } from './action/types';
+/**
+ * Creates a DeleteAction component. Accepts default ActionProps, but defaults
+ * the icon to a cross icon.
+ * @see Action
+ */
 export declare const DeleteAction: import("react").FC<ActionProps>;
+/**
+ * Creates a EditAction component. Accepts default ActionProps, but defaults
+ * the icon to an edit (pencil) icon.
+ * @see Action
+ */
 export declare const EditAction: import("react").FC<ActionProps>;
+/**
+ * Creates a CustomAction component. Accepts default ActionProps. Required to provide
+ * your own icon or text.
+ * @see Action
+ */
 export declare const CustomAction: import("react").FC<ActionProps>;

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

@@ -1,4 +1,10 @@
 /// <reference types="react" />
 import { ActionGroupProps } from './types';
+/**
+ * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
+ * preferences.
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
 declare const ActionGroup: React.FC<ActionGroupProps>;
 export default ActionGroup;

package/dist/types/view/FlexibleCard/components/blocks/action-group/types.d.ts

@@ -5,8 +5,8 @@ export declare type ActionGroupProps = {
     items: ActionItem[];
     size?: SmartLinkSize;
     direction?: SmartLinkDirection;
-    testId?: string;
     appearance?: Appearance;
     visibleButtonsNum?: number;
     onDropdownOpenChange?: (isOpen: boolean) => void;
+    testId?: string;
 };

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

@@ -1,5 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
 import { BlockProps } from '../types';
+/**
+ * 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
+ */
 declare const Block: React.FC<BlockProps>;
 export default Block;

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

@@ -4,5 +4,11 @@ import { SerializedStyles } from '@emotion/core';
 import { ElementGroupProps } from './types';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 export declare const getElementGroupStyles: (direction: SmartLinkDirection, size: SmartLinkSize, align: SmartLinkAlignment, width: SmartLinkWidth) => SerializedStyles;
+/**
+ * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
+ * preferences.
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
 declare const ElementGroup: React.FC<ElementGroupProps>;
 export default ElementGroup;

package/dist/types/view/FlexibleCard/components/blocks/element-group/types.d.ts

@@ -2,9 +2,9 @@ import { Interpolation } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 export declare type ElementGroupProps = {
     align?: SmartLinkAlignment;
-    css?: Interpolation;
     direction?: SmartLinkDirection;
+    overrideCss?: Interpolation;
     size?: SmartLinkSize;
-    testId?: string;
     width?: SmartLinkWidth;
+    testId?: string;
 };

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

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FooterBlockProps } from './types';
+/**
+ * Represents a FooterBlock, designed to contain elements and actions that should appear
+ * at the bottom of a link card.
+ * @param {FooterBlockProps} FooterBlockProps
+ * @see Block
+ */
 declare const FooterBlock: React.FC<FooterBlockProps>;
 export default FooterBlock;

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

@@ -1,4 +1,10 @@
 import React from 'react';
 import { MetadataBlockProps } from './types';
+/**
+ * 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
+ */
 declare const MetadataBlock: React.FC<MetadataBlockProps>;
 export default MetadataBlock;

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

@@ -1,4 +1,9 @@
 import React from 'react';
 import { PreviewBlockProps } from './types';
+/**
+ * Represents a PreviewBlock, which typically contains media or other large format content.
+ * @param {PreviewBlock} PreviewBlock
+ * @see Block
+ */
 declare const PreviewBlock: React.FC<PreviewBlockProps>;
 export default PreviewBlock;

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

@@ -1,4 +1,9 @@
 import React from 'react';
 import { SnippetBlockProps } from './types';
+/**
+ * Represents a SnippetBlock, which is used to display longer form text content, like descriptions.
+ * @param {SnippetBlock} SnippetBlock
+ * @see Block
+ */
 declare const SnippetBlock: React.FC<SnippetBlockProps>;
 export default SnippetBlock;

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

@@ -1,5 +1,12 @@
 /** @jsx jsx */
 import React from 'react';
-import { TitleBlockProps } from '../types';
-declare const TitleBlockErroredView: React.FC<TitleBlockProps>;
+import { TitleBlockViewProps } from '../types';
+/**
+ * Represents an Errored TitleBlock view.
+ * This will render when a Smart Link did not successfully resolve.
+ * This may be a result of a Smart Link not having the correct credentials,
+ * or the backend response was errored or malformed.
+ * @see TitleBlock
+ */
+declare const TitleBlockErroredView: React.FC<TitleBlockViewProps>;
 export default TitleBlockErroredView;

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

@@ -1,4 +1,15 @@
 import React from 'react';
 import { TitleBlockProps } from './types';
+/**
+ * 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
+ */
 declare const TitleBlock: React.FC<TitleBlockProps>;
 export default TitleBlock;

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

@@ -1,5 +1,9 @@
-/** @jsx jsx */
 import React from 'react';
-import { TitleBlockProps } from '../types';
-declare const TitleBlockResolvedView: React.FC<TitleBlockProps>;
+import { TitleBlockViewProps } from '../types';
+/**
+ * This renders a fully resolved TitleBlock.
+ * This should render when a Smart Link returns a valid response.
+ * @see TitleBlock
+ */
+declare const TitleBlockResolvedView: React.FC<TitleBlockViewProps>;
 export default TitleBlockResolvedView;

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

@@ -1,5 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
-import { TitleBlockProps } from '../types';
-declare const TitleBlockResolvingView: React.FC<TitleBlockProps>;
+import { TitleBlockViewProps } from '../types';
+/**
+ * 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
+ */
+declare const TitleBlockResolvingView: React.FC<TitleBlockViewProps>;
 export default TitleBlockResolvingView;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { BlockProps, ElementItem, ActionItem } from '../types';
 import { SmartLinkPosition, SmartLinkTheme } from '../../../../../constants';
 import { RetryOptions } from '../../../types';
@@ -6,6 +6,11 @@ import { LinkProps } from '../../elements/link/types';
 export declare type TitleBlockProps = BlockProps & {
     maxLines?: number;
     metadata?: ElementItem[];
+    /** Determines the position of the icon in the TitleBlock.
+     * Top: Icon will be rendered in the "top" left of the TitleBlock
+     * Center: Icon will be rendered "center" relative to the vertical height of the TitleBlock.
+     * If direction is Horizontal, icon will be rendered in the center relative to the horizontal width of the TitleBlock.
+     */
     position?: SmartLinkPosition;
     retry?: RetryOptions;
     subtitle?: ElementItem[];
@@ -16,3 +21,7 @@ export declare type TitleBlockProps = BlockProps & {
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     anchorTarget?: LinkProps['target'];
 };
+export declare type TitleBlockViewProps = TitleBlockProps & {
+    actionGroup?: React.ReactNode;
+    title: React.ReactNode;
+};