@atlaskit/smart-card 23.7.2 → 23.8.0

package/dist/esm/view/HoverCard/components/HoverCardComponent.js

@@ -10,14 +10,13 @@ import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
 import { HoverCardContainer, CARD_GAP_PX } from '../styled';
-import { SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import { CardDisplay } from '../../../constants';
 export var hoverCardClassName = 'smart-links-hover-preview';
 export var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
       url = _ref.url,
       analyticsHandler = _ref.analyticsHandler,
-      analytics = _ref.analytics,
-      onAuthorize = _ref.onAuthorize;
+      analytics = _ref.analytics;
   var delay = 300;
 
   var _React$useState = React.useState(false),
@@ -33,6 +32,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var parentSpan = useRef(null);
   var renderers = useSmartLinkRenderers();
   var linkState = useLinkState(url);
+  var linkStatus = linkState.status;
   var hoverDisplay = 'card';
   var invokeMethod = 'mouse_hover';
   var setMousePosition = useCallback(function (event) {
@@ -52,12 +52,13 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       analytics.ui.hoverCardDismissedEvent({
         previewDisplay: 'card',
         hoverTime: hoverTime,
-        previewInvokeMethod: 'mouse_hover'
+        previewInvokeMethod: 'mouse_hover',
+        status: linkStatus
       });
     }
 
     setIsOpen(false);
-  }, [analytics.ui, isOpen]);
+  }, [analytics.ui, isOpen, linkStatus]);
   var initHideCard = useCallback(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
@@ -80,7 +81,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
         cardOpenTime.current = Date.now();
         analytics.ui.hoverCardViewedEvent({
           previewDisplay: hoverDisplay,
-          previewInvokeMethod: invokeMethod
+          previewInvokeMethod: invokeMethod,
+          status: linkStatus
         });
       } //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
 
@@ -95,10 +97,10 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
 
       setIsOpen(true);
     }, delay);
-  }, [isOpen, setMousePosition, analytics.ui]);
+  }, [isOpen, setMousePosition, analytics.ui, linkStatus]);
   var linkActions = useSmartLinkActions({
     url: url,
-    appearance: SMART_CARD_ANALYTICS_DISPLAY,
+    appearance: CardDisplay.HoverCardPreview,
     analyticsHandler: analyticsHandler,
     origin: 'smartLinkPreviewHoverCard'
   });
@@ -134,8 +136,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
         onActionClick: onActionClick,
         onResolve: update,
         renderers: renderers,
