@atlaskit/smart-card 16.3.0 → 17.2.0

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

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { fontSize } from '@atlaskit/theme/constants';
+import { gs } from '../utils';
+export const blockCardContentHeaderNameClassName = 'block-card-content-header-name';
+export const Name = ({
+  name,
+  isLeftPadded = true,
+  testId,
+  textColor
+}) => jsx("span", {
+  css: {
+    fontSize: `${fontSize()}px`,
+    fontWeight: 500,
+    marginLeft: isLeftPadded ? gs(1) : '0',
+    lineHeight: gs(2.5),
+    // Spec: show max two lines.
+    display: '-webkit-box',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    wordBreak: 'break-word',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    color: textColor ? textColor : 'inherit',
+    // Fallback options.
+    maxHeight: gs(6)
+  },
+  "data-testid": testId,
+  "data-trello-do-not-use-override": "block-card-content-header-name",
+  className: blockCardContentHeaderNameClassName
+}, name);

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

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { N300 } from '@atlaskit/theme/colors';
+import { gs } from '../utils';
+export const Provider = ({
+  name,
+  icon
+}) => {
+  let iconToRender = icon || null;
+
+  if (typeof icon === 'string') {
+    iconToRender = jsx("img", {
+      className: "smart-link-icon",
+      css: {
+        height: gs(1.5),
+        width: gs(1.5)
+      },
+      src: icon
+    });
+  }
+
+  return jsx("div", {
+    css: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, iconToRender, jsx("span", {
+    css: {
+      fontSize: gs(1.5),
+      color: N300,
+      margin: 0,
+      marginLeft: gs(0.5),
+      // EDM-713: fixes copy-paste from renderer to editor for Firefox
+      // due to HTML its unwrapping behaviour on paste.
+      MozUserSelect: 'none'
+    }
+  }, name));
+};

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

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { gs, mq } from '../utils';
+export const Thumbnail = props => {
+  return props.color ? jsx(ThumbnailWithBackground, props) : jsx(ThumbnailDefault, props);
+};
+const sharedStyles = {
+  // The dimensions of the image are set in this manner
+  // in order for `flex` to respect this value.
+  minWidth: [gs(13), gs(20)],
+  maxWidth: [gs(13), gs(20)]
+};
+export const ThumbnailDefault = ({
+  src,
+  testId
+}) => {
+  return jsx("div", {
+    css: mq({ ...sharedStyles,
+      backgroundSize: 'cover',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: '50% 50%',
+      backgroundImage: `url(${src})`
+    }),
+    "data-testid": testId,
+    "data-trello-do-not-use-override": testId
+  });
+};
+export const ThumbnailWithBackground = ({
+  src,
+  color,
+  testId
+}) => {
+  return jsx("div", {
+    css: mq({ ...sharedStyles,
+      backgroundColor: color,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }),
+    "data-testid": testId,
+    "data-trello-do-not-use-override": testId
+  }, jsx("img", {
+    src: src,
+    css: {
+      height: '90px',
+      width: '90px'
+    }
+  }));
+};

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

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+export const UnresolvedText = ({
+  icon,
+  text
+}) => {
+  return jsx("span", {
+    css: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, icon, text);
+};

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

@@ -1,10 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { CardLinkView, BlockCardResolvingView, BlockCardErroredView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardResolvedView, BlockCardNotFoundView, AuthorizeAction, ForbiddenAction } from '@atlaskit/media-ui';
 import { getExtensionKey } from '../../state/helpers';
 import { extractBlockProps } from '../../extractors/block';
 import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
 import { extractRequestAccessContext } from '../../extractors/common/context';
+import { CardLinkView } from '../LinkView';
+export { default as PreviewAction } from './actions/PreviewAction';
+import { AuthorizeAction } from './actions/AuthorizeAction';
+import { ForbiddenAction } from './actions/ForbiddenAction';
+import { ResolvedView as BlockCardResolvedView } from './views/ResolvedView';
+import { NotFoundView as BlockCardNotFoundView } from './views/NotFoundView';
+import { ResolvingView as BlockCardResolvingView } from './views/ResolvingView';
+import { UnauthorizedView as BlockCardUnauthorisedView } from './views/UnauthorizedView';
+import { ForbiddenView as BlockCardForbiddenView } from './views/ForbiddenView';
+import { ErroredView as BlockCardErroredView } from './views/ErroredView';
+export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
 export const BlockCard = ({
   url,
   cardState: {

package/dist/es2019/view/BlockCard/utils/constants.js

@@ -0,0 +1,4 @@
+const CDN_BASE_URL = 'https://smart-links-cdn.us-east-1.prod.public.atl-paas.net';
+export const LockImage = `${CDN_BASE_URL}/lock.svg`;
+export const CelebrationImage = `${CDN_BASE_URL}/celebration.svg`;
+export const NotFoundImage = `${CDN_BASE_URL}/not_found.svg`;

package/dist/es2019/view/BlockCard/utils/handlers.js

@@ -0,0 +1,7 @@
+export const handleClickCommon = (event, onClick) => {
+  if (onClick) {
+    event.preventDefault();
+    event.stopPropagation();
+    onClick(event);
+  }
+};

package/dist/es2019/view/BlockCard/utils/index.js

@@ -0,0 +1,9 @@
+import { gridSize, borderRadius } from '@atlaskit/theme/constants';
+import facepaint from 'facepaint';
+
+const gs = times => `${gridSize() * times}px`;
+
+const br = (times = 1) => `${borderRadius() * times}px`;
+
+const mq = facepaint(['@media(min-width: 576px)']);
+export { gs, br, mq };

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

@@ -0,0 +1,57 @@
+/** @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';
+const textDescriptionProps = { ...messages.could_not_load_link
+};
+export const blockCardErroredViewClassName = 'block-card-errored-view';
+export const ErroredView = ({
+  isSelected = false,
+  testId = 'block-card-errored-view',
+  link = '',
+  onClick = () => {},
+  onRetry,
+  inheritDimensions = false
+}) => {
+  const handleClick = event => handleClickCommon(event, onClick);
+
+  const actions = useMemo(() => 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: `${testId}-warning-icon`
+    }),
+    text: jsx(FormattedMessage, textDescriptionProps)
+  }))), jsx(ContentFooter, null, jsx(ActionList, {
+    items: actions
+  }))));
+};

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

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @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 const blockCardForbiddenViewClassName = 'block-card-forbidden-view';
+export const blockCardForbiddenViewLinkClassName = 'block-card-forbidden-view-link';
+export const ForbiddenView = ({
+  context = {
+    text: ''
+  },
+  isSelected = false,
+  actions = [],
+  testId = 'block-card-forbidden-view',
+  showActions = true,
+  link = '',
+  onClick = () => {},
+  requestAccessContext = {}
+}) => {
+  const handleClick = event => handleClickCommon(event, onClick);
+
+  const {
+    action,
+    descriptiveMessageKey = 'invalid_permissions_description'
+  } = requestAccessContext;
+  const items = action ? [...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: `${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/es2019/view/BlockCard/views/NotFoundView.js

@@ -0,0 +1,56 @@
+/** @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';
+const textDescriptionProps = { ...messages.not_found_description
+};
+export const blockCardNotFoundViewClassName = 'block-card-not-found-view';
+export const NotFoundView = ({
+  context = {
+    text: ''
+  },
+  isSelected = false,
+  testId = 'block-card-not-found-view',
+  link = '',
+  onClick = () => {}
+}) => {
+  const handleClick = event => 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: `${testId}-warning-icon`
+    }),
+    text: jsx(FormattedMessage, textDescriptionProps)
+  }))), jsx(ContentFooter, null, jsx(Provider, {
+    name: context.text,
+    icon: context.icon
+  }))));
+};

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

@@ -0,0 +1,97 @@
+/** @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 const blockCardResolvedViewClassName = 'block-card-resolved-view';
+export const blockCardResolvedViewByClassName = 'block-card-resolved-view-by';
+export const ResolvedView = ({
+  icon = {},
+  actions = [],
+  thumbnail,
+  context = {
+    text: ''
+  },
+  title = '',
+  titleTextColor,
+  titlePrefix,
+  isSelected = false,
+  users = [],
+  handleAvatarClick = () => {},
+  handleMoreAvatarsClick = () => {},
+  onClick = () => {},
+  link = '',
+  byline = '',
+  lozenge,
+  details = [],
+  testId = 'block-card-resolved-view',
+  showActions = true
+}) => {
+  const resolvedMetadata = details.length > 0 ? jsx(MetadataList, {
+    testId: testId ? `${testId}-meta` : undefined,
+    items: details
+  }) : undefined;
+  const resolvedByline = jsx(Byline, {
+    testId: testId ? `${testId}-by` : undefined,
+    className: blockCardResolvedViewByClassName
+  }, byline);
+
+  const handleClick = event => handleClickCommon(event, onClick);
+
+  const 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 ? `${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 ? `${testId}-thumb` : undefined
+  }) : null);
+};

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

@@ -0,0 +1,31 @@
+/** @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 const blockCardResolvingViewClassName = 'block-card-resolving-view';
+export const ResolvingView = ({
+  isSelected = false,
+  testId = 'block-card-resolving-view',
+  inheritDimensions
+}) => 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: `${fontSize()}px`,
+    color: N90,
+    marginLeft: gs(0.5)
+  }
+}, jsx(FormattedMessage, messages.loading)));

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

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
+const textBylineProps = { ...messages.connect_link_account_card_description
+};
+export const UnauthorizedView = ({
+  context = {
+    text: ''
+  },
+  isSelected = false,
+  actions = [],
+  testId = 'block-card-unauthorized-view',
+  showActions = true,
+  link = '',
+  onClick = () => {}
+}) => {
+  const handleClick = event => 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 ? `${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/es2019/view/Card/index.js

@@ -4,12 +4,18 @@ 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';
 
 class PlainCard extends React.PureComponent {
   render() {
-    return isCardWithData(this.props) ? /*#__PURE__*/React.createElement(CardWithDataRenderer, this.props) : /*#__PURE__*/React.createElement(CardWithURLRenderer, this.props);
+    const 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);
   }
 
 }
 
-export const Card = withAnalyticsContext(context)(withAnalyticsEvents()(PlainCard));
+export const Card = withAnalyticsContext(context)(withAnalyticsEvents()(injectIntl(PlainCard, {
+  enforceContext: false
+})));

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

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 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 class CardWithDataContent extends React.Component {
   render() {
     const {

package/dist/es2019/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 const loadingPlaceholderClassName = 'smart-link-loading-placeholder';
 export const LoadingCardLink = ({
   isSelected,

package/dist/es2019/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({
   id,
   url,
@@ -20,7 +22,9 @@ export function CardWithUrlContent({
   showActions,
   inheritDimensions,
   embedIframeRef,
-  inlinePreloaderStyle
+  inlinePreloaderStyle,
+  ui,
+  children
 }) {
   // Get state, actions for this card.
   const {
@@ -76,6 +80,16 @@ export function CardWithUrlContent({
     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/es2019/view/CardWithUrl/loader.js

@@ -1,10 +1,10 @@
 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';
 const LazyCardWithUrlContent = /*#__PURE__*/lazy(() => import(
 /* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */
 './component-lazy/index'));
@@ -36,7 +36,9 @@ export function CardWithURLRenderer(props) {
     platform,
     embedIframeRef,
     inlinePreloaderStyle,
-    createAnalyticsEvent
+    createAnalyticsEvent,
+    children,
+    ui
   } = props; // Wrapper around analytics.
 
   const dispatchAnalytics = useCallback(analyticsPayload => {
@@ -99,8 +101,9 @@ export function CardWithURLRenderer(props) {
     inheritDimensions: inheritDimensions,
     platform: platform,
     embedIframeRef: embedIframeRef,
-    inlinePreloaderStyle: inlinePreloaderStyle
-  })));
+    inlinePreloaderStyle: inlinePreloaderStyle,
+    ui: ui
+  }, children)));
 }
 
 const ErrorFallback = () => {