@atlaskit/smart-card 26.23.2 → 26.24.0

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

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import InviteTeamIcon from '@atlaskit/icon/glyph/invite-team';
+import React, { useContext } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../../../../../messages';
+import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import ServerAction from '../action/server-action';
+import UnfollowIcon from './unfollow-icon';
+const FollowAction = props => {
+  const context = useContext(FlexibleUiContext);
+  if (!context || !context.followAction) {
+    return null;
+  }
+  const {
+    value,
+    ...data
+  } = context.followAction;
+  const message = value ? messages.follow : messages.unfollow;
+  const icon = value ? /*#__PURE__*/React.createElement(InviteTeamIcon, {
+    label: "Follow"
+  }) : /*#__PURE__*/React.createElement(UnfollowIcon, {
+    label: "Unfollow"
+  });
+  return /*#__PURE__*/React.createElement(ServerAction, _extends({
+    content: /*#__PURE__*/React.createElement(FormattedMessage, message),
+    icon: icon,
+    testId: "smart-action-follow-action",
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, message)
+  }, data, props));
+};
+export default FollowAction;

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

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import Icon from '@atlaskit/icon';
+import React from 'react';
+const UnfollowGlyph = props => /*#__PURE__*/React.createElement("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  "data-testid": props['data-testid'],
+  "aria-label": props['aria-label'],
+  className: props.className,
+  role: "presentation",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M14 4.66667H11.3333C10.9652 4.66667 10.6667 4.96514 10.6667 5.33333C10.6667 5.70152 10.9652 6 11.3333 6H14C14.3682 6 14.6667 5.70152 14.6667 5.33333C14.6667 4.96514 14.3682 4.66667 14 4.66667Z",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M3.33334 9.33333C3.33334 8.59667 3.93468 8 4.67268 8H9.99401C10.734 8 11.3333 8.596 11.3333 9.33733V12.2973C11.3333 14.5673 3.33334 14.5673 3.33334 12.2973V9.33333Z",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M7.33334 7.33333C8.8061 7.33333 10 6.13943 10 4.66667C10 3.19391 8.8061 2 7.33334 2C5.86058 2 4.66668 3.19391 4.66668 4.66667C4.66668 6.13943 5.86058 7.33333 7.33334 7.33333Z",
+  fill: "currentColor"
+}));
+const UnfollowIcon = props => /*#__PURE__*/React.createElement(Icon, _extends({
+  glyph: UnfollowGlyph
+}, props));
+export default UnfollowIcon;

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

@@ -1,8 +1,11 @@
 import { ActionName } from '../../../../constants';
 import { createDataAction, createUIAction } from './utils';
+export { default as FollowAction } from './follow-action';
+
 // Attention: Keep the export name and action name the same.
 // This will help reducing the code for mapping action inside
 // createAction and renderActionItems
