@atlaskit/smart-card 34.7.0 → 34.9.0

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

@@ -1,111 +1,92 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import ButtonOld from '@atlaskit/button';
 import ErrorIcon from '@atlaskit/icon/utility/migration/error';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
 import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
-import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButtonOldVisualRefresh } from '../styled';
-import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
-var iconWrapperStyles = xcss({
-  marginRight: 'space.negative.025'
-});
-export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
-  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];
+import { InlineCardErroredViewOld } from './InlineCardErroredViewOld';
+var styles = {
+  iconWrapper: "_2hwx1i6y"
+};
+var InlineCardErroredViewNew = function InlineCardErroredViewNew(_ref) {
+  var url = _ref.url,
+    onClick = _ref.onClick,
+    isSelected = _ref.isSelected,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'inline-card-errored-view' : _ref$testId,
+    icon = _ref.icon,
+    message = _ref.message,
+    onRetry = _ref.onRetry,
+    truncateInline = _ref.truncateInline,
+    showHoverPreview = _ref.showHoverPreview;
+  var frameRef = React.useRef(null);
+  var handleRetry = React.useCallback(function (event) {
+    if (onRetry) {
+      event.preventDefault();
+      event.stopPropagation();
+      onRetry();
     }
-    _this = _callSuper(this, InlineCardErroredView, [].concat(args));
-    _defineProperty(_this, "frameRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_this, "handleRetry", function (event) {
-      var onRetry = _this.props.onRetry;
-      if (onRetry) {
-        event.preventDefault();
-        event.stopPropagation();
-        onRetry();
-      }
-    });
-    _defineProperty(_this, "renderActionButton", function () {
-      var onRetry = _this.props.onRetry;
-      var Button = withFrameStyleControl(ButtonOld, _this.frameRef);
-      if (fg('platform-linking-visual-refresh-v1')) {
-        return onRetry && /*#__PURE__*/React.createElement(Button, {
-          component: ActionButton,
-          onClick: _this.handleRetry
-        }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
-      }
-      return onRetry && /*#__PURE__*/React.createElement(Button, {
-        spacing: "none",
-        component: fg('bandicoots-compiled-migration-smartcard') ? IconStyledButtonOldVisualRefresh : IconStyledButtonOld,
-        onClick: _this.handleRetry,
-        role: "button"
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
-    });
-    return _this;
+  }, [onRetry]);
+  var renderActionButton = React.useCallback(function () {
+    var Button = withFrameStyleControl(ButtonOld, frameRef);
+    return onRetry && (fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Button, {
+      component: ActionButton,
+      onClick: handleRetry
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)) : /*#__PURE__*/React.createElement(Button, {
+      spacing: "none",
+      component: IconStyledButtonOldVisualRefresh,
+      onClick: handleRetry,
+      role: "button"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)));
+  }, [handleRetry, onRetry]);
+  var defaultIcon = fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    color: "var(--ds-icon-danger, #C9372C)",
+    label: "error",
+    LEGACY_size: "small",
+    testId: "errored-view-default-icon"
+  })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+    label: "error",
+    LEGACY_size: "small",
+    color: "var(--ds-icon-danger, ".concat(R300, ")"),
+    testId: "errored-view-default-icon"
+  }));
+  var content = /*#__PURE__*/React.createElement(Frame, {
+    testId: testId,
+    isSelected: isSelected,
+    ref: frameRef,
+    truncateInline: truncateInline
+  }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+    icon: icon || defaultIcon,
+    link: url,
+    title: url,
+    onClick: onClick,
+    rightSide: message
+  }), renderActionButton());
+  if (showHoverPreview) {
+    return /*#__PURE__*/React.createElement(HoverCard, {
+      url: url
+    }, content);
   }
