@atlaskit/smart-card 16.3.0 → 17.2.0

package/dist/esm/view/BlockCard/views/ErroredView.js

@@ -0,0 +1,73 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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; }
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { FormattedMessage } from 'react-intl-next';
+import { useMemo } from 'react';
+import { R300 } from '@atlaskit/theme/colors';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { Frame } from '../components/Frame';
+import { Byline } from '../components/Byline';
+import { ActionList } from '../components/ActionList';
+import { Content } from '../components/Content';
+import { messages } from '@atlaskit/media-ui/messages';
+import { ContentFooter } from '../components/ContentFooter';
+import { ContentHeader } from '../components/ContentHeader';
+import { handleClickCommon } from '../utils/handlers';
+import { Link } from '../components/Link';
+import { UnresolvedText } from '../components/UnresolvedText';
+import { RetryAction } from '../actions/RetryAction';
+
+var textDescriptionProps = _objectSpread({}, messages.could_not_load_link);
+
+export var blockCardErroredViewClassName = 'block-card-errored-view';
+export var ErroredView = function ErroredView(_ref) {
+  var _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-errored-view' : _ref$testId,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? '' : _ref$link,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+      onRetry = _ref.onRetry,
+      _ref$inheritDimension = _ref.inheritDimensions,
+      inheritDimensions = _ref$inheritDimension === void 0 ? false : _ref$inheritDimension;
+
+  var handleClick = function handleClick(event) {
+    return handleClickCommon(event, onClick);
+  };
+
+  var actions = useMemo(function () {
+    return onRetry ? [RetryAction(onRetry)] : [];
+  }, [onRetry]);
+  return jsx(Frame, {
+    isSelected: isSelected,
+    testId: testId,
+    className: blockCardErroredViewClassName,
+    isFluidHeight: true,
+    inheritDimensions: inheritDimensions
+  }, jsx(Content, {
+    isCompact: true
+  }, jsx("div", null, jsx(ContentHeader, {
+    onClick: handleClick,
+    link: link
+  }, jsx(Link, {
+    url: link,
+    testId: testId
+  })), jsx(Byline, null, jsx(UnresolvedText, {
+    icon: jsx(WarningIcon, {
+      label: "errored-warning-icon",
+      size: "small",
+      primaryColor: R300,
+      testId: "".concat(testId, "-warning-icon")
+    }),
+    text: jsx(FormattedMessage, textDescriptionProps)
+  }))), jsx(ContentFooter, null, jsx(ActionList, {
+    items: actions
+  }))));
+};

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

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { FormattedMessage } from 'react-intl-next';
+import { R300 } from '@atlaskit/theme/colors';
+import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import { Frame } from '../components/Frame';
+import { Provider } from '../components/Provider';
+import { Byline } from '../components/Byline';
+import { ActionList } from '../components/ActionList';
+import { Content } from '../components/Content';
+import { messages } from '@atlaskit/media-ui/messages';
+import { ContentFooter } from '../components/ContentFooter';
+import { ContentHeader } from '../components/ContentHeader';
+import { handleClickCommon } from '../utils/handlers';
+import { Link } from '../components/Link';
+import { UnresolvedText } from '../components/UnresolvedText';
+export var blockCardForbiddenViewClassName = 'block-card-forbidden-view';
+export var blockCardForbiddenViewLinkClassName = 'block-card-forbidden-view-link';
+export var ForbiddenView = function ForbiddenView(_ref) {
+  var _ref$context = _ref.context,
+      context = _ref$context === void 0 ? {
+    text: ''
+  } : _ref$context,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-forbidden-view' : _ref$testId,
+      _ref$showActions = _ref.showActions,
+      showActions = _ref$showActions === void 0 ? true : _ref$showActions,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? '' : _ref$link,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+      _ref$requestAccessCon = _ref.requestAccessContext,
+      requestAccessContext = _ref$requestAccessCon === void 0 ? {} : _ref$requestAccessCon;
+
+  var handleClick = function handleClick(event) {
+    return handleClickCommon(event, onClick);
+  };
+
+  var action = requestAccessContext.action,
+      _requestAccessContext = requestAccessContext.descriptiveMessageKey,
+      descriptiveMessageKey = _requestAccessContext === void 0 ? 'invalid_permissions_description' : _requestAccessContext;
+  var items = action ? [].concat(_toConsumableArray(actions), [action]) : actions;
+  return jsx(Frame, {
+    isSelected: isSelected,
+    testId: testId,
+    className: blockCardForbiddenViewClassName,
+    isFluidHeight: true
+  }, jsx(Content, {
+    isCompact: true
+  }, jsx("div", null, jsx(ContentHeader, {
+    onClick: handleClick,
+    link: link
+  }, jsx(Link, {
+    url: link,
+    testId: testId,
+    className: blockCardForbiddenViewLinkClassName
+  })), jsx(Byline, null, jsx(UnresolvedText, {
+    icon: jsx(LockIcon, {
+      label: "forbidden-lock-icon",
+      size: "small",
+      primaryColor: R300,
+      testId: "".concat(testId, "-lock-icon")
+    }),
+    text: jsx(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {
+      values: {
+        context: context.text
+      }
+    }))
+  }))), jsx(ContentFooter, null, jsx(Provider, {
+    name: context.text,
+    icon: context.icon
+  }), showActions && jsx(ActionList, {
+    items: items
+  }))));
+};

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

