@atlaskit/smart-card 23.12.3 → 23.13.1

package/dist/es2019/extractors/common/icon/extractIconFromDocument.js

@@ -30,37 +30,44 @@ const documentTypeToIcon = (type, opts) => {
   switch (type) {
     case 'schema:BlogPosting':
       return /*#__PURE__*/React.createElement(BlogIcon, {
-        label: opts.title || 'blog'
+        label: opts.title || 'blog',
+        testId: "blog-icon"
       });
 
     case 'schema:DigitalDocument':
       return /*#__PURE__*/React.createElement(FileIcon, {
-        label: opts.title || 'file'
+        label: opts.title || 'file',
+        testId: "file-icon"
       });
 
     case 'schema:TextDigitalDocument':
       return /*#__PURE__*/React.createElement(DocumentIcon, {
-        label: opts.title || 'document'
+        label: opts.title || 'document',
+        testId: "document-icon"
       });
 
     case 'schema:PresentationDigitalDocument':
       return /*#__PURE__*/React.createElement(PresentationIcon, {
-        label: opts.title || 'presentation'
+        label: opts.title || 'presentation',
+        testId: "presentation-icon"
       });
 
     case 'schema:SpreadsheetDigitalDocument':
       return /*#__PURE__*/React.createElement(SpreadsheetIcon, {
-        label: opts.title || 'spreadsheet'
+        label: opts.title || 'spreadsheet',
+        testId: "spreadsheet-icon"
       });
 
     case 'atlassian:Template':
       return /*#__PURE__*/React.createElement(DocumentFilledIcon, {
-        label: opts.title || 'template'
+        label: opts.title || 'template',
+        testId: "document-filled-icon"
       });
 
     case 'atlassian:UndefinedLink':
       return /*#__PURE__*/React.createElement(DocumentIcon, {
-        label: opts.title || 'undefinedLink'
+        label: opts.title || 'undefinedLink',
+        testId: "document-icon"
       });
   }
 };

package/dist/es2019/extractors/common/icon/extractIconFromTask.js

@@ -17,6 +17,10 @@ export const extractIconFromTask = opts => {
     provider
   } = opts;
   const taskLabel = opts.title || 'task';
+  const defaultIcon = /*#__PURE__*/React.createElement(TaskIcon, {
+    label: taskLabel,
+    testId: "default-task-icon"
+  });
 
   if (provider && provider.id === JIRA_GENERATOR_ID && taskType && taskType.id) {
     const taskTypeId = taskType.id;
@@ -25,57 +29,62 @@ export const extractIconFromTask = opts => {
     switch (taskTypeName) {
       case JIRA_TASK:
         return /*#__PURE__*/React.createElement(JiraTaskIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-task-icon"
         });
 
       case JIRA_SUB_TASK:
         return /*#__PURE__*/React.createElement(JiraSubTaskIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-subtask-icon"
         });
 
       case JIRA_STORY:
         return /*#__PURE__*/React.createElement(JiraStoryIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-story-icon"
         });
 
       case JIRA_BUG:
         return /*#__PURE__*/React.createElement(JiraBugIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-bug-icon"
         });
 
       case JIRA_EPIC:
         return /*#__PURE__*/React.createElement(JiraEpicIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-epic-icon"
         });
 
       case JIRA_INCIDENT:
         return /*#__PURE__*/React.createElement(JiraIncidentIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-incident-icon"
         });
 
       case JIRA_SERVICE_REQUEST:
         return /*#__PURE__*/React.createElement(JiraServiceRequestIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-service-request-icon"
         });
 
       case JIRA_CHANGE:
         return /*#__PURE__*/React.createElement(JiraChangeIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-change-icon"
         });
 
       case JIRA_PROBLEM:
         return /*#__PURE__*/React.createElement(JiraProblemIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-problem-icon"
         });
 
       case JIRA_CUSTOM_TASK_TYPE:
