@atlaskit/smart-card 18.0.14 → 18.0.17

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/smart-card
 
+## 18.0.17
+
+### Patch Changes
+
+- [`79b365c3757`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79b365c3757) - [ux] If the "authFlow: disabled" prop is provided on the Smart Card Provider, then the call to action to authenticate forbidden links will also be disabled (in addition to the existing behaviour where only unauthenticated links have the call to action disabled).
+
+## 18.0.16
+
+### Patch Changes
+
+- [`63d05619104`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63d05619104) - [ux] Instrumented `@atlaskit/smart-card` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+## 18.0.15
+
+### Patch Changes
+
+- [`c2a240de738`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2a240de738) - Add inline documentation for Flexible UI
+- [`6976489a51a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6976489a51a) - Flexible UI: Enable css override for actions
+- [`7d4e18ffddb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d4e18ffddb) - instrument analytics events for hover card
+- [`a123e96fc62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a123e96fc62) - expose prop on smart card
+- [`5af3b7aba2a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5af3b7aba2a) - Flexible UI: Fix icon-only action padding
+- [`3e19e206713`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3e19e206713) - Flexible UI: Enable css override on elements
+- [`750cb867124`](https://bitbucket.org/atlassian/atlassian-frontend/commits/750cb867124) - Flexible UI: Enable css override on blocks
+
 ## 18.0.14
 
 ### Patch Changes

package/dist/cjs/extractors/common/context/extractProvider.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _confluenceIcon = require("@atlaskit/logo/confluence-icon");
 
 var _jiraIcon = require("@atlaskit/logo/jira-icon");
@@ -50,18 +52,26 @@ var extractProviderIcon = function extractProviderIcon(icon, id) {
   if (id) {
     if (id === _constants.CONFLUENCE_GENERATOR_ID) {
       return /*#__PURE__*/_react.default.createElement(_confluenceIcon.ConfluenceIcon, {
-        textColor: _colors.N700,
+        textColor: (0, _tokens.token)('color.text.subtle', _colors.N700)
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         iconColor: _colors.B200,
         iconGradientStart: _colors.B400,
-        iconGradientStop: _colors.B200,
+        iconGradientStop: _colors.B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         size: "xsmall"
       });
     } else if (id === _constants.JIRA_GENERATOR_ID) {
       return /*#__PURE__*/_react.default.createElement(_jiraIcon.JiraIcon, {
-        textColor: _colors.N700,
+        textColor: (0, _tokens.token)('color.text.subtle', _colors.N700)
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         iconColor: _colors.B200,
         iconGradientStart: _colors.B400,
-        iconGradientStop: _colors.B200,
+        iconGradientStop: _colors.B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         size: "xsmall"
       });
     }

package/dist/cjs/extractors/common/detail/extractCommentCount.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _comment = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
 
 var extractCommentCount = function extractCommentCount(jsonLd) {
@@ -23,7 +25,7 @@ var extractCommentCount = function extractCommentCount(jsonLd) {
         label: "comment-count",
         key: "comments-count-icon",
         size: "small",
-        primaryColor: _colors.N600
+        primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N600)
       })
     };
   }

package/dist/cjs/extractors/common/detail/extractProgrammingLanguage.js

@@ -13,6 +13,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _code = _interopRequireDefault(require("@atlaskit/icon/glyph/code"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var extractProgrammingLanguage = function extractProgrammingLanguage(jsonLd) {
   var programmingLanguage = jsonLd['schema:programmingLanguage'];
 
@@ -22,7 +24,7 @@ var extractProgrammingLanguage = function extractProgrammingLanguage(jsonLd) {
       icon: /*#__PURE__*/_react.default.createElement(_code.default, {
         size: "small",
         label: "code",
-        primaryColor: _colors.N600
+        primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N600)
       })
     };
   }

package/dist/cjs/extractors/common/detail/extractSubscriberCount.js

@@ -13,6 +13,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/people"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var extractSubscriberCount = function extractSubscriberCount(jsonLd) {
   var subscriberCount = jsonLd['atlassian:subscriberCount'];
 
@@ -22,7 +24,7 @@ var extractSubscriberCount = function extractSubscriberCount(jsonLd) {
       icon: /*#__PURE__*/_react.default.createElement(_people.default, {
         size: "small",
         label: "subscribers",
-        primaryColor: _colors.N600
+        primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N600)
       })
     };
   }

