@atlaskit/smart-card 23.6.3 → 23.6.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 23.6.4
+
+### Patch Changes
+
+- [`e402b41fc94`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e402b41fc94) - [ux] This change removes the icons on flexible block card actions, and also adds analytics for each of the flexible block card actions to maintain parity with the older block card.
+
 ## 23.6.3
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -114,7 +114,8 @@ var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject || (_templ
 var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
 
-  var url = _ref.url,
+  var id = _ref.id,
+      url = _ref.url,
       cardState = _ref.cardState,
       authFlow = _ref.authFlow,
       handleAuthorize = _ref.handleAuthorize,
@@ -146,12 +147,14 @@ var BlockCard = function BlockCard(_ref) {
       hideElevation: true
     };
     var flexibleProps = {
+      id: id,
       cardState: cardState,
       url: url,
       testId: testId,
       onError: onError,
       renderers: renderers,
-      ui: ui
+      ui: ui,
+      analytics: analytics
     };
 
     switch (status) {

package/dist/cjs/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -21,6 +21,8 @@ var _blocks = require("../../../FlexibleCard/components/blocks");
 
 var _constants = require("../../../../constants");
 
+var _uuid = _interopRequireDefault(require("uuid"));
+
 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; }
@@ -31,13 +33,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @see FlexibleCardProps
  */
 var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
-  var cardState = _ref.cardState,
+  var id = _ref.id,
+      cardState = _ref.cardState,
       onClick = _ref.onClick,
       onError = _ref.onError,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block-resolved-view' : _ref$testId,
       ui = _ref.ui,
-      url = _ref.url;
+      url = _ref.url,
+      analytics = _ref.analytics;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -47,6 +51,13 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   (0, _react.useEffect)(function () {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
+
+  var _useState3 = (0, _react.useState)(function () {
+    return id ? id : (0, _uuid.default)();
+  }),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+      analyticsId = _useState4[0];
+
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,
@@ -95,11 +106,35 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     }
   }) : null, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
     actions: [{
-      name: _constants.ActionName.PreviewAction
+      name: _constants.ActionName.PreviewAction,
+      hideIcon: true,
+      onClick: function onClick() {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'preview',
+          display: 'block'
+        });
+      }
     }, {
-      name: _constants.ActionName.ViewAction
+      name: _constants.ActionName.ViewAction,
+      hideIcon: true,
+      onClick: function onClick() {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'view',
+          display: 'block'
+        });
+      }
     }, {
-      name: _constants.ActionName.DownloadAction
+      name: _constants.ActionName.DownloadAction,
+      hideIcon: true,
+      onClick: function onClick() {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'download',
+          display: 'block'
+        });
+      }
     }]
   }));
 };

package/dist/es2019/version.json

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

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

@@ -29,6 +29,7 @@ const flexibleBlockCardElevationStyle = css`
   margin: 2px;
 `;
 export const BlockCard = ({
+  id,
   url,
   cardState,
   authFlow,
@@ -66,12 +67,14 @@ export const BlockCard = ({
       hideElevation: true
     };
     const flexibleProps = {
+      id,
       cardState,
       url,
       testId,
       onError,
       renderers,
-      ui
+      ui,
+      analytics
     };
 
     switch (status) {

package/dist/es2019/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -3,24 +3,28 @@ import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
 import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
-
+import uuid from 'uuid';
 /**
  * This view represents a Block card that has an 'Resolved' status.
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
+
 const FlexibleResolvedView = ({
+  id,
   cardState,
   onClick,
   onError,
   testId = 'smart-block-resolved-view',
   ui,
-  url
+  url,
+  analytics
 }) => {
   const [isPreviewBlockErrored, setIsPreviewBlockErrored] = useState(false);
   useEffect(() => {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
+  const [analyticsId] = useState(() => id ? id : uuid());
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -69,11 +73,35 @@ const FlexibleResolvedView = ({
     }
   }) : null, /*#__PURE__*/React.createElement(FooterBlock, {
     actions: [{
-      name: ActionName.PreviewAction
+      name: ActionName.PreviewAction,
+      hideIcon: true,
+      onClick: () => {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'preview',
+          display: 'block'
+        });
+      }
     }, {
-      name: ActionName.ViewAction
+      name: ActionName.ViewAction,
+      hideIcon: true,
+      onClick: () => {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'view',
+          display: 'block'
+        });
+      }
     }, {
-      name: ActionName.DownloadAction
+      name: ActionName.DownloadAction,
+      hideIcon: true,
+      onClick: () => {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'download',
+          display: 'block'
+        });
+      }
     }]
   }));
 };

package/dist/esm/version.json

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

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

@@ -30,7 +30,8 @@ var flexibleBlockCardElevationStyle = css(_templateObject || (_templateObject =
 export var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
 
-  var url = _ref.url,
+  var id = _ref.id,
+      url = _ref.url,
       cardState = _ref.cardState,
       authFlow = _ref.authFlow,
       handleAuthorize = _ref.handleAuthorize,
@@ -62,12 +63,14 @@ export var BlockCard = function BlockCard(_ref) {
       hideElevation: true
     };
     var flexibleProps = {
+      id: id,
       cardState: cardState,
       url: url,
       testId: testId,
       onError: onError,
       renderers: renderers,
-      ui: ui
+      ui: ui,
+      analytics: analytics
     };
 
     switch (status) {

package/dist/esm/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -4,20 +4,23 @@ import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
 import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
-
+import uuid from 'uuid';
 /**
  * This view represents a Block card that has an 'Resolved' status.
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
+
 var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
-  var cardState = _ref.cardState,
+  var id = _ref.id,
+      cardState = _ref.cardState,
       onClick = _ref.onClick,
       onError = _ref.onError,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block-resolved-view' : _ref$testId,
       ui = _ref.ui,
-      url = _ref.url;
+      url = _ref.url,
+      analytics = _ref.analytics;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -27,6 +30,13 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   useEffect(function () {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
+
+  var _useState3 = useState(function () {
+    return id ? id : uuid();
+  }),
+      _useState4 = _slicedToArray(_useState3, 1),
+      analyticsId = _useState4[0];
+
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -75,11 +85,35 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     }
   }) : null, /*#__PURE__*/React.createElement(FooterBlock, {
     actions: [{
-      name: ActionName.PreviewAction
+      name: ActionName.PreviewAction,
+      hideIcon: true,
+      onClick: function onClick() {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'preview',
+          display: 'block'
+        });
+      }
     }, {
-      name: ActionName.ViewAction
+      name: ActionName.ViewAction,
+      hideIcon: true,
+      onClick: function onClick() {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'view',
+          display: 'block'
+        });
+      }
     }, {
-      name: ActionName.DownloadAction
+      name: ActionName.DownloadAction,
+      hideIcon: true,
+      onClick: function onClick() {
+        analytics.operational.invokeSucceededEvent({
+          id: analyticsId,
+          actionType: 'download',
+          display: 'block'
+        });
+      }
     }]
   }));
 };

package/dist/types/view/BlockCard/views/flexible/FlexibleResolvedView.d.ts

@@ -5,5 +5,5 @@ import { FlexibleBlockCardProps } from './types';
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
-declare const FlexibleResolvedView: ({ cardState, onClick, onError, testId, ui, url, }: FlexibleBlockCardProps) => JSX.Element;
+declare const FlexibleResolvedView: ({ id, cardState, onClick, onError, testId, ui, url, analytics, }: FlexibleBlockCardProps) => JSX.Element;
 export default FlexibleResolvedView;

package/dist/types/view/BlockCard/views/flexible/types.d.ts

@@ -4,6 +4,7 @@ import { OnErrorCallback } from '../../../types';
 import { FlexibleUiOptions } from '../../../FlexibleCard/types';
 import { OnResolveCallback } from '../../../Card/types';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
+import { AnalyticsFacade } from '../../../../state/analytics';
 export declare type FlexibleBlockCardProps = {
     /**
      * Determines the status and data of the Smart Link.
@@ -49,6 +50,14 @@ export declare type FlexibleBlockCardProps = {
      * @see FlexibleUiOptions
      */
     ui?: FlexibleUiOptions;
+    /**
+     * A unique id for this Smart Link instance, used for analytics.
+     */
+    id?: string;
+    /**
+     * An AnalyticsFacade object used for calling analytics.
+     */
+    analytics: AnalyticsFacade;
     /**
      * Determines the URL of the Smart Link.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.6.3",
+  "version": "23.6.4",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"