@atlaskit/media-ui 19.0.0 → 21.0.0

package/dist/es2019/EmbedCard/views/UnresolvedView.js

@@ -1,67 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import Button from '@atlaskit/button/custom-theme-button';
-import { fontSize } from '@atlaskit/theme/constants';
-import { FormattedMessage } from 'react-intl-next';
-import { messages } from '../../messages';
-import { gs as gridSize } from '../../BlockCard/utils';
-export const EmbedCardUnresolvedView = ({
-  image,
-  title,
-  description,
-  button,
-  context,
-  onClick,
-  testId
-}) => {
-  return jsx("div", {
-    css: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingTop: gridSize(4.5),
-      paddingBottom: gridSize(6)
-    },
-    "data-testid": `${testId}-unresolved-container`
-  }, jsx("img", {
-    src: image,
-    css: {
-      height: gridSize(14),
-      marginBottom: gridSize(4)
-    }
-  }), jsx("span", {
-    css: {
-      fontSize: gridSize(2.5),
-      marginBottom: gridSize(1.5),
-      width: gridSize(50),
-      textAlign: 'center'
-    }
-  }, jsx(FormattedMessage, _extends({}, messages[title], {
-    values: {
-      context
-    }
-  }))), jsx("span", {
-    css: {
-      fontSize: fontSize(),
-      marginBottom: gridSize(2.5),
-      textAlign: 'center',
-      width: gridSize(50),
-      lineHeight: gridSize(3)
-    }
-  }, jsx(FormattedMessage, _extends({}, messages[description], {
-    values: {
-      context
-    }
-  }))), button && jsx(Button, {
-    testId: `button-${button.testId || testId}`,
-    appearance: button.appearance,
-    onClick: onClick
-  }, jsx(FormattedMessage, _extends({}, messages[button.text], {
-    values: {
-      context
-    }
-  }))));
-};

package/dist/es2019/InlineCard/ErroredView/index.js

@@ -1,70 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { R300 } from '@atlaskit/theme/colors';
-import ErrorIcon from '@atlaskit/icon/glyph/error';
-import Button from '@atlaskit/button/custom-theme-button';
-import { Frame } from '../Frame';
-import { IconAndTitleLayout } from '../IconAndTitleLayout';
-import { AKIconWrapper } from '../Icon';
-import { messages } from '../../messages';
-import { FormattedMessage } from 'react-intl-next';
-import { LinkAppearance, IconStyledButton, LowercaseAppearance, NoLinkAppearance } from '../styled';
-export class InlineCardErroredView extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "handleRetry", event => {
-      const {
-        onRetry
-      } = this.props;
-
-      if (onRetry) {
-        event.preventDefault();
-        event.stopPropagation();
-        onRetry();
-      }
-    });
-
-    _defineProperty(this, "renderMessage", () => {
-      const {
-        onRetry,
-        url,
-        message
-      } = this.props;
-      const link = /*#__PURE__*/React.createElement(LinkAppearance, null, url);
-      const errorMessage = /*#__PURE__*/React.createElement(NoLinkAppearance, null, message);
-      return !onRetry ? /*#__PURE__*/React.createElement(React.Fragment, null, link, " - ", errorMessage) : /*#__PURE__*/React.createElement(React.Fragment, null, link, " - ", errorMessage, ",\xA0", /*#__PURE__*/React.createElement(Button, {
-        spacing: "none",
-        appearance: "subtle-link",
-        component: IconStyledButton,
-        onClick: this.handleRetry
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again, formattedMessage => {
-        return /*#__PURE__*/React.createElement(LowercaseAppearance, null, formattedMessage);
-      })));
-    });
-  }
-
-  render() {
-    const {
-      url,
-      onClick,
-      isSelected,
-      testId = 'inline-card-errored-view',
-      icon
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Frame, {
-      testId: testId,
-      link: url,
-      onClick: onClick,
-      isSelected: isSelected
-    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-      icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
-        label: "error",
-        size: "small",
-        primaryColor: R300
-      })),
-      title: this.renderMessage()
-    }));
-  }
-
-}