-  _inherits(InlineCardErroredView, _React$Component);
-  return _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,
-        truncateInline = _this$props.truncateInline;
-      var Wrapper = fg('bandicoots-compiled-migration-smartcard') ? AKIconWrapper : AKIconWrapperOld;
-      var content = /*#__PURE__*/React.createElement(Frame, {
-        testId: testId,
-        isSelected: isSelected,
-        ref: this.frameRef,
-        truncateInline: truncateInline
-      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-        icon: icon || (fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
-          as: "span",
-          xcss: iconWrapperStyles
-        }, /*#__PURE__*/React.createElement(ErrorIcon, {
-          color: "var(--ds-icon-danger, #C9372C)",
-          label: "error",
-          LEGACY_size: "small",
-          testId: "errored-view-default-icon"
-        })) : /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
-          label: "error",
-          LEGACY_size: "small",
-          color: "var(--ds-icon-danger, ".concat(R300, ")"),
-          testId: "errored-view-default-icon"
-        }))),
-        link: url,
-        title: url,
-        onClick: onClick,
-        rightSide: message
-      }), this.renderActionButton());
-      if (this.props.showHoverPreview) {
-        return /*#__PURE__*/React.createElement(HoverCard, {
-          url: url
-        }, content);
-      }
-      return content;
-    }
-  }]);
-}(React.Component);
+  return content;
+};
+export var InlineCardErroredView = function InlineCardErroredView(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(InlineCardErroredViewNew, props);
+  }
+  return /*#__PURE__*/React.createElement(InlineCardErroredViewOld, props);
+};

package/dist/esm/view/InlineCard/ForbiddenView/InlineCardForbiddenViewOld.js

