@atlaskit/smart-card 16.3.0 → 17.2.0

package/dist/es2019/view/BlockCard/actions/ViewAction.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export async function viewFunction({
+  url
+}) {
+  if (!url) {
+    return;
+  }
+
+  window.open(url, '_blank', 'noopener=yes');
+}
+export const ViewAction = ({
+  url
+}) => ({
+  id: 'view-content',
+  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.view),
+  promise: () => viewFunction({
+    url
+  })
+});

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

@@ -0,0 +1,42 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useState } from 'react';
+import Button from '@atlaskit/button/custom-theme-button';
+import { ActionIcon } from './ActionIcon';
+export const spinnerDelay = 1000;
+export const Action = ({
+  promise,
+  text,
+  buttonAppearance = 'default',
+  id
+}) => {
+  const [state, setState] = useState('init');
+  return jsx(Button, {
+    spacing: "compact",
+    appearance: buttonAppearance,
+    isLoading: state === 'loading',
+    testId: `button-${id}`,
+    onClick: event => {
+      event.stopPropagation();
+      event.preventDefault();
+
+      if (state !== 'loading') {
+        setState('loading');
+        promise().then(() => {
+          setState('success');
+          setTimeout(() => setState('init'), spinnerDelay);
+        }).catch(() => {
+          setState('failure');
+          setTimeout(() => setState('init'), spinnerDelay);
+        });
+      }
+    }
+  }, jsx("div", {
+    css: {
+      transition: 'opacity 0.3s',
+      opacity: state !== 'init' ? 0 : 1
+    }
+  }, text), jsx(ActionIcon, {
+    state: state
+  }));
+};

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import CheckIcon from '@atlaskit/icon/glyph/check';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+
+/*
+  These styles are taken fro the spinner style for button. There was not an
+  easy way to share tehm between the two components.
+*/
+export const spinnerStyles = {
+  display: 'flex',
+  position: 'absolute',
+  left: '50%',
+  top: '50%',
+  transform: 'translate(-50%, -50%)'
+};
+export const ActionIcon = ({
+  state
+}) => {
+  switch (state) {
+    case 'init':
+    case 'loading':
+      return null;
+
+    case 'success':
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "check-icon",
+        style: spinnerStyles
+      }, /*#__PURE__*/React.createElement(CheckIcon, {
+        size: "small",
+        label: "check"
+      }));
+
+    case 'failure':
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "cross-icon",
+        style: spinnerStyles
+      }, /*#__PURE__*/React.createElement(CrossIcon, {
+        size: "small",
+        label: "check"
+      }));
+  }
+};

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

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useState } from 'react';
+import Item from '@atlaskit/item';
+import DropList from '@atlaskit/droplist';
+import ButtonGroup from '@atlaskit/button/button-group';
+import Button from '@atlaskit/button/custom-theme-button';
+import { Action } from './Action';
+import { gs, mq } from '../utils';
+export const ActionList = ({
+  items
+}) => {
+  const [isOpen, setOpen] = useState(false);
+  const actionsToShow = items.slice(0, 2);
+  const actionsToList = items.slice(2, items.length);
+  return jsx("div", {
+    css: mq({
+      display: 'flex',
+      marginTop: [gs(2), 0]
+    })
+  }, jsx(ButtonGroup, null, actionsToShow.map(action => jsx(Action, _extends({
+    key: action.id
+  }, action)))), actionsToList.length ? jsx("div", {
+    css: {
+      marginLeft: gs(0.5)
+    }
+  }, jsx(DropList, {
+    appearance: "default",
+    position: "right top",
+    isTriggerNotTabbable: true,
+    onOpenChange: () => setOpen(true),
+    onClick: () => setOpen(!isOpen),
+    isOpen: isOpen,
+    trigger: jsx(Button, {
+      spacing: "compact"
+    }, "...")
+  }, actionsToList.map(actionToList => jsx(Item, {
+    key: actionToList.id
+  }, actionToList.text)))) : null);
+};

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

@@ -0,0 +1,33 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { N300 } from '@atlaskit/theme/colors';
+import { gs, mq } from '../utils';
+export const Byline = ({
+  text,
+  children,
+  testId,
+  className
+}) => jsx("span", {
+  css: mq({
+    fontSize: gs(1.5),
+    lineHeight: gs(2.5),
+    color: `${N300}`,
+    fontWeight: 'normal',
+    marginTop: gs(0.5),
+    // Spec: only allow two lines MAX to be shown.
+    display: '-webkit-box',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    wordBreak: 'break-word',
+    // Fallback options.
+    maxHeight: gs(5),
+    whiteSpace: 'pre-line',
+    // EDM-713: fixes copy-paste from renderer to editor for Firefox
+    // due to HTML its unwrapping behaviour on paste.
+    MozUserSelect: 'none'
+  }),
+  "data-testid": testId,
+  className: className
+}, text || children);

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

