@atlaskit/smart-card 26.52.2 → 26.52.4

package/dist/es2019/view/FlexibleCard/components/actions/action/action-stack-item/index.js

@@ -0,0 +1,83 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { Box, Inline, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
+import Tooltip from '@atlaskit/tooltip';
+import React, { useCallback } from 'react';
+import { getPrimitivesInlineSpaceBySize } from '../../../utils';
+import ActionIcon from '../action-icon';
+const buttonStyles = xcss({
+  all: 'unset',
+  padding: 'space.050',
+  width: '100%',
+  ':focus:not(:focus-visible)': {
+    outline: 'none'
+  },
+  ':focus': {
+    outlineColor: 'color.border.focused',
+    // xcss outlineOffset does not support space.negative.025
+    // @ts-ignore-next-line TS2322: Type "var(--ds-space-negative-025)" is not assignable to type
+    outlineOffset: "var(--ds-space-negative-025, -2px)",
+    outlineStyle: 'solid',
+    outlineWidth: 'border.width.outline'
+  },
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  }
+});
+const contentStyles = xcss({
+  color: 'color.text',
+  // Replace with font token once it becomes stable (currently alpha)
+  // font: 'font.body.small',
+  fontSize: '12px',
+  fontStyle: 'normal',
+  fontWeight: '400',
+  lineHeight: '20px'
+});
+const ActionStackItem = ({
+  content,
+  icon: iconOption,
+  isDisabled,
+  isLoading,
+  onClick: onClickCallback,
+  size,
+  space: spaceOption,
+  testId,
+  tooltipMessage,
+  xcss
+}) => {
+  const space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : getPrimitivesInlineSpaceBySize(size);
+  const onClick = useCallback(() => {
+    if (!isDisabled && !isLoading && onClickCallback) {
+      onClickCallback();
+    }
+  }, [isDisabled, isLoading, onClickCallback]);
+  const icon = iconOption && isLoading ? /*#__PURE__*/React.createElement(ActionIcon, {
+    icon: /*#__PURE__*/React.createElement(Spinner, {
+      testId: `${testId}-loading`
+    }),
+    showBackground: true,
+    size: size
+  }) : iconOption;
+
+  // Replace Box with Pressable once it becomes stable (currently beta)
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: tooltipMessage || content,
+    hideTooltipOnMouseDown: true
+  }, tooltipProps => /*#__PURE__*/React.createElement(Box, _extends({
+    as: "button",
+    xcss: [buttonStyles, xcss]
+  }, tooltipProps, {
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    grow: "fill",
+    space: space,
+    testId: testId
+  }, icon, /*#__PURE__*/React.createElement(Box, {
+    xcss: contentStyles
+  }, content))));
+};
+export default ActionStackItem;

package/dist/es2019/view/FlexibleCard/components/actions/action/action-stack-item/types.js

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

package/dist/es2019/view/FlexibleCard/components/actions/action/index.js

@@ -1,7 +1,8 @@
 /** @jsx jsx */
-import React from 'react';
+
 import { jsx } from '@emotion/react';
 import { SmartLinkSize } from '../../../../../constants';
+import ActionStackItem from './action-stack-item';
 import ActionButton from './action-button';
 import ActionDropdownItem from './action-dropdown-item';
 import ActionIcon from './action-icon';
@@ -10,11 +11,9 @@ import ActionIcon from './action-icon';
  * A base action that can be triggered with an on click.
  * @internal
  * @param {ActionProps} ActionProps - The props necessary for the Action.
