@atlaskit/media-card 78.4.0 → 78.5.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/media-card
 
+## 78.5.0
+
+### Minor Changes
+
+- [#142249](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142249)
+  [`40949f8ce34cf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/40949f8ce34cf) -
+  [ux] Enable new icons behind a feature flag.
+
+## 78.4.1
+
+### Patch Changes
+
+- [#141583](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141583)
+  [`ba6def6b9d3ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ba6def6b9d3ce) -
+  Updated Media card and UI to avoid contributing to TTVC metrics
+
+  - Media card will always render the `img`, even while it is still loading (in that case, the `img`
+    will just be hidden). It will also use a custom loading spinner with no interaction context.
+  - Media image will allow a null value for the image source. It will also always render the `img`
+    tag and switch the css prop `display` according to the `src` value.
+
+- Updated dependencies
+
 ## 78.4.0
 
 ### Minor Changes

package/dist/cjs/card/card.js

@@ -21,7 +21,7 @@ var _excluded = ["identifier"];
 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 && {}.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; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.4.0";
+var packageVersion = "78.5.0";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/cardView.js

@@ -12,7 +12,7 @@ var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _cardSpinner = _interopRequireDefault(require("./ui/cardSpinner/cardSpinner"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _mediaUi = require("@atlaskit/media-ui");
 var _analytics = require("../utils/analytics");
@@ -122,7 +122,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     var isZeroSize = metadata && metadata.size === 0;
     var defaultConfig = {
       renderTypeIcon: !didImageRender,
-      renderImageRenderer: !!cardPreview,
+      renderImageRenderer: true,
       renderPlayButton: !!cardPreview && mediaType === 'video',
       renderBlanket: !disableOverlay,
       renderTitleBox: !disableOverlay,
@@ -250,10 +250,10 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
   }), iconMessage), renderSpinner && (0, _react.jsx)(_iconWrapper.IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox
-  }, (0, _react.jsx)(_spinner.default, {
+  }, (0, _react.jsx)(_cardSpinner.default, {
     testId: "media-card-loading",
     interactionName: "media-card-loading"
-  })), renderImageRenderer && !!cardPreview && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
+  })), renderImageRenderer && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
     alt: alt !== null && alt !== void 0 ? alt : name,

package/dist/cjs/card/fileCard.js

@@ -10,7 +10,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
+var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaCommon = require("@atlaskit/media-common");
@@ -249,6 +249,8 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       var downloadAction = {
         label: 'Download',
         icon: /*#__PURE__*/_react.default.createElement(_download.default, {
+          color: "currentColor",
+          spacing: "spacious",
           label: "Download"
         }),
         handler: function handler() {

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.4.0";
+var packageVersion = "78.5.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/card/svgView/svgView.js

@@ -123,7 +123,7 @@ var SvgViewBase = exports.SvgViewBase = function SvgViewBase(_ref) {
       visibility: didSvgRender ? 'visible' : 'hidden'
     }, svgDimensions),
     ref: imgRef
-  }), !!cardPreview && !didSvgRender && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
+  }), !didSvgRender && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
     cardPreview: cardPreview,
     onImageLoad: onPreviewLoad,
     mediaType: 'image',

package/dist/cjs/card/ui/actionsBar/cardActions/cardActionsDropdownMenu.js

@@ -14,7 +14,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/more"));
+var _showMoreHorizontalMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--more"));
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../../../../utils/analytics");
@@ -92,7 +92,9 @@ var CardActionsDropdownMenu = exports.CardActionsDropdownMenu = /*#__PURE__*/fun
                   color: triggerColor
                 },
                 ref: triggerRef
-              }, providedProps), /*#__PURE__*/_react.default.createElement(_more.default, {
+              }, providedProps), /*#__PURE__*/_react.default.createElement(_showMoreHorizontalMore.default, {
+                color: "currentColor",
+                spacing: "spacious",
                 label: "more"
               }))
             );

