@atlaskit/smart-card 23.7.2 → 23.7.3

package/dist/cjs/i18n/vi.js

@@ -27,6 +27,7 @@ var _default = {
   'fabric.linking.connect_link_account_card_view_description': 'Để hiển thị bản xem trước của đường liên kết này, hãy kết nối tài khoản {context} của bạn.',
   'fabric.linking.connect_link_account_card_view_name': 'Kết nối tài khoản {context} của bạn',
   'fabric.linking.connect_to': 'Kết nối với {name}',
+  'fabric.linking.connect_unauthorised_account_action': 'Kết nối với {context}',
   'fabric.linking.couldnt_load_link': 'Chúng tôi không thể tải đường liên kết này vì một lý do không xác định.',
   'fabric.linking.create_on_absolute': 'Đã tạo vào {context}',
   'fabric.linking.create_on_relative': 'Đã tạo {context}',
@@ -39,14 +40,19 @@ var _default = {
   'fabric.linking.invalid_permissions': 'Đường liên kết bị hạn chế',
   'fabric.linking.invalid_permissions_description': 'Bạn cần có quyền truy cập hoặc thử một tài khoản khác để xem bản xem trước này.',
   'fabric.linking.join_to_view': 'Tham gia {context} để xem vấn đề này',
+  'fabric.linking.learn_more_about_smart_links_security': 'Tìm hiểu thêm về các quyền và bảo mật liên kết thông minh',
   'fabric.linking.loading': 'Đang tải...',
   'fabric.linking.modified_on_absolute': 'Đã cập nhật trên {context}',
   'fabric.linking.modified_on_relative': 'Đã cập nhật {context}',
   'fabric.linking.more_actions': 'Hành động khác',
   'fabric.linking.not_found_description': 'Chúng tôi không thể tìm thấy đường liên kết này. Hãy kiểm tra url và thử chỉnh sửa hoặc dán lại.',
   'fabric.linking.not_found_title': 'Ôi! Chúng tôi không thể tìm thấy liên kết này!',
+  'fabric.linking.open_link_in_a_new_tab': 'Mở liên kết trong tab mới',
   'fabric.linking.pending_request': 'Đang chờ xử lý yêu cầu quyền truy cập của bạn',
-  'fabric.linking.preview': 'Xem trước',
+  'fabric.linking.preview': 'Chế độ xem toàn màn hình',
+  'fabric.linking.preview_close': 'Đóng bản xem trước',
+  'fabric.linking.preview_max_size': 'Xem toàn màn hình',
+  'fabric.linking.preview_min_size': 'Đóng toàn màn hình',
   'fabric.linking.priority_blocker': 'Trở ngại',
   'fabric.linking.priority_critical': 'Rất cao',
   'fabric.linking.priority_high': 'Cao',

package/dist/cjs/i18n/zh.js

@@ -27,6 +27,7 @@ var _default = {
   'fabric.linking.connect_link_account_card_view_description': '如要显示该链接的预览，请连接您的 {context} 帐户。',
   'fabric.linking.connect_link_account_card_view_name': '连接您的 {context} 帐户',
   'fabric.linking.connect_to': '连接到 {name}',
+  'fabric.linking.connect_unauthorised_account_action': '连接到 {context}',
   'fabric.linking.couldnt_load_link': '由于未知原因，无法加载此链接。',
   'fabric.linking.create_on_absolute': '创建时间：{context}',
   'fabric.linking.create_on_relative': '创建时间：{context}',
@@ -45,8 +46,12 @@ var _default = {
   'fabric.linking.more_actions': '更多操作',
   'fabric.linking.not_found_description': '未找到此链接。请检查 URL，然后尝试编辑或重新粘贴。',
   'fabric.linking.not_found_title': '噢。找不到此链接！',
+  'fabric.linking.open_link_in_a_new_tab': '在新选项卡中打开链接',
   'fabric.linking.pending_request': '您的访问请求正等待处理',
-  'fabric.linking.preview': '预览',
+  'fabric.linking.preview': '全屏视图',
+  'fabric.linking.preview_close': '关闭预览',
+  'fabric.linking.preview_max_size': '全屏查看',
+  'fabric.linking.preview_min_size': '关闭全屏',
   'fabric.linking.priority_blocker': '紧急',
   'fabric.linking.priority_critical': '严重',
   'fabric.linking.priority_high': '高',

package/dist/cjs/i18n/zh_TW.js

@@ -27,6 +27,7 @@ var _default = {
   'fabric.linking.connect_link_account_card_view_description': '若要顯示此連結的預覽，請連接您的 {context} 帳戶。',
   'fabric.linking.connect_link_account_card_view_name': '連結 {context} 帳戶',
   'fabric.linking.connect_to': '連結至 {name}',
+  'fabric.linking.connect_unauthorised_account_action': '連結至 {context}',
   'fabric.linking.couldnt_load_link': '基於不明原因，我們無法載入此連結。',
   'fabric.linking.create_on_absolute': '於 {context} 建立',
   'fabric.linking.create_on_relative': '建立時間：{context}',
@@ -45,8 +46,12 @@ var _default = {
   'fabric.linking.more_actions': '更多動作',
   'fabric.linking.not_found_description': '我們找不到此連結。請檢查 URL，然後試著編輯或再次貼上。',
   'fabric.linking.not_found_title': '糟糕，我們找不到此連結！',
+  'fabric.linking.open_link_in_a_new_tab': '在新分頁中開啟連結',
   'fabric.linking.pending_request': '您的存取要求擱置中',
-  'fabric.linking.preview': '預覽',
+  'fabric.linking.preview': '全螢幕檢視',
+  'fabric.linking.preview_close': '關閉預覽',
+  'fabric.linking.preview_max_size': '全螢幕檢視',
+  'fabric.linking.preview_min_size': '關閉全螢幕',
   'fabric.linking.priority_blocker': '受阻',
   'fabric.linking.priority_critical': '嚴重',
   'fabric.linking.priority_high': '高',

package/dist/cjs/version.json

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

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

@@ -71,17 +71,11 @@ var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         onRetry();
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMessage", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderRightSide", function () {
       var _this$props = _this.props,
           onRetry = _this$props.onRetry,
-          url = _this$props.url,
           message = _this$props.message;
-
-      var link = /*#__PURE__*/_react.default.createElement(_styled.LinkAppearance, null, url);
-
-      var errorMessage = /*#__PURE__*/_react.default.createElement(_styled.NoLinkAppearance, null, message);
-
-      return !onRetry ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, " - ", errorMessage) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, " - ", errorMessage, ",\xA0", /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      return !onRetry ? message : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message, ', ', /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
         spacing: "none",
         appearance: "subtle-link",
         component: _styled.IconStyledButton,
@@ -105,8 +99,6 @@ var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
           icon = _this$props2.icon;
       return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
-        link: url,
-        onClick: onClick,
         isSelected: isSelected
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
         icon: icon || /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_error.default, {
@@ -114,7 +106,10 @@ var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
           size: "small",
           primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300)
         })),
-        title: this.renderMessage()
+        link: url,
+        title: url,
+        onClick: onClick,
+        rightSide: this.renderRightSide()
       }));
     }
   }]);

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

