@atlaskit/smart-card 23.3.1 → 23.4.0

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

@@ -1,5 +1,6 @@
 import { ActionName } from '../../../../constants';
-import { createUIAction } from './utils'; // Attention: Keep the export name and action name the same.
+import { createDataAction, createUIAction } from './utils';
+// Attention: Keep the export name and action name the same.
 // This will help reducing the code for mapping action inside
 // createAction and renderActionItems
 
@@ -8,7 +9,6 @@ import { createUIAction } from './utils'; // Attention: Keep the export name and
  * the icon to a cross icon.
  * @see Action
  */
-
 export const DeleteAction = createUIAction(ActionName.DeleteAction);
 /**
  * Creates a EditAction component. Accepts default ActionProps, but defaults
@@ -17,6 +17,27 @@ export const DeleteAction = createUIAction(ActionName.DeleteAction);
  */
 
 export const EditAction = createUIAction(ActionName.EditAction);
+/**
+ * Creates a PreviewAction component. Accepts default PreviewActionProps, and defaults
+ * to the text 'Preview' inside the button.
+ * @see Action
+ */
+
+export const PreviewAction = createDataAction(ActionName.PreviewAction);
+/**
+ * Creates a ViewAction component. Accepts default ViewActionProps, and defaults
+ * to the text 'View' inside the button.
+ * @see Action
+ */
+
+export const ViewAction = createDataAction(ActionName.ViewAction);
+/**
+ * Creates a DownloadAction component. Accepts default DownloadActionProps, and defaults
+ * to the text 'Download' inside the button.
+ * @see Action
+ */
+
+export const DownloadAction = createDataAction(ActionName.DownloadAction);
 /**
  * Creates a CustomAction component. Accepts default ActionProps. Required to provide
  * your own icon or text.

package/dist/es2019/view/FlexibleCard/components/actions/utils.js

@@ -7,6 +7,12 @@ import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../messages';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import EditIcon from '@atlaskit/icon/glyph/edit';
+import PreviewAction from './action/preview-action';
+import VidFullScreenOnIcon from '@atlaskit/icon/glyph/vid-full-screen-on';
+import ViewAction from './action/view-action';
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import DownloadAction from './action/download-action';
+import DownloadIcon from '@atlaskit/icon/glyph/download';
 const actionMappings = {
   [ActionName.CustomAction]: {
     component: Action,
@@ -33,6 +39,39 @@ const actionMappings = {
       }),
       tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
     }
+  },
+  [ActionName.PreviewAction]: {
+    component: PreviewAction,
+    props: {
+      testId: 'smart-action-preview-action',
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
+      icon: /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
+        label: "Preview"
+      }),
+      tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview)
+    }
+  },
+  [ActionName.ViewAction]: {
+    component: ViewAction,
+    props: {
+      testId: 'smart-action-view-action',
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.view),
+      icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
+        label: "View"
+      }),
+      tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.view)
+    }
+  },
+  [ActionName.DownloadAction]: {
+    component: DownloadAction,
+    props: {
+      testId: 'smart-action-download-action',
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
+      icon: /*#__PURE__*/React.createElement(DownloadIcon, {
+        label: "Download"
+      }),
+      tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.download)
+    }
   }
 };
 
@@ -50,8 +89,13 @@ const getActionData = (actionName, contextKey, context) => {
   const data = context[contextKey];
 
   switch (actionName) {
-    default:
+    case ActionName.PreviewAction:
+    case ActionName.ViewAction:
+    case ActionName.DownloadAction:
       return data;
+
+    default:
+      return undefined;
   }
 };
 