@@ -0,0 +1,70 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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; }
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { R300 } from '@atlaskit/theme/colors';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { Frame } from '../components/Frame';
+import { Provider } from '../components/Provider';
+import { Byline } from '../components/Byline';
+import { Content } from '../components/Content';
+import { messages } from '@atlaskit/media-ui/messages';
+import { ContentFooter } from '../components/ContentFooter';
+import { ContentHeader } from '../components/ContentHeader';
+import { Link } from '../components/Link';
+import { UnresolvedText } from '../components/UnresolvedText';
+import { handleClickCommon } from '../utils/handlers';
+
+var textDescriptionProps = _objectSpread({}, messages.not_found_description);
+
+export var blockCardNotFoundViewClassName = 'block-card-not-found-view';
+export var NotFoundView = function NotFoundView(_ref) {
+  var _ref$context = _ref.context,
+      context = _ref$context === void 0 ? {
+    text: ''
+  } : _ref$context,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-not-found-view' : _ref$testId,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? '' : _ref$link,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick;
+
+  var handleClick = function handleClick(event) {
+    return handleClickCommon(event, onClick);
+  };
+
+  return jsx(Frame, {
+    isSelected: isSelected,
+    testId: testId,
+    className: blockCardNotFoundViewClassName,
+    isFluidHeight: true
+  }, jsx(Content, {
+    isCompact: true
+  }, jsx("div", null, jsx(ContentHeader, {
+    onClick: handleClick,
+    link: link
+  }, jsx(Link, {
+    url: link,
+    testId: testId
+  })), jsx(Byline, null, jsx(UnresolvedText, {
+    icon: jsx(WarningIcon, {
+      label: "not-found-warning-icon",
+      size: "small",
+      primaryColor: R300,
+      testId: "".concat(testId, "-warning-icon")
+    }),
+    text: jsx(FormattedMessage, textDescriptionProps)
+  }))), jsx(ContentFooter, null, jsx(Provider, {
+    name: context.text,
+    icon: context.icon
+  }))));
+};

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