@@ -101,23 +101,18 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react.default.createElement(_styled.LowercaseAppearance, null, formattedMessage);
       }));
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMessage", function () {
-      var _this$props4, _this$props4$requestA;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderRightSide", function () {
+      var _this$props3, _this$props3$requestA;
 
-      var _this$props3 = _this.props,
-          url = _this$props3.url,
-          onAuthorise = _this$props3.onAuthorise;
-
-      var link = /*#__PURE__*/_react.default.createElement(_styled.LinkAppearance, null, url);
-
-      var hasRequestAccessContextMessage = (_this$props4 = _this.props) === null || _this$props4 === void 0 ? void 0 : (_this$props4$requestA = _this$props4.requestAccessContext) === null || _this$props4$requestA === void 0 ? void 0 : _this$props4$requestA.callToActionMessageKey;
-      return !onAuthorise && !hasRequestAccessContextMessage ? link : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, ' - ', /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      var onAuthorise = _this.props.onAuthorise;
+      var hasRequestAccessContextMessage = (_this$props3 = _this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$requestA = _this$props3.requestAccessContext) === null || _this$props3$requestA === void 0 ? void 0 : _this$props3$requestA.callToActionMessageKey;
+      return onAuthorise || hasRequestAccessContextMessage ? /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
         spacing: "none",
         appearance: "subtle-link",
         onClick: _this.handleRetry,
         component: _styled.IconStyledButton,
         testId: "button-connect-other-account"