package/dist/es2019/InlineCard/ForbiddenView/index.js

@@ -1,98 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { R400, N500 } from '@atlaskit/theme/colors';
-import LockIcon from '@atlaskit/icon/glyph/lock-filled';
-import Button from '@atlaskit/button/custom-theme-button';
-import { Frame } from '../Frame';
-import { IconAndTitleLayout } from '../IconAndTitleLayout';
-import { AKIconWrapper } from '../Icon';
-import { messages } from '../../messages';
-import { FormattedMessage } from 'react-intl-next';
-import { IconStyledButton, LowercaseAppearance, LinkAppearance } from '../styled';
-const FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
-  label: "error",
-  size: "small",
-  primaryColor: R400
-}));
-export class InlineCardForbiddenView extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "handleRetry", event => {
-      const {
-        onAuthorise
-      } = this.props;
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (onAuthorise) {
-        onAuthorise();
-      } else {
-        var _this$props, _this$props$requestAc, _this$props$requestAc2;
-
-        (_this$props = this.props) === null || _this$props === void 0 ? void 0 : (_this$props$requestAc = _this$props.requestAccessContext) === null || _this$props$requestAc === void 0 ? void 0 : (_this$props$requestAc2 = _this$props$requestAc.action) === null || _this$props$requestAc2 === void 0 ? void 0 : _this$props$requestAc2.promise();
-      }
-    });
-
-    _defineProperty(this, "renderForbiddenAccessMessage", () => {
-      var _this$props2, _this$props2$requestA;
-
-      if ((_this$props2 = this.props) !== null && _this$props2 !== void 0 && (_this$props2$requestA = _this$props2.requestAccessContext) !== null && _this$props2$requestA !== void 0 && _this$props2$requestA.callToActionMessageKey) {
-        const {
-          callToActionMessageKey
-        } = this.props.requestAccessContext;
-        return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[callToActionMessageKey], {
-          values: {
-            context: this.props.context
-          }
-        }));
-      }
-
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.invalid_permissions, formattedMessage => {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage, ", ");
-      }), /*#__PURE__*/React.createElement(FormattedMessage, messages.try_another_account, formattedMessage => {
-        return /*#__PURE__*/React.createElement(LowercaseAppearance, null, formattedMessage);
-      }));
-    });
-
-    _defineProperty(this, "renderMessage", () => {
-      var _this$props3, _this$props3$requestA;
-
-      const {
-        url,
-        onAuthorise
-      } = this.props;
-      const link = /*#__PURE__*/React.createElement(LinkAppearance, null, url);
-      const hasRequestAccessContextMessage = (_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$requestA = _this$props3.requestAccessContext) === null || _this$props3$requestA === void 0 ? void 0 : _this$props3$requestA.callToActionMessageKey;
-      return !onAuthorise && !hasRequestAccessContextMessage ? link : /*#__PURE__*/React.createElement(React.Fragment, null, link, ' - ', /*#__PURE__*/React.createElement(Button, {
-        spacing: "none",
-        appearance: "subtle-link",
-        onClick: this.handleRetry,
-        component: IconStyledButton,
-        testId: "button-connect-other-account"
-      }, this.renderForbiddenAccessMessage()));
-    });
-  }
-
-  render() {
-    const {
-      url,
-      icon,
-      onClick,
-      isSelected,
-      testId = 'inline-card-forbidden-view'
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Frame, {
-      testId: testId,
-      link: url,
-      onClick: onClick,
-      isSelected: isSelected
-    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-      icon: icon ? icon : FallbackForbiddenIcon,
-      title: this.renderMessage(),
-      titleColor: N500
-    }));
-  }
-
-}

package/dist/es2019/InlineCard/Frame/index.js

