@atlaskit/smart-card 23.12.3 → 23.13.1

package/dist/esm/messages.js

@@ -40,6 +40,11 @@ export var 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 var 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 var 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 var 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/esm/utils/index.js

@@ -49,7 +49,8 @@ export var getIconForFileType = function 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 var getLabelForFileType = function getLabelForFileType(fileMimeType) {

package/dist/esm/version.json

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

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

@@ -77,7 +77,9 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       "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/esm/view/HoverCard/components/HoverCardComponent.js

@@ -148,7 +148,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
         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/esm/view/InlineCard/ErroredView/index.js

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

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

@@ -26,7 +26,8 @@ import { LozengeWrapper, LozengeBlockWrapper } from '../IconAndTitleLayout/style
 var FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
-  primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")
+  primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
+  testId: "forbidden-view-fallback-icon"
 }));
 export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
   _inherits(InlineCardForbiddenView, _React$Component);
@@ -90,7 +91,8 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
           appearance: "subtle-link",
           onClick: _this.handleRetry,
           component: IconStyledButton,
-          testId: "button-connect-other-account"
+          testId: "button-connect-other-account",
+          role: "button"
         }, _this.renderForbiddenAccessMessage());
       }
 
@@ -100,7 +102,8 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_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/esm/view/InlineCard/IconAndTitleLayout/index.js

@@ -151,7 +151,8 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_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/esm/view/InlineCard/ResolvedView/index.js

@@ -35,6 +35,7 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_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/esm/view/LinkUrl/LinkWarningModal/hooks/use-link-warning-modal.js

@@ -0,0 +1,62 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+import { normalizeUrl } from '@atlaskit/linking-common/url';
+export var useLinkWarningModal = function useLinkWarningModal() {
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      unsafeLinkText = _useState2[0],
+      setUnsafeLinkText = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      url = _useState4[0],
+      setUrl = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
+  /**
+   * It checks and warns if a link text is a URL and different from an actual link destination
+   */
+
+
+  var checkLinkSafety = function checkLinkSafety(event, href) {
+    var linkText = event.currentTarget.innerText;
+    var anchorLinkRegex = new RegExp(/^#/im);
+    var isAnchorLink = anchorLinkRegex.test(linkText);
+
+    if (isAnchorLink) {
+      return;
+    }
+
+    var normalisedUrlFromLinkText = normalizeUrl(linkText);
+
+    if (!!normalisedUrlFromLinkText && normalisedUrlFromLinkText !== href) {
+      event.preventDefault();
+      setUnsafeLinkText(linkText);
+      href && setUrl(href);
+      setIsOpen(true);
+    }
+  };
+
+  var onClose = function onClose() {
+    setIsOpen(false);
+    setUnsafeLinkText(null);
+    setUrl(null);
+  };
+
+  var onContinue = function onContinue() {
+    onClose();
+    url && window.location.assign(url);
+  };
+
+  return {
+    checkLinkSafety: checkLinkSafety,
+    unsafeLinkText: unsafeLinkText,
+    onClose: onClose,
+    onContinue: onContinue,
+    isOpen: isOpen,
+    url: url
+  };
+};

package/dist/esm/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';
+
+var WarningModal = function WarningModal(props) {
+  var isOpen = props.isOpen,
+      unsafeLinkText = props.unsafeLinkText,
+      url = props.url,
+      onClose = props.onClose,
+      onContinue = props.onContinue,
+      intl = props.intl;
+  var 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: function a() {
+        return /*#__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/esm/view/LinkUrl/index.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
+    _excluded2 = ["checkLinkSafety"];
+import React from 'react';
+import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
+import LinkWarningModal from './LinkWarningModal';
+
+var LinkUrl = function LinkUrl(_ref) {
+  var href = _ref.href,
+      children = _ref.children,
+      _ref$checkSafety = _ref.checkSafety,
+      checkSafety = _ref$checkSafety === void 0 ? true : _ref$checkSafety,
+      _onClick = _ref.onClick,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'link-with-safety' : _ref$testId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useLinkWarningModal = useLinkWarningModal(),
+      checkLinkSafety = _useLinkWarningModal.checkLinkSafety,
+      linkWarningModalProps = _objectWithoutProperties(_useLinkWarningModal, _excluded2);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", _extends({
+    "data-testid": testId,
+    href: href,
+    onClick: function onClick(e) {
+      checkSafety && checkLinkSafety(e, href);
+      _onClick && _onClick(e);
+    }
+  }, props), children), checkSafety && /*#__PURE__*/React.createElement(LinkWarningModal, linkWarningModalProps));
+};
+
+export default LinkUrl;

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

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

package/dist/types/extractors/common/__mocks__/withIntl.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const withIntl: (child: React.ReactNode) => JSX.Element;

package/dist/types/linkUrl.d.ts

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

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { MessageDescriptor } from 'react-intl-next';
 export declare type RequestAccessMessageKey = 'click_to_join' | 'click_to_join_description' | 'forbidden_description' | 'request_access' | 'request_access_description' | 'request_access_pending' | 'request_access_pending_description' | 'request_denied_description';
-export declare type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'copy_url_to_clipboard' | 'could_not_load_link' | 'download' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'loading' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_link_in_a_new_tab' | 'preview' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
+export declare type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'continue' | 'copy_url_to_clipboard' | 'could_not_load_link' | 'download' | 'go_back' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'check_this_link' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'loading' | 'link_safety_warning_message' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_link_in_a_new_tab' | 'preview' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
 declare type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types/view/LinkUrl/LinkWarningModal/hooks/use-link-warning-modal.d.ts

@@ -0,0 +1,9 @@
+import { MouseEvent } from 'react';
+export declare const useLinkWarningModal: () => {
+    checkLinkSafety: (event: MouseEvent, href: string | undefined) => void;
+    unsafeLinkText: string | null;
+    onClose: () => void;
+    onContinue: () => void;
+    isOpen: boolean;
+    url: string | null;
+};

package/dist/types/view/LinkUrl/LinkWarningModal/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
+interface LinkWarningModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onContinue: () => void;
+    unsafeLinkText: string | null;
+    url: string | null;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<LinkWarningModalProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<LinkWarningModalProps & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types/view/LinkUrl/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LinkUrlProps } from './types';
+declare const LinkUrl: React.FC<LinkUrlProps>;
+export default LinkUrl;

