@atlaskit/smart-card 23.11.2 → 23.11.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 23.11.3
+
+### Patch Changes
+
+- [`08ef315c46d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08ef315c46d) - [ux] Add a copy url button to hover cards.
+
 ## 23.11.2
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -93,6 +93,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Connect to Atlassian to view more details from your work and collaboration 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.'
   },
+  copy_url_to_clipboard: {
+    id: 'fabric.linking.download',
+    defaultMessage: 'Copy link',
+    description: ''
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",

package/dist/cjs/version.json

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

package/dist/cjs/view/HoverCard/components/HoverCardContent.js

@@ -7,12 +7,18 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hoverCardClassName = exports.getOpenAction = exports.default = void 0;
+exports.hoverCardClassName = exports.getOpenAction = exports.getCopyAction = exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _react = require("@emotion/react");
 
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 
+var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
+
 var _extractors = require("@atlaskit/linking-common/extractors");
 
 var _react2 = _interopRequireWildcard(require("react"));
@@ -74,6 +80,47 @@ var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
 
 exports.getOpenAction = getOpenAction;
 
+var getCopyAction = function getCopyAction(url) {
+  return {
+    name: _constants.ActionName.CustomAction,
+    icon: (0, _react.jsx)(_copy.default, {
+      label: "copy url",
+      size: "medium"
+    }),
+    iconPosition: 'before',
+    onClick: function () {
+      var _onClick = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return navigator.clipboard.writeText(url);
+
+              case 2:
+                return _context.abrupt("return", _context.sent);
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function onClick() {
+        return _onClick.apply(this, arguments);
+      }
+
+      return onClick;
+    }(),
+    tooltipMessage: (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.copy_url_to_clipboard),
+    testId: 'hover-card-copy-button'
+  };
+};
+
+exports.getCopyAction = getCopyAction;
+
 var HoverCardContent = function HoverCardContent(_ref) {
   var _cardState$details;
 
@@ -107,7 +154,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     });
   }, [cardState.status, analytics.ui, id]);
   var titleActions = (0, _react2.useMemo)(function () {
-    return [getOpenAction(url, analytics, onActionClick)];
+    return [getCopyAction(url), getOpenAction(url, analytics, onActionClick)];
   }, [url, analytics, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var types = data ? (0, _extractors.extractType)(data) : undefined;

package/dist/es2019/messages.js

@@ -85,6 +85,11 @@ export const messages = defineMessages({
     defaultMessage: 'Connect to Atlassian to view more details from your work and collaboration 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.'
   },
+  copy_url_to_clipboard: {
+    id: 'fabric.linking.download',
+    defaultMessage: 'Copy link',
+    description: ''
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",

package/dist/es2019/version.json

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

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { extractType } from '@atlaskit/linking-common/extractors';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
@@ -36,6 +37,17 @@ export const getOpenAction = (url, analytics, onActionClick) => ({
   tooltipMessage: jsx(FormattedMessage, messages.open_link_in_a_new_tab),
   testId: 'hover-card-open-button'
 });
+export const getCopyAction = url => ({
+  name: ActionName.CustomAction,
+  icon: jsx(CopyIcon, {
+    label: "copy url",
+    size: "medium"
+  }),
+  iconPosition: 'before',
+  onClick: async () => await navigator.clipboard.writeText(url),
+  tooltipMessage: jsx(FormattedMessage, messages.copy_url_to_clipboard),
+  testId: 'hover-card-copy-button'
+});
 
 const HoverCardContent = ({
   id = '',
@@ -66,7 +78,7 @@ const HoverCardContent = ({
       actionSubjectId: 'titleGoToLink'
     });
   }, [cardState.status, analytics.ui, id]);
-  const titleActions = useMemo(() => [getOpenAction(url, analytics, onActionClick)], [url, analytics, onActionClick]);
+  const titleActions = useMemo(() => [getCopyAction(url), getOpenAction(url, analytics, onActionClick)], [url, analytics, onActionClick]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const types = data ? extractType(data) : undefined;
   const {

package/dist/esm/messages.js

@@ -85,6 +85,11 @@ export var messages = defineMessages({
     defaultMessage: 'Connect to Atlassian to view more details from your work and collaboration 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.'
   },
+  copy_url_to_clipboard: {
+    id: 'fabric.linking.download',
+    defaultMessage: 'Copy link',
+    description: ''
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",

package/dist/esm/version.json

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

package/dist/esm/view/HoverCard/components/HoverCardContent.js

@@ -1,6 +1,10 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { extractType } from '@atlaskit/linking-common/extractors';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
@@ -38,6 +42,44 @@ export var getOpenAction = function getOpenAction(url, analytics, onActionClick)
     testId: 'hover-card-open-button'
   };
 };
+export var getCopyAction = function getCopyAction(url) {
+  return {
+    name: ActionName.CustomAction,
+    icon: jsx(CopyIcon, {
+      label: "copy url",
+      size: "medium"
+    }),
+    iconPosition: 'before',
+    onClick: function () {
+      var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return navigator.clipboard.writeText(url);
+
+              case 2:
+                return _context.abrupt("return", _context.sent);
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function onClick() {
+        return _onClick.apply(this, arguments);
+      }
+
+      return onClick;
+    }(),
+    tooltipMessage: jsx(FormattedMessage, messages.copy_url_to_clipboard),
+    testId: 'hover-card-copy-button'
+  };
+};
 
 var HoverCardContent = function HoverCardContent(_ref) {
   var _cardState$details;
@@ -72,7 +114,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     });
   }, [cardState.status, analytics.ui, id]);
   var titleActions = useMemo(function () {
-    return [getOpenAction(url, analytics, onActionClick)];
+    return [getCopyAction(url), getOpenAction(url, analytics, onActionClick)];
   }, [url, analytics, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var types = data ? extractType(data) : undefined;

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' | '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' | '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;
 declare type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types/view/HoverCard/components/HoverCardContent.d.ts

@@ -4,5 +4,6 @@ import { ActionItem } from '../../FlexibleCard/components/blocks/types';
 import { HoverCardContentProps } from '../types';
 export declare const hoverCardClassName = "smart-links-hover-preview";
 export declare const getOpenAction: (url: string, analytics: AnalyticsFacade, onActionClick?: ((actionId: string) => void) | undefined) => ActionItem;
+export declare const getCopyAction: (url: string) => ActionItem;
 declare const HoverCardContent: React.FC<HoverCardContentProps>;
 export default HoverCardContent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.11.2",
+  "version": "23.11.3",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"