@atlaskit/smart-card 26.9.16 → 26.9.18

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleWrapperClassName = exports.TitleWrapper = exports.RightIconPositionWrapper = exports.LozengeWrapper = 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;
+// TODO: remove this override behaviour for @atlaskit/icon-object
+var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 3px;\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\n  & > * > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\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: ", ";\n  user-select: none;\n  ", "\n  ", "\n"])), "var(--ds-space-025, 2px)", IconOverrides, IconObjectOverrides);
+
+// The main 'wrapping' element, title of the content.
+// NB: `white-space` adds little whitespace before wrapping.
+// NB: `word-break` line breaks as soon as an overflow takes place.
+exports.EmojiWrapper = EmojiWrapper;
+var IconTitleWrapper = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: pre-wrap;\n  word-break: break-all;\n  box-decoration-break: clone;\n  padding: ", " ", ";\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)");
+
+// 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  margin: 0 ", " 0 ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)");
+exports.LozengeWrapper = LozengeWrapper;
+var RightIconPositionWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-025, 2px)");
+
+// 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(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-050, 4px)");
+exports.IconPositionWrapper = IconPositionWrapper;
+var IconEmptyWrapper = _styled.default.span(_templateObject7 || (_templateObject7 = (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(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)([""])));
+exports.TitleWrapper = TitleWrapper;

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

@@ -0,0 +1,83 @@
+"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");
+var _index = require("../../HoverCard/index");
+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, {
+        testId: "inline-card-resolved-view-lozenge",
+        appearance: lozenge.appearance || 'default',
+        isBold: lozenge.isBold
+      }, lozenge.text));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        id = _this$props.id,
+        _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,
+        _this$props$showHover = _this$props.showHoverPreview,
+        showHoverPreview = _this$props$showHover === void 0 ? false : _this$props$showHover,
+        _this$props$showServe = _this$props.showServerActions,
+        showServerActions = _this$props$showServe === void 0 ? false : _this$props$showServe;
+      var inlineCardResolvedView = /*#__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());
+      if (showHoverPreview && link) {
+        return /*#__PURE__*/_react.default.createElement(_index.HoverCard, {
+          id: id,
+          showServerActions: showServerActions,
+          url: link
+        }, inlineCardResolvedView);
+      }
+      return inlineCardResolvedView;
+    }
+  }]);
+  return InlineCardResolvedView;
+}(_react.default.Component);
+exports.InlineCardResolvedView = InlineCardResolvedView;

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

@@ -0,0 +1,69 @@
+"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;
+      if (inlinePreloaderStyle === 'on-right-without-skeleton') {
+        return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+          withoutBackground: true,
+          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
+        }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+          link: url,
+          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/RedesignedInlineCard/ResolvingView/styled.js

@@ -0,0 +1,13 @@
+"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-bottom;\n  padding: 0px;\n"])));
+exports.SpinnerWrapper = SpinnerWrapper;

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

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineCardUnauthorizedView = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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 _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("../../../messages");
+var _Frame = require("../Frame");
+var _Icon = require("../Icon");
+var _IconAndTitleLayout = require("../IconAndTitleLayout");
+var _styled = require("../styled");
+var _HoverCard = require("../../HoverCard");
+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: "var(--ds-icon-danger, ".concat(_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), "frameRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleConnectAccount", function (event) {
+      var _this$props = _this.props,
+        analytics = _this$props.analytics,
+        extensionKey = _this$props.extensionKey,
+        onAuthorise = _this$props.onAuthorise;
+      event.preventDefault();
+      event.stopPropagation();
+      if (onAuthorise) {
+        analytics === null || analytics === void 0 ? void 0 : analytics.track.appAccountAuthStarted({
+          extensionKey: extensionKey
+        });
+      }
+      return onAuthorise();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderActionButton", function () {
+      var _this$props2 = _this.props,
+        onAuthorise = _this$props2.onAuthorise,
+        context = _this$props2.context;
+      var ActionButton = (0, _withFrameStyleControl.default)(_customThemeButton.default, _this.frameRef);
+      return onAuthorise ? /*#__PURE__*/_react.default.createElement(ActionButton, {
+        spacing: "none",
+        component: _styled.IconStyledButton,
+        onClick: _this.handleConnectAccount,
+        testId: "button-connect-account"
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {
+        values: {
+          context: context
+        }
+      }))) : undefined;
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(InlineCardUnauthorizedView, [{
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        url = _this$props3.url,
+        icon = _this$props3.icon,
+        onClick = _this$props3.onClick,
+        isSelected = _this$props3.isSelected,
+        _this$props3$testId = _this$props3.testId,
+        testId = _this$props3$testId === void 0 ? 'inline-card-unauthorized-view' : _this$props3$testId,
+        _this$props3$showAuth = _this$props3.showAuthTooltip,
+        showAuthTooltip = _this$props3$showAuth === void 0 ? false : _this$props3$showAuth;
+      var inlineCardUnauthenticatedView = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+        testId: testId,
+        isSelected: isSelected,
+        ref: this.frameRef
+      }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+        icon: icon ? icon : FallbackUnauthorizedIcon,
+        title: url,
+        link: url,
+        onClick: onClick,
+        titleColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
+      }), this.renderActionButton());
+      if (showAuthTooltip) {
+        return /*#__PURE__*/_react.default.createElement(_HoverCard.HoverCard, {
+          url: url,
+          onAuthorize: this.props.onAuthorise,
+          id: this.props.id
+        }, inlineCardUnauthenticatedView);
+      }
+      return inlineCardUnauthenticatedView;
+    }
+  }]);
+  return InlineCardUnauthorizedView;
+}(_react.default.Component);
+exports.InlineCardUnauthorizedView = InlineCardUnauthorizedView;

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

