@atlaskit/smart-card 23.14.0 → 23.14.2

package/dist/esm/view/HoverCard/utils.js

@@ -1,14 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { ElementName } from '../../constants';
 export var getSimulatedMetadata = function getSimulatedMetadata() {
   var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var types = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
   switch (extensionKey) {
     case 'bitbucket-object-provider':
     case 'native-bitbucket-object-provider':
@@ -21,7 +17,6 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
           }
         };
       }
-
       return {
         metadata: {
           primary: [ElementName.ModifiedOn, ElementName.CreatedBy],
@@ -29,7 +24,6 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
           subtitle: []
         }
       };
-
     case 'confluence-object-provider':
       return {
         metadata: {
@@ -38,7 +32,6 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
           subtitle: []
         }
       };
-
     case 'jira-object-provider':
       return {
         metadata: {
@@ -47,7 +40,6 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
           subtitle: []
         }
       };
-
     case 'trello-object-provider':
       return {
         metadata: {
@@ -56,7 +48,6 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
           subtitle: []
         }
       };
-
     case 'watermelon-object-provider':
       if (types.includes('atlassian:Project')) {
         return {
@@ -67,7 +58,6 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
           }
         };
       }
-
       return {
         metadata: {
           primary: [ElementName.AuthorGroup, ElementName.State, ElementName.DueOn],
@@ -75,7 +65,6 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
           subtitle: []
         }
       };
-
     default:
       return {
         metadata: {
@@ -90,13 +79,11 @@ export var toActionableMetadata = function toActionableMetadata(onActionClick, e
   var types = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   var cardActions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
   var elementItems = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
-
   // Actionable State for Jira issue
   if (extensionKey === 'jira-object-provider' && types !== null && types !== void 0 && types.includes('atlassian:Task')) {
     var previewAction = cardActions.find(function (action) {
       return action.id === 'preview-content';
     });
-
     if (previewAction) {
       return elementItems.map(function (elementItem) {
         return elementItem.name === ElementName.State ? _objectSpread(_objectSpread({}, elementItem), {}, {
@@ -104,7 +91,6 @@ export var toActionableMetadata = function toActionableMetadata(onActionClick, e
             if (onActionClick) {
               onActionClick(previewAction.id);
             }
-
             return previewAction.invoke({
               isReloadRequired: true
             });
@@ -113,6 +99,5 @@ export var toActionableMetadata = function toActionableMetadata(onActionClick, e
       });
     }
   }
-
   return elementItems;
 };

package/dist/esm/view/InlineCard/ErroredView/index.js

@@ -5,11 +5,8 @@ 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 { R300 } from '@atlaskit/theme/colors';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
@@ -22,34 +19,26 @@ import { FormattedMessage } from 'react-intl-next';
 import { IconStyledButton, LowercaseAppearance } from '../styled';
 export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
   _inherits(InlineCardErroredView, _React$Component);
-
   var _super = _createSuper(InlineCardErroredView);
-
   function InlineCardErroredView() {
     var _this;
-
     _classCallCheck(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));
-
     _defineProperty(_assertThisInitialized(_this), "handleRetry", function (event) {
       var onRetry = _this.props.onRetry;
-
       if (onRetry) {
         event.preventDefault();
         event.stopPropagation();
         onRetry();
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderRightSide", function () {
       var _this$props = _this.props,
-          onRetry = _this$props.onRetry,
-          message = _this$props.message;
+        onRetry = _this$props.onRetry,
+        message = _this$props.message;
       return !onRetry ? message : /*#__PURE__*/React.createElement(React.Fragment, null, message, ', ', /*#__PURE__*/React.createElement(Button, {
         spacing: "none",
         appearance: "subtle-link",
@@ -60,20 +49,18 @@ export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement(LowercaseAppearance, null, formattedMessage);
       })));
     });
-
     return _this;
   }
-
   _createClass(InlineCardErroredView, [{
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
-          url = _this$props2.url,
-          onClick = _this$props2.onClick,
-          isSelected = _this$props2.isSelected,
-          _this$props2$testId = _this$props2.testId,
-          testId = _this$props2$testId === void 0 ? 'inline-card-errored-view' : _this$props2$testId,
-          icon = _this$props2.icon;
+        url = _this$props2.url,
+        onClick = _this$props2.onClick,
+        isSelected = _this$props2.isSelected,
+        _this$props2$testId = _this$props2.testId,
+        testId = _this$props2$testId === void 0 ? 'inline-card-errored-view' : _this$props2$testId,
+        icon = _this$props2.icon;
       return /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         isSelected: isSelected
@@ -91,6 +78,5 @@ export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-
   return InlineCardErroredView;
 }(React.Component);

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

@@ -6,11 +6,8 @@ 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 { R400, N500 } from '@atlaskit/theme/colors';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
@@ -31,43 +28,31 @@ var FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null
 }));
 export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
   _inherits(InlineCardForbiddenView, _React$Component);
-
   var _super = _createSuper(InlineCardForbiddenView);
-
   function InlineCardForbiddenView() {
     var _this$props, _this$props$requestAc;
-
     var _this;
-
     _classCallCheck(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));
-
     _defineProperty(_assertThisInitialized(_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)
     });
-
     _defineProperty(_assertThisInitialized(_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();
       }
     });
-
     _defineProperty(_assertThisInitialized(_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.createElement(FormattedMessage, _extends({}, messages[callToActionMessageKey], {
@@ -76,15 +61,12 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
           }
         }));
       }
-
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.invalid_permissions, function (formattedMessage) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage);
       }));
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderRightSide", function () {
       var onAuthorise = _this.props.onAuthorise;
