@atlaskit/smart-card 20.0.6 → 20.1.2

package/dist/cjs/view/HoverCard/components/HoverCardLoadingView.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _loadingSkeleton = _interopRequireDefault(require("../../FlexibleCard/components/common/loading-skeleton"));
+
+var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
+
+var _blocks = require("../../FlexibleCard/components/blocks");
+
+var _styled = require("../styled");
+
+/** @jsx jsx */
+var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
+  var flexibleCardProps = _ref.flexibleCardProps,
+      titleBlockProps = _ref.titleBlockProps;
+  var lineHeightRem = 1.25;
+  var skeletonWidth = _styled.CARD_WIDTH_REM - 2;
+  return (0, _core.jsx)("div", {
+    css: _styled.loadingViewContainer,
+    "data-testid": "hover-card-loading-view"
+  }, (0, _core.jsx)(_FlexibleCard.default, flexibleCardProps, (0, _core.jsx)(_blocks.TitleBlock, titleBlockProps)), (0, _core.jsx)("div", {
+    css: _styled.skeletonContainer
+  }, (0, _core.jsx)("span", null), (0, _core.jsx)(_loadingSkeleton.default, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }), (0, _core.jsx)(_loadingSkeleton.default, {
+    width: skeletonWidth,
+    height: lineHeightRem * 3
+  }), (0, _core.jsx)(_loadingSkeleton.default, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  })));
+};
+
+var _default = HoverCardLoadingView;
+exports.default = _default;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = void 0;
+exports.titleBlockCss = exports.skeletonContainer = exports.metadataBlockCss = exports.loadingViewContainer = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,7 +15,7 @@ var _index = require("../../index");
 
 var _constants = require("../../constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 var flexibleUiOptions = {
   hideElevation: true,
@@ -25,14 +25,20 @@ var flexibleUiOptions = {
   hidePadding: true
 };
 exports.flexibleUiOptions = flexibleUiOptions;
+var CARD_WIDTH_REM = 24;
+exports.CARD_WIDTH_REM = CARD_WIDTH_REM;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 var separatorCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);
-var HoverCardContainer = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: 24rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), _index.loadingPlaceholderClassName);
+var HoverCardContainer = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, _index.loadingPlaceholderClassName);
 exports.HoverCardContainer = HoverCardContainer;
 var titleBlockCss = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), blockGap, separatorCss, elementGap);
 exports.titleBlockCss = titleBlockCss;
 var metadataBlockCss = (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n"])), separatorCss, elementGap, elementGap);
 exports.metadataBlockCss = metadataBlockCss;
 var footerBlockCss = (0, _core.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0.25rem;\n"])));
-exports.footerBlockCss = footerBlockCss;
+exports.footerBlockCss = footerBlockCss;
+var loadingViewContainer = (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+exports.loadingViewContainer = loadingViewContainer;
+var skeletonContainer = (0, _core.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
+exports.skeletonContainer = skeletonContainer;

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

@@ -72,6 +72,7 @@ var InlineCard = function InlineCard(_ref) {
       isSelected = _ref.isSelected,
       renderers = _ref.renderers,
       onResolve = _ref.onResolve,
+      onError = _ref.onError,
       testId = _ref.testId,
       inlinePreloaderStyle = _ref.inlinePreloaderStyle,
       showHoverPreview = _ref.showHoverPreview;
@@ -111,6 +112,13 @@ var InlineCard = function InlineCard(_ref) {
       }));
 
     case 'unauthorized':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var provider = (0, _extractors.extractProvider)(cardDetails);
       return /*#__PURE__*/_react.default.createElement(_UnauthorisedView.InlineCardUnauthorizedView, {
         icon: provider && provider.icon,
@@ -122,6 +130,13 @@ var InlineCard = function InlineCard(_ref) {
       });
 
     case 'forbidden':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var providerForbidden = (0, _extractors.extractProvider)(cardDetails);
       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)({
@@ -141,6 +156,13 @@ var InlineCard = function InlineCard(_ref) {
       });
 
     case 'not_found':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var providerNotFound = (0, _extractors.extractProvider)(cardDetails);
       return /*#__PURE__*/_react.default.createElement(_ErroredView.InlineCardErroredView, {
         url: url,
@@ -153,6 +175,13 @@ var InlineCard = function InlineCard(_ref) {
 
     case 'fallback':
     case 'errored':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       return /*#__PURE__*/_react.default.createElement(_LinkView.CardLinkView, {
         link: url,
         isSelected: isSelected,

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

@@ -2,4 +2,5 @@ export const ANALYTICS_RESOLVING = 'resolving';
 export const ANALYTICS_ERROR = 'errored';
 export const ANALYTICS_FALLBACK = 'fallback';
 export const ERROR_MESSAGE_OAUTH = 'Provider.authFlow is not set to OAuth2.';
-export const ERROR_MESSAGE_FATAL = 'Fatal error resolving URL';
+export const ERROR_MESSAGE_FATAL = 'Fatal error resolving URL';
+export const ERROR_MESSAGE_METADATA = 'Error resolving metadata.';

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

@@ -1,10 +1,9 @@
 import { useMemo, useCallback } from 'react';
 import { auth } from '@atlaskit/outbound-auth-flow-client';
-import { APIError } from '@atlaskit/linking-common';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
-import { ACTION_PENDING, ACTION_RESOLVED, ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, cardAction } from '@atlaskit/linking-common';
+import { ACTION_PENDING, ACTION_RESOLVED, ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, ACTION_UPDATE_METADATA_STATUS, cardAction, APIError } from '@atlaskit/linking-common';
 import { getDefinitionId, getByDefinitionId, getServices, getStatus, getExtensionKey } from '../helpers';
-import { ERROR_MESSAGE_OAUTH, ERROR_MESSAGE_FATAL } from './constants';
+import { ERROR_MESSAGE_OAUTH, ERROR_MESSAGE_FATAL, ERROR_MESSAGE_METADATA } from './constants';
 import * as measure from '../../utils/performance';
 import { getUnauthorizedJsonLd } from '../../utils/jsonld';
 import { addMetadataToExperience } from '../analytics';
@@ -20,14 +19,26 @@ export const useSmartCardActions = (id, url, analytics) => {
   } = store;
   const {
     details,
-    status
+    status,
+    metadataStatus
   } = getState()[url] || {
     status: 'pending',
     details: undefined
   };
   const hasAuthFlowSupported = config.authFlow !== 'disabled';
   const hasData = !!(details && details.data);
-  const handleResolvedLinkError = useCallback((url, error, response) => {
+  const setMetadataStatus = useCallback(metadataStatus => {
+    dispatch(cardAction(ACTION_UPDATE_METADATA_STATUS, {
+      url
+    }, undefined, undefined, metadataStatus));
+  }, [dispatch, url]);
+  const handleResolvedLinkError = useCallback((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).
@@ -64,24 +75,32 @@ export const useSmartCardActions = (id, url, analytics) => {
         }, undefined, error));
       }
     }
-  }, [hasData, status, dispatch, details]);
-  const handleResolvedLinkResponse = useCallback((resourceUrl, response, isReloading = false) => {
+  }, [setMetadataStatus, hasData, status, dispatch, details]);
+  const handleResolvedLinkResponse = useCallback((resourceUrl, response, isReloading = false, isMetadataRequest) => {
     const hostname = new URL(resourceUrl).hostname;
     const nextStatus = response ? 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 APIError('fallback', hostname, ERROR_MESSAGE_OAUTH), response);
+      handleResolvedLinkError(resourceUrl, new APIError('fallback', hostname, ERROR_MESSAGE_OAUTH), response, isMetadataRequest);
       return;
     } // Handle any other errors
 
 
     if (nextStatus === 'fatal') {
-      handleResolvedLinkError(resourceUrl, new APIError('fatal', hostname, ERROR_MESSAGE_FATAL));
+      handleResolvedLinkError(resourceUrl, new APIError('fatal', hostname, 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 APIError('error', hostname, 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(cardAction(ACTION_RELOADING, {
         url: resourceUrl
@@ -89,15 +108,15 @@ export const useSmartCardActions = (id, url, analytics) => {
     } else {
       dispatch(cardAction(ACTION_RESOLVED, {
         url: resourceUrl
-      }, response));
+      }, response, undefined, undefined, isMetadataRequest));
     }
-  }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported]);
-  const resolve = useCallback(async (resourceUrl = url, isReloading = false) => {
+  }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported, setMetadataStatus]);
+  const resolve = useCallback(async (resourceUrl = url, isReloading = false, isMetadataRequest = false) => {
     // Request JSON-LD data for the card from ORS, iff it has extended
     // its cache lifespan OR there is no data for it currently. Once the data
     // has come back asynchronously, dispatch the resolved action for the card.
-    if (isReloading || !hasData) {
-      return connections.client.fetchData(resourceUrl).then(response => handleResolvedLinkResponse(resourceUrl, response, isReloading)).catch(error => handleResolvedLinkError(resourceUrl, error));
+    if (isReloading || !hasData || isMetadataRequest) {
+      return connections.client.fetchData(resourceUrl).then(response => handleResolvedLinkResponse(resourceUrl, response, isReloading, isMetadataRequest)).catch(error => handleResolvedLinkError(resourceUrl, error, undefined, isMetadataRequest));
     } else {
       addMetadataToExperience('smart-link-rendered', id, {
         cached: true
@@ -109,10 +128,11 @@ export const useSmartCardActions = (id, url, analytics) => {
       dispatch(cardAction(ACTION_PENDING, {
         url
       }));
+      setMetadataStatus('pending');
     }
 
     return resolve();
-  }, [url, resolve, details, dispatch]);
+  }, [details, resolve, dispatch, url, setMetadataStatus]);
   const reload = useCallback(() => {
     const definitionId = getDefinitionId(details);
 
@@ -122,6 +142,13 @@ export const useSmartCardActions = (id, url, analytics) => {
       resolve(url, true);
     }
   }, [url, details, getState, resolve]);
+  const loadMetadata = useCallback(() => {
+    //metadataStatus will be undefined for SSR links only
+    if (metadataStatus === undefined) {
+      setMetadataStatus('pending');
+      return resolve(url, false, true);
+    }
+  }, [metadataStatus, resolve, setMetadataStatus, url]);
   const authorize = useCallback(appearance => {
     const definitionId = getDefinitionId(details);
     const extensionKey = getExtensionKey(details);
@@ -187,6 +214,7 @@ export const useSmartCardActions = (id, url, analytics) => {
     register,
     reload,
     authorize,
-    invoke
-  }), [register, reload, authorize, invoke]);
+    invoke,
+    loadMetadata
+  }), [register, reload, authorize, invoke, loadMetadata]);
 };

package/dist/es2019/version.json

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

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

@@ -30,6 +30,7 @@ export const BlockCard = ({
   renderers,
   isSelected,
   onResolve,
+  onError,
   testId,
   showActions,
   platform
@@ -70,6 +71,13 @@ export const BlockCard = ({
       }));
 
     case 'unauthorized':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+
       const unauthorizedViewProps = extractBlockProps(data, meta, extractorOpts);
       return /*#__PURE__*/React.createElement(BlockCardUnauthorisedView, _extends({}, unauthorizedViewProps, {
         isSelected: isSelected,
@@ -80,6 +88,13 @@ export const BlockCard = ({
       }));
 
     case 'forbidden':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+
       const forbiddenViewProps = extractBlockProps(data, meta, extractorOpts);
       const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
       const requestAccessContext = extractRequestAccessContext({
@@ -96,6 +111,13 @@ export const BlockCard = ({
       }));
 
     case 'not_found':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+
       const notFoundViewProps = extractBlockProps(data, meta, extractorOpts);
       return /*#__PURE__*/React.createElement(BlockCardNotFoundView, _extends({}, notFoundViewProps, {
         isSelected: isSelected,
@@ -105,6 +127,13 @@ export const BlockCard = ({
 
     case 'fallback':
     case 'errored':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+
       if (authFlow && authFlow === 'disabled') {
         return /*#__PURE__*/React.createElement(CardLinkView, {
           link: url,

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

@@ -20,6 +20,7 @@ export function CardWithUrlContent({
   appearance,
   dispatchAnalytics,
   onResolve,
+  onError,
   testId,
   showActions,
   inheritDimensions,
@@ -91,7 +92,7 @@ export function CardWithUrlContent({
     if (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) {
     let cardState = state;
@@ -115,7 +116,8 @@ export function CardWithUrlContent({
       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
 
@@ -135,6 +137,7 @@ export function CardWithUrlContent({
         handleFrameClick: handleClickWrapper,
         isSelected: isSelected,
         onResolve: onResolve,
+        onError: onError,
         testId: testId,
         inlinePreloaderStyle: inlinePreloaderStyle,
         showHoverPreview: showHoverPreview
@@ -154,6 +157,7 @@ export function CardWithUrlContent({
         handleAnalytics: dispatchAnalytics,
         isSelected: isSelected,
         onResolve: onResolve,
+        onError: onError,
         testId: testId,
         showActions: showActions,
         platform: platform
@@ -173,6 +177,7 @@ export function CardWithUrlContent({
         isFrameVisible: isFrameVisible,
         platform: platform,
         onResolve: onResolve,
+        onError: onError,
         testId: testId,
         inheritDimensions: inheritDimensions,
         showActions: showActions,

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

@@ -25,6 +25,7 @@ export function CardWithURLRenderer(props) {
     onClick,
     container,
     onResolve,
+    onError,
     testId,
     showActions,
     inheritDimensions,
@@ -85,6 +86,7 @@ export function CardWithURLRenderer(props) {
     dispatchAnalytics,
     container,
     onResolve,
+    onError,
     testId,
     showActions,
     inheritDimensions,

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

@@ -29,6 +29,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   isFrameVisible,
   platform,
   onResolve,
+  onError,
   testId,
   inheritDimensions
 }, iframeRef) => {
@@ -91,6 +92,13 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
       }
 
     case 'unauthorized':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+
       const unauthorisedViewProps = extractEmbedProps(data, meta, platform);
       return /*#__PURE__*/React.createElement(EmbedCardUnauthorisedView, _extends({}, unauthorisedViewProps, {
         isSelected: isSelected,
@@ -100,6 +108,13 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
       }));
 
     case 'forbidden':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+
       const forbiddenViewProps = extractEmbedProps(data, meta, platform);
       const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
       const requestAccessContext = extractRequestAccessContext({
@@ -116,6 +131,13 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
       }));
 
     case 'not_found':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+
       const notFoundViewProps = extractEmbedProps(data, meta, platform);
       return /*#__PURE__*/React.createElement(EmbedCardNotFoundView, _extends({}, notFoundViewProps, {
         isSelected: isSelected,
@@ -125,6 +147,13 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
 
     case 'fallback':
     case 'errored':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+
       return /*#__PURE__*/React.createElement(EmbedCardErroredView, {
         onRetry: handleErrorRetry,
         inheritDimensions: inheritDimensions,

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -2,38 +2,45 @@
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/core';
 import { token } from '@atlaskit/tokens';
-const animationNameStyles = keyframes`
-  0% { background-position: -20px 0; }
-  100% { background-position: 20px 0; }
-`;
-const styles = css`
-  border-radius: 2px;
-  user-select: none;
-  background: ${token('color.skeleton.subtle', '#f6f7f8')};
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236
-  background-image: linear-gradient(
-    to right,
-    ${token('color.skeleton.subtle', '#f6f7f8')} 0%,
-    ${token('color.skeleton', '#edeef1')} 20%,
-    ${token('color.skeleton.subtle', '#f6f7f8')} 40%,
-    ${token('color.skeleton.subtle', '#f6f7f8')}100%
-  );
-  background-repeat: no-repeat;
-  background-size: 280% 100%;
-  display: inline-block;
-
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: ${animationNameStyles};
-  animation-timing-function: linear;
-`;
 
 const LoadingSkeleton = ({
-  testId
-}) => jsx("span", {
-  css: styles,
-  "data-testid": testId
-});
+  testId,
+  width,
+  height
+}) => {
+  const animationWidth = width ? `${width}rem` : '20px';
+  const animationNameStyles = keyframes`
+    0% { background-position: -${animationWidth}  0; }
+    100% { background-position: ${animationWidth} 0; }
+  `;
+  const styles = css`
+    width: ${width}rem;
+    height: ${height}rem;
+    border-radius: 2px;
+    user-select: none;
+    background: ${token('color.skeleton.subtle', '#f6f7f8')};
+    // TODO: https://product-fabric.atlassian.net/browse/DSP-4236
+    background-image: linear-gradient(
+      to right,
+      ${token('color.skeleton.subtle', '#f6f7f8')} 0%,
+      ${token('color.skeleton', '#edeef1')} 20%,
+      ${token('color.skeleton.subtle', '#f6f7f8')} 40%,
+      ${token('color.skeleton.subtle', '#f6f7f8')}100%
+    );
+    background-repeat: no-repeat;
+    background-size: 280% 100%;
+    display: inline-block;
+
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: ${animationNameStyles};
+    animation-timing-function: linear;
+  `;
+  return jsx("span", {
+    css: styles,
+    "data-testid": testId
+  });
+};
 
 export default LoadingSkeleton;

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
+import { SmartLinkStatus } from '../../constants';
 import Container from './components/container';
 import { FlexibleUiContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
@@ -14,12 +15,13 @@ const FlexibleCard = ({
   cardState,
   children,
   onAuthorize,
+  onError,
+  onResolve,
   renderers,
   ui,
   url,
   onClick,
-  testId,
-  onResolve
+  testId
 }) => {
   const {
     status: cardType,
@@ -28,13 +30,36 @@ const FlexibleCard = ({
   const status = cardType;
   const context = getContextByStatus(url, status, details, renderers);
   const retry = getRetryOptions(url, status, details, onAuthorize);
+  const {
+    title
+  } = context || {};
   useEffect(() => {
-    if (status === 'resolved' && onResolve) {
-      onResolve({
-        url
-      });
+    switch (status) {
+      case SmartLinkStatus.Resolved:
+        if (onResolve) {
+          onResolve({
+            title,
+            url
+          });
+        }
+
+        break;
+
+      case SmartLinkStatus.Errored:
+      case SmartLinkStatus.Fallback:
+      case SmartLinkStatus.Forbidden:
+      case SmartLinkStatus.NotFound:
+      case SmartLinkStatus.Unauthorized:
+        if (onError) {
+          onError({
+            status,
+            url
+          });
+        }
+
+        break;
     }
-  }, [onResolve, status, url]);
+  }, [onError, onResolve, status, title, url]);
   return /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(Container, _extends({