package/dist/cjs/extractors/common/primitives/extractTitleTextColor.js

@@ -9,6 +9,8 @@ var _priority = require("../icon/priority");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var extractTitleTextColor = function extractTitleTextColor(jsonLd) {
   var type = jsonLd['@type'];
 
@@ -19,7 +21,7 @@ var extractTitleTextColor = function extractTitleTextColor(jsonLd) {
 
     switch (highestPriorityType) {
       case 'atlassian:UndefinedLink':
-        return _colors.R500;
+        return (0, _tokens.token)('color.text.danger', _colors.R500);
 
       default:
         return undefined;

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

@@ -98,7 +98,7 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     var nextStatus = response ? (0, _helpers2.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' && !hasAuthFlowSupported) {
+    if ((nextStatus === 'unauthorized' || nextStatus === 'forbidden') && !hasAuthFlowSupported) {
       handleResolvedLinkError(resourceUrl, new _errors.APIError('fallback', hostname, _constants.ERROR_MESSAGE_OAUTH));
       return;
     } // Handle any other errors

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

@@ -32,6 +32,9 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
         });
         dispatchAnalytics((0, _analytics.uiActionClickedEvent)(extensionKey, actionType, display));
       },
+      hoverCardOpenLinkClickedEvent: function hoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod) {
+        dispatchAnalytics((0, _analytics.uiHoverCardOpenLinkClickedEvent)(previewDisplay, definitionId, extensionKey, previewInvokeMethod));
+      },
       closedAuthEvent: function closedAuthEvent(display, definitionId, extensionKey) {
         return dispatchAnalytics((0, _analytics.uiClosedAuthEvent)(display, definitionId, extensionKey));
       },
@@ -45,6 +48,12 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
           display: display
         });
         dispatchAnalytics((0, _analytics.uiRenderSuccessEvent)(display, definitionId, extensionKey));
+      },
+      hoverCardViewedEvent: function hoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod) {
+        return dispatchAnalytics((0, _analytics.uiHoverCardViewedEvent)(hoverDisplay, definitionId, extensionKey, previewInvokeMethod));
+      },
+      hoverCardDismissedEvent: function hoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) {
+        return dispatchAnalytics((0, _analytics.uiHoverCardDismissedEvent)(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
       }
     };
   }, [dispatchAnalytics]);

package/dist/cjs/state/flexible-ui-context/index.js

@@ -7,6 +7,10 @@ exports.useFlexibleUiContext = exports.FlexibleUiContext = void 0;
 
 var _react = require("react");
 
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
 var FlexibleUiContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 exports.FlexibleUiContext = FlexibleUiContext;
 

package/dist/cjs/utils/analytics/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unresolvedEvent = exports.uiRenderSuccessEvent = exports.uiRenderFailedEvent = exports.uiClosedAuthEvent = exports.uiCardClickedEvent = exports.uiAuthEvent = exports.uiAuthAlternateAccountEvent = exports.uiActionClickedEvent = exports.trackAppAccountConnected = exports.screenAuthPopupEvent = exports.resolvedEvent = exports.invokeSucceededEvent = exports.invokeFailedEvent = exports.fireSmartLinkEvent = exports.context = exports.connectSucceededEvent = exports.connectFailedEvent = exports.SmartLinkEvents = exports.ANALYTICS_CHANNEL = void 0;
+exports.unresolvedEvent = exports.uiRenderSuccessEvent = exports.uiRenderFailedEvent = exports.uiHoverCardViewedEvent = exports.uiHoverCardOpenLinkClickedEvent = exports.uiHoverCardDismissedEvent = exports.uiClosedAuthEvent = exports.uiCardClickedEvent = exports.uiAuthEvent = exports.uiAuthAlternateAccountEvent = exports.uiActionClickedEvent = exports.trackAppAccountConnected = exports.screenAuthPopupEvent = exports.resolvedEvent = exports.invokeSucceededEvent = exports.invokeFailedEvent = exports.fireSmartLinkEvent = exports.context = exports.connectSucceededEvent = exports.connectFailedEvent = exports.SmartLinkEvents = exports.ANALYTICS_CHANNEL = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -317,4 +317,54 @@ var uiRenderFailedEvent = function uiRenderFailedEvent(display, error, errorInfo
   };
 };
 
