@atlaskit/smart-card 26.56.3 → 26.56.5

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

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import Icon from '@atlaskit/icon';
+import React from 'react';
+const GoalGlyph = props => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none"
+}, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M12.6667 8C12.6667 10.5773 10.5773 12.6667 8 12.6667C5.42267 12.6667 3.33333 10.5773 3.33333 8C3.33333 5.42267 5.42267 3.33333 8 3.33333C10.5773 3.33333 12.6667 5.42267 12.6667 8ZM14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM9.33333 8C9.33333 8.73638 8.73638 9.33333 8 9.33333C7.26362 9.33333 6.66667 8.73638 6.66667 8C6.66667 7.26362 7.26362 6.66667 8 6.66667C8.73638 6.66667 9.33333 7.26362 9.33333 8ZM10.6667 8C10.6667 9.47276 9.47276 10.6667 8 10.6667C6.52724 10.6667 5.33333 9.47276 5.33333 8C5.33333 6.52724 6.52724 5.33333 8 5.33333C9.47276 5.33333 10.6667 6.52724 10.6667 8Z",
+  fill: "#0C66E4"
+}));
+export const GoalIcon = props => /*#__PURE__*/React.createElement(Icon, _extends({
+  glyph: GoalGlyph
+}, props));

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

@@ -7,6 +7,26 @@ import { messages } from '../../../../../messages';
 import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import ServerAction from '../action/server-action';
 import UnfollowIcon from './unfollow-icon';
+import { importIcon } from '../../utils';
+const importIconMapper = {
+  goal: () => import( /* webpackChunkName: "glyphGoal" */'./goal-icon').then(({
+    GoalIcon
+  }) => ({
+    default: GoalIcon
+  })),
+  projects: () => import( /* webpackChunkName: "glyphProjects" */'./projects-icon').then(({
+    ProjectsIcon
+  }) => ({
+    default: ProjectsIcon
+  }))
+};
+const getIcon = stackIconType => {
+  const importFn = importIconMapper[stackIconType];
+  if (!importFn) {
+    return null;
+  }
+  return importIcon(importFn);
+};
 const FollowAction = props => {
   var _context$actions, _context$actions2;
   const context = useFlexibleUiContext();
@@ -17,17 +37,34 @@ const FollowAction = props => {
     value,
     ...data
   } = context === null || context === void 0 ? void 0 : (_context$actions2 = context.actions) === null || _context$actions2 === void 0 ? void 0 : _context$actions2[ActionName.FollowAction];
+  const isStackItem = props.as === 'stack-item';
+  const isProject = data.isProject;
   const message = value ? messages.follow : messages.unfollow;
+  const projectMessage = value ? messages.follow_project : messages.unfollow_project;
+  const goalMessage = value ? messages.follow_goal : messages.unfollow_goal;
+  const stackMessage = isProject ? projectMessage : goalMessage;
+  const label = isStackItem ? stackMessage : message;
+  const projectTooltipMessage = value ? messages.follow_project_description : messages.unfollow_project_description;
+  const goalTooltipMessage = value ? messages.follow_goal_description : messages.unfollow_goal_description;
+  const stackTooltipMessage = isProject ? projectTooltipMessage : goalTooltipMessage;
+  const tooltipMessage = isStackItem ? stackTooltipMessage : message;
   const icon = value ? /*#__PURE__*/React.createElement(InviteTeamIcon, {
     label: "Follow"
   }) : /*#__PURE__*/React.createElement(UnfollowIcon, {
     label: "Unfollow"
   });
+  const stackIconType = isProject ? 'projects' : 'goal';
+  const ImportedIcon = getIcon(stackIconType);
+  const stackIcon = /*#__PURE__*/React.createElement(ImportedIcon, {
+    label: "Follow",
+    testId: `smart-action-follow-action-${stackIconType}-icon`
+  });
+  const followIcon = isStackItem ? stackIcon : icon;
   return /*#__PURE__*/React.createElement(ServerAction, _extends({
-    content: /*#__PURE__*/React.createElement(FormattedMessage, message),
-    icon: icon,
+    content: /*#__PURE__*/React.createElement(FormattedMessage, label),
+    icon: followIcon,
     testId: "smart-action-follow-action",
-    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, message)
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage)
   }, data, props));
 };
 export default FollowAction;

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

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import Icon from '@atlaskit/icon';
+import React from 'react';
+const ProjectsGlyph = props => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none"
+}, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M9.88573 4.00002C9.70892 4.00002 9.53935 4.07026 9.41433 4.19528L6.97282 6.63678L4.20525 6.94429C4.05479 6.96101 3.91451 7.02844 3.80746 7.13548L3.60959 7.33335L4.35367 8.07743C4.6791 8.40287 4.6791 8.93051 4.35367 9.25594L3.47152 10.1381C3.21117 10.3984 2.78906 10.3984 2.52871 10.1381C2.26836 9.87774 2.26836 9.45563 2.52871 9.19528L3.0573 8.66669L2.43108 8.04046C2.04055 7.64993 2.04055 7.01677 2.43108 6.62625L2.86465 6.19267C3.18578 5.87154 3.60664 5.66927 4.05801 5.61911L6.36073 5.36326L8.47152 3.25247C8.84659 2.8774 9.3553 2.66669 9.88573 2.66669H12.0001C12.7365 2.66669 13.3334 3.26364 13.3334 4.00002V6.1144C13.3334 6.64483 13.1227 7.15354 12.7477 7.52862L10.6369 9.6394L10.381 11.9421C10.3309 12.3935 10.1286 12.8143 9.80746 13.1355L9.37389 13.5691C8.98336 13.9596 8.3502 13.9596 7.95967 13.5691L7.33345 12.9428L6.80485 13.4714C6.5445 13.7318 6.12239 13.7318 5.86204 13.4714C5.60169 13.2111 5.60169 12.789 5.86204 12.5286L6.74419 11.6465C7.06963 11.321 7.59726 11.321 7.9227 11.6465L8.66678 12.3905L8.86466 12.1927C8.9717 12.0856 9.03912 11.9453 9.05584 11.7949L9.36335 9.02731L11.8049 6.58581C11.9299 6.46078 12.0001 6.29121 12.0001 6.1144V4.00002H9.88573ZM5.80486 10.1953C6.06521 10.4556 6.06521 10.8777 5.80486 11.1381L3.80486 13.1381C3.54451 13.3984 3.1224 13.3984 2.86205 13.1381C2.6017 12.8777 2.6017 12.4556 2.86205 12.1953L4.86205 10.1953C5.1224 9.93493 5.54451 9.93493 5.80486 10.1953ZM10.0001 6.66669C10.3683 6.66669 10.6668 6.36821 10.6668 6.00002C10.6668 5.63183 10.3683 5.33335 10.0001 5.33335C9.63193 5.33335 9.33346 5.63183 9.33346 6.00002C9.33346 6.36821 9.63193 6.66669 10.0001 6.66669Z",
+  fill: "#0C66E4"
+}));
+export const ProjectsIcon = props => /*#__PURE__*/React.createElement(Icon, _extends({
+  glyph: ProjectsGlyph
+}, props));

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

