@atlaskit/smart-card 23.5.0 → 23.5.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/smart-card
 
+## 23.5.1
+
+### Patch Changes
+
+- [`1070e536838`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1070e536838) - [ux] Hover Preview: Add experiment for actionable element
+- Updated dependencies
+
 ## 23.5.0
 
 ### Minor Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/index.js

@@ -15,9 +15,12 @@ var _react2 = require("@emotion/react");
 
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 
-var _templateObject;
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+
+var _templateObject, _templateObject2;
 
 var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
+var actionStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n"])));
 /**
  * A base element that displays a Lozenge.
  * @internal
@@ -29,6 +32,7 @@ var Lozenge = function Lozenge(_ref) {
   var _ref$appearance = _ref.appearance,
       appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
       name = _ref.name,
+      onClick = _ref.onClick,
       overrideCss = _ref.overrideCss,
       text = _ref.text,
       _ref$testId = _ref.testId,
@@ -39,15 +43,19 @@ var Lozenge = function Lozenge(_ref) {
   }
 
   return (0, _react2.jsx)("span", {
-    css: [styles, overrideCss],
+    css: [styles, onClick ? actionStyles : undefined, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
-    "data-testid": testId
+    "data-testid": testId,
+    onClick: onClick
   }, (0, _react2.jsx)(_lozenge.default, {
     appearance: appearance,
     testId: "".concat(testId, "-lozenge")
-  }, text));
+  }, text, onClick && (0, _react2.jsx)(_chevronDown.default, {
+    label: "action",
+    testId: "".concat(testId, "-action")
+  })));
 };
 
 var _default = Lozenge;

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toFooterActions = exports.getOpenAction = exports.default = void 0;
 
+var _linkProvider = require("@atlaskit/link-provider");
+
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 
 var _extractors = require("@atlaskit/linking-common/extractors");
@@ -17,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _constants = require("../../../constants");
 
-var _extractMetadata2 = require("../../../extractors/hover/extractMetadata");
+var _extractMetadata = require("../../../extractors/hover/extractMetadata");
 
 var _actions = require("../../../state/actions");
 
@@ -97,6 +99,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
       url = _ref.url;
+  var showActionableElement = (0, _linkProvider.useFeatureFlag)('enableActionableElement');
   var actions = (0, _actions.useSmartCardActions)(id, url, analytics);
   (0, _react.useEffect)(function () {
     actions.loadMetadata();
@@ -129,12 +132,21 @@ var HoverCardContent = function HoverCardContent(_ref) {
     return toFooterActions(cardActions, onActionClick);
   }, [cardActions, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
-  var types = data ? (0, _extractors.extractType)(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
 
-  var _extractMetadata = (0, _extractMetadata2.extractMetadata)((0, _utils2.getSimulatedMetadata)(extensionKey, types)),
-      primary = _extractMetadata.primary,
-      secondary = _extractMetadata.secondary,
-      subtitle = _extractMetadata.subtitle;
+  var _useMemo = (0, _react.useMemo)(function () {
+    var types = data ? (0, _extractors.extractType)(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
+
+    var metadata = (0, _extractMetadata.extractMetadata)((0, _utils2.getSimulatedMetadata)(extensionKey, types));
+    var primary = showActionableElement ? (0, _utils2.toActionableMetadata)(onActionClick, extensionKey, types, cardActions, metadata.primary) : metadata.primary;
+    return {
+      primary: primary,
+      secondary: metadata.secondary,
+      subtitle: metadata.subtitle
+    };
+  }, [cardActions, data, extensionKey, onActionClick, showActionableElement]),
+      primary = _useMemo.primary,
+      secondary = _useMemo.secondary,
+      subtitle = _useMemo.subtitle;
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
 

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

@@ -1,12 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSimulatedMetadata = exports.SMART_CARD_ANALYTICS_DISPLAY = void 0;
+exports.toActionableMetadata = exports.getSimulatedMetadata = exports.SMART_CARD_ANALYTICS_DISPLAY = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _constants = require("../../constants");
 
+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; }
+
 var SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
 exports.SMART_CARD_ANALYTICS_DISPLAY = SMART_CARD_ANALYTICS_DISPLAY;
 
@@ -92,4 +100,35 @@ var getSimulatedMetadata = function getSimulatedMetadata() {
   }
 };
 
-exports.getSimulatedMetadata = getSimulatedMetadata;
+exports.getSimulatedMetadata = getSimulatedMetadata;
+
+var toActionableMetadata = function toActionableMetadata(onActionClick, extensionKey) {
+  var types = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var cardActions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  var elementItems = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+
+  // Actionable State for Jira issue
+  if (extensionKey === 'jira-object-provider' && types !== null && types !== void 0 && types.includes('atlassian:Task')) {
+    var previewAction = cardActions.find(function (action) {
+      return action.id === 'preview-content';
+    });
+
+    if (previewAction) {
+      return elementItems.map(function (elementItem) {
+        return elementItem.name === _constants.ElementName.State ? _objectSpread(_objectSpread({}, elementItem), {}, {
+          onClick: function onClick() {
+            if (onActionClick) {
+              onActionClick(previewAction.id);
+            }
+
+            return previewAction.invoke();
+          }
+        }) : elementItem;
+      });
+    }
+  }
+
+  return elementItems;
+};
+
+exports.toActionableMetadata = toActionableMetadata;

package/dist/es2019/version.json

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

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/index.js

@@ -2,10 +2,24 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 const styles = css`
   display: inline-flex;
   line-height: inherit;
 `;
+const actionStyles = css`
+  > span > span {
+    display: inline-flex;
+    align-items: center;
+    margin-right: -2px;
+  }
+
+  svg {
+    width: unset;
+    height: unset;
+    margin: -4px 0;
+  }
+`;
 /**
  * A base element that displays a Lozenge.
  * @internal
@@ -16,6 +30,7 @@ const styles = css`
 const Lozenge = ({
   appearance = 'default',
   name,
+  onClick,
   overrideCss,
   text,
   testId = 'smart-element-lozenge'
@@ -25,15 +40,19 @@ const Lozenge = ({
   }
 
   return jsx("span", {
-    css: [styles, overrideCss],
+    css: [styles, onClick ? actionStyles : undefined, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
-    "data-testid": testId
+    "data-testid": testId,
+    onClick: onClick
   }, jsx(AtlaskitLozenge, {
     appearance: appearance,
     testId: `${testId}-lozenge`
-  }, text));
+  }, text, onClick && jsx(ChevronDownIcon, {
+    label: "action",
+    testId: `${testId}-action`
+  })));
 };
 
 export default Lozenge;

package/dist/es2019/view/HoverCard/components/HoverCardContent.js

@@ -1,3 +1,4 @@
+import { useFeatureFlag } from '@atlaskit/link-provider';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { extractType } from '@atlaskit/linking-common/extractors';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
@@ -9,7 +10,7 @@ import { isSpecialEvent } from '../../../utils';
 import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
 import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss, hiddenSnippetStyles } from '../styled';
-import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import { toActionableMetadata, getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
 import HoverCardLoadingView from './HoverCardLoadingView';
 import SnippetOrPreview from './SnippetOrPreview';
 export const getOpenAction = (url, analytics, onActionClick) => ({
@@ -56,6 +57,7 @@ const HoverCardContent = ({
 }) => {
   var _cardState$details;
 
+  const showActionableElement = useFeatureFlag('enableActionableElement');
   const actions = useSmartCardActions(id, url, analytics);
   useEffect(() => {
     actions.loadMetadata();
@@ -82,13 +84,21 @@ const HoverCardContent = ({
   const titleActions = useMemo(() => [getOpenAction(url, analytics, onActionClick)], [url, analytics, onActionClick]);
   const footerActions = useMemo(() => toFooterActions(cardActions, onActionClick), [cardActions, onActionClick]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
-  const types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
-
   const {
     primary,
     secondary,
     subtitle
-  } = extractMetadata(getSimulatedMetadata(extensionKey, types));
+  } = useMemo(() => {
+    const types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
+
+    const metadata = extractMetadata(getSimulatedMetadata(extensionKey, types));
+    const primary = showActionableElement ? toActionableMetadata(onActionClick, extensionKey, types, cardActions, metadata.primary) : metadata.primary;
+    return {
+      primary,
+      secondary: metadata.secondary,
+      subtitle: metadata.subtitle
+    };
+  }, [cardActions, data, extensionKey, onActionClick, showActionableElement]);
   const titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   const snippetHeight = React.useRef(0);
   const snippetBlockRef = useRef(null);

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

@@ -77,4 +77,24 @@ export const getSimulatedMetadata = (extensionKey = '', types = []) => {
         }
       };
   }
+};
+export const toActionableMetadata = (onActionClick, extensionKey, types = [], cardActions = [], elementItems = []) => {
+  // Actionable State for Jira issue
+  if (extensionKey === 'jira-object-provider' && types !== null && types !== void 0 && types.includes('atlassian:Task')) {
+    const previewAction = cardActions.find(action => action.id === 'preview-content');
+
+    if (previewAction) {
+      return elementItems.map(elementItem => elementItem.name === ElementName.State ? { ...elementItem,
+        onClick: () => {
+          if (onActionClick) {
+            onActionClick(previewAction.id);
+          }
+
+          return previewAction.invoke();
+        }
+      } : elementItem);
+    }
+  }
+
+  return elementItems;
 };

package/dist/esm/version.json

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

package/dist/esm/view/FlexibleCard/components/elements/lozenge/index.js

@@ -1,12 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
+var actionStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n"])));
 /**
  * A base element that displays a Lozenge.
  * @internal
@@ -18,6 +20,7 @@ var Lozenge = function Lozenge(_ref) {
   var _ref$appearance = _ref.appearance,
       appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
       name = _ref.name,
+      onClick = _ref.onClick,
       overrideCss = _ref.overrideCss,
       text = _ref.text,
       _ref$testId = _ref.testId,
@@ -28,15 +31,19 @@ var Lozenge = function Lozenge(_ref) {
   }
 
   return jsx("span", {
-    css: [styles, overrideCss],
+    css: [styles, onClick ? actionStyles : undefined, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
-    "data-testid": testId
+    "data-testid": testId,
+    onClick: onClick
   }, jsx(AtlaskitLozenge, {
     appearance: appearance,
     testId: "".concat(testId, "-lozenge")
-  }, text));
+  }, text, onClick && jsx(ChevronDownIcon, {
+    label: "action",
+    testId: "".concat(testId, "-action")
+  })));
 };
 
 export default Lozenge;

package/dist/esm/view/HoverCard/components/HoverCardContent.js

@@ -1,3 +1,4 @@
+import { useFeatureFlag } from '@atlaskit/link-provider';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { extractType } from '@atlaskit/linking-common/extractors';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
@@ -9,7 +10,7 @@ import { isSpecialEvent } from '../../../utils';
 import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
 import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss, hiddenSnippetStyles } from '../styled';
-import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import { toActionableMetadata, getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
 import HoverCardLoadingView from './HoverCardLoadingView';
 import SnippetOrPreview from './SnippetOrPreview';
 export var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
@@ -63,6 +64,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
       url = _ref.url;
+  var showActionableElement = useFeatureFlag('enableActionableElement');
   var actions = useSmartCardActions(id, url, analytics);
   useEffect(function () {
     actions.loadMetadata();
@@ -95,12 +97,21 @@ var HoverCardContent = function HoverCardContent(_ref) {
     return toFooterActions(cardActions, onActionClick);
   }, [cardActions, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
-  var types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
 
-  var _extractMetadata = extractMetadata(getSimulatedMetadata(extensionKey, types)),
-      primary = _extractMetadata.primary,
-      secondary = _extractMetadata.secondary,
-      subtitle = _extractMetadata.subtitle;
+  var _useMemo = useMemo(function () {
+    var types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
+
+    var metadata = extractMetadata(getSimulatedMetadata(extensionKey, types));
+    var primary = showActionableElement ? toActionableMetadata(onActionClick, extensionKey, types, cardActions, metadata.primary) : metadata.primary;
+    return {
+      primary: primary,
+      secondary: metadata.secondary,
+      subtitle: metadata.subtitle
+    };
+  }, [cardActions, data, extensionKey, onActionClick, showActionableElement]),
+      primary = _useMemo.primary,
+      secondary = _useMemo.secondary,
+      subtitle = _useMemo.subtitle;
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   var snippetHeight = React.useRef(0);

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

@@ -1,3 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
 import { ElementName } from '../../constants';
 export var SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
 export var getSimulatedMetadata = function getSimulatedMetadata() {
@@ -80,4 +86,32 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
         }
       };
   }
+};
+export var toActionableMetadata = function toActionableMetadata(onActionClick, extensionKey) {
+  var types = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var cardActions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  var elementItems = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+
+  // Actionable State for Jira issue
+  if (extensionKey === 'jira-object-provider' && types !== null && types !== void 0 && types.includes('atlassian:Task')) {
+    var previewAction = cardActions.find(function (action) {
+      return action.id === 'preview-content';
+    });
+
+    if (previewAction) {
+      return elementItems.map(function (elementItem) {
+        return elementItem.name === ElementName.State ? _objectSpread(_objectSpread({}, elementItem), {}, {
+          onClick: function onClick() {
+            if (onActionClick) {
+              onActionClick(previewAction.id);
+            }
+
+            return previewAction.invoke();
+          }
+        }) : elementItem;
+      });
+    }
+  }
+
+  return elementItems;
 };

package/dist/types/view/FlexibleCard/components/elements/lozenge/types.d.ts

@@ -6,6 +6,11 @@ export declare type LozengeProps = ElementProps & {
      * Determines the appearance of the Atlaskit lozenge.
      */
     appearance?: LozengeAppearance;
