@atlaskit/smart-card 26.16.0 → 26.16.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.16.1
+
+### Patch Changes
+
+- [`8e0d75e3666`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8e0d75e3666) - Update Image preview styles for Hover Card
+
 ## 26.16.0
 
 ### Minor Changes

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

@@ -21,7 +21,7 @@ exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
 var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.0"
+  packageVersion: "26.16.1"
 };
 exports.context = context;
 var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {

package/dist/cjs/view/HoverCard/components/{SnippetOrPreview.js → ImagePreview.js}

@@ -6,25 +6,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _extractPreview = _interopRequireDefault(require("../../../extractors/flexible/extract-preview"));
 var _blocks = require("../../FlexibleCard/components/blocks");
 var _styled = require("../styled");
-var _templateObject;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var SnippetOrPreview = function SnippetOrPreview(_ref) {
+var ImagePreview = function ImagePreview(_ref) {
   var data = _ref.data,
-    snippetHeight = _ref.snippetHeight;
+    fallbackElementHeight = _ref.fallbackElementHeight;
   var transitionStarted = (0, _react.useRef)(false);
   var previewBlockRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(true),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    showSnippet = _useState2[0],
-    setShowSnippet = _useState2[1];
+    showPreview = _useState2[0],
+    setShowPreview = _useState2[1];
   var _useState3 = (0, _react.useState)(),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     previewCss = _useState4[0],
@@ -33,26 +32,29 @@ var SnippetOrPreview = function SnippetOrPreview(_ref) {
   // Set Preview to a fixed height to enable transitions
   var onPreviewRender = (0, _react.useCallback)(function () {
     var _previewBlockRef$curr;
-    previewBlockRef.current && setPreviewCss((0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        height: ", "px;\n      "])), (_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
+    previewBlockRef.current && setPreviewCss((0, _styled.getPreviewBlockStyles)((_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
   }, []);
 
-  // On error set Preview to Snippet height with transition
+  // On error set Preview to Fallback height with transition
   var onPreviewError = (0, _react.useCallback)(function () {
     if (transitionStarted.current === false) {
-      setPreviewCss((0, _styled.getTransitionStyles)(snippetHeight));
+      setPreviewCss((0, _styled.getTransitionStyles)(fallbackElementHeight));
       transitionStarted.current = true;
     }
-  }, [snippetHeight]);
+  }, [fallbackElementHeight]);
   var onPreviewTransitionEnd = (0, _react.useCallback)(function () {
-    setShowSnippet(true);
+    setShowPreview(false);
   }, []);
-  return !showSnippet && data && (0, _extractPreview.default)(data) ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
-    onError: onPreviewError,
+  return showPreview && data && (0, _extractPreview.default)(data) ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, (0, _extends2.default)({
+    onError: onPreviewError
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    ignoreContainerPadding: true
+  }, {
     overrideCss: previewCss,
     onTransitionEnd: onPreviewTransitionEnd,
     blockRef: previewBlockRef,
     onRender: onPreviewRender
-  }) : /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null);
+  })) : null;
 };
-var _default = SnippetOrPreview;
+var _default = ImagePreview;
 exports.default = _default;

package/dist/cjs/view/HoverCard/components/views/resolved/index.js

@@ -13,7 +13,7 @@ var _blocks = require("../../../../FlexibleCard/components/blocks");
 var _styled = require("./styled");
 var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
 var _utils = require("../../../utils");
-var _SnippetOrPreview = _interopRequireDefault(require("../../SnippetOrPreview"));
+var _ImagePreview = _interopRequireDefault(require("../../ImagePreview"));
 var _extractMetadata = require("../../../../../extractors/hover/extractMetadata");
 var _messages = require("../../../../../messages");
 var _reactIntlNext = require("react-intl-next");
@@ -100,11 +100,11 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     var _snippetBlockRef$curr, _snippetBlockRef$curr2;
     snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
   }, []);
-  var body = (0, _SnippetOrPreview.default)({
+  var imagePreview = (0, _ImagePreview.default)({
     data: data,
-    snippetHeight: snippetHeight.current
+    fallbackElementHeight: snippetHeight.current
   });
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, titleBlockProps, {
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && imagePreview, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, titleBlockProps, {
     metadataPosition: _constants.SmartLinkPosition.Top
   })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, (0, _extends2.default)({
     primary: topPrimary,
@@ -114,7 +114,7 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     size: _constants.SmartLinkSize.Large
   }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
     size: _constants.SmartLinkSize.Medium
-  })), body, /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
+  })), !imagePreview && /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && imagePreview, /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
     testId: 'hidden-snippet',
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,

package/dist/cjs/view/HoverCard/components/views/resolving/styled.js

@@ -7,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.titleBlockStyles = exports.skeletonContainer = exports.loadingViewContainer = exports.getTitleStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var loadingViewContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+var loadingViewContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding: 1rem;" : "");
 exports.loadingViewContainer = loadingViewContainer;
 var skeletonContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
 exports.skeletonContainer = skeletonContainer;

package/dist/cjs/view/HoverCard/styled.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.separatorCss = exports.popupContainerStyles = exports.getTransitionStyles = exports.flexibleUiOptions = exports.HoverCardContainer = exports.HOVER_CARD_Z_INDEX = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
+exports.titleBlockCss = exports.separatorCss = exports.popupContainerStyles = exports.getTransitionStyles = exports.getPreviewBlockStyles = exports.flexibleUiOptions = exports.HoverCardContainer = exports.HOVER_CARD_Z_INDEX = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
@@ -13,7 +13,7 @@ var _constants = require("../../constants");
 var _constants2 = require("@atlaskit/theme/constants");
 var _components = require("@atlaskit/theme/components");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
@@ -23,11 +23,11 @@ var flexibleUiOptions = _objectSpread({
   hideBackground: true,
   hideElevation: true,
   size: _constants.SmartLinkSize.Medium,
-  hidePadding: true,
   hideHoverCardPreviewButton: false,
   zIndex: HOVER_CARD_Z_INDEX + 1
 }, !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-  theme: _constants.SmartLinkTheme.Black
+  theme: _constants.SmartLinkTheme.Black,
+  hidePadding: true
 });
 exports.flexibleUiOptions = flexibleUiOptions;
 var CARD_WIDTH_REM = 24;
@@ -39,7 +39,7 @@ var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 var separatorCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n  ", "\n"])), elementGap, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? " [data-smart-element-avatar-group] + [data-separator]:before {\n      content: '\u2022';\n      margin-right: ".concat(elementGap, ";\n    }") : "");
 exports.separatorCss = separatorCss;
-var HoverCardContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, _index.loadingPlaceholderClassName);
+var HoverCardContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  ", "\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding: 1rem;" : "", _index.loadingPlaceholderClassName);
 exports.HoverCardContainer = HoverCardContainer;
 var titleBlockCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n    display: flex;\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n\n  ", "\n"])), blockGap, separatorCss, elementGap, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
 exports.titleBlockCss = titleBlockCss;
@@ -54,4 +54,8 @@ var popupContainerStyles = (0, _react.css)(_templateObject5 || (_templateObject5
   light: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
   dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
 })());
-exports.popupContainerStyles = popupContainerStyles;
+exports.popupContainerStyles = popupContainerStyles;
+var getPreviewBlockStyles = function getPreviewBlockStyles(snippetHeight) {
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  ", "\n"])), snippetHeight, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "  border-top-left-radius: ".concat("var(--ds-border-radius-300, 12px)", ";\n         border-top-right-radius: ", "var(--ds-border-radius-300, 12px)", ";\n         margin-bottom: ", blockGap, ";\n        }") : "");
+};
+exports.getPreviewBlockStyles = getPreviewBlockStyles;

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

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

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

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

package/dist/es2019/view/HoverCard/components/ImagePreview.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState, useRef } from 'react';
+import extractPreview from '../../../extractors/flexible/extract-preview';
+import { PreviewBlock } from '../../FlexibleCard/components/blocks';
+import { getTransitionStyles, getPreviewBlockStyles } from '../styled';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+const ImagePreview = ({
+  data,
+  fallbackElementHeight
+}) => {
+  const transitionStarted = useRef(false);
+  const previewBlockRef = useRef(null);
+  const [showPreview, setShowPreview] = useState(true);
+  const [previewCss, setPreviewCss] = useState();
+
+  // Set Preview to a fixed height to enable transitions
+  const onPreviewRender = useCallback(() => {
+    var _previewBlockRef$curr;
+    previewBlockRef.current && setPreviewCss(getPreviewBlockStyles((_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
+  }, []);
+
+  // On error set Preview to Fallback height with transition
+  const onPreviewError = useCallback(() => {
+    if (transitionStarted.current === false) {
+      setPreviewCss(getTransitionStyles(fallbackElementHeight));
+      transitionStarted.current = true;
+    }
+  }, [fallbackElementHeight]);
+  const onPreviewTransitionEnd = useCallback(() => {
+    setShowPreview(false);
+  }, []);
+  return showPreview && data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, _extends({
+    onError: onPreviewError
+  }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    ignoreContainerPadding: true
+  }, {
+    overrideCss: previewCss,
+    onTransitionEnd: onPreviewTransitionEnd,
+    blockRef: previewBlockRef,
+    onRender: onPreviewRender
+  })) : null;
+};
+export default ImagePreview;

package/dist/es2019/view/HoverCard/components/views/resolved/index.js

@@ -5,7 +5,7 @@ import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../.
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from '../../../utils';
-import SnippetOrPreview from '../../SnippetOrPreview';
+import ImagePreview from '../../ImagePreview';
 import { extractMetadata, elementNamesToItems } from '../../../../../extractors/hover/extractMetadata';
 import { messages } from '../../../../../messages';
 import { FormattedMessage } from 'react-intl-next';
@@ -87,11 +87,11 @@ const HoverCardResolvedView = ({
     var _snippetBlockRef$curr, _snippetBlockRef$curr2;
     snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
   }, []);
-  const body = SnippetOrPreview({
+  const imagePreview = ImagePreview({
     data: data,
-    snippetHeight: snippetHeight.current
+    fallbackElementHeight: snippetHeight.current
   });
-  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
     metadataPosition: SmartLinkPosition.Top
   })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
     primary: topPrimary,
@@ -101,7 +101,7 @@ const HoverCardResolvedView = ({
     size: SmartLinkSize.Large
   }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
     size: SmartLinkSize.Medium
-  })), body, /*#__PURE__*/React.createElement(SnippetBlock, {
+  })), !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, null), !getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && imagePreview, /*#__PURE__*/React.createElement(SnippetBlock, {
     testId: 'hidden-snippet',
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,

package/dist/es2019/view/HoverCard/components/views/resolving/styled.js

@@ -1,7 +1,9 @@
 import { css } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const loadingViewContainer = css`
   display: flex;
   flex-direction: column;
+  ${getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? `padding: 1rem;` : ``}
 `;
 export const skeletonContainer = css`
   display: flex;

package/dist/es2019/view/HoverCard/styled.js

@@ -11,11 +11,11 @@ export const flexibleUiOptions = {
   hideBackground: true,
   hideElevation: true,
   size: SmartLinkSize.Medium,
-  hidePadding: true,
   hideHoverCardPreviewButton: false,
   zIndex: HOVER_CARD_Z_INDEX + 1,
   ...(!getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-    theme: SmartLinkTheme.Black
+    theme: SmartLinkTheme.Black,
+    hidePadding: true
   })
 };
 export const CARD_WIDTH_REM = 24;
@@ -37,7 +37,7 @@ export const HoverCardContainer = css`
   border-width: 0;
   box-sizing: border-box;
   width: ${CARD_WIDTH_REM}rem;
-  padding: 1rem;
+  ${!getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? `padding: 1rem;` : ``}
 
   .${loadingPlaceholderClassName} {
     display: none;
@@ -79,4 +79,11 @@ export const popupContainerStyles = css`
   light: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
   dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
 })()};
+`;
+export const getPreviewBlockStyles = snippetHeight => css`
+  height: ${snippetHeight}px;
+  ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `  border-top-left-radius: ${"var(--ds-border-radius-300, 12px)"};
+         border-top-right-radius: ${"var(--ds-border-radius-300, 12px)"};
+         margin-bottom: ${blockGap};
+        }` : ``}
 `;

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

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.0",
+  packageVersion: "26.16.1",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

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

package/dist/esm/view/HoverCard/components/ImagePreview.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState, useRef } from 'react';
+import extractPreview from '../../../extractors/flexible/extract-preview';
+import { PreviewBlock } from '../../FlexibleCard/components/blocks';
+import { getTransitionStyles, getPreviewBlockStyles } from '../styled';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+var ImagePreview = function ImagePreview(_ref) {
+  var data = _ref.data,
+    fallbackElementHeight = _ref.fallbackElementHeight;
+  var transitionStarted = useRef(false);
+  var previewBlockRef = useRef(null);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showPreview = _useState2[0],
+    setShowPreview = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    previewCss = _useState4[0],
+    setPreviewCss = _useState4[1];
+
+  // Set Preview to a fixed height to enable transitions
+  var onPreviewRender = useCallback(function () {
+    var _previewBlockRef$curr;
+    previewBlockRef.current && setPreviewCss(getPreviewBlockStyles((_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
+  }, []);
+
+  // On error set Preview to Fallback height with transition
+  var onPreviewError = useCallback(function () {
+    if (transitionStarted.current === false) {
+      setPreviewCss(getTransitionStyles(fallbackElementHeight));
+      transitionStarted.current = true;
+    }
+  }, [fallbackElementHeight]);
+  var onPreviewTransitionEnd = useCallback(function () {
+    setShowPreview(false);
+  }, []);
+  return showPreview && data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, _extends({
+    onError: onPreviewError
+  }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    ignoreContainerPadding: true
+  }, {
+    overrideCss: previewCss,
+    onTransitionEnd: onPreviewTransitionEnd,
+    blockRef: previewBlockRef,
+    onRender: onPreviewRender
+  })) : null;
+};
+export default ImagePreview;

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

@@ -5,7 +5,7 @@ import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../.
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from '../../../utils';
-import SnippetOrPreview from '../../SnippetOrPreview';
+import ImagePreview from '../../ImagePreview';
 import { extractMetadata, elementNamesToItems } from '../../../../../extractors/hover/extractMetadata';
 import { messages } from '../../../../../messages';
 import { FormattedMessage } from 'react-intl-next';
@@ -89,11 +89,11 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     var _snippetBlockRef$curr, _snippetBlockRef$curr2;
     snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
   }, []);
-  var body = SnippetOrPreview({
+  var imagePreview = ImagePreview({
     data: data,
-    snippetHeight: snippetHeight.current
+    fallbackElementHeight: snippetHeight.current
   });
-  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
     metadataPosition: SmartLinkPosition.Top
   })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
     primary: topPrimary,
@@ -103,7 +103,7 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     size: SmartLinkSize.Large
   }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
     size: SmartLinkSize.Medium
-  })), body, /*#__PURE__*/React.createElement(SnippetBlock, {
+  })), !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, null), !getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && imagePreview, /*#__PURE__*/React.createElement(SnippetBlock, {
     testId: 'hidden-snippet',
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,

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

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
-export var loadingViewContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+export var loadingViewContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding: 1rem;" : "");
 export var skeletonContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
 export var getTitleStyles = function getTitleStyles(height) {
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex: 1 0 auto;\n    height: ", "rem;\n\n    span {\n      width: 100%;\n    }\n  "])), height);

package/dist/esm/view/HoverCard/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { css } from '@emotion/react';
@@ -16,11 +16,11 @@ export var flexibleUiOptions = _objectSpread({
   hideBackground: true,
   hideElevation: true,
   size: SmartLinkSize.Medium,
-  hidePadding: true,
   hideHoverCardPreviewButton: false,
   zIndex: HOVER_CARD_Z_INDEX + 1
 }, !getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-  theme: SmartLinkTheme.Black
+  theme: SmartLinkTheme.Black,
+  hidePadding: true
 });
 export var CARD_WIDTH_REM = 24;
 // gap between mouse cursor and hover card
@@ -28,7 +28,7 @@ export var CARD_GAP_PX = 10;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 export var separatorCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n  ", "\n"])), elementGap, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? " [data-smart-element-avatar-group] + [data-separator]:before {\n      content: '\u2022';\n      margin-right: ".concat(elementGap, ";\n    }") : "");
-export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, loadingPlaceholderClassName);
+export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  ", "\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, !getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding: 1rem;" : "", loadingPlaceholderClassName);
 export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n    display: flex;\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n\n  ", "\n"])), blockGap, separatorCss, elementGap, getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
 export var getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
@@ -39,4 +39,7 @@ export var popupContainerStyles = css(_templateObject5 || (_templateObject5 = _t
 })(), themed({
   light: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
   dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
-})());
+})());
+export var getPreviewBlockStyles = function getPreviewBlockStyles(snippetHeight) {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: ", "px;\n  ", "\n"])), snippetHeight, getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "  border-top-left-radius: ".concat("var(--ds-border-radius-300, 12px)", ";\n         border-top-right-radius: ", "var(--ds-border-radius-300, 12px)", ";\n         margin-bottom: ", blockGap, ";\n        }") : "");
+};

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

@@ -11,7 +11,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.0",
+  packageVersion: "26.16.1",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/types/view/HoverCard/components/ImagePreview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ImagePreviewProps } from '../types';
+declare const ImagePreview: React.FC<ImagePreviewProps>;
+export default ImagePreview;

package/dist/types/view/HoverCard/styled.d.ts

@@ -8,3 +8,4 @@ export declare const HoverCardContainer: import("@emotion/react").SerializedStyl
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
 export declare const getTransitionStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;
 export declare const popupContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const getPreviewBlockStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;

package/dist/types/view/HoverCard/types.d.ts

@@ -92,7 +92,7 @@ export type HoverCardContentProps = {
     onMouseLeave?: MouseEventHandler;
     showServerActions?: boolean;
 };
-export type SnippetOrPreviewProps = {
+export type ImagePreviewProps = {
     data: JsonLd.Data.BaseData;
-    snippetHeight: number;
+    fallbackElementHeight: number;
 };

package/dist/types-ts4.5/view/HoverCard/components/ImagePreview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ImagePreviewProps } from '../types';
+declare const ImagePreview: React.FC<ImagePreviewProps>;
+export default ImagePreview;

package/dist/types-ts4.5/view/HoverCard/styled.d.ts

@@ -8,3 +8,4 @@ export declare const HoverCardContainer: import("@emotion/react").SerializedStyl
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
 export declare const getTransitionStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;
 export declare const popupContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const getPreviewBlockStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/view/HoverCard/types.d.ts

@@ -92,7 +92,7 @@ export type HoverCardContentProps = {
     onMouseLeave?: MouseEventHandler;
     showServerActions?: boolean;
 };
-export type SnippetOrPreviewProps = {
+export type ImagePreviewProps = {
     data: JsonLd.Data.BaseData;
-    snippetHeight: number;
+    fallbackElementHeight: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.16.0",
+  "version": "26.16.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
     "@atlaskit/popup": "^1.9.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.15.0",
+    "@atlaskit/tokens": "^1.16.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",

package/dist/es2019/view/HoverCard/components/SnippetOrPreview.js

@@ -1,41 +0,0 @@
-import React, { useCallback, useState, useRef } from 'react';
-import { css } from '@emotion/react';
-import extractPreview from '../../../extractors/flexible/extract-preview';
-import { PreviewBlock, SnippetBlock } from '../../FlexibleCard/components/blocks';
-import { getTransitionStyles } from '../styled';
-const SnippetOrPreview = ({
-  data,
-  snippetHeight
-}) => {
-  const transitionStarted = useRef(false);
-  const previewBlockRef = useRef(null);
-  const [showSnippet, setShowSnippet] = useState(false);
-  const [previewCss, setPreviewCss] = useState();
-
-  // Set Preview to a fixed height to enable transitions
-  const onPreviewRender = useCallback(() => {
-    var _previewBlockRef$curr;
-    previewBlockRef.current && setPreviewCss(css`
-        height: ${(_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height}px;
-      `);
-  }, []);
-
-  // On error set Preview to Snippet height with transition
-  const onPreviewError = useCallback(() => {
-    if (transitionStarted.current === false) {
-      setPreviewCss(getTransitionStyles(snippetHeight));
-      transitionStarted.current = true;
-    }
-  }, [snippetHeight]);
-  const onPreviewTransitionEnd = useCallback(() => {
-    setShowSnippet(true);
-  }, []);
-  return !showSnippet && data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, {
-    onError: onPreviewError,
-    overrideCss: previewCss,
-    onTransitionEnd: onPreviewTransitionEnd,
-    blockRef: previewBlockRef,
-    onRender: onPreviewRender
-  }) : /*#__PURE__*/React.createElement(SnippetBlock, null);
-};
-export default SnippetOrPreview;

package/dist/esm/view/HoverCard/components/SnippetOrPreview.js

@@ -1,47 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject;
-import React, { useCallback, useState, useRef } from 'react';
-import { css } from '@emotion/react';
-import extractPreview from '../../../extractors/flexible/extract-preview';
-import { PreviewBlock, SnippetBlock } from '../../FlexibleCard/components/blocks';
-import { getTransitionStyles } from '../styled';
-var SnippetOrPreview = function SnippetOrPreview(_ref) {
-  var data = _ref.data,
-    snippetHeight = _ref.snippetHeight;
-  var transitionStarted = useRef(false);
-  var previewBlockRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showSnippet = _useState2[0],
-    setShowSnippet = _useState2[1];
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    previewCss = _useState4[0],
-    setPreviewCss = _useState4[1];
-
-  // Set Preview to a fixed height to enable transitions
-  var onPreviewRender = useCallback(function () {
-    var _previewBlockRef$curr;
-    previewBlockRef.current && setPreviewCss(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        height: ", "px;\n      "])), (_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
-  }, []);
-
-  // On error set Preview to Snippet height with transition
-  var onPreviewError = useCallback(function () {
-    if (transitionStarted.current === false) {
-      setPreviewCss(getTransitionStyles(snippetHeight));
-      transitionStarted.current = true;
-    }
-  }, [snippetHeight]);
-  var onPreviewTransitionEnd = useCallback(function () {
-    setShowSnippet(true);
-  }, []);
-  return !showSnippet && data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, {
-    onError: onPreviewError,
-    overrideCss: previewCss,
-    onTransitionEnd: onPreviewTransitionEnd,
-    blockRef: previewBlockRef,
-    onRender: onPreviewRender
-  }) : /*#__PURE__*/React.createElement(SnippetBlock, null);
-};
-export default SnippetOrPreview;

package/dist/types/view/HoverCard/components/SnippetOrPreview.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { SnippetOrPreviewProps } from '../types';
-declare const SnippetOrPreview: React.FC<SnippetOrPreviewProps>;
-export default SnippetOrPreview;

package/dist/types-ts4.5/view/HoverCard/components/SnippetOrPreview.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { SnippetOrPreviewProps } from '../types';
-declare const SnippetOrPreview: React.FC<SnippetOrPreviewProps>;
-export default SnippetOrPreview;