@@ -1,6 +1,6 @@
 import { Stack, xcss } from '@atlaskit/primitives';
 import React, { useMemo } from 'react';
-import { SmartLinkSize } from '../../../../../constants';
+import { ActionName, SmartLinkSize } from '../../../../../constants';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import * as Actions from '../../actions';
 import { getPrimitivesPaddingSpaceBySize } from '../../utils';
@@ -10,11 +10,22 @@ const ignoreContainerPaddingStyles = xcss({
   marginLeft: 'calc(var(--container-gap-left) * -1)',
   marginRight: 'calc(var(--container-gap-right) * -1)'
 });
+const DEFAULT_SORT_ORDER = [ActionName.PreviewAction, ActionName.CopyLinkAction];
+const sort = (a, b) => {
+  let idxA = DEFAULT_SORT_ORDER.indexOf(a);
+  let idxB = DEFAULT_SORT_ORDER.indexOf(b);
+  if (idxA === -1) {
+    idxA = DEFAULT_SORT_ORDER.length;
+  }
+  if (idxB === -1) {
+    idxB = DEFAULT_SORT_ORDER.length;
+  }
+  return idxA - idxB;
+};
 const ActionBlock = ({
   blockRef,
   onClick: onClickCallback,
   size,
-  sort,
   spaceInline,
   testId = 'smart-block-action'
 }) => {
@@ -26,9 +37,7 @@ const ActionBlock = ({
       return;
     }
     const arr = Object.keys(context.actions);
-    if (sort) {
-      arr.sort(sort);
-    }
+    arr.sort(sort);
     return arr.map(name => {
       const Action = name in Actions ? Actions[name] : undefined;
       return Action ? /*#__PURE__*/React.createElement(Action, {
@@ -42,7 +51,7 @@ const ActionBlock = ({
         })
       }) : null;
     });
-  }, [context === null || context === void 0 ? void 0 : context.actions, onClickCallback, padding, size, sort, spaceInline]);
+  }, [context === null || context === void 0 ? void 0 : context.actions, onClickCallback, padding, size, spaceInline]);
   return actions ? /*#__PURE__*/React.createElement(Stack, {
     grow: "fill",
     xcss: ignoreContainerPaddingStyles,

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

@@ -5,6 +5,7 @@ import { FormattedMessage } from 'react-intl-next';
 import { SmartLinkSize } from '../../../constants';
 import Icon from './elements/icon';
 import { openEmbedModal } from '../../EmbedModal/utils';
+import Loadable from 'react-loadable';
 export const sizeToButtonSpacing = {
   [SmartLinkSize.Small]: 'none',
   [SmartLinkSize.Medium]: 'compact',
@@ -67,6 +68,12 @@ export const getIconWidth = size => {
       return '.75rem';
   }
 };
+export const importIcon = importFn => {
+  return Loadable({
+    loader: () => importFn().then(module => module.default),
+    loading: () => null
+  }); // Because we're using dynamic loading here, TS will not be able to infer the type.
+};
 export const getLinkLineHeight = size => {
   switch (size) {
     case SmartLinkSize.XLarge:

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.56.3",
+  packageVersion: "26.56.5",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

@@ -1,4 +1,4 @@
-import { extractLink } from '@atlaskit/link-extractors';
+import { extractLink, extractType } from '@atlaskit/link-extractors';
 import { SmartLinkActionType } from '@atlaskit/linking-types';
 import { getExtensionKey } from '../../../state/helpers';
 import extractServerAction from '../extract-server-action';
@@ -12,6 +12,8 @@ var extractFollowAction = function extractFollowAction(response, actionOptions,
   var extensionKey = getExtensionKey(response);
   var data = response === null || response === void 0 ? void 0 : response.data;
   var actions = extractServerAction(data);
+  var type = extractType(data);
+  var isProject = type === null || type === void 0 ? void 0 : type.includes('atlassian:Project');
   if (!extensionKey || actions.length === 0) {
     return;
   }
@@ -41,7 +43,8 @@ var extractFollowAction = function extractFollowAction(response, actionOptions,
       providerKey: extensionKey,
       reload: reload
     },
-    value: actionType === SmartLinkActionType.FollowEntityAction
+    value: actionType === SmartLinkActionType.FollowEntityAction,
+    isProject: isProject
   };
 };
 export default extractFollowAction;

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

@@ -4,8 +4,9 @@ import { extractDownloadAction } from './extract-download-action';
 import { extractPreviewAction } from './extract-preview-action';
 import extractFollowAction from './extract-follow-action';
 import { extractCopyLinkAction } from './extract-copy-link-action';
-var extractActions = function extractActions(response, data, actionOptions, id) {
+var extractActions = function extractActions(response, actionOptions, id) {
   var _action;
+  var data = response.data;
   var action = (_action = {}, _defineProperty(_action, ActionName.CopyLinkAction, extractCopyLinkAction(data, actionOptions)), _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);

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

@@ -22,7 +22,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
   var data = response.data;
   var url = extractLink(data);
   return {
-    actions: extractActions(response, data, actionOptions, id),
+    actions: extractActions(response, actionOptions, id),
     assignedToGroup: extractPersonAssignedToAsArray(data),
     attachmentCount: extractAttachmentCount(data),
     authorGroup: extractPersonCreatedBy(data),

package/dist/esm/messages.js

@@ -205,6 +205,26 @@ export var messages = defineMessages({
     defaultMessage: 'Follow',
     description: 'Click to follow a project.'
   },
+  follow_project_description: {
+    id: 'fabric.linking.follow_project_description.nonfinal',
+    defaultMessage: 'Follow to get notifications on this project',
+    description: 'Description on what Follow does'
+  },
+  follow_project: {
+    id: 'fabric.linking.follow_project.nonfinal',
+    defaultMessage: 'Follow project',
+    description: 'Click to follow a project.'
+  },
+  follow_goal_description: {
+    id: 'fabric.linking.follow_goal_description.nonfinal',
+    defaultMessage: 'Follow this goal to get notifications on updates',
+    description: 'Description on what Follow does'
+  },
+  follow_goal: {
+    id: 'fabric.linking.follow_goal.nonfinal',
+    defaultMessage: 'Follow goal',
+    description: 'Click to follow a project.'
+  },
   go_back: {
     id: 'fabric.linking.go_back',
     defaultMessage: 'Go back',
@@ -465,6 +485,26 @@ export var messages = defineMessages({
     defaultMessage: 'Unfollow',
     description: 'Click to unfollow a project.'
   },
+  unfollow_project_description: {
+    id: 'fabric.linking.unfollow_project_description.nonfinal',
+    defaultMessage: 'Unfollow to stop receiving project notifications',
+    description: 'Description on what Unfollow does'
+  },
+  unfollow_project: {
+    id: 'fabric.linking.unfollow_project.nonfinal',
+    defaultMessage: 'Unfollow project',
+    description: 'Click to unfollow a project.'
+  },
+  unfollow_goal_description: {
+    id: 'fabric.linking.unfollow_goal_description.nonfinal',
+    defaultMessage: 'Unfollow to stop receiving notifications for this goal',
+    description: 'Description on what Unfollow does'
+  },
+  unfollow_goal: {
+    id: 'fabric.linking.unfollow_goal.nonfinal',
+    defaultMessage: 'Unfollow goal',
+    description: 'Click to unfollow a project.'
+  },
   unlink_account: {
     id: 'fabric.linking.unlink_account',
     defaultMessage: 'Unlink Account',

package/dist/esm/state/hooks/use-ai-summary/ai-summary-service/readStream.js

@@ -10,109 +10,99 @@ export function readStream(_x) {
 }
 function _readStream() {
   _readStream = _wrapAsyncGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(response) {
-    var reader, doneStreaming, chunkBuffer, chunkTypeErrorMessage, _yield$_awaitAsyncGen, value, done, processedChunks, _iterator, _step, chunk, jsonChunk, error;
+    var reader, doneStreaming, chunkBuffer, _yield$_awaitAsyncGen, value, done, processedChunks, _iterator, _step, chunk, jsonChunk, error;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           reader = getBufferReader(response);
           doneStreaming = false;
           chunkBuffer = '';
-          chunkTypeErrorMessage = 'jsonChunkType error';
-        case 4:
-          _context.prev = 4;
-          _context.next = 7;
+        case 3:
+          _context.prev = 3;
+          _context.next = 6;
           return _awaitAsyncGenerator(reader.read());
-        case 7:
+        case 6:
           _yield$_awaitAsyncGen = _context.sent;
           value = _yield$_awaitAsyncGen.value;
           done = _yield$_awaitAsyncGen.done;
           doneStreaming = done;
           if (!value) {
-            _context.next = 42;
+            _context.next = 38;
             break;
           }
           processedChunks = "".concat(chunkBuffer).concat(value).split('\n'); // assumes that all JSON chunks are separated by a new-line;
           chunkBuffer = '';
           _iterator = _createForOfIteratorHelper(processedChunks);
-          _context.prev = 15;
+          _context.prev = 14;
           _iterator.s();
-        case 17:
+        case 16:
           if ((_step = _iterator.n()).done) {
-            _context.next = 34;
+            _context.next = 30;
             break;
           }
           chunk = _step.value;
-          _context.prev = 19;
+          _context.prev = 18;
           jsonChunk = JSON.parse(chunk);
-          if (!(jsonChunk.type === 'ERROR')) {
-            _context.next = 23;
-            break;
+          if (jsonChunk.type === 'ERROR') {
+            reader.cancel();
           }
-          throw new Error(chunkTypeErrorMessage);
-        case 23:
-          _context.next = 25;
+          _context.next = 23;
           return jsonChunk;
-        case 25:
-          _context.next = 32;
+        case 23:
+          _context.next = 28;
           break;
-        case 27:
-          _context.prev = 27;
-          _context.t0 = _context["catch"](19);
-          if (!(_context.t0 instanceof Error && _context.t0.message === chunkTypeErrorMessage)) {
-            _context.next = 31;
-            break;
-          }
-          throw _context.t0;
-        case 31:
+        case 25:
+          _context.prev = 25;
+          _context.t0 = _context["catch"](18);
           // the chunk may be incomplete, so we'll save it for the next iteration.
           chunkBuffer = chunk;
-        case 32:
-          _context.next = 17;
+        case 28:
+          _context.next = 16;
           break;
-        case 34:
-          _context.next = 39;
+        case 30:
+          _context.next = 35;
           break;
-        case 36:
-          _context.prev = 36;
-          _context.t1 = _context["catch"](15);
+        case 32:
+          _context.prev = 32;
+          _context.t1 = _context["catch"](14);
           _iterator.e(_context.t1);
-        case 39:
-          _context.prev = 39;
+        case 35:
+          _context.prev = 35;
           _iterator.f();
-          return _context.finish(39);
-        case 42:
-          _context.next = 52;
+          return _context.finish(35);
+        case 38:
+          _context.next = 48;
           break;
-        case 44:
-          _context.prev = 44;
-          _context.t2 = _context["catch"](4);
+        case 40:
+          _context.prev = 40;
+          _context.t2 = _context["catch"](3);
           if (!(_context.t2 instanceof DOMException && _context.t2.name === 'AbortError')) {
-            _context.next = 50;
+            _context.next = 46;
             break;
           }
           doneStreaming = true;
-          _context.next = 52;
+          _context.next = 48;
           break;
-        case 50:
+        case 46:
           reader.cancel();
           throw _context.t2;
-        case 52:
+        case 48:
           if (!doneStreaming) {
-            _context.next = 4;
+            _context.next = 3;
             break;
           }
-        case 53:
+        case 49:
           if (!chunkBuffer) {
-            _context.next = 56;
+            _context.next = 52;
             break;
           }
           error = new Error("Not all the data was processed: ".concat(chunkBuffer));
           throw error;
-        case 56:
+        case 52:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[4, 44], [15, 36, 39, 42], [19, 27]]);
+    }, _callee, null, [[3, 40], [14, 32, 35, 38], [18, 25]]);
   }));
   return _readStream.apply(this, arguments);
 }

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

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

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

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import Icon from '@atlaskit/icon';
+import React from 'react';
+var GoalGlyph = function GoalGlyph(props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.6667 8C12.6667 10.5773 10.5773 12.6667 8 12.6667C5.42267 12.6667 3.33333 10.5773 3.33333 8C3.33333 5.42267 5.42267 3.33333 8 3.33333C10.5773 3.33333 12.6667 5.42267 12.6667 8ZM14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM9.33333 8C9.33333 8.73638 8.73638 9.33333 8 9.33333C7.26362 9.33333 6.66667 8.73638 6.66667 8C6.66667 7.26362 7.26362 6.66667 8 6.66667C8.73638 6.66667 9.33333 7.26362 9.33333 8ZM10.6667 8C10.6667 9.47276 9.47276 10.6667 8 10.6667C6.52724 10.6667 5.33333 9.47276 5.33333 8C5.33333 6.52724 6.52724 5.33333 8 5.33333C9.47276 5.33333 10.6667 6.52724 10.6667 8Z",
+    fill: "#0C66E4"
+  }));
+};
+export var GoalIcon = function GoalIcon(props) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: GoalGlyph
+  }, props));
+};

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

