@atlaskit/smart-card 26.42.7 → 26.42.9

package/dist/cjs/view/InlineCard/index.js

@@ -1,182 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.InlineCard = void 0;
-Object.defineProperty(exports, "InlineCardErroredView", {
-  enumerable: true,
-  get: function get() {
-    return _ErroredView.InlineCardErroredView;
-  }
-});
-Object.defineProperty(exports, "InlineCardForbiddenView", {
-  enumerable: true,
-  get: function get() {
-    return _ForbiddenView.InlineCardForbiddenView;
-  }
-});
-Object.defineProperty(exports, "InlineCardResolvedView", {
-  enumerable: true,
-  get: function get() {
-    return _ResolvedView.InlineCardResolvedView;
-  }
-});
-Object.defineProperty(exports, "InlineCardResolvingView", {
-  enumerable: true,
-  get: function get() {
-    return _ResolvingView.InlineCardResolvingView;
-  }
-});
-Object.defineProperty(exports, "InlineCardUnauthorizedView", {
-  enumerable: true,
-  get: function get() {
-    return _UnauthorisedView.InlineCardUnauthorizedView;
-  }
-});
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _jsonld = require("../../utils/jsonld");
-var _inline = require("../../extractors/inline");
-var _context = require("../../extractors/common/context");
-var _LinkView = require("../LinkView");
-var _ErroredView = require("./ErroredView");
-var _ForbiddenView = require("./ForbiddenView");
-var _ResolvedView = require("./ResolvedView");
-var _ResolvingView = require("./ResolvingView");
-var _UnauthorisedView = require("./UnauthorisedView");
-var _linkExtractors = require("@atlaskit/link-extractors");
-var _linkProvider = require("@atlaskit/link-provider");
-var _helpers = require("../../state/helpers");
-var InlineCard = exports.InlineCard = function InlineCard(_ref) {
-  var _details$meta;
-  var analytics = _ref.analytics,
-    id = _ref.id,
-    url = _ref.url,
-    cardState = _ref.cardState,
-    handleAuthorize = _ref.handleAuthorize,
-    handleFrameClick = _ref.handleFrameClick,
-    isSelected = _ref.isSelected,
-    renderers = _ref.renderers,
-    onResolve = _ref.onResolve,
-    onError = _ref.onError,
-    testId = _ref.testId,
-    inlinePreloaderStyle = _ref.inlinePreloaderStyle,
-    showHoverPreview = _ref.showHoverPreview,
-    showAuthTooltip = _ref.showAuthTooltip,
-    showServerActions = _ref.showServerActions;
-  var status = cardState.status,
-    details = cardState.details;
-  var cardDetails = details && details.data || (0, _jsonld.getEmptyJsonLd)();
-  var extensionKey = (0, _helpers.getExtensionKey)(details);
-  var testIdWithStatus = testId ? "".concat(testId, "-").concat(status, "-view") : undefined;
-  var showHoverPreviewFlag = (0, _linkProvider.useFeatureFlag)('showHoverPreview');
-  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
-    showHoverPreview = Boolean(showHoverPreviewFlag);
-  }
-  switch (status) {
-    case 'pending':
-    case 'resolving':
-      return /*#__PURE__*/_react.default.createElement(_ResolvingView.InlineCardResolvingView, {
-        url: url,
-        isSelected: isSelected,
-        onClick: handleFrameClick,
-        testId: testIdWithStatus,
-        inlinePreloaderStyle: inlinePreloaderStyle
-      });
-    case 'resolved':
-      var resolvedProps = (0, _inline.extractInlineProps)(cardDetails, renderers);
-      if (onResolve) {
-        onResolve({
-          url: url,
-          title: resolvedProps.title
-        });
-      }
-      return /*#__PURE__*/_react.default.createElement(_ResolvedView.InlineCardResolvedView, (0, _extends2.default)({}, resolvedProps, {
-        id: id,
-        showHoverPreview: showHoverPreview,
-        showServerActions: showServerActions,
-        link: url,
-        isSelected: isSelected,
-        onClick: handleFrameClick,
-        testId: testIdWithStatus
-      }));
-    case 'unauthorized':
-      if (onError) {
-        onError({
-          url: url,
-          status: status
-        });
-      }
-      var provider = (0, _linkExtractors.extractProvider)(cardDetails);
-      return /*#__PURE__*/_react.default.createElement(_UnauthorisedView.InlineCardUnauthorizedView, {
-        icon: provider && provider.icon,
-        context: provider && provider.text,
-        url: url,
-        isSelected: isSelected,
-        onClick: handleFrameClick,
-        onAuthorise: handleAuthorize,
-        testId: testIdWithStatus,
-        showAuthTooltip: showAuthTooltip,
-        id: id,
-        analytics: analytics,
-        extensionKey: extensionKey
-      });
-    case 'forbidden':
-      if (onError) {
-        onError({
-          url: url,
-          status: status
-        });
-      }
-      var providerForbidden = (0, _linkExtractors.extractProvider)(cardDetails);
-      var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getForbiddenJsonLd)().meta;
-      var requestAccessContext = (0, _context.extractRequestAccessContext)({
-        jsonLd: cardMetadata,
-        url: url,
-        context: providerForbidden === null || providerForbidden === void 0 ? void 0 : providerForbidden.text
-      });
-      return /*#__PURE__*/_react.default.createElement(_ForbiddenView.InlineCardForbiddenView, {
-        url: url,
-        icon: providerForbidden && providerForbidden.icon,
-        context: providerForbidden === null || providerForbidden === void 0 ? void 0 : providerForbidden.text,
-        isSelected: isSelected,
-        onClick: handleFrameClick,
-        onAuthorise: handleAuthorize,
-        testId: testIdWithStatus,
-        requestAccessContext: requestAccessContext
-      });
-    case 'not_found':
-      if (onError) {
-        onError({
-          url: url,
-          status: status
-        });
-      }
-      var providerNotFound = (0, _linkExtractors.extractProvider)(cardDetails);
-      return /*#__PURE__*/_react.default.createElement(_ErroredView.InlineCardErroredView, {
-        url: url,
-        icon: providerNotFound && providerNotFound.icon,
-        isSelected: isSelected,
-        message: "Can't find link",
-        onClick: handleFrameClick,
-        testId: testIdWithStatus || 'inline-card-not-found-view'
-      });
-    case 'fallback':
-    case 'errored':
-    default:
-      if (onError) {
-        onError({
-          url: url,
-          status: status
-        });
-      }
-      return /*#__PURE__*/_react.default.createElement(_LinkView.CardLinkView, {
-        link: url,
-        isSelected: isSelected,
-        onClick: handleFrameClick,
-        testId: testIdWithStatus || 'inline-card-errored-view'
-      });
-  }
-};