package/dist/types/view/LinkUrl/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface LinkUrlProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Determines if we want to perform a link safety check. True by default.
+     */
+    checkSafety?: boolean;
+    testId?: string;
+}

package/link-url/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/smart-card/link-url",
+  "main": "../dist/cjs/linkUrl.js",
+  "module": "../dist/esm/linkUrl.js",
+  "module:es2019": "../dist/es2019/linkUrl.js",
+  "sideEffects": false,
+  "types": "../dist/types/linkUrl.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/linkUrl.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.12.3",
+  "version": "23.13.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.19.0",
+    "@atlaskit/linking-common": "^1.20.0",
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/lozenge": "^11.3.0",
     "@atlaskit/media-common": "^2.18.0",
@@ -91,13 +91,11 @@
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
-    "@types/enzyme": "^3.1.15",
     "@types/lorem-ipsum": "^1.0.2",
     "@types/react": "^16.8.0",
     "@types/react-loadable": "^5.4.1",
     "abortcontroller-polyfill": "^1.1.9",
     "brace": "^0.11.1",
-    "enzyme": "^3.10.0",
     "jest-emotion": "^10.0.32",
     "jest-extended": "^0.11.2",
     "jsdom": "^16.2.2",
@@ -120,6 +118,7 @@
     "./types": "./src/types.ts",
     "./hooks": "./src/hooks.ts",
     "./hover-card": "./src/hoverCard.ts",
+    "./link-url": "./src/linkUrl.ts",
     ".": "./src/index.ts"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",

package/dist/types/extractors/common/__mocks__/render.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const render: (child: React.ReactNode) => JSX.Element;