@atlaskit/smart-card 27.6.5 → 27.7.1

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-analytics.js

@@ -4,24 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.validationUpdateErrorAnalyticsPayload = exports.unknownUpdateErrorAnalyticsPayload = exports.unknownLoadErrorAnalyticsPayload = exports.permissionLoadErrorAnalyticsPayload = void 0;
-var _analytics = require("../../../../../../utils/analytics/analytics");
 var unknownLoadErrorAnalyticsPayload = exports.unknownLoadErrorAnalyticsPayload = {
-  smartLinkActionType: _analytics.TrackQuickActionType.StatusUpdate,
-  reason: _analytics.TrackQuickActionFailureReason.UnknownError,
+  smartLinkActionType: 'StatusUpdate',
+  reason: 'UnknownError',
   step: 'load'
 };
 var permissionLoadErrorAnalyticsPayload = exports.permissionLoadErrorAnalyticsPayload = {
-  smartLinkActionType: _analytics.TrackQuickActionType.StatusUpdate,
-  reason: _analytics.TrackQuickActionFailureReason.PermissionError,
+  smartLinkActionType: 'StatusUpdate',
+  reason: 'PermissionError',
   step: 'load'
 };
 var unknownUpdateErrorAnalyticsPayload = exports.unknownUpdateErrorAnalyticsPayload = {
-  smartLinkActionType: _analytics.TrackQuickActionType.StatusUpdate,
-  reason: _analytics.TrackQuickActionFailureReason.UnknownError,
+  smartLinkActionType: 'StatusUpdate',
+  reason: 'UnknownError',
   step: 'update'
 };
 var validationUpdateErrorAnalyticsPayload = exports.validationUpdateErrorAnalyticsPayload = {
-  smartLinkActionType: _analytics.TrackQuickActionType.StatusUpdate,
-  reason: _analytics.TrackQuickActionFailureReason.ValidationError,
+  smartLinkActionType: 'StatusUpdate',
+  reason: 'ValidationError',
   step: 'update'
 };

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

@@ -15,7 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _colors = require("@atlaskit/theme/colors");
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _Frame = require("../Frame");
 var _IconAndTitleLayout = require("../IconAndTitleLayout");
 var _Icon = require("../Icon");
@@ -47,7 +47,7 @@ var InlineCardErroredView = exports.InlineCardErroredView = /*#__PURE__*/functio
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderActionButton", function () {
       var onRetry = _this.props.onRetry;