package/dist/cjs/card/ui/cardSpinner/cardSpinner.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("./constants");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+/**
+ * Note: CardSpinner is almost a direct copy of Spinner from '@atlaskit/spinner', the only difference
+ * being the removal of interaction tracing.
+ * Removing interaction tracing ensures that Media Card is not contributing to Jira's TTAI and TTVC metrics.
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+/**
+ * Returns the appropriate circle stroke color.
+ */
+function getStrokeColor(appearance) {
+  return appearance === 'inherit' ? "var(--ds-icon-subtle, ".concat(_colors.N500, ")") : "var(--ds-icon-inverse, ".concat(_colors.N0, ")");
+}
+var rotate = (0, _react2.keyframes)({
+  to: {
+    transform: 'rotate(360deg)'
+  }
+});
+var rotateStyles = (0, _react2.css)({
+  animation: "".concat(rotate, " 0.86s infinite"),
+  animationTimingFunction: 'cubic-bezier(0.4, 0.15, 0.6, 0.85)',
+  transformOrigin: 'center'
+});
+
+/**
+ * There are three parts to the load in animation:
+ * 1. Fade in
+ * 2. Accelerated spin
+ * 3. Stretch the spinner line
+ */
+var loadIn = (0, _react2.keyframes)({
+  from: {
+    transform: 'rotate(50deg)',
+    opacity: 0,
+    strokeDashoffset: 60
+  },
+  to: {
+    transform: 'rotate(230deg)',
+    opacity: 1,
+    strokeDashoffset: 50
+  }
+});
+var loadInStyles = (0, _react2.css)({
+  animation: "".concat(loadIn, " 1s ease-in-out"),
+  /**
+   * When the animation completes, stay at the last frame of the animation.
+   */
+  animationFillMode: 'forwards',
+  /**
+   * We are going to animate this in.
+   */
+  opacity: 0
+});
+var wrapperStyles = (0, _react2.css)({
+  display: 'inline-flex',
+  /**
+   * Align better inline with text.
+   */
+  verticalAlign: 'middle'
+});
+var circleStyles = (0, _react2.css)({
+  fill: 'none',
+  strokeDasharray: 60,
+  strokeDashoffset: 'inherit',
+  strokeLinecap: 'round',
+  strokeWidth: 1.5,
+  '@media screen and (forced-colors: active)': {
+    filter: 'grayscale(100%)',
+    stroke: 'CanvasText'
+  }
+});
+
+/**
+ * __Spinner__
+ *
+ * A spinner is an animated spinning icon that lets users know content is being loaded.
+ *
+ * - [Examples](https://atlassian.design/components/spinner/examples)
+ * - [Code](https://atlassian.design/components/spinner/code)
+ * - [Usage](https://atlassian.design/components/spinner/usage)
+ */
+var CardSpinner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Spinner(_ref, ref) {
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'inherit' : _ref$appearance,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 0 : _ref$delay,
+    label = _ref.label,
+    _ref$size = _ref.size,
+    providedSize = _ref$size === void 0 ? 'medium' : _ref$size,
+    testId = _ref.testId;
+  var size = typeof providedSize === 'number' ? providedSize : _constants.presetSizes[providedSize];
+  var animationDelay = "".concat(delay, "ms");
+  var stroke = getStrokeColor(appearance);
+
+  /**
+   * The Spinner animation uses a combination of two
+   * css animations on two separate elements.
+   */
+  return (0, _react2.jsx)("span", {
+    /**
+     * This span exists to off-load animations from the circle element,
+     * which were causing performance issues (style recalculations)
+     * on Safari and older versions of Chrome.
+     *
+     * This can be removed and styles placed back on the circle element once
+     * Safari fixes this bug and off-loads rendering to the GPU from the CPU.
+     */
+    css: [wrapperStyles, rotateStyles],
+    "data-testid": testId && "".concat(testId, "-wrapper")
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      animationDelay: animationDelay,
+      width: size,
+      height: size
+    }
+  }, (0, _react2.jsx)("svg", {
+    height: size,
+    width: size,
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": testId,
+    ref: ref,
+    "aria-label": label || undefined,
+    css: loadInStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      animationDelay: animationDelay
+    },
+    role: label ? 'img' : 'none'
+  }, (0, _react2.jsx)("circle", {
+    cx: "8",
+    cy: "8",
+    r: "7",
+    css: circleStyles,
+    style: {
+      stroke: stroke
+    }
+  })));
+}));
+var _default = exports.default = CardSpinner;

package/dist/cjs/card/ui/cardSpinner/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.presetSizes = void 0;
+var presetSizes = exports.presetSizes = {
+  xsmall: 8,
+  small: 16,
+  medium: 24,
+  large: 48,
+  xlarge: 96
+};

