@atlaskit/smart-card 23.5.2 → 23.6.0

package/dist/esm/view/InlineCard/UnauthorisedView/index.js

@@ -22,6 +22,7 @@ import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButton, LinkAppearance } from '../styled';
+import { HoverCard } from '../../HoverCard';
 var FallbackUnauthorizedIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
@@ -81,8 +82,10 @@ export var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component)
           onClick = _this$props2.onClick,
           isSelected = _this$props2.isSelected,
           _this$props2$testId = _this$props2.testId,
-          testId = _this$props2$testId === void 0 ? 'inline-card-unauthorized-view' : _this$props2$testId;
-      return /*#__PURE__*/React.createElement(Frame, {
+          testId = _this$props2$testId === void 0 ? 'inline-card-unauthorized-view' : _this$props2$testId,
+          _this$props2$showAuth = _this$props2.showAuthTooltip,
+          showAuthTooltip = _this$props2$showAuth === void 0 ? false : _this$props2$showAuth;
+      var inlineCardUnauthenticatedView = /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         link: url,
         onClick: onClick,
@@ -92,6 +95,15 @@ export var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component)
         title: this.renderMessage(),
         titleColor: token('color.text.subtle', N500)
       }));
+
+      if (showAuthTooltip) {
+        return /*#__PURE__*/React.createElement(HoverCard, {
+          url: url,
+          onAuthorize: this.props.onAuthorise
+        }, inlineCardUnauthenticatedView);
+      }
+
+      return inlineCardUnauthenticatedView;
     }
   }]);
 

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

@@ -25,7 +25,8 @@ export var InlineCard = function InlineCard(_ref) {
       onError = _ref.onError,
       testId = _ref.testId,
       inlinePreloaderStyle = _ref.inlinePreloaderStyle,
-      showHoverPreview = _ref.showHoverPreview;
+      showHoverPreview = _ref.showHoverPreview,
+      showAuthTooltip = _ref.showAuthTooltip;
   var status = cardState.status,
       details = cardState.details;
   var cardDetails = details && details.data || getEmptyJsonLd();
@@ -77,7 +78,8 @@ export var InlineCard = function InlineCard(_ref) {
         isSelected: isSelected,
         onClick: handleFrameClick,
         onAuthorise: handleAuthorize,
-        testId: testIdWithStatus
+        testId: testIdWithStatus,
+        showAuthTooltip: showAuthTooltip
       });
 
     case 'forbidden':

package/dist/esm/view/common/UnauthorisedViewContent.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../../messages';
+import { CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../constants';
+
+/**
+ * This component is used in unauthorized views of a smart link.
+ * It represents the main text that provides a user with information on how to connect their account
+ */
+var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
+  var providerName = _ref.providerName,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'unauthorised-view-content' : _ref$testId;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_description, {
+    values: {
+      context: providerName
+    }
+  })), ' ', /*#__PURE__*/React.createElement("a", {
+    href: CONTENT_URL_SECURITY_AND_PERMISSIONS,
+    target: "_blank",
+    "data-testid": "".concat(testId, "-learn-more")
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.learn_more_about_smart_links_security)));
+};
+
+export default UnauthorisedViewContent;

package/dist/types/view/HoverCard/components/HoverCardContent.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
 import { AnalyticsFacade } from '../../../state/analytics';
-import { LinkAction } from '../../../state/hooks-external/useSmartLinkActions';
 import { ActionItem } from '../../FlexibleCard/components/blocks/types';
 import { HoverCardContentProps } from '../types';
 export declare const getOpenAction: (url: string, analytics: AnalyticsFacade, onActionClick?: ((actionId: string) => void) | undefined) => ActionItem;
-export declare const toFooterActions: (cardActions: LinkAction[], onActionClick?: ((actionId: string) => void) | undefined) => ActionItem[];
 declare const HoverCardContent: React.FC<HoverCardContentProps>;
 export default HoverCardContent;