@@ -1,55 +0,0 @@
-import React, { useCallback } from 'react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
-import { Wrapper } from './styled';
-export const Frame = props => {
-  const {
-    isSelected,
-    children,
-    onClick,
-    link,
-    withoutBackground,
-    withoutHover,
-    testId,
-    className
-  } = props;
-  const handleClick = useCallback(event => {
-    if (onClick) {
-      event.preventDefault();
-      event.stopPropagation();
-      onClick(event);
-    }
-  }, [onClick]);
-  const handleKeyPress = useCallback(event => {
-    if (event.key !== ' ' && event.key !== 'Enter') {
-      return;
-    }
-
-    if (onClick) {
-      event.preventDefault();
-      event.stopPropagation();
-      onClick(event);
-    }
-  }, [onClick]); // prevent default on mousedown to avoid inline card losing focus
-
-  const handleMouseDown = useCallback(e => {
-    e.preventDefault();
-  }, []);
-  const isInteractive = Boolean(onClick); // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
-  //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
-
-  return /*#__PURE__*/React.createElement(Wrapper, {
-    theme: useGlobalTheme(),
-    href: link,
-    withoutBackground: withoutBackground,
-    withoutHover: withoutHover,
-    isSelected: isSelected,
-    isInteractive: isInteractive,
-    tabIndex: isInteractive ? 0 : undefined,
-    role: isInteractive ? 'button' : undefined,
-    onClick: handleClick,
-    onMouseDown: handleMouseDown,
-    onKeyPress: handleKeyPress,
-    "data-testid": testId,
-    className: className
-  }, children);
-};

package/dist/es2019/InlineCard/Frame/styled.js

@@ -1,108 +0,0 @@
-import styled from '@emotion/styled';
-import { B100, B400, B50, N20 } from '@atlaskit/theme/colors';
-import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
-import { e100 } from '@atlaskit/theme/elevation';
-import { themed } from '@atlaskit/theme/components';
-import { TitleWrapperClassName } from '../IconAndTitleLayout/styled';
-const BACKGROUND_COLOR_DARK = '#262B31';
-const selected = `
-  cursor: pointer;
-  box-shadow: 0 0 0 2px ${B100};
-  outline: none;
-  user-select: none;
-  &, :hover, :focus, :active {
-    text-decoration: none;
-  }
-`;
-
-const isInteractive = ({
-  isInteractive
-}) => {
-  if (isInteractive) {
-    return `
-      cursor: pointer;
-      :hover {
-        background-color: ${themed({
-      light: N20,
-      dark: BACKGROUND_COLOR_DARK
-    })};
-        text-decoration: none;
-      }
-      :active {
-        background-color: ${themed({
-      light: B50,
-      dark: BACKGROUND_COLOR_DARK
-    })};
-        text-decoration: none;
-      }
-      :focus {
-        ${selected}
-        text-decoration: none;
-      }
-    `;
-  } else {
-    return '';
-  }
-};
-
-const isSelected = ({
-  isSelected
-}) => {
-  if (isSelected) {
-    return selected;
-  } else {
-    return 'user-select: text';
-  }
-};
-
-const withoutHover = ({
-  withoutHover
-}) => {
-  return withoutHover ? `
-    &:hover {
-      text-decoration: none;
-    }
-  ` : '';
-};
-/*
-  Inline smart cards should have the following layout:
-  ------------------------------------
-  | icon | title | action OR lozenge |
-  ------------------------------------
-  The aim is to ensure (1) all children are
-  in line with each other, (2) are vertically
-  centered.
-*/
-// NB: `padding` consistent with @mentions.
-// NB: `display: inline` required for `box-decoration-break` to work.
-// NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
-
-
-export const Wrapper = styled.a`
-  line-height: 16px;
-  padding: 1px 0.24em 2px 0.24em;
-  ${props => props.withoutBackground ? `padding-left: 0; margin-left:-2px;` : ''}
-  display: inline;
-  box-decoration-break: clone;
-  border-radius: ${akBorderRadius()}px;
-  color: ${themed({
-  light: B400,
-  dark: '#4794FF'
-})};
-  background-color: ${props => props.withoutBackground ? '' : themed({
-  light: 'white',
-  dark: BACKGROUND_COLOR_DARK
-})};
-  ${props => props.withoutBackground ? '' : e100()};
-  ${props => isInteractive(props)}
-  ${props => isSelected(props)};
-  ${props => withoutHover(props)}
-  transition: 0.1s all ease-in-out;
-  -moz-user-select: none;
-
-  &:hover span.${TitleWrapperClassName} {
-    text-decoration: ${({
-  withoutHover
-}) => withoutHover ? 'none' : 'underline'};
-  }
-`;