@@ -0,0 +1,36 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import AvatarGroup from '@atlaskit/avatar-group';
+import { mq } from '../utils';
+export const CollaboratorList = ({
+  items,
+  handleAvatarClick = () => {},
+  handleMoreAvatarsClick = () => {},
+  testId = 'collaborator-list'
+}) => {
+  if (items.length === 0) {
+    return null;
+  }
+
+  return jsx("span", {
+    css: mq({
+      display: ['none', 'inherit']
+    })
+  }, jsx(AvatarGroup, {
+    maxCount: 4,
+    appearance: "stack",
+    size: "small",
+    data: items,
+    onAvatarClick: event => {
+      event.stopPropagation();
+      event.preventDefault();
+      handleAvatarClick(event);
+    },
+    onMoreClick: event => {
+      event.stopPropagation();
+      event.preventDefault();
+      handleMoreAvatarsClick(event);
+    },
+    testId: testId
+  }));
+};

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

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { gs, mq } from '../utils';
+export const blockCardContentClassName = 'block-card-content';
+export const Content = ({
+  children,
+  isCompact = false
+}) => jsx("div", {
+  css: mq({
+    padding: isCompact ? gs(1) : gs(2),
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: isCompact ? 'unset' : ['unset', 'space-between'],
+    flexGrow: 1
+  }),
+  "data-trello-do-not-use-override": "block-card-content",
+  className: blockCardContentClassName
+}, children);

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

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { gs, mq } from '../utils';
+export const contentFooterClassName = 'smart-link-content-footer';
+export const ContentFooter = ({
+  children,
+  hasSpaceBetween = false
+}) => jsx("div", {
+  css: mq({
+    display: 'flex',
+    flexDirection: ['column', 'row'],
+    flexGrow: [1, 'unset'],
+    justifyContent: [hasSpaceBetween ? 'space-between' : 'flex-end', 'space-between'],
+    alignItems: ['unset', 'center'],
+    marginTop: [gs(1), gs(1.5)]
+  }),
+  className: contentFooterClassName
+}, children);

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

@@ -0,0 +1,21 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+export const blockCardContentHeaderClassName = 'block-card-content-header';
+export const ContentHeader = ({
+  onClick,
+  link,
+  children
+}) => jsx("a", {
+  onClick: onClick,
+  href: link,
+  target: "_blank",
+  css: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    // EDM-713: fixes copy-paste from renderer to editor for Firefox
+    // due to HTML its unwrapping behaviour on paste.
+    MozUserSelect: 'none'
+  },
+  "data-trello-do-not-use-override": "block-card-content-header",
+  className: blockCardContentHeaderClassName
+}, children);

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

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import { gs } from '../utils';
+export const Emoji = ({
+  emoji
+}) => {
+  return jsx("span", {
+    css: {
+      height: gs(2.5),
+      width: gs(2),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: '-2px'
+    }
+  }, emoji);
+};

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

@@ -0,0 +1,68 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import { N20A, N30A, B200, N40A, N50A } from '@atlaskit/theme/colors';
+import { gs, br, mq } from '../utils';
+export const Frame = (props = {
+  isSelected: false,
+  isHoverable: false,
+  isFluidHeight: false
+}) => props.compact ? jsx(CompactFrame, props) : jsx(ExpandedFrame, props);
+const sharedFrameStyles = {
+  maxWidth: gs(95),
+  width: '100%',
+  display: 'flex',
+  backgroundColor: 'white'
+};
+export const ExpandedFrame = ({
+  children,
+  isSelected,
+  isHoverable,
+  testId,
+  className,
+  isFluidHeight
+}) => {
+  return jsx("div", {
+    css: mq({ ...sharedFrameStyles,
+      '&:hover': isHoverable ? {
+        backgroundColor: N20A,
+        cursor: 'pointer'
+      } : undefined,
+      minHeight: isFluidHeight ? 0 : [gs(21), gs(15)],
+      borderRadius: isSelected ? br() : br(0.5),
+      border: `2px solid ${isSelected ? B200 : 'transparent'}`,
+      justifyContent: 'space-between',
+      overflow: 'hidden',
+      boxShadow: `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A};`
+    }),
+    "data-testid": testId,
+    className: className,
+    "data-trello-do-not-use-override": testId
+  }, children);
+};
+export const CompactFrame = ({
+  children,
+  isHoverable,
+  isSelected,
+  testId,
+  className,
+  inheritDimensions
+}) => {
+  return jsx("div", {
+    css: mq({ ...sharedFrameStyles,
+      '&:hover': isHoverable ? {
+        backgroundColor: N30A
+      } : undefined,
+      borderRadius: isSelected ? br() : br(0.5),
+      border: isSelected ? `2px solid ${B200}` : '',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: inheritDimensions ? '100%' : gs(5),
+      backgroundColor: N20A,
+      width: ['calc(100% - 16px)', '100%'],
+      padding: [`0px ${gs(1)}`, '0']
+    }),
+    "data-testid": testId,
+    className: className
+  }, children);
+};

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