@@ -0,0 +1,112 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import Lozenge from '@atlaskit/lozenge';
+import { Frame } from '../components/Frame';
+import { Thumbnail } from '../components/Thumbnail';
+import { Provider } from '../components/Provider';
+import { Name } from '../components/Name';
+import { Byline } from '../components/Byline';
+import { ActionList } from '../components/ActionList';
+import { CollaboratorList } from '../components/CollaboratorList';
+import { Emoji } from '../components/Emoji';
+import { Icon } from '../components/Icon';
+import { Content } from '../components/Content';
+import { MetadataList } from '../components/MetadataList';
+import { LozengeBlockWrapper } from '../../InlineCard/IconAndTitleLayout/styled';
+import { ContentHeader } from '../components/ContentHeader';
+import { ContentFooter } from '../components/ContentFooter';
+import { gs } from '../utils';
+import { handleClickCommon } from '../utils/handlers';
+export var blockCardResolvedViewClassName = 'block-card-resolved-view';
+export var blockCardResolvedViewByClassName = 'block-card-resolved-view-by';
+export var ResolvedView = function ResolvedView(_ref) {
+  var _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? {} : _ref$icon,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      thumbnail = _ref.thumbnail,
+      _ref$context = _ref.context,
+      context = _ref$context === void 0 ? {
+    text: ''
+  } : _ref$context,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      titleTextColor = _ref.titleTextColor,
+      titlePrefix = _ref.titlePrefix,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$users = _ref.users,
+      users = _ref$users === void 0 ? [] : _ref$users,
+      _ref$handleAvatarClic = _ref.handleAvatarClick,
+      handleAvatarClick = _ref$handleAvatarClic === void 0 ? function () {} : _ref$handleAvatarClic,
+      _ref$handleMoreAvatar = _ref.handleMoreAvatarsClick,
+      handleMoreAvatarsClick = _ref$handleMoreAvatar === void 0 ? function () {} : _ref$handleMoreAvatar,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? '' : _ref$link,
+      _ref$byline = _ref.byline,
+      byline = _ref$byline === void 0 ? '' : _ref$byline,
+      lozenge = _ref.lozenge,
+      _ref$details = _ref.details,
+      details = _ref$details === void 0 ? [] : _ref$details,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-resolved-view' : _ref$testId,
+      _ref$showActions = _ref.showActions,
+      showActions = _ref$showActions === void 0 ? true : _ref$showActions;
+  var resolvedMetadata = details.length > 0 ? jsx(MetadataList, {
+    testId: testId ? "".concat(testId, "-meta") : undefined,
+    items: details
+  }) : undefined;
+  var resolvedByline = jsx(Byline, {
+    testId: testId ? "".concat(testId, "-by") : undefined,
+    className: blockCardResolvedViewByClassName
+  }, byline);
+
+  var handleClick = function handleClick(event) {
+    return handleClickCommon(event, onClick);
+  };
+
+  var hasActions = showActions && actions.length > 0;
+  return jsx(Frame, {
+    isSelected: isSelected,
+    testId: testId,
+    className: blockCardResolvedViewClassName
+  }, jsx(Content, null, jsx("div", null, jsx("div", {
+    css: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start'
+    }
+  }, jsx(ContentHeader, {
+    onClick: handleClick,
+    link: link
+  }, titlePrefix ? jsx(Emoji, {
+    emoji: titlePrefix
+  }) : jsx(Icon, icon), jsx(Name, {
+    name: title,
+    textColor: titleTextColor
+  }), lozenge && jsx(LozengeBlockWrapper, {
+    css: {
+      height: gs(2.5),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, jsx(Lozenge, lozenge, lozenge.text))), jsx(CollaboratorList, {
+    items: users,
+    handleAvatarClick: handleAvatarClick,
+    handleMoreAvatarsClick: handleMoreAvatarsClick,
+    testId: testId ? "".concat(testId, "-collaborator-list") : undefined
+  })), resolvedByline, resolvedMetadata), jsx(ContentFooter, {
+    hasSpaceBetween: hasActions
+  }, jsx(Provider, {
+    name: context.text,
+    icon: context.icon
+  }), hasActions && jsx(ActionList, {
+    items: actions
+  }))), thumbnail ? jsx(Thumbnail, {
+    src: thumbnail,
+    testId: testId ? "".concat(testId, "-thumb") : undefined
+  }) : null);
+};

package/dist/esm/view/BlockCard/views/ResolvingView.js

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
+import { N50, N90 } from '@atlaskit/theme/colors';
+import { fontSize } from '@atlaskit/theme/constants';
+import { Frame } from '../components/Frame';
+import { gs } from '../utils';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export var blockCardResolvingViewClassName = 'block-card-resolving-view';
+export var ResolvingView = function ResolvingView(_ref) {
+  var _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-resolving-view' : _ref$testId,
+      inheritDimensions = _ref.inheritDimensions;
+  return jsx(Frame, {
+    inheritDimensions: inheritDimensions,
+    compact: true,
+    isSelected: isSelected,
+    testId: testId,
+    className: blockCardResolvingViewClassName
+  }, jsx(DocumentFilledIcon, {
+    size: "small",
+    primaryColor: N50,
+    label: "document-icon"
+  }), jsx("span", {
+    css: {
+      fontSize: "".concat(fontSize(), "px"),
+      color: N90,
+      marginLeft: gs(0.5)
+    }
+  }, jsx(FormattedMessage, messages.loading)));
+};

package/dist/esm/view/BlockCard/views/UnauthorizedView.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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; }
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { FormattedMessage } from 'react-intl-next';
+import { Frame } from '../components/Frame';
+import { Provider } from '../components/Provider';
+import { Byline } from '../components/Byline';
+import { ActionList } from '../components/ActionList';
+import { Content } from '../components/Content';
+import { messages } from '@atlaskit/media-ui/messages';
+import { ContentHeader } from '../components/ContentHeader';
+import { ContentFooter } from '../components/ContentFooter';
+import { handleClickCommon } from '../utils/handlers';
+import { Link } from '../components/Link';
+
+var textBylineProps = _objectSpread({}, messages.connect_link_account_card_description);
+
+export var UnauthorizedView = function UnauthorizedView(_ref) {
+  var _ref$context = _ref.context,
+      context = _ref$context === void 0 ? {
+    text: ''
+  } : _ref$context,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-unauthorized-view' : _ref$testId,
+      _ref$showActions = _ref.showActions,
+      showActions = _ref$showActions === void 0 ? true : _ref$showActions,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? '' : _ref$link,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick;
+
+  var handleClick = function handleClick(event) {
+    return handleClickCommon(event, onClick);
+  };
+
+  return jsx(Frame, {
+    isSelected: isSelected,
+    testId: testId,
+    isFluidHeight: true
+  }, jsx(Content, {
+    isCompact: true
+  }, jsx("div", null, jsx(ContentHeader, {
+    onClick: handleClick,
+    link: link
+  }, jsx(Link, {
+    url: link,
+    testId: testId
+  })), jsx(Byline, {
+    testId: testId ? "".concat(testId, "-byline") : undefined,
+    text: jsx(FormattedMessage, _extends({}, textBylineProps, {
+      values: {
+        context: context.text
+      }
+    }))
+  })), jsx(ContentFooter, null, jsx(Provider, {
+    name: context.text,
+    icon: context.icon
+  }), showActions && jsx(ActionList, {
+    items: actions
+  }))));
+};

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