-        return taskType.icon || opts.icon || provider.icon || /*#__PURE__*/React.createElement(TaskIcon, {
-          label: taskLabel
-        });
+        return taskType.icon || opts.icon || provider.icon || defaultIcon;
     }
   }
 
-  return /*#__PURE__*/React.createElement(TaskIcon, {
-    label: taskLabel
-  });
+  return defaultIcon;
 };

package/dist/es2019/linkUrl.js

@@ -0,0 +1 @@
+export { default } from './view/LinkUrl';

package/dist/es2019/messages.js

@@ -40,6 +40,11 @@ export const messages = defineMessages({
     defaultMessage: 'Close',
     description: ''
   },
+  check_this_link: {
+    id: 'fabric.linking.check_this_link',
+    defaultMessage: 'Check this link',
+    description: 'Link safety warning modal header'
+  },
   connect_to: {
     id: 'fabric.linking.connect_to',
     defaultMessage: 'Connect to {name}',
@@ -85,8 +90,13 @@ export const messages = defineMessages({
     defaultMessage: 'Connect to Atlassian to view more details of your work and collaborate from one place.',
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view and we do not have the providers name.'
   },
+  continue: {
+    id: 'fabric.linking.continue',
+    defaultMessage: 'Continue',
+    description: 'continue'
+  },
   copy_url_to_clipboard: {
-    id: 'fabric.linking.download',
+    id: 'fabric.linking.copy_url_to_clipboard',
     defaultMessage: 'Copy link',
     description: ''
   },
@@ -130,6 +140,11 @@ export const messages = defineMessages({
     defaultMessage: 'You don’t have access to this preview. Contact the site admin if you need access.',
     description: 'Informs the user that they cannot view this content.'
   },
+  go_back: {
+    id: 'fabric.linking.go_back',
+    defaultMessage: 'Go back',
+    description: 'go back'
+  },
   invalid_permissions: {
     id: 'fabric.linking.invalid_permissions',
     defaultMessage: 'Restricted content',
@@ -335,6 +350,11 @@ export const messages = defineMessages({
     defaultMessage: 'Try another account',
     description: 'Allows the user to try an action again with a different account'
   },
+  link_safety_warning_message: {
+    id: 'fabric.linking.link_safety_warning_message',
+    defaultMessage: 'The link {unsafeLinkText} is taking you to a different site, <a>actual link here</a>',
+    description: 'Link safety check warning message'
+  },
   unlink_account: {
     id: 'fabric.linking.unlink_account',
     defaultMessage: 'Unlink Account',

package/dist/es2019/utils/index.js

@@ -28,7 +28,8 @@ export const getIconForFileType = fileMimeType => {
   }); // because we're using dynamic loading here, TS will not be able to infer the type
 
   return /*#__PURE__*/React.createElement(Icon, {
-    label: label
+    label: label,
+    testId: "document-file-format-icon"
   });
 };
 export const getLabelForFileType = fileMimeType => {

package/dist/es2019/version.json

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

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.js

@@ -66,7 +66,9 @@ export const ExpandedFrame = ({
       "data-testid": testId,
       "data-trello-do-not-use-override": testId,
       "data-is-selected": isSelected,
-      "data-is-visible": isVisible
+      "data-is-visible": isVisible,
+      "data-wrapper-type": "default",
+      "data-is-interactive": isInteractive()
     }, renderHeader(), renderContent());
   }
 };

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

@@ -137,7 +137,8 @@ export const HoverCardComponent = ({
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
       onMouseMove: setMousePosition,
-      onClick: onChildClick
+      onClick: onChildClick,
+      "data-testid": "hover-card-trigger-wrapper"
     }), children)),
     zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 

package/dist/es2019/view/InlineCard/ErroredView/index.js

@@ -34,7 +34,8 @@ export class InlineCardErroredView extends React.Component {
         spacing: "none",
         appearance: "subtle-link",
         component: IconStyledButton,
-        onClick: this.handleRetry
+        onClick: this.handleRetry,
+        role: "button"
       }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again, formattedMessage => {
         return /*#__PURE__*/React.createElement(LowercaseAppearance, null, formattedMessage);
       })));