package/dist/types/view/HoverCard/components/views/resolved/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ActionItem } from '../../../../FlexibleCard/components/blocks/types';
+import { LinkAction } from '../../../../../state/hooks-external/useSmartLinkActions';
+import { HoverCardResolvedProps } from './types';
+export declare const toFooterActions: (cardActions: LinkAction[], onActionClick?: ((actionId: string) => void) | undefined) => ActionItem[];
+declare const HoverCardResolvedView: React.FC<HoverCardResolvedProps>;
+export default HoverCardResolvedView;

package/dist/types/view/HoverCard/components/views/resolved/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const metadataBlockCss: import("@emotion/react").SerializedStyles;
+export declare const footerBlockCss: import("@emotion/react").SerializedStyles;
+export declare const hiddenSnippetStyles: import("@emotion/react").SerializedStyles;

package/dist/types/view/HoverCard/components/views/resolved/types.d.ts

@@ -0,0 +1,13 @@
+import { AnalyticsFacade } from '../../../../../state/analytics';
+import { LinkAction } from '../../../../../state/hooks-external/useSmartLinkActions';
+import { CardState } from '@atlaskit/linking-common';
+import { HoverCardLoadingViewProps } from '../resolving/types';
+export declare type HoverCardResolvedProps = {
+    extensionKey?: string;
+    id?: string;
+    url: string;
+    analytics: AnalyticsFacade;
+    cardActions?: LinkAction[];
+    cardState: CardState;
+    onActionClick: (actionId: string) => void;
+} & HoverCardLoadingViewProps;

package/dist/types/view/HoverCard/components/{HoverCardLoadingView.d.ts → views/resolving/index.d.ts}

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

package/dist/types/view/HoverCard/components/views/resolving/styled.d.ts

@@ -0,0 +1,2 @@
+export declare const loadingViewContainer: import("@emotion/react").SerializedStyles;
+export declare const skeletonContainer: import("@emotion/react").SerializedStyles;

package/dist/types/view/HoverCard/components/views/resolving/types.d.ts

@@ -0,0 +1,6 @@
+import { FlexibleCardProps } from '../../../../FlexibleCard/types';
+import { TitleBlockProps } from '../../../../FlexibleCard/components/blocks/title-block/types';
+export declare type HoverCardLoadingViewProps = {
+    flexibleCardProps: FlexibleCardProps;
+    titleBlockProps: TitleBlockProps;
+};

package/dist/types/view/HoverCard/components/views/unauthorised/index.d.ts

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

package/dist/types/view/HoverCard/components/views/unauthorised/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const connectButtonStyles: import("@emotion/react").SerializedStyles;
+export declare const titleBlockStyles: import("@emotion/react").SerializedStyles;
+export declare const mainTextStyles: import("@emotion/react").SerializedStyles;

package/dist/types/view/HoverCard/components/views/unauthorised/types.d.ts

@@ -0,0 +1,19 @@
+import { FlexibleCardProps } from '../../../../FlexibleCard/types';
+export declare type HoverCardUnauthorisedProps = {
+    /**
+     * Data required for rendering a Flexible Card
+     */
+    flexibleCardProps: FlexibleCardProps;
+    /**
+     * A function that determines an additional action that can be performed on an unauthorised link, e.g.
+     * connecting an account to gain access.
+     * @internal
+     */
+    onAuthorize?: () => void;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+};

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { HoverCardProps } from './types';
-export declare const HoverCard: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").PropsWithChildren<HoverCardProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "key" | "id" | "analyticsContext"> & import("react").RefAttributes<any>>;
+export declare const HoverCard: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").PropsWithChildren<HoverCardProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "key" | "id" | "analyticsContext" | "onAuthorize"> & import("react").RefAttributes<any>>;

package/dist/types/view/HoverCard/styled.d.ts

