@atlaskit/smart-card 23.14.0 → 23.14.2

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

@@ -1,79 +1,48 @@
 "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");
-
 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), "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)
@@ -82,18 +51,15 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
       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], {
@@ -102,14 +68,12 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
           }
         }));
       }
-
       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), "renderRightSide", function () {
       var onAuthorise = _this.props.onAuthorise;
-
       if (_this.state.hasRequestAccessContextMessage) {
         return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
           spacing: "none",
@@ -120,7 +84,6 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
           role: "button"
         }, _this.renderForbiddenAccessMessage());
       }
-
       if (onAuthorise) {
         return /*#__PURE__*/_react.default.createElement(_styled2.LozengeBlockWrapper, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
           spacing: "none",
@@ -133,22 +96,20 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
           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;
+        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
@@ -165,5 +126,4 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
   }]);
   return InlineCardForbiddenView;
 }(_react.default.Component);
-
 exports.InlineCardForbiddenView = InlineCardForbiddenView;

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

@@ -1,30 +1,23 @@
 "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");
-
 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 = function Frame(props) {
   var isSelected = props.isSelected,
-      children = props.children,
-      onClick = props.onClick,
-      link = props.link,
-      withoutBackground = props.withoutBackground,
-      testId = props.testId,
-      className = props.className;
+    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();
@@ -36,18 +29,19 @@ var Frame = function Frame(props) {
     if (event.key !== ' ' && event.key !== 'Enter') {
       return;
     }
-
     if (onClick) {
       event.preventDefault();
       event.stopPropagation();
       onClick(event);
     }
   }, [onClick]);
-  var isInteractive = Boolean(onClick); // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
+  var isInteractive = Boolean(onClick);
 
-  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
+  // 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,
@@ -62,5 +56,4 @@ var Frame = function Frame(props) {
     className: className
   }, children);
 };
-
 exports.Frame = Frame;

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

@@ -1,30 +1,20 @@
 "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 _constants = require("@atlaskit/theme/constants");
-
 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");
-
 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, ")"),
@@ -37,16 +27,15 @@ var isInteractive = function isInteractive(_ref) {
     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:
   ------------------------------------
@@ -59,8 +48,6 @@ var isSelected = function isSelected(_ref2) {
 // 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: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ".concat(props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '', "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ").concat((0, _constants.borderRadius)(), "px;\n  color: ").concat((0, _components.themed)({
     light: "var(--ds-link, ".concat(_colors.B400, ")"),
@@ -73,13 +60,9 @@ var baseWrapperStyle = function baseWrapperStyle(props) {
     dark: "box-shadow: ".concat("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(_colors.DN50A, ", 0 0 1px 1px ").concat(_colors.DN40A), ")"), ";")
   })(props), "\n  ").concat(isSelected(props), ";\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/InlineCard/Icon.js

@@ -1,37 +1,28 @@
 "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 _react = require("@emotion/react");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var placeholderShimmer = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-position: -20px 0;\n  }\n\n  100% {\n    background-position: 20px 0;\n  }\n"])));
 
-var placeholderShimmer = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-position: -20px 0;\n  }\n\n  100% {\n    background-position: 20px 0;\n  }\n"]))); // TODO: Figure out a more scalable/responsive solution
+// TODO: Figure out a more scalable/responsive solution
 // for vertical alignment.
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
+var Icon = _styled.default.img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
 
-var Icon = _styled.default.img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"]))); // Used for 'untrue' icons which claim to be 16x16 but
+// Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
-
-
 exports.Icon = Icon;
-
 var AKIconWrapper = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: -2px;\n"])));
-
 exports.AKIconWrapper = AKIconWrapper;
-
 var Shimmer = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: ", ";\n  background-image: linear-gradient(\n    to right,\n    transparent 0%,\n    ", " 20%,\n    transparent 40%,\n    transparent 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 40px 14px;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), "var(--ds-skeleton-subtle, #f6f7f8)", "var(--ds-skeleton, #edeef1)", placeholderShimmer);
