@atlaskit/smart-card 16.2.1 → 17.1.0

package/dist/es2019/messages.js

@@ -0,0 +1,128 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  cannot_connect: {
+    id: 'fabric.linking.cannot_connect',
+    defaultMessage: "Can't connect, try again",
+    description: 'Error for when a provided link is not found.'
+  },
+  cannot_find_link: {
+    id: 'fabric.linking.cannot_find_link',
+    defaultMessage: "Can't find link",
+    description: 'Error for when a provided link is not found.'
+  },
+  click_to_join: {
+    id: 'fabric.linking.click_to_join',
+    defaultMessage: 'Join {context} to view this issue',
+    description: 'Allows the user join the product or service immediately'
+  },
+  connect_link_account: {
+    id: 'fabric.linking.connect_link_account',
+    defaultMessage: 'Connect to preview',
+    description: 'Shown when a user does not have access to a link, but can connect their external account to view the link.'
+  },
+  created_by: {
+    id: 'fabric.linking.created_by',
+    defaultMessage: 'Created by {context}',
+    description: 'Indicates the person or entity that created the resource.'
+  },
+  created_on: {
+    id: 'fabric.linking.create_on',
+    defaultMessage: 'Created {context}',
+    description: 'Indicated when entity was created'
+  },
+  delete: {
+    id: 'fabric.linking.delete',
+    defaultMessage: 'Delete',
+    description: 'Allow a user to delete a link'
+  },
+  modified_by: {
+    id: 'fabric.linking.updated_by',
+    defaultMessage: 'Modified by {context}',
+    description: 'Indicates the person or entity that modified the resource.'
+  },
+  modified_on: {
+    id: 'fabric.linking.modified_on',
+    defaultMessage: 'Updated {context}',
+    description: 'Indicated when entity was modified'
+  },
+  priority_blocker: {
+    id: 'fabric.linking.priority_blocker',
+    defaultMessage: 'Blocker',
+    description: 'Indicated priority as blocker'
+  },
+  priority_critical: {
+    id: 'fabric.linking.priority_critical',
+    defaultMessage: 'Critical',
+    description: 'Indicated priority as critical'
+  },
+  priority_high: {
+    id: 'fabric.linking.priority_high',
+    defaultMessage: 'High',
+    description: 'Indicated priority as high'
+  },
+  priority_highest: {
+    id: 'fabric.linking.priority_highest',
+    defaultMessage: 'Highest',
+    description: 'Indicated priority as highest'
+  },
+  priority_low: {
+    id: 'fabric.linking.priority_low',
+    defaultMessage: 'Low',
+    description: 'Indicated priority as low'
+  },
+  priority_lowest: {
+    id: 'fabric.linking.priority_lowest',
+    defaultMessage: 'Lowest',
+    description: 'Indicated priority as lowest'
+  },
+  priority_major: {
+    id: 'fabric.linking.priority_major',
+    defaultMessage: 'Major',
+    description: 'Indicated priority as major'
+  },
+  priority_medium: {
+    id: 'fabric.linking.priority_medium',
+    defaultMessage: 'Medium',
+    description: 'Indicated priority as medium'
+  },
+  priority_minor: {
+    id: 'fabric.linking.priority_minor',
+    defaultMessage: 'Minor',
+    description: 'Indicated priority as minor'
+  },
+  priority_trivial: {
+    id: 'fabric.linking.priority_trivial',
+    defaultMessage: 'Trivial',
+    description: 'Indicated priority as trivial'
+  },
+  priority_undefined: {
+    id: 'fabric.linking.priority_undefined',
+    defaultMessage: 'Undefined',
+    description: 'Indicated priority as unknown'
+  },
+  forbidden_access: {
+    id: 'fabric.linking.forbidden_access',
+    defaultMessage: 'Your access is forbidden',
+    description: 'Shown when a user does not have access to a resource behind the link.'
+  },
+  pending_request: {
+    id: 'fabric.linking.pending_request',
+    defaultMessage: 'Your access request is pending',
+    description: 'Shown when a user has requested an access but status is pending.'
+  },
+  restricted_link: {
+    id: 'fabric.linking.invalid_permissions',
+    defaultMessage: 'Restricted link, try another account',
+    description: 'Message shown when a user does not have permissions to view an item'
+  },
+  request_access: {
+    id: 'fabric.linking.request_access',
+    defaultMessage: 'Request access to {context} to view this issue',
+    description: 'Allows the user to request access to a product or service'
+  },
+  request_denied: {
+    id: 'fabric.linking.request_denied',
+    defaultMessage: 'Your access request was denied',
+    description: 'The user had request access but the request was denied by a product or service'
+  }
+});