@@ -0,0 +1,200 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import ButtonOld from '@atlaskit/button';
+import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
+import LegacyLockIcon from '@atlaskit/icon/glyph/lock-filled';
+import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Pressable, xcss } from '@atlaskit/primitives';
+import { N500, R400 } from '@atlaskit/theme/colors';
+import { messages } from '../../../messages';
+import { HoverCard } from '../../HoverCard';
+import { ActionButton } from '../common/action-button';
+import { Frame } from '../Frame';
+import { AKIconWrapper } from '../Icon';
+import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
+import { IconAndTitleLayout, LozengeWrapper } from '../IconAndTitleLayout';
+import { IconStyledButtonOldVisualRefresh } from '../styled';
+import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
+import withFrameStyleControl from '../utils/withFrameStyleControl';
+var iconWrapperStyles = xcss({
+  marginRight: 'space.negative.025'
+});
+var fallbackForbiddenIcon = function fallbackForbiddenIcon() {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: iconWrapperStyles
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      label: "error",
+      color: "var(--ds-icon-danger, #C9372C)",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small",
+      testId: "forbidden-view-fallback-icon"
+    })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
+      label: "error",
+      size: "small",
+      primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
+      testId: "forbidden-view-fallback-icon"
+    }));
+  } else {
+    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: iconWrapperStyles
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      label: "error",
+      color: "var(--ds-icon-danger, #C9372C)",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small",
+      testId: "forbidden-view-fallback-icon"
+    })) : /*#__PURE__*/React.createElement(AKIconWrapperOld, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
+      label: "error",
+      size: "small",
+      primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
+      testId: "forbidden-view-fallback-icon"
+    }));
+  }
+};
+export var InlineCardForbiddenViewOld = /*#__PURE__*/function (_React$Component) {
+  function InlineCardForbiddenViewOld() {
+    var _this$props;
+    var _this;
+    _classCallCheck(this, InlineCardForbiddenViewOld);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, InlineCardForbiddenViewOld, [].concat(args));
+    _defineProperty(_this, "frameRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_this, "state", {
+      hasRequestAccessContextMessage: !!((_this$props = _this.props) !== null && _this$props !== void 0 && (_this$props = _this$props.requestAccessContext) !== null && _this$props !== void 0 && _this$props.callToActionMessageKey)
+    });
+    _defineProperty(_this, "handleRetry", function (event) {
+      var onAuthorise = _this.props.onAuthorise;
+      event.preventDefault();
+      event.stopPropagation();
+      if (onAuthorise) {
+        onAuthorise();
+      } else {
+        var _this$props2;
+        (_this$props2 = _this.props) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.requestAccessContext) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.action) === null || _this$props2 === void 0 || _this$props2.promise();
+      }
+    });
+    _defineProperty(_this, "renderForbiddenAccessMessage", function () {
+      var _this$props3;
+      if ((_this$props3 = _this.props) !== null && _this$props3 !== void 0 && (_this$props3 = _this$props3.requestAccessContext) !== null && _this$props3 !== void 0 && _this$props3.callToActionMessageKey) {
+        var callToActionMessageKey = _this.props.requestAccessContext.callToActionMessageKey;
+        return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[callToActionMessageKey], {
+          values: {
+            product: _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(_this, "renderActionButton", function () {
+      var _this$props$requestAc;
+      var onAuthorise = _this.props.onAuthorise;
+      var Button = withFrameStyleControl(ButtonOld, _this.frameRef);
+      var accessType = (_this$props$requestAc = _this.props.requestAccessContext) === null || _this$props$requestAc === void 0 ? void 0 : _this$props$requestAc.accessType;
+      if (_this.state.hasRequestAccessContextMessage) {
+        if (fg('bandicoots-compiled-migration-smartcard')) {
+          if (fg('platform-linking-visual-refresh-v1')) {
+            var isDisabled = accessType === 'PENDING_REQUEST_EXISTS';
+            return /*#__PURE__*/React.createElement(Button, {
+              onClick: _this.handleRetry,
+              component: ActionButton,
+              testId: "button-connect-other-account",
+              isDisabled: isDisabled
+            }, _this.renderForbiddenAccessMessage());
+          }
+          return /*#__PURE__*/React.createElement(Button, {
+            spacing: "none",
+            onClick: _this.handleRetry,
+            component: IconStyledButtonOldVisualRefresh,
+            testId: "button-connect-other-account",
+            role: "button",
+            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
+          }, _this.renderForbiddenAccessMessage());
+        } else {
+          return /*#__PURE__*/React.createElement(Button, {
+            spacing: "none",
+            onClick: _this.handleRetry,
+            component: IconStyledButtonOld,
+            testId: "button-connect-other-account",
+            role: "button",
+            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
+          }, _this.renderForbiddenAccessMessage());
+        }
+      }
+      if (onAuthorise) {
+        if (fg('platform-linking-visual-refresh-v1')) {
+          return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Pressable, {
+            xcss: actionButtonLozengeStyle,
+            onClick: _this.handleRetry,
+            testId: "button-connect-other-account"
+          }, /*#__PURE__*/React.createElement(Lozenge, {
+            appearance: 'moved'
+          }, _this.renderForbiddenAccessMessage())));
+        }
+        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;
+  }
+  _inherits(InlineCardForbiddenViewOld, _React$Component);
+  return _createClass(InlineCardForbiddenViewOld, [{
+    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,
+        truncateInline = _this$props4.truncateInline;
+      var content = /*#__PURE__*/React.createElement(Frame, {
+        testId: testId,
+        isSelected: isSelected,
+        ref: this.frameRef,
+        truncateInline: truncateInline
+      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+        icon: icon ? icon : fallbackForbiddenIcon(),
+        link: url,
+        title: url,
+        onClick: onClick,
+        titleColor: "var(--ds-text-subtle, ".concat(N500, ")")
+      }), this.renderActionButton());
+      if (this.props.showHoverPreview) {
+        return /*#__PURE__*/React.createElement(HoverCard, {
+          url: url
+        }, content);
+      }
+      return content;
+    }
+  }]);
+}(React.Component);
+var actionButtonLozengeStyle = xcss({
+  backgroundColor: 'color.background.neutral.subtle',
+  padding: 'space.0'
+});

package/dist/esm/view/InlineCard/ForbiddenView/index.compiled.css

@@ -0,0 +1,6 @@
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}