-      }, _this.renderForbiddenAccessMessage()));
+      }, _this.renderForbiddenAccessMessage()) : null;
     });
     return _this;
   }
@@ -125,21 +120,22 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(InlineCardForbiddenView, [{
     key: "render",
     value: function render() {
-      var _this$props5 = this.props,
-          url = _this$props5.url,
-          icon = _this$props5.icon,
-          onClick = _this$props5.onClick,
-          isSelected = _this$props5.isSelected,
-          _this$props5$testId = _this$props5.testId,
-          testId = _this$props5$testId === void 0 ? 'inline-card-forbidden-view' : _this$props5$testId;
+      var _this$props4 = this.props,
+          url = _this$props4.url,
+          icon = _this$props4.icon,
+          onClick = _this$props4.onClick,
+          isSelected = _this$props4.isSelected,
+          _this$props4$testId = _this$props4.testId,
+          testId = _this$props4$testId === void 0 ? 'inline-card-forbidden-view' : _this$props4$testId;
       return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
-        link: url,
-        onClick: onClick,
         isSelected: isSelected
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
         icon: icon ? icon : FallbackForbiddenIcon,
-        title: this.renderMessage(),
+        link: url,
+        title: url,
+        onClick: onClick,
+        rightSide: this.renderRightSide(),
         titleColor: (0, _tokens.token)('color.text.subtle', _colors.N500)
       }));
     }

package/dist/cjs/view/InlineCard/Frame/index.js

