@atlaskit/smart-card 16.3.0 → 17.2.0

package/dist/es2019/view/FlexibleCard/utils.js

@@ -0,0 +1,99 @@
+import { SmartLinkStatus } from '../../constants';
+import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
+import { extractProvider, extractRequestAccessContext } from '../../extractors/common/context';
+import { messages } from '../../messages';
+import extractFlexibleLinkContext from '../../extractors/flexible';
+import { extractErrorIcon } from '../../extractors/flexible/icon';
+import { handleOnClick } from '../../utils';
+export const getContextByStatus = (url, status, details, renderers) => {
+  switch (status) {
+    case SmartLinkStatus.Pending:
+    case SmartLinkStatus.Resolving:
+      return {
+        title: url,
+        url
+      };
+
+    case SmartLinkStatus.Resolved:
+      return extractFlexibleLinkContext(details, renderers);
+
+    case SmartLinkStatus.Unauthorized:
+    case SmartLinkStatus.Forbidden:
+    case SmartLinkStatus.NotFound:
+    case SmartLinkStatus.Errored:
+    case SmartLinkStatus.Fallback:
+    default:
+      const linkIcon = extractErrorIcon(details, status);
+      return {
+        linkIcon,
+        title: url,
+        url
+      };
+  }
+};
+
+const getForbiddenMessageKey = meta => {
+  var _meta$requestAccess;
+
+  const accessType = meta === null || meta === void 0 ? void 0 : (_meta$requestAccess = meta.requestAccess) === null || _meta$requestAccess === void 0 ? void 0 : _meta$requestAccess.accessType;
+
+  switch (accessType) {
+    case 'DIRECT_ACCESS':
+      return 'click_to_join';
+
+    case 'REQUEST_ACCESS':
+      return 'request_access';
+
+    case 'PENDING_REQUEST_EXISTS':
+      return 'pending_request';
+
+    case 'FORBIDDEN':
+      return 'forbidden_access';
+
+    case 'DENIED_REQUEST_EXISTS':
+      return 'request_denied';
+
+    default:
+      return 'restricted_link';
+  }
+};
+
+export const getRetryOptions = (url, status, details, onAuthorize) => {
+  var _details$meta, _access$action;
+
+  switch (status) {
+    case SmartLinkStatus.Forbidden:
+      const data = details && details.data || getEmptyJsonLd();
+      const meta = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
+      const provider = extractProvider(data);
+      const context = provider === null || provider === void 0 ? void 0 : provider.text;
+      const access = extractRequestAccessContext({
+        jsonLd: meta,
+        url,
+        context
+      });
+      const messageKey = getForbiddenMessageKey(meta);
+      const descriptor = messages[messageKey];
+      const values = context ? {
+        context
+      } : undefined;
+      const retry = onAuthorize || (access === null || access === void 0 ? void 0 : (_access$action = access.action) === null || _access$action === void 0 ? void 0 : _access$action.promise);
+      const onClick = retry ? handleOnClick(retry) : undefined;
+      return {
+        descriptor,
+        onClick,
+        values
+      };
+
+    case SmartLinkStatus.Unauthorized:
+      return {
+        descriptor: messages.connect_link_account,
+        onClick: onAuthorize ? handleOnClick(onAuthorize) : undefined
+      };
+
+    case SmartLinkStatus.NotFound:
+      return {
+        descriptor: messages.cannot_find_link
+      };
+  }
+};

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

@@ -0,0 +1,70 @@
+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 '@atlaskit/media-ui/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/view/InlineCard/ForbiddenView/index.js

@@ -0,0 +1,98 @@
+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 '@atlaskit/media-ui/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/view/InlineCard/Frame/index.js

@@ -0,0 +1,55 @@
+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/view/InlineCard/Frame/styled.js

@@ -0,0 +1,108 @@
+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/view/InlineCard/Icon.js

@@ -0,0 +1,62 @@
+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/view/InlineCard/IconAndTitleLayout/index.js

@@ -0,0 +1,99 @@
+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/view/InlineCard/IconAndTitleLayout/styled.js

@@ -0,0 +1,102 @@
+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``;