@atlaskit/smart-card 16.3.0 → 17.2.0

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { embedHeaderHeight } from '@atlaskit/media-ui/embeds';
+import { embedHeaderHeight } from './components/styled';
 export class EmbedResizeMessageListener extends React.Component {
   constructor(...args) {
     super(...args);

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Content } from './styled';
+import { handleClickCommon } from '../../BlockCard/utils/handlers';
+export const ExpandedFrame = ({
+  isPlaceholder = false,
+  children,
+  onClick,
+  icon,
+  text,
+  isSelected,
+  isFrameVisible,
+  isVisible,
+  href,
+  minWidth,
+  maxWidth,
+  testId = 'expanded-frame',
+  inheritDimensions
+}) => {
+  const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
+
+  const handleClick = event => handleClickCommon(event, onClick);
+
+  const renderHeader = () => /*#__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)));
+
+  const renderContent = () => /*#__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());
+  }
+};

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

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useState } from 'react';
+import { getIframeSandboxAttribute } from '../../../utils';
+export const Frame = /*#__PURE__*/React.forwardRef(({
+  url,
+  isTrusted = false,
+  testId
+}, iframeRef) => {
+  const [isIframeLoaded, setIframeLoaded] = useState(false);
+
+  if (!url) {
+    return null;
+  }
+
+  return jsx("iframe", {
+    ref: iframeRef,
+    src: url,
+    "data-testid": `${testId}-frame`,
+    "data-iframe-loaded": isIframeLoaded,
+    css: {
+      border: 0,
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      overflow: 'hidden',
+      borderRadius: '3px'
+    },
+    allowFullScreen: true,
+    scrolling: "yes",
+    allow: "autoplay; encrypted-media; clipboard-write",
+    onLoad: () => setIframeLoaded(true),
+    sandbox: getIframeSandboxAttribute(isTrusted)
+  });
+});

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import ImageLoader from 'react-render-image';
+import { Image } from './styled';
+export const ImageIcon = ({
+  alt = '',
+  src,
+  size = 16,
+  title,
+  default: defaultIcon
+}) => {
+  // TODO: do we need this?
+  if (!src) {
+    return defaultIcon || null;
+  }
+
+  return /*#__PURE__*/React.createElement(ImageLoader, {
+    src: src,
+    loading: defaultIcon,
+    loaded: /*#__PURE__*/React.createElement(Image, {
+      className: "smart-link-icon",
+      src: src,
+      alt: alt,
+      size: size,
+      title: title
+    }),
+    errored: defaultIcon
+  });
+};

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

@@ -0,0 +1,292 @@
+import styled from '@emotion/styled';
+import { size as csssize, borderRadius, size, ellipsis } from '@atlaskit/media-ui';
+import { fontFamily } from '@atlaskit/theme/constants';
+import * as colors from '@atlaskit/theme/colors';
+import { gs as gridSize } from '../../BlockCard/utils';
+export const className = 'media-card-frame';
+export const cardShadow = ``;
+
+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,
+  isFrameVisible
+}) {
+  const visibleFrameStyles = isFrameVisible ? visibleStyles : '';
+  const interactiveFrameStyles = isInteractive ? `
+  &:hover {
+    ${visibleStyles}
+  }
+  &:active {
+    background-color: ${colors.B50};
+  }
+` : '';
+  return `${visibleFrameStyles}${interactiveFrameStyles}`;
+}
+
+function selected({
+  isSelected
+}) {
+  return isSelected ? `
+    ${visibleStyles}
+    &::after {
+      cursor: pointer;
+      box-shadow: 0 0 0 3px ${colors.B100};
+      content: '';
+      outline: none;
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      left: 0;
+      ${borderRadius}
+    }
+    ` : '';
+}
+
+const height = ({
+  inheritDimensions
+}) => inheritDimensions ? 'height: 100%;' : `height: ${gridSize(54)}`;
+
+const wrapperStyles = props => `
+  ${borderRadius}
+  ${minWidth(props)}
+  ${maxWidth(props)}
+  ${getinteractiveStyles(props)}
+  ${visible(props)}
+  display: inline-flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  font-family: ${fontFamily()};
+  width: 100%;
+  user-select: none;
+  line-height: initial;
+  transition: background 0.3s;
+  position: relative;
+  ${height(props)};
+  ${selected(props)}
+
+  &:after {
+    content: '';
+    background: transparent;
+    transition: background 0.3s, box-shadow 0.3s;
+    position: absolute;
+    width: calc(100% + ${gridSize(2)});
+    height: calc(100% + ${gridSize(1)});
+    left: -${gridSize(1)};
+    ${borderRadius}
+  }
+`;
+
+const visibleStyles = `
+  background-color: ${colors.N30};
+
+  &:after {
+    background: ${colors.N30} !important;
+  }
+  .embed-header {
+    opacity: 1;
+  }`;
+
+function visible({
+  isVisible
+}) {
+  return isVisible ? visibleStyles : '';
+}
+
+export const LinkWrapper = styled.div`
+  ${props => wrapperStyles(props)} &:hover {
+    text-decoration: none;
+  }
+`;
+export const Wrapper = styled.div`
+  ${props => wrapperStyles(props)};
+  margin-top: 10px;
+`;
+export const embedHeaderHeight = 32;
+export const Header = styled.div`
+  height: ${embedHeaderHeight}px;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  color: ${colors.N300};
+  opacity: 0;
+  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);
+`;
+export const IconWrapper = styled.div`
+  ${borderRadius}
+  ${size(16)}
+  ${({
+  isPlaceholder
+}) => {
+  if (isPlaceholder) {
+    return `
+      background-color: ${colors.N30};
+    `;
+  } else {
+    return '';
+  }
+}} margin-right: 4px;
+`;
+export const TextWrapper = styled.div`
+  ${({
+  isPlaceholder
+}) => {
+  if (isPlaceholder) {
+    return `
+        ${borderRadius}
+        width: 125px;
+        height: 12px;
+        background-color: ${colors.N30};
+      `;
+  } else {
+    return '';
+  }
+}} color: ${colors.N300};
+  font-size: 12px;
+  line-height: 16px;
+  ${ellipsis('none')};
+`;
+// NB: `overflow` is kept as `hidden` since
+// the internal contents of the `iframe` should
+// manage scrolling behaviour.
+export const Content = styled.div`
+  position: relative;
+
+  ${borderRadius}
+  ${cardShadow}
+  background-color: white;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  top: ${gridSize(4)};
+  overflow: hidden;
+  height: calc(100% - ${gridSize(4)});
+  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;
+  }
+
+  ${({
+  isInteractive
+}) => {
+  if (isInteractive) {
+    return `
+          .${className}:hover & {
+            box-shadow: 0 4px 8px -2px rgba(23, 43, 77, 0.32),
+              0 0 1px rgba(23, 43, 77, 0.25);
+          }
+        `;
+  } else {
+    return '';
+  }
+}};
+`;
+export const Image = styled.img`
+  ${({
+  size
+}) => csssize(size)}
+  ${borderRadius}
+
+  /* hide the alt text when the image cannot be found */
+  overflow: hidden;
+`;
+export const maxAvatarCount = 6;
+export const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  padding: 8px 12px 12px 12px;
+`;
+export const Title = styled.div`
+  color: ${colors.N900};
+  font-size: 16px;
+  font-weight: 500;
+  line-height: ${20 / 16};
+  max-height: ${20 * 4}px;
+  overflow: hidden;
+`;
+export const Byline = styled.div`
+  margin-top: 4px;
+  color: ${colors.N300};
+  font-size: 12px;
+  font-weight: normal;
+  line-height: ${16 / 12};
+  ${ellipsis('100%')};
+`;
+export const Description = styled.div`
+  margin-top: 7px;
+  color: ${colors.N800};
+  font-size: 12px;
+  font-weight: normal;
+  line-height: ${18 / 12};
+  max-height: ${18 * 3}px;
+  overflow: hidden;
+`;
+export const ResolvedViewIconWrapper = styled.div`
+  margin-top: 4px;
+`;
+export const Thumbnail = styled.div`
+  ${borderRadius}
+  ${size(48)}
+  float: right;
+  margin: 4px 0 12px 12px;
+  background-color: ${colors.N30};
+  background-image: url(${({
+  src
+}) => src});
+  background-size: cover;
+`;
+export const UsersWrapper = styled.div`
+  margin-top: 8px;
+`;
+export const ActionsWrapper = styled.div`
+  margin-top: 8px;
+  text-align: right;
+
+  > * {
+    margin-top: 4px;
+  }
+
+  > * + * {
+    margin-left: 4px;
+  }
+`;
+export const AlertWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  pointer-events: none;
+  /* z-index has to be 1 higher than the number of avatars in the avatar stack */
+  z-index: ${maxAvatarCount + 1};
+`;

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