- * @see DeleteAction
- * @see EditAction
- * @see CustomAction
  */
 const Action = ({
+  as,
   appearance = 'subtle',
   content,
   isLoading = false,
@@ -23,7 +22,9 @@ const Action = ({
   testId = 'smart-action',
   icon,
   iconPosition = 'before',
+  spaceInline,
   tooltipMessage,
+  xcss,
   asDropDownItem,
   overrideCss,
   isDisabled
@@ -31,37 +32,53 @@ const Action = ({
   if (!onClick) {
     return null;
   }
+  const isStackItem = as === 'stack-item';
+  const isDropdownItem = as === 'dropdown-item' || asDropDownItem;
   const actionIcon = icon && jsx(ActionIcon, {
     isDisabled: isDisabled,
     icon: icon,
     size: size,
+    showBackground: isStackItem,
     testId: testId
   });
   const iconBefore = icon && iconPosition === 'before' ? actionIcon : undefined;
   const iconAfter = icon && iconPosition === 'after' ? actionIcon : undefined;
-  if (asDropDownItem) {
-    return jsx(ActionDropdownItem, {
+  if (isStackItem) {
+    return jsx(ActionStackItem, {
       content: content,
-      iconAfter: iconAfter,
-      iconBefore: iconBefore,
+      icon: actionIcon,
+      space: spaceInline,
+      isDisabled: isDisabled,
       isLoading: isLoading,
       onClick: onClick,
-      testId: testId
+      size: size,
+      testId: testId,
+      tooltipMessage: tooltipMessage || content,
+      xcss: xcss
     });
-  } else {
-    return jsx(ActionButton, {
-      appearance: appearance,
+  }
+  if (isDropdownItem) {
+    return jsx(ActionDropdownItem, {
       content: content,
       iconAfter: iconAfter,
       iconBefore: iconBefore,
       isLoading: isLoading,
       onClick: onClick,
-      overrideCss: overrideCss,
-      size: size,
-      testId: testId,
-      tooltipMessage: tooltipMessage || content,
-      isDisabled: isDisabled
+      testId: testId
     });
   }
+  return jsx(ActionButton, {
+    appearance: appearance,
+    content: content,
+    iconAfter: iconAfter,
+    iconBefore: iconBefore,
+    isLoading: isLoading,
+    onClick: onClick,
+    overrideCss: overrideCss,
+    size: size,
+    testId: testId,
+    tooltipMessage: tooltipMessage || content,
+    isDisabled: isDisabled
+  });
 };
 export default Action;

package/dist/es2019/view/FlexibleCard/components/actions/delete-action/index.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Action from '../action';
+import { messages } from '../../../../../messages';
+import { FormattedMessage } from 'react-intl-next';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+const DeleteAction = props => /*#__PURE__*/React.createElement(Action, _extends({
+  content: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete),
+  icon: /*#__PURE__*/React.createElement(CrossIcon, {
+    label: "Delete"
+  }),
+  testId: "smart-action-delete-action",
+  tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
+}, props));
+export default DeleteAction;

package/dist/es2019/view/FlexibleCard/components/actions/delete-action/types.js

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

package/dist/es2019/view/FlexibleCard/components/actions/edit-action/index.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Action from '../action';
+import { messages } from '../../../../../messages';
+import { FormattedMessage } from 'react-intl-next';
+import EditIcon from '@atlaskit/icon/glyph/edit';
+const EditAction = props => /*#__PURE__*/React.createElement(Action, _extends({
+  content: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit),
+  icon: /*#__PURE__*/React.createElement(EditIcon, {
+    label: "Edit"
+  }),
+  testId: "smart-action-edit-action",
+  tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
+}, props));
+export default EditAction;

package/dist/es2019/view/FlexibleCard/components/actions/edit-action/types.js

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

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

@@ -3,19 +3,8 @@ import { createDataAction, createUIAction } from './utils';
 export { default as FollowAction } from './follow-action';
 export { default as PreviewAction } from './preview-action';
 export { default as DownloadAction } from './download-action';
-
-/**
- * Creates a DeleteAction component. Accepts default ActionProps, but defaults
- * the icon to a cross icon.
- * @see Action
- */
-export const DeleteAction = createUIAction(ActionName.DeleteAction);
-/**
- * Creates a EditAction component. Accepts default ActionProps, but defaults
- * the icon to an edit (pencil) icon.
- * @see Action
- */
-export const EditAction = createUIAction(ActionName.EditAction);
+export { default as EditAction } from './edit-action';
+export { default as DeleteAction } from './delete-action';
 
 /**
  * Creates a ViewAction component. Accepts default ViewActionProps, and defaults

package/dist/es2019/view/FlexibleCard/components/actions/preview-action/index.js

@@ -8,6 +8,7 @@ import { useFlexibleUiAnalyticsContext, useFlexibleUiContext } from '../../../..
 import useInvokeClientAction from '../../../../../state/hooks/use-invoke-client-action';
 import { openEmbedModalWithFlexibleUiIcon } from '../../utils';
 import Action from '../action';
+import PreviewIcon from './preview-icon';
 const PreviewAction = ({
   onClick: onClickCallback,
   ...props
@@ -39,14 +40,17 @@ const PreviewAction = ({
       onClickCallback();
     }
   }, [analytics, data, invoke, onClickCallback]);
+  const isStackItem = props.as === 'stack-item';
+  const Icon = isStackItem ? PreviewIcon : VidFullScreenOnIcon;
+  const tooltipMessage = isStackItem ? messages.preview_description : messages.preview_improved;
   return data ? /*#__PURE__*/React.createElement(Action, _extends({
     content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved),
-    icon: /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
+    icon: /*#__PURE__*/React.createElement(Icon, {
       label: "Open preview"
     }),
     onClick: onClick,
     testId: "smart-action-preview-action",
-    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved)
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage)
   }, data, props)) : null;
 };
 export default PreviewAction;

package/dist/es2019/view/FlexibleCard/components/actions/preview-action/preview-icon/index.js

@@ -0,0 +1,10 @@
+import EditorExpandIcon from '@atlaskit/icon/glyph/editor/expand';
+import { Box, xcss } from '@atlaskit/primitives';
+import React from 'react';
+const iconStyles = xcss({
+  transform: 'rotate(-45deg)'
+});
+const PreviewIcon = props => /*#__PURE__*/React.createElement(Box, {
+  xcss: iconStyles
+}, /*#__PURE__*/React.createElement(EditorExpandIcon, props));
+export default PreviewIcon;

package/dist/es2019/view/FlexibleCard/components/actions/utils.js

@@ -5,8 +5,6 @@ import React, { useContext } from 'react';
 import Action from './action';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../messages';
-import CrossIcon from '@atlaskit/icon/glyph/cross';
-import EditIcon from '@atlaskit/icon/glyph/edit';
 import ViewAction from './action/view-action';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 const actionMappings = {
@@ -14,28 +12,6 @@ const actionMappings = {
     component: Action,
     props: {}
   },
-  [ActionName.DeleteAction]: {
-    component: Action,
-    props: {
-      testId: 'smart-action-delete-action',
-      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete),
-      icon: /*#__PURE__*/React.createElement(CrossIcon, {
-        label: "Delete"
-      }),
-      tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
-    }
-  },
-  [ActionName.EditAction]: {
-    component: Action,
-    props: {
-      testId: 'smart-action-edit-action',
-      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit),
-      icon: /*#__PURE__*/React.createElement(EditIcon, {
-        label: "Edit"
-      }),
-      tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
-    }
-  },
   [ActionName.ViewAction]: {
     component: ViewAction,
     props: {

package/dist/es2019/view/FlexibleCard/components/blocks/action-block/index.js

@@ -0,0 +1,61 @@
+import { Stack, xcss } from '@atlaskit/primitives';
+import React, { useMemo } from 'react';
+import { SmartLinkSize } from '../../../../../constants';
+import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
+import * as Actions from '../../actions';
+import { getPrimitivesPaddingSpaceBySize } from '../../utils';
+// We have to find a better way to ignore container padding
+// This has become more and more of a common use case.
+const ignoreContainerPaddingStyles = xcss({
+  marginLeft: 'calc(var(--container-gap-left) * -1)',
+  marginRight: 'calc(var(--container-gap-right) * -1)'
+});
+const ActionBlock = ({
+  blockRef,
+  onClick: onClickCallback,
+  size,
+  sort,
+  spaceInline,
+  testId = 'smart-block-action'
+}) => {
+  const context = useFlexibleUiContext();
+  const ui = useFlexibleUiOptionContext();
+  const padding = !(ui !== null && ui !== void 0 && ui.hidePadding) ? getPrimitivesPaddingSpaceBySize((ui === null || ui === void 0 ? void 0 : ui.size) || SmartLinkSize.Medium) : undefined;
+  const actions = useMemo(() => {
+    if (!(context !== null && context !== void 0 && context.actions)) {
+      return;
+    }
+    const arr = Object.keys(context.actions);
+    if (sort) {
+      arr.sort(sort);
+    }
+    return arr.map(name => {
+      const Action = Actions[name];
+      return Action ? /*#__PURE__*/React.createElement(Action, {
+        as: "stack-item",
+        spaceInline: spaceInline,
+        key: name,
+        onClick: () => onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback(name),
+        size: size
+        // Remove url once ViewAction is retired.
+        // This seems to be a typescript workaround
+        // because ViewAction marks it as required,
+        // which does not reflect actual implementation as the url
+        // came from data context and not all actions require url.
+        // https://product-fabric.atlassian.net/browse/EDM-9547
+        ,
+        url: "",
+        xcss: xcss({
+          paddingInline: padding
+        })
+      }) : null;
+    });
+  }, [context === null || context === void 0 ? void 0 : context.actions, onClickCallback, padding, size, sort, spaceInline]);
+  return actions ? /*#__PURE__*/React.createElement(Stack, {
+    grow: "fill",
+    xcss: ignoreContainerPaddingStyles,
+    ref: blockRef,
+    testId: testId
+  }, actions) : null;
+};
+export default ActionBlock;

package/dist/es2019/view/FlexibleCard/components/blocks/action-block/types.js

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

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

@@ -8,4 +8,5 @@ export { default as CustomBlock } from './block';
 // Internal components to be used within @atlaskit/smart-card only.
 export { default as InternalFooterBlock } from './footer-block/resolved';
 export { default as RelatedUrlsBlock } from './related-urls-block';
-export { default as AISummaryBlock } from './ai-summary-block';
+export { default as AISummaryBlock } from './ai-summary-block';
+export { default as ActionBlock } from './action-block';

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -60,6 +60,12 @@ const getDirectionStyles = direction => {
       });
   }
 };
+
+/**
+ * Get gap size between elements inside a block
+ * Equivalent version for DS primitives space token is getPrimitivesInlineSpaceBySize()
+ * at view/FlexibleCard/components/utils.tsx
+ */
 export const getGapSize = size => {
   switch (size) {
     case SmartLinkSize.XLarge:

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

@@ -9,11 +9,11 @@ import HoverCardControl from './hover-card-control';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
 import { N40 } from '@atlaskit/theme/colors';
 import { di } from 'react-magnetic-di';
-const elevationStyles = css`
-  border: 1px solid ${`var(--ds-border, ${N40})`};
-  border-radius: ${"var(--ds-border-radius-200, 8px)"};
-  margin: ${"var(--ds-space-025, 2px)"};
-`;
+const elevationStyles = css({
+  border: `1px solid ${`var(--ds-border, ${N40})`}`,
+  borderRadius: "var(--ds-border-radius-200, 8px)",
+  margin: "var(--ds-space-025, 2px)"
+});
 const getGap = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
@@ -27,6 +27,12 @@ const getGap = size => {
       return '.25rem';
   }
 };
+
+/**
+ * Get container padding based on smart link size
+ * Equivalent version for DS primitives space token is getPrimitivesPaddingSpaceBySize()
+ * at view/FlexibleCard/components/utils.tsx
+ */
 const getPadding = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
@@ -40,15 +46,12 @@ const getPadding = size => {
       return '.5rem';
   }
 };
-const clickableContainerStyles = css`
-  // Position any interactive elements at the top of the z-index stack.
-  a,
-  button,
-  .has-action {
-    position: relative;
-    z-index: 1;
+const clickableContainerStyles = css({
+  'a, button, .has-action': {
+    position: 'relative',
+    zIndex: 1
   }
-`;
+});
 const getContainerPaddingStyles = (size, hidePadding, childrenOptions) => {
   const padding = hidePadding ? '0rem' : getPadding(size);
   const gap = getGap(size);
@@ -56,17 +59,13 @@ const getContainerPaddingStyles = (size, hidePadding, childrenOptions) => {
     previewOnLeft,
     previewOnRight
   } = childrenOptions;
-  return css`
-    // Set variables for PreviewBlock to use.
-    --container-padding: ${padding};
-    --container-gap-left: ${previewOnLeft ? gap : padding};
-    --container-gap-right: ${previewOnRight ? gap : padding};
-    --preview-block-width: 30%;
-
-    padding: ${padding};
-    ${previewOnLeft ? `padding-left: calc(var(--preview-block-width) + ${gap});` : ''}
-    ${previewOnRight ? `padding-right: calc(var(--preview-block-width) + ${gap});` : ''}
-  `;
+  return css({
+    '--container-padding': padding,
+    '--container-gap-left': previewOnLeft ? gap : padding,
+    '--container-gap-right': previewOnRight ? gap : padding,
+    '--preview-block-width': '30%',
+    padding: padding
+  }, previewOnLeft ? `padding-left: calc(var(--preview-block-width) + ${gap});` : '', previewOnRight ? `padding-right: calc(var(--preview-block-width) + ${gap});` : '');
 };
 const getChildrenOptions = (children, context) => {
   let options = {};

package/dist/es2019/view/FlexibleCard/components/utils.js

@@ -30,14 +30,14 @@ export const getFormattedMessageAsString = (intl, message, context) => {
     context
   }) : '';
 };