+
 /**
  * Creates a DeleteAction component. Accepts default ActionProps, but defaults
  * the icon to a cross icon.

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

@@ -6,13 +6,14 @@ import { css, jsx } from '@emotion/react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Tooltip from '@atlaskit/tooltip';
 import DropdownMenu from '@atlaskit/dropdown-menu';
-import { ActionName, SmartLinkSize } from '../../../../../constants';
+import { SmartLinkSize } from '../../../../../constants';
 import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { sizeToButtonSpacing } from '../../utils';
 import { messages } from '../../../../../messages';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import ActionGroupItem from './action-group-item';
+import { filterActionItems } from '../utils';
 const styles = css`
   display: inline-flex;
   line-height: 1rem;
@@ -37,22 +38,6 @@ const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance,
   asDropDownItems: asDropDownItems,
   onActionItemClick: onActionItemClick
 }));
-const filterActionItems = (items = [], context) => {
-  return items.filter(item => {
-    switch (item.name) {
-      // Action that require data from the data context to render.
-      case ActionName.DownloadAction:
-        return Boolean(context === null || context === void 0 ? void 0 : context.downloadAction);
-      case ActionName.PreviewAction:
-        return Boolean(context === null || context === void 0 ? void 0 : context.previewAction);
-      case ActionName.ViewAction:
-        return Boolean(context === null || context === void 0 ? void 0 : context.viewAction);
-      default:
-        // Named and custom actions that user defines.
-        return Boolean(ActionName[item.name]);
-    }
-  });
-};
 
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling

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

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { css } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
 import Block from '../block';
 import ElementGroup from '../element-group';
 import { Provider } from '../../elements';
 import ActionGroup from '../action-group';
+import { filterActionItems } from '../utils';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 const getActionGroupStyles = size => {
   if (size === SmartLinkSize.XLarge) {
     // The biggest height of the action button exceeds the max line-height
@@ -32,6 +34,11 @@ const FooterBlock = props => {
     testId = 'smart-footer-block',
     onActionMenuOpenChange
   } = props;
+  const context = useFlexibleUiContext();
+  const hasActions = useMemo(() => {
+    var _filterActionItems;
+    return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
+  }, [actions, context]);
   const onDropdownOpenChange = useCallback(isOpen => {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -46,7 +53,7 @@ const FooterBlock = props => {
     testId: `${testId}-resolved-view`
   }), /*#__PURE__*/React.createElement(Provider, {
     testId: `${testId}-provider`
-  }), actions && actions.length > 0 ? /*#__PURE__*/React.createElement(ElementGroup, {
+  }), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
     testId: "smart-element-group-actions",
     align: SmartLinkAlignment.Right,
     direction: SmartLinkDirection.Horizontal,

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { css } from '@emotion/react';
-import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+import { ActionName, ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
 import * as Elements from '../elements';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
@@ -111,6 +111,24 @@ export const isJSXElementNull = children => {
   return Boolean(children.type() === null);
 };
 const isElementOrElementGroup = node => /*#__PURE__*/React.isValidElement(node) && (isFlexibleUiElement(node) || node.type === ElementGroup);
+export const filterActionItems = (items = [], context) => {
+  return items.filter(item => {
+    switch (item.name) {
+      // Action that require data from the data context to render.
+      case ActionName.DownloadAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.downloadAction);
+      case ActionName.FollowAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.followAction);
+      case ActionName.PreviewAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.previewAction);
+      case ActionName.ViewAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.viewAction);
+      default:
+        // Named and custom actions that user defines.
+        return Boolean(ActionName[item.name]);
+    }
+  });
+};
 export const renderChildren = (children, size) => React.Children.map(children, child => {
   if (isElementOrElementGroup(child) || isActionGroup(child)) {
     const node = child;

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

@@ -66,7 +66,7 @@ export const getTransitionStyles = snippetHeight => css`
   height: ${snippetHeight}px;
 `;
 export const popupContainerStyles = css`
-  border-radius: ${"var(--ds-border-radius-300, 12px)"};
+  border-radius: ${"var(--ds-border-radius-200, 8px)"};
   background-color: ${themed({
   light: "var(--ds-surface-raised, white)",
   dark: "var(--ds-surface-raised, #262B31)"
@@ -78,8 +78,8 @@ export const popupContainerStyles = css`
 `;
 export const getPreviewBlockStyles = snippetHeight => css`
   height: ${snippetHeight}px;
-  ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `  border-top-left-radius: ${"var(--ds-border-radius-300, 12px)"};
-         border-top-right-radius: ${"var(--ds-border-radius-300, 12px)"};
+  ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `  border-top-left-radius: ${"var(--ds-border-radius-200, 8px)"};
+         border-top-right-radius: ${"var(--ds-border-radius-200, 8px)"};
          margin-bottom: ${blockGap};
         }` : ``}
 `;

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

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.23.2",
+  packageVersion: "26.24.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/es2019/view/RedesignedInlineCard/Frame/styled.js

@@ -67,7 +67,7 @@ const baseWrapperStyle = props => `
   ${props.withoutBackground ? `padding-left: 0; margin-left:-2px;` : ''}
   display: inline;
   box-decoration-break: clone;
-  border-radius: ${"var(--ds-border-radius-100, 3px)"};
+  border-radius: ${"var(--ds-border-radius-100, 4px)"};
   color: ${themed({
   light: `var(--ds-link, ${B400})`,
   dark: "var(--ds-link, #4794FF)"

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

@@ -10,7 +10,7 @@ export const IconStyledButton = styled.span`
     text-align: initial;
     display: inline;
     vertical-align: baseline;
-    border-radius: ${"var(--ds-border-radius-100, 2px)"};
+    border-radius: ${"var(--ds-border-radius-100, 4px)"};
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
     padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"};

package/dist/esm/constants.js

@@ -143,6 +143,7 @@ export var ElementName = /*#__PURE__*/function (ElementName) {
 export var ActionName = /*#__PURE__*/function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
   ActionName["EditAction"] = "EditAction";
+  ActionName["FollowAction"] = "FollowAction";
   ActionName["PreviewAction"] = "PreviewAction";
   ActionName["ViewAction"] = "ViewAction";
   ActionName["DownloadAction"] = "DownloadAction";

package/dist/esm/extractors/flexible/actions/extract-follow-action.js

@@ -0,0 +1,45 @@
+import { extractLink } from '@atlaskit/link-extractors';
+import { SmartLinkActionType } from '@atlaskit/linking-types';
+import { getExtensionKey } from '../../../state/helpers';
+import extractServerAction from '../extract-server-action';
+var extractFollowAction = function extractFollowAction(response, showServerActions, id) {
+  var _action$dataUpdateAct;
+  if (!showServerActions) {
+    return;
+  }
+  var extensionKey = getExtensionKey(response);
+  var data = response === null || response === void 0 ? void 0 : response.data;
+  var actions = extractServerAction(data);
+  if (!extensionKey || actions.length === 0) {
+    return;
+  }
+  var action = actions.find(function (item) {
+    if ((item === null || item === void 0 ? void 0 : item.name) === 'UpdateAction') {
+      var _dataUpdateAction;
+      var actionName = item === null || item === void 0 ? void 0 : (_dataUpdateAction = item.dataUpdateAction) === null || _dataUpdateAction === void 0 ? void 0 : _dataUpdateAction.name;
+      return actionName === SmartLinkActionType.FollowEntityAction || actionName === SmartLinkActionType.UnfollowEntityAction;
+    }
+    return false;
+  });
+  if (!action || !action.resourceIdentifiers) {
+    return;
+  }
+  var url = extractLink(data);
+  var reload = url ? {
+    id: id,
+    url: url
+  } : undefined;
+  var actionType = (_action$dataUpdateAct = action.dataUpdateAction) === null || _action$dataUpdateAct === void 0 ? void 0 : _action$dataUpdateAct.name;
+  return {
+    action: {
+      action: {
+        actionType: actionType,
+        resourceIdentifiers: action.resourceIdentifiers
+      },
+      providerKey: extensionKey,
+      reload: reload
+    },
+    value: actionType === SmartLinkActionType.FollowEntityAction
+  };
+};
+export default extractFollowAction;

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

@@ -1,4 +1,6 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { extractSummary } from '../common/primitives';
+import extractFollowAction from './actions/extract-follow-action';
 import { extractLinkIcon } from './icon';
 import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn, extractLocation, extractOwnedBy, extractAssignedTo, extractSubTasksProgress, extractStoryPoints, extractReadTime, extractSentOn, extractPersonAssignedToAsArray } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
@@ -38,6 +40,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     assignedTo: extractAssignedTo(data),
     createdOn: extractDateCreated(data),
     dueOn: extractDueOn(data),
+    followAction: getBooleanFF('platform.linking-platform.smart-card.follow-button') ? extractFollowAction(response, showServerActions, id) : undefined,
     previewAction: extractPreviewAction(response),
     viewAction: extractViewAction(data),
     downloadAction: extractDownloadAction(data),

package/dist/esm/messages.js

@@ -140,6 +140,11 @@ export var messages = defineMessages({
     defaultMessage: 'Edit',
     description: 'Allow a user to edit a link'
   },
+  follow: {
+    id: 'fabric.linking.follow',
+    defaultMessage: 'Follow',
+    description: 'Click to follow a project.'
+  },
   forbidden_description: {
     id: 'fabric.linking.forbidden_description',
     defaultMessage: 'You don’t have access to this preview. Contact the site admin if you need access.',
@@ -425,6 +430,11 @@ export var messages = defineMessages({
     defaultMessage: 'Unassigned',
     description: 'Shown as a tooltip text for a default unassigned fallback avatar'
   },
+  unfollow: {
+    id: 'fabric.linking.unfollow',
+    defaultMessage: 'Unfollow',
+    description: 'Click to unfollow a project.'
+  },
   unlink_account: {
     id: 'fabric.linking.unlink_account',
     defaultMessage: 'Unlink Account',

package/dist/esm/utils/analytics/analytics.js

@@ -13,7 +13,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.23.2"
+  packageVersion: "26.24.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/BlockCard/views/flexible/styled.js

@@ -8,7 +8,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 // in editor prosemirror adds padding-left so we need to overwrite it
 export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* primary element group */\n  span[data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n    }\n  }\n  [data-smart-element-group] {\n    line-height: 1rem;\n  }\n"])));
 export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "gap: 0.5em;" : "", getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
-export var footerBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 1.5rem;\n"])));
+export var footerBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 1.5rem;\n\n  .actions-button-group {\n    button,\n    button:hover,\n    button:focus,\n    button:active {\n      font-size: 0.875rem;\n    }\n  }\n"])));
 var flexibleBlockCardElevationStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
-var refreshedFlexibleBlockCardStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-300, 12px)", "var(--ds-border-input, ".concat(N40, ")"));
+var refreshedFlexibleBlockCardStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-border-input, ".concat(N40, ")"));
 export var flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;

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

@@ -10,8 +10,8 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var className = 'media-card-frame';
 export var borderRadius = "\n  border-radius: ".concat(akBorderRadius(), "px;\n");
 var BACKGROUND_COLOR_DARK = '#262B31';
-var wrapperBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-400, 16px)", ";\n");
-var contentBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-300, 12px)", ";\n");
+var wrapperBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-200, 8px)", ";\n");
+var contentBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-100, 4px)", ";\n");
 export var ellipsis = function ellipsis() {
   var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
   var unit = typeof maxWidth === 'number' ? 'px' : '';

package/dist/esm/view/FlexibleCard/components/actions/action/server-action/index.js

@@ -34,14 +34,14 @@ var ServerAction = function ServerAction(_ref) {
           _context.next = 6;
           return invoke(request);
         case 6:
-          setIsLoading(false);
           if (!(action.reload && action.reload.url)) {
-            _context.next = 10;
+            _context.next = 9;
             break;
           }
-          _context.next = 10;
+          _context.next = 9;
           return reload(action.reload.url, true, undefined, action.reload.id);
-        case 10:
+        case 9:
+          setIsLoading(false);
           if (onClick) {
             onClick();
           }

package/dist/esm/view/FlexibleCard/components/actions/follow-action/index.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value"];
+import InviteTeamIcon from '@atlaskit/icon/glyph/invite-team';
+import React, { useContext } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../../../../../messages';
+import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import ServerAction from '../action/server-action';
+import UnfollowIcon from './unfollow-icon';
+var FollowAction = function FollowAction(props) {
+  var context = useContext(FlexibleUiContext);
+  if (!context || !context.followAction) {
+    return null;
+  }
+  var _context$followAction = context.followAction,
+    value = _context$followAction.value,
+    data = _objectWithoutProperties(_context$followAction, _excluded);
+  var message = value ? messages.follow : messages.unfollow;
+  var icon = value ? /*#__PURE__*/React.createElement(InviteTeamIcon, {
+    label: "Follow"
+  }) : /*#__PURE__*/React.createElement(UnfollowIcon, {
+    label: "Unfollow"
+  });
+  return /*#__PURE__*/React.createElement(ServerAction, _extends({
+    content: /*#__PURE__*/React.createElement(FormattedMessage, message),
+    icon: icon,
+    testId: "smart-action-follow-action",
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, message)
+  }, data, props));
+};
+export default FollowAction;

package/dist/esm/view/FlexibleCard/components/actions/follow-action/unfollow-icon/index.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import Icon from '@atlaskit/icon';
+import React from 'react';
+var UnfollowGlyph = function UnfollowGlyph(props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    "data-testid": props['data-testid'],
+    "aria-label": props['aria-label'],
+    className: props.className,
+    role: "presentation",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M14 4.66667H11.3333C10.9652 4.66667 10.6667 4.96514 10.6667 5.33333C10.6667 5.70152 10.9652 6 11.3333 6H14C14.3682 6 14.6667 5.70152 14.6667 5.33333C14.6667 4.96514 14.3682 4.66667 14 4.66667Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.33334 9.33333C3.33334 8.59667 3.93468 8 4.67268 8H9.99401C10.734 8 11.3333 8.596 11.3333 9.33733V12.2973C11.3333 14.5673 3.33334 14.5673 3.33334 12.2973V9.33333Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M7.33334 7.33333C8.8061 7.33333 10 6.13943 10 4.66667C10 3.19391 8.8061 2 7.33334 2C5.86058 2 4.66668 3.19391 4.66668 4.66667C4.66668 6.13943 5.86058 7.33333 7.33334 7.33333Z",
+    fill: "currentColor"
+  }));
+};
+var UnfollowIcon = function UnfollowIcon(props) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: UnfollowGlyph
+  }, props));
+};
+export default UnfollowIcon;

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