@@ -56,7 +57,8 @@ export class InlineCardErroredView extends React.Component {
       icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
         label: "error",
         size: "small",
-        primaryColor: `var(--ds-icon-danger, ${R300})`
+        primaryColor: `var(--ds-icon-danger, ${R300})`,
+        testId: "errored-view-default-icon"
       })),
       link: url,
       title: url,

package/dist/es2019/view/InlineCard/ForbiddenView/index.js

@@ -15,7 +15,8 @@ import { LozengeWrapper, LozengeBlockWrapper } from '../IconAndTitleLayout/style
 const FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
-  primaryColor: `var(--ds-icon-danger, ${R400})`
+  primaryColor: `var(--ds-icon-danger, ${R400})`,
+  testId: "forbidden-view-fallback-icon"
 }));
 export class InlineCardForbiddenView extends React.Component {
   constructor(...args) {
@@ -73,7 +74,8 @@ export class InlineCardForbiddenView extends React.Component {
           appearance: "subtle-link",
           onClick: this.handleRetry,
           component: IconStyledButton,
-          testId: "button-connect-other-account"
+          testId: "button-connect-other-account",
+          role: "button"
         }, this.renderForbiddenAccessMessage());
       }
 
@@ -83,7 +85,8 @@ export class InlineCardForbiddenView extends React.Component {
           appearance: "subtle-link",
           onClick: this.handleRetry,
           component: IconStyledButton,
-          testId: "button-connect-other-account"
+          testId: "button-connect-other-account",
+          role: "button"
         }, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
           appearance: 'moved'
         }, this.renderForbiddenAccessMessage()))));

package/dist/es2019/view/InlineCard/IconAndTitleLayout/index.js

@@ -129,7 +129,8 @@ export class IconAndTitleLayout extends React.Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconTitleWrapper, {
       style: {
         color: titleColor
-      }
+      },
+      "data-testid": testId
     }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
       href: link,
       onClick: this.handleClick,

package/dist/es2019/view/InlineCard/ResolvedView/index.js

@@ -15,6 +15,7 @@ export class InlineCardResolvedView extends React.Component {
     }
 
     return /*#__PURE__*/React.createElement(LozengeBlockWrapper, null, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+      testId: "inline-card-resolved-view-lozenge",
       appearance: lozenge.appearance || 'default',
       isBold: lozenge.isBold
     }, lozenge.text)));