@@ -14,6 +14,7 @@ import { CardWithDataRenderer } from '../CardWithData/loader';
 import { CardWithURLRenderer } from '../CardWithUrl/loader';
 import { isCardWithData } from '../../utils';
 import { context } from '../../utils/analytics';
+import { injectIntl, IntlProvider } from 'react-intl-next';
 
 var PlainCard = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(PlainCard, _React$PureComponent);
@@ -29,11 +30,16 @@ var PlainCard = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(PlainCard, [{
     key: "render",
     value: function render() {
-      return isCardWithData(this.props) ? /*#__PURE__*/React.createElement(CardWithDataRenderer, this.props) : /*#__PURE__*/React.createElement(CardWithURLRenderer, this.props);
+      var content = isCardWithData(this.props) ? /*#__PURE__*/React.createElement(CardWithDataRenderer, this.props) : /*#__PURE__*/React.createElement(CardWithURLRenderer, this.props);
+      return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+        locale: "en"
+      }, content);
     }
   }]);
 
   return PlainCard;
 }(React.PureComponent);
 
-export var Card = withAnalyticsContext(context)(withAnalyticsEvents()(PlainCard));
+export var Card = withAnalyticsContext(context)(withAnalyticsEvents()(injectIntl(PlainCard, {
+  enforceContext: false
+})));

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

@@ -10,10 +10,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import { BlockCardResolvedView, InlineCardResolvedView } from '@atlaskit/media-ui';
 import { getEmptyJsonLd } from '../../utils/jsonld';
 import { extractInlineProps } from '../../extractors/inline';
 import { extractBlockProps } from '../../extractors/block';
