@atlaskit/smart-card 26.9.16 → 26.9.18

package/dist/es2019/view/RedesignedInlineCard/ResolvingView/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Frame } from '../Frame';
+import Spinner from '@atlaskit/spinner';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { SpinnerWrapper } from './styled';
+import { IconTitleWrapper, RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
+export class InlineCardResolvingView extends React.Component {
+  render() {
+    const {
+      url,
+      onClick,
+      isSelected,
+      inlinePreloaderStyle,
+      testId = 'inline-card-resolving-view',
+      titleTextColor
+    } = this.props;
+    if (inlinePreloaderStyle === 'on-right-without-skeleton') {
+      return /*#__PURE__*/React.createElement(Frame, {
+        withoutBackground: true,
+        testId: testId,
+        onClick: onClick,
+        isSelected: isSelected
+      }, /*#__PURE__*/React.createElement(IconTitleWrapper, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapper, null, /*#__PURE__*/React.createElement(SpinnerWrapper, {
+        className: "inline-resolving-spinner"
+      }, /*#__PURE__*/React.createElement(Spinner, {
+        size: 14
+      })))));
+    } else {
+      return /*#__PURE__*/React.createElement(Frame, {
+        testId: testId,
+        onClick: onClick,
+        isSelected: isSelected
+      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+        link: url,
+        title: url,
+        titleTextColor: titleTextColor
+      }, /*#__PURE__*/React.createElement(SpinnerWrapper, {
+        className: "inline-resolving-spinner"
+      }, /*#__PURE__*/React.createElement(Spinner, {
+        size: 14
+      }))));
+    }
+  }
+}

package/dist/es2019/view/RedesignedInlineCard/ResolvingView/styled.js

@@ -0,0 +1,6 @@
+import styled from '@emotion/styled';
+import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
+export const SpinnerWrapper = styled(IconTitleWrapper)`
+  vertical-align: text-bottom;
+  padding: 0px;
+`;

package/dist/es2019/view/RedesignedInlineCard/UnauthorisedView/index.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import Button from '@atlaskit/button/custom-theme-button';
+import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import { N500, R400 } from '@atlaskit/theme/colors';
+import withFrameStyleControl from '../utils/withFrameStyleControl';
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../../../messages';
+import { Frame } from '../Frame';
+import { AKIconWrapper } from '../Icon';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { IconStyledButton } from '../styled';
+import { HoverCard } from '../../HoverCard';
+const FallbackUnauthorizedIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
+  label: "error",
+  size: "small",
+  primaryColor: `var(--ds-icon-danger, ${R400})`
+}));
+export class InlineCardUnauthorizedView extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "frameRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "handleConnectAccount", event => {
+      const {
+        analytics,
+        extensionKey,
+        onAuthorise
+      } = this.props;
+      event.preventDefault();
+      event.stopPropagation();
+      if (onAuthorise) {
+        analytics === null || analytics === void 0 ? void 0 : analytics.track.appAccountAuthStarted({
+          extensionKey
+        });
+      }
+      return onAuthorise();
+    });
+    _defineProperty(this, "renderActionButton", () => {
+      const {
+        onAuthorise,
+        context
+      } = this.props;
+      const ActionButton = withFrameStyleControl(Button, this.frameRef);
+      return onAuthorise ? /*#__PURE__*/React.createElement(ActionButton, {
+        spacing: "none",
+        component: IconStyledButton,
+        onClick: this.handleConnectAccount,
+        testId: "button-connect-account"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+        values: {
+          context
+        }
+      }))) : undefined;
+    });
+  }
+  render() {
+    const {
+      url,
+      icon,
+      onClick,
+      isSelected,
+      testId = 'inline-card-unauthorized-view',
+      showAuthTooltip = false
+    } = this.props;
+    const inlineCardUnauthenticatedView = /*#__PURE__*/React.createElement(Frame, {
+      testId: testId,
+      isSelected: isSelected,
+      ref: this.frameRef
+    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+      icon: icon ? icon : FallbackUnauthorizedIcon,
+      title: url,
+      link: url,
+      onClick: onClick,
+      titleColor: `var(--ds-text-subtle, ${N500})`
+    }), this.renderActionButton());
+    if (showAuthTooltip) {
+      return /*#__PURE__*/React.createElement(HoverCard, {
+        url: url,
+        onAuthorize: this.props.onAuthorise,
+        id: this.props.id
+      }, inlineCardUnauthenticatedView);
+    }
+    return inlineCardUnauthenticatedView;
+  }
+}

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

