@atlaskit/smart-card 34.6.5 → 34.7.0

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

@@ -0,0 +1,362 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import * as colors from '@atlaskit/theme/colors';
+import { N40 } from '@atlaskit/theme/colors';
+import { gs as gridSize } from '../../common/utils';
+export const className = 'media-card-frame';
+export const borderRadius = `
+  border-radius: ${"var(--ds-border-radius, 3px)"};
+`;
+const wrapperBorderRadius = `
+  border-radius: ${"var(--ds-border-radius-200, 8px)"};
+`;
+const contentBorderRadius = `
+  border-radius: ${"var(--ds-border-radius-100, 4px)"};
+`;
+export const ellipsis = (maxWidth = '100%') => {
+  const unit = typeof maxWidth === 'number' ? 'px' : '';
+  return `
+    max-width: ${maxWidth}${unit};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `;
+};
+export const csssize = (value = '100%') => {
+  const unit = typeof value === 'number' ? 'px' : '';
+  return `
+    width: ${value}${unit};
+    height: ${value}${unit};
+  `;
+};
+function minWidth({
+  minWidth
+}) {
+  if (minWidth) {
+    return `min-width: ${minWidth}px;`;
+  } else {
+    return '';
+  }
+}
+function maxWidth({
+  maxWidth
+}) {
+  if (maxWidth) {
+    return `max-width: ${maxWidth}px; margin: 0 auto;`;
+  } else {
+    return 'margin: 0 auto;';
+  }
+}
+function getInteractiveStyles({
+  isInteractive,
+  frameStyle
+}) {
+  return isInteractive ? `
+      &:hover {
+        ${frameStyle !== 'hide' && visibleStyles}
+
+      }
+      &:active {
+        background-color: ${`var(--ds-background-selected, ${colors.B50})`};
+      }
+    ` : '';
+}
+function selected({
+  isSelected,
+  frameStyle
+}) {
+  return isSelected && frameStyle !== 'hide' ? `
+    ${visibleStyles}
+    &::after {
+      cursor: pointer;
+      box-shadow: 0 0 0 3px ${`var(--ds-border-selected, ${colors.B100})`};
+      content: '';
+      border: none;
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      left: 0;
+      ${wrapperBorderRadius}
+    }
+    ` : isSelected && frameStyle === 'hide' ? contentBorderRadius : '';
+}
+const height = ({
+  inheritDimensions
+}) => inheritDimensions ? 'height: 100%;' : `height: ${gridSize(54)}`;
+const wrapperStyles = props => `
+  ${wrapperBorderRadius}
+  ${minWidth(props)}
+  ${maxWidth(props)}
+  ${getInteractiveStyles(props)}
+  ${visible(props)}
+  display: inline-flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  font-family: ${"var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"};
+  width: 100%;
+  user-select: none;
+  line-height: initial;
+  transition: background 0.3s;
+  position: relative;
+  ${height(props)};
+  ${selected(props)}
+
+  &:after {
+    content: '';
+    transition: background 0.3s, box-shadow 0.3s;
+    position: absolute;
+    height: calc(100% + ${"var(--ds-space-100, 8px)"});
+    ${wrapperBorderRadius}
+
+    ${wrapperSizing(props)}
+  }
+`;
+
+// if frameStyle !== 'show' then set the width of the frame to be
+// 100% of the content +16px and position it left -8px to make it appear
+// outside the container
+const wrapperSizing = ({
+  frameStyle
+}) => frameStyle === 'show' ? `
+    box-sizing: border-box;
+    width: 100%;` : `
+    width: calc(100% + ${"var(--ds-space-200, 16px)"});
+    left: ${"var(--ds-space-negative-100, -8px)"};`;
+const visibleStyles = `
+  &:after {
+    border: 1px solid ${`var(--ds-border, ${N40})`};
+    background-color: ${"var(--ds-surface-raised, white)"};
+  }
+  .embed-header {
+    opacity: 1;
+  }`;
+function visible({
+  frameStyle
+}) {
+  return frameStyle === 'show' ? visibleStyles : '';
+}
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const LinkWrapper = styled.div`
+	${props => wrapperStyles(props)} &:hover {
+		text-decoration: none;
+	}
+`;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+export const Wrapper = styled.div(props => wrapperStyles(props), {
+  // We are keeping this margin as a hardcoded variable as it is not a standard token size and needs
+  // to be thoroughly checked with a designer so that we do not miss an unintended visual change
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '10px'
+});
+export const embedHeaderHeight = 32;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const Header = styled.div({
+  height: `${embedHeaderHeight}px`,
+  position: 'absolute',
+  zIndex: 1,
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  color: `var(--ds-icon, ${colors.N300})`,
+  opacity: 0,
+  transition: '300ms opacity cubic-bezier(0.15, 1, 0.3, 1)'
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+({
+  frameStyle
+}) => frameStyle === 'show' ? `
+        box-sizing: border-box;
+        padding: 0 ${"var(--ds-space-100, 8px)"};
+      ` : '');
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const IconWrapper = styled.div(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+borderRadius,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+csssize(16),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+({
+  isPlaceholder
+}) => {
+  if (isPlaceholder) {
+    return `
+			${/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */''}
+      background-color: ${`var(--ds-skeleton, ${colors.N30})`};
+    `;
+  } else {
+    return '';
+  }
+}, {
+  marginRight: "var(--ds-space-050, 4px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const TextWrapper = styled.div(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+({
+  isPlaceholder
+}) => {
+  if (isPlaceholder) {
+    return `
+        ${borderRadius}
+        width: 125px;
+        height: 12px;
+${/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */''}
+        background-color: ${`var(--ds-skeleton, ${colors.N30})`};
+      `;
+  } else {
+    return '';
+  }
+}, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  color: `var(--ds-text-subtlest, ${colors.N300})`,
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+ellipsis('none'));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const TooltipWrapper = styled.div({
+  overflow: 'hidden'
+});
+// NB: `overflow` is kept as `hidden` since
+// the internal contents of the `iframe` should
+// manage scrolling behaviour.
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const Content = styled.div`
+	${contentBorderRadius};
+	border: 1px solid ${`var(--ds-border, ${N40})`};
+	background-color: ${"var(--ds-surface-raised, white)"};
+	position: absolute;
+	z-index: 1;
+	width: 100%;
+	transition: box-shadow 0.3s;
+
+	> .calc-height > div > div {
+		left: unset !important;
+		width: unset !important;
+		height: unset !important;
+		position: initial !important;
+		padding-bottom: unset !important;
+	}
+	> .embed-preview > div {
+		margin: 0 auto;
+	}
+
+	${({
+  allowScrollBar,
+  removeOverflow
+}) => {
+  if (removeOverflow) {
+    return '';
+  }
+  return allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;';
+}}
+
+	${({
+  frameStyle
+}) => frameStyle === 'show' ? `
+        width: calc(100% - ${"var(--ds-space-200, 16px)"} - 2px);
+        margin: 0 ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"};
+      ` : ''}
+
+  ${({
+  frameStyle
+}) => frameStyle === 'hide' ? 'height: 100%;' : `
+        height: calc(100% - ${"var(--ds-space-400, 32px)"});
+        top: ${"var(--ds-space-400, 32px)"};
+      `}
+`;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+export const Image = styled.img(({
+  size
+}) => csssize(size), borderRadius, {
+  overflow: 'hidden'
+});
+export const maxAvatarCount = 6;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const ContentWrapper = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+  boxSizing: 'border-box',
+  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"}`
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const Title = styled.div({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  color: `var(--ds-text, ${colors.N900})`,
+  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  maxHeight: `${20 * 4}px`,
+  overflow: 'hidden'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const Byline = styled.div({
+  marginTop: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  color: `var(--ds-text-subtlest, ${colors.N300})`,
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+ellipsis('100%'));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const Description = styled.div({
+  marginTop: `calc(${"var(--ds-space-100, 8px)"} - 1px)`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  color: `var(--ds-text, ${colors.N800})`,
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  maxHeight: `${18 * 3}px`,
+  overflow: 'hidden'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const ResolvedViewIconWrapper = styled.div({
+  marginTop: "var(--ds-space-050, 4px)"
+});
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+export const Thumbnail = styled.div(borderRadius, csssize(48), props => ({
+  float: 'right',
+  margin: `${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"}`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  backgroundColor: `var(--ds-skeleton, ${colors.N30})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  backgroundImage: `url(${props.src})`,
+  backgroundSize: 'cover'
+}));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const UsersWrapper = styled.div({
+  marginTop: "var(--ds-space-100, 8px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const ActionsWrapper = styled.div({
+  marginTop: "var(--ds-space-100, 8px)",
+  textAlign: 'right',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> *': {
+    marginTop: "var(--ds-space-050, 4px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> * + *': {
+    marginLeft: "var(--ds-space-050, 4px)"
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const AlertWrapper = styled.div({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  zIndex: maxAvatarCount + 1
+});

package/dist/es2019/view/EmbedCard/views/ErroredView.compiled.css

@@ -0,0 +1,13 @@
+._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18m915vq{overflow-y:hidden}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0ccj1k{display:-webkit-box}
+._1reo15vq{overflow-x:hidden}
+._1yyjkb7n{-webkit-line-clamp:1}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._c71l183y{max-height:21px}
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
+._sudp1e54{-webkit-box-orient:vertical}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

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

@@ -1,58 +1,48 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* ErroredView.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./ErroredView.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
-import { Box, Inline, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
-import { gs } from '../../common/utils';
 import { Frame } from '../components/ErrorFrame';
-const messageStyles = css({
-  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-regular, 400)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginLeft: gs(0.5),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginRight: gs(0.5),
-  display: '-webkit-box',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  WebkitLineClamp: 1,
-  WebkitBoxOrient: 'vertical',
-  // Fallback options.
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  maxHeight: gs(3)
-});
-const boxStyles = xcss({
-  paddingLeft: 'space.050',
-  paddingRight: 'space.050'
-});
-export const EmbedCardErroredView = ({
+import { EmbedCardErroredViewOld } from './ErroredViewOld';
+const styles = {
+  messageStyles: "_11c81il0 _1reo15vq _18m915vq _k48pi7a9 _18u01b66 _2hwx1b66 _1e0ccj1k _1yyjkb7n _sudp1e54 _1bto1l2s _c71l183y",
+  boxStyles: "_19bv1b66 _u5f31b66"
+};
+const EmbedCardErroredViewNew = ({
   onRetry,
   isSelected = false,
   testId = 'embed-card-errored-view',
   inheritDimensions
-}) => jsx(Frame, {
+}) => /*#__PURE__*/React.createElement(Frame, {
   inheritDimensions: inheritDimensions,
   compact: true,
   isSelected: isSelected,
   testId: testId
-}, jsx(ErrorIcon, {
+}, /*#__PURE__*/React.createElement(ErrorIcon, {
   LEGACY_size: "small",
   color: `var(--ds-icon-danger, ${R300})`,
   label: "error-icon"
-}), jsx(Box, {
-  xcss: boxStyles
-}, jsx(Inline, {
-  xcss: messageStyles
-}, jsx(FormattedMessage, messages.could_not_load_link))), jsx(Button, {
+}), /*#__PURE__*/React.createElement(Box, {
+  xcss: styles.boxStyles
+}, /*#__PURE__*/React.createElement(Inline, {
+  xcss: styles.messageStyles
+}, /*#__PURE__*/React.createElement(FormattedMessage, messages.could_not_load_link))), /*#__PURE__*/React.createElement(Button, {
   testId: "err-view-retry",
   appearance: "link",
   spacing: "none",
   onClick: onRetry
-}, jsx(FormattedMessage, messages.try_again)));
+}, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)));
+export const EmbedCardErroredView = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(EmbedCardErroredViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(EmbedCardErroredViewOld, props);
+  }
+};

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

@@ -0,0 +1,58 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import Button from '@atlaskit/button';
+import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
+import { R300 } from '@atlaskit/theme/colors';
+import { messages } from '../../../messages';
+import { gs } from '../../common/utils';
+import { Frame } from '../components/ErrorFrame';
+const messageStyles = css({
+  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-regular, 400)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginLeft: gs(0.5),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginRight: gs(0.5),
+  display: '-webkit-box',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: 'vertical',
+  // Fallback options.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  maxHeight: gs(3)
+});
+const boxStyles = xcss({
+  paddingLeft: 'space.050',
+  paddingRight: 'space.050'
+});
+export const EmbedCardErroredViewOld = ({
+  onRetry,
+  isSelected = false,
+  testId = 'embed-card-errored-view',
+  inheritDimensions
+}) => jsx(Frame, {
+  inheritDimensions: inheritDimensions,
+  compact: true,
+  isSelected: isSelected,
+  testId: testId
+}, jsx(ErrorIcon, {
+  LEGACY_size: "small",
+  color: `var(--ds-icon-danger, ${R300})`,
+  label: "error-icon"
+}), jsx(Box, {
+  xcss: boxStyles
+}, jsx(Inline, {
+  xcss: messageStyles
+}, jsx(FormattedMessage, messages.could_not_load_link))), jsx(Button, {
+  testId: "err-view-retry",
+  appearance: "link",
+  spacing: "none",
+  onClick: onRetry
+}, jsx(FormattedMessage, messages.try_again)));

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

@@ -1,18 +1,14 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import LinkGlyph from '@atlaskit/icon/core/migration/link';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { getPreviewUrlWithTheme } from '../../../utils';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { Frame } from '../components/Frame';
 import { ImageIcon } from '../components/ImageIcon';
-export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
+import { EmbedCardResolvedViewOld } from './ResolvedViewOld';
+const EmbedCardResolvedViewNew = /*#__PURE__*/React.forwardRef(({
   link,
   context,
   onClick,
@@ -30,7 +26,7 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   const iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   const src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
   const text = title || (context === null || context === void 0 ? void 0 : context.text);
-  const linkGlyph = React.useMemo(() => jsx(LinkGlyph, {
+  const linkGlyph = React.useMemo(() => /*#__PURE__*/React.createElement(LinkGlyph, {
     label: "icon",
     LEGACY_size: "small",
     testId: "embed-card-fallback-icon",
@@ -40,7 +36,7 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
     if ( /*#__PURE__*/React.isValidElement(iconFromContext)) {
       return iconFromContext;
     }
-    return jsx(ImageIcon, {
+    return /*#__PURE__*/React.createElement(ImageIcon, {
       src: src,
       default: linkGlyph
     });
@@ -50,7 +46,7 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   if (previewUrl && isSupportTheming) {
     previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
   }
-  return jsx(ExpandedFrame, {
+  return /*#__PURE__*/React.createElement(ExpandedFrame, {
     isSelected: isSelected,
     frameStyle: frameStyle,
     href: link,
@@ -60,7 +56,7 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
     onClick: onClick,
     inheritDimensions: inheritDimensions,
     setOverflow: false
-  }, jsx(Frame, {
+  }, /*#__PURE__*/React.createElement(Frame, {
     url: previewUrl,
     isTrusted: isTrusted,
     testId: testId,
@@ -69,4 +65,15 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
     onIframeFocus: onIframeFocus,
     title: text
   }));
+});
+export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef((props, ref) => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(EmbedCardResolvedViewNew, _extends({}, props, {
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(EmbedCardResolvedViewOld, _extends({}, props, {
+      ref: ref
+    }));
+  }
 });

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

@@ -0,0 +1,72 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import LinkGlyph from '@atlaskit/icon/core/migration/link';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { getPreviewUrlWithTheme } from '../../../utils';
+import { ExpandedFrame } from '../components/ExpandedFrame';
+import { Frame } from '../components/Frame';
+import { ImageIcon } from '../components/ImageIcon';
+export const EmbedCardResolvedViewOld = /*#__PURE__*/React.forwardRef(({
+  link,
+  context,
+  onClick,
+  isSelected,
+  frameStyle,
+  preview,
+  title,
+  isTrusted,
+  testId = 'embed-card-resolved-view',
+  inheritDimensions,
+  onIframeDwell,
+  onIframeFocus,
+  isSupportTheming
+}, embedIframeRef) => {
+  const iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
+  const src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
+  const text = title || (context === null || context === void 0 ? void 0 : context.text);
+  const linkGlyph = React.useMemo(() => jsx(LinkGlyph, {
+    label: "icon",
+    LEGACY_size: "small",
+    testId: "embed-card-fallback-icon",
+    color: "currentColor"
+  }), []);
+  let icon = React.useMemo(() => {
+    if ( /*#__PURE__*/React.isValidElement(iconFromContext)) {
+      return iconFromContext;
+    }
+    return jsx(ImageIcon, {
+      src: src,
+      default: linkGlyph
+    });
+  }, [src, linkGlyph, iconFromContext]);
+  const themeState = useThemeObserver();
+  let previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
+  if (previewUrl && isSupportTheming) {
+    previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
+  }
+  return jsx(ExpandedFrame, {
+    isSelected: isSelected,
+    frameStyle: frameStyle,
+    href: link,
+    testId: testId,
+    icon: icon,
+    text: text,
+    onClick: onClick,
+    inheritDimensions: inheritDimensions,
+    setOverflow: false
+  }, jsx(Frame, {
+    url: previewUrl,
+    isTrusted: isTrusted,
+    testId: testId,
+    ref: embedIframeRef,
+    onIframeDwell: onIframeDwell,
+    onIframeFocus: onIframeFocus,
+    title: text
+  }));
+});