@atlaskit/smart-card 19.0.3 → 19.1.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/smart-card
 
+## 19.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 19.1.0
+
+### Minor Changes
+
+- [`6b7ba46a96b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6b7ba46a96b) - [MEX-1456] Remove unused infinite scroll from Media-UI and Remove lodash from Media package
+
+### Patch Changes
+
+- [`7c926026ca3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c926026ca3) - Adds testId to FlexibleCard test.
+- Updated dependencies
+
+## 19.0.4
+
+### Patch Changes
+
+- [`3eea7c153d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3eea7c153d6) - Handle onResolve prop from smart-card in flexible-card and use the prop inside hover-card to dynamically update popup positioning
+
 ## 19.0.3
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -136,7 +136,8 @@ function CardWithUrlContent(_ref) {
       renderers: renderers,
       ui: ui,
       url: url,
-      testId: testId
+      testId: testId,
+      onResolve: onResolve
     }, children);
   } // We have to keep this last to prevent hook order from being violated
 

package/dist/cjs/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -311,11 +311,22 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
 
   switch (icon) {
     case _constants.IconType.Confluence:
+      return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
+        testId: testId,
+        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
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+      });
+
     case _constants.IconType.Jira:
       // Logo component has a different prop set from other icon components
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
-        "data-testid": testId // Confluence and Jira imports don't have native testId prop
-        ,
+        testId: testId,
         textColor: (0, _tokens.token)('color.text.subtle', _colors.N700)
         /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
         ,

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _container = _interopRequireDefault(require("./components/container"));
 
@@ -17,6 +19,10 @@ var _flexibleUiContext = require("../../state/flexible-ui-context");
 
 var _utils = require("./utils");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * This represents a Flexible Card: a link represented by a card with metadata.
  * This is the container in which all Flexible UI Blocks and Elements exist.
@@ -31,12 +37,20 @@ var FlexibleCard = function FlexibleCard(_ref) {
       ui = _ref.ui,
       url = _ref.url,
       onClick = _ref.onClick,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      onResolve = _ref.onResolve;
   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);
+  (0, _react.useEffect)(function () {
+    if (status === 'resolved' && onResolve) {
+      onResolve({
+        url: url
+      });
+    }
+  }, [onResolve, status, url]);
   return /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({

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

@@ -138,7 +138,8 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     };
   }, [url, definitionId, extensionKey, analytics]);
 
-  var CardComponent = function CardComponent() {
+  var CardComponent = function CardComponent(_ref2) {
+    var update = _ref2.update;
     //TODO: EDM-3224 deleted simulated and use real JsonLd
     var metadataElements = (0, _extractMetadata.extractMetadata)((0, _utils.getSimulatedMetadata)(extensionKey));
     return (0, _core.jsx)("div", {
@@ -151,7 +152,8 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       ui: {
         hideElevation: true,
         size: _constants.SmartLinkSize.Large
-      }
+      },
+      onResolve: update
     }, (0, _core.jsx)(_blocks.TitleBlock, {
       actions: [openAction]
     }), (0, _core.jsx)(_blocks.MetadataBlock, {
@@ -170,7 +172,12 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     isOpen: isOpen,
     onClose: onClose,
     placement: "bottom-start",
-    content: CardComponent,
+    content: function content(_ref3) {
+      var update = _ref3.update;
+      return (0, _core.jsx)(CardComponent, {
+        update: update
+      });
+    },
     trigger: function trigger(triggerProps) {
       return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
         onMouseEnter: initShowCard,

package/dist/es2019/version.json

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

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

@@ -104,7 +104,8 @@ export function CardWithUrlContent({
       renderers: renderers,
       ui: ui,
       url: url,
-      testId: testId
+      testId: testId,
+      onResolve: onResolve
     }, children);
   } // We have to keep this last to prevent hook order from being violated
 

package/dist/es2019/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -224,11 +224,22 @@ const AtlaskitIcon = ({
 
   switch (icon) {
     case IconType.Confluence:
+      return /*#__PURE__*/React.createElement(ImportedIcon, {
+        testId: testId,
+        textColor: token('color.text.subtle', N700)
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
+        iconColor: B200,
+        iconGradientStart: B400,
+        iconGradientStop: B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+      });
+
     case IconType.Jira:
       // Logo component has a different prop set from other icon components
       return /*#__PURE__*/React.createElement(ImportedIcon, {
-        "data-testid": testId // Confluence and Jira imports don't have native testId prop
-        ,
+        testId: testId,
         textColor: token('color.text.subtle', N700)
         /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
         ,

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useEffect } from 'react';
 import Container from './components/container';
 import { FlexibleUiContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
@@ -18,7 +18,8 @@ const FlexibleCard = ({
   ui,
   url,
   onClick,
-  testId
+  testId,
+  onResolve
 }) => {
   const {
     status: cardType,
@@ -27,6 +28,13 @@ const FlexibleCard = ({
   const status = cardType;
   const context = getContextByStatus(url, status, details, renderers);
   const retry = getRetryOptions(url, status, details, onAuthorize);
+  useEffect(() => {
+    if (status === 'resolved' && onResolve) {
+      onResolve({
+        url
+      });
+    }
+  }, [onResolve, status, url]);
   return /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(Container, _extends({

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

@@ -91,7 +91,9 @@ export const HoverCardComponent = ({
     };
   }, [url, definitionId, extensionKey, analytics]);
 
-  const CardComponent = () => {
+  const CardComponent = ({
+    update
+  }) => {
     //TODO: EDM-3224 deleted simulated and use real JsonLd
     const metadataElements = extractMetadata(getSimulatedMetadata(extensionKey));
     return jsx("div", {
@@ -104,7 +106,8 @@ export const HoverCardComponent = ({
       ui: {
         hideElevation: true,
         size: SmartLinkSize.Large
-      }
+      },
+      onResolve: update
     }, jsx(TitleBlock, {
       actions: [openAction]
     }), jsx(MetadataBlock, {
@@ -121,7 +124,13 @@ export const HoverCardComponent = ({
     isOpen: isOpen,
     onClose: onClose,
     placement: "bottom-start",
-    content: CardComponent,
+    content: ({
+      update
+    }) => {
+      return jsx(CardComponent, {
+        update: update
+      });
+    },
     trigger: triggerProps => jsx("span", _extends({}, triggerProps, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard

package/dist/esm/version.json

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

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

@@ -110,7 +110,8 @@ export function CardWithUrlContent(_ref) {
       renderers: renderers,
       ui: ui,
       url: url,
-      testId: testId
+      testId: testId,
+      onResolve: onResolve
     }, children);
   } // We have to keep this last to prevent hook order from being violated
 

package/dist/esm/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -291,11 +291,22 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
 
   switch (icon) {
     case IconType.Confluence:
+      return /*#__PURE__*/React.createElement(ImportedIcon, {
+        testId: testId,
+        textColor: token('color.text.subtle', N700)
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
+        iconColor: B200,
+        iconGradientStart: B400,
+        iconGradientStop: B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+      });
+
     case IconType.Jira:
       // Logo component has a different prop set from other icon components
       return /*#__PURE__*/React.createElement(ImportedIcon, {
-        "data-testid": testId // Confluence and Jira imports don't have native testId prop
-        ,
+        testId: testId,
         textColor: token('color.text.subtle', N700)
         /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
         ,

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useEffect } from 'react';
 import Container from './components/container';
 import { FlexibleUiContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
@@ -18,12 +18,20 @@ var FlexibleCard = function FlexibleCard(_ref) {
       ui = _ref.ui,
       url = _ref.url,
       onClick = _ref.onClick,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      onResolve = _ref.onResolve;
   var cardType = cardState.status,
       details = cardState.details;
   var status = cardType;
   var context = getContextByStatus(url, status, details, renderers);
   var retry = getRetryOptions(url, status, details, onAuthorize);
+  useEffect(function () {
+    if (status === 'resolved' && onResolve) {
+      onResolve({
+        url: url
+      });
+    }
+  }, [onResolve, status, url]);
   return /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(Container, _extends({

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

@@ -106,7 +106,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     };
   }, [url, definitionId, extensionKey, analytics]);
 
-  var CardComponent = function CardComponent() {
+  var CardComponent = function CardComponent(_ref2) {
+    var update = _ref2.update;
     //TODO: EDM-3224 deleted simulated and use real JsonLd
     var metadataElements = extractMetadata(getSimulatedMetadata(extensionKey));
     return jsx("div", {
@@ -119,7 +120,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       ui: {
         hideElevation: true,
         size: SmartLinkSize.Large
-      }
+      },
+      onResolve: update
     }, jsx(TitleBlock, {
       actions: [openAction]
     }), jsx(MetadataBlock, {
@@ -138,7 +140,12 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     isOpen: isOpen,
     onClose: onClose,
     placement: "bottom-start",
-    content: CardComponent,
+    content: function content(_ref3) {
+      var update = _ref3.update;
+      return jsx(CardComponent, {
+        update: update
+      });
+    },
     trigger: function trigger(triggerProps) {
       return jsx("span", _extends({}, triggerProps, {
         onMouseEnter: initShowCard,

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

@@ -4,6 +4,7 @@ import { CardState } from '@atlaskit/linking-common';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
 import { SmartLinkSize, SmartLinkTheme } from '../../constants';
 import { CardAppearance } from '../../view/Card';
+import { OnResolveCallback } from '../Card/types';
 export declare type FlexibleCardProps = {
     /**
      * Determines the appearance of the Smart Link.
@@ -51,6 +52,10 @@ export declare type FlexibleCardProps = {
      * Determines the URL of the Smart Link.
      */
     url: string;
+    /**
+     * function to be called after a flexible card has rendered its resolved state
+     */
+    onResolve?: OnResolveCallback;
 };
 export declare type FlexibleUiOptions = {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "19.0.3",
+  "version": "19.1.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,16 +34,16 @@
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
     "@atlaskit/linking-common": "^1.1.0",
-    "@atlaskit/logo": "^13.5.0",
+    "@atlaskit/logo": "^13.6.0",
     "@atlaskit/lozenge": "^11.1.0",
-    "@atlaskit/media-common": "^2.12.0",
-    "@atlaskit/media-ui": "^21.1.0",
+    "@atlaskit/media-common": "^2.13.0",
+    "@atlaskit/media-ui": "^22.0.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/outbound-auth-flow-client": "^3.3.0",
     "@atlaskit/popup": "^1.3.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.2",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
@@ -74,7 +74,7 @@
     "@atlaskit/inline-message": "^11.2.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
-    "@atlaskit/media-test-helpers": "^29.4.0",
+    "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/page": "^12.1.0",
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/range": "^6.0.0",
@@ -90,7 +90,6 @@
     "@testing-library/react-hooks": "^1.0.4",
     "@testing-library/user-event": "10.4.0",
     "@types/enzyme": "^3.1.15",
-    "@types/lodash": "^4.14.157",
     "@types/lorem-ipsum": "^1.0.2",
     "@types/react": "^16.8.0",
     "@types/react-loadable": "^5.4.1",