package/dist/cjs/view/InlineCard/styled.js

@@ -1,26 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NoLinkAppearance = exports.LowercaseAppearance = exports.LinkAppearance = exports.IconStyledButton = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var LINK_COLOR_DARK = '#4794FF';
-
-// By default buttons will hide overflow and ellipsis content instead of wrapping.
-// This basically turns the button back into inline content
-var IconStyledButton = exports.IconStyledButton = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-align: initial !important;\n  display: inline !important;\n\n  > span {\n    display: inline;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])));
-var NoLinkAppearance = exports.NoLinkAppearance = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _components.themed)({
-  light: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  dark: "var(--ds-text-subtlest, ".concat(LINK_COLOR_DARK, ")")
-}));
-var LowercaseAppearance = exports.LowercaseAppearance = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: lowercase;\n"])));
-var LinkAppearance = exports.LinkAppearance = _styled.default.a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _components.themed)({
-  light: "var(--ds-link, ".concat(_colors.B400, ")"),
-  dark: "var(--ds-link, ".concat(LINK_COLOR_DARK, ")")
-}));

package/dist/cjs/view/InlineCard/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

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

@@ -1,65 +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 { IconStyledButton, LowercaseAppearance } 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, "renderRightSide", () => {
-      const {
-        onRetry,
-        message
-      } = this.props;
-      return !onRetry ? message : /*#__PURE__*/React.createElement(React.Fragment, null, message, ', ', /*#__PURE__*/React.createElement(Button, {
-        spacing: "none",
-        appearance: "subtle-link",
-        component: IconStyledButton,
-        onClick: this.handleRetry,
-        role: "button"
-      }, /*#__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,
-      isSelected: isSelected
-    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-      icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
-        label: "error",
-        size: "small",
-        primaryColor: `var(--ds-icon-danger, ${R300})`,
-        testId: "errored-view-default-icon"
-      })),
-      link: url,
-      title: url,
-      onClick: onClick,
-      rightSide: this.renderRightSide()
-    }));
-  }
-}

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

@@ -1,107 +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 } from '../styled';
-import Lozenge from '@atlaskit/lozenge';
-import { LozengeWrapper, LozengeBlockWrapper } from '../IconAndTitleLayout/styled';
-const FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
-  label: "error",
-  size: "small",
-  primaryColor: `var(--ds-icon-danger, ${R400})`,
-  testId: "forbidden-view-fallback-icon"
-}));
-export class InlineCardForbiddenView extends React.Component {
-  constructor(...args) {
-    var _this$props, _this$props$requestAc;
-    super(...args);
-    _defineProperty(this, "state", {
-      hasRequestAccessContextMessage: !!((_this$props = this.props) !== null && _this$props !== void 0 && (_this$props$requestAc = _this$props.requestAccessContext) !== null && _this$props$requestAc !== void 0 && _this$props$requestAc.callToActionMessageKey)
-    });
-    _defineProperty(this, "handleRetry", event => {
-      const {
-        onAuthorise
-      } = this.props;
-      event.preventDefault();
-      event.stopPropagation();
-      if (onAuthorise) {
-        onAuthorise();
-      } else {
-        var _this$props2, _this$props2$requestA, _this$props2$requestA2;
-        (_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$requestA = _this$props2.requestAccessContext) === null || _this$props2$requestA === void 0 ? void 0 : (_this$props2$requestA2 = _this$props2$requestA.action) === null || _this$props2$requestA2 === void 0 ? void 0 : _this$props2$requestA2.promise();
-      }
-    });
-    _defineProperty(this, "renderForbiddenAccessMessage", () => {
-      var _this$props3, _this$props3$requestA;
-      if ((_this$props3 = this.props) !== null && _this$props3 !== void 0 && (_this$props3$requestA = _this$props3.requestAccessContext) !== null && _this$props3$requestA !== void 0 && _this$props3$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);
-      }));
-    });
-    _defineProperty(this, "renderRightSide", () => {
-      const {
-        onAuthorise
-      } = this.props;
-      if (this.state.hasRequestAccessContextMessage) {
-        return /*#__PURE__*/React.createElement(Button, {
-          spacing: "none",
-          appearance: "subtle-link",
-          onClick: this.handleRetry,
-          component: IconStyledButton,
-          testId: "button-connect-other-account",
-          role: "button"
-        }, this.renderForbiddenAccessMessage());
-      }
-      if (onAuthorise) {
-        return /*#__PURE__*/React.createElement(LozengeBlockWrapper, null, /*#__PURE__*/React.createElement(Button, {
-          spacing: "none",
-          appearance: "subtle-link",
-          onClick: this.handleRetry,
-          component: IconStyledButton,
-          testId: "button-connect-other-account",
-          role: "button"
-        }, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
-          appearance: 'moved'
-        }, this.renderForbiddenAccessMessage()))));
-      }
-      return null;
-    });
-  }
-  render() {
-    const {
-      url,
-      icon,
-      onClick,
-      isSelected,
-      testId = 'inline-card-forbidden-view'
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Frame, {
-      testId: testId,
-      isSelected: isSelected
-    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-      icon: icon ? icon : FallbackForbiddenIcon,
-      link: url,
-      title: url,
-      onClick: onClick,
-      titleColor: `var(--ds-text-subtle, ${N500})`,
-      rightSide: this.renderRightSide(),
-      rightSideSpacer: this.state.hasRequestAccessContextMessage
-    }));
-  }
-}

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