-      var ActionButton = (0, _withFrameStyleControl.default)(_customThemeButton.default, _this.frameRef);
+      var ActionButton = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
       return onRetry && /*#__PURE__*/_react.default.createElement(ActionButton, {
         spacing: "none",
         component: _styled.IconStyledButton,

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

@@ -16,7 +16,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _colors = require("@atlaskit/theme/colors");
 var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _Frame = require("../Frame");
 var _IconAndTitleLayout = require("../IconAndTitleLayout");
 var _Icon = require("../Icon");
@@ -78,7 +78,7 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/fun
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderActionButton", function () {
       var _this$props$requestAc;
       var onAuthorise = _this.props.onAuthorise;
-      var ActionButton = (0, _withFrameStyleControl.default)(_customThemeButton.default, _this.frameRef);
+      var ActionButton = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
       var accessType = (_this$props$requestAc = _this.props.requestAccessContext) === null || _this$props$requestAc === void 0 ? void 0 : _this$props$requestAc.accessType;
       if (_this.state.hasRequestAccessContextMessage) {
         return /*#__PURE__*/_react.default.createElement(ActionButton, {
@@ -91,7 +91,7 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/fun
         }, _this.renderForbiddenAccessMessage());
       }
       if (onAuthorise) {
-        return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+        return /*#__PURE__*/_react.default.createElement(_button.default, {
           spacing: "none",
           onClick: _this.handleRetry,
           appearance: "subtle-link",

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

@@ -13,7 +13,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
 var _colors = require("@atlaskit/theme/colors");
 var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
@@ -61,7 +61,7 @@ var InlineCardUnauthorizedView = exports.InlineCardUnauthorizedView = /*#__PURE_
       var _this$props2 = _this.props,
         onAuthorise = _this$props2.onAuthorise,
         context = _this$props2.context;
-      var ActionButton = (0, _withFrameStyleControl.default)(_customThemeButton.default, _this.frameRef);
+      var ActionButton = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
       return onAuthorise ? /*#__PURE__*/_react.default.createElement(ActionButton, {
         spacing: "none",
         component: _styled.IconStyledButton,

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: "27.6.5",
+  packageVersion: "27.7.1",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/common/Byline.js

@@ -10,37 +10,37 @@ var _utils = require("./utils");
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var baseStyles = (0, _react.css)({
+  // Spec: only allow two lines MAX to be shown.
+  display: '-webkit-box',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+  wordBreak: 'break-word',
+  whiteSpace: 'pre-line',
+  // EDM-713: fixes copy-paste from renderer to editor for Firefox
+  // due to HTML its unwrapping behaviour on paste.
+  MozUserSelect: 'none'
+});
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+var styles = (0, _utils.mq)({
+  fontSize: (0, _utils.gs)(1.5),
+  lineHeight: (0, _utils.gs)(2.5),
+  color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
+  fontWeight: 'normal',
+  marginTop: (0, _utils.gs)(0.5),
+  // Fallback options.
+  maxHeight: (0, _utils.gs)(5)
+});
 var Byline = exports.Byline = function Byline(_ref) {
   var text = _ref.text,
     children = _ref.children,
     testId = _ref.testId,
     className = _ref.className;
   return (0, _react.jsx)("span", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    css: (0, _utils.mq)({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      fontSize: (0, _utils.gs)(1.5),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      lineHeight: (0, _utils.gs)(2.5),
-      color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
-      fontWeight: 'normal',
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      marginTop: (0, _utils.gs)(0.5),
-      // Spec: only allow two lines MAX to be shown.
-      display: '-webkit-box',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      WebkitLineClamp: 2,
-      WebkitBoxOrient: 'vertical',
-      wordBreak: 'break-word',
-      // Fallback options.
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      maxHeight: (0, _utils.gs)(5),
-      whiteSpace: 'pre-line',
-      // EDM-713: fixes copy-paste from renderer to editor for Firefox
-      // due to HTML its unwrapping behaviour on paste.
-      MozUserSelect: 'none'
-    }),
+    css: [baseStyles, styles],
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

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

@@ -6,6 +6,7 @@ import PullRequestIcon from '@atlaskit/icon-object/glyph/pull-request/16';
 import BranchIcon from '@atlaskit/icon-object/glyph/branch/16';
 import RepoIcon from '@atlaskit/icon-object/glyph/code/16';
 import TaskIcon from '@atlaskit/icon-object/glyph/task/16';
+import { getIconForFileType } from '../../../utils';
 import { extractorPriorityMap } from './priority';
 import { extractProvider, extractUrlFromIconJsonLd, extractTitle } from '@atlaskit/link-extractors';
 import { extractFileFormat } from './extractFileFormat';
@@ -30,6 +31,56 @@ export const extractIcon = (jsonLd, priority = 'type') => {
     return extractIconByType(type, opts);
   }
 };
+function typeToIcon(type, opts) {
+  switch (type) {
+    case 'atlassian:SourceCodeCommit':
+      return /*#__PURE__*/React.createElement(CommitIcon, {
+        label: opts.title || 'commit',
+        testId: "commit-icon"
+      });
+    case 'atlassian:Project':
+      return /*#__PURE__*/React.createElement(ProjectIcon, {
+        label: opts.title || 'project',
+        size: "small",
+        testId: "project-icon"
+      });
+    case 'atlassian:SourceCodePullRequest':
+      return /*#__PURE__*/React.createElement(PullRequestIcon, {
+        label: opts.title || 'pullRequest',
+        testId: "pull-request-icon"
+      });
+    case 'atlassian:SourceCodeReference':
+      return /*#__PURE__*/React.createElement(BranchIcon, {
+        label: opts.title || 'reference',
+        testId: "branch-icon"
+      });
+    case 'atlassian:SourceCodeRepository':
+      return /*#__PURE__*/React.createElement(RepoIcon, {
+        label: opts.title || 'repository',
+        testId: "repo-icon"
+      });
+    case 'atlassian:Goal':
+      return /*#__PURE__*/React.createElement(TaskIcon, {
+        label: opts.title || 'goal',
+        testId: "task-icon"
+      });
+    case 'atlassian:Task':
+      return extractIconFromTask(opts);
+    default:
+      return undefined;
+  }
+}
+function standardisedExtractIcon(type, opts) {
+  const iconFromType = typeToIcon(type, opts);
+  const iconFromFileFormat = opts.fileFormat ? getIconForFileType(opts.fileFormat) : undefined;
+  const iconFromProvider = opts.provider && opts.provider.icon;
+  return prioritiseIcon({
+    fileFormatIcon: iconFromFileFormat,
+    documentTypeIcon: iconFromType,
+    urlIcon: opts.icon,
+    providerIcon: iconFromProvider
+  });
+}
 
 /**
  * Extracts an icon based on the given type.
@@ -42,6 +93,21 @@ export const extractIcon = (jsonLd, priority = 'type') => {
  * @returns The extracted icon as a React node, or `undefined` if no icon is found.
  */
 const extractIconByType = (type, opts) => {
+  if (getBooleanFF('platform.linking-platform.smart-card.standardise-smart-link-icon-behaviour')) {
+    switch (type) {
+      case 'Document':
+      case 'schema:BlogPosting':
+      case 'schema:DigitalDocument':
+      case 'schema:TextDigitalDocument':
+      case 'schema:PresentationDigitalDocument':
+      case 'schema:SpreadsheetDigitalDocument':
+      case 'atlassian:Template':
+      case 'atlassian:UndefinedLink':
+        return extractIconFromDocument(type, opts);
+      default:
+        return standardisedExtractIcon(type, opts);
+    }
+  }
   switch (type) {
     case 'Document':
     case 'schema:BlogPosting':
@@ -86,24 +152,6 @@ const extractIconByType = (type, opts) => {
     case 'atlassian:Task':
       return extractIconFromTask(opts);
     default:
-      return getBooleanFF('platform.linking-platform.smart-card.standardise-smart-link-icon-behaviour') ? extractDefaultIcon(opts) : opts.provider && opts.provider.icon;
+      return opts.provider && opts.provider.icon;
   }
-};
-
-/**
- * Choose which icon to show when the type is not recognized.
- */
-const extractDefaultIcon = opts => {
-  var _opts$provider;
-  const {
-    provider
-  } = opts;
-  const providerId = provider === null || provider === void 0 ? void 0 : provider.id;
-  return prioritiseIcon({
-    providerId,
-    fileFormatIcon: undefined,
-    documentTypeIcon: undefined,
-    urlIcon: opts.icon,
-    providerIcon: (_opts$provider = opts.provider) === null || _opts$provider === void 0 ? void 0 : _opts$provider.icon
-  });
 };

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

@@ -16,16 +16,11 @@ import { prioritiseIcon } from './prioritiseIcon';
  * @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,

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

@@ -1,8 +1,3 @@
-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.
  */
@@ -16,14 +11,10 @@ const isNativeProvider = provider => isConfluenceProvider(provider) || isJiraPro
  * 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/embed/index.js

@@ -24,7 +24,6 @@ function generateContext(jsonLd) {
   }
   const generator = jsonLd.generator;
   const icon = prioritiseIcon({
-    providerId: generator && typeof generator !== 'string' && generator['@type'] !== 'Link' ? generator['@id'] : undefined,
     fileFormatIcon: undefined,
     documentTypeIcon: undefined,
     urlIcon: extractUrlFromIconJsonLd(jsonLd.icon),

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

@@ -32,6 +32,85 @@ const extractType = jsonLd => {
 const isConfluenceProvider = provider => provider === CONFLUENCE_GENERATOR_ID;
 const isJiraProvider = provider => provider === JIRA_GENERATOR_ID;
 const isNativeProvider = provider => isConfluenceProvider(provider) || isJiraProvider(provider);
+function chooseIcon({
+  urlIcon,
+  type,
+  label,
+  data,
+  providerIcon
+}) {
+  var _data$generator;
+  const providerId = (_data$generator = data.generator) === null || _data$generator === void 0 ? void 0 : _data$generator['@id'];
+  const fileFormat = data === null || data === void 0 ? void 0 : data['schema:fileFormat'];
+  const fileFormatIcon = extractFileFormatIcon(fileFormat);
+  const documentTypeIcon = typeToIconDescriptor({
+    type,
+    label,
+    providerId,
+    data
+  }) || extractDocumentTypeIcon(type, label);
+  return prioritiseIcon({
+    fileFormatIcon,
+    documentTypeIcon,
+    urlIcon,
+    providerIcon
+  });
+}
+function typeToIconDescriptor({
+  type,
+  label,
+  providerId,
+  data
+}) {
+  switch (type) {
+    case 'atlassian:Goal':
+      return {
+        icon: IconType.Task,
+        label: label || 'Goal'
+      };
+    case 'atlassian:Project':
+      return {
+        icon: IconType.Project,
+        label: label || 'Project'
+      };
+    case 'atlassian:SourceCodeCommit':
+      return {
+        icon: IconType.Commit,
+        label: label || 'Commit'
+      };
+    case 'atlassian:SourceCodePullRequest':
+      return {
+        icon: IconType.PullRequest,
+        label: label || 'Pull request'
+      };
+    case 'atlassian:SourceCodeReference':
+      return {
+        icon: IconType.Branch,
+        label: label || 'Reference'
+      };
+    case 'atlassian:SourceCodeRepository':
+      return {
+        icon: IconType.Repo,
+        label: label || 'Repository'
+      };
+    case 'atlassian:Task':
+      const taskLabel = label || 'Task';
+      const taskIconDescriptor = {
+        icon: IconType.Task,
+        label: taskLabel
+      };
+      if (isJiraProvider(providerId)) {
+        const {
+          taskType,
+          taskIcon
+        } = extractTask(data);
+        return taskType === 'JiraCustomTaskType' ? taskIcon || taskIconDescriptor : extractJiraTaskIcon(taskType, taskLabel);
+      }
+      return taskIconDescriptor;
+    default:
+      return undefined;
+  }
+}
 
 /**
  * Return the icon object given a JSON-LD data object.
@@ -43,6 +122,15 @@ const extractJsonldDataIcon = data => {
   const urlIcon = extractUrlIcon(data.icon, label);
   const provider = generator === null || generator === void 0 ? void 0 : generator['@id'];
   const providerIcon = extractProviderIcon(data);
+  if (getBooleanFF('platform.linking-platform.smart-card.standardise-smart-link-icon-behaviour')) {
+    return chooseIcon({
+      urlIcon,
+      providerIcon,
+      type,
+      label,
+      data
+    });
+  }
   switch (type) {
     case 'Document':
     case 'schema:BlogPosting':
@@ -60,15 +148,6 @@ 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';
@@ -117,38 +196,7 @@ const extractJsonldDataIcon = data => {
         label: label || 'Repository'
       };
     default:
-      return getBooleanFF('platform.linking-platform.smart-card.standardise-smart-link-icon-behaviour') ? extractDefaultIcon({
-        data,
-        type,
-        label,
-        provider,
-        urlIcon,
-        providerIcon
-      }) : providerIcon;
+      return providerIcon;
   }
 };
-export default extractJsonldDataIcon;
-
-/**
- * Choose which icon to show when the type is not recognized.
- */
-const extractDefaultIcon = ({
-  data,
-  type,
-  label,
-  provider,
-  urlIcon,
-  providerIcon
-}) => {
-  const documentData = data;
-  const fileFormat = documentData === null || documentData === void 0 ? void 0 : documentData['schema:fileFormat'];
-  const fileFormatIcon = extractFileFormatIcon(fileFormat);
-  const documentTypeIcon = extractDocumentTypeIcon(type, label);
-  return prioritiseIcon({
-    providerId: provider,
-    fileFormatIcon,
-    documentTypeIcon,
-    urlIcon,
-    providerIcon
-  });
-};
+export default extractJsonldDataIcon;

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "27.6.5"
+  packageVersion: "27.7.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/components/Action.js

@@ -2,7 +2,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useState } from 'react';
-import Button from '@atlaskit/button/custom-theme-button';
+import { LoadingButton as Button } from '@atlaskit/button';
 import { ActionIcon } from './ActionIcon';
 export const spinnerDelay = 1000;
 const baseTextStyles = css({

package/dist/es2019/view/BlockCard/components/ActionList.js

@@ -9,9 +9,20 @@ import MoreIcon from '@atlaskit/icon/glyph/more';
 import { Action } from './Action';
 import { gs, mq } from '../../common/utils';
 import { di } from 'react-magnetic-di';
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+const wrapperStyles = mq({
+  display: 'flex',
+  marginTop: [gs(2), 0]
+});
 const buttonStyles = css({
   height: 'auto'
 });
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+const actionsWrapperStyles = {
+  marginLeft: gs(0.5)
+};
 export const ActionList = ({
   items
 }) => {
@@ -19,19 +30,13 @@ export const ActionList = ({
   const actionsToList = items.slice(2, items.length);
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    css: mq({
-      display: 'flex',
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      marginTop: [gs(2), 0]
-    })
+    css: wrapperStyles
   }, jsx(ButtonGroup, null, actionsToShow.map(action => jsx(Action, _extends({
     key: action.id
   }, action)))), actionsToList.length ?
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   jsx("div", {
-    css: {
-      marginLeft: gs(0.5)
-    }
+    css: actionsWrapperStyles
   }, jsx(DropdownMenu, {
     trigger: ({
       triggerRef,

package/dist/es2019/view/BlockCard/components/Content.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { gs, mq } from '../../common/utils';
 /**
  * Class name for selecting non-flexible block card content
@@ -9,19 +9,23 @@ import { gs, mq } from '../../common/utils';
  * Using this selctor is deprecated as once the flexible block card feature flag is removed, this class will no longer be used.
  */
 export const blockCardContentClassName = 'block-card-content';
+const baseStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1
+});
 export const Content = ({
   children,
   isCompact = false
 }) => jsx("div", {
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  css: mq({
+  css: [baseStyles,
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  mq({
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     padding: isCompact ? gs(1) : gs(2),
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: isCompact ? 'unset' : ['unset', 'space-between'],
-    flexGrow: 1
-  }),
+    justifyContent: isCompact ? 'unset' : ['unset', 'space-between']
+  })],
   "data-trello-do-not-use-override": "block-card-content"
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   ,

package/dist/es2019/view/BlockCard/components/ContentFooter.js

@@ -1,22 +1,28 @@
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { gs, mq } from '../../common/utils';
 export const contentFooterClassName = 'smart-link-content-footer';
+const flexStyles = css({
+  display: 'flex'
+});
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const baseStyles = mq({
+  flexDirection: ['column', 'row'],
+  flexGrow: [1, 'unset'],
+  alignItems: ['unset', 'center'],
+  marginTop: [gs(1), gs(1.5)]
+});
 export const ContentFooter = ({
   children,
   hasSpaceBetween = false
 }) => jsx("div", {
+  css: [flexStyles, baseStyles,
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  css: mq({
-    display: 'flex',
-    flexDirection: ['column', 'row'],
-    flexGrow: [1, 'unset'],
-    justifyContent: [hasSpaceBetween ? 'space-between' : 'flex-end', 'space-between'],
-    alignItems: ['unset', 'center'],
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    marginTop: [gs(1), gs(1.5)]
-  })
+  mq({
+    justifyContent: [hasSpaceBetween ? 'space-between' : 'flex-end', 'space-between']
+  })]
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   ,
   className: contentFooterClassName