-exports.uiRenderFailedEvent = uiRenderFailedEvent;
+exports.uiRenderFailedEvent = uiRenderFailedEvent;
+
+var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod) {
+  return {
+    action: 'viewed',
+    actionSubject: 'hoverCard',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      definitionId: definitionId || '',
+      extensionKey: extensionKey || '',
+      hoverDisplay: hoverDisplay,
+      previewInvokeMethod: previewInvokeMethod
+    })
+  };
+};
+
+exports.uiHoverCardViewedEvent = uiHoverCardViewedEvent;
+
+var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) {
+  return {
+    action: 'dismissed',
+    actionSubject: 'hoverCard',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      definitionId: definitionId || '',
+      extensionKey: extensionKey || '',
+      hoverTime: hoverTime,
+      hoverDisplay: hoverDisplay,
+      previewInvokeMethod: previewInvokeMethod
+    })
+  };
+};
+
+exports.uiHoverCardDismissedEvent = uiHoverCardDismissedEvent;
+
+var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod) {
+  return {
+    action: 'clicked',
+    actionSubject: 'button',
+    actionSubjectId: 'shortcutGoToLink',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      definitionId: definitionId || '',
+      extensionKey: extensionKey || '',
+      previewDisplay: previewDisplay,
+      previewInvokeMethod: previewInvokeMethod
+    })
+  };
+};
+
+exports.uiHoverCardOpenLinkClickedEvent = uiHoverCardOpenLinkClickedEvent;

package/dist/cjs/utils/analytics/index.js

@@ -96,6 +96,24 @@ Object.defineProperty(exports, "uiClosedAuthEvent", {
     return _analytics.uiClosedAuthEvent;
   }
 });
