@atlaskit/smart-card 26.9.16 → 26.9.18

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

@@ -0,0 +1,53 @@
+import React, { useCallback, forwardRef } from 'react';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { WrapperAnchor, WrapperSpan } from './styled';
+import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
+export var Frame = /*#__PURE__*/forwardRef(function (props, ref) {
+  var isSelected = props.isSelected,
+    children = props.children,
+    onClick = props.onClick,
+    link = props.link,
+    withoutBackground = props.withoutBackground,
+    testId = props.testId,
+    className = props.className;
+  var handleClick = useCallback(function (event) {
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+  var handleKeyPress = useCallback(function (event) {
+    if (event.key !== ' ' && event.key !== 'Enter') {
+      return;
+    }
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+  var handleMouseDown = useMouseDownEvent();
+  var isInteractive = Boolean(onClick);
+
+  // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
+  var Wrapper = link || onClick ? WrapperAnchor : WrapperSpan;
+
+  // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
+  //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    theme: useGlobalTheme(),
+    href: link,
+    withoutBackground: withoutBackground,
+    isSelected: isSelected,
+    isInteractive: isInteractive,
+    tabIndex: isInteractive ? 0 : undefined,
+    role: isInteractive ? 'button' : undefined,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    onKeyPress: handleKeyPress,
+    "data-testid": testId,
+    className: className,
+    ref: ref
+  }, children);
+});

package/dist/esm/view/RedesignedInlineCard/Frame/styled.js

@@ -0,0 +1,61 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import styled from '@emotion/styled';
+import { B50, B100, B200, B400, N20, N40, N500 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+var BACKGROUND_COLOR_DARK = '#262B31';
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat("var(--ds-border-selected, ".concat(B100, ")"), ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n  &:hover {\n    border: 1px solid ", "var(--ds-border-input, ".concat(N40, ")"), ";\n  }\n");
+var isInteractive = function isInteractive(_ref) {
+  var isInteractive = _ref.isInteractive;
+  if (isInteractive) {
+    return "\n      :hover {\n        background-color: ".concat(themed({
+      light: "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"),
+      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(BACKGROUND_COLOR_DARK, ")")
+    }), ";\n      }\n      :active {\n        background-color: ").concat(themed({
+      light: "var(--ds-background-selected, ".concat(B50, ")"),
+      dark: "var(--ds-background-selected, ".concat(BACKGROUND_COLOR_DARK, ")")
+    }), ";\n      }\n      :focus {\n        ").concat(selected, "\n      }\n    ");
+  } else {
+    return '';
+  }
+};
+var isSelected = function isSelected(_ref2) {
+  var isSelected = _ref2.isSelected;
+  if (isSelected) {
+    return selected;
+  } else {
+    return 'user-select: text';
+  }
+};
+
+/*
+  Inline smart cards should have the following layout:
+  ------------------------------------
+  | icon | title | action OR lozenge |
+  ------------------------------------
+  The aim is to ensure (1) all children are
+  in line with each other, (2) are vertically
+  centered.
+*/
+// NB: `padding` consistent with @mentions.
+// NB: `display: inline` required for `box-decoration-break` to work.
+// NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
+var baseWrapperStyle = function baseWrapperStyle(props) {
+  return "\n  line-height: 22px;\n  padding: 2px 0px;\n  ".concat(props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '', "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "var(--ds-border-radius-100, 3px)", ";\n  color: ").concat(themed({
+    light: "var(--ds-link, ".concat(B400, ")"),
+    dark: "var(--ds-link, #4794FF)"
+  })(props), ";\n\n  background-color: ").concat(props.withoutBackground ? '' : themed({
+    light: "var(--ds-surface-raised, white)",
+    dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
+  })(props), ";\n\n  ").concat(isSelected(props), ";\n\n  ").concat(props.withoutBackground ? '' : themed({
+    light: "border: 1px solid ".concat("var(--ds-border-input, ".concat(N40, ")"), ";"),
+    dark: "border: 1px solid ".concat("var(--ds-border-input, ".concat(N500, ")"), ";")
+  })(props), "\n  &:hover {\n    ").concat(themed({
+    light: "border-color: ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";"),
+    dark: "border-color:  ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";")
+  })(props), "\n  }\n  &, :hover, :focus, :active {\n    ").concat(props.withoutBackground ? '' : 'text-decoration: none;', "\n  }\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n");
+};
+export var WrapperAnchor = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), baseWrapperStyle, isInteractive);
+WrapperAnchor.displayName = 'WrapperAnchor';
+export var WrapperSpan = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), baseWrapperStyle);
+WrapperSpan.displayName = 'WrapperSpan';

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