+import { InlineCardResolvedView } from '../InlineCard/ResolvedView';
+import { BlockCardResolvedView } from '../BlockCard';
 export var CardWithDataContent = /*#__PURE__*/function (_React$Component) {
   _inherits(CardWithDataContent, _React$Component);
 

package/dist/esm/view/CardWithUrl/component-lazy/LazyFallback.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CardLinkView } from '@atlaskit/media-ui';
+import { CardLinkView } from '../../../view/LinkView';
 export var loadingPlaceholderClassName = 'smart-link-loading-placeholder';
 export var LoadingCardLink = function LoadingCardLink(_ref) {
   var isSelected = _ref.isSelected,

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

@@ -6,6 +6,8 @@ import { useSmartLink } from '../../state';
 import { BlockCard } from '../BlockCard';
 import { InlineCard } from '../InlineCard';
 import { EmbedCard } from '../EmbedCard';
+import { isFlexibleUiCard } from '../../utils/flexible';
+import FlexibleCard from '../FlexibleCard';
 export function CardWithUrlContent(_ref) {
   var id = _ref.id,
       url = _ref.url,
@@ -20,7 +22,9 @@ export function CardWithUrlContent(_ref) {
       showActions = _ref.showActions,
       inheritDimensions = _ref.inheritDimensions,
       embedIframeRef = _ref.embedIframeRef,
-      inlinePreloaderStyle = _ref.inlinePreloaderStyle;
+      inlinePreloaderStyle = _ref.inlinePreloaderStyle,
+      ui = _ref.ui,
+      children = _ref.children;
 
   // Get state, actions for this card.
   var _useSmartLink = useSmartLink(id, url, dispatchAnalytics),
@@ -80,6 +84,16 @@ export function CardWithUrlContent(_ref) {
     throw error;
   }
 
+  if (isFlexibleUiCard(appearance, children)) {
+    return /*#__PURE__*/React.createElement(FlexibleCard, {
+      cardState: state,
+      onAuthorize: services.length && handleAuthorize || undefined,
+      renderers: renderers,
+      ui: ui,
+      url: url
+    }, children);
+  }
+
   switch (appearance) {
     case 'inline':
       return /*#__PURE__*/React.createElement(InlineCard, {

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

@@ -1,11 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { lazy, useEffect, useState, Suspense, useCallback } from 'react';
 import uuid from 'uuid';
-import { CardLinkView } from '@atlaskit/media-ui';
 import { uiRenderFailedEvent, fireSmartLinkEvent } from '../../utils/analytics';
 import { clearMarks, clearMeasures } from '../../utils/performance';
 import { ErrorBoundary } from 'react-error-boundary';
 import { failUfoExperience, startUfoExperience } from '../../state/analytics/ufoExperiences';
+import { CardLinkView } from '../LinkView';
 var LazyCardWithUrlContent = /*#__PURE__*/lazy(function () {
   return import(
   /* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */
@@ -43,7 +43,9 @@ export function CardWithURLRenderer(props) {
       platform = props.platform,
       embedIframeRef = props.embedIframeRef,
       inlinePreloaderStyle = props.inlinePreloaderStyle,
-      createAnalyticsEvent = props.createAnalyticsEvent; // Wrapper around analytics.
+      createAnalyticsEvent = props.createAnalyticsEvent,
+      children = props.children,
+      ui = props.ui; // Wrapper around analytics.
 
   var dispatchAnalytics = useCallback(function (analyticsPayload) {
     if (analyticsPayload && analyticsPayload.attributes) {
@@ -103,8 +105,9 @@ export function CardWithURLRenderer(props) {
     inheritDimensions: inheritDimensions,
     platform: platform,
     embedIframeRef: embedIframeRef,
-    inlinePreloaderStyle: inlinePreloaderStyle
-  })));
+    inlinePreloaderStyle: inlinePreloaderStyle,
+    ui: ui
+  }, children)));
 }
 
 var ErrorFallback = function ErrorFallback() {

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

@@ -11,7 +11,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import { embedHeaderHeight } from '@atlaskit/media-ui/embeds';
+import { embedHeaderHeight } from './components/styled';
 export var EmbedResizeMessageListener = /*#__PURE__*/function (_React$Component) {
   _inherits(EmbedResizeMessageListener, _React$Component);
 

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Content } from './styled';
+import { handleClickCommon } from '../../BlockCard/utils/handlers';
+export var ExpandedFrame = function ExpandedFrame(_ref) {
+  var _ref$isPlaceholder = _ref.isPlaceholder,
+      isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
+      children = _ref.children,
+      onClick = _ref.onClick,
+      icon = _ref.icon,
+      text = _ref.text,
+      isSelected = _ref.isSelected,
+      isFrameVisible = _ref.isFrameVisible,
+      isVisible = _ref.isVisible,
+      href = _ref.href,
+      minWidth = _ref.minWidth,
+      maxWidth = _ref.maxWidth,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'expanded-frame' : _ref$testId,
+      inheritDimensions = _ref.inheritDimensions;
+
+  var isInteractive = function isInteractive() {
+    return !isPlaceholder && (Boolean(href) || Boolean(onClick));
+  };
+
+  var handleClick = function handleClick(event) {
+    return handleClickCommon(event, onClick);
+  };
+
+  var renderHeader = function renderHeader() {
+    return /*#__PURE__*/React.createElement(Header, {
+      className: "embed-header"
+    }, /*#__PURE__*/React.createElement(IconWrapper, {
+      isPlaceholder: isPlaceholder
+    }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TextWrapper, {
+      isPlaceholder: isPlaceholder
+    }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
+      href: href,
+      onClick: handleClick
+    }, text)));
+  };
+
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/React.createElement(Content, {
+      isInteractive: isInteractive()
+    }, children);
+  };
+
+  if (!isPlaceholder && href) {
+    return /*#__PURE__*/React.createElement(LinkWrapper, {
+      className: className,
+      isInteractive: isInteractive(),
+      isSelected: isSelected,
+      isFrameVisible: isFrameVisible,
+      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,
+      inheritDimensions: inheritDimensions
+    }, renderHeader(), renderContent());
+  } else {
+    return /*#__PURE__*/React.createElement(Wrapper, {
+      className: className,
+      isInteractive: isInteractive(),
+      isSelected: isSelected,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      isVisible: isVisible,
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId,
+      "data-is-selected": isSelected,
+      "data-is-visible": isVisible
+    }, renderHeader(), renderContent());
+  }
+};