@@ -0,0 +1,42 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import ImageLoader from 'react-render-image';
+import LinkIcon from '@atlaskit/icon/glyph/link';
+import { gs } from '../utils';
+export const blockCardIconImageClassName = 'block-card-icon-image';
+export const Icon = ({
+  url,
+  icon,
+  defaultIcon,
+  testId = 'block-card-icon'
+}) => {
+  const placeholder = defaultIcon || jsx(LinkIcon, {
+    label: "link",
+    size: "small",
+    testId: `${testId}-default`
+  });
+  const image = url && jsx(ImageLoader, {
+    src: url,
+    loaded: jsx("img", {
+      css: {
+        height: gs(2),
+        width: gs(2)
+      },
+      src: url,
+      "data-testid": `${testId}-image`
+    }),
+    errored: placeholder
+  });
+  return jsx("span", {
+    css: {
+      height: gs(2.5),
+      width: gs(2),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    "data-testid": testId,
+    className: blockCardIconImageClassName
+  }, icon || image || placeholder);
+};

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

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { B400 } from '@atlaskit/theme/colors';
+export const Link = ({
+  url,
+  testId = 'block-card',
+  className
+}) => {
+  return jsx("span", {
+    "data-testid": `${testId}-link`,
+    className: className,
+    css: {
+      color: B400,
+      wordBreak: 'break-all'
+    }
+  }, url);
+};

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

@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import Tooltip from '@atlaskit/tooltip';
+import { gs } from '../utils';
+import { N300 } from '@atlaskit/theme/colors';
+export const Metadata = ({
+  text,
+  icon,
+  iconUrl,
+  tooltip
+}) => {
+  let metadataIcon = icon || null;
+
+  if (!metadataIcon && iconUrl) {
+    metadataIcon = jsx("img", {
+      src: iconUrl,
+      css: {
+        width: gs(1),
+        height: gs(1)
+      }
+    });
+  }
+
+  const metadata = jsx("div", {
+    css: {
+      display: 'flex',
+      alignItems: 'center',
+      marginRight: gs(0.5)
+    }
+  }, metadataIcon, jsx("span", {
+    css: {
+      fontSize: gs(1.5),
+      color: `${N300}`,
+      marginRight: gs(0.5),
+      marginLeft: '2px'
+    }
+  }, text));
+
+  if (tooltip) {
+    return jsx(Tooltip, {
+      content: tooltip
+    }, metadata);
+  }
+
+  return metadata;
+};

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

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Metadata } from './Metadata';
+import { gs } from '../utils';
+export const metadataListClassName = 'smart-link-metadata-list';
+export const MetadataList = ({
+  items,
+  testId
+}) => {
+  return jsx("div", {
+    css: {
+      display: 'flex',
+      marginTop: gs(0.5),
+      alignItems: 'center',
+      '&:last-child': {
+        marginRight: '0px'
+      }
+    },
+    "data-testid": testId,
+    className: metadataListClassName
+  }, items.map(item => jsx(Metadata, _extends({
+    key: item.text
+  }, item))));
+};

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

