@atlaskit/smart-card 26.58.0 → 26.59.0

package/dist/cjs/extractors/common/icon/extractIcon.js

@@ -38,6 +38,17 @@ var extractIcon = exports.extractIcon = function extractIcon(jsonLd) {
     return extractIconByType(type, opts);
   }
 };
+
+/**
+ * Extracts an icon based on the given type.
+ * 
+ * Some types return hardcoded icons, while others follow a priority list on how to pick the icon.
+ * If type is not recognized, it will return the icon from the provider, or `undefined` if no icon is found.
+ *
+ * @param type - The type of the object.
+ * @param opts - Options for the icon extraction.
+ * @returns The extracted icon as a React node, or `undefined` if no icon is found.
+ */
 var extractIconByType = function extractIconByType(type, opts) {
   switch (type) {
     case 'Document':

package/dist/cjs/extractors/common/icon/extractIconFromDocument.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractIconFromDocument = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/blog/16"));
 var _2 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/generic/16"));
 var _3 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/presentation/16"));
@@ -13,10 +14,29 @@ var _4 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/spreadsh
 var _5 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/document/16"));
 var _documentFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/document-filled"));
 var _utils = require("../../../utils");
+var _prioritiseIcon = require("./prioritiseIcon");
+/**
+ * Extracts an icon for a document pbject
+ *
+ * @param type - The type of the document.
+ * @param opts - The options for extracting the icon.
+ * @returns The React node representing the extracted icon, or `undefined` if no icon is found.
+ */
 var extractIconFromDocument = exports.extractIconFromDocument = function extractIconFromDocument(type, opts) {
+  var provider = opts.provider;
   var iconFromType = documentTypeToIcon(type, opts);
   var iconFromFileFormat = documentFileFormatToIcon(opts);
   var iconFromProvider = opts.provider && opts.provider.icon;
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.standardise-smart-link-icon-behaviour')) {
+    var providerId = provider === null || provider === void 0 ? void 0 : provider.id;
+    return (0, _prioritiseIcon.prioritiseIcon)({
+      providerId: providerId,
+      fileFormatIcon: iconFromFileFormat,
+      documentTypeIcon: iconFromType,
+      urlIcon: opts.icon,
+      providerIcon: iconFromProvider
+    });
+  }
   // If we encounter a native provider, we privilege the
   // icon generated by its type. Otherwise, we privilege the
   // provider icon, followed by the type & mime type icons.

package/dist/cjs/extractors/common/icon/extractIconFromTask.js

@@ -16,6 +16,14 @@ var _7 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/issue/16"))
 var _8 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/changes/16"));
 var _9 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/problem/16"));
 var _constants = require("../../constants");
+/**
+ * Chooses an icon for a task based on the provided options.
+ *
+ * Chooses icon based on variety of Jira task types, based on opts.taskType.id
+ *
+ * @param opts - The options for extracting the icon.
+ * @returns The React node representing the extracted icon, or `undefined` if no icon is found.
+ */
 var extractIconFromTask = exports.extractIconFromTask = function extractIconFromTask(opts) {
   // Render Atlaskit icons for all supported Jira issue types.
   var taskType = opts.taskType,

package/dist/cjs/extractors/common/icon/prioritiseIcon.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prioritiseIcon = prioritiseIcon;
+var _constants = require("../../constants");
+var isConfluenceProvider = function isConfluenceProvider(provider) {
+  return provider === _constants.CONFLUENCE_GENERATOR_ID;
+};
+var isJiraProvider = function isJiraProvider(provider) {
+  return provider === _constants.JIRA_GENERATOR_ID;
+};
+var isNativeProvider = function isNativeProvider(provider) {
+  return isConfluenceProvider(provider) || isJiraProvider(provider);
+};
+
+/**
+ * Represents an icon. Should either contain a label and url, or a an icon type and label.
+ */
+
+/**
+ * Options required to prioritise which icon to show
+ */
+
+/**
+ * Reusable priority function for choosing which icon to show.
+ * Generic so it can be used to prioritise strings, or React components depending on the usage.
+ */
+function prioritiseIcon(_ref) {
+  var providerId = _ref.providerId,
+    fileFormatIcon = _ref.fileFormatIcon,
+    documentTypeIcon = _ref.documentTypeIcon,
+    urlIcon = _ref.urlIcon,
+    providerIcon = _ref.providerIcon;
+  if (isNativeProvider(providerId)) {
+    return fileFormatIcon || documentTypeIcon || urlIcon || providerIcon;
+  }
+  return urlIcon || fileFormatIcon || documentTypeIcon || providerIcon;
+}

package/dist/cjs/extractors/common/icon/priority.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extractorPriorityMap = void 0;
+/**
+ * Preference more detailed object types over less detailed ones (like 'Document' or 'Object').
+ */
 var extractorPriorityMap = exports.extractorPriorityMap = {
   Object: 0,
   Document: 5,

package/dist/cjs/extractors/common/lozenge/extractState.js

@@ -5,6 +5,49 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractState = void 0;
 var _utils = require("./utils");
+// Maps accent color short names to their corresponding background and text colors
+var lozengeAccentStyles = {
+  blue: {
+    backgroundColor: "var(--ds-background-accent-blue-subtler, #CCE0FF)",
+    color: "var(--ds-text-accent-blue, #0055CC)"
+  },
+  gray: {
+    backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)",
+    color: "var(--ds-text-accent-gray, #44546F)"
+  },
+  green: {
+    backgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+    color: "var(--ds-text-accent-green, #216E4E)"
+  },
+  lime: {
+    backgroundColor: "var(--ds-background-accent-lime-subtler, #D3F1A7)",
+    color: "var(--ds-text-accent-lime, #4C6B1F)"
+  },
+  magenta: {
+    backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
+    color: "var(--ds-text-accent-magenta, #943D73)"
+  },
+  orange: {
+    backgroundColor: "var(--ds-background-accent-orange-subtler, #FEDEC8)",
+    color: "var(--ds-text-accent-orange, #A54800)"
+  },
+  purple: {
+    backgroundColor: "var(--ds-background-accent-purple-subtler, #DFD8FD)",
+    color: "var(--ds-text-accent-purple, #5E4DB2)"
+  },
+  red: {
+    backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+    color: "var(--ds-text-accent-red, #AE2E24)"
+  },
+  teal: {
+    backgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
+    color: "var(--ds-text-accent-teal, #206A83)"
+  },
+  yellow: {
+    backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
+    color: "var(--ds-text-accent-yellow, #7F5F01)"
+  }
+};
 var extractState = exports.extractState = function extractState(jsonLd) {
   var state = jsonLd['atlassian:state'];
   if (state) {
@@ -16,18 +59,13 @@ var extractState = exports.extractState = function extractState(jsonLd) {
           appearance: _utils.VALID_STATES[linkState] || 'default'
         };
       }
-    } else if (state['@type'] === 'Link') {
-      if (state.name) {
-        return {
-          text: state.name,
-          appearance: state.appearance || 'default'
-        };
-      }
-    } else if (state['@type'] === 'Object') {
+    } else if (state['@type'] === 'Link' || state['@type'] === 'Object') {
       if (state.name) {
+        var accent = state.accent;
         return {
           text: state.name,
-          appearance: state.appearance || 'default'
+          appearance: state.appearance || 'default',
+          style: accent ? lozengeAccentStyles[accent] : undefined
         };
       }
     }

package/dist/cjs/extractors/flexible/icon/extract-jsonld-data-icon.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../constants");
 var _extractDocumentTypeIcon = _interopRequireDefault(require("./extract-document-type-icon"));
 var _extractFileFormatIcon = _interopRequireDefault(require("./extract-file-formatIcon"));
@@ -15,6 +16,7 @@ var _lozenge = require("../../common/lozenge");
 var _linkExtractors = require("@atlaskit/link-extractors");
 var _priority = require("../../common/icon/priority");
 var _constants2 = require("../../../constants");
+var _prioritiseIcon = require("../../common/icon/prioritiseIcon");
 var extractTask = function extractTask(data, label) {
   var _ref = (0, _lozenge.extractTaskType)(data) || {},
     id = _ref.id,
@@ -44,6 +46,10 @@ var isJiraProvider = function isJiraProvider(provider) {
 var isNativeProvider = function isNativeProvider(provider) {
   return isConfluenceProvider(provider) || isJiraProvider(provider);
 };
+
+/**
+ * Return the icon object given a JSON-LD data object.
+ */
 var extractJsonldDataIcon = function extractJsonldDataIcon(data) {
   var generator = data.generator;
   var label = (0, _linkExtractors.extractTitle)(data);
@@ -68,6 +74,15 @@ var extractJsonldDataIcon = function extractJsonldDataIcon(data) {
       var fileFormat = documentData === null || documentData === void 0 ? void 0 : documentData['schema:fileFormat'];
       var fileFormatIcon = (0, _extractFileFormatIcon.default)(fileFormat);
       var documentTypeIcon = (0, _extractDocumentTypeIcon.default)(type, label);
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.standardise-smart-link-icon-behaviour')) {
+        return (0, _prioritiseIcon.prioritiseIcon)({
+          providerId: provider,
+          fileFormatIcon: fileFormatIcon,
+          documentTypeIcon: documentTypeIcon,
+          urlIcon: urlIcon,
+          providerIcon: providerIcon
+        });
+      }
       return isNativeProvider(provider) ? fileFormatIcon || documentTypeIcon || urlIcon || providerIcon : providerIcon || fileFormatIcon || documentTypeIcon;
     case 'atlassian:Task':
       var taskLabel = label || 'Task';

package/dist/cjs/extractors/flexible/icon/extract-provider-icon.js

@@ -9,6 +9,16 @@ var _constants = require("../../constants");
 var _constants2 = require("../../../constants");
 var _extractUrlIcon = _interopRequireDefault(require("./extract-url-icon"));
 var _linkExtractors = require("@atlaskit/link-extractors");
+/**
+ * Extracts the provider icon and label from the given JSON-LD data.
+ *
+ * If the data is from Confluence, the icon will be the Confluence icon and the label will be 'Confluence'.
+ * If the data is from Jira, the icon will be the Jira icon and the label will be 'Jira'.
+ * If the data is from another provider, the icon and label will be extracted from the generator object.
+ *
+ * @param data - The JSON-LD data to extract the provider icon and label from.
+ * @returns IconDescriptor with optional icon string name, url and label, or `undefined` if the data is not provided.
+ */
 var extractProviderIcon = function extractProviderIcon(data) {
   if (!data) {
     return undefined;

package/dist/cjs/extractors/flexible/icon/extract-url-icon.js

@@ -5,6 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _linkExtractors = require("@atlaskit/link-extractors");
+/**
+ * Extracts the URL icon from the given icon or link object.
+ *
+ * @param icon - The icon or link object from which to extract the URL icon.
+ * @param label - The label for the URL icon.
+ * @returns IconDescriptor, which will contain label and url, or undefined
+ */
 var extractUrlIcon = function extractUrlIcon(icon, label) {
   var url = icon && (0, _linkExtractors.extractUrlFromIconJsonLd)(icon);
   return url ? {

package/dist/cjs/utils/analytics/analytics.js

@@ -22,7 +22,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.58.0"
+  packageVersion: "26.59.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/BlockCard/views/ResolvedView.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.blockCardResolvedViewClassName = exports.blockCardResolvedViewByClassName = exports.ResolvedView = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _Frame = require("../components/Frame");
@@ -25,6 +26,11 @@ var _utils = require("../../common/utils");
 var _handlers = require("../utils/handlers");
 /** @jsx jsx */
 
+var styles = (0, _react.css)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start'
+});
 /**
  * Class name for selecting non-flexible resolved block card
  *
@@ -89,11 +95,7 @@ var ResolvedView = exports.ResolvedView = function ResolvedView(_ref) {
     testId: testId,
     className: blockCardResolvedViewClassName
   }, (0, _react.jsx)(_Content.Content, null, (0, _react.jsx)("div", null, (0, _react.jsx)("div", {
-    css: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'flex-start'
-    }
+    css: styles
   }, (0, _react.jsx)(_ContentHeader.ContentHeader, {
     onClick: handleClick,
     link: link
@@ -109,7 +111,9 @@ var ResolvedView = exports.ResolvedView = function ResolvedView(_ref) {
       alignItems: 'center',
       justifyContent: 'center'
     }
-  }, (0, _react.jsx)(_lozenge.default, lozenge, lozenge.text))), (0, _react.jsx)(_CollaboratorList.CollaboratorList, {
+  }, (0, _react.jsx)(_lozenge.default, (0, _extends2.default)({
+    style: lozenge.style
+  }, lozenge), lozenge.text))), (0, _react.jsx)(_CollaboratorList.CollaboratorList, {
     items: users,
     handleAvatarClick: handleAvatarClick,
     handleMoreAvatarsClick: handleMoreAvatarsClick,

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

@@ -5,17 +5,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
-var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("react");
 var _constants = require("../../../../../constants");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var Actions = _interopRequireWildcard(require("../../actions"));
 var _utils = require("../../utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// We have to find a better way to ignore container padding
-// This has become more and more of a common use case.
-var ignoreContainerPaddingStyles = (0, _primitives.xcss)({
+/** @jsx jsx */
+
+var ignoreContainerPaddingStyles = (0, _react.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  flexGrow: 1,
+  width: '100%',
+  // We have to find a better way to ignore container padding
+  // This has become more and more of a common use case.
   marginLeft: 'calc(var(--container-gap-left) * -1)',
   marginRight: 'calc(var(--container-gap-right) * -1)'
 });
@@ -41,7 +49,7 @@ var ActionBlock = function ActionBlock(_ref) {
   var context = (0, _flexibleUiContext.useFlexibleUiContext)();
   var ui = (0, _flexibleUiContext.useFlexibleUiOptionContext)();
   var padding = !(ui !== null && ui !== void 0 && ui.hidePadding) ? (0, _utils.getPrimitivesPaddingSpaceBySize)((ui === null || ui === void 0 ? void 0 : ui.size) || _constants.SmartLinkSize.Medium) : undefined;
-  var actions = (0, _react.useMemo)(function () {
+  var actions = (0, _react2.useMemo)(function () {
     if (!(context !== null && context !== void 0 && context.actions)) {
       return;
     }
@@ -49,7 +57,7 @@ var ActionBlock = function ActionBlock(_ref) {
     arr.sort(sort);
     return arr.map(function (name) {
       var Action = name in Actions ? Actions[name] : undefined;
-      return Action ? /*#__PURE__*/_react.default.createElement(Action, {
+      return Action ? (0, _react.jsx)(Action, {
         as: "stack-item",
         spaceInline: spaceInline,
         key: name,
@@ -63,11 +71,10 @@ var ActionBlock = function ActionBlock(_ref) {
       }) : null;
     });
   }, [context === null || context === void 0 ? void 0 : context.actions, onClickCallback, padding, size, spaceInline]);
-  return actions ? /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
-    grow: "fill",
-    xcss: ignoreContainerPaddingStyles,
+  return actions ? (0, _react.jsx)("div", {
+    css: ignoreContainerPaddingStyles,
     ref: blockRef,
-    testId: testId
+    "data-testid": testId
   }, actions) : null;
 };
 var _default = exports.default = ActionBlock;

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/index.js

@@ -29,6 +29,7 @@ var Lozenge = function Lozenge(_ref) {
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     name = _ref.name,
     overrideCss = _ref.overrideCss,
+    style = _ref.style,
     text = _ref.text,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
@@ -44,6 +45,7 @@ var Lozenge = function Lozenge(_ref) {
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
   }) : (0, _react2.jsx)(_lozenge.default, {
     appearance: appearance,
+    style: style,
     testId: "".concat(testId, "-lozenge")
   }, text);
   return (0, _react2.jsx)("span", {

package/dist/cjs/view/InlineCard/ResolvedView/index.js

@@ -32,9 +32,11 @@ var InlineCardResolvedView = exports.InlineCardResolvedView = /*#__PURE__*/funct
       if (!lozenge) {
         return null;
       }
+      var appearance = lozenge.appearance || 'default';
       return /*#__PURE__*/_react.default.createElement(_styled.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         testId: "inline-card-resolved-view-lozenge",
-        appearance: lozenge.appearance || 'default',
+        appearance: appearance,
+        style: lozenge.style,
         isBold: lozenge.isBold
       }, lozenge.text));
     }

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

@@ -17,7 +17,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.58.0",
+  packageVersion: "26.59.0",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/extractors/common/icon/extractIcon.js

@@ -28,6 +28,17 @@ export const extractIcon = (jsonLd, priority = 'type') => {
     return extractIconByType(type, opts);
   }
 };
+
+/**
+ * Extracts an icon based on the given type.
+ * 
+ * Some types return hardcoded icons, while others follow a priority list on how to pick the icon.
+ * If type is not recognized, it will return the icon from the provider, or `undefined` if no icon is found.
+ *
+ * @param type - The type of the object.
+ * @param opts - Options for the icon extraction.
+ * @returns The extracted icon as a React node, or `undefined` if no icon is found.
+ */
 const extractIconByType = (type, opts) => {
   switch (type) {
     case 'Document':

package/dist/es2019/extractors/common/icon/extractIconFromDocument.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import BlogIcon from '@atlaskit/icon-object/glyph/blog/16';
 import FileIcon from '@atlaskit/icon-file-type/glyph/generic/16';
 import PresentationIcon from '@atlaskit/icon-file-type/glyph/presentation/16';
@@ -6,10 +7,31 @@ import SpreadsheetIcon from '@atlaskit/icon-file-type/glyph/spreadsheet/16';
 import DocumentIcon from '@atlaskit/icon-file-type/glyph/document/16';
 import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { getIconForFileType } from '../../../utils';
+import { prioritiseIcon } from './prioritiseIcon';
+/**
+ * Extracts an icon for a document pbject
+ *
+ * @param type - The type of the document.
+ * @param opts - The options for extracting the icon.
+ * @returns The React node representing the extracted icon, or `undefined` if no icon is found.
+ */
 export const extractIconFromDocument = (type, opts) => {
+  const {
+    provider
+  } = opts;
   const iconFromType = documentTypeToIcon(type, opts);
   const iconFromFileFormat = documentFileFormatToIcon(opts);
   const iconFromProvider = opts.provider && opts.provider.icon;
+  if (getBooleanFF('platform.linking-platform.smart-card.standardise-smart-link-icon-behaviour')) {
+    const providerId = provider === null || provider === void 0 ? void 0 : provider.id;
+    return prioritiseIcon({
+      providerId,
+      fileFormatIcon: iconFromFileFormat,
+      documentTypeIcon: iconFromType,
+      urlIcon: opts.icon,
+      providerIcon: iconFromProvider
+    });
+  }
   // If we encounter a native provider, we privilege the
   // icon generated by its type. Otherwise, we privilege the
   // provider icon, followed by the type & mime type icons.

package/dist/es2019/extractors/common/icon/extractIconFromTask.js

@@ -10,6 +10,15 @@ import JiraServiceRequestIcon from '@atlaskit/icon-object/glyph/issue/16';
 import JiraChangeIcon from '@atlaskit/icon-object/glyph/changes/16';
 import JiraProblemIcon from '@atlaskit/icon-object/glyph/problem/16';
 import { JIRA_GENERATOR_ID, JIRA_TASK, JIRA_SUB_TASK, JIRA_STORY, JIRA_BUG, JIRA_EPIC, JIRA_INCIDENT, JIRA_SERVICE_REQUEST, JIRA_CHANGE, JIRA_PROBLEM, JIRA_CUSTOM_TASK_TYPE } from '../../constants';
+
+/**
+ * Chooses an icon for a task based on the provided options.
+ *
+ * Chooses icon based on variety of Jira task types, based on opts.taskType.id
+ *
+ * @param opts - The options for extracting the icon.
+ * @returns The React node representing the extracted icon, or `undefined` if no icon is found.
+ */
 export const extractIconFromTask = opts => {
   // Render Atlaskit icons for all supported Jira issue types.
   const {

package/dist/es2019/extractors/common/icon/prioritiseIcon.js

@@ -0,0 +1,29 @@
+import { CONFLUENCE_GENERATOR_ID, JIRA_GENERATOR_ID } from '../../constants';
+const isConfluenceProvider = provider => provider === CONFLUENCE_GENERATOR_ID;
+const isJiraProvider = provider => provider === JIRA_GENERATOR_ID;
+const isNativeProvider = provider => isConfluenceProvider(provider) || isJiraProvider(provider);
+
+/**
+ * Represents an icon. Should either contain a label and url, or a an icon type and label.
+ */
+
+/**
+ * Options required to prioritise which icon to show
+ */
+
+/**
+ * Reusable priority function for choosing which icon to show.
+ * Generic so it can be used to prioritise strings, or React components depending on the usage.
+ */
+export function prioritiseIcon({
+  providerId,
+  fileFormatIcon,
+  documentTypeIcon,
+  urlIcon,
+  providerIcon
+}) {
+  if (isNativeProvider(providerId)) {
+    return fileFormatIcon || documentTypeIcon || urlIcon || providerIcon;
+  }
+  return urlIcon || fileFormatIcon || documentTypeIcon || providerIcon;
+}

package/dist/es2019/extractors/common/icon/priority.js

@@ -1,3 +1,6 @@
+/**
+ * Preference more detailed object types over less detailed ones (like 'Document' or 'Object').
+ */
 export const extractorPriorityMap = {
   Object: 0,
   Document: 5,

package/dist/es2019/extractors/common/lozenge/extractState.js

@@ -1,4 +1,48 @@
-import { VALID_STATES, OMIT_STATES } from './utils';
+import { OMIT_STATES, VALID_STATES } from './utils';
+
+// Maps accent color short names to their corresponding background and text colors
+const lozengeAccentStyles = {
+  blue: {
+    backgroundColor: "var(--ds-background-accent-blue-subtler, #CCE0FF)",
+    color: "var(--ds-text-accent-blue, #0055CC)"
+  },
+  gray: {
+    backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)",
+    color: "var(--ds-text-accent-gray, #44546F)"
+  },
+  green: {
+    backgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+    color: "var(--ds-text-accent-green, #216E4E)"
+  },
+  lime: {
+    backgroundColor: "var(--ds-background-accent-lime-subtler, #D3F1A7)",
+    color: "var(--ds-text-accent-lime, #4C6B1F)"
+  },
+  magenta: {
+    backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
+    color: "var(--ds-text-accent-magenta, #943D73)"
+  },
+  orange: {
+    backgroundColor: "var(--ds-background-accent-orange-subtler, #FEDEC8)",
+    color: "var(--ds-text-accent-orange, #A54800)"
+  },
+  purple: {
+    backgroundColor: "var(--ds-background-accent-purple-subtler, #DFD8FD)",
+    color: "var(--ds-text-accent-purple, #5E4DB2)"
+  },
+  red: {
+    backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+    color: "var(--ds-text-accent-red, #AE2E24)"
+  },
+  teal: {
+    backgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
+    color: "var(--ds-text-accent-teal, #206A83)"
+  },
+  yellow: {
+    backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
+    color: "var(--ds-text-accent-yellow, #7F5F01)"
+  }
+};
 export const extractState = jsonLd => {
   const state = jsonLd['atlassian:state'];
   if (state) {
@@ -10,18 +54,13 @@ export const extractState = jsonLd => {
           appearance: VALID_STATES[linkState] || 'default'
         };
       }
-    } else if (state['@type'] === 'Link') {
-      if (state.name) {
-        return {
-          text: state.name,
-          appearance: state.appearance || 'default'
-        };
-      }
-    } else if (state['@type'] === 'Object') {
+    } else if (state['@type'] === 'Link' || state['@type'] === 'Object') {
       if (state.name) {
+        const accent = state.accent;
         return {
           text: state.name,
-          appearance: state.appearance || 'default'
+          appearance: state.appearance || 'default',
+          style: accent ? lozengeAccentStyles[accent] : undefined
         };
       }
     }

package/dist/es2019/extractors/flexible/icon/extract-jsonld-data-icon.js

@@ -1,3 +1,4 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { CONFLUENCE_GENERATOR_ID, JIRA_GENERATOR_ID } from '../../constants';
 import extractDocumentTypeIcon from './extract-document-type-icon';
 import extractFileFormatIcon from './extract-file-formatIcon';
@@ -8,6 +9,7 @@ import { extractTaskType } from '../../common/lozenge';
 import { extractTitle } from '@atlaskit/link-extractors';
 import { extractorPriorityMap as priorityMap } from '../../common/icon/priority';
 import { IconType } from '../../../constants';
+import { prioritiseIcon } from '../../common/icon/prioritiseIcon';
 const extractTask = (data, label) => {
   const {
     id,
@@ -30,6 +32,10 @@ const extractType = jsonLd => {
 const isConfluenceProvider = provider => provider === CONFLUENCE_GENERATOR_ID;
 const isJiraProvider = provider => provider === JIRA_GENERATOR_ID;
 const isNativeProvider = provider => isConfluenceProvider(provider) || isJiraProvider(provider);
+
+/**
+ * Return the icon object given a JSON-LD data object.
+ */
 const extractJsonldDataIcon = data => {
   const generator = data.generator;
   const label = extractTitle(data);
@@ -54,6 +60,15 @@ const extractJsonldDataIcon = data => {
       const fileFormat = documentData === null || documentData === void 0 ? void 0 : documentData['schema:fileFormat'];
       const fileFormatIcon = extractFileFormatIcon(fileFormat);
       const documentTypeIcon = extractDocumentTypeIcon(type, label);
+      if (getBooleanFF('platform.linking-platform.smart-card.standardise-smart-link-icon-behaviour')) {
+        return prioritiseIcon({
+          providerId: provider,
+          fileFormatIcon,
+          documentTypeIcon,
+          urlIcon,
+          providerIcon
+        });
+      }
       return isNativeProvider(provider) ? fileFormatIcon || documentTypeIcon || urlIcon || providerIcon : providerIcon || fileFormatIcon || documentTypeIcon;
     case 'atlassian:Task':
       const taskLabel = label || 'Task';