package/dist/cjs/card/ui/cardSpinner/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/card/ui/imageRenderer/imageRenderer.js

@@ -32,15 +32,15 @@ var ImageRenderer = exports.ImageRenderer = function ImageRenderer(_ref) {
     }
   }, [mediaType, onDisplayImageRef]);
   var onLoad = function onLoad() {
-    onImageLoad && onImageLoad(cardPreview);
+    onImageLoad && cardPreview && onImageLoad(cardPreview);
   };
   var onError = function onError() {
-    onImageError && onImageError(cardPreview);
+    onImageError && cardPreview && onImageError(cardPreview);
   };
   return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, (0, _extends2.default)({
-    dataURI: cardPreview.dataURI,
+    dataURI: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
     alt: alt,
-    previewOrientation: cardPreview.orientation,
+    previewOrientation: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.orientation,
     onImageLoad: onLoad,
     onImageError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,

package/dist/cjs/card/ui/playButton/playButton.js

@@ -7,11 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.PlayButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _vidPlay = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-play"));
+var _videoPlayOverlay = _interopRequireDefault(require("@atlaskit/icon/core/video-play-overlay"));
 var _playButtonWrapper = require("./playButtonWrapper");
 var _playButtonBackground = require("./playButtonBackground");
 var PlayButton = exports.PlayButton = function PlayButton() {
-  return /*#__PURE__*/_react.default.createElement(_playButtonWrapper.PlayButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_playButtonBackground.PlayButtonBackground, null), /*#__PURE__*/_react.default.createElement(_vidPlay.default, {
+  return /*#__PURE__*/_react.default.createElement(_playButtonWrapper.PlayButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_playButtonBackground.PlayButtonBackground, null), /*#__PURE__*/_react.default.createElement(_videoPlayOverlay.default, {
+    color: "currentColor",
     label: "play",
-    size: "large"
+    LEGACY_size: "large",
+    LEGACY_fallbackIcon: _vidPlay.default
   }));
 };

package/dist/cjs/card/ui/tickBox/tickBox.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TickBox = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _check = _interopRequireDefault(require("@atlaskit/icon/glyph/check"));
+var _checkMarkCheck = _interopRequireDefault(require("@atlaskit/icon/utility/migration/check-mark--check"));
 var _tickBoxWrapper = require("./tickBoxWrapper");
 var TickBox = exports.TickBox = function TickBox(_ref) {
   var selected = _ref.selected;
   return /*#__PURE__*/_react.default.createElement(_tickBoxWrapper.TickBoxWrapper, {
     selected: selected
-  }, /*#__PURE__*/_react.default.createElement(_check.default, {
+  }, /*#__PURE__*/_react.default.createElement(_checkMarkCheck.default, {
+    color: "currentColor",
     label: "tick"
   }));
 };

package/dist/cjs/card/ui/tickBox/tickBoxWrapper.js

@@ -38,7 +38,9 @@ var wrapperStyles = function wrapperStyles(selected) {
       svg: {
         height: '14px'
       }
-    }
+    },
+    display: 'grid',
+    placeItems: 'center'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   getSelectedStyles(selected));

package/dist/cjs/card/ui/titleBox/failedTitleBox.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FailedTitleBox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
+var _warningEditorWarning = _interopRequireDefault(require("@atlaskit/icon/utility/migration/warning--editor-warning"));
 var _mediaUi = require("@atlaskit/media-ui");
 var _colors = require("@atlaskit/theme/colors");
 var _titleBoxComponents = require("./titleBoxComponents");
@@ -17,9 +17,10 @@ var FailedTitleBox = exports.FailedTitleBox = function FailedTitleBox(_ref) {
     customMessage = _ref$customMessage === void 0 ? _mediaUi.messages.failed_to_load : _ref$customMessage;
   return /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxWrapper, {
     breakpoint: breakpoint
-  }, /*#__PURE__*/_react.default.createElement(_titleBoxComponents.ErrorMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
+  }, /*#__PURE__*/_react.default.createElement(_titleBoxComponents.ErrorMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_warningEditorWarning.default, {
     label: 'Warning',
-    size: 'small',
-    primaryColor: "var(--ds-text-danger, ".concat(_colors.R300, ")")
+    LEGACY_size: 'small',
+    LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)"),
+    color: "var(--ds-text-danger, ".concat(_colors.R300, ")")
   }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, customMessage))));
 };