@@ -0,0 +1,149 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
+import { extractInlineProps } from '../../extractors/inline';
+import { extractRequestAccessContext } from '../../extractors/common/context';
+import { CardLinkView } from '../LinkView';
+import { InlineCardErroredView } from './ErroredView';
+import { InlineCardForbiddenView } from './ForbiddenView';
+import { InlineCardResolvedView } from './ResolvedView';
+import { InlineCardResolvingView } from './ResolvingView';
+import { InlineCardUnauthorizedView } from './UnauthorisedView';
+import { extractProvider } from '@atlaskit/link-extractors';
+import { useFeatureFlag } from '@atlaskit/link-provider';
+import { getExtensionKey } from '../../state/helpers';
+export { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, InlineCardForbiddenView, InlineCardUnauthorizedView };
+export const InlineCard = ({
+  analytics,
+  id,
+  url,
+  cardState,
+  handleAuthorize,
+  handleFrameClick,
+  isSelected,
+  renderers,
+  onResolve,
+  onError,
+  testId,
+  inlinePreloaderStyle,
+  showHoverPreview,
+  showAuthTooltip,
+  showServerActions
+}) => {
+  var _details$meta;
+  const {
+    status,
+    details
+  } = cardState;
+  const cardDetails = details && details.data || getEmptyJsonLd();
+  const extensionKey = getExtensionKey(details);
+  const testIdWithStatus = testId ? `${testId}-${status}-view` : undefined;
+  const showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
+  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
+    showHoverPreview = Boolean(showHoverPreviewFlag);
+  }
+  switch (status) {
+    case 'pending':
+    case 'resolving':
+      return /*#__PURE__*/React.createElement(InlineCardResolvingView, {
+        url: url,
+        isSelected: isSelected,
+        onClick: handleFrameClick,
+        testId: testIdWithStatus,
+        inlinePreloaderStyle: inlinePreloaderStyle
+      });
+    case 'resolved':
+      const resolvedProps = extractInlineProps(cardDetails, renderers);
+      if (onResolve) {
+        onResolve({
+          url,
+          title: resolvedProps.title
+        });
+      }
+      return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedProps, {
+        id: id,
+        showHoverPreview: showHoverPreview,
+        showServerActions: showServerActions,
+        link: url,
+        isSelected: isSelected,
+        onClick: handleFrameClick,
+        testId: testIdWithStatus
+      }));
+    case 'unauthorized':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+      const provider = extractProvider(cardDetails);
+      return /*#__PURE__*/React.createElement(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,
+          status
+        });
+      }
+      const providerForbidden = extractProvider(cardDetails);
+      const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
+      const requestAccessContext = extractRequestAccessContext({
+        jsonLd: cardMetadata,
+        url,
+        context: providerForbidden === null || providerForbidden === void 0 ? void 0 : providerForbidden.text
+      });
+      return /*#__PURE__*/React.createElement(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,
+          status
+        });
+      }
+      const providerNotFound = extractProvider(cardDetails);
+      return /*#__PURE__*/React.createElement(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,
+          status
+        });
+      }
+      return /*#__PURE__*/React.createElement(CardLinkView, {
+        link: url,
+        isSelected: isSelected,
+        onClick: handleFrameClick,
+        testId: testIdWithStatus || 'inline-card-errored-view'
+      });
+  }
+};