@@ -0,0 +1,34 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import styled from '@emotion/styled';
+import { Skeleton } from '@atlaskit/linking-common';
+import React from 'react';
+
+// TODO: Figure out a more scalable/responsive solution
+// for vertical alignment.
+// Current rationale: vertically positioned at the top of
+// the smart card container (when set to 0). Offset this
+// to position it with appropriate whitespace from the top.
+export var Icon = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 14px;\n  width: 14px;\n  margin-right: ", ";\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), "var(--ds-space-050, 4px)");
+
+// Used for 'untrue' icons which claim to be 16x16 but
+// are less than that in height/width.
+// TODO: Replace this override with proper AtlasKit solution.
+export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-025, 2px)");
+export var Shimmer = function Shimmer(_ref) {
+  var testId = _ref.testId;
+  var skeletonCustomStyles = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    marginRight: "var(--ds-space-050, 4px)"
+  };
+  return /*#__PURE__*/React.createElement(Skeleton, {
+    width: 14,
+    height: 14,
+    borderRadius: 2,
+    testId: testId,
+    style: skeletonCustomStyles
+  });
+};

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

@@ -0,0 +1,143 @@
+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 ImageLoader from 'react-render-image';
+import { Icon, Shimmer } from '../Icon';
+import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper, TitleWrapperClassName } from './styled';
+import LinkIcon from '@atlaskit/icon/glyph/link';
+import { LinkAppearance, NoLinkAppearance } from '../styled';
+export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
+  _inherits(IconAndTitleLayout, _React$Component);
+  var _super = _createSuper(IconAndTitleLayout);
+  function IconAndTitleLayout() {
+    var _this;
+    _classCallCheck(this, IconAndTitleLayout);
+    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), "handleClick", function (event) {
+      var onClick = _this.props.onClick;
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleKeyPress", function (event) {
+      var onClick = _this.props.onClick;
+      if (event.key !== ' ' && event.key !== 'Enter') {
+        return;
+      }
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+    return _this;
+  }
+  _createClass(IconAndTitleLayout, [{
+    key: "renderAtlaskitIcon",
+    value: function renderAtlaskitIcon() {
+      var _this$props = this.props,
+        icon = _this$props.icon,
+        emoji = _this$props.emoji;
+      if (emoji) {
+        return /*#__PURE__*/React.createElement(EmojiWrapper, null, emoji);
+      }
+      if (!icon || typeof icon === 'string') {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(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.createElement(ImageLoader, {
+        src: url,
+        loaded: /*#__PURE__*/React.createElement(Icon, {
+          className: "smart-link-icon",
+          src: url,
+          "data-testid": "".concat(testId, "-image")
+        }),
+        errored: errored,
+        loading: /*#__PURE__*/React.createElement(Shimmer, {
+          testId: "".concat(testId, "-loading")
+        })
+      });
+    }
+  }, {
+    key: "renderIconPlaceholder",
+    value: function renderIconPlaceholder(testId) {
+      var defaultIcon = this.props.defaultIcon;
+      if (defaultIcon) {
+        return /*#__PURE__*/React.createElement(IconWrapper, null, defaultIcon);
+      }
+      return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(LinkIcon, {
+        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,
+        link = _this$props2.link,
+        rightSide = _this$props2.rightSide,
+        _this$props2$testId = _this$props2.testId,
+        testId = _this$props2$testId === void 0 ? 'inline-card-icon-and-title' : _this$props2$testId;
+      var titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, {
+        style: {
+          color: titleTextColor
+        },
+        className: TitleWrapperClassName
+      }, title));
+      return /*#__PURE__*/React.createElement(IconTitleWrapper, {
+        style: {
+          color: titleColor
+        },
+        "data-testid": testId
+      }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
+        href: link,
+        onClick: this.handleClick,
+        onKeyPress: this.handleKeyPress
+      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, rightSide) : null);
+    }
+  }]);
+  return IconAndTitleLayout;
+}(React.Component);
+_defineProperty(IconAndTitleLayout, "defaultProps", {
+  rightSideSpacer: true
+});

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