package/dist/cjs/card/ui/titleBox/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBoxWrapperStyles = exports.titleBoxIconStyles = exports.titleBoxHeaderStyles = exports.titleBoxFooterStyles = exports.errorMessageWrapperStyles = void 0;
+exports.titleBoxWrapperStyles = exports.titleBoxIconStyles = exports.titleBoxHeaderStyles = exports.titleBoxFooterStyles = exports.newTitleBoxIconStyles = exports.errorMessageWrapperStyles = void 0;
 var _react = require("@emotion/react");
 var _common = require("../common");
 var _colors = require("@atlaskit/theme/colors");
@@ -75,11 +75,20 @@ var titleBoxIconStyles = exports.titleBoxIconStyles = (0, _react.css)({
   bottom: '0px'
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var newTitleBoxIconStyles = exports.newTitleBoxIconStyles = (0, _react.css)({
+  position: 'absolute',
+  right: "var(--ds-space-050, 4px)",
+  bottom: "var(--ds-space-050, 4px)"
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var errorMessageWrapperStyles = exports.errorMessageWrapperStyles = (0, _react.css)({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'flex-start',
+  paddingInlineStart: "var(--ds-space-025, 2px)",
+  gap: "var(--ds-space-025, 2px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   span: {
     verticalAlign: 'middle',

package/dist/cjs/card/ui/titleBox/titleBox.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TitleBox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
+var _lockLockedLockFilled = _interopRequireDefault(require("@atlaskit/icon/utility/migration/lock-locked--lock-filled"));
 var _truncateText = require("@atlaskit/media-ui/truncateText");
 var _formatDate = require("@atlaskit/media-ui/formatDate");
 var _titleBoxComponents = require("./titleBoxComponents");
@@ -34,9 +34,10 @@ var TitleBox = exports.TitleBox = (0, _reactIntlNext.injectIntl)(function (_ref)
     text: name !== null && name !== void 0 ? name : placeholderText
   })), /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxFooter, {
     hasIconOverlap: !!titleBoxIcon
-  }, createdAt !== undefined && isValidTimestamp(createdAt) ? (0, _formatDate.formatDate)(createdAt, (_intl$locale = intl === null || intl === void 0 ? void 0 : intl.locale) !== null && _intl$locale !== void 0 ? _intl$locale : 'en') : placeholderText), titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxIcon, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
+  }, createdAt !== undefined && isValidTimestamp(createdAt) ? (0, _formatDate.formatDate)(createdAt, (_intl$locale = intl === null || intl === void 0 ? void 0 : intl.locale) !== null && _intl$locale !== void 0 ? _intl$locale : 'en') : placeholderText), titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxIcon, null, /*#__PURE__*/_react.default.createElement(_lockLockedLockFilled.default, {
+    color: "currentColor",
     label: "",
-    size: "small"
+    LEGACY_size: "small"
   })));
 }, {
   enforceContext: false

package/dist/cjs/card/ui/titleBox/titleBoxComponents.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TitleBoxWrapper = exports.TitleBoxIcon = exports.TitleBoxHeader = exports.TitleBoxFooter = exports.ErrorMessageWrapper = void 0;
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styles = require("./styles");
 /**
  * @jsxRuntime classic
@@ -55,10 +56,12 @@ var TitleBoxFooter = exports.TitleBoxFooter = function TitleBoxFooter(props) {
 var TitleBoxIcon = exports.TitleBoxIcon = function TitleBoxIcon(props) {
   return (0, _react.jsx)("div", {
     id: "titleBoxIcon",
-    "data-testid": "title-box-icon"
+    "data-testid": "title-box-icon",
+    css: (0, _platformFeatureFlags.fg)('platform.design-system-team.enable-new-icons') ?
     // 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: _styles.titleBoxIconStyles
+    _styles.newTitleBoxIconStyles :
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    _styles.titleBoxIconStyles
   }, props.children);
 };
 var ErrorMessageWrapper = exports.ErrorMessageWrapper = function ErrorMessageWrapper(props) {

package/dist/cjs/card/ui/unhandledErrorCard/index.js

@@ -12,7 +12,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
+var _warningEditorWarning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning--editor-warning"));
 var _colors = require("@atlaskit/theme/colors");
 var _mediaUi = require("@atlaskit/media-ui");
 var _utils = require("../../../utils");
@@ -93,10 +93,11 @@ var UnhandledErrorCard = exports.UnhandledErrorCard = /*#__PURE__*/function (_Co
         (0, _react2.jsx)("div", {
           css: wrapperStyles(dimensions),
           onClick: onClick
-        }, (0, _react2.jsx)(_warning.default, {
+        }, (0, _react2.jsx)(_warningEditorWarning.default, {
           label: "Error",
-          primaryColor: "var(--ds-icon-warning, ".concat(_colors.Y500, ")"),
-          size: "medium"
+          color: "var(--ds-icon-warning, ".concat(_colors.Y500, ")"),
+          LEGACY_size: "medium",
+          spacing: "spacious"
         }), (0, _react2.jsx)("p", null, "We couldn't load this content"))
       );
     }

package/dist/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "78.4.0",
+        packageName: "78.5.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -15,7 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _colors = require("@atlaskit/theme/colors");
-var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+var _warning = _interopRequireDefault(require("@atlaskit/icon/utility/migration/warning"));
 var _analytics = require("../utils/analytics");
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -50,7 +50,9 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
     padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
     marginRight: "var(--ds-space-negative-025, -2px)",
     WebkitBoxDecorationBreak: 'clone',
-    display: 'inline',
+    display: 'inline-flex',
+    gap: "var(--ds-space-050, 4px)",
+    alignItems: 'center',
     borderRadius: '3px',
     color: "var(--ds-text, ".concat(_colors.N900, ")"),
     backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
@@ -66,9 +68,10 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
     _react.default.createElement("span", {
       style: style
     }, /*#__PURE__*/_react.default.createElement(_warning.default, {
+      LEGACY_margin: "0 ".concat("var(--ds-space-negative-050, -4px)", " 0 0"),
       label: "error",
-      size: "small",
-      primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
+      LEGACY_size: "small",
+      color: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
     }), message)
   );
 };