@@ -23,7 +23,6 @@ var Frame = function Frame(props) {
       onClick = props.onClick,
       link = props.link,
       withoutBackground = props.withoutBackground,
-      withoutHover = props.withoutHover,
       testId = props.testId,
       className = props.className;
   var handleClick = (0, _react.useCallback)(function (event) {
@@ -44,14 +43,15 @@ var Frame = function Frame(props) {
       onClick(event);
     }
   }, [onClick]);
-  var isInteractive = Boolean(onClick); // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
+  var isInteractive = Boolean(onClick); // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
+
+  var Wrapper = link || onClick ? _styled.WrapperAnchor : _styled.WrapperSpan; // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
   //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
 
-  return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
+  return /*#__PURE__*/_react.default.createElement(Wrapper, {
     theme: (0, _components.useGlobalTheme)(),
     href: link,
     withoutBackground: withoutBackground,
-    withoutHover: withoutHover,
     isSelected: isSelected,
     isInteractive: isInteractive,
     tabIndex: isInteractive ? 0 : undefined,

package/dist/cjs/view/InlineCard/Frame/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = void 0;
+exports.WrapperSpan = exports.WrapperAnchor = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,9 +19,7 @@ var _components = require("@atlaskit/theme/components");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _styled2 = require("../IconAndTitleLayout/styled");
-
-var _templateObject;
+var _templateObject, _templateObject2;
 
 var BACKGROUND_COLOR_DARK = '#262B31';
 var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat((0, _tokens.token)('color.border.selected', _colors.B100), ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
@@ -30,13 +28,13 @@ var isInteractive = function isInteractive(_ref) {
   var isInteractive = _ref.isInteractive;
 
   if (isInteractive) {
-    return "\n      cursor: pointer;\n      :hover {\n        background-color: ".concat((0, _components.themed)({
+    return "\n      :hover {\n        background-color: ".concat((0, _components.themed)({
       light: (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20),
       dark: (0, _tokens.token)('color.background.neutral.subtle.hovered', BACKGROUND_COLOR_DARK)
-    }), ";\n        text-decoration: none;\n      }\n      :active {\n        background-color: ").concat((0, _components.themed)({
+    }), ";\n      }\n      :active {\n        background-color: ").concat((0, _components.themed)({
       light: (0, _tokens.token)('color.background.selected', _colors.B50),
       dark: (0, _tokens.token)('color.background.selected', BACKGROUND_COLOR_DARK)
-    }), ";\n        text-decoration: none;\n      }\n      :focus {\n        ").concat(selected, "\n        text-decoration: none;\n      }\n    ");
+    }), ";\n      }\n      :focus {\n        ").concat(selected, "\n      }\n    ");
   } else {
     return '';
   }
@@ -51,11 +49,6 @@ var isSelected = function isSelected(_ref2) {
     return 'user-select: text';
   }
 };
-
-var withoutHover = function withoutHover(_ref3) {
-  var withoutHover = _ref3.withoutHover;
-  return withoutHover ? "\n    &:hover {\n      text-decoration: none;\n    }\n  " : '';
-};
 /*
   Inline smart cards should have the following layout:
   ------------------------------------
@@ -70,30 +63,25 @@ var withoutHover = function withoutHover(_ref3) {
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 
 
-var Wrapper = _styled.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ", "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", "\n  ", "\n  ", ";\n  ", "\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  &:hover span.", " {\n    text-decoration: ", ";\n  }\n"])), function (props) {
-  return props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '';
-}, (0, _constants.borderRadius)(), (0, _components.themed)({
-  light: (0, _tokens.token)('color.link', _colors.B400),
-  dark: (0, _tokens.token)('color.link', '#4794FF')
-}), function (props) {
-  return props.withoutBackground ? '' : (0, _components.themed)({
+var baseWrapperStyle = function baseWrapperStyle(props) {
+  return "\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ".concat(props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '', "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ").concat((0, _constants.borderRadius)(), "px;\n  color: ").concat((0, _components.themed)({
+    light: (0, _tokens.token)('color.link', _colors.B400),
+    dark: (0, _tokens.token)('color.link', '#4794FF')
+  })(props), ";\n  background-color: ").concat(props.withoutBackground ? '' : (0, _components.themed)({
     light: (0, _tokens.token)('elevation.surface.raised', 'white'),
     dark: (0, _tokens.token)('elevation.surface.raised', BACKGROUND_COLOR_DARK)
-  });
-}, function (props) {
-  return props.withoutBackground ? '' : (0, _components.themed)({
+  })(props), ";\n  ").concat(props.withoutBackground ? '' : (0, _components.themed)({
     light: "box-shadow: ".concat((0, _tokens.token)('elevation.shadow.raised', "0 1px 1px ".concat(_colors.N50A, ", 0 0 1px 1px ").concat(_colors.N40A)), ";"),
     dark: "box-shadow: ".concat((0, _tokens.token)('elevation.shadow.raised', "0 1px 1px ".concat(_colors.DN50A, ", 0 0 1px 1px ").concat(_colors.DN40A)), ";")
-  });
-}, function (props) {
-  return isInteractive(props);
-}, function (props) {
-  return isSelected(props);
-}, function (props) {
-  return withoutHover(props);
-}, _styled2.TitleWrapperClassName, function (_ref4) {
-  var withoutHover = _ref4.withoutHover;
-  return withoutHover ? 'none' : 'underline';
-});
+  })(props), "\n  ").concat(isSelected(props), ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n");
+};
+
+var WrapperAnchor = _styled.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), baseWrapperStyle, isInteractive);
+
+exports.WrapperAnchor = WrapperAnchor;
+WrapperAnchor.displayName = 'WrapperAnchor';
+
+var WrapperSpan = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), baseWrapperStyle);
 
-exports.Wrapper = Wrapper;
+exports.WrapperSpan = WrapperSpan;
+WrapperSpan.displayName = 'WrapperSpan';

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

@@ -11,12 +11,16 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
@@ -27,6 +31,8 @@ var _styled = require("./styled");
 
 var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 
+var _styled2 = require("../styled");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -37,8 +43,38 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(IconAndTitleLayout);
 
   function IconAndTitleLayout() {
+    var _this;
+
     (0, _classCallCheck2.default)(this, IconAndTitleLayout);
-    return _super.apply(this, arguments);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (event) {
+      var onClick = _this.props.onClick;
+
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyPress", function (event) {
+      var onClick = _this.props.onClick;
+
+      if (event.key !== ' ' && event.key !== 'Enter') {
+        return;
+      }
+
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+    return _this;
   }
 
   (0, _createClass2.default)(IconAndTitleLayout, [{
@@ -120,18 +156,27 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
           title = _this$props2.title,
           titleColor = _this$props2.titleColor,
           titleTextColor = _this$props2.titleTextColor,
+          link = _this$props2.link,
+          rightSide = _this$props2.rightSide,
           _this$props2$testId = _this$props2.testId,
           testId = _this$props2$testId === void 0 ? 'inline-card-icon-and-title' : _this$props2$testId;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconTitleWrapper, {
-        style: {
-          color: titleColor
-        }
-      }, /*#__PURE__*/_react.default.createElement(_styled.IconPositionWrapper, null, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, {
+
+      var titlePart = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconPositionWrapper, null, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, {
         style: {
           color: titleTextColor
         },
         className: _styled.TitleWrapperClassName
-      }, title)));
+      }, title));
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconTitleWrapper, {
+        style: {
+          color: titleColor
+        }
+      }, link ? /*#__PURE__*/_react.default.createElement(_styled2.LinkAppearance, {
+        href: link,
+        onClick: this.handleClick,
+        onKeyPress: this.handleKeyPress
+      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_styled2.NoLinkAppearance, null, ' - ', rightSide) : null));
     }
   }]);
   return IconAndTitleLayout;

