@atlaskit/smart-card 36.8.2 → 36.10.0

package/dist/esm/view/BlockCard/views/ErroredView.js

@@ -3,9 +3,6 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["testId"];
 import React, { useMemo } from 'react';
 import WarningIcon from '@atlaskit/icon/core/migration/warning';
-import LegacyWarningIcon from '@atlaskit/icon/glyph/warning';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import Text from '../../FlexibleCard/components/elements/text';
 import { RetryAction } from '../actions/RetryAction';
@@ -28,19 +25,11 @@ var ErroredView = function ErroredView(_ref) {
   return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
     actions: actions,
     testId: testId
-  }), fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(WarningIcon, {
+  }), /*#__PURE__*/React.createElement(WarningIcon, {
     label: "errored-warning-icon",
     color: "var(--ds-icon-warning, #E56910)",
     LEGACY_size: "small",
     testId: "".concat(testId, "-warning-icon")
-  }) :
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
-  React.createElement(LegacyWarningIcon, {
-    label: "errored-warning-icon",
-    size: "small",
-    primaryColor: "var(--ds-icon-warning, ".concat(R300, ")"),
-    testId: "".concat(testId, "-warning-icon")
   }), /*#__PURE__*/React.createElement(Text, {
     maxLines: 3,
     message: {

package/dist/esm/view/BlockCard/views/ForbiddenView.js

@@ -11,9 +11,8 @@ import { useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
 import LegacyLockIcon from '@atlaskit/icon/glyph/lock';
-import { extractProvider } from '@atlaskit/link-extractors';
+import { extractProvider, extractSmartLinkProvider } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { R300 } from '@atlaskit/theme/colors';
 import { extractRequestAccessContextImproved } from '../../../extractors/common/context/extractAccessContext';
 import extractHostname from '../../../extractors/common/hostname/extractHostname';
 import { messages } from '../../../messages';
@@ -45,7 +44,7 @@ var ForbiddenView = function ForbiddenView(_ref) {
     url = props.url;
   var details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
   var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
-  var provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
+  var provider = fg('smart_links_noun_support') ? extractSmartLinkProvider(details) : extractProvider(details === null || details === void 0 ? void 0 : details.data);
   var providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
   var messageContext = useMemo(function () {
     var hostname = /*#__PURE__*/React.createElement("b", null, extractHostname(url));
@@ -83,20 +82,12 @@ var ForbiddenView = function ForbiddenView(_ref) {
     showPreview: true,
     testId: testId,
     title: title
-  }), fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(LockLockedIcon, {
+  }), /*#__PURE__*/React.createElement(LockLockedIcon, {
     label: "forbidden-lock-icon",
     color: "var(--ds-icon-danger, #C9372C)",
     LEGACY_fallbackIcon: LegacyLockIcon,
     LEGACY_size: "small",
     testId: "".concat(testId, "-lock-icon")
-  }) :
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
-  React.createElement(LegacyLockIcon, {
-    label: "forbidden-lock-icon",
-    size: "small",
-    primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
-    testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/React.createElement(Text, {
     maxLines: 3,
     message: {

package/dist/esm/view/BlockCard/views/NotFoundView.js

@@ -9,9 +9,8 @@ import { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
 import LegacyLockIcon from '@atlaskit/icon/glyph/lock';
-import { extractProvider } from '@atlaskit/link-extractors';
+import { extractProvider, extractSmartLinkProvider } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import Text from '../../FlexibleCard/components/elements/text';
 import UnresolvedView from './unresolved-view';
@@ -25,17 +24,16 @@ var textStyles = null;
  * @see FlexibleCardProps
  */
 var NotFoundView = function NotFoundView(_ref) {
-  var _cardState$details2;
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId,
     props = _objectWithoutProperties(_ref, _excluded);
   var intl = useIntl();
-  var cardState = props.cardState;
+  var details = props.cardState.details;
   var product = useMemo(function () {
-    var _cardState$details, _provider$text;
-    var provider = extractProvider(cardState === null || cardState === void 0 || (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data);
+    var _provider$text;
+    var provider = fg('smart_links_noun_support') ? extractSmartLinkProvider(details) : extractProvider(details === null || details === void 0 ? void 0 : details.data);
     return (_provider$text = provider === null || provider === void 0 ? void 0 : provider.text) !== null && _provider$text !== void 0 ? _provider$text : '';
-  }, [cardState === null || cardState === void 0 || (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.data]);
+  }, [details]);
   var title = useMemo(function () {
     return intl.formatMessage(messages.not_found_title, {
       product: product
@@ -49,20 +47,12 @@ var NotFoundView = function NotFoundView(_ref) {
   return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
     testId: testId,
     title: title
-  }), fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(LockLockedIcon, {
+  }), /*#__PURE__*/React.createElement(LockLockedIcon, {
     label: "not-found-lock-icon",
     color: "var(--ds-icon-danger, #C9372C)",
     LEGACY_fallbackIcon: LegacyLockIcon,
     LEGACY_size: "small",
     testId: "".concat(testId, "-lock-icon")
-  }) :
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
-  React.createElement(LegacyLockIcon, {
-    label: "not-found-lock-icon",
-    size: "small",
-    primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
-    testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/React.createElement(Text, {
     message: description,
     testId: "".concat(testId, "-message"),

package/dist/esm/view/BlockCard/views/UnauthorisedView.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { extractProvider } from '@atlaskit/link-extractors';
+import { extractProvider, extractSmartLinkProvider } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../messages';
@@ -27,15 +27,15 @@ var contentStyles = null;
  * @see FlexibleCardProps
  */
 var UnauthorisedView = function UnauthorisedView(_ref) {
-  var _cardState$details, _extractProvider;
+  var _cardState$details, _extractSmartLinkProv, _extractProvider;
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-unauthorized-view' : _ref$testId,
     props = _objectWithoutProperties(_ref, _excluded);
   var cardState = props.cardState,
     onAuthorize = props.onAuthorize;
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
-  var providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
-  var isProductIntegrationSupported = hasAuthScopeOverrides(cardState === null || cardState === void 0 ? void 0 : cardState.details);
+  var providerName = fg('smart_links_noun_support') ? (_extractSmartLinkProv = extractSmartLinkProvider(cardState.details)) === null || _extractSmartLinkProv === void 0 ? void 0 : _extractSmartLinkProv.text : (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
+  var isProductIntegrationSupported = hasAuthScopeOverrides(cardState.details);
   var _useAnalyticsEvents = useAnalyticsEvents(),
     fireEvent = _useAnalyticsEvents.fireEvent;
   var handleAuthorize = useCallback(function () {

package/dist/esm/view/BlockCard/views/utils/index.js

@@ -65,7 +65,9 @@ export var getSimulatedBetterMetadata = function getSimulatedBetterMetadata(card
           }, {
             name: ElementName.OwnedBy
           }].concat(baseTopMetadata) : defaultTopMetadata,
-          bottomMetadata: defaultBottomMetadata
+          bottomMetadata: [{
+            name: ElementName.AppliedToComponentsCount
+          }].concat(baseBottomMetaData)
         };
       } else {
         return {

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

@@ -5,7 +5,6 @@ var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "t
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkWidth } from '../../../../../../constants';
 import { LinkIcon } from '../../../elements';
 import Block from '../../block';
@@ -37,12 +36,11 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
   var subtitleElements = renderElementItems(subtitle);
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-resolved-view")
-  }), !hideIcon && /*#__PURE__*/React.createElement(LinkIcon, _extends({
+  }), !hideIcon && /*#__PURE__*/React.createElement(LinkIcon, {
     overrideIcon: icon,
-    position: position
-  }, fg('platform-smart-card-icon-migration') && {
+    position: position,
     size: size
-  })), /*#__PURE__*/React.createElement(ElementGroup, {
+  }), /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Vertical,
     width: SmartLinkWidth.Flexible,
     size: blockProps.size,

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

@@ -1,24 +1,12 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["actionGroup", "testId", "title", "hideIcon"];
-import "./index.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
-
-import { fg } from '@atlaskit/platform-feature-flags';
+import React from 'react';
 import { SmartLinkSize } from '../../../../../../constants';
-import { LoadingSkeletonNew, LoadingSkeletonOld } from '../../../common/loading-skeleton';
+import { LoadingSkeleton } from '../../../common/loading-skeleton';
 import { getIconWidthNew } from '../../../utils';
 import Block from '../../block';
-var iconStyle = {
-  xlarge: "_16jlidpf _1o9zidpf _i0dl1wug _4t3iviql _1tkeviql _c71lviql _1bsbviql _1ul9viql _p12fviql _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7viql _1xjxviql _1752viql _qci8viql _15izviql _erubviql _19l3viql _1pr2viql _1u5tviql _mezjviql _e2ooviql _w8l5viql _1rg2viql _q7cvviql _xwbjviql _rtysviql _b8nkviql _4x20viql",
-  large: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
-  medium: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1j6v _1tke1j6v _c71l1j6v _1bsb1j6v _1ul91j6v _p12f1j6v _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71j6v _1xjx1j6v _17521j6v _qci81j6v _15iz1j6v _erub1j6v _19l31j6v _1pr21j6v _1u5t1j6v _mezj1j6v _e2oo1j6v _w8l51j6v _1rg21j6v _q7cv1j6v _xwbj1j6v _rtys1j6v _b8nk1j6v _4x201j6v",
-  small: "_16jlidpf _1o9zidpf _i0dl1wug _4t3ioqnp _1tkeoqnp _c71loqnp _1bsboqnp _1ul9oqnp _p12foqnp _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7oqnp _1xjxoqnp _1752oqnp _qci8oqnp _15izoqnp _eruboqnp _19l3oqnp _1pr2oqnp _1u5toqnp _mezjoqnp _e2oooqnp _w8l5oqnp _1rg2oqnp _q7cvoqnp _xwbjoqnp _rtysoqnp _b8nkoqnp _4x20oqnp"
-};
-
 /**
  * This represents a TitleBlock for a Smart Link that is currently waiting
  * for a request to finish.
@@ -33,28 +21,18 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
     blockProps = _objectWithoutProperties(_ref, _excluded);
   var _blockProps$size = blockProps.size,
     size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
-  if (fg('platform-smart-card-icon-migration')) {
-    var iconWidth = getIconWidthNew(size);
-    return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
-      testId: "".concat(testId, "-resolving-view")
-    }), !hideIcon && /*#__PURE__*/React.createElement("span", {
-      style: {
-        width: iconWidth,
-        height: iconWidth
-      },
-      "data-testid": "".concat(testId, "-icon")
-    }, /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
-      width: iconWidth,
-      height: iconWidth,
-      testId: "".concat(testId, "-icon-loading")
-    })), title, actionGroup);
-  }
+  var iconWidth = getIconWidthNew(size);
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
   }), !hideIcon && /*#__PURE__*/React.createElement("span", {
-    "data-testid": "".concat(testId, "-icon"),
-    className: ax([iconStyle[size]])
-  }, /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
+    style: {
+      width: iconWidth,
+      height: iconWidth
+    },
+    "data-testid": "".concat(testId, "-icon")
+  }, /*#__PURE__*/React.createElement(LoadingSkeleton, {
+    width: iconWidth,
+    height: iconWidth,
     testId: "".concat(testId, "-icon-loading")
   })), title, actionGroup);
 };

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

@@ -13,7 +13,7 @@ import ElementGroup from './element-group';
 
 // Determine whether the element can be display as inline/block.
 
-export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ElementDisplaySchema, ElementName.AssignedTo, ['inline']), ElementName.AssignedToGroup, ['inline']), ElementName.AttachmentCount, ['inline']), ElementName.AuthorGroup, ['inline']), ElementName.ChecklistProgress, ['inline']), ElementName.CollaboratorGroup, ['inline']), ElementName.CommentCount, ['inline']), ElementName.CreatedBy, ['inline']), ElementName.CreatedOn, ['inline']), ElementName.DueOn, ['inline']), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ElementDisplaySchema, ElementName.LatestCommit, ['inline']), ElementName.LinkIcon, ['inline']), ElementName.Location, ['inline']), ElementName.ModifiedBy, ['inline']), ElementName.ModifiedOn, ['inline']), ElementName.OwnedBy, ['inline']), ElementName.OwnedByGroup, ['inline']), ElementName.Preview, ['block']), ElementName.Priority, ['inline']), ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), ElementName.ReactCount, ['inline']), ElementName.ReadTime, ['inline']), ElementName.Snippet, ['block']), ElementName.SourceBranch, ['inline']), ElementName.SentOn, ['inline']), ElementName.State, ['inline']), ElementName.SubscriberCount, ['inline']), ElementName.SubTasksProgress, ['inline']), ElementName.StoryPoints, ['inline']), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_ElementDisplaySchema, ElementName.TargetBranch, ['inline']), ElementName.Title, ['inline']), ElementName.ViewCount, ['inline']), ElementName.VoteCount, ['inline']));
+export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ElementDisplaySchema, ElementName.AssignedTo, ['inline']), ElementName.AssignedToGroup, ['inline']), ElementName.AttachmentCount, ['inline']), ElementName.AuthorGroup, ['inline']), ElementName.AppliedToComponentsCount, ['inline']), ElementName.ChecklistProgress, ['inline']), ElementName.CollaboratorGroup, ['inline']), ElementName.CommentCount, ['inline']), ElementName.CreatedBy, ['inline']), ElementName.CreatedOn, ['inline']), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ElementDisplaySchema, ElementName.DueOn, ['inline']), ElementName.LatestCommit, ['inline']), ElementName.LinkIcon, ['inline']), ElementName.Location, ['inline']), ElementName.ModifiedBy, ['inline']), ElementName.ModifiedOn, ['inline']), ElementName.OwnedBy, ['inline']), ElementName.OwnedByGroup, ['inline']), ElementName.Preview, ['block']), ElementName.Priority, ['inline']), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), ElementName.Provider, ['inline']), ElementName.ReactCount, ['inline']), ElementName.ReadTime, ['inline']), ElementName.Snippet, ['block']), ElementName.SourceBranch, ['inline']), ElementName.SentOn, ['inline']), ElementName.State, ['inline']), ElementName.SubscriberCount, ['inline']), ElementName.SubTasksProgress, ['inline']), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ElementDisplaySchema, ElementName.StoryPoints, ['inline']), ElementName.TargetBranch, ['inline']), ElementName.Title, ['inline']), ElementName.ViewCount, ['inline']), ElementName.VoteCount, ['inline']));
 
 /**
  * Get gap size between elements inside a block

package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js

@@ -1,8 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import ImageLoader from 'react-render-image';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { LoadingSkeletonNew, LoadingSkeletonOld } from '../loading-skeleton';
+import { LoadingSkeleton } from '../loading-skeleton';
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
     testId = _ref.testId,
@@ -11,10 +9,9 @@ var ImageIcon = function ImageIcon(_ref) {
     height = _ref.height,
     onError = _ref.onError,
     onLoad = _ref.onLoad;
-  return /*#__PURE__*/React.createElement(ImageLoader, _extends({
-    src: url
-  }, fg('platform-smart-card-icon-migration') ? {
-    loading: /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+  return /*#__PURE__*/React.createElement(ImageLoader, {
+    src: url,
+    loading: /*#__PURE__*/React.createElement(LoadingSkeleton, {
       testId: "".concat(testId, "-loading"),
       width: width,
       height: height
@@ -27,20 +24,10 @@ var ImageIcon = function ImageIcon(_ref) {
         width: width,
         height: height
       }
-    })
-  } : {
-    loading: /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
-      testId: "".concat(testId, "-loading")
     }),
-    loaded: /*#__PURE__*/React.createElement("img", {
-      src: url,
-      "data-testid": "".concat(testId, "-image"),
-      alt: ""
-    })
-  }, {
     errored: defaultIcon,
     onError: onError,
     onLoad: onLoad
-  }));
+  });
 };
 export default ImageIcon;