package/dist/cjs/utils/lightCards/errorIcon/index.js

@@ -13,7 +13,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _react2 = require("react");
-var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
+var _warningEditorWarning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning--editor-warning"));
 var _styles = require("./styles");
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
@@ -35,9 +35,10 @@ var ErrorIcon = exports.ErrorIcon = /*#__PURE__*/function (_Component) {
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         (0, _react.jsx)("div", {
           css: _styles.errorIconWrapperStyles
-        }, (0, _react.jsx)(_warning.default, {
+        }, (0, _react.jsx)(_warningEditorWarning.default, {
+          color: "currentColor",
           label: "Error",
-          size: size
+          LEGACY_size: size
         }))
       );
     }

package/dist/cjs/utils/ufoExperiences.js

@@ -15,7 +15,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.4.0";
+var packageVersion = "78.5.0";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -9,7 +9,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fg } from '@atlaskit/platform-feature-flags';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "78.4.0";
+const packageVersion = "78.5.0";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/cardView.js

@@ -7,7 +7,7 @@ import { jsx } from '@emotion/react';
 import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
-import SpinnerIcon from '@atlaskit/spinner';
+import CardSpinner from './ui/cardSpinner/cardSpinner';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '@atlaskit/media-ui';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
@@ -109,7 +109,7 @@ export const CardViewBase = ({
     const isZeroSize = metadata && metadata.size === 0;
     const defaultConfig = {
       renderTypeIcon: !didImageRender,
-      renderImageRenderer: !!cardPreview,
+      renderImageRenderer: true,
       renderPlayButton: !!cardPreview && mediaType === 'video',
       renderBlanket: !disableOverlay,
       renderTitleBox: !disableOverlay,
@@ -245,10 +245,10 @@ export const CardViewBase = ({
   }), iconMessage), renderSpinner && jsx(IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox
-  }, jsx(SpinnerIcon, {
+  }, jsx(CardSpinner, {
     testId: "media-card-loading",
     interactionName: "media-card-loading"
-  })), renderImageRenderer && !!cardPreview && jsx(ImageRenderer, {
+  })), renderImageRenderer && jsx(ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
     alt: alt !== null && alt !== void 0 ? alt : name,