@@ -1,8 +1,11 @@
 import { ActionName } from '../../../../constants';
 import { createDataAction, createUIAction } from './utils';
+export { default as FollowAction } from './follow-action';
+
 // Attention: Keep the export name and action name the same.
 // This will help reducing the code for mapping action inside
 // createAction and renderActionItems
+
 /**
  * Creates a DeleteAction component. Accepts default ActionProps, but defaults
  * the icon to a cross icon.

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -11,13 +11,14 @@ import { css, jsx } from '@emotion/react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Tooltip from '@atlaskit/tooltip';
 import DropdownMenu from '@atlaskit/dropdown-menu';
-import { ActionName, SmartLinkSize } from '../../../../../constants';
+import { SmartLinkSize } from '../../../../../constants';
 import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { sizeToButtonSpacing } from '../../utils';
 import { messages } from '../../../../../messages';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import ActionGroupItem from './action-group-item';
+import { filterActionItems } from '../utils';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus-visible {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      outline-offset: -2px;\n    }\n  }\n"])));
 var renderActionItems = function renderActionItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -36,24 +37,6 @@ var renderActionItems = function renderActionItems() {
     });
   });
 };
-var filterActionItems = function filterActionItems() {
-  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var context = arguments.length > 1 ? arguments[1] : undefined;
-  return items.filter(function (item) {
-    switch (item.name) {
-      // Action that require data from the data context to render.
-      case ActionName.DownloadAction:
-        return Boolean(context === null || context === void 0 ? void 0 : context.downloadAction);
-      case ActionName.PreviewAction:
-        return Boolean(context === null || context === void 0 ? void 0 : context.previewAction);
-      case ActionName.ViewAction:
-        return Boolean(context === null || context === void 0 ? void 0 : context.viewAction);
-      default:
-        // Named and custom actions that user defines.
-        return Boolean(ActionName[item.name]);
-    }
-  });
-};
 
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling

package/dist/esm/view/FlexibleCard/components/blocks/footer-block/index.js

@@ -1,13 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { css } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
 import Block from '../block';
 import ElementGroup from '../element-group';
 import { Provider } from '../../elements';
 import ActionGroup from '../action-group';
+import { filterActionItems } from '../utils';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 var getActionGroupStyles = function getActionGroupStyles(size) {
   if (size === SmartLinkSize.XLarge) {
     // The biggest height of the action button exceeds the max line-height
@@ -32,6 +34,11 @@ var FooterBlock = function FooterBlock(props) {
     _props$testId = props.testId,
     testId = _props$testId === void 0 ? 'smart-footer-block' : _props$testId,
     onActionMenuOpenChange = props.onActionMenuOpenChange;
+  var context = useFlexibleUiContext();
+  var hasActions = useMemo(function () {
+    var _filterActionItems;
+    return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
+  }, [actions, context]);
   var onDropdownOpenChange = useCallback(function (isOpen) {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -46,7 +53,7 @@ var FooterBlock = function FooterBlock(props) {
     testId: "".concat(testId, "-resolved-view")
   }), /*#__PURE__*/React.createElement(Provider, {
     testId: "".concat(testId, "-provider")
-  }), actions && actions.length > 0 ? /*#__PURE__*/React.createElement(ElementGroup, {
+  }), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
     testId: "smart-element-group-actions",
     align: SmartLinkAlignment.Right,
     direction: SmartLinkDirection.Horizontal,

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

