@atlaskit/smart-card 16.3.0 → 17.2.0

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

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _elevation = require("@atlaskit/theme/elevation");
+
+var _components = require("@atlaskit/theme/components");
+
+var _styled2 = require("../IconAndTitleLayout/styled");
+
+var _templateObject;
+
+var BACKGROUND_COLOR_DARK = '#262B31';
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat(_colors.B100, ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
+
+var isInteractive = function isInteractive(_ref) {
+  var isInteractive = _ref.isInteractive;
+
+  if (isInteractive) {
+    return "\n      cursor: pointer;\n      :hover {\n        background-color: ".concat((0, _components.themed)({
+      light: _colors.N20,
+      dark: BACKGROUND_COLOR_DARK
+    }), ";\n        text-decoration: none;\n      }\n      :active {\n        background-color: ").concat((0, _components.themed)({
+      light: _colors.B50,
+      dark: BACKGROUND_COLOR_DARK
+    }), ";\n        text-decoration: none;\n      }\n      :focus {\n        ").concat(selected, "\n        text-decoration: none;\n      }\n    ");
+  } else {
+    return '';
+  }
+};
+
+var isSelected = function isSelected(_ref2) {
+  var isSelected = _ref2.isSelected;
+
+  if (isSelected) {
+    return selected;
+  } else {
+    return 'user-select: text';
+  }
+};
+
+var withoutHover = function withoutHover(_ref3) {
+  var withoutHover = _ref3.withoutHover;
+  return withoutHover ? "\n    &:hover {\n      text-decoration: none;\n    }\n  " : '';
+};
+/*
+  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.
+
+
+var Wrapper = _styled.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ", "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  ", "\n  ", ";\n  ", "\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  &:hover span.", " {\n    text-decoration: ", ";\n  }\n"])), function (props) {
+  return props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '';
+}, (0, _constants.borderRadius)(), (0, _components.themed)({
+  light: _colors.B400,
+  dark: '#4794FF'
+}), function (props) {
+  return props.withoutBackground ? '' : (0, _components.themed)({
+    light: 'white',
+    dark: BACKGROUND_COLOR_DARK
+  });
+}, function (props) {
+  return props.withoutBackground ? '' : (0, _elevation.e100)();
+}, function (props) {
+  return isInteractive(props);
+}, function (props) {
+  return isSelected(props);
+}, function (props) {
+  return withoutHover(props);
+}, _styled2.TitleWrapperClassName, function (_ref4) {
+  var withoutHover = _ref4.withoutHover;
+  return withoutHover ? 'none' : 'underline';
+});
+
+exports.Wrapper = Wrapper;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Shimmer = exports.Icon = exports.AKIconWrapper = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _core = require("@emotion/core");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var placeholderShimmer = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-position: -20px 0;\n  }\n\n  100% {\n    background-position: 20px 0;\n  }\n"]))); // 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.
+
+var Icon = _styled.default.img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"]))); // 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.
+
+
+exports.Icon = Icon;
+
+var AKIconWrapper = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: -2px;\n"])));
+
+exports.AKIconWrapper = AKIconWrapper;
+
+var Shimmer = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  background: #f6f7f8;\n  background-image: linear-gradient(\n    to right,\n    #f6f7f8 0%,\n    #edeef1 20%,\n    #f6f7f8 40%,\n    #f6f7f8 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 40px 14px;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), placeholderShimmer);
+
+exports.Shimmer = Shimmer;

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

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconAndTitleLayout = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
+
+var _Icon = require("../Icon");
+
+var _styled = require("./styled");
+
+var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(IconAndTitleLayout, _React$Component);
+
+  var _super = _createSuper(IconAndTitleLayout);
+
+  function IconAndTitleLayout() {
+    (0, _classCallCheck2.default)(this, IconAndTitleLayout);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(IconAndTitleLayout, [{
+    key: "renderAtlaskitIcon",
+    value: function renderAtlaskitIcon() {
+      var _this$props = this.props,
+          icon = _this$props.icon,
+          emoji = _this$props.emoji;
+
+      if (emoji) {
+        return /*#__PURE__*/_react.default.createElement(_styled.EmojiWrapper, null, emoji);
+      }
+
+      if (!icon || typeof icon === 'string') {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, null, icon);
+    }
+  }, {
+    key: "renderImageIcon",
+    value: function renderImageIcon(errored, testId) {
+      var url = this.props.icon;
+
+      if (!url || typeof url !== 'string') {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
+        src: url,
+        loaded: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+          className: "smart-link-icon",
+          src: url,
+          "data-testid": "".concat(testId, "-image")
+        }),
+        errored: errored,
+        loading: /*#__PURE__*/_react.default.createElement(_Icon.Shimmer, {
+          "data-testid": "".concat(testId, "-loading")
+        })
+      });
+    }
+  }, {
+    key: "renderIconPlaceholder",
+    value: function renderIconPlaceholder(testId) {
+      var defaultIcon = this.props.defaultIcon;
+
+      if (defaultIcon) {
+        return /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, null, defaultIcon);
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, null, /*#__PURE__*/_react.default.createElement(_link.default, {
+        label: "link",
+        size: "small",
+        testId: "".concat(testId, "-default")
+      }));
+    }
+  }, {
+    key: "renderIcon",
+    value: function 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.
+      var icon = this.renderAtlaskitIcon();
+
+      if (icon) {
+        return icon;
+      }
+
+      var placeholder = this.renderIconPlaceholder(testId);
+      var image = this.renderImageIcon(placeholder, testId);
+      return image || placeholder;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          children = _this$props2.children,
+          title = _this$props2.title,
+          titleColor = _this$props2.titleColor,
+          titleTextColor = _this$props2.titleTextColor,
+          _this$props2$testId = _this$props2.testId,
+          testId = _this$props2$testId === void 0 ? 'inline-card-icon-and-title' : _this$props2$testId;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconTitleWrapper, {
+        style: {
+          color: titleColor
+        }
+      }, /*#__PURE__*/_react.default.createElement(_styled.IconPositionWrapper, null, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, {
+        style: {
+          color: titleTextColor
+        },
+        className: _styled.TitleWrapperClassName
+      }, title)));
+    }
+  }]);
+  return IconAndTitleLayout;
+}(_react.default.Component);
+
+exports.IconAndTitleLayout = IconAndTitleLayout;

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

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleWrapperClassName = exports.TitleWrapper = exports.RightIconPositionWrapper = exports.LozengeWrapper = exports.LozengeBlockWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconOverrides = exports.IconObjectOverrides = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+// TODO: remove this override behaviour for @atlaskit/icon-object
+var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    line-height: 14px;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n"; // TODO: remove this override behaviour for @atlaskit/icon
+
+exports.IconObjectOverrides = IconObjectOverrides;
+var IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n"; // 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.
+
+exports.IconOverrides = IconOverrides;
+
+var IconWrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides); // Wraps all emoji in Inline Links similar to icon
+
+
+exports.IconWrapper = IconWrapper;
+
+var EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), 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.
+
+
+exports.EmojiWrapper = EmojiWrapper;
+
+var IconTitleWrapper = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  hyphens: auto;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  word-break: break-word;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
+
+
+exports.IconTitleWrapper = IconTitleWrapper;
+
+var LozengeWrapper = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
+
+
+exports.LozengeWrapper = LozengeWrapper;
+
+var LozengeBlockWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"])));
+
+exports.LozengeBlockWrapper = LozengeBlockWrapper;
+
+var RightIconPositionWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 2px;\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"]))); // 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.
+
+
+exports.RightIconPositionWrapper = RightIconPositionWrapper;
+
+var IconPositionWrapper = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
+
+exports.IconPositionWrapper = IconPositionWrapper;
+
+var IconEmptyWrapper = _styled.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"]))); // With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
+// To achieve same result we use classname instead.
+
+
+exports.IconEmptyWrapper = IconEmptyWrapper;
+var TitleWrapperClassName = 'smart-link-title-wrapper';
+exports.TitleWrapperClassName = TitleWrapperClassName;
+
+var TitleWrapper = _styled.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)([""])));
+
+exports.TitleWrapper = TitleWrapper;

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineCardResolvedView = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Frame = require("../Frame");
+
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+
+var _IconAndTitleLayout = require("../IconAndTitleLayout");
+
+var _styled = require("../IconAndTitleLayout/styled");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(InlineCardResolvedView, _React$Component);
+
+  var _super = _createSuper(InlineCardResolvedView);
+
+  function InlineCardResolvedView() {
+    (0, _classCallCheck2.default)(this, InlineCardResolvedView);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(InlineCardResolvedView, [{
+    key: "renderLozenge",
+    value: function renderLozenge() {
+      var lozenge = this.props.lozenge;
+
+      if (!lozenge) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_styled.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+        appearance: lozenge.appearance || 'default',
+        isBold: lozenge.isBold
+      }, lozenge.text));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          _this$props$title = _this$props.title,
+          title = _this$props$title === void 0 ? '' : _this$props$title,
+          isSelected = _this$props.isSelected,
+          onClick = _this$props.onClick,
+          icon = _this$props.icon,
+          link = _this$props.link,
+          _this$props$testId = _this$props.testId,
+          testId = _this$props$testId === void 0 ? 'inline-card-resolved-view' : _this$props$testId,
+          titleTextColor = _this$props.titleTextColor,
+          titlePrefix = _this$props.titlePrefix;
+      return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+        testId: testId,
+        link: link,
+        isSelected: isSelected,
+        onClick: onClick
+      }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+        emoji: titlePrefix,
+        icon: icon,
+        title: title,
+        titleTextColor: titleTextColor
+      }), this.renderLozenge());
+    }
+  }]);
+  return InlineCardResolvedView;
+}(_react.default.Component);
+
+exports.InlineCardResolvedView = InlineCardResolvedView;

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

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineCardResolvingView = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Frame = require("../Frame");
+
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
+var _IconAndTitleLayout = require("../IconAndTitleLayout");
+
+var _styled = require("./styled");
+
+var _styled2 = require("../IconAndTitleLayout/styled");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(InlineCardResolvingView, _React$Component);
+
+  var _super = _createSuper(InlineCardResolvingView);
+
+  function InlineCardResolvingView() {
+    (0, _classCallCheck2.default)(this, InlineCardResolvingView);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(InlineCardResolvingView, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          url = _this$props.url,
+          onClick = _this$props.onClick,
+          isSelected = _this$props.isSelected,
+          inlinePreloaderStyle = _this$props.inlinePreloaderStyle,
+          _this$props$testId = _this$props.testId,
+          testId = _this$props$testId === void 0 ? 'inline-card-resolving-view' : _this$props$testId,
+          titleTextColor = _this$props.titleTextColor,
+          withoutHover = _this$props.withoutHover;
+
+      if (inlinePreloaderStyle === 'on-right-without-skeleton') {
+        return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+          withoutBackground: true,
+          withoutHover: withoutHover,
+          testId: testId,
+          onClick: onClick,
+          isSelected: isSelected
+        }, /*#__PURE__*/_react.default.createElement(_styled2.IconTitleWrapper, null, url, /*#__PURE__*/_react.default.createElement(_styled2.RightIconPositionWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.SpinnerWrapper, {
+          className: "inline-resolving-spinner"
+        }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+          size: 14
+        })))));
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+          testId: testId,
+          onClick: onClick,
+          isSelected: isSelected,
+          withoutHover: withoutHover
+        }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+          title: url,
+          titleTextColor: titleTextColor
+        }, /*#__PURE__*/_react.default.createElement(_styled.SpinnerWrapper, {
+          className: "inline-resolving-spinner"
+        }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+          size: 14
+        }))));
+      }
+    }
+  }]);
+  return InlineCardResolvingView;
+}(_react.default.Component);
+
+exports.InlineCardResolvingView = InlineCardResolvingView;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpinnerWrapper = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _styled2 = require("../IconAndTitleLayout/styled");
+
+var _templateObject;
+
+var SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  vertical-align: text-top;\n  margin-left: 2px;\n"])));
+exports.SpinnerWrapper = SpinnerWrapper;

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

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineCardUnauthorizedView = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("@atlaskit/media-ui/messages");
+
+var _Frame = require("../Frame");
+
+var _Icon = require("../Icon");
+
+var _IconAndTitleLayout = require("../IconAndTitleLayout");
+
+var _styled = require("../styled");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var FallbackUnauthorizedIcon = /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
+  label: "error",
+  size: "small",
+  primaryColor: _colors.R400
+}));
+
+var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(InlineCardUnauthorizedView, _React$Component);
+
+  var _super = _createSuper(InlineCardUnauthorizedView);
+
+  function InlineCardUnauthorizedView() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, InlineCardUnauthorizedView);
+
+    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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleConnectAccount", function (event) {
+      var onAuthorise = _this.props.onAuthorise;
+      event.preventDefault();
+      event.stopPropagation();
+      return onAuthorise();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMessage", function () {
+      var _this$props = _this.props,
+          onAuthorise = _this$props.onAuthorise,
+          url = _this$props.url;
+
+      var link = /*#__PURE__*/_react.default.createElement(_styled.LinkAppearance, null, url);
+
+      return !onAuthorise ? link : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, ' - ', /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+        spacing: "none",
+        appearance: "subtle-link",
+        component: _styled.IconStyledButton,
+        onClick: _this.handleConnectAccount,
+        testId: "button-connect-account"
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_link_account)));
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(InlineCardUnauthorizedView, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          url = _this$props2.url,
+          icon = _this$props2.icon,
+          onClick = _this$props2.onClick,
+          isSelected = _this$props2.isSelected,
+          _this$props2$testId = _this$props2.testId,
+          testId = _this$props2$testId === void 0 ? 'inline-card-unauthorized-view' : _this$props2$testId;
+      return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+        testId: testId,
+        link: url,
+        onClick: onClick,
+        isSelected: isSelected
+      }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+        icon: icon ? icon : FallbackUnauthorizedIcon,
+        title: this.renderMessage(),
+        titleColor: _colors.N500
+      }));
+    }
+  }]);
+  return InlineCardUnauthorizedView;
+}(_react.default.Component);
+
+exports.InlineCardUnauthorizedView = InlineCardUnauthorizedView;