+Object.defineProperty(exports, "uiHoverCardDismissedEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.uiHoverCardDismissedEvent;
+  }
+});
+Object.defineProperty(exports, "uiHoverCardOpenLinkClickedEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.uiHoverCardOpenLinkClickedEvent;
+  }
+});
+Object.defineProperty(exports, "uiHoverCardViewedEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.uiHoverCardViewedEvent;
+  }
+});
 Object.defineProperty(exports, "uiRenderFailedEvent", {
   enumerable: true,
   get: function get() {

package/dist/cjs/version.json

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

package/dist/cjs/view/BlockCard/components/Frame.js

@@ -15,6 +15,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _utils = require("../../common/utils");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -35,7 +37,7 @@ var sharedFrameStyles = {
   maxWidth: (0, _utils.gs)(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: 'white'
+  backgroundColor: (0, _tokens.token)('elevation.surface', 'white')
 };
 
 var ExpandedFrame = function ExpandedFrame(_ref) {
@@ -48,15 +50,16 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
   return (0, _core.jsx)("div", {
     css: (0, _utils.mq)(_objectSpread(_objectSpread({}, sharedFrameStyles), {}, {
       '&:hover': isHoverable ? {
-        backgroundColor: _colors.N20A,
+        // TODO: https://product-fabric.atlassian.net/browse/DSP-4064
+        backgroundColor: (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20A),
         cursor: 'pointer'
       } : undefined,
       minHeight: isFluidHeight ? 0 : [(0, _utils.gs)(21), (0, _utils.gs)(15)],
       borderRadius: isSelected ? (0, _utils.br)() : (0, _utils.br)(0.5),
-      border: "2px solid ".concat(isSelected ? _colors.B200 : 'transparent'),
+      border: "2px solid ".concat(isSelected ? (0, _tokens.token)('color.border.selected', _colors.B200) : 'transparent'),
       justifyContent: 'space-between',
       overflow: 'hidden',
-      boxShadow: "0 1px 1px ".concat(_colors.N50A, ", 0 0 1px 1px ").concat(_colors.N40A, ";")
+      boxShadow: (0, _tokens.token)('elevation.shadow.raised', "0 1px 1px ".concat(_colors.N50A, ", 0 0 1px 1px ").concat(_colors.N40A))
     })),
     "data-testid": testId,
     className: className,
@@ -76,14 +79,14 @@ var CompactFrame = function CompactFrame(_ref2) {
   return (0, _core.jsx)("div", {
     css: (0, _utils.mq)(_objectSpread(_objectSpread({}, sharedFrameStyles), {}, {
       '&:hover': isHoverable ? {
-        backgroundColor: _colors.N30A
+        backgroundColor: (0, _tokens.token)('color.background.neutral.hovered', _colors.N30A)
       } : undefined,
       borderRadius: isSelected ? (0, _utils.br)() : (0, _utils.br)(0.5),
-      border: isSelected ? "2px solid ".concat(_colors.B200) : '',
+      border: isSelected ? "2px solid ".concat((0, _tokens.token)('color.border.selected', _colors.B200)) : '',
       justifyContent: 'center',
       alignItems: 'center',
       height: inheritDimensions ? '100%' : (0, _utils.gs)(5),
-      backgroundColor: _colors.N20A,
+      backgroundColor: (0, _tokens.token)('color.background.neutral', _colors.N20A),
       width: ['calc(100% - 16px)', '100%'],
       padding: ["0px ".concat((0, _utils.gs)(1)), '0']
     })),

package/dist/cjs/view/BlockCard/components/Link.js

@@ -9,6 +9,8 @@ var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 /** @jsx jsx */
 var Link = function Link(_ref) {
   var url = _ref.url,
@@ -19,7 +21,7 @@ var Link = function Link(_ref) {
     "data-testid": "".concat(testId, "-link"),
     className: className,
     css: {
-      color: _colors.B400,
+      color: (0, _tokens.token)('color.link', _colors.B400),
       wordBreak: 'break-all'
     }
   }, url);

package/dist/cjs/view/BlockCard/components/Provider.js

@@ -11,6 +11,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _utils = require("../../common/utils");
 
+var _tokens = require("@atlaskit/tokens");
+
 /** @jsx jsx */
 var Provider = function Provider(_ref) {
   var name = _ref.name,
@@ -36,7 +38,7 @@ var Provider = function Provider(_ref) {
   }, iconToRender, (0, _core.jsx)("span", {
     css: {
       fontSize: (0, _utils.gs)(1.5),
-      color: _colors.N300,
+      color: (0, _tokens.token)('color.text.subtlest', _colors.N300),
       margin: 0,
       marginLeft: (0, _utils.gs)(0.5),
       // EDM-713: fixes copy-paste from renderer to editor for Firefox

package/dist/cjs/view/BlockCard/views/ErroredView.js

@@ -41,6 +41,8 @@ var _UnresolvedText = require("../components/UnresolvedText");
 
 var _RetryAction = require("../actions/RetryAction");
 
+var _tokens = require("@atlaskit/tokens");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 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) { (0, _defineProperty2.default)(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; }
@@ -88,7 +90,7 @@ var ErroredView = function ErroredView(_ref) {
     icon: (0, _core.jsx)(_warning.default, {
       label: "errored-warning-icon",
       size: "small",
-      primaryColor: _colors.R300,
+      primaryColor: (0, _tokens.token)('color.icon.warning', _colors.R300),
       testId: "".concat(testId, "-warning-icon")
     }),
     text: (0, _core.jsx)(_reactIntlNext.FormattedMessage, textDescriptionProps)

package/dist/cjs/view/BlockCard/views/ForbiddenView.js

@@ -17,6 +17,8 @@ var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
 
 var _Frame = require("../components/Frame");
@@ -93,7 +95,7 @@ var ForbiddenView = function ForbiddenView(_ref) {
     icon: (0, _core.jsx)(_lockFilled.default, {
       label: "forbidden-lock-icon",
       size: "small",
-      primaryColor: _colors.R300,
+      primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300),
       testId: "".concat(testId, "-lock-icon")
     }),
     text: (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[descriptiveMessageKey], {

package/dist/cjs/view/BlockCard/views/NotFoundView.js

@@ -39,6 +39,8 @@ var _UnresolvedText = require("../components/UnresolvedText");
 
 var _handlers = require("../utils/handlers");
 
+var _tokens = require("@atlaskit/tokens");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 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) { (0, _defineProperty2.default)(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; }
@@ -83,7 +85,7 @@ var NotFoundView = function NotFoundView(_ref) {
     icon: (0, _core.jsx)(_warning.default, {
       label: "not-found-warning-icon",
       size: "small",
-      primaryColor: _colors.R300,
+      primaryColor: (0, _tokens.token)('color.icon.warning', _colors.R300),
       testId: "".concat(testId, "-warning-icon")
     }),
     text: (0, _core.jsx)(_reactIntlNext.FormattedMessage, textDescriptionProps)

package/dist/cjs/view/BlockCard/views/ResolvingView.js

@@ -15,6 +15,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _Frame = require("../components/Frame");
 
 var _utils = require("../../common/utils");
@@ -41,12 +43,12 @@ var ResolvingView = function ResolvingView(_ref) {
     className: blockCardResolvingViewClassName
   }, (0, _core.jsx)(_documentFilled.default, {
     size: "small",
-    primaryColor: _colors.N50,
+    primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N50),
     label: "document-icon"
   }), (0, _core.jsx)("span", {
     css: {
       fontSize: "".concat((0, _constants.fontSize)(), "px"),
-      color: _colors.N90,
+      color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
       marginLeft: (0, _utils.gs)(0.5)
     }
   }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.loading)));

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

@@ -51,7 +51,8 @@ function CardWithUrlContent(_ref) {
       embedIframeRef = _ref.embedIframeRef,
       inlinePreloaderStyle = _ref.inlinePreloaderStyle,
       ui = _ref.ui,
-      children = _ref.children;
+      children = _ref.children,
+      showHoverPreview = _ref.showHoverPreview;
 
   // Get state, actions for this card.
   var _useSmartLink = (0, _state.useSmartLink)(id, url, dispatchAnalytics),
@@ -155,7 +156,8 @@ function CardWithUrlContent(_ref) {
         isSelected: isSelected,
         onResolve: onResolve,
         testId: testId,
-        inlinePreloaderStyle: inlinePreloaderStyle
+        inlinePreloaderStyle: inlinePreloaderStyle,
+        showHoverPreview: showHoverPreview
       });
 
     case 'block':

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

@@ -69,7 +69,8 @@ function CardWithURLRenderer(props) {
       inlinePreloaderStyle = props.inlinePreloaderStyle,
       createAnalyticsEvent = props.createAnalyticsEvent,
       children = props.children,
-      ui = props.ui; // Wrapper around analytics.
+      ui = props.ui,
+      showHoverPreview = props.showHoverPreview; // Wrapper around analytics.
 
   var dispatchAnalytics = (0, _react.useCallback)(function (analyticsPayload) {
     if (analyticsPayload && analyticsPayload.attributes) {
@@ -122,7 +123,8 @@ function CardWithURLRenderer(props) {
     platform: platform,
     embedIframeRef: embedIframeRef,
     inlinePreloaderStyle: inlinePreloaderStyle,
-    ui: ui
+    ui: ui,
+    showHoverPreview: showHoverPreview
   };
   return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
     FallbackComponent: ErrorFallback,

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -19,6 +19,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _utils = require("../../common/utils");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
@@ -56,13 +58,13 @@ function getinteractiveStyles(_ref3) {
   var isInteractive = _ref3.isInteractive,
       isFrameVisible = _ref3.isFrameVisible;
   var visibleFrameStyles = isFrameVisible ? visibleStyles : '';
-  var interactiveFrameStyles = isInteractive ? "\n  &:hover {\n    ".concat(visibleStyles, "\n  }\n  &:active {\n    background-color: ").concat(colors.B50, ";\n  }\n") : '';
+  var interactiveFrameStyles = isInteractive ? "\n  &:hover {\n    ".concat(visibleStyles, "\n  }\n  &:active {\n    background-color: ").concat((0, _tokens.token)('color.background.selected', colors.B50), ";\n  }\n") : '';
   return "".concat(visibleFrameStyles).concat(interactiveFrameStyles);
 }
 
 function selected(_ref4) {
   var isSelected = _ref4.isSelected;
-  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ").concat(colors.B100, ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(_mediaUi.borderRadius, "\n    }\n    ") : '';
+  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ").concat((0, _tokens.token)('color.border.selected', colors.B100), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(_mediaUi.borderRadius, "\n    }\n    ") : '';
 }
 
 var height = function height(_ref5) {
@@ -74,7 +76,7 @@ var wrapperStyles = function wrapperStyles(props) {
   return "\n  ".concat(_mediaUi.borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getinteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat((0, _utils.gs)(2), ");\n    height: calc(100% + ").concat((0, _utils.gs)(1), ");\n    left: -").concat((0, _utils.gs)(1), ";\n    ").concat(_mediaUi.borderRadius, "\n  }\n");
 };
 
-var visibleStyles = "\n  background-color: ".concat(colors.N30, ";\n\n  &:after {\n    background: ").concat(colors.N30, " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
+var visibleStyles = "\n  background-color: ".concat((0, _tokens.token)('color.background.neutral.subtle', colors.N30), ";\n\n  &:after {\n    background: ").concat((0, _tokens.token)('color.background.neutral', colors.N30), " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
 
 function visible(_ref6) {
   var isVisible = _ref6.isVisible;
@@ -95,7 +97,7 @@ exports.Wrapper = Wrapper;
 var embedHeaderHeight = 32;
 exports.embedHeaderHeight = embedHeaderHeight;
 
-var Header = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  opacity: 0;\n  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);\n"])), embedHeaderHeight, colors.N300);
+var Header = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  opacity: 0;\n  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);\n"])), embedHeaderHeight, (0, _tokens.token)('color.icon', colors.N300));
 
 exports.Header = Header;
 
@@ -103,7 +105,7 @@ var IconWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0
   var isPlaceholder = _ref7.isPlaceholder;
 
   if (isPlaceholder) {
-    return "\n      background-color: ".concat(colors.N30, ";\n    ");
+    return "\n      background-color: ".concat((0, _tokens.token)('color.skeleton', colors.N30), ";\n    ");
   } else {
     return '';
   }
@@ -115,22 +117,22 @@ var TextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0
   var isPlaceholder = _ref8.isPlaceholder;
 
   if (isPlaceholder) {
-    return "\n        ".concat(_mediaUi.borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat(colors.N30, ";\n      ");
+    return "\n        ".concat(_mediaUi.borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat((0, _tokens.token)('color.skeleton', colors.N30), ";\n      ");
   } else {
     return '';
   }
-}, colors.N300, (0, _mediaUi.ellipsis)('none'));
+}, (0, _tokens.token)('color.text.subtlest', colors.N300), (0, _mediaUi.ellipsis)('none'));
 
 exports.TextWrapper = TextWrapper;
 
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), _mediaUi.borderRadius, cardShadow, (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), _mediaUi.borderRadius, cardShadow, (0, _tokens.token)('elevation.surface', 'white'), (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {
-    return "\n          .".concat(className, ":hover & {\n            box-shadow: 0 4px 8px -2px rgba(23, 43, 77, 0.32),\n              0 0 1px rgba(23, 43, 77, 0.25);\n          }\n        ");
+    return "\n          .".concat(className, ":hover & {\n            box-shadow: ").concat((0, _tokens.token)('elevation.shadow.overlay', '0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25)'), ";\n          }\n        ");
   } else {
     return '';
   }
@@ -151,15 +153,15 @@ var ContentWrapper = _styled.default.div(_templateObject8 || (_templateObject8 =
 
 exports.ContentWrapper = ContentWrapper;
 
-var Title = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), colors.N900, 20 / 16, 20 * 4);
+var Title = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), (0, _tokens.token)('color.text', colors.N900), 20 / 16, 20 * 4);
 
 exports.Title = Title;
 
-var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), colors.N300, 16 / 12, (0, _mediaUi.ellipsis)('100%'));
+var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), (0, _tokens.token)('color.text.subtlest', colors.N300), 16 / 12, (0, _mediaUi.ellipsis)('100%'));
 
 exports.Byline = Byline;
 
-var Description = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), colors.N800, 18 / 12, 18 * 3);
+var Description = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), (0, _tokens.token)('color.text', colors.N800), 18 / 12, 18 * 3);
 
 exports.Description = Description;
 
@@ -167,7 +169,7 @@ var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templat
 
 exports.ResolvedViewIconWrapper = ResolvedViewIconWrapper;
 
-var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), _mediaUi.borderRadius, (0, _mediaUi.size)(48), colors.N30, function (_ref11) {
+var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), _mediaUi.borderRadius, (0, _mediaUi.size)(48), (0, _tokens.token)('color.skeleton', colors.N30), function (_ref11) {
   var src = _ref11.src;
   return src;
 });

package/dist/cjs/view/EmbedCard/views/ErroredView.js

@@ -17,6 +17,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _Frame = require("../../BlockCard/components/Frame");
 
 var _reactIntlNext = require("react-intl-next");
@@ -40,7 +42,7 @@ var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
     testId: testId
   }, (0, _core.jsx)(_error.default, {
     size: "small",
-    primaryColor: _colors.R300,
+    primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300),
     label: "error-icon"
   }), (0, _core.jsx)("span", {
     css: {