@atlaskit/smart-card 26.9.16 → 26.9.17

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.9.17
+
+### Patch Changes
+
+- [`936fc621c48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/936fc621c48) - [ux] Design refresh for the Inline Smart Links.
+
 ## 26.9.16
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -15,6 +15,8 @@ var _helpers = require("../../state/helpers");
 var _state = require("../../state");
 var _BlockCard = require("../BlockCard");
 var _InlineCard = require("../InlineCard");
+var _RedesignedInlineCard = require("../RedesignedInlineCard");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _EmbedCard = require("../EmbedCard");
 var _flexible = require("../../utils/flexible");
 var _FlexibleCard = _interopRequireDefault(require("../FlexibleCard"));
@@ -205,7 +207,7 @@ function Component(_ref) {
   }
   switch (appearance) {
     case 'inline':
-      return /*#__PURE__*/_react.default.createElement(_InlineCard.InlineCard, {
+      var inlineProps = {
         analytics: analytics,
         id: id,
         url: url,
@@ -221,7 +223,8 @@ function Component(_ref) {
         showHoverPreview: showHoverPreview,
         showAuthTooltip: showAuthTooltip,
         showServerActions: showServerActions
-      });
+      };
+      return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-inline-card-refreshed-design') ? /*#__PURE__*/_react.default.createElement(_RedesignedInlineCard.InlineCard, inlineProps) : /*#__PURE__*/_react.default.createElement(_InlineCard.InlineCard, inlineProps);
     case 'block':
       return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCard, {
         id: id,

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

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

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

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineCardErroredView = 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 _react = _interopRequireDefault(require("react"));
+var _colors = require("@atlaskit/theme/colors");
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _Frame = require("../Frame");
+var _IconAndTitleLayout = require("../IconAndTitleLayout");
+var _Icon = require("../Icon");
+var _messages = require("../../../messages");
+var _reactIntlNext = require("react-intl-next");
+var _styled = require("../styled");
+var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
+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 InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(InlineCardErroredView, _React$Component);
+  var _super = _createSuper(InlineCardErroredView);
+  function InlineCardErroredView() {
+    var _this;
+    (0, _classCallCheck2.default)(this, InlineCardErroredView);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "frameRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRetry", function (event) {
+      var onRetry = _this.props.onRetry;
+      if (onRetry) {
+        event.preventDefault();
+        event.stopPropagation();
+        onRetry();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderActionButton", function () {
+      var onRetry = _this.props.onRetry;
+      var ActionButton = (0, _withFrameStyleControl.default)(_customThemeButton.default, _this.frameRef);
+      return onRetry && /*#__PURE__*/_react.default.createElement(ActionButton, {
+        spacing: "none",
+        component: _styled.IconStyledButton,
+        onClick: _this.handleRetry,
+        role: "button"
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again));
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(InlineCardErroredView, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        url = _this$props.url,
+        onClick = _this$props.onClick,
+        isSelected = _this$props.isSelected,
+        _this$props$testId = _this$props.testId,
+        testId = _this$props$testId === void 0 ? 'inline-card-errored-view' : _this$props$testId,
+        icon = _this$props.icon,
+        message = _this$props.message;
+      return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+        testId: testId,
+        isSelected: isSelected,
+        ref: this.frameRef
+      }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+        icon: icon || /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_error.default, {
+          label: "error",
+          size: "small",
+          primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
+          testId: "errored-view-default-icon"
+        })),
+        link: url,
+        title: url,
+        onClick: onClick,
+        rightSide: message
+      }), this.renderActionButton());
+    }
+  }]);
+  return InlineCardErroredView;
+}(_react.default.Component);
+exports.InlineCardErroredView = InlineCardErroredView;

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

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineCardForbiddenView = 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 _react = _interopRequireDefault(require("react"));
+var _colors = require("@atlaskit/theme/colors");
+var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _Frame = require("../Frame");
+var _IconAndTitleLayout = require("../IconAndTitleLayout");
+var _Icon = require("../Icon");
+var _messages = require("../../../messages");
+var _reactIntlNext = require("react-intl-next");
+var _styled = require("../styled");
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _styled2 = require("../IconAndTitleLayout/styled");
+var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
+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 FallbackForbiddenIcon = /*#__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, ")"),
+  testId: "forbidden-view-fallback-icon"
+}));
+var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(InlineCardForbiddenView, _React$Component);
+  var _super = _createSuper(InlineCardForbiddenView);
+  function InlineCardForbiddenView() {
+    var _this$props, _this$props$requestAc;
+    var _this;
+    (0, _classCallCheck2.default)(this, InlineCardForbiddenView);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "frameRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      hasRequestAccessContextMessage: !!((_this$props = _this.props) !== null && _this$props !== void 0 && (_this$props$requestAc = _this$props.requestAccessContext) !== null && _this$props$requestAc !== void 0 && _this$props$requestAc.callToActionMessageKey)
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRetry", function (event) {
+      var onAuthorise = _this.props.onAuthorise;
+      event.preventDefault();
+      event.stopPropagation();
+      if (onAuthorise) {
+        onAuthorise();
+      } else {
+        var _this$props2, _this$props2$requestA, _this$props2$requestA2;
+        (_this$props2 = _this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$requestA = _this$props2.requestAccessContext) === null || _this$props2$requestA === void 0 ? void 0 : (_this$props2$requestA2 = _this$props2$requestA.action) === null || _this$props2$requestA2 === void 0 ? void 0 : _this$props2$requestA2.promise();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderForbiddenAccessMessage", function () {
+      var _this$props3, _this$props3$requestA;
+      if ((_this$props3 = _this.props) !== null && _this$props3 !== void 0 && (_this$props3$requestA = _this$props3.requestAccessContext) !== null && _this$props3$requestA !== void 0 && _this$props3$requestA.callToActionMessageKey) {
+        var callToActionMessageKey = _this.props.requestAccessContext.callToActionMessageKey;
+        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[callToActionMessageKey], {
+          values: {
+            context: _this.props.context
+          }
+        }));
+      }
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.invalid_permissions, function (formattedMessage) {
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, formattedMessage);
+      }));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderActionButton", function () {
+      var onAuthorise = _this.props.onAuthorise;
+      var ActionButton = (0, _withFrameStyleControl.default)(_customThemeButton.default, _this.frameRef);
+      if (_this.state.hasRequestAccessContextMessage) {
+        return /*#__PURE__*/_react.default.createElement(ActionButton, {
+          spacing: "none",
+          onClick: _this.handleRetry,
+          component: _styled.IconStyledButton,
+          testId: "button-connect-other-account",
+          role: "button"
+        }, _this.renderForbiddenAccessMessage());
+      }
+      if (onAuthorise) {
+        return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+          spacing: "none",
+          onClick: _this.handleRetry,
+          appearance: "subtle-link",
+          testId: "button-connect-other-account",
+          role: "button"
+        }, /*#__PURE__*/_react.default.createElement(_styled2.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+          appearance: 'moved'
+        }, _this.renderForbiddenAccessMessage())));
+      }
+      return null;
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(InlineCardForbiddenView, [{
+    key: "render",
+    value: function render() {
+      var _this$props4 = this.props,
+        url = _this$props4.url,
+        icon = _this$props4.icon,
+        onClick = _this$props4.onClick,
+        isSelected = _this$props4.isSelected,
+        _this$props4$testId = _this$props4.testId,
+        testId = _this$props4$testId === void 0 ? 'inline-card-forbidden-view' : _this$props4$testId;
+      return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+        testId: testId,
+        isSelected: isSelected,
+        ref: this.frameRef
+      }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+        icon: icon ? icon : FallbackForbiddenIcon,
+        link: url,
+        title: url,
+        onClick: onClick,
+        titleColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
+      }), this.renderActionButton());
+    }
+  }]);
+  return InlineCardForbiddenView;
+}(_react.default.Component);
+exports.InlineCardForbiddenView = InlineCardForbiddenView;

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

@@ -0,0 +1,63 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Frame = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _components = require("@atlaskit/theme/components");
+var _styled = require("./styled");
+var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var Frame = /*#__PURE__*/(0, _react.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 = (0, _react.useCallback)(function (event) {
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+  var handleKeyPress = (0, _react.useCallback)(function (event) {
+    if (event.key !== ' ' && event.key !== 'Enter') {
+      return;
+    }
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+  var handleMouseDown = (0, _useLinkClicked.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 ? _styled.WrapperAnchor : _styled.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.default.createElement(Wrapper, {
+    theme: (0, _components.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);
+});
+exports.Frame = Frame;

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WrapperSpan = exports.WrapperAnchor = 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;
+var BACKGROUND_COLOR_DARK = '#262B31';
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat("var(--ds-border-selected, ".concat(_colors.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(_colors.N40, ")"), ";\n  }\n");
+var isInteractive = function isInteractive(_ref) {
+  var isInteractive = _ref.isInteractive;
+  if (isInteractive) {
+    return "\n      :hover {\n        background-color: ".concat((0, _components.themed)({
+      light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"),
+      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(BACKGROUND_COLOR_DARK, ")")
+    }), ";\n      }\n      :active {\n        background-color: ").concat((0, _components.themed)({
+      light: "var(--ds-background-selected, ".concat(_colors.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((0, _components.themed)({
+    light: "var(--ds-link, ".concat(_colors.B400, ")"),
+    dark: "var(--ds-link, #4794FF)"
+  })(props), ";\n\n  background-color: ").concat(props.withoutBackground ? '' : (0, _components.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 ? '' : (0, _components.themed)({
+    light: "border: 1px solid ".concat("var(--ds-border-input, ".concat(_colors.N40, ")"), ";"),
+    dark: "border: 1px solid ".concat("var(--ds-border-input, ".concat(_colors.N500, ")"), ";")
+  })(props), "\n  &:hover {\n    ").concat((0, _components.themed)({
+    light: "border-color: ".concat("var(--ds-border-accent-blue, ".concat(_colors.B200, ")"), ";"),
+    dark: "border-color:  ".concat("var(--ds-border-accent-blue, ".concat(_colors.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");
+};
+var WrapperAnchor = _styled.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), baseWrapperStyle, isInteractive);
+exports.WrapperAnchor = WrapperAnchor;
+WrapperAnchor.displayName = 'WrapperAnchor';
+var WrapperSpan = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), baseWrapperStyle);
+exports.WrapperSpan = WrapperSpan;
+WrapperSpan.displayName = 'WrapperSpan';

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

@@ -0,0 +1,43 @@
+"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 _linkingCommon = require("@atlaskit/linking-common");
+var _react = _interopRequireDefault(require("react"));
+var _templateObject, _templateObject2;
+// 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(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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.
+exports.Icon = Icon;
+var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-025, 2px)");
+exports.AKIconWrapper = AKIconWrapper;
+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.default.createElement(_linkingCommon.Skeleton, {
+    width: 14,
+    height: 14,
+    borderRadius: 2,
+    testId: testId,
+    style: skeletonCustomStyles
+  });
+};
+exports.Shimmer = Shimmer;

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

@@ -0,0 +1,151 @@
+"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 _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 _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"));
+var _styled2 = 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 IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(IconAndTitleLayout, _React$Component);
+  var _super = _createSuper(IconAndTitleLayout);
+  function IconAndTitleLayout() {
+    var _this;
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (event) {
+      var onClick = _this.props.onClick;
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
+  }
+  (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, {
+          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,
+        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.default.createElement(_react.default.Fragment, null, /*#__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 /*#__PURE__*/_react.default.createElement(_styled.IconTitleWrapper, {
+        style: {
+          color: titleColor
+        },
+        "data-testid": testId
+      }, link ? /*#__PURE__*/_react.default.createElement(_styled2.LinkAppearance, {
+        href: link,
+        onClick: this.handleClick,
+        onKeyPress: this.handleKeyPress
+      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_styled2.NoLinkAppearance, null, rightSide) : null);
+    }
+  }]);
+  return IconAndTitleLayout;
+}(_react.default.Component);
+exports.IconAndTitleLayout = IconAndTitleLayout;
+(0, _defineProperty2.default)(IconAndTitleLayout, "defaultProps", {
+  rightSideSpacer: true
+});