package/dist/es2019/view/LinkUrl/LinkWarningModal/hooks/use-link-warning-modal.js

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { normalizeUrl } from '@atlaskit/linking-common/url';
+export const useLinkWarningModal = () => {
+  const [unsafeLinkText, setUnsafeLinkText] = useState(null);
+  const [url, setUrl] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+  /**
+   * It checks and warns if a link text is a URL and different from an actual link destination
+   */
+
+  const checkLinkSafety = (event, href) => {
+    const linkText = event.currentTarget.innerText;
+    const anchorLinkRegex = new RegExp(/^#/im);
+    const isAnchorLink = anchorLinkRegex.test(linkText);
+
+    if (isAnchorLink) {
+      return;
+    }
+
+    const normalisedUrlFromLinkText = normalizeUrl(linkText);
+
+    if (!!normalisedUrlFromLinkText && normalisedUrlFromLinkText !== href) {
+      event.preventDefault();
+      setUnsafeLinkText(linkText);
+      href && setUrl(href);
+      setIsOpen(true);
+    }
+  };
+
+  const onClose = () => {
+    setIsOpen(false);
+    setUnsafeLinkText(null);
+    setUrl(null);
+  };
+
+  const onContinue = () => {
+    onClose();
+    url && window.location.assign(url);
+  };
+
+  return {
+    checkLinkSafety,
+    unsafeLinkText,
+    onClose,
+    onContinue,
+    isOpen,
+    url
+  };
+};

package/dist/es2019/view/LinkUrl/LinkWarningModal/index.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl-next';
+import { messages } from '../../../messages';
+
+const WarningModal = props => {
+  const {
+    isOpen,
+    unsafeLinkText,
+    url,
+    onClose,
+    onContinue,
+    intl
+  } = props;
+  const content = /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose,
+    testId: "link-with-safety-warning"
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.check_this_link))), /*#__PURE__*/React.createElement(ModalBody, null, url && unsafeLinkText && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.link_safety_warning_message, {
+    values: {
+      unsafeLinkText: unsafeLinkText,
+      a: () => /*#__PURE__*/React.createElement("a", {
+        href: url,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, url)
+    }
+  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.go_back)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: onContinue,
+    autoFocus: true
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.continue)))));
+  return intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, content);
+};
+
+export default injectIntl(WarningModal, {
+  enforceContext: false
+});

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

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
+import LinkWarningModal from './LinkWarningModal';
+
+const LinkUrl = ({
+  href,
+  children,
+  checkSafety = true,
+  onClick,
+  testId = 'link-with-safety',
+  ...props
+}) => {
+  const {
+    checkLinkSafety,
+    ...linkWarningModalProps
+  } = useLinkWarningModal();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", _extends({
+    "data-testid": testId,
+    href: href,
+    onClick: e => {
+      checkSafety && checkLinkSafety(e, href);
+      onClick && onClick(e);
+    }
+  }, props), children), checkSafety && /*#__PURE__*/React.createElement(LinkWarningModal, linkWarningModalProps));
+};
+
+export default LinkUrl;

package/dist/es2019/view/LinkUrl/types.js

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

package/dist/esm/extractors/common/icon/extractIcon.js