-
       if (_this.state.hasRequestAccessContextMessage) {
         return /*#__PURE__*/React.createElement(Button, {
           spacing: "none",
@@ -95,7 +77,6 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
           role: "button"
         }, _this.renderForbiddenAccessMessage());
       }
-
       if (onAuthorise) {
         return /*#__PURE__*/React.createElement(LozengeBlockWrapper, null, /*#__PURE__*/React.createElement(Button, {
           spacing: "none",
@@ -108,23 +89,20 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
           appearance: 'moved'
         }, _this.renderForbiddenAccessMessage()))));
       }
-
       return null;
     });
-
     return _this;
   }
-
   _createClass(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.createElement(Frame, {
         testId: testId,
         isSelected: isSelected
@@ -139,6 +117,5 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-
   return InlineCardForbiddenView;
 }(React.Component);

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

@@ -3,12 +3,12 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
 import { WrapperAnchor, WrapperSpan } from './styled';
 export 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 = useCallback(function (event) {
     if (onClick) {
       event.preventDefault();
@@ -20,18 +20,19 @@ export 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 ? 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
+  // 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,

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

@@ -1,17 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2;
-
 import styled from '@emotion/styled';
 import { B100, B400, B50, DN40A, DN50A, N20, N40A, N50A } from '@atlaskit/theme/colors';
 import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
 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");
-
 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, ")"),
@@ -24,16 +20,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:
   ------------------------------------
@@ -46,8 +41,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(akBorderRadius(), "px;\n  color: ").concat(themed({
     light: "var(--ds-link, ".concat(B400, ")"),
@@ -60,7 +53,6 @@ var baseWrapperStyle = function baseWrapperStyle(props) {
     dark: "box-shadow: ".concat("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(DN50A, ", 0 0 1px 1px ").concat(DN40A), ")"), ";")
   })(props), "\n  ").concat(isSelected(props), ";\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);

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

@@ -1,18 +1,18 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
-var placeholderShimmer = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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
+var placeholderShimmer = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-position: -20px 0;\n  }\n\n  100% {\n    background-position: 20px 0;\n  }\n"])));
+
+// TODO: Figure out a more scalable/responsive solution
 // for vertical alignment.
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
+export var Icon = styled.img(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])));
 
-export var Icon = styled.img(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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.
-
 export var AKIconWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-right: -2px;\n"])));
 export var Shimmer = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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);

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

@@ -5,11 +5,8 @@ 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';
@@ -18,73 +15,56 @@ 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;
-
+        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, {
@@ -102,11 +82,9 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
     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",
@@ -121,11 +99,9 @@ export 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;
@@ -134,14 +110,14 @@ export 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.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
@@ -160,10 +136,8 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
       }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, this.props.rightSideSpacer && ' - ', rightSide) : null));
     }
   }]);
-
   return IconAndTitleLayout;
 }(React.Component);
-
 _defineProperty(IconAndTitleLayout, "defaultProps", {
   rightSideSpacer: true
 });

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

@@ -1,36 +1,41 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+import styled from '@emotion/styled';
 
-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: 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
+// 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: 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
+export 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";
 
-export 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:
+// 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);
 
-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
+// Wraps all emoji in Inline Links similar to icon
+export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
 
-export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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.
+export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: pre-wrap;\n  word-break: break-all;\n"])));
 
-export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: pre-wrap;\n  word-break: break-all;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
-
-export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
-
+// TODO: Replace overrides with proper AtlasKit solution.
+export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n"])));
+// TODO: Replace overrides with proper AtlasKit solution.
 export var LozengeBlockWrapper = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > span {\n    margin-left: 4px;\n  }\n"])));
-export var RightIconPositionWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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.
+export var RightIconPositionWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: 2px;\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
+
+// The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
-
 export var IconPositionWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
-export var IconEmptyWrapper = styled.span(_templateObject8 || (_templateObject8 = _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 IconEmptyWrapper = styled.span(_templateObject8 || (_templateObject8 = _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(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""])));