-const getIconDimensionStyles = value => css`
-  height: ${value};
-  min-height: ${value};
-  max-height: ${value};
-  width: ${value};
-  min-width: ${value};
-  max-width: ${value};
-`;
+const getIconDimensionStyles = value => css({
+  height: value,
+  minHeight: value,
+  maxHeight: value,
+  width: value,
+  minWidth: value,
+  maxWidth: value
+});
 export const getIconSizeStyles = width => {
   const sizeStyles = getIconDimensionStyles(width);
   return css`
@@ -80,28 +80,28 @@ export const getLinkLineHeight = size => {
 export const getLinkSizeStyles = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
-      return css`
-        font-size: 1.25rem;
-        font-weight: 400;
-        letter-spacing: -0.008em;
-        line-height: ${getLinkLineHeight(size)};
-      `;
+      return css({
+        fontSize: '1.25rem',
+        fontWeight: 400,
+        letterSpacing: '-0.008em',
+        lineHeight: getLinkLineHeight(size)
+      });
     case SmartLinkSize.Large:
     case SmartLinkSize.Medium:
-      return css`
-        font-size: 0.875rem;
-        font-weight: 400;
-        letter-spacing: -0.003em;
-        line-height: ${getLinkLineHeight(size)};
-      `;
+      return css({
+        fontSize: '0.875rem',
+        fontWeight: 400,
+        letterSpacing: '-0.003em',
+        lineHeight: getLinkLineHeight(size)
+      });
     case SmartLinkSize.Small:
     default:
-      return css`
-        font-size: 0.75rem;
-        font-weight: 400;
-        letter-spacing: 0em;
-        line-height: ${getLinkLineHeight(size)};
-      `;
+      return css({
+        fontSize: '0.75rem',
+        fontWeight: 400,
+        letterSpacing: '0em',
+        lineHeight: getLinkLineHeight(size)
+      });
   }
 };
 export const getMaxLineHeight = size => {
@@ -126,18 +126,53 @@ export const getMaxLines = (value, defaultValue, max, min) => {
   }
   return value;
 };
-export const getTruncateStyles = (maxLines, lineHeight = '1rem', wordBreak = 'break-word') => css`
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: ${wordBreak};
-    -webkit-line-clamp: ${maxLines};
-    -webkit-box-orient: vertical;
-    // Fallback options
-    @supports not (-webkit-line-clamp: 1) {
-      max-height: calc(${maxLines} * ${lineHeight});
-    }
-  `;
+
+/**
+ * A space between element based on smart link size
+ * To replace blocks/utils.tsz getGapSize() with space token for primitives
+ */
+export const getPrimitivesInlineSpaceBySize = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return 'space.250';
+    case SmartLinkSize.Large:
+      return 'space.200';
+    case SmartLinkSize.Medium:
+      return 'space.100';
+    case SmartLinkSize.Small:
+    default:
+      return 'space.050';
+  }
+};
+
+/**
+ * Get container padding based on smart link size
+ * To replace container/index.tsx getPadding() with space token for primitives
+ */
+export const getPrimitivesPaddingSpaceBySize = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return 'space.300';
+    case SmartLinkSize.Large:
+      return 'space.250';
+    case SmartLinkSize.Medium:
+      return 'space.200';
+    case SmartLinkSize.Small:
+    default:
+      return 'space.100';
+  }
+};
+export const getTruncateStyles = (maxLines, lineHeight = '1rem', wordBreak = 'break-word') => css({
+  display: '-webkit-box',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  wordBreak: wordBreak,
+  WebkitLineClamp: maxLines,
+  WebkitBoxOrient: 'vertical',
+  '@supports not (-webkit-line-clamp: 1)': {
+    maxHeight: `calc(${maxLines} * ${lineHeight})`
+  }
+});
 export const hasWhiteSpace = str => {
   return str.search(/\s/) >= 0;
 };

package/dist/es2019/view/HoverCard/components/views/resolved/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ActionName, CardDisplay, ElementName, SmartLinkPosition, SmartLinkSize, SmartLinkDirection } from '../../../../../constants';
-import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock, AISummaryBlock, CustomBlock } from '../../../../FlexibleCard/components/blocks';
+import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock, AISummaryBlock, CustomBlock, ActionBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { getSimulatedBetterMetadata } from '../../../utils';
@@ -184,6 +184,8 @@ const HoverCardResolvedView = ({
     actions: footerActions,
     size: SmartLinkSize.Large,
     overrideCss: footerBlockCss
+  }), getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign') && /*#__PURE__*/React.createElement(ActionBlock, {
+    spaceInline: "space.150"
   }));
 };
 export default HoverCardResolvedView;

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

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.52.2",
+  packageVersion: "26.52.4",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/extractors/flexible/actions/index.js

@@ -5,7 +5,7 @@ import { extractPreviewAction } from './extract-preview-action';
 import extractFollowAction from './extract-follow-action';
 var extractActions = function extractActions(response, data, actionOptions, id) {
   var _action;
-  var action = (_action = {}, _defineProperty(_action, ActionName.PreviewAction, extractPreviewAction(response, actionOptions)), _defineProperty(_action, ActionName.DownloadAction, extractDownloadAction(data, actionOptions)), _defineProperty(_action, ActionName.FollowAction, extractFollowAction(response, actionOptions, id)), _action);
+  var action = (_action = {}, _defineProperty(_action, ActionName.DownloadAction, extractDownloadAction(data, actionOptions)), _defineProperty(_action, ActionName.FollowAction, extractFollowAction(response, actionOptions, id)), _defineProperty(_action, ActionName.PreviewAction, extractPreviewAction(response, actionOptions)), _action);
   return Object.values(action).some(function (value) {
     return Boolean(value);
   }) ? action : undefined;