package/dist/cjs/view/InlineCard/ResolvingView/index.js

@@ -53,13 +53,11 @@ var InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
           inlinePreloaderStyle = _this$props.inlinePreloaderStyle,
           _this$props$testId = _this$props.testId,
           testId = _this$props$testId === void 0 ? 'inline-card-resolving-view' : _this$props$testId,
-          titleTextColor = _this$props.titleTextColor,
-          withoutHover = _this$props.withoutHover;
+          titleTextColor = _this$props.titleTextColor;
 
       if (inlinePreloaderStyle === 'on-right-without-skeleton') {
         return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
           withoutBackground: true,
-          withoutHover: withoutHover,
           testId: testId,
           onClick: onClick,
           isSelected: isSelected
@@ -72,9 +70,9 @@ var InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
           testId: testId,
           onClick: onClick,
-          isSelected: isSelected,
-          withoutHover: withoutHover
+          isSelected: isSelected
         }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+          link: url,
           title: url,
           titleTextColor: titleTextColor
         }, /*#__PURE__*/_react.default.createElement(_styled.SpinnerWrapper, {

package/dist/cjs/view/InlineCard/UnauthorisedView/index.js

@@ -78,15 +78,11 @@ var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
       event.stopPropagation();
       return onAuthorise();
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMessage", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderRightSide", function () {
       var _this$props = _this.props,
-          context = _this$props.context,
           onAuthorise = _this$props.onAuthorise,
-          url = _this$props.url;
-
-      var link = /*#__PURE__*/_react.default.createElement(_styled.LinkAppearance, null, url);
-
-      return !onAuthorise ? link : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, ' - ', /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+          context = _this$props.context;
+      return onAuthorise ? /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
         spacing: "none",
         appearance: "subtle-link",
         component: _styled.IconStyledButton,
@@ -96,7 +92,7 @@ var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
         values: {
           context: context
         }
-      }))));
+      }))) : undefined;
     });
     return _this;
   }
@@ -116,12 +112,13 @@ var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
 
       var inlineCardUnauthenticatedView = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
-        link: url,
-        onClick: onClick,
         isSelected: isSelected
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
         icon: icon ? icon : FallbackUnauthorizedIcon,
-        title: this.renderMessage(),
+        title: url,
+        link: url,
+        rightSide: this.renderRightSide(),
+        onClick: onClick,
         titleColor: (0, _tokens.token)('color.text.subtle', _colors.N500)
       }));
 

package/dist/cjs/view/InlineCard/styled.js

@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var LINK_COLOR_DARK = '#4794FF'; // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
 
-var IconStyledButton = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-align: initial !important;\n  display: inline !important;\n\n  &:hover {\n    /* Remove the text-decoration to match other inline card hover states */\n    text-decoration: none !important;\n  }\n\n  > span {\n    display: inline;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])));
+var IconStyledButton = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-align: initial !important;\n  display: inline !important;\n\n  > span {\n    display: inline;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])));
 
 exports.IconStyledButton = IconStyledButton;
 