@@ -69,7 +113,9 @@ export const createDataAction = name => {
   return overrides => {
     const context = useContext(FlexibleUiContext);
     const data = getActionData(name, contextKey, context);
-    return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, data, overrides));
+    return data ? /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, data, overrides, {
+      url: context === null || context === void 0 ? void 0 : context.url
+    })) : null;
   };
 };
 export const createUIAction = name => {

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -46,13 +46,7 @@ const ActionGroup = ({
   onDropdownOpenChange,
   testId
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [buttonActions, dropdownItemActions] = useMemo(() => {
-    const isMoreThenTwoItems = items.length > visibleButtonsNum;
-    const buttons = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
-    const dropdownItems = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
-    return [buttons, dropdownItems];
-  }, [items, visibleButtonsNum]); // Stop AK dropdown menu to propagate event on click.
+  const [isOpen, setIsOpen] = useState(false); // Stop AK dropdown menu to propagate event on click.
 
   const onClick = useCallback(e => e.stopPropagation(), []);
   const onOpenChange = useCallback(attrs => {
@@ -69,11 +63,20 @@ const ActionGroup = ({
       });
     }
   }, [isOpen, onOpenChange]);
+  const renderableActions = items.filter(action => renderActionItems([action]));
+  const [buttonActions, dropdownItemActions] = useMemo(() => {
+    const isMoreThenTwoItems = renderableActions && renderableActions.length > visibleButtonsNum;
+    const buttons = isMoreThenTwoItems ? renderableActions.slice(0, visibleButtonsNum - 1) : renderableActions;
+    const dropdownItems = isMoreThenTwoItems ? renderableActions.slice(visibleButtonsNum - 1) : [];
+    return [buttons, dropdownItems];
+  }, [renderableActions, visibleButtonsNum]);
+  const dropdownMenuElement = renderActionItems(dropdownItemActions, size, appearance, true, onActionClick);
+  const buttonGroupElement = renderActionItems(buttonActions, size, appearance, false, onActionClick);
   return jsx("div", {
     css: styles,
     className: "actions-button-group",
     onClick: onClick
-  }, jsx(ButtonGroup, null, renderActionItems(buttonActions, size, appearance, false, onActionClick), dropdownItemActions.length > 0 ? jsx(DropdownMenu, {
+  }, jsx(ButtonGroup, null, buttonGroupElement, dropdownItemActions.length > 0 && dropdownMenuElement && dropdownMenuElement.length > 0 ? jsx(DropdownMenu, {
     isOpen: isOpen,
     onOpenChange: onOpenChange,
     trigger: ({
@@ -93,7 +96,7 @@ const ActionGroup = ({
       ref: triggerRef
     }))),
     testId: "action-group-dropdown"
-  }, renderActionItems(dropdownItemActions, size, appearance, true, onActionClick)) : null));
+  }, dropdownMenuElement) : null));
 };
 
 export default ActionGroup;

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -105,7 +105,7 @@ const isElementDisplayValid = (name, display) => {
   return (_ElementDisplaySchema = (_ElementDisplaySchema2 = ElementDisplaySchema[name]) === null || _ElementDisplaySchema2 === void 0 ? void 0 : _ElementDisplaySchema2.includes(display)) !== null && _ElementDisplaySchema !== void 0 ? _ElementDisplaySchema : false;
 };
 
-const isElementNull = children => {
+const isJSXElementNull = children => {
   return Boolean(children.type() === null);
 };
 
@@ -138,7 +138,7 @@ export const renderElementItems = (items = [], display = 'inline') => {
         key: idx
       }, typedProps));
 
-      if (!isElementNull(element)) {
+      if (!isJSXElementNull(element)) {
         return [...acc, element];
       }
     }
@@ -182,13 +182,18 @@ export const renderActionItems = (items = [], size = SmartLinkSize.Medium, appea
         }
       };
 
-      return [...acc, /*#__PURE__*/React.createElement(Action, _extends({
+      const action = /*#__PURE__*/React.createElement(Action, _extends({
+        url: '',
         asDropDownItem: asDropDownItems,
         size: size,
         key: idx,
         appearance: appearance,
         onClick: handleOnClick
-      }, actionProps))];
+      }, actionProps));
+
+      if (!isJSXElementNull(action)) {
+        return [...acc, action];
+      }
     }
 
     return acc;

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