-
 exports.Shimmer = Shimmer;

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

@@ -1,60 +1,37 @@
 "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();
@@ -63,11 +40,9 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
     });
     (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();
@@ -76,33 +51,27 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-
   (0, _createClass2.default)(IconAndTitleLayout, [{
     key: "renderAtlaskitIcon",
     value: function renderAtlaskitIcon() {
       var _this$props = this.props,
-          icon = _this$props.icon,
-          emoji = _this$props.emoji;
-
+        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, {
@@ -120,11 +89,9 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
     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",
@@ -139,11 +106,9 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
       // - 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;
@@ -152,22 +117,20 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
     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;
-
+        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(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconTitleWrapper, {
         style: {
           color: titleColor
@@ -182,7 +145,6 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
   }]);
   return IconAndTitleLayout;
 }(_react.default.Component);
-
 exports.IconAndTitleLayout = IconAndTitleLayout;
 (0, _defineProperty2.default)(IconAndTitleLayout, "defaultProps", {
   rightSideSpacer: true

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

@@ -1,76 +1,59 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TitleWrapperClassName = exports.TitleWrapper = exports.RightIconPositionWrapper = exports.LozengeWrapper = exports.LozengeBlockWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconOverrides = exports.IconObjectOverrides = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
 // TODO: remove this override behaviour for @atlaskit/icon-object
-var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    line-height: 14px;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n"; // TODO: remove this override behaviour for @atlaskit/icon
-
+var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    line-height: 14px;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+// TODO: remove this override behaviour for @atlaskit/icon
 exports.IconObjectOverrides = IconObjectOverrides;
-var IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n"; // Wraps all icons represented in Inline Links. Icons have three sources/types:
+var IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+
+// Wraps all icons represented in Inline Links. Icons have three sources/types:
 // - JSON-LD: from the generator.icon property coming back from ORS.
 // - @atlaskit/icon: for lock icons, unauthorized, etc.
 // - @atlaskit/icon-object: for object icons, e.g. repository, branch, etc.
 // NB: the first set of overrides style icons imported from @atlaskit/icon-object correctly.
 // NB: the second set of overrides style icons imported from @atlaskit/icon correctly.
-
 exports.IconOverrides = IconOverrides;
+var IconWrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
 
-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
-
-
+// Wraps all emoji in Inline Links similar to icon
 exports.IconWrapper = IconWrapper;
+var EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
 
-var EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides); // The main 'wrapping' element, title of the content.
+// 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"])));
 
-var IconTitleWrapper = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: pre-wrap;\n  word-break: break-all;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
-
-
+// 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"]))); // TODO: Replace overrides with proper AtlasKit solution.
-
-
+var LozengeWrapper = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: 1px;\n"])));
+// TODO: Replace overrides with proper AtlasKit solution.
 exports.LozengeWrapper = LozengeWrapper;
-
 var LozengeBlockWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > span {\n    margin-left: 4px;\n  }\n"])));
-
 exports.LozengeBlockWrapper = LozengeBlockWrapper;
+var RightIconPositionWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 2px;\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
 
-var RightIconPositionWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 2px;\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"]))); // The following components are used to absolutely position icons in the vertical center.
+// The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
-
-
 exports.RightIconPositionWrapper = RightIconPositionWrapper;
-
 var IconPositionWrapper = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
-
 exports.IconPositionWrapper = IconPositionWrapper;
+var IconEmptyWrapper = _styled.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"])));
 
-var IconEmptyWrapper = _styled.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"]))); // With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
+// With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
 // To achieve same result we use classname instead.
-
-
 exports.IconEmptyWrapper = IconEmptyWrapper;
 var TitleWrapperClassName = 'smart-link-title-wrapper';
 exports.TitleWrapperClassName = TitleWrapperClassName;
-
 var TitleWrapper = _styled.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)([""])));
-
 exports.TitleWrapper = TitleWrapper;