package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -1,11 +1,10 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
-import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 var animationNameStyles = null;
 var loadingSkeletonStyle = null;
-var LoadingSkeletonNew = function LoadingSkeletonNew(_ref) {
+export var LoadingSkeleton = function LoadingSkeleton(_ref) {
   var testId = _ref.testId,
     width = _ref.width,
     height = _ref.height;
@@ -18,11 +17,4 @@ var LoadingSkeletonNew = function LoadingSkeletonNew(_ref) {
       "--_16116mi": ix("linear-gradient( to right, transparent 0%, ".concat("var(--ds-skeleton, #edeef1)", " 20%, transparent 40%, transparent 100% )"))
     }
   });
-};
-var LoadingSkeletonOld = function LoadingSkeletonOld(props) {
-  return /*#__PURE__*/React.createElement(LoadingSkeletonNew, _extends({}, props, {
-    width: "".concat(props.width, "rem"),
-    height: "".concat(props.height, "rem")
-  }));
-};
-export { LoadingSkeletonOld, LoadingSkeletonNew };
+};

package/dist/esm/view/FlexibleCard/components/elements/applied-to-components-count/index.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useContext } from 'react';
+import { useIntl } from 'react-intl-next';
+import { IconType } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import Badge from '../badge';
+var AppliedToComponentsCount = function AppliedToComponentsCount(props) {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var context = useContext(FlexibleUiContext);
+  if (
+  // Check for null and undefined, render if it's 0.
+  (context === null || context === void 0 ? void 0 : context.appliedToComponentsCount) === null || (context === null || context === void 0 ? void 0 : context.appliedToComponentsCount) === undefined) {
+    return null;
+  }
+  var label = formatMessage(messages.compass_applied_components_count, {
+    numberOfComponents: context.appliedToComponentsCount
+  });
+  return /*#__PURE__*/React.createElement(Badge, _extends({
+    icon: IconType.Component,
+    label: label
+  }, props));
+};
+export default AppliedToComponentsCount;

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