@@ -69,7 +69,7 @@ const Media = ({
   return jsx("div", {
     css: [styles, overrideCss],
     "data-smart-element": name,
-    "data-smart-element-media": true,
+    "data-smart-element-media": type,
     "data-testid": testId
   }, jsx(ImageIcon, {
     testId: `${testId}-image`,

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

@@ -2,7 +2,7 @@ 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 { FlexibleUiAnalyticsContext, FlexibleUiContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
 /**
  * This represents a Flexible Card: a link represented by a card with metadata.
@@ -21,7 +21,8 @@ const FlexibleCard = ({
   ui,
   url,
   onClick,
-  testId
+  testId,
+  analytics
 }) => {
   const {
     status: cardType,
@@ -60,7 +61,9 @@ const FlexibleCard = ({
         break;
     }
   }, [onError, onResolve, status, title, url]);
-  return /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
+  return /*#__PURE__*/React.createElement(FlexibleUiAnalyticsContext.Provider, {
+    value: analytics
+  }, /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(Container, _extends({
     testId: testId
@@ -68,7 +71,7 @@ const FlexibleCard = ({
     onClick: onClick,
     retry: retry,
     status: status
-  }), children));
+  }), children)));
 };
 
 export default FlexibleCard;

package/dist/es2019/view/common/Icon.js

@@ -1,15 +1,42 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import React from 'react';
 import ImageLoader from 'react-render-image';
 import LinkIcon from '@atlaskit/icon/glyph/link';
 import { gs } from './utils';
 export const blockCardIconImageClassName = 'block-card-icon-image';
+
+const getImageStyles = isFlexibleUi => {
+  if (isFlexibleUi) {
+    return;
+  }
+
+  return css`
+    height: ${gs(2)};
+    width: ${gs(2)};
+  `;
+};
+
+const getSpanStyles = isFlexibleUi => {
+  if (isFlexibleUi) {
+    return;
+  }
+
+  return css`
+    height: ${gs(2.5)};
+    width: ${gs(2)};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `;
+};
+
 export const Icon = ({
   url,
   icon,
   defaultIcon,
-  testId = 'block-card-icon'
+  testId = 'block-card-icon',
+  isFlexibleUi = false
 }) => {
   const placeholder = defaultIcon || jsx(LinkIcon, {
     label: "link",
@@ -19,23 +46,14 @@ export const Icon = ({
   const image = url && jsx(ImageLoader, {
     src: url,
     loaded: jsx("img", {
-      css: {
-        height: gs(2),
-        width: gs(2)
-      },
+      css: getImageStyles(isFlexibleUi),
       src: url,
       "data-testid": `${testId}-image`
     }),
     errored: placeholder
   });
   return jsx("span", {
-    css: {
-      height: gs(2.5),
-      width: gs(2),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
+    css: getSpanStyles(isFlexibleUi),
     "data-testid": testId,
     className: blockCardIconImageClassName
   }, icon || image || placeholder);

package/dist/esm/constants.js

@@ -142,6 +142,9 @@ export var ActionName;
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
   ActionName["EditAction"] = "EditAction";
+  ActionName["PreviewAction"] = "PreviewAction";
+  ActionName["ViewAction"] = "ViewAction";
+  ActionName["DownloadAction"] = "DownloadAction";
   ActionName["CustomAction"] = "CustomAction";
 })(ActionName || (ActionName = {}));
 

package/dist/esm/extractors/common/actions/extractActions.js

@@ -67,7 +67,7 @@ var getServerActionProps = function getServerActionProps(jsonLd, action, handler
   };
 };
 
-var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
+export var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
   var actions = jsonLd && jsonLd['schema:potentialAction'];
 
   if (!actions) {
@@ -80,7 +80,6 @@ var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
 
   return actions;
 };
-
 export function extractActions(jsonLd, handler) {
   var actions = getActionsFromJsonLd(jsonLd);
   var clientActions = actions.filter(isClientAction);

package/dist/esm/extractors/flexible/actions/extract-download-action.js

@@ -0,0 +1,15 @@
+import { getActionsFromJsonLd } from '../../common/actions/extractActions';
+import { extractDownloadUrl } from '../../common/detail';
+export var extractDownloadAction = function extractDownloadAction(data) {
+  var downloadActionExists = getActionsFromJsonLd(data).find(function (action) {
+    return action['@type'] === 'DownloadAction';
+  });
+
+  if (downloadActionExists) {
+    return {
+      downloadUrl: extractDownloadUrl(data)
+    };
+  }
+
+  return undefined;
+};

package/dist/esm/extractors/flexible/actions/extract-preview-action.js

@@ -0,0 +1,23 @@
+import { extractDownloadUrl } from '../../common/detail';
+import { extractPreview as extractPreviewData } from '@atlaskit/linking-common';
+import { extractLink, extractProvider, extractTitle } from '@atlaskit/linking-common/extractors';
+import { extractLinkIcon } from '../icon';
+export var extractPreviewAction = function extractPreviewAction(response) {
+  var _extractPreviewData;
+
+  var data = response.data;
+  var src = (_extractPreviewData = extractPreviewData(data, 'web')) === null || _extractPreviewData === void 0 ? void 0 : _extractPreviewData.src;
+
+  if (src) {
+    var _extractProvider;
+
+    return {
+      downloadUrl: extractDownloadUrl(data),
+      providerName: (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text,
+      src: src,
+      title: extractTitle(data),
+      linkIcon: extractLinkIcon(response),
+      url: extractLink(data)
+    };
+  }
+};

package/dist/esm/extractors/flexible/actions/extract-view-action.js

@@ -0,0 +1,15 @@
+import { extractLink } from '@atlaskit/linking-common/extractors';
+import { getActionsFromJsonLd } from '../../common/actions/extractActions';
+export var extractViewAction = function extractViewAction(data) {
+  var viewActionExists = getActionsFromJsonLd(data).find(function (action) {
+    return action['@type'] === 'ViewAction';
+  });
+
+  if (viewActionExists) {
+    return {
+      viewUrl: extractLink(data)
+    };
+  }
+
+  return undefined;
+};

package/dist/esm/extractors/flexible/index.js

@@ -3,11 +3,14 @@ import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
 import { extractAttachmentCount, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
-import { extractPersonCreatedBy, extractLink, extractTitle, extractDateUpdated, extractDateCreated } from '@atlaskit/linking-common/extractors';
+import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink } from '@atlaskit/linking-common/extractors';
 import extractPriority from './extract-priority';
 import extractProviderIcon from './icon/extract-provider-icon';
 import extractPreview from './extract-preview';
 import { extractLatestCommit } from './latest-commit';
+import { extractPreviewAction } from './actions/extract-preview-action';
+import { extractDownloadAction } from './actions/extract-download-action';
+import { extractViewAction } from './actions/extract-view-action';
 
 var extractFlexibleUiContext = function extractFlexibleUiContext(response, renderers) {
   if (!response) {
@@ -27,6 +30,9 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     createdBy: extractCreatedBy(data),
     createdOn: extractDateCreated(data),
     dueOn: extractDueOn(data),
+    previewAction: extractPreviewAction(response),
+    viewAction: extractViewAction(data),
+    downloadAction: extractDownloadAction(data),
     latestCommit: extractLatestCommit(data),
     linkIcon: extractLinkIcon(response, renderers),
     modifiedBy: extractModifiedBy(data),

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

@@ -7,4 +7,13 @@ import { useContext, createContext } from 'react';
 export var FlexibleUiContext = /*#__PURE__*/createContext(undefined);
 export var useFlexibleUiContext = function useFlexibleUiContext() {
   return useContext(FlexibleUiContext);
+};
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
+
+export var FlexibleUiAnalyticsContext = /*#__PURE__*/createContext(undefined);
+export var useFlexibleUiAnalyticsContext = function useFlexibleUiAnalyticsContext() {
+  return useContext(FlexibleUiAnalyticsContext);
 };

package/dist/esm/version.json

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

package/dist/esm/view/FlexibleCard/components/actions/action/download-action/index.js

@@ -0,0 +1,96 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+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 React from 'react';
+import Action from '../index';
+
+var DownloadAction = function DownloadAction(props) {
+  var appearance = props.appearance,
+      asDropDownItem = props.asDropDownItem,
+      downloadUrl = props.downloadUrl,
+      _onClick = props.onClick,
+      testId = props.testId,
+      url = props.url;
+
+  if (downloadUrl && url) {
+    var action = _objectSpread(_objectSpread({}, props), {}, {
+      onClick: function onClick() {
+        downloadFunction({
+          url: downloadUrl
+        });
+
+        if (_onClick) {
+          _onClick();
+        }
+      }
+    });
+
+    return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
+      appearance: appearance,
+      asDropDownItem: asDropDownItem,
+      testId: testId
+    }));
+  } else {
+    return null;
+  }
+};
+
+function downloadFunction(_x) {
+  return _downloadFunction.apply(this, arguments);
+}
+
+function _downloadFunction() {
+  _downloadFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var url, isIE11, isSafari, iframeName, link, iframe;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            url = _ref.url;
+
+            if (url) {
+              _context.next = 3;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 3:
+            isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
+            isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+            iframeName = 'media-download-iframe';
+            link = document.createElement('a');
+            iframe = document.getElementById(iframeName);
+
+            if (!iframe) {
+              iframe = document.createElement('iframe');
+              iframe.style.display = 'none';
+              iframe.id = iframeName;
+              iframe.name = iframeName;
+              document.body.appendChild(iframe);
+            }
+
+            link.href = url;
+            link.download = url;
+            link.target = isIE11 || isSafari ? '_blank' : iframeName;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _downloadFunction.apply(this, arguments);
+}
+
+export default DownloadAction;

package/dist/esm/view/FlexibleCard/components/actions/action/download-action/types.js

@@ -0,0 +1 @@
+export {};