package/dist/es2019/InlineCard/Icon.js

@@ -1,62 +0,0 @@
-import styled from '@emotion/styled';
-import { keyframes } from '@emotion/core';
-const placeholderShimmer = keyframes`
-  0% {
-    background-position: -20px 0;
-  }
-
-  100% {
-    background-position: 20px 0;
-  }
-`; // TODO: Figure out a more scalable/responsive solution
-// for vertical alignment.
-// Current rationale: vertically positioned at the top of
-// the smart card container (when set to 0). Offset this
-// to position it with appropriate whitespace from the top.
-
-export const Icon = styled.img`
-  height: 14px;
-  width: 14px;
-  margin-right: 4px;
-  border-radius: 2px;
-  user-select: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`; // Used for 'untrue' icons which claim to be 16x16 but
-// are less than that in height/width.
-// TODO: Replace this override with proper AtlasKit solution.
-
-export const AKIconWrapper = styled.span`
-  margin-right: -2px;
-`;
-export const Shimmer = styled.span`
-  height: 14px;
-  width: 14px;
-  margin-right: 4px;
-  border-radius: 2px;
-  user-select: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  background: #f6f7f8;
-  background-image: linear-gradient(
-    to right,
-    #f6f7f8 0%,
-    #edeef1 20%,
-    #f6f7f8 40%,
-    #f6f7f8 100%
-  );
-  background-repeat: no-repeat;
-  background-size: 40px 14px;
-  display: inline-block;
-
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: ${placeholderShimmer};
-  animation-timing-function: linear;
-`;

package/dist/es2019/InlineCard/IconAndTitleLayout/index.js

@@ -1,99 +0,0 @@
-import React from 'react';
-import ImageLoader from 'react-render-image';
-import { Icon, Shimmer } from '../Icon';
-import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper, TitleWrapperClassName } from './styled';
-import LinkIcon from '@atlaskit/icon/glyph/link';
-export class IconAndTitleLayout extends React.Component {
-  renderAtlaskitIcon() {
-    const {
-      icon,
-      emoji
-    } = this.props;
-
-    if (emoji) {
-      return /*#__PURE__*/React.createElement(EmojiWrapper, null, emoji);
-    }
-
-    if (!icon || typeof icon === 'string') {
-      return null;
-    }
-
-    return /*#__PURE__*/React.createElement(IconWrapper, null, icon);
-  }
-
-  renderImageIcon(errored, testId) {
-    const {
-      icon: url
-    } = this.props;
-
-    if (!url || typeof url !== 'string') {
-      return null;
-    }
-
-    return /*#__PURE__*/React.createElement(ImageLoader, {
-      src: url,
-      loaded: /*#__PURE__*/React.createElement(Icon, {
-        className: "smart-link-icon",
-        src: url,
-        "data-testid": `${testId}-image`
-      }),
-      errored: errored,
-      loading: /*#__PURE__*/React.createElement(Shimmer, {
-        "data-testid": `${testId}-loading`
-      })
-    });
-  }
-
-  renderIconPlaceholder(testId) {
-    const {
-      defaultIcon
-    } = this.props;
-
-    if (defaultIcon) {
-      return /*#__PURE__*/React.createElement(IconWrapper, null, defaultIcon);
-    }
-
-    return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(LinkIcon, {
-      label: "link",
-      size: "small",
-      testId: `${testId}-default`
-    }));
-  }
-
-  renderIcon(testId) {
-    // We render two kinds of icons here:
-    // - Image: acquired from either DAC or Teamwork Platform Apps;
-    // - Atlaskit Icon: an Atlaskit SVG;
-    // Each of these are scaled down to 12x12.
-    const icon = this.renderAtlaskitIcon();
-
-    if (icon) {
-      return icon;
-    }
-
-    const placeholder = this.renderIconPlaceholder(testId);
-    const image = this.renderImageIcon(placeholder, testId);
-    return image || placeholder;
-  }
-
-  render() {
-    const {
-      children,
-      title,
-      titleColor,
-      titleTextColor,
-      testId = 'inline-card-icon-and-title'
-    } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconTitleWrapper, {
-      style: {
-        color: titleColor
-      }
-    }, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, {
-      style: {
-        color: titleTextColor
-      },
-      className: TitleWrapperClassName
-    }, title)));
-  }
-
-}