@@ -9,6 +9,32 @@ import { messages } from '../../../../../messages';
 import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import ServerAction from '../action/server-action';
 import UnfollowIcon from './unfollow-icon';
+import { importIcon } from '../../utils';
+var importIconMapper = {
+  goal: function goal() {
+    return import( /* webpackChunkName: "glyphGoal" */'./goal-icon').then(function (_ref) {
+      var GoalIcon = _ref.GoalIcon;
+      return {
+        default: GoalIcon
+      };
+    });
+  },
+  projects: function projects() {
+    return import( /* webpackChunkName: "glyphProjects" */'./projects-icon').then(function (_ref2) {
+      var ProjectsIcon = _ref2.ProjectsIcon;
+      return {
+        default: ProjectsIcon
+      };
+    });
+  }
+};
+var getIcon = function getIcon(stackIconType) {
+  var importFn = importIconMapper[stackIconType];
+  if (!importFn) {
+    return null;
+  }
+  return importIcon(importFn);
+};
 var FollowAction = function FollowAction(props) {
   var _context$actions, _context$actions2;
   var context = useFlexibleUiContext();
@@ -18,17 +44,34 @@ var FollowAction = function FollowAction(props) {
   var _context$actions$Acti = context === null || context === void 0 || (_context$actions2 = context.actions) === null || _context$actions2 === void 0 ? void 0 : _context$actions2[ActionName.FollowAction],
     value = _context$actions$Acti.value,
     data = _objectWithoutProperties(_context$actions$Acti, _excluded);
+  var isStackItem = props.as === 'stack-item';
+  var isProject = data.isProject;
   var message = value ? messages.follow : messages.unfollow;
+  var projectMessage = value ? messages.follow_project : messages.unfollow_project;
+  var goalMessage = value ? messages.follow_goal : messages.unfollow_goal;
+  var stackMessage = isProject ? projectMessage : goalMessage;
+  var label = isStackItem ? stackMessage : message;
+  var projectTooltipMessage = value ? messages.follow_project_description : messages.unfollow_project_description;
+  var goalTooltipMessage = value ? messages.follow_goal_description : messages.unfollow_goal_description;
+  var stackTooltipMessage = isProject ? projectTooltipMessage : goalTooltipMessage;
+  var tooltipMessage = isStackItem ? stackTooltipMessage : message;
   var icon = value ? /*#__PURE__*/React.createElement(InviteTeamIcon, {
     label: "Follow"
   }) : /*#__PURE__*/React.createElement(UnfollowIcon, {
     label: "Unfollow"
   });
+  var stackIconType = isProject ? 'projects' : 'goal';
+  var ImportedIcon = getIcon(stackIconType);
+  var stackIcon = /*#__PURE__*/React.createElement(ImportedIcon, {
+    label: "Follow",
+    testId: "smart-action-follow-action-".concat(stackIconType, "-icon")
+  });
+  var followIcon = isStackItem ? stackIcon : icon;
   return /*#__PURE__*/React.createElement(ServerAction, _extends({
-    content: /*#__PURE__*/React.createElement(FormattedMessage, message),
-    icon: icon,
+    content: /*#__PURE__*/React.createElement(FormattedMessage, label),
+    icon: followIcon,
     testId: "smart-action-follow-action",
-    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, message)
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage)
   }, data, props));
 };
 export default FollowAction;

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

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import Icon from '@atlaskit/icon';
+import React from 'react';
+var ProjectsGlyph = function ProjectsGlyph(props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.88573 4.00002C9.70892 4.00002 9.53935 4.07026 9.41433 4.19528L6.97282 6.63678L4.20525 6.94429C4.05479 6.96101 3.91451 7.02844 3.80746 7.13548L3.60959 7.33335L4.35367 8.07743C4.6791 8.40287 4.6791 8.93051 4.35367 9.25594L3.47152 10.1381C3.21117 10.3984 2.78906 10.3984 2.52871 10.1381C2.26836 9.87774 2.26836 9.45563 2.52871 9.19528L3.0573 8.66669L2.43108 8.04046C2.04055 7.64993 2.04055 7.01677 2.43108 6.62625L2.86465 6.19267C3.18578 5.87154 3.60664 5.66927 4.05801 5.61911L6.36073 5.36326L8.47152 3.25247C8.84659 2.8774 9.3553 2.66669 9.88573 2.66669H12.0001C12.7365 2.66669 13.3334 3.26364 13.3334 4.00002V6.1144C13.3334 6.64483 13.1227 7.15354 12.7477 7.52862L10.6369 9.6394L10.381 11.9421C10.3309 12.3935 10.1286 12.8143 9.80746 13.1355L9.37389 13.5691C8.98336 13.9596 8.3502 13.9596 7.95967 13.5691L7.33345 12.9428L6.80485 13.4714C6.5445 13.7318 6.12239 13.7318 5.86204 13.4714C5.60169 13.2111 5.60169 12.789 5.86204 12.5286L6.74419 11.6465C7.06963 11.321 7.59726 11.321 7.9227 11.6465L8.66678 12.3905L8.86466 12.1927C8.9717 12.0856 9.03912 11.9453 9.05584 11.7949L9.36335 9.02731L11.8049 6.58581C11.9299 6.46078 12.0001 6.29121 12.0001 6.1144V4.00002H9.88573ZM5.80486 10.1953C6.06521 10.4556 6.06521 10.8777 5.80486 11.1381L3.80486 13.1381C3.54451 13.3984 3.1224 13.3984 2.86205 13.1381C2.6017 12.8777 2.6017 12.4556 2.86205 12.1953L4.86205 10.1953C5.1224 9.93493 5.54451 9.93493 5.80486 10.1953ZM10.0001 6.66669C10.3683 6.66669 10.6668 6.36821 10.6668 6.00002C10.6668 5.63183 10.3683 5.33335 10.0001 5.33335C9.63193 5.33335 9.33346 5.63183 9.33346 6.00002C9.33346 6.36821 9.63193 6.66669 10.0001 6.66669Z",
+    fill: "#0C66E4"
+  }));
+};
+export var ProjectsIcon = function ProjectsIcon(props) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: ProjectsGlyph
+  }, props));
+};

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