@@ -37,7 +37,7 @@ var LowercaseAppearance = _styled.default.span(_templateObject3 || (_templateObj
 
 exports.LowercaseAppearance = LowercaseAppearance;
 
-var LinkAppearance = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _components.themed)({
+var LinkAppearance = _styled.default.a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _components.themed)({
   light: (0, _tokens.token)('color.link', _colors.B400),
   dark: (0, _tokens.token)('color.link', LINK_COLOR_DARK)
 }));

package/dist/es2019/i18n/cs.js

@@ -20,6 +20,7 @@ export default {
   'fabric.linking.connect_link_account_card_view_description': 'Pokud chcete zobrazit náhled tohoto odkazu, připojte svůj účet {context}.',
   'fabric.linking.connect_link_account_card_view_name': 'Připojte svůj účet {context}',
   'fabric.linking.connect_to': 'Připojit k {name}',
+  'fabric.linking.connect_unauthorised_account_action': 'Připojit k: {context}',
   'fabric.linking.couldnt_load_link': 'Tento odkaz se z neznámého důvodu nepodařilo načíst.',
   'fabric.linking.create_on_absolute': 'Vytvořeno: {context}',
   'fabric.linking.create_on_relative': 'Vytvořeno: {context}',
@@ -38,8 +39,12 @@ export default {
   'fabric.linking.more_actions': 'Další akce',
   'fabric.linking.not_found_description': 'Odkaz se nepodařilo najít. Zkontrolujte adresu URL a zkuste ji upravit nebo vložit znovu.',
   'fabric.linking.not_found_title': 'Jejda. Tento odkaz se nepodařilo najít.',
+  'fabric.linking.open_link_in_a_new_tab': 'Otevřít odkaz na nové kartě',
   'fabric.linking.pending_request': 'Vaše žádost o přístup čeká na vyřízení.',
-  'fabric.linking.preview': 'Náhled',
+  'fabric.linking.preview': 'Zobrazení na celou obrazovku',
+  'fabric.linking.preview_close': 'Zavřít náhled',
+  'fabric.linking.preview_max_size': 'Zobrazit na celé obrazovce',
+  'fabric.linking.preview_min_size': 'Zavřít zobrazení na celé obrazovce',
   'fabric.linking.priority_blocker': 'Blokující',
   'fabric.linking.priority_critical': 'Kritická',
   'fabric.linking.priority_high': 'Vysoká',

package/dist/es2019/i18n/da.js

@@ -20,6 +20,7 @@ export default {
   'fabric.linking.connect_link_account_card_view_description': 'Tilknyt din {context}-konto, hvis du vil se en forhåndsvisning af dette link',
   'fabric.linking.connect_link_account_card_view_name': 'Forbind din {context}-konto',
   'fabric.linking.connect_to': 'Forbind til {name}',
+  'fabric.linking.connect_unauthorised_account_action': 'Forbind til {context}',
   'fabric.linking.couldnt_load_link': 'Af en ukendt årsag kunne vi ikke indlæse dette link.',
   'fabric.linking.create_on_absolute': 'Oprettet {context}',
   'fabric.linking.create_on_relative': 'Oprettet: {context}',
@@ -32,14 +33,19 @@ export default {
   'fabric.linking.invalid_permissions': 'Begrænset link',
   'fabric.linking.invalid_permissions_description': 'Anmod om adgang, eller prøv med en anden konto for at se denne forhåndsvisning.',
   'fabric.linking.join_to_view': 'Deltag i {context} for at se denne sag',
+  'fabric.linking.learn_more_about_smart_links_security': 'Få mere at vide om Smart Link-sikkerhed og -tilladelser.',
   'fabric.linking.loading': 'Indlæser ...',
   'fabric.linking.modified_on_absolute': 'Opdateret {context}',
   'fabric.linking.modified_on_relative': 'Opdateret: {context}',
   'fabric.linking.more_actions': 'Flere handlinger',
   'fabric.linking.not_found_description': 'Vi kunne ikke finde linket. Kontrollér og rediger URL-adressen, eller indsæt den igen.',
   'fabric.linking.not_found_title': 'Ups. Vi kan ikke finde dette link!',
+  'fabric.linking.open_link_in_a_new_tab': 'Åbn link i en ny fane',
   'fabric.linking.pending_request': 'Din anmodning om adgang afventer behandling',
-  'fabric.linking.preview': 'Vis',
+  'fabric.linking.preview': 'Fuldskærmsvisning',
+  'fabric.linking.preview_close': 'Luk forhåndsvisning',
+  'fabric.linking.preview_max_size': 'Vis fuld skærm',
+  'fabric.linking.preview_min_size': 'Luk fuld skærm',
   'fabric.linking.priority_blocker': 'Blokering',
   'fabric.linking.priority_critical': 'Kritisk',
   'fabric.linking.priority_high': 'Høj',

package/dist/es2019/i18n/de.js

@@ -20,6 +20,7 @@ export default {
   'fabric.linking.connect_link_account_card_view_description': 'Verbinden Sie Ihr {context}-Konto, um eine Vorschau dieses Links anzuzeigen.',
   'fabric.linking.connect_link_account_card_view_name': 'Verbinden Sie Ihr {context}-Konto',
   'fabric.linking.connect_to': 'Mit {name} verbinden',
+  'fabric.linking.connect_unauthorised_account_action': 'Mit {context} verbinden',
   'fabric.linking.couldnt_load_link': 'Dieser Link konnte aus unbekannten Gründen nicht geladen werden.',
   'fabric.linking.create_on_absolute': 'Erstellt am: {context}',
   'fabric.linking.create_on_relative': 'Erstellt: {context}',
@@ -38,8 +39,12 @@ export default {
   'fabric.linking.more_actions': 'Weitere Aktionen',
   'fabric.linking.not_found_description': 'Der Link konnte nicht gefunden werden. Überprüfen Sie die URL und versuchen Sie die Bearbeitung oder das Einfügen erneut.',
   'fabric.linking.not_found_title': 'Oh! Diese Verknüpfung konnte nicht gefunden werden!',
+  'fabric.linking.open_link_in_a_new_tab': 'Link in neuer Registerkarte öffnen',
   'fabric.linking.pending_request': 'Ihre Zugriffsanfrage ist ausstehend.',
-  'fabric.linking.preview': 'Vorschau',
+  'fabric.linking.preview': 'Vollbildansicht',
+  'fabric.linking.preview_close': 'Vorschau beenden',
+  'fabric.linking.preview_max_size': 'Vollbildansicht anzeigen',
+  'fabric.linking.preview_min_size': 'Vollbildansicht beenden',
   'fabric.linking.priority_blocker': 'Blocker',
   'fabric.linking.priority_critical': 'Kritisch',
   'fabric.linking.priority_high': 'Hoch',

package/dist/es2019/i18n/en.js

@@ -20,6 +20,8 @@ export default {
   'fabric.linking.connect_link_account_card_view_description': 'To show a preview of this link, connect your {context} account.',
   'fabric.linking.connect_link_account_card_view_name': 'Connect your {context} account',
   'fabric.linking.connect_to': 'Connect to {name}',
+  'fabric.linking.connect_unauthorized_account_action': 'Connect to {context}',
+  'fabric.linking.connect_unauthorized_account_description': 'Connect to Atlassian to view more details from your work and collaboration from one place.',
   'fabric.linking.couldnt_load_link': "We couldn't load this link for an unknown reason.",
   'fabric.linking.create_on_absolute': 'Created on {context}',
   'fabric.linking.create_on_relative': 'Created {context}',
@@ -32,14 +34,19 @@ export default {
   'fabric.linking.invalid_permissions': 'Restricted link',
   'fabric.linking.invalid_permissions_description': "You'll need to request access or try a different account to view this preview.",
   'fabric.linking.join_to_view': 'Join {context} to view this issue',
+  'fabric.linking.learn_more_about_smart_links_security': 'Learn more about smart link security and permissions.',
   'fabric.linking.loading': 'Loading...',
   'fabric.linking.modified_on_absolute': 'Updated on {context}',
   'fabric.linking.modified_on_relative': 'Updated {context}',
   'fabric.linking.more_actions': 'More actions',
   'fabric.linking.not_found_description': "We couldn't find the link. Check the url and try editing or paste again.",
   'fabric.linking.not_found_title': "Uh oh. We can't find this link!",
+  'fabric.linking.open_link_in_a_new_tab': 'Open link in a new tab',
   'fabric.linking.pending_request': 'Your access request is pending',
-  'fabric.linking.preview': 'Preview',
+  'fabric.linking.preview': 'Full screen view',
+  'fabric.linking.preview_close': 'Close preview',
+  'fabric.linking.preview_max_size': 'View full screen',
+  'fabric.linking.preview_min_size': 'Close full screen',
   'fabric.linking.priority_blocker': 'Blocker',
   'fabric.linking.priority_critical': 'Critical',
   'fabric.linking.priority_high': 'High',