@atlaskit/smart-card 20.0.4 → 20.1.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @atlaskit/smart-card
 
+## 20.1.0
+
+### Minor Changes
+
+- [`58eb89c70f5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58eb89c70f5) - Add onError callback on Card component.
+  The callback is triggered when Card component unable to resolve the link.
+
+  Return statuses are errored, fallback, forbidden, not_found and unauthorized.
+
+  Usage
+
+  ```typescript
+  const onError = (data: { status: string; url: string }) => {};
+
+  <Card appearance="inline" onError={onError} url="https://link-url" />;
+  ```
+
+### Patch Changes
+
+- [`e15410365b2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e15410365b2) - - export types/functions in linking common to be used in smart card
+
+  - add flag to card action to override re-using previous 'resolved' state
+
+  - add prop to cardState which reflects the metadata state, can be pending, resolved or errored
+
+  - modified reducer and dispatchers to handle these new props
+
+- Updated dependencies
+
+## 20.0.6
+
+### Patch Changes
+
+- [`afb579e5778`](https://bitbucket.org/atlassian/atlassian-frontend/commits/afb579e5778) - Flexible UI: Fix styling on MetadataBlock and FooterBlock in Firefox and Safari browser
+
+## 20.0.5
+
+### Patch Changes
+
+- [`6e4810f82c3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e4810f82c3) - wrap hover preview in error boundary and emit failure event
+
 ## 20.0.4
 
 ### Patch Changes

package/dist/cjs/state/actions/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ERROR_MESSAGE_OAUTH = exports.ERROR_MESSAGE_FATAL = exports.ANALYTICS_RESOLVING = exports.ANALYTICS_FALLBACK = exports.ANALYTICS_ERROR = void 0;
+exports.ERROR_MESSAGE_OAUTH = exports.ERROR_MESSAGE_METADATA = exports.ERROR_MESSAGE_FATAL = exports.ANALYTICS_RESOLVING = exports.ANALYTICS_FALLBACK = exports.ANALYTICS_ERROR = void 0;
 var ANALYTICS_RESOLVING = 'resolving';
 exports.ANALYTICS_RESOLVING = ANALYTICS_RESOLVING;
 var ANALYTICS_ERROR = 'errored';
@@ -13,4 +13,6 @@ exports.ANALYTICS_FALLBACK = ANALYTICS_FALLBACK;
 var ERROR_MESSAGE_OAUTH = 'Provider.authFlow is not set to OAuth2.';
 exports.ERROR_MESSAGE_OAUTH = ERROR_MESSAGE_OAUTH;
 var ERROR_MESSAGE_FATAL = 'Fatal error resolving URL';
-exports.ERROR_MESSAGE_FATAL = ERROR_MESSAGE_FATAL;
+exports.ERROR_MESSAGE_FATAL = ERROR_MESSAGE_FATAL;
+var ERROR_MESSAGE_METADATA = 'Error resolving metadata.';
+exports.ERROR_MESSAGE_METADATA = ERROR_MESSAGE_METADATA;

package/dist/cjs/state/actions/index.js

@@ -17,10 +17,10 @@ var _react = require("react");
 
 var _outboundAuthFlowClient = require("@atlaskit/outbound-auth-flow-client");
 
-var _linkingCommon = require("@atlaskit/linking-common");
-
 var _linkProvider = require("@atlaskit/link-provider");
 
+var _linkingCommon = require("@atlaskit/linking-common");
+
 var _helpers = require("../helpers");
 
 var _constants = require("./constants");
@@ -49,11 +49,23 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     details: undefined
   },
       details = _ref.details,
-      status = _ref.status;
+      status = _ref.status,
+      metadataStatus = _ref.metadataStatus;
 
   var hasAuthFlowSupported = config.authFlow !== 'disabled';
   var hasData = !!(details && details.data);
-  var handleResolvedLinkError = (0, _react.useCallback)(function (url, error, response) {
+  var setMetadataStatus = (0, _react.useCallback)(function (metadataStatus) {
+    dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_UPDATE_METADATA_STATUS, {
+      url: url
+    }, undefined, undefined, metadataStatus));
+  }, [dispatch, url]);
+  var handleResolvedLinkError = (0, _react.useCallback)(function (url, error, response, isMetadataRequest) {
+    // If metadata request then set metadata status, return and do not alter link status
+    if (isMetadataRequest) {
+      setMetadataStatus('errored');
+      return;
+    }
+
     if (error.kind === 'fatal') {
       // If there's no previous data in the store for this URL, then bail
       // out and let the editor handle fallbacks (returns to a blue link).
@@ -90,25 +102,34 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
         }, undefined, error));
       }
     }
-  }, [hasData, status, dispatch, details]);
+  }, [setMetadataStatus, hasData, status, dispatch, details]);
   var handleResolvedLinkResponse = (0, _react.useCallback)(function (resourceUrl, response) {
     var isReloading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var isMetadataRequest = arguments.length > 3 ? arguments[3] : undefined;
     var hostname = new URL(resourceUrl).hostname;
     var nextStatus = response ? (0, _helpers.getStatus)(response) : 'fatal'; // If we require authorization & do not have an authFlow available,
     // throw an error and render as a normal blue link.
 
     if ((nextStatus === 'unauthorized' || nextStatus === 'forbidden') && !hasAuthFlowSupported) {
-      handleResolvedLinkError(resourceUrl, new _linkingCommon.APIError('fallback', hostname, _constants.ERROR_MESSAGE_OAUTH), response);
+      handleResolvedLinkError(resourceUrl, new _linkingCommon.APIError('fallback', hostname, _constants.ERROR_MESSAGE_OAUTH), response, isMetadataRequest);
       return;
     } // Handle any other errors
 
 
     if (nextStatus === 'fatal') {
-      handleResolvedLinkError(resourceUrl, new _linkingCommon.APIError('fatal', hostname, _constants.ERROR_MESSAGE_FATAL));
+      handleResolvedLinkError(resourceUrl, new _linkingCommon.APIError('fatal', hostname, _constants.ERROR_MESSAGE_FATAL), undefined, isMetadataRequest);
       return;
-    } // Dispatch Analytics and resolved card action - including unauthorized states.
+    } // Handle errors of any other kind in the metadata request response
 
 
+    if (isMetadataRequest && nextStatus !== 'resolved') {
+      handleResolvedLinkError(resourceUrl, new _linkingCommon.APIError('error', hostname, _constants.ERROR_MESSAGE_METADATA), response, isMetadataRequest);
+      return;
+    } //if a link resolves normally, metadata will also always be resolved
+
+
+    setMetadataStatus('resolved'); // Dispatch Analytics and resolved card action - including unauthorized states.
+
     if (isReloading) {
       dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RELOADING, {
         url: resourceUrl
@@ -116,12 +137,13 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     } else {
       dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVED, {
         url: resourceUrl
-      }, response));
+      }, response, undefined, undefined, isMetadataRequest));
     }
-  }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported]);
+  }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported, setMetadataStatus]);
   var resolve = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     var resourceUrl,
         isReloading,
+        isMetadataRequest,
         _args = arguments;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) {
@@ -129,24 +151,25 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
           case 0:
             resourceUrl = _args.length > 0 && _args[0] !== undefined ? _args[0] : url;
             isReloading = _args.length > 1 && _args[1] !== undefined ? _args[1] : false;
+            isMetadataRequest = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
 
-            if (!(isReloading || !hasData)) {
-              _context.next = 6;
+            if (!(isReloading || !hasData || isMetadataRequest)) {
+              _context.next = 7;
               break;
             }
 
             return _context.abrupt("return", connections.client.fetchData(resourceUrl).then(function (response) {
-              return handleResolvedLinkResponse(resourceUrl, response, isReloading);
+              return handleResolvedLinkResponse(resourceUrl, response, isReloading, isMetadataRequest);
             }).catch(function (error) {
-              return handleResolvedLinkError(resourceUrl, error);
+              return handleResolvedLinkError(resourceUrl, error, undefined, isMetadataRequest);
             }));
 
-          case 6:
+          case 7:
             (0, _analytics.addMetadataToExperience)('smart-link-rendered', id, {
               cached: true
             });
 
-          case 7:
+          case 8:
           case "end":
             return _context.stop();
         }
@@ -158,10 +181,11 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
       dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_PENDING, {
         url: url
       }));
+      setMetadataStatus('pending');
     }
 
     return resolve();
-  }, [url, resolve, details, dispatch]);
+  }, [details, resolve, dispatch, url, setMetadataStatus]);
   var reload = (0, _react.useCallback)(function () {
     var definitionId = (0, _helpers.getDefinitionId)(details);
 
@@ -173,6 +197,13 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
       resolve(url, true);
     }
   }, [url, details, getState, resolve]);
+  var loadMetadata = (0, _react.useCallback)(function () {
+    //metadataStatus will be undefined for SSR links only
+    if (metadataStatus === undefined) {
+      setMetadataStatus('pending');
+      return resolve(url, false, true);
+    }
+  }, [metadataStatus, resolve, setMetadataStatus, url]);
   var authorize = (0, _react.useCallback)(function (appearance) {
     var definitionId = (0, _helpers.getDefinitionId)(details);
     var extensionKey = (0, _helpers.getExtensionKey)(details);
@@ -268,9 +299,10 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
       register: register,
       reload: reload,
       authorize: authorize,
-      invoke: invoke
+      invoke: invoke,
+      loadMetadata: loadMetadata
     };
-  }, [register, reload, authorize, invoke]);
+  }, [register, reload, authorize, invoke, loadMetadata]);
 };
 
 exports.useSmartCardActions = useSmartCardActions;

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

@@ -32,12 +32,13 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
   var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
       store = _useSmartLinkContext.store;
 
-  var state = (0, _linkingCommon.getUrl)(store, url);
-  var extractedDefinitionId = (0, _helpers.getDefinitionId)(state.details);
-  var extractedExtensionKey = (0, _helpers.getExtensionKey)(state.details);
-  var extractedResourceType = (0, _helpers.getResourceType)(state.details);
-  var extractedSubproduct = (0, _helpers.getSubproduct)(state.details);
-  var extractedProduct = (0, _helpers.getProduct)(state.details);
+  var state = store ? (0, _linkingCommon.getUrl)(store, url) : undefined;
+  var details = state ? state.details : undefined;
+  var extractedDefinitionId = (0, _helpers.getDefinitionId)(details);
+  var extractedExtensionKey = (0, _helpers.getExtensionKey)(details);
+  var extractedResourceType = (0, _helpers.getResourceType)(details);
+  var extractedSubproduct = (0, _helpers.getSubproduct)(details);
+  var extractedProduct = (0, _helpers.getProduct)(details);
   /** Contains all ui analytics events */
 
   var ui = (0, _react.useMemo)(function () {
@@ -172,6 +173,25 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
         dispatchAnalytics((0, _analytics.uiRenderSuccessEvent)(display, status, definitionId, extensionKey));
       },
 
+      /**
+       * This fires an event that represents when a Smart Link renders unsuccessfuly.
+       * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+       * @param id The unique ID for this Smart Link.
+       * @param error: An error representing why the Smart Link render failed.
+       * @param errorInfo: Additional details about the error including the stack trace.
+       */
+      renderFailedEvent: function renderFailedEvent(display) {
+        var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultId;
+        var error = arguments.length > 2 ? arguments[2] : undefined;
+        var errorInfo = arguments.length > 3 ? arguments[3] : undefined;
+        // Start and fail the smart-link-rendered experience. If it has already
+        // been started nothing happens.
+        (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
+        (0, _ufoExperiences.failUfoExperience)('smart-link-rendered', id);
+        (0, _ufoExperiences.failUfoExperience)('smart-link-authenticated', id);
+        dispatchAnalytics((0, _analytics.uiRenderFailedEvent)(display, error, errorInfo));
+      },
+
       /**
        * This fires an event that represents a hover preview being opened.
        * @param hoverDisplay Whether the hover preview was displayed as a card or embed.

package/dist/cjs/version.json

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

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

@@ -109,6 +109,7 @@ var BlockCard = function BlockCard(_ref) {
       renderers = _ref.renderers,
       isSelected = _ref.isSelected,
       onResolve = _ref.onResolve,
+      onError = _ref.onError,
       testId = _ref.testId,
       showActions = _ref.showActions,
       platform = _ref.platform;
@@ -146,6 +147,13 @@ var BlockCard = function BlockCard(_ref) {
       }));
 
     case 'unauthorized':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var unauthorizedViewProps = (0, _block.extractBlockProps)(data, meta, extractorOpts);
       return /*#__PURE__*/_react.default.createElement(_UnauthorizedView.UnauthorizedView, (0, _extends2.default)({}, unauthorizedViewProps, {
         isSelected: isSelected,
@@ -156,6 +164,13 @@ var BlockCard = function BlockCard(_ref) {
       }));
 
     case 'forbidden':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var forbiddenViewProps = (0, _block.extractBlockProps)(data, meta, extractorOpts);
       var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getUnauthorizedJsonLd)().meta;
       var requestAccessContext = (0, _context.extractRequestAccessContext)({
@@ -172,6 +187,13 @@ var BlockCard = function BlockCard(_ref) {
       }));
 
     case 'not_found':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var notFoundViewProps = (0, _block.extractBlockProps)(data, meta, extractorOpts);
       return /*#__PURE__*/_react.default.createElement(_NotFoundView.NotFoundView, (0, _extends2.default)({}, notFoundViewProps, {
         isSelected: isSelected,
@@ -181,6 +203,13 @@ var BlockCard = function BlockCard(_ref) {
 
     case 'fallback':
     case 'errored':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       if (authFlow && authFlow === 'disabled') {
         return /*#__PURE__*/_react.default.createElement(_LinkView.CardLinkView, {
           link: url,

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

@@ -47,6 +47,7 @@ function CardWithUrlContent(_ref) {
       appearance = _ref.appearance,
       dispatchAnalytics = _ref.dispatchAnalytics,
       onResolve = _ref.onResolve,
+      onError = _ref.onError,
       testId = _ref.testId,
       showActions = _ref.showActions,
       inheritDimensions = _ref.inheritDimensions,
@@ -124,7 +125,7 @@ function CardWithUrlContent(_ref) {
     if ((0, _helpers.isFinalState)(state.status)) {
       analytics.ui.renderSuccessEvent(appearance, state.status, id, definitionId, extensionKey);
     }
-  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]);
+  }, [appearance, state.status, url, definitionId, extensionKey, analytics.ui, id]);
 
   if (isFlexibleUi) {
     var cardState = state;
@@ -148,7 +149,8 @@ function CardWithUrlContent(_ref) {
       ui: ui,
       url: url,
       testId: testId,
-      onResolve: onResolve
+      onResolve: onResolve,
+      onError: onError
     }, children);
   } // We have to keep this last to prevent hook order from being violated
 
@@ -168,6 +170,7 @@ function CardWithUrlContent(_ref) {
         handleFrameClick: handleClickWrapper,
         isSelected: isSelected,
         onResolve: onResolve,
+        onError: onError,
         testId: testId,
         inlinePreloaderStyle: inlinePreloaderStyle,
         showHoverPreview: showHoverPreview
@@ -187,6 +190,7 @@ function CardWithUrlContent(_ref) {
         handleAnalytics: dispatchAnalytics,
         isSelected: isSelected,
         onResolve: onResolve,
+        onError: onError,
         testId: testId,
         showActions: showActions,
         platform: platform
@@ -206,6 +210,7 @@ function CardWithUrlContent(_ref) {
         isFrameVisible: isFrameVisible,
         platform: platform,
         onResolve: onResolve,
+        onError: onError,
         testId: testId,
         inheritDimensions: inheritDimensions,
         showActions: showActions,

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

@@ -21,7 +21,7 @@ var _performance = require("../../utils/performance");
 
 var _reactErrorBoundary = require("react-error-boundary");
 
-var _ufoExperiences = require("../../state/analytics/ufoExperiences");
+var _analytics2 = require("../../state/analytics");
 
 var _LazyFallback = require("./component-lazy/LazyFallback");
 
@@ -56,6 +56,7 @@ function CardWithURLRenderer(props) {
       onClick = props.onClick,
       container = props.container,
       onResolve = props.onResolve,
+      onError = props.onError,
       testId = props.testId,
       showActions = props.showActions,
       inheritDimensions = props.inheritDimensions,
@@ -80,6 +81,7 @@ function CardWithURLRenderer(props) {
 
     (0, _analytics.fireSmartLinkEvent)(analyticsPayload, createAnalyticsEvent);
   }, [appearance, createAnalyticsEvent]);
+  var analytics = (0, _analytics2.useSmartLinkAnalytics)(url !== null && url !== void 0 ? url : '', dispatchAnalytics, id);
   var logError = (0, _react.useCallback)(function (error, info) {
     var componentStack = info.componentStack; // NB: APIErrors are thrown in response to Object Resolver Service.
     // In these cases, control is handed back to the Editor. We do not
@@ -93,15 +95,10 @@ function CardWithURLRenderer(props) {
     else {
       var errorInfo = {
         componentStack: componentStack
-      }; // Start and fail the smart-link-rendered experience. If it has already
-      // been started nothing happens.
-
-      (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
-      (0, _ufoExperiences.failUfoExperience)('smart-link-rendered', id);
-      (0, _ufoExperiences.failUfoExperience)('smart-link-authenticated', id);
-      dispatchAnalytics((0, _analytics.uiRenderFailedEvent)(appearance, error, errorInfo));
+      };
+      analytics.ui.renderFailedEvent(appearance, id, error, errorInfo);
     }
-  }, [appearance, dispatchAnalytics, id]);
+  }, [analytics.ui, appearance, id]);
 
   if (!url) {
     throw new Error('@atlaskit/smart-card: url property is missing.');
@@ -117,6 +114,7 @@ function CardWithURLRenderer(props) {
     dispatchAnalytics: dispatchAnalytics,
     container: container,
     onResolve: onResolve,
+    onError: onError,
     testId: testId,
     showActions: showActions,
     inheritDimensions: inheritDimensions,

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

@@ -54,6 +54,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
       isFrameVisible = _ref.isFrameVisible,
       platform = _ref.platform,
       onResolve = _ref.onResolve,
+      onError = _ref.onError,
       testId = _ref.testId,
       inheritDimensions = _ref.inheritDimensions;
   var data = details && details.data || (0, _jsonld.getEmptyJsonLd)();
@@ -113,6 +114,13 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
       }
 
     case 'unauthorized':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var unauthorisedViewProps = (0, _embed.extractEmbedProps)(data, meta, platform);
       return /*#__PURE__*/_react.default.createElement(_UnauthorisedView.EmbedCardUnauthorisedView, (0, _extends2.default)({}, unauthorisedViewProps, {
         isSelected: isSelected,
@@ -122,6 +130,13 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
       }));
 
     case 'forbidden':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var forbiddenViewProps = (0, _embed.extractEmbedProps)(data, meta, platform);
       var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getUnauthorizedJsonLd)().meta;
       var requestAccessContext = (0, _context.extractRequestAccessContext)({
@@ -138,6 +153,13 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
       }));
 
     case 'not_found':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var notFoundViewProps = (0, _embed.extractEmbedProps)(data, meta, platform);
       return /*#__PURE__*/_react.default.createElement(_NotFoundView.EmbedCardNotFoundView, (0, _extends2.default)({}, notFoundViewProps, {
         isSelected: isSelected,
@@ -147,6 +169,13 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
 
     case 'fallback':
     case 'errored':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       return /*#__PURE__*/_react.default.createElement(_ErroredView.EmbedCardErroredView, {
         onRetry: handleErrorRetry,
         inheritDimensions: inheritDimensions,

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

@@ -24,11 +24,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
     case _constants.SmartLinkAlignment.Right:
-      return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        justify-content: flex-end;\n        text-align: right;\n      "])));
+      return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        -webkit-box-align: end;\n        -ms-flex-align: end;\n        justify-content: flex-end;\n        text-align: right;\n      "])));
 
     case _constants.SmartLinkAlignment.Left:
     default:
-      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        justify-content: flex-start;\n        text-align: left;\n      "])));
+      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        -webkit-box-align: start;\n        -ms-flex-align: start;\n        justify-content: flex-start;\n        text-align: left;\n      "])));
   }
 };
 

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

@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _constants = require("../../constants");
+
 var _container = _interopRequireDefault(require("./components/container"));
 
 var _flexibleUiContext = require("../../state/flexible-ui-context");
@@ -33,24 +35,49 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var cardState = _ref.cardState,
       children = _ref.children,
       onAuthorize = _ref.onAuthorize,
+      onError = _ref.onError,
+      onResolve = _ref.onResolve,
       renderers = _ref.renderers,
       ui = _ref.ui,
       url = _ref.url,
       onClick = _ref.onClick,
-      testId = _ref.testId,
-      onResolve = _ref.onResolve;
+      testId = _ref.testId;
   var cardType = cardState.status,
       details = cardState.details;
   var status = cardType;
   var context = (0, _utils.getContextByStatus)(url, status, details, renderers);
   var retry = (0, _utils.getRetryOptions)(url, status, details, onAuthorize);
+
+  var _ref2 = context || {},
+      title = _ref2.title;
+
   (0, _react.useEffect)(function () {
-    if (status === 'resolved' && onResolve) {
-      onResolve({
-        url: url
-      });
+    switch (status) {
+      case _constants.SmartLinkStatus.Resolved:
+        if (onResolve) {
+          onResolve({
+            title: title,
+            url: url
+          });
+        }
+
+        break;
+
+      case _constants.SmartLinkStatus.Errored:
+      case _constants.SmartLinkStatus.Fallback:
+      case _constants.SmartLinkStatus.Forbidden:
+      case _constants.SmartLinkStatus.NotFound:
+      case _constants.SmartLinkStatus.Unauthorized:
+        if (onError) {
+          onError({
+            status: status,
+            url: url
+          });
+        }
+
+        break;
     }
-  }, [onResolve, status, url]);
+  }, [onError, onResolve, status, title, url]);
   return /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({