@@ -47,33 +47,39 @@ var extractIconByType = function extractIconByType(type, opts) {
 
     case 'atlassian:Goal':
       return opts.icon || /*#__PURE__*/React.createElement(TaskIcon, {
-        label: opts.title || 'goal'
+        label: opts.title || 'goal',
+        testId: "task-icon"
       });
 
     case 'atlassian:Project':
       return opts.icon || /*#__PURE__*/React.createElement(ProjectIcon, {
         label: opts.title || 'project',
-        size: "small"
+        size: "small",
+        testId: "project-icon"
       });
 
     case 'atlassian:SourceCodeCommit':
       return /*#__PURE__*/React.createElement(CommitIcon, {
-        label: opts.title || 'commit'
+        label: opts.title || 'commit',
+        testId: "commit-icon"
       });
 
     case 'atlassian:SourceCodePullRequest':
       return /*#__PURE__*/React.createElement(PullRequestIcon, {
-        label: opts.title || 'pullRequest'
+        label: opts.title || 'pullRequest',
+        testId: "pull-request-icon"
       });
 
     case 'atlassian:SourceCodeReference':
       return /*#__PURE__*/React.createElement(BranchIcon, {
-        label: opts.title || 'reference'
+        label: opts.title || 'reference',
+        testId: "branch-icon"
       });
 
     case 'atlassian:SourceCodeRepository':
       return /*#__PURE__*/React.createElement(RepoIcon, {
-        label: opts.title || 'repository'
+        label: opts.title || 'repository',
+        testId: "repo-icon"
       });
 
     case 'atlassian:Task':

package/dist/esm/extractors/common/icon/extractIconFromDocument.js

@@ -30,37 +30,44 @@ var documentTypeToIcon = function documentTypeToIcon(type, opts) {
   switch (type) {
     case 'schema:BlogPosting':
       return /*#__PURE__*/React.createElement(BlogIcon, {
-        label: opts.title || 'blog'
+        label: opts.title || 'blog',
+        testId: "blog-icon"
       });
 
     case 'schema:DigitalDocument':
       return /*#__PURE__*/React.createElement(FileIcon, {
-        label: opts.title || 'file'
+        label: opts.title || 'file',
+        testId: "file-icon"
       });
 
     case 'schema:TextDigitalDocument':
       return /*#__PURE__*/React.createElement(DocumentIcon, {
-        label: opts.title || 'document'
+        label: opts.title || 'document',
+        testId: "document-icon"
       });
 
     case 'schema:PresentationDigitalDocument':
       return /*#__PURE__*/React.createElement(PresentationIcon, {
-        label: opts.title || 'presentation'
+        label: opts.title || 'presentation',
+        testId: "presentation-icon"
       });
 
     case 'schema:SpreadsheetDigitalDocument':
       return /*#__PURE__*/React.createElement(SpreadsheetIcon, {
-        label: opts.title || 'spreadsheet'
+        label: opts.title || 'spreadsheet',
+        testId: "spreadsheet-icon"
       });
 
     case 'atlassian:Template':
       return /*#__PURE__*/React.createElement(DocumentFilledIcon, {
-        label: opts.title || 'template'
+        label: opts.title || 'template',
+        testId: "document-filled-icon"
       });
 
     case 'atlassian:UndefinedLink':
       return /*#__PURE__*/React.createElement(DocumentIcon, {
-        label: opts.title || 'undefinedLink'
+        label: opts.title || 'undefinedLink',
+        testId: "document-icon"
       });
   }
 };

package/dist/esm/extractors/common/icon/extractIconFromTask.js

@@ -15,6 +15,10 @@ export var extractIconFromTask = function extractIconFromTask(opts) {
   var taskType = opts.taskType,
       provider = opts.provider;
   var taskLabel = opts.title || 'task';
+  var defaultIcon = /*#__PURE__*/React.createElement(TaskIcon, {
+    label: taskLabel,
+    testId: "default-task-icon"
+  });
 
   if (provider && provider.id === JIRA_GENERATOR_ID && taskType && taskType.id) {
     var taskTypeId = taskType.id;
@@ -23,57 +27,62 @@ export var extractIconFromTask = function extractIconFromTask(opts) {
     switch (taskTypeName) {
       case JIRA_TASK:
         return /*#__PURE__*/React.createElement(JiraTaskIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-task-icon"
         });
 
       case JIRA_SUB_TASK:
         return /*#__PURE__*/React.createElement(JiraSubTaskIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-subtask-icon"
         });
 
       case JIRA_STORY:
         return /*#__PURE__*/React.createElement(JiraStoryIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-story-icon"
         });
 
       case JIRA_BUG:
         return /*#__PURE__*/React.createElement(JiraBugIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-bug-icon"
         });
 
       case JIRA_EPIC:
         return /*#__PURE__*/React.createElement(JiraEpicIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-epic-icon"
         });
 
       case JIRA_INCIDENT:
         return /*#__PURE__*/React.createElement(JiraIncidentIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-incident-icon"
         });
 
       case JIRA_SERVICE_REQUEST:
         return /*#__PURE__*/React.createElement(JiraServiceRequestIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-service-request-icon"
         });
 
       case JIRA_CHANGE:
         return /*#__PURE__*/React.createElement(JiraChangeIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-change-icon"
         });
 
       case JIRA_PROBLEM:
         return /*#__PURE__*/React.createElement(JiraProblemIcon, {
-          label: taskLabel
+          label: taskLabel,
+          testId: "jira-problem-icon"
         });
 
       case JIRA_CUSTOM_TASK_TYPE:
-        return taskType.icon || opts.icon || provider.icon || /*#__PURE__*/React.createElement(TaskIcon, {
-          label: taskLabel
-        });
+        return taskType.icon || opts.icon || provider.icon || defaultIcon;
     }
   }
 
-  return /*#__PURE__*/React.createElement(TaskIcon, {
-    label: taskLabel
-  });
+  return defaultIcon;
 };

package/dist/esm/linkUrl.js

@@ -0,0 +1 @@
+export { default } from './view/LinkUrl';