@@ -1,6 +1,6 @@
 import { Stack, xcss } from '@atlaskit/primitives';
 import React, { useMemo } from 'react';
-import { SmartLinkSize } from '../../../../../constants';
+import { ActionName, SmartLinkSize } from '../../../../../constants';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import * as Actions from '../../actions';
 import { getPrimitivesPaddingSpaceBySize } from '../../utils';
@@ -10,11 +10,22 @@ var ignoreContainerPaddingStyles = xcss({
   marginLeft: 'calc(var(--container-gap-left) * -1)',
   marginRight: 'calc(var(--container-gap-right) * -1)'
 });
+var DEFAULT_SORT_ORDER = [ActionName.PreviewAction, ActionName.CopyLinkAction];
+var sort = function sort(a, b) {
+  var idxA = DEFAULT_SORT_ORDER.indexOf(a);
+  var idxB = DEFAULT_SORT_ORDER.indexOf(b);
+  if (idxA === -1) {
+    idxA = DEFAULT_SORT_ORDER.length;
+  }
+  if (idxB === -1) {
+    idxB = DEFAULT_SORT_ORDER.length;
+  }
+  return idxA - idxB;
+};
 var ActionBlock = function ActionBlock(_ref) {
   var blockRef = _ref.blockRef,
     onClickCallback = _ref.onClick,
     size = _ref.size,
-    sort = _ref.sort,
     spaceInline = _ref.spaceInline,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-action' : _ref$testId;
@@ -26,9 +37,7 @@ var ActionBlock = function ActionBlock(_ref) {
       return;
     }
     var arr = Object.keys(context.actions);
-    if (sort) {
-      arr.sort(sort);
-    }
+    arr.sort(sort);
     return arr.map(function (name) {
       var Action = name in Actions ? Actions[name] : undefined;
       return Action ? /*#__PURE__*/React.createElement(Action, {
@@ -44,7 +53,7 @@ var ActionBlock = function ActionBlock(_ref) {
         })
       }) : null;
     });