@@ -7,7 +7,7 @@ var _excluded = ["name"];
 var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import React from 'react';
 import { css } from '@emotion/react';
-import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+import { ActionName, ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
 import * as Elements from '../elements';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
@@ -55,6 +55,26 @@ export var isJSXElementNull = function isJSXElementNull(children) {
 var isElementOrElementGroup = function isElementOrElementGroup(node) {
   return /*#__PURE__*/React.isValidElement(node) && (isFlexibleUiElement(node) || node.type === ElementGroup);
 };
+export var filterActionItems = function filterActionItems() {
+  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var context = arguments.length > 1 ? arguments[1] : undefined;
+  return items.filter(function (item) {
+    switch (item.name) {
+      // Action that require data from the data context to render.
+      case ActionName.DownloadAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.downloadAction);
+      case ActionName.FollowAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.followAction);
+      case ActionName.PreviewAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.previewAction);
+      case ActionName.ViewAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.viewAction);
+      default:
+        // Named and custom actions that user defines.
+        return Boolean(ActionName[item.name]);
+    }
+  });
+};
 export var renderChildren = function renderChildren(children, size) {
   return React.Children.map(children, function (child) {
     if (isElementOrElementGroup(child) || isActionGroup(child)) {

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

@@ -33,7 +33,7 @@ export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTe
 export var getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
 };
-export var popupContainerStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n"])), "var(--ds-border-radius-300, 12px)", themed({
+export var popupContainerStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n"])), "var(--ds-border-radius-200, 8px)", themed({
   light: "var(--ds-surface-raised, white)",
   dark: "var(--ds-surface-raised, #262B31)"
 })(), themed({
@@ -41,5 +41,5 @@ export var popupContainerStyles = css(_templateObject5 || (_templateObject5 = _t
   dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
 })());
 export var getPreviewBlockStyles = function getPreviewBlockStyles(snippetHeight) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: ", "px;\n  ", "\n"])), snippetHeight, getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "  border-top-left-radius: ".concat("var(--ds-border-radius-300, 12px)", ";\n         border-top-right-radius: ", "var(--ds-border-radius-300, 12px)", ";\n         margin-bottom: ", blockGap, ";\n        }") : "");
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: ", "px;\n  ", "\n"])), snippetHeight, getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "  border-top-left-radius: ".concat("var(--ds-border-radius-200, 8px)", ";\n         border-top-right-radius: ", "var(--ds-border-radius-200, 8px)", ";\n         margin-bottom: ", blockGap, ";\n        }") : "");
 };

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

@@ -11,7 +11,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.23.2",
+  packageVersion: "26.24.0",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/esm/view/RedesignedInlineCard/Frame/styled.js

@@ -41,7 +41,7 @@ var isSelected = function isSelected(_ref2) {
 // NB: `display: inline` required for `box-decoration-break` to work.
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 var baseWrapperStyle = function baseWrapperStyle(props) {
-  return "\n  line-height: 22px;\n  padding: 2px 0px;\n  ".concat(props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '', "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "var(--ds-border-radius-100, 3px)", ";\n  color: ").concat(themed({
+  return "\n  line-height: 22px;\n  padding: 2px 0px;\n  ".concat(props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '', "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "var(--ds-border-radius-100, 4px)", ";\n  color: ").concat(themed({
     light: "var(--ds-link, ".concat(B400, ")"),
     dark: "var(--ds-link, #4794FF)"
   })(props), ";\n\n  background-color: ").concat(props.withoutBackground ? '' : themed({