package/dist/es2019/view/RedesignedInlineCard/styled.js

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import { B400, N200 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+const 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
+// There is a workaround for negative token spacing suggested by the design system team. calc(${token} * -1)
+export const IconStyledButton = styled.span`
+  &&& {
+    text-align: initial;
+    display: inline;
+    vertical-align: baseline;
+    border-radius: ${"var(--ds-border-radius-100, 2px)"};
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"};
+    background-clip: padding-box;
+    box-decoration-break: clone;
+  }
+  > span {
+    display: inline;
+    overflow: initial;
+    text-overflow: initial;
+    white-space: initial;
+    > span {
+      overflow: initial;
+      text-overflow: initial;
+      white-space: initial;
+    }
+  }
+`;
+export const NoLinkAppearance = styled.span`
+  color: ${themed({
+  light: `var(--ds-text-subtlest, ${N200})`,
+  dark: `var(--ds-text-subtlest, ${LINK_COLOR_DARK})`
+})};
+  margin-left: ${"var(--ds-space-050, 4px)"};
+`;
+export const LowercaseAppearance = styled.span`
+  text-transform: lowercase;
+`;
+export const LinkAppearance = styled.a`
+  color: ${themed({
+  light: `var(--ds-link, ${B400})`,
+  dark: `var(--ds-link, ${LINK_COLOR_DARK})`
+})};
+
+  &:hover {
+    text-decoration: none;
+  }
+`;

package/dist/es2019/view/RedesignedInlineCard/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/view/RedesignedInlineCard/utils/withFrameStyleControl.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { themed } from '@atlaskit/theme/components';
+import { N500, N40 } from '@atlaskit/theme/colors';
+
+/**
+ * This HOC serves as a temporary workaround for controlling the style of a parent component.
+ * We do not want the Frame to have a hover state when hovering over the action button.
+ * TODO: When Firefox begins supporting the :has()pseudo-selector (e.g "frame:has(button:hover){...}"),
+ * it should be used instead and the code should be cleaned up.
+ */
+export default ((Button, frameRef) => props => {
+  const setBorderStyle = () => {
+    const borderColor = themed({
+      light: `${`var(--ds-border-input, ${N40})`}`,
+      dark: `${`var(--ds-border-input, ${N500})`}`
+    })();
+    const frameNode = frameRef.current;
+    if (frameNode) {
+      frameNode.style.borderColor = borderColor;
+    }
+  };
+  const removeBorderStyle = () => {
+    const frameNode = frameRef.current;
+    if (frameNode) {
+      frameNode.removeAttribute('style');
+    }
+  };
+  return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+    onMouseEnter: setBorderStyle,
+    onMouseLeave: removeBorderStyle
+  }));
+});

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.9.16",
+	"version": "26.9.18",
 	"sideEffects": false
 }

package/dist/esm/view/CardWithUrl/component.js

@@ -7,6 +7,8 @@ import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceTyp
 import { useSmartLink } from '../../state';
 import { BlockCard } from '../BlockCard';
 import { InlineCard } from '../InlineCard';
+import { InlineCard as RedesignedInlineCard } from '../RedesignedInlineCard';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { EmbedCard } from '../EmbedCard';
 import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
@@ -195,7 +197,7 @@ function Component(_ref) {
   }
   switch (appearance) {
     case 'inline':
-      return /*#__PURE__*/React.createElement(InlineCard, {
+      var inlineProps = {
         analytics: analytics,
         id: id,
         url: url,
@@ -211,7 +213,8 @@ function Component(_ref) {
         showHoverPreview: showHoverPreview,
         showAuthTooltip: showAuthTooltip,
         showServerActions: showServerActions
-      });
+      };
+      return getBooleanFF('platform.linking-platform.smart-card.show-inline-card-refreshed-design') ? /*#__PURE__*/React.createElement(RedesignedInlineCard, inlineProps) : /*#__PURE__*/React.createElement(InlineCard, inlineProps);
     case 'block':
       return /*#__PURE__*/React.createElement(BlockCard, {
         id: id,

package/dist/esm/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -7,8 +7,7 @@ import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 var MAX_COUNT = 4;
 var getStyles = function getStyles(size) {
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n    ul {\n      margin-right: 8px;\n    }\n  "])));
+  var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n    ul,\n    ul {\n      margin-right: 0.5rem;\n      margin-top: 0;\n    }\n  "])));
   switch (size) {
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Large:

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

@@ -19,9 +19,7 @@ export var Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;
   var skeletonCustomStyles = {
     position: 'absolute',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     top: '50%',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     left: '50%',
     transform: 'translate(-50%, -50%)',
     marginRight: "var(--ds-space-050, 4px)"

package/dist/esm/view/RedesignedInlineCard/ErroredView/index.js

@@ -0,0 +1,82 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+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 } from '../styled';
+import withFrameStyleControl from '../utils/withFrameStyleControl';
+export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
+  _inherits(InlineCardErroredView, _React$Component);
+  var _super = _createSuper(InlineCardErroredView);
+  function InlineCardErroredView() {
+    var _this;
+    _classCallCheck(this, InlineCardErroredView);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "frameRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "handleRetry", function (event) {
+      var onRetry = _this.props.onRetry;
+      if (onRetry) {
+        event.preventDefault();
+        event.stopPropagation();
+        onRetry();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderActionButton", function () {
+      var onRetry = _this.props.onRetry;
+      var ActionButton = withFrameStyleControl(Button, _this.frameRef);
+      return onRetry && /*#__PURE__*/React.createElement(ActionButton, {
+        spacing: "none",
+        component: IconStyledButton,
+        onClick: _this.handleRetry,
+        role: "button"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
+    });
+    return _this;
+  }
+  _createClass(InlineCardErroredView, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        url = _this$props.url,
+        onClick = _this$props.onClick,
+        isSelected = _this$props.isSelected,
+        _this$props$testId = _this$props.testId,
+        testId = _this$props$testId === void 0 ? 'inline-card-errored-view' : _this$props$testId,
+        icon = _this$props.icon,
+        message = _this$props.message;
+      return /*#__PURE__*/React.createElement(Frame, {
+        testId: testId,
+        isSelected: isSelected,
+        ref: this.frameRef
+      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+        icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+          label: "error",
+          size: "small",
+          primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
+          testId: "errored-view-default-icon"
+        })),
+        link: url,
+        title: url,
+        onClick: onClick,
+        rightSide: message
+      }), this.renderActionButton());
+    }
+  }]);
+  return InlineCardErroredView;
+}(React.Component);