package/dist/es2019/providers/editor/transformer.js

@@ -2,6 +2,8 @@ const isJiraRoadMap = url => url.match(/^https:\/\/.*?\/jira\/software\/(c\/)?pr
 
 const isPolarisView = url => url.match(/^https:\/\/.*?\/jira\/polaris\/projects\/[^\/]+?\/ideas\/view\/\d+$|^https:\/\/.*?\/secure\/JiraProductDiscoveryAnonymous\.jspa\?hash=\w+|^https:\/\/.*?\/jira\/polaris\/share\/\w+/);
 
+const isJwmView = url => url.match(/^https:\/\/.*?\/jira\/core\/projects\/[^\/]+?\/(timeline|calendar|list|board)\/?/);
+
 const isSlackMessage = url => url.match(/^https:\/\/.+?\.slack\.com\/archives\/[CG][A-Z0-9]+\/p[0-9]+(\?.*)?$/);
 
 export class Transformer {
@@ -34,7 +36,7 @@ export class Transformer {
   }
 
   toAdf(url, appearance) {
-    if (isJiraRoadMap(url) || isPolarisView(url)) {
+    if (isJiraRoadMap(url) || isPolarisView(url) || isJwmView(url)) {
       return this.buildEmbedAdf(url);
     } else if (isSlackMessage(url)) {
       return this.buildBlockAdf(url);

package/dist/es2019/ssr.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useState } from 'react';
+import uuid from 'uuid';
+import { CardWithUrlContent } from './view/CardWithUrl/component';
+// SSR friendly version of smart-card
+// simplifies the logic around rendering and loading placeholders and
+// only contains whats necessary to render the card on SSR mode
+export const CardSSR = props => {
+  const [id] = useState(() => uuid());
+
+  const dispatchAnalytics = () => {}; // we can't dispatch events on SSR, after hydration the we will provide the real callback
+
+
+  return /*#__PURE__*/React.createElement(CardWithUrlContent, _extends({}, props, {
+    id: id,
+    dispatchAnalytics: dispatchAnalytics
+  }));
+};

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

@@ -158,7 +158,7 @@ export const useSmartCardActions = (id, url, analytics) => {
 
     try {
       // Begin analytics instrumentation.
-      analytics.ui.actionClickedEvent(key, action.type, source); // Invoke action - either client-side or server-side.
+      analytics.ui.actionClickedEvent(id, key, action.type, source, opts.type); // Invoke action - either client-side or server-side.
 
       let response;
 

package/dist/es2019/state/analytics/ufoExperiences.js

@@ -1,19 +1,22 @@
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+const inlineExperience = {
+  platform: {
+    component: 'smart-links'
+  },
+  type: ExperienceTypes.Experience,
+  performanceType: ExperiencePerformanceTypes.InlineResult
+};
+const renderExperience = {
+  platform: {
+    component: 'smart-links'
+  },
+  type: ExperienceTypes.Load,
+  performanceType: ExperiencePerformanceTypes.PageSegmentLoad
+};
 const ufoExperiences = {
-  'smart-link-rendered': new ConcurrentExperience('smart-link-rendered', {
-    type: ExperienceTypes.Load,
-    performanceType: ExperiencePerformanceTypes.PageSegmentLoad,
-    platform: {
-      component: 'smart-links'
-    }
-  }),
-  'smart-link-authenticated': new ConcurrentExperience('smart-link-authenticated', {
-    type: ExperienceTypes.Load,
-    performanceType: ExperiencePerformanceTypes.PageSegmentLoad,
-    platform: {
-      component: 'smart-links'
-    }
-  })
+  'smart-link-rendered': new ConcurrentExperience('smart-link-rendered', renderExperience),
+  'smart-link-authenticated': new ConcurrentExperience('smart-link-authenticated', inlineExperience),
+  'smart-link-action-invocation': new ConcurrentExperience('smart-link-action-invocation', inlineExperience)
 };
 export const startUfoExperience = (experienceName, id, properties) => {
   const experience = ufoExperiences[experienceName].getInstance(id);

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

@@ -1,12 +1,20 @@
 import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
 import { useMemo } from 'react';
-import { startUfoExperience, succeedUfoExperience } from './ufoExperiences';
+import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
 export const useSmartLinkAnalytics = dispatchAnalytics => {
   const ui = useMemo(() => ({
     authEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiAuthEvent(display, definitionId, extensionKey)),
     authAlternateAccountEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiAuthAlternateAccountEvent(display, definitionId, extensionKey)),
     cardClickedEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiCardClickedEvent(display, definitionId, extensionKey)),
-    actionClickedEvent: (providerKey, actionType, display) => dispatchAnalytics(uiActionClickedEvent(providerKey, actionType, display)),
+    actionClickedEvent: (id, extensionKey, actionType, display, invokeType) => {
+      startUfoExperience('smart-link-action-invocation', id, {
+        actionType,
+        display,
+        extensionKey,
+        invokeType
+      });
+      dispatchAnalytics(uiActionClickedEvent(extensionKey, actionType, display));
+    },
     closedAuthEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiClosedAuthEvent(display, definitionId, extensionKey)),
     renderSuccessEvent: (display, id, definitionId, extensionKey) => {
       succeedUfoExperience('smart-link-rendered', id, {
@@ -23,8 +31,14 @@ export const useSmartLinkAnalytics = dispatchAnalytics => {
   const operational = useMemo(() => ({
     resolvedEvent: (id, definitionId, extensionKey, resourceType) => dispatchAnalytics(resolvedEvent(id, definitionId, extensionKey, resourceType)),
     unresolvedEvent: (id, status, definitionId, extensionKey, resourceType) => dispatchAnalytics(unresolvedEvent(id, status, definitionId, extensionKey, resourceType)),
-    invokeSucceededEvent: (id, providerKey, actionType, display) => dispatchAnalytics(invokeSucceededEvent(id, providerKey, actionType, display)),
-    invokeFailedEvent: (id, providerKey, actionType, display, reason) => dispatchAnalytics(invokeFailedEvent(id, providerKey, actionType, display, reason)),
+    invokeSucceededEvent: (id, providerKey, actionType, display) => {
+      succeedUfoExperience('smart-link-action-invocation', id);
+      dispatchAnalytics(invokeSucceededEvent(id, providerKey, actionType, display));
+    },
+    invokeFailedEvent: (id, providerKey, actionType, display, reason) => {
+      failUfoExperience('smart-link-action-invocation', id);
+      dispatchAnalytics(invokeFailedEvent(id, providerKey, actionType, display, reason));
+    },
     connectSucceededEvent: (id, definitionId, extensionKey) => {
       startUfoExperience('smart-link-authenticated', id, {
         extensionKey,

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

@@ -0,0 +1,3 @@
+import { useContext, createContext } from 'react';
+export const FlexibleUiContext = /*#__PURE__*/createContext(undefined);
+export const useFlexibleUiContext = () => useContext(FlexibleUiContext);

package/dist/es2019/state/flexible-ui-context/types.js

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

package/dist/es2019/utils/analytics/analytics.js

@@ -69,7 +69,7 @@ export const unresolvedEvent = (id, status, definitionId, extensionKey, resource
     } : undefined
   }
 });
-export const invokeSucceededEvent = (id, providerKey, actionType, display) => {
+export const invokeSucceededEvent = (id, extensionKey, actionType, display) => {
   const measure = getMeasure(id, 'resolved') || {
     duration: undefined
   };
@@ -81,12 +81,12 @@ export const invokeSucceededEvent = (id, providerKey, actionType, display) => {
       id,
       actionType,
       display,
-      definitionId: providerKey,
+      extensionKey,
       duration: measure.duration
     }
   };
 };
-export const invokeFailedEvent = (id, providerKey, actionType, display, reason) => {
+export const invokeFailedEvent = (id, extensionKey, actionType, display, reason) => {
   const measure = getMeasure(id, 'errored') || {
     duration: undefined
   };
@@ -98,7 +98,7 @@ export const invokeFailedEvent = (id, providerKey, actionType, display, reason)
       id,
       actionType,
       display,
-      definitionId: providerKey,
+      extensionKey,
       duration: measure.duration,
       reason
     }
@@ -179,13 +179,13 @@ export const uiCardClickedEvent = (display, definitionId, extensionKey) => ({
     display
   }
 });
-export const uiActionClickedEvent = (providerKey, actionType, display) => ({
+export const uiActionClickedEvent = (extensionKey, actionType, display) => ({
   action: 'clicked',
   actionSubject: 'smartLinkAction',
   eventType: 'ui',
   attributes: { ...context,
     display,
-    definitionId: providerKey,
+    extensionKey,
     actionType: actionType
   }
 });

package/dist/es2019/utils/flexible.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import * as Blocks from '../view/FlexibleCard/components/blocks';
+import { TitleBlock } from '../view/FlexibleCard/components/blocks';
+import * as Elements from '../view/FlexibleCard/components/elements';
+export const isFlexibleUiCard = (appearance, children) => {
+  if ((appearance === 'inline' || appearance === 'block') && children && React.Children.toArray(children).some(child => isFlexibleUiBlock(child))) {
+    return true;
+  }
+
+  return false;
+};
+export const isFlexibleUiBlock = node => /*#__PURE__*/React.isValidElement(node) && Object.values(Blocks).some(type => type === node.type);
+export const isFlexibleUiElement = node => /*#__PURE__*/React.isValidElement(node) && Object.values(Elements).some(type => type === node.type);
+export const isFlexibleUiTitleBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;

package/dist/es2019/utils/index.js

@@ -93,4 +93,10 @@ const typeToIcon = {
   // TODO: Figure a way to detect those
   'application/sketch': ['Sketch', () => import('@atlaskit/icon-file-type/glyph/sketch/16')],
   folder: ['Folder', () => import('@atlaskit/icon-file-type/glyph/folder/16')]
+};
+export const getIframeSandboxAttribute = isTrusted => isTrusted ? undefined : 'allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts';
+export const handleOnClick = handler => e => {
+  e.preventDefault();
+  e.stopPropagation();
+  handler();
 };

package/dist/es2019/utils/token.js

@@ -0,0 +1,23 @@
+import { token } from '@atlaskit/tokens'; // Temporary safeguard while @atlaskit/tokens is being developed
+
+export const safeToken = (path, fallback) => {
+  try {
+    return token(path, fallback);
+  } catch (e) {
+    return fallback;
+  }
+};
+export const tokens = {
+  actionIcon: safeToken('color.icon', '#44546F'),
+  background: safeToken('elevation.surface', '#FFFFFF'),
+  badgeIcon: safeToken('color.icon.subtle', '#626F86'),
+  badgeText: safeToken('color.text.subtlest', '#626F86'),
+  blackLink: safeToken('color.text.subtle', '#44546F'),
+  blackLinkPressed: safeToken('color.text', '#172B4D'),
+  blueLink: safeToken('color.link', '#0C66E4'),
+  blueLinkPressed: safeToken('color.link.pressed', '#0055CC'),
+  elevation: safeToken('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
+  errorMessage: safeToken('color.text.disabled', '#6B778C'),
+  errorMessageHover: safeToken('color.text.subtle', '#8993A4'),
+  text: safeToken('color.text.subtlest', '#626F86')
+};

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/actions/AuthorizeAction.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export const AuthorizeAction = handler => ({
+  id: 'connect-account',
+  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_card),
+  promise: () => new Promise(resolve => resolve(handler())),
+  buttonAppearance: 'default'
+});

package/dist/es2019/view/BlockCard/actions/DownloadAction.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { downloadUrl } from '@atlaskit/media-common';
+import { messages } from '@atlaskit/media-ui/messages';
+export async function downloadFunction({
+  url
+}) {
+  if (!url) {
+    return;
+  }
+
+  downloadUrl(url);
+}
+export const DownloadAction = ({
+  url
+}) => ({
+  id: 'download-content',
+  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
+  promise: () => downloadFunction({
+    url
+  })
+});

package/dist/es2019/view/BlockCard/actions/ForbiddenAction.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export const ForbiddenAction = (handler, id = 'connect-other-account', message = messages.try_another_account, context = '') => ({
+  id,
+  text: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, message, {
+    values: {
+      context
+    }
+  })),
+  promise: () => new Promise(resolve => resolve(handler())),
+  buttonAppearance: 'default'
+});

package/dist/es2019/view/BlockCard/actions/PreviewAction.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { IntlProvider, FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+
+/*
+  Explanatory note:
+  Actions don't have access to the react tree of whatever is rendered them
+  (and this concept is fraught inside editor anyway) so we want to ensure
+  it is mounting to a new unique place. This function manages that, including
+  creating an element if it doesn't exist, as well as tidying up the react tree
+  (but not the element) upon closing the modal.
+
+  This may strike you as really uncomfortable as you read it, so I wanted to note
+  that a) this was discussed and agreed upon, and b) it's definitely odd, and if
+  you find an elegant solution around this, you should definitely feel free to
+  refactor it.
+*/
+export async function previewFunction({
+  popupMountPointId,
+  onClose,
+  ...rest
+}) {
+  let popupMountPoint;
+  popupMountPoint = document.getElementById(popupMountPointId);
+
+  if (!popupMountPoint) {
+    popupMountPoint = document.createElement('div');
+    popupMountPoint.id = popupMountPointId;
+    popupMountPoint.setAttribute('data-testid', 'preview-modal');
+    document.body.appendChild(popupMountPoint);
+  }
+
+  let Modal = await import('../components/Modal');
+  ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
+    onClose: () => {
+      if (popupMountPoint) {
+        onClose();
+        ReactDOM.unmountComponentAtNode(popupMountPoint);
+      }
+    }
+  }))), popupMountPoint);
+}
+/*
+Most of these are optional as we are being fault-tolerant
+However src, details, icon, title, and providerName are STRONGLY encouraged
+*/
+
+export default (({
+  details,
+  ...rest
+}) => ({
+  id: 'preview-content',
+  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
+  promise: () => previewFunction({
+    popupMountPointId: 'twp-editor-preview-iframe',
+    providerName: 'Preview',
+    closeLabel: 'Close Preview',
+    showModal: true,
+    iframeName: 'twp-editor-preview-iframe',
+    onClose: () => {},
+    metadata: {
+      items: details || []
+    },
+    ...rest
+  })
+}));

package/dist/es2019/view/BlockCard/actions/RetryAction.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export const RetryAction = handler => ({
+  id: 'try-again',
+  promise: async () => handler(),
+  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)
+});

package/dist/es2019/view/BlockCard/actions/ViewAction.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export async function viewFunction({
+  url
+}) {
+  if (!url) {
+    return;
+  }
+
+  window.open(url, '_blank', 'noopener=yes');
+}
+export const ViewAction = ({
+  url
+}) => ({
+  id: 'view-content',
+  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.view),
+  promise: () => viewFunction({
+    url
+  })
+});

package/dist/es2019/view/BlockCard/components/Action.js

@@ -0,0 +1,42 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useState } from 'react';
+import Button from '@atlaskit/button/custom-theme-button';
+import { ActionIcon } from './ActionIcon';
+export const spinnerDelay = 1000;
+export const Action = ({
+  promise,
+  text,
+  buttonAppearance = 'default',
+  id
+}) => {
+  const [state, setState] = useState('init');
+  return jsx(Button, {
+    spacing: "compact",
+    appearance: buttonAppearance,
+    isLoading: state === 'loading',
+    testId: `button-${id}`,
+    onClick: event => {
+      event.stopPropagation();
+      event.preventDefault();
+
+      if (state !== 'loading') {
+        setState('loading');
+        promise().then(() => {
+          setState('success');
+          setTimeout(() => setState('init'), spinnerDelay);
+        }).catch(() => {
+          setState('failure');
+          setTimeout(() => setState('init'), spinnerDelay);
+        });
+      }
+    }
+  }, jsx("div", {
+    css: {
+      transition: 'opacity 0.3s',
+      opacity: state !== 'init' ? 0 : 1
+    }
+  }, text), jsx(ActionIcon, {
+    state: state
+  }));
+};

package/dist/es2019/view/BlockCard/components/ActionIcon.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import CheckIcon from '@atlaskit/icon/glyph/check';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+
+/*
+  These styles are taken fro the spinner style for button. There was not an
+  easy way to share tehm between the two components.
+*/
+export const spinnerStyles = {
+  display: 'flex',
+  position: 'absolute',
+  left: '50%',
+  top: '50%',
+  transform: 'translate(-50%, -50%)'
+};
+export const ActionIcon = ({
+  state
+}) => {
+  switch (state) {
+    case 'init':
+    case 'loading':
+      return null;
+
+    case 'success':
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "check-icon",
+        style: spinnerStyles
+      }, /*#__PURE__*/React.createElement(CheckIcon, {
+        size: "small",
+        label: "check"
+      }));
+
+    case 'failure':
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "cross-icon",
+        style: spinnerStyles
+      }, /*#__PURE__*/React.createElement(CrossIcon, {
+        size: "small",
+        label: "check"
+      }));
+  }
+};

package/dist/es2019/view/BlockCard/components/ActionList.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useState } from 'react';
+import Item from '@atlaskit/item';
+import DropList from '@atlaskit/droplist';
+import ButtonGroup from '@atlaskit/button/button-group';
+import Button from '@atlaskit/button/custom-theme-button';
+import { Action } from './Action';
+import { gs, mq } from '../utils';
+export const ActionList = ({
+  items
+}) => {
+  const [isOpen, setOpen] = useState(false);
+  const actionsToShow = items.slice(0, 2);
+  const actionsToList = items.slice(2, items.length);
+  return jsx("div", {
+    css: mq({
+      display: 'flex',
+      marginTop: [gs(2), 0]
+    })
+  }, jsx(ButtonGroup, null, actionsToShow.map(action => jsx(Action, _extends({
+    key: action.id
+  }, action)))), actionsToList.length ? jsx("div", {
+    css: {
+      marginLeft: gs(0.5)
+    }
+  }, jsx(DropList, {
+    appearance: "default",
+    position: "right top",
+    isTriggerNotTabbable: true,
+    onOpenChange: () => setOpen(true),
+    onClick: () => setOpen(!isOpen),
+    isOpen: isOpen,
+    trigger: jsx(Button, {
+      spacing: "compact"
+    }, "...")
+  }, actionsToList.map(actionToList => jsx(Item, {
+    key: actionToList.id
+  }, actionToList.text)))) : null);
+};