@atlaskit/smart-card 24.1.3 → 24.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 24.2.0
+
+### Minor Changes
+
+- [`ef5f28bfbcb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ef5f28bfbcb) - [ux] Support to hide the full screen view button in hover previews was added. A new prop 'hideHoverCardPreviewButton' was added to FlexibleUiOptions which allows for not showing the button in the hover preview shown on flexui cards. A new prop was also added to standlone hover card called 'hidePreviewButton' which allows for removing the same button when directly consuming hover card.
+
 ## 24.1.3
 
 ### Patch Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/container/index.js

@@ -147,6 +147,8 @@ var Container = function Container(_ref3) {
     hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
     _ref3$hideElevation = _ref3.hideElevation,
     hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
+    _ref3$hideHoverCardPr = _ref3.hideHoverCardPreviewButton,
+    hideHoverCardPreviewButton = _ref3$hideHoverCardPr === void 0 ? false : _ref3$hideHoverCardPr,
     _ref3$hidePadding = _ref3.hidePadding,
     hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
     _ref3$showHoverPrevie = _ref3.showHoverPreview,
@@ -178,7 +180,8 @@ var Container = function Container(_ref3) {
     return (0, _react2.jsx)(_HoverCard.HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
       canOpen: hoverCardCanOpen,
-      closeOnChildClick: true
+      closeOnChildClick: true,
+      hidePreviewButton: hideHoverCardPreviewButton
     }, containerContent);
   }
   return containerContent;

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

@@ -29,7 +29,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     _ref$canOpen = _ref.canOpen,
     canOpen = _ref$canOpen === void 0 ? true : _ref$canOpen,
     _ref$closeOnChildClic = _ref.closeOnChildClick,
-    closeOnChildClick = _ref$closeOnChildClic === void 0 ? false : _ref$closeOnChildClic;
+    closeOnChildClick = _ref$closeOnChildClic === void 0 ? false : _ref$closeOnChildClic,
+    _ref$hidePreviewButto = _ref.hidePreviewButton,
+    hidePreviewButton = _ref$hidePreviewButto === void 0 ? false : _ref$hidePreviewButto;
   var delay = 300;
   var _React$useState = _react2.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -108,6 +110,11 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     analyticsHandler: analyticsHandler,
     origin: 'smartLinkPreviewHoverCard'
   });
+  var filteredActions = (0, _react2.useMemo)(function () {
+    return hidePreviewButton ? linkActions.filter(function (action) {
+      return action.id !== 'preview-content';
+    }) : linkActions;
+  }, [hidePreviewButton, linkActions]);
   var onActionClick = (0, _react2.useCallback)(function (actionId) {
     if (actionId === 'preview-content') {
       hideCard();
@@ -128,14 +135,14 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
       analytics: analytics,
-      cardActions: linkActions,
+      cardActions: filteredActions,
       cardState: linkState,
       onActionClick: onActionClick,
       onResolve: update,
       renderers: renderers,
       url: url
     });
-  }, [analytics, initHideCard, initShowCard, linkActions, linkState, onActionClick, renderers, url]);
+  }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, url]);
   var trigger = (0, _react2.useCallback)(function (triggerProps) {
     return (0, _react.jsx)("span", {
       ref: parentSpan

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

@@ -16,7 +16,8 @@ var flexibleUiOptions = {
   size: _constants.SmartLinkSize.Medium,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   theme: _constants.SmartLinkTheme.Black,
-  hidePadding: true
+  hidePadding: true,
+  hideHoverCardPreviewButton: false
 };
 exports.flexibleUiOptions = flexibleUiOptions;
 var CARD_WIDTH_REM = 24;

package/dist/es2019/version.json

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

package/dist/es2019/view/FlexibleCard/components/container/index.js

@@ -175,6 +175,7 @@ const Container = ({
   clickableContainer = false,
   hideBackground = false,
   hideElevation = false,
+  hideHoverCardPreviewButton = false,
   hidePadding = false,
   showHoverPreview = false,
   onClick,
@@ -197,7 +198,8 @@ const Container = ({
     return jsx(HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
       canOpen: hoverCardCanOpen,
-      closeOnChildClick: true
+      closeOnChildClick: true,
+      hidePreviewButton: hideHoverCardPreviewButton
     }, containerContent);
   }
   return containerContent;

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import Popup from '@atlaskit/popup';
 import { jsx } from '@emotion/react';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkActions';
 import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
@@ -15,7 +15,8 @@ export const HoverCardComponent = ({
   analyticsHandler,
   analytics,
   canOpen = true,
-  closeOnChildClick = false
+  closeOnChildClick = false,
+  hidePreviewButton = false
 }) => {
   const delay = 300;
   const [isOpen, setIsOpen] = React.useState(false);
@@ -91,6 +92,9 @@ export const HoverCardComponent = ({
     analyticsHandler,
     origin: 'smartLinkPreviewHoverCard'
   });
+  const filteredActions = useMemo(() => {
+    return hidePreviewButton ? linkActions.filter(action => action.id !== 'preview-content') : linkActions;
+  }, [hidePreviewButton, linkActions]);
   const onActionClick = useCallback(actionId => {
     if (actionId === 'preview-content') {
       hideCard();
@@ -111,13 +115,13 @@ export const HoverCardComponent = ({
     onMouseEnter: initShowCard,
     onMouseLeave: initHideCard,
     analytics: analytics,
-    cardActions: linkActions,
+    cardActions: filteredActions,
     cardState: linkState,
     onActionClick: onActionClick,
     onResolve: update,
     renderers: renderers,
     url: url
-  }), [analytics, initHideCard, initShowCard, linkActions, linkState, onActionClick, renderers, url]);
+  }), [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, url]);
   const trigger = useCallback(triggerProps => jsx("span", {
     ref: parentSpan
   }, jsx("span", _extends({}, triggerProps, {

package/dist/es2019/view/HoverCard/styled.js

@@ -7,7 +7,8 @@ export const flexibleUiOptions = {
   size: SmartLinkSize.Medium,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   theme: SmartLinkTheme.Black,
-  hidePadding: true
+  hidePadding: true,
+  hideHoverCardPreviewButton: false
 };
 export const CARD_WIDTH_REM = 24;
 // gap between mouse cursor and hover card

package/dist/esm/version.json

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

package/dist/esm/view/FlexibleCard/components/container/index.js

@@ -137,6 +137,8 @@ var Container = function Container(_ref3) {
     hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
     _ref3$hideElevation = _ref3.hideElevation,
     hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
+    _ref3$hideHoverCardPr = _ref3.hideHoverCardPreviewButton,
+    hideHoverCardPreviewButton = _ref3$hideHoverCardPr === void 0 ? false : _ref3$hideHoverCardPr,
     _ref3$hidePadding = _ref3.hidePadding,
     hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
     _ref3$showHoverPrevie = _ref3.showHoverPreview,
@@ -168,7 +170,8 @@ var Container = function Container(_ref3) {
     return jsx(HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
       canOpen: hoverCardCanOpen,
-      closeOnChildClick: true
+      closeOnChildClick: true,
+      hidePreviewButton: hideHoverCardPreviewButton
     }, containerContent);
   }
   return containerContent;

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

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import Popup from '@atlaskit/popup';
 import { jsx } from '@emotion/react';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkActions';
 import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
@@ -18,7 +18,9 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     _ref$canOpen = _ref.canOpen,
     canOpen = _ref$canOpen === void 0 ? true : _ref$canOpen,
     _ref$closeOnChildClic = _ref.closeOnChildClick,
-    closeOnChildClick = _ref$closeOnChildClic === void 0 ? false : _ref$closeOnChildClic;
+    closeOnChildClick = _ref$closeOnChildClic === void 0 ? false : _ref$closeOnChildClic,
+    _ref$hidePreviewButto = _ref.hidePreviewButton,
+    hidePreviewButton = _ref$hidePreviewButto === void 0 ? false : _ref$hidePreviewButto;
   var delay = 300;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -97,6 +99,11 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     analyticsHandler: analyticsHandler,
     origin: 'smartLinkPreviewHoverCard'
   });
+  var filteredActions = useMemo(function () {
+    return hidePreviewButton ? linkActions.filter(function (action) {
+      return action.id !== 'preview-content';
+    }) : linkActions;
+  }, [hidePreviewButton, linkActions]);
   var onActionClick = useCallback(function (actionId) {
     if (actionId === 'preview-content') {
       hideCard();
@@ -117,14 +124,14 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
       analytics: analytics,
-      cardActions: linkActions,
+      cardActions: filteredActions,
       cardState: linkState,
       onActionClick: onActionClick,
       onResolve: update,
       renderers: renderers,
       url: url
     });
-  }, [analytics, initHideCard, initShowCard, linkActions, linkState, onActionClick, renderers, url]);
+  }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, url]);
   var trigger = useCallback(function (triggerProps) {
     return jsx("span", {
       ref: parentSpan

package/dist/esm/view/HoverCard/styled.js

@@ -9,7 +9,8 @@ export var flexibleUiOptions = {
   size: SmartLinkSize.Medium,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   theme: SmartLinkTheme.Black,
-  hidePadding: true
+  hidePadding: true,
+  hideHoverCardPreviewButton: false
 };
 export var CARD_WIDTH_REM = 24;
 // gap between mouse cursor and hover card

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

@@ -104,6 +104,11 @@ export declare type FlexibleUiOptions = {
      * Can be Black or Link (default URL blue)
      */
     theme?: SmartLinkTheme;
+    /**
+     * Determines whether to hide hover preview's full screen view.
+     * Only applies if showHoverPreview from FlexibleCardProps is true
+     */
+    hideHoverCardPreviewButton?: boolean;
 };
 /**
  * Retry options used if Smart Link resolves to an errored state.

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { HoverCardProps } from './types';
-export declare const HoverCard: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").PropsWithChildren<HoverCardProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "key" | "id" | "analyticsContext" | "onAuthorize" | "canOpen" | "closeOnChildClick"> & import("react").RefAttributes<any>>;
+export declare const HoverCard: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").PropsWithChildren<HoverCardProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "key" | "id" | "analyticsContext" | "onAuthorize" | "canOpen" | "closeOnChildClick" | "hidePreviewButton"> & import("react").RefAttributes<any>>;

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

@@ -34,6 +34,10 @@ export interface HoverCardProps extends WithAnalyticsEventsProps {
      * clicked.
      */
     closeOnChildClick?: boolean;
+    /**
+     * Determines if the hover card should display the "Full Screen View" button.
+     */
+    hidePreviewButton?: boolean;
 }
 export interface HoverCardComponentProps extends HoverCardProps {
     analyticsHandler: AnalyticsHandler;

package/package.json

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

package/report.api.md

@@ -540,6 +540,7 @@ type FlexibleUiOptions = {
   hideBackground?: boolean;
   size?: SmartLinkSize;
   theme?: SmartLinkTheme;
+  hideHoverCardPreviewButton?: boolean;
 };
 
 // @public

package/tmp/api-report-tmp.d.ts

@@ -413,6 +413,7 @@ type FlexibleUiOptions = {
     hideBackground?: boolean;
     size?: SmartLinkSize;
     theme?: SmartLinkTheme;
+    hideHoverCardPreviewButton?: boolean;
 };
 
 // @public