@@ -0,0 +1,183 @@
+"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 = 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'
+      });
+  }
+};
+exports.InlineCard = InlineCard;

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

@@ -0,0 +1,31 @@
+"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
+// There is a workaround for negative token spacing suggested by the design system team. calc(${token} * -1)
+var IconStyledButton = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &&& {\n    text-align: initial;\n    display: inline;\n    vertical-align: baseline;\n    border-radius: ", ";\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n    padding: ", " ", ";\n    background-clip: padding-box;\n    box-decoration-break: clone;\n  }\n  > span {\n    display: inline;\n    overflow: initial;\n    text-overflow: initial;\n    white-space: initial;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])), "var(--ds-border-radius-100, 2px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)");
+exports.IconStyledButton = IconStyledButton;
+var NoLinkAppearance = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-left: ", ";\n"])), (0, _components.themed)({
+  light: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  dark: "var(--ds-text-subtlest, ".concat(LINK_COLOR_DARK, ")")
+}), "var(--ds-space-050, 4px)");
+exports.NoLinkAppearance = NoLinkAppearance;
+var LowercaseAppearance = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: lowercase;\n"])));
+exports.LowercaseAppearance = LowercaseAppearance;
+var LinkAppearance = _styled.default.a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    text-decoration: none;\n  }\n"])), (0, _components.themed)({
+  light: "var(--ds-link, ".concat(_colors.B400, ")"),
+  dark: "var(--ds-link, ".concat(LINK_COLOR_DARK, ")")
+}));
+exports.LinkAppearance = LinkAppearance;

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

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

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _components = require("@atlaskit/theme/components");
+var _colors = require("@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.
+ */
+var _default = function _default(Button, frameRef) {
+  return function (props) {
+    var setBorderStyle = function setBorderStyle() {
+      var borderColor = (0, _components.themed)({
+        light: "".concat("var(--ds-border-input, ".concat(_colors.N40, ")")),
+        dark: "".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
+      })();
+      var frameNode = frameRef.current;
+      if (frameNode) {
+        frameNode.style.borderColor = borderColor;
+      }
+    };
+    var removeBorderStyle = function removeBorderStyle() {
+      var frameNode = frameRef.current;
+      if (frameNode) {
+        frameNode.removeAttribute('style');
+      }
+    };
+    return /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({}, props, {
+      onMouseEnter: setBorderStyle,
+      onMouseLeave: removeBorderStyle
+    }));
+  };
+};
+exports.default = _default;

package/dist/es2019/version.json

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

package/dist/es2019/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';
@@ -192,7 +194,7 @@ function Component({
   }
   switch (appearance) {
     case 'inline':
-      return /*#__PURE__*/React.createElement(InlineCard, {
+      const inlineProps = {
         analytics: analytics,
         id: id,
         url: url,
@@ -208,7 +210,8 @@ function Component({
         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/es2019/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -5,11 +5,12 @@ import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 const MAX_COUNT = 4;
 const getStyles = size => {
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   const styles = css`
     display: inline-flex;
+    ul,
     ul {
-      margin-right: 8px;
+      margin-right: 0.5rem;
+      margin-top: 0;
     }
   `;
   switch (size) {