-        url: url,
-        onAuthorize: onAuthorize
+        url: url
       }));
     },
     trigger: function trigger(triggerProps) {

package/dist/esm/view/HoverCard/components/HoverCardContent.js

@@ -1,12 +1,12 @@
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { extractType } from '@atlaskit/linking-common/extractors';
 import React, { useCallback, useMemo } from 'react';
-import { ActionName, SmartLinkPosition, SmartLinkSize } from '../../../constants';
+import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
 import { getExtensionKey } from '../../../state/helpers';
 import { isSpecialEvent } from '../../../utils';
 import { flexibleUiOptions, titleBlockCss } from '../styled';
-import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import { getSimulatedMetadata } from '../utils';
 import HoverCardLoadingView from './views/resolving';
 import HoverCardUnauthorisedView from './views/unauthorised';
 import HoverCardResolvedView from './views/resolved';
@@ -47,8 +47,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       onActionClick = _ref.onActionClick,
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
-      url = _ref.url,
-      onAuthorize = _ref.onAuthorize;
+      url = _ref.url;
   var extensionKey = useMemo(function () {
     return getExtensionKey(cardState.details);
   }, [cardState.details]);
@@ -56,7 +55,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     var isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent({
       id: id,
-      display: SMART_CARD_ANALYTICS_DISPLAY,
+      display: CardDisplay.HoverCardPreview,
       status: cardState.status,
       isModifierKeyPressed: isModifierKeyPressed,
       actionSubjectId: 'titleGoToLink'
@@ -99,8 +98,11 @@ var HoverCardContent = function HoverCardContent(_ref) {
 
   if (cardState.status === 'unauthorized') {
     return /*#__PURE__*/React.createElement(HoverCardUnauthorisedView, {
+      analytics: analytics,
+      extensionKey: extensionKey,
+      id: id,
       flexibleCardProps: flexibleCardProps,
-      onAuthorize: onAuthorize
+      url: url
     });
   } // if metadataStatus is 'errored' simply render using data available (normal path)
 

package/dist/esm/view/HoverCard/components/views/resolved/index.js

@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 import { extractType } from '@atlaskit/linking-common/extractors';
-import { ActionName, SmartLinkSize } from '../../../../../constants';
+import { ActionName, CardDisplay, SmartLinkSize } from '../../../../../constants';
 import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { useSmartCardActions } from '../../../../../state/actions';
-import { getSimulatedMetadata, toActionableMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../../../utils';
+import { getSimulatedMetadata, toActionableMetadata } from '../../../utils';
 import SnippetOrPreview from '../../SnippetOrPreview';
 import { extractMetadata } from '../../../../../extractors/hover/extractMetadata';
 export var toFooterActions = function toFooterActions(cardActions, onActionClick) {
@@ -49,7 +49,7 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     // Since this hover view is only rendered on resolved status,
     // there is no need to check for statuses.
     analytics.ui.renderSuccessEvent({
-      display: SMART_CARD_ANALYTICS_DISPLAY,
+      display: CardDisplay.HoverCardPreview,
       status: cardState.status
     });
   }, [analytics.ui, cardState.status]);

package/dist/esm/view/HoverCard/components/views/unauthorised/index.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import FlexibleCard from '../../../../FlexibleCard';
 import { messages } from '../../../../../messages';
@@ -9,29 +9,46 @@ import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled'
 import UnauthorisedViewContent from '../../../../common/UnauthorisedViewContent';
 import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
 import { LinkIcon } from '../../../../FlexibleCard/components/elements';
-import { ActionName } from '../../../../../constants';
+import { ActionName, CardDisplay } from '../../../../../constants';
+import { useSmartCardActions } from '../../../../../state/actions';
 
 var HoverCardUnauthorisedView = function HoverCardUnauthorisedView(_ref) {
   var _cardState$details, _extractProvider;
 
-  var flexibleCardProps = _ref.flexibleCardProps,
+  var analytics = _ref.analytics,
+      extensionKey = _ref.extensionKey,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? '' : _ref$id,
+      flexibleCardProps = _ref.flexibleCardProps,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'hover-card-unauthorised-view' : _ref$testId,
-      onAuthorize = _ref.onAuthorize;
+      url = _ref.url;
   var cardState = flexibleCardProps.cardState;
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
+
+  var _useSmartCardActions = useSmartCardActions(id, url, analytics),
+      authorize = _useSmartCardActions.authorize;
+
+  var handleAuthorize = useCallback(function () {
+    if (authorize) {
+      analytics.track.appAccountAuthStarted({
+        extensionKey: extensionKey
+      });
+      authorize(CardDisplay.HoverCardPreview);
+    }
+  }, [authorize, extensionKey, analytics.track]);
   var actions = useMemo(function () {
-    return onAuthorize ? [{
+    return [{
       name: ActionName.CustomAction,
       content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
         values: {
           context: providerName
         }
       })),
-      onClick: onAuthorize
-    }] : [];
-  }, [onAuthorize, providerName]);
+      onClick: handleAuthorize
+    }];
+  }, [handleAuthorize, providerName]);
   return /*#__PURE__*/React.createElement(FlexibleCard, _extends({}, flexibleCardProps, {
     testId: testId
   }), /*#__PURE__*/React.createElement(CustomBlock, {
@@ -45,7 +62,8 @@ var HoverCardUnauthorisedView = function HoverCardUnauthorisedView(_ref) {
     overrideCss: mainTextStyles,
     testId: "".concat(testId, "-content")
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
-    providerName: providerName
+    providerName: providerName,
+    analytics: analytics
   }))), /*#__PURE__*/React.createElement(CustomBlock, {
     overrideCss: connectButtonStyles,
     testId: "".concat(testId, "-button")

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

@@ -8,7 +8,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { useSmartLinkAnalytics } from '../../state/analytics';
 import { fireSmartLinkEvent } from '../../utils/analytics';
 import { HoverCardComponent } from './components/HoverCardComponent';
-import { SMART_CARD_ANALYTICS_DISPLAY } from './utils';
+import { CardDisplay } from '../../constants';
 
 var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   var url = props.url,
@@ -21,7 +21,7 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   var analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
   var onError = useCallback(function (error, info) {
     analytics.ui.renderFailedEvent({
-      display: SMART_CARD_ANALYTICS_DISPLAY,
+      display: CardDisplay.HoverCardPreview,
       id: id,
       error: error,
       errorInfo: info
@@ -37,5 +37,8 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
 };
 
 export var HoverCard = withAnalyticsContext({
-  source: 'smartLinkPreviewHoverCard'
+  source: 'smartLinkPreviewHoverCard',
+  attributes: {
+    display: CardDisplay.HoverCardPreview
+  }
 })(withAnalyticsEvents()(HoverCardWithErrorBoundary));

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

@@ -5,7 +5,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { ElementName } from '../../constants';
-export var SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
 export var getSimulatedMetadata = function getSimulatedMetadata() {
   var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var types = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

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

@@ -20,7 +20,7 @@ import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { AKIconWrapper } from '../Icon';
 import { messages } from '../../../messages';
 import { FormattedMessage } from 'react-intl-next';
-import { LinkAppearance, IconStyledButton, LowercaseAppearance, NoLinkAppearance } from '../styled';
+import { IconStyledButton, LowercaseAppearance } from '../styled';
 export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
   _inherits(InlineCardErroredView, _React$Component);
 
@@ -47,14 +47,11 @@ export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderMessage", function () {
+    _defineProperty(_assertThisInitialized(_this), "renderRightSide", function () {
       var _this$props = _this.props,
           onRetry = _this$props.onRetry,
-          url = _this$props.url,
           message = _this$props.message;
-      var link = /*#__PURE__*/React.createElement(LinkAppearance, null, url);
-      var errorMessage = /*#__PURE__*/React.createElement(NoLinkAppearance, null, message);
-      return !onRetry ? /*#__PURE__*/React.createElement(React.Fragment, null, link, " - ", errorMessage) : /*#__PURE__*/React.createElement(React.Fragment, null, link, " - ", errorMessage, ",\xA0", /*#__PURE__*/React.createElement(Button, {
+      return !onRetry ? message : /*#__PURE__*/React.createElement(React.Fragment, null, message, ', ', /*#__PURE__*/React.createElement(Button, {
         spacing: "none",
         appearance: "subtle-link",
         component: IconStyledButton,
@@ -79,8 +76,6 @@ export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
           icon = _this$props2.icon;
       return /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
-        link: url,
-        onClick: onClick,
         isSelected: isSelected
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
@@ -88,7 +83,10 @@ export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
           size: "small",
           primaryColor: token('color.icon.danger', R300)
         })),
-        title: this.renderMessage()
+        link: url,
+        title: url,
+        onClick: onClick,
+        rightSide: this.renderRightSide()
       }));
     }
   }]);

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

@@ -21,7 +21,7 @@ import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { AKIconWrapper } from '../Icon';
 import { messages } from '../../../messages';
 import { FormattedMessage } from 'react-intl-next';
-import { IconStyledButton, LowercaseAppearance, LinkAppearance } from '../styled';
+import { IconStyledButton, LowercaseAppearance } from '../styled';
 var FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
@@ -76,21 +76,18 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
       }));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderMessage", function () {
-      var _this$props4, _this$props4$requestA;
+    _defineProperty(_assertThisInitialized(_this), "renderRightSide", function () {
+      var _this$props3, _this$props3$requestA;
 
-      var _this$props3 = _this.props,
-          url = _this$props3.url,
-          onAuthorise = _this$props3.onAuthorise;
-      var link = /*#__PURE__*/React.createElement(LinkAppearance, null, url);
-      var hasRequestAccessContextMessage = (_this$props4 = _this.props) === null || _this$props4 === void 0 ? void 0 : (_this$props4$requestA = _this$props4.requestAccessContext) === null || _this$props4$requestA === void 0 ? void 0 : _this$props4$requestA.callToActionMessageKey;
-      return !onAuthorise && !hasRequestAccessContextMessage ? link : /*#__PURE__*/React.createElement(React.Fragment, null, link, ' - ', /*#__PURE__*/React.createElement(Button, {
+      var onAuthorise = _this.props.onAuthorise;
+      var hasRequestAccessContextMessage = (_this$props3 = _this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$requestA = _this$props3.requestAccessContext) === null || _this$props3$requestA === void 0 ? void 0 : _this$props3$requestA.callToActionMessageKey;
+      return onAuthorise || hasRequestAccessContextMessage ? /*#__PURE__*/React.createElement(Button, {
         spacing: "none",
         appearance: "subtle-link",
         onClick: _this.handleRetry,
         component: IconStyledButton,
         testId: "button-connect-other-account"
-      }, _this.renderForbiddenAccessMessage()));
+      }, _this.renderForbiddenAccessMessage()) : null;
     });
 
     return _this;
@@ -99,21 +96,22 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
   _createClass(InlineCardForbiddenView, [{
     key: "render",
     value: function render() {
-      var _this$props5 = this.props,
-          url = _this$props5.url,
-          icon = _this$props5.icon,
-          onClick = _this$props5.onClick,
-          isSelected = _this$props5.isSelected,
-          _this$props5$testId = _this$props5.testId,
-          testId = _this$props5$testId === void 0 ? 'inline-card-forbidden-view' : _this$props5$testId;
+      var _this$props4 = this.props,
+          url = _this$props4.url,
+          icon = _this$props4.icon,
+          onClick = _this$props4.onClick,
+          isSelected = _this$props4.isSelected,
+          _this$props4$testId = _this$props4.testId,
+          testId = _this$props4$testId === void 0 ? 'inline-card-forbidden-view' : _this$props4$testId;
       return /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
-        link: url,
-        onClick: onClick,
         isSelected: isSelected
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         icon: icon ? icon : FallbackForbiddenIcon,
-        title: this.renderMessage(),
+        link: url,
+        title: url,
+        onClick: onClick,
+        rightSide: this.renderRightSide(),
         titleColor: token('color.text.subtle', N500)
       }));
     }

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

@@ -1,13 +1,12 @@
 import React, { useCallback } from 'react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { Wrapper } from './styled';
+import { WrapperAnchor, WrapperSpan } from './styled';
 export var Frame = function Frame(props) {
   var isSelected = props.isSelected,
       children = props.children,
       onClick = props.onClick,
       link = props.link,
       withoutBackground = props.withoutBackground,
-      withoutHover = props.withoutHover,
       testId = props.testId,
       className = props.className;
   var handleClick = useCallback(function (event) {
@@ -28,14 +27,15 @@ export var Frame = function Frame(props) {
       onClick(event);
     }
   }, [onClick]);
-  var isInteractive = Boolean(onClick); // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
+  var isInteractive = Boolean(onClick); // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
+
+  var Wrapper = link || onClick ? WrapperAnchor : WrapperSpan; // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
   //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
 
   return /*#__PURE__*/React.createElement(Wrapper, {
     theme: useGlobalTheme(),
     href: link,
     withoutBackground: withoutBackground,
-    withoutHover: withoutHover,
     isSelected: isSelected,
     isInteractive: isInteractive,
     tabIndex: isInteractive ? 0 : undefined,

package/dist/esm/view/InlineCard/Frame/styled.js

@@ -1,13 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 import styled from '@emotion/styled';
 import { B100, B400, B50, DN40A, DN50A, N20, N40A, N50A } from '@atlaskit/theme/colors';
 import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
 import { themed } from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
-import { TitleWrapperClassName } from '../IconAndTitleLayout/styled';
 var BACKGROUND_COLOR_DARK = '#262B31';
 var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat(token('color.border.selected', B100), ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
 
@@ -15,13 +14,13 @@ var isInteractive = function isInteractive(_ref) {
   var isInteractive = _ref.isInteractive;
 
   if (isInteractive) {
-    return "\n      cursor: pointer;\n      :hover {\n        background-color: ".concat(themed({
+    return "\n      :hover {\n        background-color: ".concat(themed({
       light: token('color.background.neutral.subtle.hovered', N20),
       dark: token('color.background.neutral.subtle.hovered', BACKGROUND_COLOR_DARK)
-    }), ";\n        text-decoration: none;\n      }\n      :active {\n        background-color: ").concat(themed({
+    }), ";\n      }\n      :active {\n        background-color: ").concat(themed({
       light: token('color.background.selected', B50),
       dark: token('color.background.selected', BACKGROUND_COLOR_DARK)
-    }), ";\n        text-decoration: none;\n      }\n      :focus {\n        ").concat(selected, "\n        text-decoration: none;\n      }\n    ");
+    }), ";\n      }\n      :focus {\n        ").concat(selected, "\n      }\n    ");
   } else {
     return '';
   }
@@ -36,11 +35,6 @@ var isSelected = function isSelected(_ref2) {
     return 'user-select: text';
   }
 };
-
-var withoutHover = function withoutHover(_ref3) {
-  var withoutHover = _ref3.withoutHover;
-  return withoutHover ? "\n    &:hover {\n      text-decoration: none;\n    }\n  " : '';
-};
 /*
   Inline smart cards should have the following layout:
   ------------------------------------
@@ -55,28 +49,20 @@ var withoutHover = function withoutHover(_ref3) {
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 
 
-export var Wrapper = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ", "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", "\n  ", "\n  ", ";\n  ", "\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  &:hover span.", " {\n    text-decoration: ", ";\n  }\n"])), function (props) {
-  return props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '';
-}, akBorderRadius(), themed({
-  light: token('color.link', B400),
-  dark: token('color.link', '#4794FF')
-}), function (props) {
-  return props.withoutBackground ? '' : themed({
+var baseWrapperStyle = function baseWrapperStyle(props) {
+  return "\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ".concat(props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '', "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ").concat(akBorderRadius(), "px;\n  color: ").concat(themed({
+    light: token('color.link', B400),
+    dark: token('color.link', '#4794FF')
+  })(props), ";\n  background-color: ").concat(props.withoutBackground ? '' : themed({
     light: token('elevation.surface.raised', 'white'),
     dark: token('elevation.surface.raised', BACKGROUND_COLOR_DARK)
-  });
-}, function (props) {
-  return props.withoutBackground ? '' : themed({
+  })(props), ";\n  ").concat(props.withoutBackground ? '' : themed({
     light: "box-shadow: ".concat(token('elevation.shadow.raised', "0 1px 1px ".concat(N50A, ", 0 0 1px 1px ").concat(N40A)), ";"),
     dark: "box-shadow: ".concat(token('elevation.shadow.raised', "0 1px 1px ".concat(DN50A, ", 0 0 1px 1px ").concat(DN40A)), ";")
-  });
-}, function (props) {
-  return isInteractive(props);
-}, function (props) {
-  return isSelected(props);
-}, function (props) {
-  return withoutHover(props);
-}, TitleWrapperClassName, function (_ref4) {
-  var withoutHover = _ref4.withoutHover;
-  return withoutHover ? 'none' : 'underline';
-});
+  })(props), "\n  ").concat(isSelected(props), ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n");
+};
+
+export var WrapperAnchor = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), baseWrapperStyle, isInteractive);
+WrapperAnchor.displayName = 'WrapperAnchor';
+export var WrapperSpan = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), baseWrapperStyle);
+WrapperSpan.displayName = 'WrapperSpan';

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

@@ -1,8 +1,10 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -13,15 +15,48 @@ import ImageLoader from 'react-render-image';
 import { Icon, Shimmer } from '../Icon';
 import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper, TitleWrapperClassName } from './styled';
 import LinkIcon from '@atlaskit/icon/glyph/link';
+import { LinkAppearance, NoLinkAppearance } from '../styled';
 export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
   _inherits(IconAndTitleLayout, _React$Component);
 
   var _super = _createSuper(IconAndTitleLayout);
 
   function IconAndTitleLayout() {
+    var _this;
+
     _classCallCheck(this, IconAndTitleLayout);
 
-    return _super.apply(this, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
+      var onClick = _this.props.onClick;
+
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyPress", function (event) {
+      var onClick = _this.props.onClick;
+
+      if (event.key !== ' ' && event.key !== 'Enter') {
+        return;
+      }
+
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+
+    return _this;
   }
 
   _createClass(IconAndTitleLayout, [{
@@ -103,18 +138,25 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
           title = _this$props2.title,
           titleColor = _this$props2.titleColor,
           titleTextColor = _this$props2.titleTextColor,
+          link = _this$props2.link,
+          rightSide = _this$props2.rightSide,
           _this$props2$testId = _this$props2.testId,
           testId = _this$props2$testId === void 0 ? 'inline-card-icon-and-title' : _this$props2$testId;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconTitleWrapper, {
-        style: {
-          color: titleColor
-        }
-      }, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, {
+      var titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, {
         style: {
           color: titleTextColor
         },
         className: TitleWrapperClassName
-      }, title)));
+      }, title));
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconTitleWrapper, {
+        style: {
+          color: titleColor
+        }
+      }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
+        href: link,
+        onClick: this.handleClick,
+        onKeyPress: this.handleKeyPress
+      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, ' - ', rightSide) : null));
     }
   }]);
 

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

@@ -35,13 +35,11 @@ export var InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
           inlinePreloaderStyle = _this$props.inlinePreloaderStyle,
           _this$props$testId = _this$props.testId,
           testId = _this$props$testId === void 0 ? 'inline-card-resolving-view' : _this$props$testId,
-          titleTextColor = _this$props.titleTextColor,
-          withoutHover = _this$props.withoutHover;
+          titleTextColor = _this$props.titleTextColor;
 
       if (inlinePreloaderStyle === 'on-right-without-skeleton') {
         return /*#__PURE__*/React.createElement(Frame, {
           withoutBackground: true,
-          withoutHover: withoutHover,
           testId: testId,
           onClick: onClick,
           isSelected: isSelected
@@ -54,9 +52,9 @@ export var InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement(Frame, {
           testId: testId,
           onClick: onClick,
-          isSelected: isSelected,
-          withoutHover: withoutHover
+          isSelected: isSelected
         }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+          link: url,
           title: url,
           titleTextColor: titleTextColor
         }, /*#__PURE__*/React.createElement(SpinnerWrapper, {