@@ -0,0 +1,38 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+import styled from '@emotion/styled';
+// TODO: remove this override behaviour for @atlaskit/icon-object
+export 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
+export 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.
+export var IconWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
+
+// Wraps all emoji in Inline Links similar to icon
+export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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.
+export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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.
+export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n  margin: 0 ", " 0 ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)");
+export var RightIconPositionWrapper = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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.
+export var IconPositionWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-050, 4px)");
+export var IconEmptyWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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.
+export var TitleWrapperClassName = 'smart-link-title-wrapper';
+export var TitleWrapper = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([""])));

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

@@ -0,0 +1,75 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+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 { Frame } from '../Frame';
+import Lozenge from '@atlaskit/lozenge';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { LozengeWrapper } from '../IconAndTitleLayout/styled';
+import { HoverCard } from '../../HoverCard/index';
+export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
+  _inherits(InlineCardResolvedView, _React$Component);
+  var _super = _createSuper(InlineCardResolvedView);
+  function InlineCardResolvedView() {
+    _classCallCheck(this, InlineCardResolvedView);
+    return _super.apply(this, arguments);
+  }
+  _createClass(InlineCardResolvedView, [{
+    key: "renderLozenge",
+    value: function renderLozenge() {
+      var lozenge = this.props.lozenge;
+      if (!lozenge) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+        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.createElement(Frame, {
+        testId: testId,
+        link: link,
+        isSelected: isSelected,
+        onClick: onClick
+      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+        emoji: titlePrefix,
+        icon: icon,
+        title: title,
+        titleTextColor: titleTextColor
+      }), this.renderLozenge());
+      if (showHoverPreview && link) {
+        return /*#__PURE__*/React.createElement(HoverCard, {
+          id: id,
+          showServerActions: showServerActions,
+          url: link
+        }, inlineCardResolvedView);
+      }
+      return inlineCardResolvedView;
+    }
+  }]);
+  return InlineCardResolvedView;
+}(React.Component);

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

@@ -0,0 +1,61 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+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 { Frame } from '../Frame';
+import Spinner from '@atlaskit/spinner';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { SpinnerWrapper } from './styled';
+import { IconTitleWrapper, RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
+export var InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
+  _inherits(InlineCardResolvingView, _React$Component);
+  var _super = _createSuper(InlineCardResolvingView);
+  function InlineCardResolvingView() {
+    _classCallCheck(this, InlineCardResolvingView);
+    return _super.apply(this, arguments);
+  }
+  _createClass(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.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
+        }))));
+      }
+    }
+  }]);
+  return InlineCardResolvingView;
+}(React.Component);

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

@@ -0,0 +1,5 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import styled from '@emotion/styled';
+import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
+export var SpinnerWrapper = styled(IconTitleWrapper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  vertical-align: text-bottom;\n  padding: 0px;\n"])));

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

@@ -0,0 +1,105 @@
+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 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';
+var FallbackUnauthorizedIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
+  label: "error",
+  size: "small",
+  primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")
+}));
+export var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
+  _inherits(InlineCardUnauthorizedView, _React$Component);
+  var _super = _createSuper(InlineCardUnauthorizedView);
+  function InlineCardUnauthorizedView() {
+    var _this;
+    _classCallCheck(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));
+    _defineProperty(_assertThisInitialized(_this), "frameRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_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();
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderActionButton", function () {
+      var _this$props2 = _this.props,
+        onAuthorise = _this$props2.onAuthorise,
+        context = _this$props2.context;
+      var 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: context
+        }
+      }))) : undefined;
+    });
+    return _this;
+  }
+  _createClass(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.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, ".concat(N500, ")")
+      }), this.renderActionButton());
+      if (showAuthTooltip) {
+        return /*#__PURE__*/React.createElement(HoverCard, {
+          url: url,
+          onAuthorize: this.props.onAuthorise,
+          id: this.props.id
+        }, inlineCardUnauthenticatedView);
+      }
+      return inlineCardUnauthenticatedView;
+    }
+  }]);
+  return InlineCardUnauthorizedView;
+}(React.Component);