package/dist/esm/view/RedesignedInlineCard/ForbiddenView/index.js

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+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 } from '../IconAndTitleLayout/styled';
+import withFrameStyleControl from '../utils/withFrameStyleControl';
+var FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
+  label: "error",
+  size: "small",
+  primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
+  testId: "forbidden-view-fallback-icon"
+}));
+export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
+  _inherits(InlineCardForbiddenView, _React$Component);
+  var _super = _createSuper(InlineCardForbiddenView);
+  function InlineCardForbiddenView() {
+    var _this$props, _this$props$requestAc;
+    var _this;
+    _classCallCheck(this, InlineCardForbiddenView);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "frameRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_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(_assertThisInitialized(_this), "handleRetry", function (event) {
+      var onAuthorise = _this.props.onAuthorise;
+      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(_assertThisInitialized(_this), "renderForbiddenAccessMessage", function () {
+      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) {
+        var callToActionMessageKey = _this.props.requestAccessContext.callToActionMessageKey;
+        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, function (formattedMessage) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage);
+      }));
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderActionButton", function () {
+      var onAuthorise = _this.props.onAuthorise;
+      var ActionButton = withFrameStyleControl(Button, _this.frameRef);
+      if (_this.state.hasRequestAccessContextMessage) {
+        return /*#__PURE__*/React.createElement(ActionButton, {
+          spacing: "none",
+          onClick: _this.handleRetry,
+          component: IconStyledButton,
+          testId: "button-connect-other-account",
+          role: "button"
+        }, _this.renderForbiddenAccessMessage());
+      }
+      if (onAuthorise) {
+        return /*#__PURE__*/React.createElement(Button, {
+          spacing: "none",
+          onClick: _this.handleRetry,
+          appearance: "subtle-link",
+          testId: "button-connect-other-account",
+          role: "button"
+        }, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+          appearance: 'moved'
+        }, _this.renderForbiddenAccessMessage())));
+      }
+      return null;
+    });
+    return _this;
+  }
+  _createClass(InlineCardForbiddenView, [{
+    key: "render",
+    value: function render() {
+      var _this$props4 = this.props,
+        url = _this$props4.url,
+        icon = _this$props4.icon,
+        onClick = _this$props4.onClick,
+        isSelected = _this$props4.isSelected,
+        _this$props4$testId = _this$props4.testId,
+        testId = _this$props4$testId === void 0 ? 'inline-card-forbidden-view' : _this$props4$testId;
+      return /*#__PURE__*/React.createElement(Frame, {
+        testId: testId,
+        isSelected: isSelected,
+        ref: this.frameRef
+      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+        icon: icon ? icon : FallbackForbiddenIcon,
+        link: url,
+        title: url,
+        onClick: onClick,
+        titleColor: "var(--ds-text-subtle, ".concat(N500, ")")
+      }), this.renderActionButton());
+    }
+  }]);
+  return InlineCardForbiddenView;
+}(React.Component);