@@ -173,4 +173,5 @@ export var ViewCount = createElement(ElementName.ViewCount);
  * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
  * @see Badge
  */
-export var VoteCount = createElement(ElementName.VoteCount);
+export var VoteCount = createElement(ElementName.VoteCount);
+export { default as AppliedToComponentsCount } from './applied-to-components-count';

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

@@ -7,6 +7,7 @@ import { FormattedDate } from 'react-intl-next';
 import { ElementName, IconType, SmartLinkInternalTheme } from '../../../../constants';
 import { messages } from '../../../../messages';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
+import AppliedToComponentsCount from './applied-to-components-count';
 import AtlaskitBadge from './atlaskit-badge';
 import AvatarGroup from './avatar-group';
 import Badge from './badge';
@@ -16,7 +17,12 @@ import Link from './link';
 import Lozenge from './lozenge';
 import Media from './media';
 import Text from './text';
-var elementMappings = (_elementMappings = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_elementMappings, ElementName.AttachmentCount, {
+var elementMappings = (_elementMappings = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_elementMappings, ElementName.AppliedToComponentsCount, {
+  component: AppliedToComponentsCount,
+  props: {
+    icon: IconType.Component
+  }
+}), ElementName.AttachmentCount, {
   component: Badge,
   props: {
     icon: IconType.Attachment
@@ -52,9 +58,9 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_defineProperty(_d
   }
 }), ElementName.CreatedBy, {
   component: Text
-}), ElementName.OwnedBy, {
+}), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_elementMappings, ElementName.OwnedBy, {
   component: Text
-}), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_elementMappings, ElementName.AssignedTo, {
+}), ElementName.AssignedTo, {
   component: Text
 }), ElementName.AssignedToGroup, {
   component: AvatarGroup
@@ -75,9 +81,9 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_defineProperty(_d
   component: Text
 }), ElementName.ModifiedOn, {
   component: DateTime
-}), ElementName.Preview, {
+}), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_elementMappings, ElementName.Preview, {
   component: Media
-}), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_elementMappings, ElementName.Priority, {
+}), ElementName.Priority, {
   component: Badge
 }), ElementName.ProgrammingLanguage, {
   component: Badge,
@@ -104,9 +110,9 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_defineProperty(_d
   props: {
     icon: IconType.SubTasksProgress
   }
-}), ElementName.StoryPoints, {
+}), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_elementMappings, ElementName.StoryPoints, {
   component: AtlaskitBadge
-}), _defineProperty(_defineProperty(_defineProperty(_elementMappings, ElementName.TargetBranch, {
+}), ElementName.TargetBranch, {
   component: Text
 }), ElementName.Title, {
   component: Link
@@ -134,6 +140,7 @@ var getData = function getData(elementName, contextKey, context) {
       var AvatarGroupsWithFallback = [ElementName.AssignedToGroup];
       var showFallbackAvatar = AvatarGroupsWithFallback.includes(elementName);
       return toAvatarGroupProps(data, showFallbackAvatar);
+    case ElementName.AppliedToComponentsCount:
     case ElementName.AttachmentCount:
     case ElementName.ChecklistProgress:
     case ElementName.CommentCount:

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

@@ -1,11 +1,11 @@
-import { extractProvider } from '@atlaskit/link-extractors';
+import { extractProvider, extractSmartLinkProvider, isEntityPresent } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkStatus } from '../../constants';
 import { extractRequestAccessContextImproved } from '../../extractors/common/context';
 import extractFlexibleUiContext from '../../extractors/flexible';
-import extractPreview from '../../extractors/flexible/extract-preview';
+import extractPreview, { extractSmartLinkPreviewImage } from '../../extractors/flexible/extract-preview';
 import { extractErrorIcon } from '../../extractors/flexible/icon';
-import extractProviderIcon from '../../extractors/flexible/icon/extract-provider-icon';
+import extractProviderIcon, { extractSmartLinkProviderIcon } from '../../extractors/flexible/icon/extract-provider-icon';
 import { messages } from '../../messages';
 import { handleOnClick } from '../../utils';
 import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
@@ -29,15 +29,23 @@ export var getContextByStatus = function getContextByStatus(params) {
     case SmartLinkStatus.Errored:
     case SmartLinkStatus.Fallback:
     default:
-      var preview = extractPreview(response === null || response === void 0 ? void 0 : response.data);
-      var linkIcon = extractErrorIcon(response, status);
-      var provider = extractProviderIcon(response === null || response === void 0 ? void 0 : response.data);
+      if (fg('smart_links_noun_support')) {
+        if (isEntityPresent(response)) {
+          return {
+            url: url,
+            title: url,
+            linkIcon: extractErrorIcon(response, status),
+            preview: extractSmartLinkPreviewImage(response),
+            provider: extractSmartLinkProviderIcon(response)
+          };
+        }
+      }
       return {
-        linkIcon: linkIcon,
-        title: url,
         url: url,
-        provider: provider,
-        preview: preview
+        title: url,
+        linkIcon: extractErrorIcon(response, status),
+        preview: extractPreview(response === null || response === void 0 ? void 0 : response.data),
+        provider: extractProviderIcon(response === null || response === void 0 ? void 0 : response.data)
       };
   }
 };
@@ -62,7 +70,7 @@ var getForbiddenMessageKey = function getForbiddenMessageKey(meta) {
 export var getRetryOptions = function getRetryOptions(url, status, response, onAuthorize) {
   var _response$meta, _access$action, _access$buttonDisable;
   var data = response && response.data || getEmptyJsonLd();
-  var provider = extractProvider(data);
+  var provider = fg('smart_links_noun_support') ? extractSmartLinkProvider(response) : extractProvider(data);
   var context = provider === null || provider === void 0 ? void 0 : provider.text;
   var values = context ? {
     context: context

package/dist/esm/view/HoverCard/components/views/resolving/index.js

@@ -3,10 +3,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
 import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
-import { LoadingSkeletonNew, LoadingSkeletonOld } from '../../../../FlexibleCard/components/common/loading-skeleton';
+import { LoadingSkeleton } from '../../../../FlexibleCard/components/common/loading-skeleton';
 import Icon from '../../../../FlexibleCard/components/elements/icon';
 import { CARD_WIDTH_REM } from '../../../styled';
 var loadingViewContainer = null;
@@ -24,7 +23,6 @@ var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
     items: actions,
     visibleButtonsNum: 2
   });
-  var LoadingSkeleton = fg('platform-smart-card-icon-migration') ? LoadingSkeletonNew : LoadingSkeletonOld;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     className: ax(["_1e0c1txw _2lx21bp4 _ca0q1e9d _u5f31e9d _n3td1e9d _19bv1e9d"])
@@ -41,28 +39,17 @@ var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
   }), /*#__PURE__*/React.createElement("span", {
     "data-testid": "".concat(testId, "-title"),
     className: ax(["_16jlkb7n _1o9zidpf _i0dl1wug _4t3i1k92 _e2oo1osq"])
-  }, fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+  }, /*#__PURE__*/React.createElement(LoadingSkeleton, {
     height: "".concat(lineHeightRem, "rem")
-  }) : /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
-    height: lineHeightRem
-  })), actionGroup), fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+  })), actionGroup), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingSkeleton, {
     width: "".concat(skeletonWidth, "rem"),
     height: "".concat(lineHeightRem, "rem")
-  }), /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+  }), /*#__PURE__*/React.createElement(LoadingSkeleton, {
     width: "".concat(skeletonWidth, "rem"),
     height: "".concat(lineHeightRem * 3, "rem")
-  }), /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+  }), /*#__PURE__*/React.createElement(LoadingSkeleton, {
     width: "".concat(skeletonWidth, "rem"),
     height: "".concat(lineHeightRem, "rem")
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
-    width: skeletonWidth,
-    height: lineHeightRem
-  }), /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
-    width: skeletonWidth,
-    height: lineHeightRem * 3
-  }), /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
-    width: skeletonWidth,
-    height: lineHeightRem
   }))));
 };
 export default HoverCardLoadingView;