+    /**
+     * DO NOT USE! This is an experiment code and may be removed at any given time.
+     * @internal
+     */
+    onClick?: () => void;
     /**
      * The text to display within the lozenge.
      */

package/dist/types/view/HoverCard/utils.d.ts

@@ -1,3 +1,6 @@
 import { JsonLd } from 'json-ld-types';
+import { LinkAction } from '../../state/hooks-external/useSmartLinkActions';
+import { ElementItem } from '../FlexibleCard/components/blocks/types';
 export declare const SMART_CARD_ANALYTICS_DISPLAY = "flexible";
 export declare const getSimulatedMetadata: (extensionKey?: string, types?: JsonLd.Primitives.ObjectType[]) => JsonLd.Primitives.Property<any>;
+export declare const toActionableMetadata: (onActionClick: (actionId: string) => void, extensionKey?: string | undefined, types?: JsonLd.Primitives.ObjectType[], cardActions?: LinkAction[], elementItems?: ElementItem[]) => ElementItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.5.0",
+  "version": "23.5.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     "@atlaskit/icon-object": "^6.2.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/linking-common": "^1.13.0",
+    "@atlaskit/linking-common": "^1.14.0",
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/lozenge": "^11.3.0",
     "@atlaskit/media-common": "^2.17.0",