@@ -1,13 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { BlockCardResolvedView, BlockCardResolvingView, InlineCardResolvedView } from '@atlaskit/media-ui';
-import { EmbedCardResolvedView, EmbedCardUnauthorisedView, EmbedCardForbiddenView, EmbedCardNotFoundView, EmbedCardErroredView } from '@atlaskit/media-ui/embeds';
 import { extractEmbedProps } from '../../extractors/embed';
 import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
 import { extractInlineProps } from '../../extractors/inline';
 import { extractBlockProps } from '../../extractors/block';
 import { getExtensionKey } from '../../state/helpers';
 import { extractRequestAccessContext } from '../../extractors/common/context';
+import { BlockCardResolvedView, BlockCardResolvingView } from '../BlockCard';
+import { InlineCardResolvedView } from '../InlineCard/ResolvedView';
+import { EmbedCardForbiddenView } from './views/ForbiddenView';
+import { EmbedCardNotFoundView } from './views/NotFoundView';
+import { EmbedCardResolvedView } from './views/ResolvedView';
+import { EmbedCardUnauthorisedView } from './views/UnauthorisedView';
+import { EmbedCardErroredView } from './views/ErroredView';
 export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   url,
   cardState: {

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

@@ -0,0 +1,43 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import { fontSize } from '@atlaskit/theme/constants';
+import { R300 } from '@atlaskit/theme/colors';
+import { Frame } from '../../BlockCard/components/Frame';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+import { gs } from '../../BlockCard/utils';
+export const EmbedCardErroredView = ({
+  onRetry,
+  isSelected = false,
+  testId = 'embed-card-errored-view',
+  inheritDimensions
+}) => jsx(Frame, {
+  inheritDimensions: inheritDimensions,
+  compact: true,
+  isSelected: isSelected,
+  testId: testId
+}, jsx(ErrorIcon, {
+  size: "small",
+  primaryColor: R300,
+  label: "error-icon"
+}), jsx("span", {
+  css: {
+    fontSize: `${fontSize()}px`,
+    marginLeft: gs(0.5),
+    marginRight: gs(0.5),
+    display: '-webkit-box',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    WebkitLineClamp: 1,
+    WebkitBoxOrient: 'vertical',
+    // Fallback options.
+    maxHeight: gs(3)
+  }
+}, 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/ForbiddenView.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { EmbedCardUnresolvedView } from './UnresolvedView';
+import { LockImage } from '../../BlockCard/utils/constants';
+import { ExpandedFrame } from '../components/ExpandedFrame';
+import { ImageIcon } from '../components/ImageIcon';
+export const EmbedCardForbiddenView = ({
+  link,
+  context,
+  isSelected,
+  testId = 'embed-card-forbidden-view',
+  onAuthorise,
+  inheritDimensions,
+  onClick,
+  requestAccessContext = {}
+}) => {
+  var _action$promise;
+
+  const icon = context && context.icon && /*#__PURE__*/React.createElement(ImageIcon, {
+    src: typeof context.icon === 'string' ? context.icon : undefined
+  });
+  const {
+    descriptiveMessageKey,
+    callToActionMessageKey,
+    action
+  } = requestAccessContext;
+  const onEmbedCardClick = (_action$promise = action === null || action === void 0 ? void 0 : action.promise) !== null && _action$promise !== void 0 ? _action$promise : onAuthorise;
+  let showButton = true;
+  /**
+   * if there is a request access context, but no action to perform, do not show any button.
+   * By default, a "Try another account" button shows, but with request access context, we don't
+   * want to encourage users to try another account, if their request is already pending, etc.
+   */
+
+  if (!callToActionMessageKey && descriptiveMessageKey) {
+    showButton = false;
+  }
+
+  const descriptionKey = descriptiveMessageKey !== null && descriptiveMessageKey !== void 0 ? descriptiveMessageKey : 'invalid_permissions_description';
+  const buttonTextKey = callToActionMessageKey !== null && callToActionMessageKey !== void 0 ? callToActionMessageKey : 'try_another_account';
+  let buttonProps;
+
+  if (showButton) {
+    buttonProps = {
+      appearance: 'default',
+      text: buttonTextKey,
+      testId: (action === null || action === void 0 ? void 0 : action.id) || 'connect-other-account'
+    };
+  }
+
+  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+    href: link,
+    icon: icon,
+    text: context && context.text,
+    isVisible: true,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
+    image: LockImage,
+    title: "invalid_permissions",
+    description: descriptionKey,
+    context: context && context.text,
+    button: buttonProps,
+    onClick: onEmbedCardClick,
+    testId: testId
+  }));
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { EmbedCardUnresolvedView } from './UnresolvedView';
+import { NotFoundImage } from '../../BlockCard/utils/constants';
+import { ExpandedFrame } from '../components/ExpandedFrame';
+import { ImageIcon } from '../components/ImageIcon';
+export const EmbedCardNotFoundView = ({
+  link,
+  context,
+  isSelected,
+  inheritDimensions,
+  testId = 'embed-card-not-found-view',
+  onClick
+}) => {
+  const icon = context && context.icon && /*#__PURE__*/React.createElement(ImageIcon, {
+    src: typeof context.icon === 'string' ? context.icon : undefined
+  });
+  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+    href: link,
+    icon: icon,
+    text: context && context.text,
+    isVisible: true,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
+    image: NotFoundImage,
+    title: "not_found_title",
+    description: "not_found_description",
+    context: context && context.text,
+    testId: testId
+  }));
+};

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