-  }, [context === null || context === void 0 ? void 0 : context.actions, onClickCallback, padding, size, sort, spaceInline]);
+  }, [context === null || context === void 0 ? void 0 : context.actions, onClickCallback, padding, size, spaceInline]);
   return actions ? /*#__PURE__*/React.createElement(Stack, {
     grow: "fill",
     xcss: ignoreContainerPaddingStyles,

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

@@ -12,6 +12,7 @@ import { FormattedMessage } from 'react-intl-next';
 import { SmartLinkSize } from '../../../constants';
 import Icon from './elements/icon';
 import { openEmbedModal } from '../../EmbedModal/utils';
+import Loadable from 'react-loadable';
 export var sizeToButtonSpacing = (_sizeToButtonSpacing = {}, _defineProperty(_sizeToButtonSpacing, SmartLinkSize.Small, 'none'), _defineProperty(_sizeToButtonSpacing, SmartLinkSize.Medium, 'compact'), _defineProperty(_sizeToButtonSpacing, SmartLinkSize.Large, 'compact'), _defineProperty(_sizeToButtonSpacing, SmartLinkSize.XLarge, 'default'), _sizeToButtonSpacing);
 export var getFormattedMessage = function getFormattedMessage(message) {
   if (message) {
@@ -56,6 +57,18 @@ export var getIconWidth = function getIconWidth(size) {
       return '.75rem';
   }
 };
+export var importIcon = function importIcon(importFn) {
+  return Loadable({
+    loader: function loader() {
+      return importFn().then(function (module) {
+        return module.default;
+      });
+    },
+    loading: function loading() {
+      return null;
+    }
+  }); // Because we're using dynamic loading here, TS will not be able to infer the type.
+};
 export var getLinkLineHeight = function getLinkLineHeight(size) {
   switch (size) {
     case SmartLinkSize.XLarge: