@atlaskit/smart-card 24.0.2 → 24.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 24.1.0
+
+### Minor Changes
+
+- [`2d2bfdfb0eb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d2bfdfb0eb) - [ux] A support for borderless embed was added. A new prop 'frameStyle' was added which allows user to choose one of three styles: 'show', 'hide', 'showOnHover'. The prop isFrameVisible was made deprecated and replaced by the new prop.
+
+## 24.0.3
+
+### Patch Changes
+
+- [`9e7d94da3cd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9e7d94da3cd) - [ux] Fix hover preview background colour in dark mode
+
 ## 24.0.2
 
 ### Patch Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "24.0.2",
+	"version": "24.1.0",
 	"sideEffects": false
 }

package/dist/cjs/view/CardWithUrl/component.js

@@ -28,6 +28,7 @@ function CardWithUrlContent(_ref) {
     url = _ref.url,
     isSelected = _ref.isSelected,
     isFrameVisible = _ref.isFrameVisible,
+    frameStyle = _ref.frameStyle,
     platform = _ref.platform,
     onClick = _ref.onClick,
     appearance = _ref.appearance,
@@ -247,6 +248,7 @@ function CardWithUrlContent(_ref) {
         analytics: analytics,
         isSelected: isSelected,
         isFrameVisible: isFrameVisible,
+        frameStyle: frameStyle,
         platform: platform,
         onResolve: onResolve,
         onError: onError,

package/dist/cjs/view/CardWithUrl/loader.js

@@ -41,6 +41,7 @@ function CardWithURLRenderer(props) {
     appearance = props.appearance,
     isSelected = props.isSelected,
     isFrameVisible = props.isFrameVisible,
+    frameStyle = props.frameStyle,
     onClick = props.onClick,
     container = props.container,
     onResolve = props.onResolve,
@@ -110,6 +111,7 @@ function CardWithURLRenderer(props) {
     onClick: onClick,
     isSelected: isSelected,
     isFrameVisible: isFrameVisible,
+    frameStyle: frameStyle,
     dispatchAnalytics: dispatchAnalytics,
     container: container,
     onResolve: onResolve,

package/dist/cjs/view/EmbedCard/components/ExpandedFrame.js

@@ -1,14 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExpandedFrame = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styled = require("./styled");
 var _handlers = require("../../BlockCard/utils/handlers");
 var _useMouseDownEvent = _interopRequireDefault(require("../../../state/analytics/useMouseDownEvent"));
+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 ExpandedFrame = function ExpandedFrame(_ref) {
   var _ref$isPlaceholder = _ref.isPlaceholder,
     isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
@@ -18,7 +21,7 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
     text = _ref.text,
     isSelected = _ref.isSelected,
     isFrameVisible = _ref.isFrameVisible,
-    isVisible = _ref.isVisible,
+    frameStyle = _ref.frameStyle,
     href = _ref.href,
     minWidth = _ref.minWidth,
     maxWidth = _ref.maxWidth,
@@ -34,6 +37,9 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
     return (0, _handlers.handleClickCommon)(event, onClick);
   };
   var handleMouseDown = (0, _useMouseDownEvent.default)();
+  var calculatedFrameStyle = (0, _react.useMemo)(function () {
+    return frameStyle !== undefined ? frameStyle : isFrameVisible ? 'show' : 'showOnHover';
+  }, [frameStyle, isFrameVisible]);
   var renderHeader = function renderHeader() {
     return /*#__PURE__*/_react.default.createElement(_styled.Header, {
       className: "embed-header"
@@ -51,7 +57,8 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
     return /*#__PURE__*/_react.default.createElement(_styled.Content, {
       "data-testid": "embed-content-wrapper",
       allowScrollBar: allowScrollBar,
-      isInteractive: isInteractive()
+      isInteractive: isInteractive(),
+      frameStyle: frameStyle
     }, children);
   };
   if (!isPlaceholder && href) {
@@ -59,18 +66,14 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
       className: _styled.className,
       isInteractive: isInteractive(),
       isSelected: isSelected,
-      isFrameVisible: isFrameVisible,
+      frameStyle: calculatedFrameStyle,
       minWidth: minWidth,
       maxWidth: maxWidth,
-      isVisible: isVisible,
       "data-testid": testId,
       "data-trello-do-not-use-override": testId
       // Due to limitations of testing library, we can't assert ::after
       ,
-      "data-is-selected": isSelected
-      // Due to limitation of testing library, we can't match background colors #ebecf0 and rgb(235, 236, 240)
-      ,
-      "data-is-frame-visible": isFrameVisible,
+      "data-is-selected": isSelected,
       inheritDimensions: inheritDimensions
     }, renderHeader(), renderContent());
   } else {
@@ -79,12 +82,11 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
       isInteractive: isInteractive(),
       isSelected: isSelected,
       minWidth: minWidth,
+      frameStyle: calculatedFrameStyle,
       maxWidth: maxWidth,
-      isVisible: isVisible,
       "data-testid": testId,
       "data-trello-do-not-use-override": testId,
       "data-is-selected": isSelected,
-      "data-is-visible": isVisible,
       "data-wrapper-type": "default",
       "data-is-interactive": isInteractive()
     }, renderHeader(), renderContent());

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -48,28 +48,27 @@ function maxWidth(_ref2) {
     return 'margin: 0 auto;';
   }
 }
-function getinteractiveStyles(_ref3) {
+function getInteractiveStyles(_ref3) {
   var isInteractive = _ref3.isInteractive,
-    isFrameVisible = _ref3.isFrameVisible;
-  var visibleFrameStyles = isFrameVisible ? visibleStyles : '';
-  var interactiveFrameStyles = isInteractive ? "\n  &:hover {\n    ".concat(visibleStyles, "\n  }\n  &:active {\n    background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n  }\n") : '';
-  return "".concat(visibleFrameStyles).concat(interactiveFrameStyles);
+    frameStyle = _ref3.frameStyle;
+  return isInteractive ? "\n      &:hover {\n        ".concat(frameStyle !== 'hide' && visibleStyles, "\n      }\n      &:active {\n        background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n      }\n    ") : '';
 }
 function selected(_ref4) {
-  var isSelected = _ref4.isSelected;
-  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(borderRadius, "\n    }\n    ") : '';
+  var isSelected = _ref4.isSelected,
+    frameStyle = _ref4.frameStyle;
+  return isSelected && frameStyle !== 'hide' ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(borderRadius, "\n    }\n    ") : isSelected && frameStyle === 'hide' ? "\n        box-shadow: 0 0 0 3px ".concat("var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n        ", borderRadius, "\n      ") : '';
 }
 var height = function height(_ref5) {
   var inheritDimensions = _ref5.inheritDimensions;
   return inheritDimensions ? 'height: 100%;' : "height: ".concat((0, _utils.gs)(54));
 };
 var wrapperStyles = function wrapperStyles(props) {
-  return "\n  ".concat(borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getinteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat((0, _utils.gs)(2), ");\n    height: calc(100% + ").concat((0, _utils.gs)(1), ");\n    left: -").concat((0, _utils.gs)(1), ";\n    ").concat(borderRadius, "\n  }\n");
+  return "\n  ".concat(borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat((0, _utils.gs)(2), ");\n    height: calc(100% + ").concat((0, _utils.gs)(1), ");\n    left: -").concat((0, _utils.gs)(1), ";\n    ").concat(borderRadius, "\n  }\n");
 };
 var visibleStyles = "\n  background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";\n\n  &:after {\n    background: ", "var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
 function visible(_ref6) {
-  var isVisible = _ref6.isVisible;
-  return isVisible ? visibleStyles : '';
+  var frameStyle = _ref6.frameStyle;
+  return frameStyle === 'show' ? visibleStyles : '';
 }
 var LinkWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
   return wrapperStyles(props);
@@ -104,7 +103,7 @@ exports.TextWrapper = TextWrapper;
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n"])), borderRadius, cardShadow, "var(--ds-surface-raised, white)", (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), borderRadius, cardShadow, "var(--ds-surface-raised, white)", function (_ref9) {
   var isInteractive = _ref9.isInteractive;
   if (isInteractive) {
     return "\n          .".concat(className, ":hover & {\n            box-shadow: ", "var(--ds-shadow-overlay, 0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25))", ";\n          }\n        ");
@@ -114,10 +113,13 @@ var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _t
 }, function (_ref10) {
   var allowScrollBar = _ref10.allowScrollBar;
   return allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;';
+}, function (_ref11) {
+  var frameStyle = _ref11.frameStyle;
+  return frameStyle === 'hide' ? 'height: 100%;' : "\n        height: calc(100% - ".concat((0, _utils.gs)(4), ");\n        top: ").concat((0, _utils.gs)(4), ";\n      ");
 });
 exports.Content = Content;
-var Image = _styled.default.img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref11) {
-  var size = _ref11.size;
+var Image = _styled.default.img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref12) {
+  var size = _ref12.size;
   return csssize(size);
 }, borderRadius);
 exports.Image = Image;
@@ -133,8 +135,8 @@ var Description = _styled.default.div(_templateObject11 || (_templateObject11 =
 exports.Description = Description;
 var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n"])));
 exports.ResolvedViewIconWrapper = ResolvedViewIconWrapper;
-var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref12) {
-  var src = _ref12.src;
+var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref13) {
+  var src = _ref13.src;
   return src;
 });
 exports.Thumbnail = Thumbnail;

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

@@ -34,6 +34,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
     showActions = _ref.showActions,
     isSelected = _ref.isSelected,
     isFrameVisible = _ref.isFrameVisible,
+    frameStyle = _ref.frameStyle,
     platform = _ref.platform,
     onResolve = _ref.onResolve,
     onError = _ref.onError,
@@ -66,11 +67,13 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
         return /*#__PURE__*/_react.default.createElement(_ResolvedView2.EmbedCardResolvedView, (0, _extends2.default)({}, resolvedViewProps, {
           isSelected: isSelected,
           isFrameVisible: isFrameVisible,
+          frameStyle: frameStyle,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
           ref: iframeRef,
           onIframeDwell: onIframeDwell,
-          onIframeFocus: onIframeFocus
+          onIframeFocus: onIframeFocus,
+          testId: testId
         }));
       } else {
         if (platform === 'mobile') {

package/dist/cjs/view/EmbedCard/views/ForbiddenView.js

@@ -52,7 +52,7 @@ var EmbedCardForbiddenView = function EmbedCardForbiddenView(_ref) {
     href: link,
     icon: icon,
     text: context && context.text,
-    isVisible: true,
+    frameStyle: "show",
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,

package/dist/cjs/view/EmbedCard/views/NotFoundView.js

@@ -25,7 +25,7 @@ var EmbedCardNotFoundView = function EmbedCardNotFoundView(_ref) {
     href: link,
     icon: icon,
     text: context && context.text,
-    isVisible: true,
+    frameStyle: "show",
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,

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

@@ -19,6 +19,7 @@ var EmbedCardResolvedView = /*#__PURE__*/_react2.default.forwardRef(function (_r
     onClick = _ref.onClick,
     isSelected = _ref.isSelected,
     isFrameVisible = _ref.isFrameVisible,
+    frameStyle = _ref.frameStyle,
     preview = _ref.preview,
     title = _ref.title,
     isTrusted = _ref.isTrusted,
@@ -49,6 +50,7 @@ var EmbedCardResolvedView = /*#__PURE__*/_react2.default.forwardRef(function (_r
   return (0, _react.jsx)(_ExpandedFrame.ExpandedFrame, {
     isSelected: isSelected,
     isFrameVisible: isFrameVisible,
+    frameStyle: frameStyle,
     href: link,
     testId: testId,
     icon: icon,

package/dist/cjs/view/EmbedCard/views/UnauthorisedView.js

@@ -41,7 +41,7 @@ var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
     href: link,
     icon: icon,
     text: context && context.text,
-    isVisible: true,
+    frameStyle: "show",
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,

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

@@ -11,6 +11,7 @@ var _index = require("../../index");
 var _constants = require("../../constants");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var flexibleUiOptions = {
+  hideBackground: true,
   hideElevation: true,
   size: _constants.SmartLinkSize.Medium,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "24.0.2",
+	"version": "24.1.0",
 	"sideEffects": false
 }

package/dist/es2019/view/CardWithUrl/component.js

@@ -18,6 +18,7 @@ export function CardWithUrlContent({
   url,
   isSelected,
   isFrameVisible,
+  frameStyle,
   platform,
   onClick,
   appearance,
@@ -234,6 +235,7 @@ export function CardWithUrlContent({
         analytics: analytics,
         isSelected: isSelected,
         isFrameVisible: isFrameVisible,
+        frameStyle: frameStyle,
         platform: platform,
         onResolve: onResolve,
         onError: onError,

package/dist/es2019/view/CardWithUrl/loader.js

@@ -21,6 +21,7 @@ export function CardWithURLRenderer(props) {
     appearance,
     isSelected,
     isFrameVisible,
+    frameStyle,
     onClick,
     container,
     onResolve,
@@ -93,6 +94,7 @@ export function CardWithURLRenderer(props) {
     onClick,
     isSelected,
     isFrameVisible,
+    frameStyle,
     dispatchAnalytics,
     container,
     onResolve,

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Content } from './styled';
 import { handleClickCommon } from '../../BlockCard/utils/handlers';
 import useMouseDownEvent from '../../../state/analytics/useMouseDownEvent';
@@ -10,7 +10,7 @@ export const ExpandedFrame = ({
   text,
   isSelected,
   isFrameVisible,
-  isVisible,
+  frameStyle,
   href,
   minWidth,
   maxWidth,
@@ -21,6 +21,7 @@ export const ExpandedFrame = ({
   const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
   const handleClick = event => handleClickCommon(event, onClick);
   const handleMouseDown = useMouseDownEvent();
+  const calculatedFrameStyle = useMemo(() => frameStyle !== undefined ? frameStyle : isFrameVisible ? 'show' : 'showOnHover', [frameStyle, isFrameVisible]);
   const renderHeader = () => /*#__PURE__*/React.createElement(Header, {
     className: "embed-header"
   }, /*#__PURE__*/React.createElement(IconWrapper, {
@@ -35,25 +36,22 @@ export const ExpandedFrame = ({
   const renderContent = () => /*#__PURE__*/React.createElement(Content, {
     "data-testid": "embed-content-wrapper",
     allowScrollBar: allowScrollBar,
-    isInteractive: isInteractive()
+    isInteractive: isInteractive(),
+    frameStyle: frameStyle
   }, children);
   if (!isPlaceholder && href) {
     return /*#__PURE__*/React.createElement(LinkWrapper, {
       className: className,
       isInteractive: isInteractive(),
       isSelected: isSelected,
-      isFrameVisible: isFrameVisible,
+      frameStyle: calculatedFrameStyle,
       minWidth: minWidth,
       maxWidth: maxWidth,
-      isVisible: isVisible,
       "data-testid": testId,
       "data-trello-do-not-use-override": testId
       // Due to limitations of testing library, we can't assert ::after
       ,
-      "data-is-selected": isSelected
-      // Due to limitation of testing library, we can't match background colors #ebecf0 and rgb(235, 236, 240)
-      ,
-      "data-is-frame-visible": isFrameVisible,
+      "data-is-selected": isSelected,
       inheritDimensions: inheritDimensions
     }, renderHeader(), renderContent());
   } else {
@@ -62,12 +60,11 @@ export const ExpandedFrame = ({
       isInteractive: isInteractive(),
       isSelected: isSelected,
       minWidth: minWidth,
+      frameStyle: calculatedFrameStyle,
       maxWidth: maxWidth,
-      isVisible: isVisible,
       "data-testid": testId,
       "data-trello-do-not-use-override": testId,
       "data-is-selected": isSelected,
-      "data-is-visible": isVisible,
       "data-wrapper-type": "default",
       "data-is-interactive": isInteractive()
     }, renderHeader(), renderContent());

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -41,25 +41,24 @@ function maxWidth({
     return 'margin: 0 auto;';
   }
 }
-function getinteractiveStyles({
+function getInteractiveStyles({
   isInteractive,
-  isFrameVisible
+  frameStyle
 }) {
-  const visibleFrameStyles = isFrameVisible ? visibleStyles : '';
-  const interactiveFrameStyles = isInteractive ? `
-  &:hover {
-    ${visibleStyles}
-  }
-  &:active {
-    background-color: ${`var(--ds-background-selected, ${colors.B50})`};
-  }
-` : '';
-  return `${visibleFrameStyles}${interactiveFrameStyles}`;
+  return isInteractive ? `
+      &:hover {
+        ${frameStyle !== 'hide' && visibleStyles}
+      }
+      &:active {
+        background-color: ${`var(--ds-background-selected, ${colors.B50})`};
+      }
+    ` : '';
 }
 function selected({
-  isSelected
+  isSelected,
+  frameStyle
 }) {
-  return isSelected ? `
+  return isSelected && frameStyle !== 'hide' ? `
     ${visibleStyles}
     &::after {
       cursor: pointer;
@@ -72,7 +71,10 @@ function selected({
       left: 0;
       ${borderRadius}
     }
-    ` : '';
+    ` : isSelected && frameStyle === 'hide' ? `
+        box-shadow: 0 0 0 3px ${`var(--ds-border-selected, ${colors.B100})`};
+        ${borderRadius}
+      ` : '';
 }
 const height = ({
   inheritDimensions
@@ -81,7 +83,7 @@ const wrapperStyles = props => `
   ${borderRadius}
   ${minWidth(props)}
   ${maxWidth(props)}
-  ${getinteractiveStyles(props)}
+  ${getInteractiveStyles(props)}
   ${visible(props)}
   display: inline-flex;
   flex-direction: column;
@@ -116,9 +118,9 @@ const visibleStyles = `
     opacity: 1;
   }`;
 function visible({
-  isVisible
+  frameStyle
 }) {
-  return isVisible ? visibleStyles : '';
+  return frameStyle === 'show' ? visibleStyles : '';
 }
 export const LinkWrapper = styled.div`
   ${props => wrapperStyles(props)} &:hover {
@@ -185,8 +187,6 @@ export const Content = styled.div`
   position: absolute;
   z-index: 1;
   width: 100%;
-  top: ${gridSize(4)};
-  height: calc(100% - ${gridSize(4)});
   transition: box-shadow 0.3s;
 
   > .calc-height > div > div {
@@ -217,6 +217,13 @@ export const Content = styled.div`
   ${({
   allowScrollBar
 }) => allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;'}
+
+  ${({
+  frameStyle
+}) => frameStyle === 'hide' ? 'height: 100%;' : `
+        height: calc(100% - ${gridSize(4)});
+        top: ${gridSize(4)};
+      `}
 `;
 export const Image = styled.img`
   ${({

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

@@ -27,6 +27,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   showActions,
   isSelected,
   isFrameVisible,
+  frameStyle,
   platform,
   onResolve,
   onError,
@@ -61,11 +62,13 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
         return /*#__PURE__*/React.createElement(EmbedCardResolvedView, _extends({}, resolvedViewProps, {
           isSelected: isSelected,
           isFrameVisible: isFrameVisible,
+          frameStyle: frameStyle,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
           ref: iframeRef,
           onIframeDwell: onIframeDwell,
-          onIframeFocus: onIframeFocus
+          onIframeFocus: onIframeFocus,
+          testId: testId
         }));
       } else {
         if (platform === 'mobile') {

package/dist/es2019/view/EmbedCard/views/ForbiddenView.js

@@ -46,7 +46,7 @@ export const EmbedCardForbiddenView = ({
     href: link,
     icon: icon,
     text: context && context.text,
-    isVisible: true,
+    frameStyle: "show",
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,

package/dist/es2019/view/EmbedCard/views/NotFoundView.js

@@ -18,7 +18,7 @@ export const EmbedCardNotFoundView = ({
     href: link,
     icon: icon,
     text: context && context.text,
-    isVisible: true,
+    frameStyle: "show",
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,

package/dist/es2019/view/EmbedCard/views/ResolvedView.js

@@ -11,6 +11,7 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   onClick,
   isSelected,
   isFrameVisible,
+  frameStyle,
   preview,
   title,
   isTrusted,
@@ -39,6 +40,7 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   return jsx(ExpandedFrame, {
     isSelected: isSelected,
     isFrameVisible: isFrameVisible,
+    frameStyle: frameStyle,
     href: link,
     testId: testId,
     icon: icon,

package/dist/es2019/view/EmbedCard/views/UnauthorisedView.js

@@ -31,7 +31,7 @@ export const EmbedCardUnauthorisedView = ({
     href: link,
     icon: icon,
     text: context && context.text,
-    isVisible: true,
+    frameStyle: "show",
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,

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

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { loadingPlaceholderClassName } from '../../index';
 import { SmartLinkSize, SmartLinkTheme } from '../../constants';
 export const flexibleUiOptions = {
+  hideBackground: true,
   hideElevation: true,
   size: SmartLinkSize.Medium,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "24.0.2",
+	"version": "24.1.0",
 	"sideEffects": false
 }

package/dist/esm/view/CardWithUrl/component.js

@@ -18,6 +18,7 @@ export function CardWithUrlContent(_ref) {
     url = _ref.url,
     isSelected = _ref.isSelected,
     isFrameVisible = _ref.isFrameVisible,
+    frameStyle = _ref.frameStyle,
     platform = _ref.platform,
     onClick = _ref.onClick,
     appearance = _ref.appearance,
@@ -237,6 +238,7 @@ export function CardWithUrlContent(_ref) {
         analytics: analytics,
         isSelected: isSelected,
         isFrameVisible: isFrameVisible,
+        frameStyle: frameStyle,
         platform: platform,
         onResolve: onResolve,
         onError: onError,

package/dist/esm/view/CardWithUrl/loader.js

@@ -29,6 +29,7 @@ export function CardWithURLRenderer(props) {
     appearance = props.appearance,
     isSelected = props.isSelected,
     isFrameVisible = props.isFrameVisible,
+    frameStyle = props.frameStyle,
     onClick = props.onClick,
     container = props.container,
     onResolve = props.onResolve,
@@ -98,6 +99,7 @@ export function CardWithURLRenderer(props) {
     onClick: onClick,
     isSelected: isSelected,
     isFrameVisible: isFrameVisible,
+    frameStyle: frameStyle,
     dispatchAnalytics: dispatchAnalytics,
     container: container,
     onResolve: onResolve,

package/dist/esm/view/EmbedCard/components/ExpandedFrame.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Content } from './styled';
 import { handleClickCommon } from '../../BlockCard/utils/handlers';
 import useMouseDownEvent from '../../../state/analytics/useMouseDownEvent';
@@ -11,7 +11,7 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     text = _ref.text,
     isSelected = _ref.isSelected,
     isFrameVisible = _ref.isFrameVisible,
-    isVisible = _ref.isVisible,
+    frameStyle = _ref.frameStyle,
     href = _ref.href,
     minWidth = _ref.minWidth,
     maxWidth = _ref.maxWidth,
@@ -27,6 +27,9 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     return handleClickCommon(event, onClick);
   };
   var handleMouseDown = useMouseDownEvent();
+  var calculatedFrameStyle = useMemo(function () {
+    return frameStyle !== undefined ? frameStyle : isFrameVisible ? 'show' : 'showOnHover';
+  }, [frameStyle, isFrameVisible]);
   var renderHeader = function renderHeader() {
     return /*#__PURE__*/React.createElement(Header, {
       className: "embed-header"
@@ -44,7 +47,8 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     return /*#__PURE__*/React.createElement(Content, {
       "data-testid": "embed-content-wrapper",
       allowScrollBar: allowScrollBar,
-      isInteractive: isInteractive()
+      isInteractive: isInteractive(),
+      frameStyle: frameStyle
     }, children);
   };
   if (!isPlaceholder && href) {
@@ -52,18 +56,14 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       className: className,
       isInteractive: isInteractive(),
       isSelected: isSelected,
-      isFrameVisible: isFrameVisible,
+      frameStyle: calculatedFrameStyle,
       minWidth: minWidth,
       maxWidth: maxWidth,
-      isVisible: isVisible,
       "data-testid": testId,
       "data-trello-do-not-use-override": testId
       // Due to limitations of testing library, we can't assert ::after
       ,
-      "data-is-selected": isSelected
-      // Due to limitation of testing library, we can't match background colors #ebecf0 and rgb(235, 236, 240)
-      ,
-      "data-is-frame-visible": isFrameVisible,
+      "data-is-selected": isSelected,
       inheritDimensions: inheritDimensions
     }, renderHeader(), renderContent());
   } else {
@@ -72,12 +72,11 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       isInteractive: isInteractive(),
       isSelected: isSelected,
       minWidth: minWidth,
+      frameStyle: calculatedFrameStyle,
       maxWidth: maxWidth,
-      isVisible: isVisible,
       "data-testid": testId,
       "data-trello-do-not-use-override": testId,
       "data-is-selected": isSelected,
-      "data-is-visible": isVisible,
       "data-wrapper-type": "default",
       "data-is-interactive": isInteractive()
     }, renderHeader(), renderContent());

package/dist/esm/view/EmbedCard/components/styled.js

@@ -33,28 +33,27 @@ function maxWidth(_ref2) {
     return 'margin: 0 auto;';
   }
 }
-function getinteractiveStyles(_ref3) {
+function getInteractiveStyles(_ref3) {
   var isInteractive = _ref3.isInteractive,
-    isFrameVisible = _ref3.isFrameVisible;
-  var visibleFrameStyles = isFrameVisible ? visibleStyles : '';
-  var interactiveFrameStyles = isInteractive ? "\n  &:hover {\n    ".concat(visibleStyles, "\n  }\n  &:active {\n    background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n  }\n") : '';
-  return "".concat(visibleFrameStyles).concat(interactiveFrameStyles);
+    frameStyle = _ref3.frameStyle;
+  return isInteractive ? "\n      &:hover {\n        ".concat(frameStyle !== 'hide' && visibleStyles, "\n      }\n      &:active {\n        background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n      }\n    ") : '';
 }
 function selected(_ref4) {
-  var isSelected = _ref4.isSelected;
-  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(borderRadius, "\n    }\n    ") : '';
+  var isSelected = _ref4.isSelected,
+    frameStyle = _ref4.frameStyle;
+  return isSelected && frameStyle !== 'hide' ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(borderRadius, "\n    }\n    ") : isSelected && frameStyle === 'hide' ? "\n        box-shadow: 0 0 0 3px ".concat("var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n        ", borderRadius, "\n      ") : '';
 }
 var height = function height(_ref5) {
   var inheritDimensions = _ref5.inheritDimensions;
   return inheritDimensions ? 'height: 100%;' : "height: ".concat(gridSize(54));
 };
 var wrapperStyles = function wrapperStyles(props) {
-  return "\n  ".concat(borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getinteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat(fontFamily(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat(gridSize(2), ");\n    height: calc(100% + ").concat(gridSize(1), ");\n    left: -").concat(gridSize(1), ";\n    ").concat(borderRadius, "\n  }\n");
+  return "\n  ".concat(borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat(fontFamily(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat(gridSize(2), ");\n    height: calc(100% + ").concat(gridSize(1), ");\n    left: -").concat(gridSize(1), ";\n    ").concat(borderRadius, "\n  }\n");
 };
 var visibleStyles = "\n  background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";\n\n  &:after {\n    background: ", "var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
 function visible(_ref6) {
-  var isVisible = _ref6.isVisible;
-  return isVisible ? visibleStyles : '';
+  var frameStyle = _ref6.frameStyle;
+  return frameStyle === 'show' ? visibleStyles : '';
 }
 export var LinkWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
   return wrapperStyles(props);
@@ -83,7 +82,7 @@ export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _tag
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n"])), borderRadius, cardShadow, "var(--ds-surface-raised, white)", gridSize(4), gridSize(4), function (_ref9) {
+export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), borderRadius, cardShadow, "var(--ds-surface-raised, white)", function (_ref9) {
   var isInteractive = _ref9.isInteractive;
   if (isInteractive) {
     return "\n          .".concat(className, ":hover & {\n            box-shadow: ", "var(--ds-shadow-overlay, 0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25))", ";\n          }\n        ");
@@ -93,9 +92,12 @@ export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedT
 }, function (_ref10) {
   var allowScrollBar = _ref10.allowScrollBar;
   return allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;';
+}, function (_ref11) {
+  var frameStyle = _ref11.frameStyle;
+  return frameStyle === 'hide' ? 'height: 100%;' : "\n        height: calc(100% - ".concat(gridSize(4), ");\n        top: ").concat(gridSize(4), ";\n      ");
 });
-export var Image = styled.img(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref11) {
-  var size = _ref11.size;
+export var Image = styled.img(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref12) {
+  var size = _ref12.size;
   return csssize(size);
 }, borderRadius);
 export var maxAvatarCount = 6;
@@ -104,8 +106,8 @@ export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTem
 export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
 export var Description = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), 18 / 12, 18 * 3);
 export var ResolvedViewIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n"])));
-export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref12) {
-  var src = _ref12.src;
+export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref13) {
+  var src = _ref13.src;
   return src;
 });
 export var UsersWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-top: 8px;\n"])));

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

@@ -27,6 +27,7 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
     showActions = _ref.showActions,
     isSelected = _ref.isSelected,
     isFrameVisible = _ref.isFrameVisible,
+    frameStyle = _ref.frameStyle,
     platform = _ref.platform,
     onResolve = _ref.onResolve,
     onError = _ref.onError,
@@ -59,11 +60,13 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
         return /*#__PURE__*/React.createElement(EmbedCardResolvedView, _extends({}, resolvedViewProps, {
           isSelected: isSelected,
           isFrameVisible: isFrameVisible,
+          frameStyle: frameStyle,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
           ref: iframeRef,
           onIframeDwell: onIframeDwell,
-          onIframeFocus: onIframeFocus
+          onIframeFocus: onIframeFocus,
+          testId: testId
         }));
       } else {
         if (platform === 'mobile') {

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

@@ -45,7 +45,7 @@ export var EmbedCardForbiddenView = function EmbedCardForbiddenView(_ref) {
     href: link,
     icon: icon,
     text: context && context.text,
-    isVisible: true,
+    frameStyle: "show",
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,

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

@@ -18,7 +18,7 @@ export var EmbedCardNotFoundView = function EmbedCardNotFoundView(_ref) {
     href: link,
     icon: icon,
     text: context && context.text,
-    isVisible: true,
+    frameStyle: "show",
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,

package/dist/esm/view/EmbedCard/views/ResolvedView.js

@@ -11,6 +11,7 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     onClick = _ref.onClick,
     isSelected = _ref.isSelected,
     isFrameVisible = _ref.isFrameVisible,
+    frameStyle = _ref.frameStyle,
     preview = _ref.preview,
     title = _ref.title,
     isTrusted = _ref.isTrusted,
@@ -41,6 +42,7 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
   return jsx(ExpandedFrame, {
     isSelected: isSelected,
     isFrameVisible: isFrameVisible,
+    frameStyle: frameStyle,
     href: link,
     testId: testId,
     icon: icon,

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

@@ -31,7 +31,7 @@ export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref)
     href: link,
     icon: icon,
     text: context && context.text,
-    isVisible: true,
+    frameStyle: "show",
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,

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

@@ -4,6 +4,7 @@ import { css } from '@emotion/react';
 import { loadingPlaceholderClassName } from '../../index';
 import { SmartLinkSize, SmartLinkTheme } from '../../constants';
 export var flexibleUiOptions = {
+  hideBackground: true,
   hideElevation: true,
   size: SmartLinkSize.Medium,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

package/dist/types/view/Card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "onResolve" | "platform" | "showAuthTooltip" | "isFrameVisible" | "embedIframeRef" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "onResolve" | "platform" | "showAuthTooltip" | "frameStyle" | "embedIframeRef" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

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

@@ -4,6 +4,7 @@ import { CardAppearance, CardPlatform } from '@atlaskit/linking-common';
 import { AnalyticsFacade } from '../../state/analytics';
 import { FlexibleUiOptions } from '../FlexibleCard/types';
 import { InlinePreloaderStyle, OnErrorCallback } from '../types';
+import { FrameStyle } from '../EmbedCard/types';
 export type { CardAppearance, CardPlatform };
 export declare type CardInnerAppearance = CardAppearance | 'embedPreview' | 'flexible' | 'hoverCardPreview';
 export declare type OnResolveCallback = (data: {
@@ -16,7 +17,13 @@ export interface CardProps extends WithAnalyticsEventsProps {
     id?: string;
     platform?: CardPlatform;
     isSelected?: boolean;
+    /**
+     * @deprecated please use 'frameStyle' prop instead. Current usages will be converted in the following manner:
+     * isFrameVisible: true => frameStyle: 'show', isFrameVisible: false => frameStyle: 'showOnHover'
+     */
     isFrameVisible?: boolean;
+    /** A prop that determines the style of a frame: whether to show it, hide it or only show it when a user hovers over embed */
+    frameStyle?: FrameStyle;
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     importer?: (target: any) => void;
     container?: HTMLElement;

package/dist/types/view/CardWithUrl/component.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CardWithUrlContentProps } from './types';
-export declare function CardWithUrlContent({ id, url, isSelected, isFrameVisible, platform, onClick, appearance, dispatchAnalytics, onResolve, onError, testId, showActions, inheritDimensions, embedIframeRef, inlinePreloaderStyle, ui, children, showHoverPreview, showAuthTooltip: showAuthTooltipProp, analyticsEvents, }: CardWithUrlContentProps): JSX.Element;
+export declare function CardWithUrlContent({ id, url, isSelected, isFrameVisible, frameStyle, platform, onClick, appearance, dispatchAnalytics, onResolve, onError, testId, showActions, inheritDimensions, embedIframeRef, inlinePreloaderStyle, ui, children, showHoverPreview, showAuthTooltip: showAuthTooltipProp, analyticsEvents, }: CardWithUrlContentProps): JSX.Element;

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

@@ -4,6 +4,7 @@ import { AnalyticsHandler } from '../../utils/types';
 import { FlexibleUiOptions } from '../FlexibleCard/types';
 import { InlinePreloaderStyle, OnErrorCallback } from '../types';
 import { AnalyticsFacade } from '../../state/analytics';
+import { FrameStyle } from '../EmbedCard/types';
 export declare type CardWithUrlContentProps = {
     id: string;
     url: string;
@@ -12,6 +13,7 @@ export declare type CardWithUrlContentProps = {
     onClick?: EventHandler<MouseEvent | KeyboardEvent>;
     isSelected?: boolean;
     isFrameVisible?: boolean;
+    frameStyle?: FrameStyle;
     container?: HTMLElement;
     dispatchAnalytics: AnalyticsHandler;
     testId?: string;

package/dist/types/view/EmbedCard/components/ExpandedFrame.d.ts

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+import { FrameStyle } from '../types';
 export interface ExpandedFrameProps {
     isPlaceholder?: boolean;
     href?: string;
@@ -9,10 +10,10 @@ export interface ExpandedFrameProps {
     children?: React.ReactNode;
     /** A flag that determines whether the card is selected in edit mode. */
     isSelected?: boolean;
-    /** will show the frame regardless of user interaction */
+    /** @deprecated use frameStyle prop */
     isFrameVisible?: boolean;
-    /** A flag that determines whether the frame is visible. */
-    isVisible?: boolean;
+    /** A prop that determines the style of a frame: whether to show it, hide it or only show it when a user hovers over embed */
+    frameStyle?: FrameStyle;
     /** The optional click handler */
     onClick?: (evt: React.MouseEvent) => void;
     /** For testing purposes only */

package/dist/types/view/EmbedCard/components/styled.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { FrameStyle } from '../types';
 export declare const className = "media-card-frame";
 export declare const cardShadow = "";
 export interface WrapperProps {
@@ -6,8 +7,7 @@ export interface WrapperProps {
     maxWidth?: number;
     isInteractive?: boolean;
     isSelected?: boolean;
-    isFrameVisible?: boolean;
-    isVisible?: boolean;
+    frameStyle?: FrameStyle;
     inheritDimensions?: boolean;
 }
 export declare const borderRadius: string;
@@ -40,6 +40,7 @@ export declare const TextWrapper: import("@emotion/styled").StyledComponent<{
 export interface ContentProps {
     isInteractive: boolean;
     allowScrollBar: boolean;
+    frameStyle?: FrameStyle;
 }
 export declare const Content: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

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

@@ -17,6 +17,7 @@ export declare type EmbedCardProps = {
     id?: string;
     isSelected?: boolean;
     isFrameVisible?: boolean;
+    frameStyle?: FrameStyle;
     platform?: CardPlatform;
     onResolve?: OnResolveCallback;
     onError?: OnErrorCallback;
@@ -47,3 +48,4 @@ export interface RequestAccessContextProps extends AccessContext {
     descriptiveMessageKey?: RequestAccessMessageKey;
 }
 export declare type InlinePreloaderStyle = 'on-left-with-skeleton' | 'on-right-without-skeleton';
+export declare type FrameStyle = 'show' | 'hide' | 'showOnHover';

package/dist/types/view/EmbedCard/views/ResolvedView.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ContextViewModel } from '../types';
+import { ContextViewModel, FrameStyle } from '../types';
 export interface EmbedCardResolvedViewProps {
     /** The title of the link */
     title?: string;
@@ -11,6 +11,8 @@ export interface EmbedCardResolvedViewProps {
     isSelected?: boolean;
     /** will show the frame regardless of user interaction */
     isFrameVisible?: boolean;
+    /** A prop that determines the style of a frame: whether to show it, hide it or only show it when a user hovers over embed */
+    frameStyle?: FrameStyle;
     /** The src to be used for the `iframe` */
     preview?: {
         src: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "24.0.2",
+  "version": "24.1.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
     "@atlaskit/popup": "^1.5.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^1.0.0",
+    "@atlaskit/tokens": "^1.1.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",

package/report.api.md

@@ -241,6 +241,7 @@ export const Card: React_2.ForwardRefExoticComponent<
     | 'data'
     | 'embedIframeRef'
     | 'forwardedRef'
+    | 'frameStyle'
     | 'id'
     | 'importer'
     | 'inheritDimensions'
@@ -292,6 +293,7 @@ export interface CardProps extends WithAnalyticsEventsProps {
   data?: any;
   // (undocumented)
   embedIframeRef?: React.Ref<HTMLIFrameElement>;
+  frameStyle?: FrameStyle;
   // (undocumented)
   id?: string;
   // (undocumented)
@@ -300,7 +302,7 @@ export interface CardProps extends WithAnalyticsEventsProps {
   inheritDimensions?: boolean;
   // (undocumented)
   inlinePreloaderStyle?: InlinePreloaderStyle;
-  // (undocumented)
+  // @deprecated (undocumented)
   isFrameVisible?: boolean;
   // (undocumented)
   isSelected?: boolean;
@@ -550,6 +552,9 @@ type FooterBlockProps = {
   onActionMenuOpenChange?: (options: OnActionMenuOpenChangeOptions) => void;
 } & BlockProps;
 
+// @public (undocumented)
+type FrameStyle = 'hide' | 'show' | 'showOnHover';
+
 export { InlineCardAdf };
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -178,7 +178,7 @@ type BlockProps = {
 };
 
 // @public (undocumented)
-export const Card: React_2.ForwardRefExoticComponent<Pick<Omit<React_2.PropsWithChildren<WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof WithAnalyticsEventsProps> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "analyticsEvents" | "appearance" | "children" | "container" | "data" | "embedIframeRef" | "forwardedRef" | "id" | "importer" | "inheritDimensions" | "inlinePreloaderStyle" | "isFrameVisible" | "isSelected" | "key" | "onClick" | "onError" | "onResolve" | "placeholder" | "platform" | "showActions" | "showAuthTooltip" | "showHoverPreview" | "testId" | "ui" | "url"> & React_2.RefAttributes<any>>;
+export const Card: React_2.ForwardRefExoticComponent<Pick<Omit<React_2.PropsWithChildren<WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof WithAnalyticsEventsProps> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "analyticsEvents" | "appearance" | "children" | "container" | "data" | "embedIframeRef" | "forwardedRef" | "frameStyle" | "id" | "importer" | "inheritDimensions" | "inlinePreloaderStyle" | "isFrameVisible" | "isSelected" | "key" | "onClick" | "onError" | "onResolve" | "placeholder" | "platform" | "showActions" | "showAuthTooltip" | "showHoverPreview" | "testId" | "ui" | "url"> & React_2.RefAttributes<any>>;
 
 export { CardAdf }
 
@@ -205,6 +205,7 @@ export interface CardProps extends WithAnalyticsEventsProps {
     data?: any;
     // (undocumented)
     embedIframeRef?: React.Ref<HTMLIFrameElement>;
+    frameStyle?: FrameStyle;
     // (undocumented)
     id?: string;
     // (undocumented)
@@ -213,7 +214,7 @@ export interface CardProps extends WithAnalyticsEventsProps {
     inheritDimensions?: boolean;
     // (undocumented)
     inlinePreloaderStyle?: InlinePreloaderStyle;
-    // (undocumented)
+    // @deprecated (undocumented)
     isFrameVisible?: boolean;
     // (undocumented)
     isSelected?: boolean;
@@ -424,6 +425,9 @@ type FooterBlockProps = {
     onActionMenuOpenChange?: (options: OnActionMenuOpenChangeOptions) => void;
 } & BlockProps;
 
+// @public (undocumented)
+type FrameStyle = 'hide' | 'show' | 'showOnHover';
+
 export { InlineCardAdf }
 
 // @public (undocumented)