@@ -0,0 +1,53 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import LinkGlyph from '@atlaskit/icon/glyph/link';
+import { ExpandedFrame } from '../components/ExpandedFrame';
+import { ImageIcon } from '../components/ImageIcon';
+import { Frame } from '../components/Frame';
+export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
+  link,
+  context,
+  onClick,
+  isSelected,
+  isFrameVisible,
+  preview,
+  title,
+  isTrusted,
+  testId = 'embed-card-resolved-view',
+  inheritDimensions
+}, 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",
+    size: "small",
+    testId: "embed-card-fallback-icon"
+  }), []);
+  let icon = React.useMemo(() => {
+    if ( /*#__PURE__*/React.isValidElement(iconFromContext)) {
+      return iconFromContext;
+    }
+
+    return jsx(ImageIcon, {
+      src: src,
+      default: linkGlyph
+    });
+  }, [src, linkGlyph, iconFromContext]);
+  return jsx(ExpandedFrame, {
+    isSelected: isSelected,
+    isFrameVisible: isFrameVisible,
+    href: link,
+    testId: testId,
+    icon: icon,
+    text: text,
+    onClick: onClick,
+    inheritDimensions: inheritDimensions
+  }, jsx(Frame, {
+    url: preview === null || preview === void 0 ? void 0 : preview.src,
+    isTrusted: isTrusted,
+    testId: testId,
+    ref: embedIframeRef
+  }));
+});

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { EmbedCardUnresolvedView } from './UnresolvedView';
+import { CelebrationImage } from '../../BlockCard/utils/constants';
+import { ExpandedFrame } from '../components/ExpandedFrame';
+import { ImageIcon } from '../components/ImageIcon';
+export const EmbedCardUnauthorisedView = ({
+  link,
+  context,
+  isSelected,
+  testId = 'embed-card-unauthorized-view',
+  onAuthorise,
+  inheritDimensions,
+  onClick
+}) => {
+  const icon = context && context.icon && /*#__PURE__*/React.createElement(ImageIcon, {
+    src: typeof context.icon === 'string' ? context.icon : undefined
+  });
+  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+    href: link,
+    icon: icon,
+    text: context && context.text,
+    isVisible: true,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
+    image: CelebrationImage,
+    title: "connect_link_account_card_name",
+    description: "connect_link_account_card_description",
+    context: context && context.text,
+    button: {
+      appearance: 'primary',
+      text: 'connect_link_account_card',
+      testId: 'connect-account'
+    },
+    onClick: onAuthorise,
+    testId: testId
+  }));
+};