@@ -1,54 +0,0 @@
-import React, { useCallback } from 'react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
-import { WrapperAnchor, WrapperSpan } from './styled';
-import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
-export const Frame = props => {
-  const {
-    isSelected,
-    children,
-    onClick,
-    link,
-    withoutBackground,
-    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]);
-  const handleMouseDown = useMouseDownEvent();
-  const isInteractive = Boolean(onClick);
-
-  // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
-  const Wrapper = link || onClick ? WrapperAnchor : WrapperSpan;
-
-  // 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,
-    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

@@ -1,93 +0,0 @@
-import styled from '@emotion/styled';
-import { B100, B400, B50, DN40A, DN50A, N20, N40A, N50A } from '@atlaskit/theme/colors';
-import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
-import { themed } from '@atlaskit/theme/components';
-const BACKGROUND_COLOR_DARK = '#262B31';
-const selected = `
-  cursor: pointer;
-  box-shadow: 0 0 0 2px ${`var(--ds-border-selected, ${B100})`};
-  outline: none;
-  user-select: none;
-  &, :hover, :focus, :active {
-    text-decoration: none;
-  }
-`;
-const isInteractive = ({
-  isInteractive
-}) => {
-  if (isInteractive) {
-    return `
-      :hover {
-        background-color: ${themed({
-      light: `var(--ds-background-neutral-subtle-hovered, ${N20})`,
-      dark: `var(--ds-background-neutral-subtle-hovered, ${BACKGROUND_COLOR_DARK})`
-    })};
-      }
-      :active {
-        background-color: ${themed({
-      light: `var(--ds-background-selected, ${B50})`,
-      dark: `var(--ds-background-selected, ${BACKGROUND_COLOR_DARK})`
-    })};
-      }
-      :focus {
-        ${selected}
-      }
-    `;
-  } else {
-    return '';
-  }
-};
-const isSelected = ({
-  isSelected
-}) => {
-  if (isSelected) {
-    return selected;
-  } else {
-    return 'user-select: text';
-  }
-};
-
-/*
-  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.
-const baseWrapperStyle = props => `
-  line-height: 16px;
-  padding: 1px 0.24em 2px 0.24em;
-  ${props.withoutBackground ? `padding-left: 0; margin-left:-2px;` : ''}
-  display: inline;
-  box-decoration-break: clone;
-  border-radius: ${akBorderRadius()}px;
-  color: ${themed({
-  light: `var(--ds-link, ${B400})`,
-  dark: "var(--ds-link, #4794FF)"
-})(props)};
-  background-color: ${props.withoutBackground ? '' : themed({
-  light: "var(--ds-surface-raised, white)",
-  dark: `var(--ds-surface-raised, ${BACKGROUND_COLOR_DARK})`
-})(props)};
-  ${props.withoutBackground ? '' : themed({
-  light: `box-shadow: ${`var(--ds-shadow-raised, ${`0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`})`};`,
-  dark: `box-shadow: ${`var(--ds-shadow-raised, ${`0 1px 1px ${DN50A}, 0 0 1px 1px ${DN40A}`})`};`
-})(props)}
-  ${isSelected(props)};
-  transition: 0.1s all ease-in-out;
-  -moz-user-select: none;
-`;
-export const WrapperAnchor = styled.a`
-  ${baseWrapperStyle}
-  ${isInteractive}
-`;
-WrapperAnchor.displayName = 'WrapperAnchor';
-export const WrapperSpan = styled.span`
-  ${baseWrapperStyle}
-`;
-WrapperSpan.displayName = 'WrapperSpan';

package/dist/es2019/view/InlineCard/Icon.js

@@ -1,45 +0,0 @@
-import styled from '@emotion/styled';
-import { Skeleton } from '@atlaskit/linking-common';
-import React from 'react';
-
-// 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: ${"var(--ds-space-050, 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: ${"var(--ds-space-negative-025, -2px)"};
-`;
-export const Shimmer = ({
-  testId
-}) => {
-  const skeletonCustomStyles = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    marginRight: "var(--ds-space-050, 4px)"
-  };
-  return /*#__PURE__*/React.createElement(Skeleton, {
-    width: 14,
-    height: 14,
-    borderRadius: 2,
-    testId: testId,
-    style: skeletonCustomStyles
-  });
-};