package/dist/esm/view/InlineCard/ErroredView/index.js

@@ -8,12 +8,10 @@ import ErrorIconCore from '@atlaskit/icon/core/migration/error';
 import ErrorIcon from '@atlaskit/icon/utility/migration/error';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
-import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
 import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
-import { AKIconWrapper } from '../Icon';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
@@ -29,21 +27,13 @@ var fallbackIcon = function fallbackIcon() {
       testId: "errored-view-default-icon"
     });
   }
-  if (fg('platform-smart-card-icon-migration')) {
-    return /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: styles.iconWrapper
-    }, /*#__PURE__*/React.createElement(ErrorIcon, {
-      color: "var(--ds-icon-danger, #C9372C)",
-      label: "error",
-      LEGACY_size: "small",
-      testId: "errored-view-default-icon"
-    }));
-  }
-  return /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    color: "var(--ds-icon-danger, #C9372C)",
     label: "error",
     LEGACY_size: "small",
-    color: "var(--ds-icon-danger, ".concat(R300, ")"),
     testId: "errored-view-default-icon"
   }));
 };

package/dist/esm/view/InlineCard/ForbiddenView/index.js

@@ -11,12 +11,11 @@ import LegacyLockIcon from '@atlaskit/icon/glyph/lock-filled';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Pressable } from '@atlaskit/primitives/compiled';
-import { N500, R400 } from '@atlaskit/theme/colors';
+import { N500 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
 import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
-import { AKIconWrapper } from '../Icon';
 import { IconAndTitleLayout, LozengeWrapper } from '../IconAndTitleLayout';
 import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
@@ -34,7 +33,7 @@ var fallbackForbiddenIcon = function fallbackForbiddenIcon() {
       testId: "forbidden-view-fallback-icon"
     });
   }
-  return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.iconWrapper
   }, /*#__PURE__*/React.createElement(LockLockedIcon, {
@@ -43,11 +42,6 @@ var fallbackForbiddenIcon = function fallbackForbiddenIcon() {
     LEGACY_fallbackIcon: LegacyLockIcon,
     LEGACY_size: "small",
     testId: "forbidden-view-fallback-icon"
-  })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
-    label: "error",
-    size: "small",
-    primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
-    testId: "forbidden-view-fallback-icon"
   }));
 };
 export var InlineCardForbiddenView = function InlineCardForbiddenView(_ref) {