package/dist/es2019/InlineCard/IconAndTitleLayout/styled.js

@@ -1,102 +0,0 @@
-import styled from '@emotion/styled'; // TODO: remove this override behaviour for @atlaskit/icon-object
-
-export const IconObjectOverrides = `
-  & > span {
-    height: 16px;
-    width: 14px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    line-height: 14px;
-    & > svg {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-`; // TODO: remove this override behaviour for @atlaskit/icon
-
-export const IconOverrides = `
-  & > * > span {
-    height: 16px;
-    width: 14px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    & > svg {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-`; // Wraps all icons represented in Inline Links. Icons have three sources/types:
-// - JSON-LD: from the generator.icon property coming back from ORS.
-// - @atlaskit/icon: for lock icons, unauthorized, etc.
-// - @atlaskit/icon-object: for object icons, e.g. repository, branch, etc.
-// NB: the first set of overrides style icons imported from @atlaskit/icon-object correctly.
-// NB: the second set of overrides style icons imported from @atlaskit/icon correctly.
-
-export const IconWrapper = styled.span`
-  user-select: none;
-  ${IconOverrides}
-  ${IconObjectOverrides}
-`; // Wraps all emoji in Inline Links similar to icon
-
-export const EmojiWrapper = styled.span`
-  display: inline-block;
-  margin-right: 2px;
-  user-select: none;
-  ${IconOverrides}
-  ${IconObjectOverrides}
-`; // The main 'wrapping' element, title of the content.
-// NB: `white-space` adds little whitespace before wrapping.
-// NB: `hyphens` enables hyphenation on word break.
-
-export const IconTitleWrapper = styled.span`
-  hyphens: auto;
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-  word-break: break-word;
-`; // TODO: Replace overrides with proper AtlasKit solution.
-
-export const LozengeWrapper = styled.span`
-  display: inline-block;
-  vertical-align: 1px;
-  & > span {
-    margin-left: 4px;
-    padding: 2px 0 2px 0;
-  }
-`; // TODO: Replace overrides with proper AtlasKit solution.
-
-export const LozengeBlockWrapper = styled.span`
-  & > span {
-    margin-left: 4px;
-    padding: 2px 0 2px 0;
-  }
-`;
-export const RightIconPositionWrapper = styled.span`
-  margin-left: 2px;
-  margin-right: 4px;
-  position: relative;
-  display: inline-block;
-`; // The following components are used to absolutely position icons in the vertical center.
-// - IconPositionWrapper: the `relative` parent which has no height in itself.
-// - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
-
-export const IconPositionWrapper = styled.span`
-  margin-right: 4px;
-  position: relative;
-  display: inline-block;
-`;
-export const IconEmptyWrapper = styled.span`
-  width: 14px;
-  height: 100%;
-  display: inline-block;
-  opacity: 0;
-`; // With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
-// To achieve same result we use classname instead.
-
-export const TitleWrapperClassName = 'smart-link-title-wrapper';
-export const TitleWrapper = styled.span``;