@@ -2,11 +2,7 @@ import { FlexibleUiOptions } from '../FlexibleCard/types';
 export declare const flexibleUiOptions: FlexibleUiOptions;
 export declare const CARD_WIDTH_REM = 24;
 export declare const CARD_GAP_PX = 10;
+export declare const separatorCss: import("@emotion/react").SerializedStyles;
 export declare const HoverCardContainer: import("@emotion/react").SerializedStyles;
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
-export declare const metadataBlockCss: import("@emotion/react").SerializedStyles;
-export declare const footerBlockCss: import("@emotion/react").SerializedStyles;
-export declare const loadingViewContainer: import("@emotion/react").SerializedStyles;
-export declare const skeletonContainer: import("@emotion/react").SerializedStyles;
-export declare const hiddenSnippetStyles: import("@emotion/react").SerializedStyles;
 export declare const getTransitionStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;

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

@@ -6,17 +6,17 @@ import { CardState } from '@atlaskit/linking-common';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
 import { AnalyticsHandler } from '../../utils/types';
 import { ReactElement } from 'react';
-import { TitleBlockProps } from '../FlexibleCard/components/blocks/title-block/types';
-import { FlexibleCardProps } from '../FlexibleCard/types';
 import { JsonLd } from 'json-ld-types';
 export interface HoverCardProps extends WithAnalyticsEventsProps {
     id?: string;
     url: string;
     children: ReactElement;
+    onAuthorize?: () => void;
 }
 export interface HoverCardComponentProps extends HoverCardProps {
     analyticsHandler: AnalyticsHandler;
     analytics: AnalyticsFacade;
+    onAuthorize?: () => void;
 }
 export declare type PreviewDisplay = 'card' | 'embed';
 export declare type PreviewInvokeMethod = 'keyboard' | 'mouse_hover' | 'mouse_click';
@@ -34,10 +34,7 @@ export declare type HoverCardContentProps = {
     onActionClick: (actionId: string) => void;
     onResolve: () => void;
     url: string;
-};
-export declare type HoverCardLoadingViewProps = {
-    flexibleCardProps: FlexibleCardProps;
-    titleBlockProps: TitleBlockProps;
+    onAuthorize?: () => void;
 };
 export declare type SnippetOrPreviewProps = {
     data: JsonLd.Data.BaseData;

package/dist/types/view/InlineCard/UnauthorisedView/index.d.ts

@@ -14,6 +14,8 @@ export interface InlineCardUnauthorizedViewProps {
     isSelected?: boolean;
     /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
     testId?: string;
+    /** A flag that determines is a tooltip should show up on hover over the unauthorised link */
+    showAuthTooltip?: boolean;
 }
 export declare class InlineCardUnauthorizedView extends React.Component<InlineCardUnauthorizedViewProps> {
     handleConnectAccount: (event: React.MouseEvent<HTMLElement>) => void;

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

@@ -18,4 +18,5 @@ export declare type InlineCardProps = {
     inlinePreloaderStyle?: InlinePreloaderStyle;
     renderers?: CardProviderRenderers;
     showHoverPreview?: boolean;
+    showAuthTooltip?: boolean;
 };

package/dist/types/view/common/UnauthorisedViewContent.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+declare type UnauthorisedViewContentProps = {
+    /**
+     * Is the name of the provider for the account that needs to be connected
+     * Eg. Google, Microsoft etc
+     */
+    providerName?: string;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+};
+/**
+ * This component is used in unauthorized views of a smart link.
+ * It represents the main text that provides a user with information on how to connect their account
+ */
+declare const UnauthorisedViewContent: ({ providerName, testId, }: UnauthorisedViewContentProps) => JSX.Element;
+export default UnauthorisedViewContent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.5.2",
+  "version": "23.6.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     "@atlaskit/icon-object": "^6.2.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/linking-common": "^1.14.0",
+    "@atlaskit/linking-common": "^1.15.0",
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/lozenge": "^11.3.0",
     "@atlaskit/media-common": "^2.17.0",