@@ -0,0 +1,94 @@
+/* TODO: (from codemod)
+We have converted this file as best we could but you might still need
+to manually complete migrating this usage of ModalDialog.
+
+This file uses one or more of the following ModalDialog props: 'components', 'header',
+'footer', 'body'. These props have been removed as part of moving to
+a compositional API.
+
+The render props that used to be exposed by the custom component APIs are
+now accessible using the 'useModal' hook instead: 'testId', 'titleId', and 'onClose'.
+
+We are also no longer exposing 'appearance' as render prop, so this needs to be
+manually passed to your custom components.
+
+For a complete guide on customization using the new compositional API, refer to the docs at
+https://atlassian.design/components/modal-dialog/examples#customizing-modal-dialog. */
+import React, { useState } from 'react';
+import ModalDialog, { ModalTransition, ModalBody } from '@atlaskit/modal-dialog';
+import { Header } from './ModalHeader';
+import { getIframeSandboxAttribute } from '../../../utils';
+const iframeStyles = {
+  width: `100%`,
+  height: 'calc(100vh - 248px)'
+};
+
+class ModalWithErrorBoundary extends React.Component {
+  componentDidCatch(error, errorInfo) {
+    if (this.props.onOpenFailed) {
+      this.props.onOpenFailed(error, errorInfo);
+    }
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Modal, this.props);
+  }
+
+}
+
+const Modal = ({
+  onClose,
+  onOpen,
+  src,
+  testId,
+  showModal,
+  providerName,
+  metadata,
+  icon,
+  closeLabel,
+  iframeName,
+  title,
+  url,
+  download,
+  byline,
+  isTrusted = false,
+  onViewActionClick,
+  onDownloadActionClick
+}) => {
+  let [isOpen, setIsOpen] = useState(showModal);
+  const sandbox = getIframeSandboxAttribute(isTrusted);
+  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
+    height: "100%",
+    width: "large",
+    testId: testId,
+    onOpenComplete: onOpen,
+    onClose: () => {
+      setIsOpen(false);
+    },
+    onCloseComplete: onClose
+  }, /*#__PURE__*/React.createElement(Header, {
+    providerName: providerName,
+    icon: icon,
+    metadata: metadata,
+    url: url,
+    title: title,
+    label: closeLabel,
+    download: download,
+    byline: byline,
+    onViewActionClick: onViewActionClick,
+    onDownloadActionClick: onDownloadActionClick
+  }), /*#__PURE__*/React.createElement(ModalBody, null, src ? /*#__PURE__*/React.createElement("iframe", {
+    style: iframeStyles,
+    name: iframeName,
+    frameBorder: 0,
+    src: src,
+    sandbox: sandbox
+  }) : /*#__PURE__*/React.createElement("iframe", {
+    style: iframeStyles,
+    name: iframeName,
+    frameBorder: 0,
+    sandbox: sandbox
+  }))));
+};
+
+export default ModalWithErrorBoundary;

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

@@ -0,0 +1,86 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Fragment as F } from 'react';
+import { useModal } from '@atlaskit/modal-dialog';
+import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import Button from '@atlaskit/button/custom-theme-button';
+import { N100, N30A } from '@atlaskit/theme/colors';
+import { FormattedMessage } from 'react-intl-next';
+import { gs } from '../utils';
+import { Icon } from './Icon';
+import { MetadataList } from './MetadataList';
+import { Byline } from './Byline';
+import { messages } from '@atlaskit/media-ui/messages';
+export const Header = ({
+  title,
+  label,
+  metadata = {
+    items: []
+  },
+  icon,
+  providerName,
+  url,
+  download,
+  byline,
+  onViewActionClick,
+  onDownloadActionClick
+}) => {
+  const {
+    onClose
+  } = useModal();
+  return jsx("div", {
+    style: {
+      paddingLeft: gs(3),
+      paddingRight: gs(3),
+      paddingBottom: gs(2),
+      paddingTop: gs(2)
+    }
+  }, jsx("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'baseline',
+      borderBottom: `1px solid ${N30A}`
+    }
+  }, jsx("div", {
+    css: {
+      flex: 1
+    }
+  }, jsx("div", {
+    css: {
+      display: 'flex'
+    }
+  }, icon && jsx(Icon, icon), jsx("div", {
+    css: {
+      paddingLeft: gs(2),
+      paddingBottom: gs(2)
+    }
+  }, jsx("h3", null, title), jsx("div", {
+    css: {
+      color: N100
+    }
+  }, metadata.items.length && jsx(MetadataList, {
+    items: metadata.items
+  }) || jsx(Byline, null, byline))))), jsx("div", null, download && jsx(Button, {
+    appearance: "primary",
+    href: download,
+    onClick: onDownloadActionClick
+  }, jsx(FormattedMessage, messages.download)), url && jsx(Button, {
+    href: url,
+    target: "_blank",
+    appearance: "link",
+    testId: "preview-view-action",
+    iconAfter: jsx(ShortcutIcon, {
+      size: "small",
+      label: "go to source"
+    }),
+    onClick: onViewActionClick
+  }, providerName ? jsx(F, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal)), jsx(Button, {
+    appearance: "subtle",
+    iconBefore: jsx(EditorCloseIcon, {
+      label: label
+    }),
+    onClick: onClose
+  }))));
+};