@atlaskit/smart-card 26.9.16 → 26.9.18

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

@@ -30,9 +30,7 @@ export const Shimmer = ({
 }) => {
   const 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/es2019/view/RedesignedInlineCard/ErroredView/index.js

@@ -0,0 +1,66 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { R300 } from '@atlaskit/theme/colors';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import Button from '@atlaskit/button/custom-theme-button';
+import { Frame } from '../Frame';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { AKIconWrapper } from '../Icon';
+import { messages } from '../../../messages';
+import { FormattedMessage } from 'react-intl-next';
+import { IconStyledButton } from '../styled';
+import withFrameStyleControl from '../utils/withFrameStyleControl';
+export class InlineCardErroredView extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "frameRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "handleRetry", event => {
+      const {
+        onRetry
+      } = this.props;
+      if (onRetry) {
+        event.preventDefault();
+        event.stopPropagation();
+        onRetry();
+      }
+    });
+    _defineProperty(this, "renderActionButton", () => {
+      const {
+        onRetry
+      } = this.props;
+      const ActionButton = withFrameStyleControl(Button, this.frameRef);
+      return onRetry && /*#__PURE__*/React.createElement(ActionButton, {
+        spacing: "none",
+        component: IconStyledButton,
+        onClick: this.handleRetry,
+        role: "button"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
+    });
+  }
+  render() {
+    const {
+      url,
+      onClick,
+      isSelected,
+      testId = 'inline-card-errored-view',
+      icon,
+      message
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Frame, {
+      testId: testId,
+      isSelected: isSelected,
+      ref: this.frameRef
+    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+      icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+        label: "error",
+        size: "small",
+        primaryColor: `var(--ds-icon-danger, ${R300})`,
+        testId: "errored-view-default-icon"
+      })),
+      link: url,
+      title: url,
+      onClick: onClick,
+      rightSide: message
+    }), this.renderActionButton());
+  }
+}

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

@@ -0,0 +1,107 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { R400, N500 } from '@atlaskit/theme/colors';
+import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import Button from '@atlaskit/button/custom-theme-button';
+import { Frame } from '../Frame';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { AKIconWrapper } from '../Icon';
+import { messages } from '../../../messages';
+import { FormattedMessage } from 'react-intl-next';
+import { IconStyledButton } from '../styled';
+import Lozenge from '@atlaskit/lozenge';
+import { LozengeWrapper } from '../IconAndTitleLayout/styled';
+import withFrameStyleControl from '../utils/withFrameStyleControl';
+const FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
+  label: "error",
+  size: "small",
+  primaryColor: `var(--ds-icon-danger, ${R400})`,
+  testId: "forbidden-view-fallback-icon"
+}));
+export class InlineCardForbiddenView extends React.Component {
+  constructor(...args) {
+    var _this$props, _this$props$requestAc;
+    super(...args);
+    _defineProperty(this, "frameRef", /*#__PURE__*/React.createRef());
+    _defineProperty(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(this, "handleRetry", event => {
+      const {
+        onAuthorise
+      } = this.props;
+      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(this, "renderForbiddenAccessMessage", () => {
+      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) {
+        const {
+          callToActionMessageKey
+        } = this.props.requestAccessContext;
+        return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[callToActionMessageKey], {
+          values: {
+            context: this.props.context
+          }
+        }));
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.invalid_permissions, formattedMessage => {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage);
+      }));
+    });
+    _defineProperty(this, "renderActionButton", () => {
+      const {
+        onAuthorise
+      } = this.props;
+      const ActionButton = withFrameStyleControl(Button, this.frameRef);
+      if (this.state.hasRequestAccessContextMessage) {
+        return /*#__PURE__*/React.createElement(ActionButton, {
+          spacing: "none",
+          onClick: this.handleRetry,
+          component: IconStyledButton,
+          testId: "button-connect-other-account",
+          role: "button"
+        }, this.renderForbiddenAccessMessage());
+      }
+      if (onAuthorise) {
+        return /*#__PURE__*/React.createElement(Button, {
+          spacing: "none",
+          onClick: this.handleRetry,
+          appearance: "subtle-link",
+          testId: "button-connect-other-account",
+          role: "button"
+        }, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+          appearance: 'moved'
+        }, this.renderForbiddenAccessMessage())));
+      }
+      return null;
+    });
+  }
+  render() {
+    const {
+      url,
+      icon,
+      onClick,
+      isSelected,
+      testId = 'inline-card-forbidden-view'
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Frame, {
+      testId: testId,
+      isSelected: isSelected,
+      ref: this.frameRef
+    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+      icon: icon ? icon : FallbackForbiddenIcon,
+      link: url,
+      title: url,
+      onClick: onClick,
+      titleColor: `var(--ds-text-subtle, ${N500})`
+    }), this.renderActionButton());
+  }
+}

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

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

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

@@ -0,0 +1,107 @@
+import styled from '@emotion/styled';
+import { B50, B100, B200, B400, N20, N40, N500 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+const BACKGROUND_COLOR_DARK = '#262B31';
+const selected = `
+  cursor: pointer;
+  box-shadow: 0 0 0 2px ${`var(--ds-border-selected, ${B100})`};
+  outline: none;
+  user-select: none;
+  &, :hover, :focus, :active {
+    text-decoration: none;
+  }
+  &:hover {
+    border: 1px solid ${`var(--ds-border-input, ${N40})`};
+  }
+`;
+const isInteractive = ({
+  isInteractive
+}) => {
+  if (isInteractive) {
+    return `
+      :hover {
+        background-color: ${themed({
+      light: `var(--ds-background-neutral-subtle-hovered, ${N20})`,
+      dark: `var(--ds-background-neutral-subtle-hovered, ${BACKGROUND_COLOR_DARK})`
+    })};
+      }
+      :active {
+        background-color: ${themed({
+      light: `var(--ds-background-selected, ${B50})`,
+      dark: `var(--ds-background-selected, ${BACKGROUND_COLOR_DARK})`
+    })};
+      }
+      :focus {
+        ${selected}
+      }
+    `;
+  } else {
+    return '';
+  }
+};
+const isSelected = ({
+  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.
+const baseWrapperStyle = props => `
+  line-height: 22px;
+  padding: 2px 0px;
+  ${props.withoutBackground ? `padding-left: 0; margin-left:-2px;` : ''}
+  display: inline;
+  box-decoration-break: clone;
+  border-radius: ${"var(--ds-border-radius-100, 3px)"};
+  color: ${themed({
+  light: `var(--ds-link, ${B400})`,
+  dark: "var(--ds-link, #4794FF)"
+})(props)};
+
+  background-color: ${props.withoutBackground ? '' : themed({
+  light: "var(--ds-surface-raised, white)",
+  dark: `var(--ds-surface-raised, ${BACKGROUND_COLOR_DARK})`
+})(props)};
+
+  ${isSelected(props)};
+
+  ${props.withoutBackground ? '' : themed({
+  light: `border: 1px solid ${`var(--ds-border-input, ${N40})`};`,
+  dark: `border: 1px solid ${`var(--ds-border-input, ${N500})`};`
+})(props)}
+  &:hover {
+    ${themed({
+  light: `border-color: ${`var(--ds-border-accent-blue, ${B200})`};`,
+  dark: `border-color:  ${`var(--ds-border-accent-blue, ${B200})`};`
+})(props)}
+  }
+  &, :hover, :focus, :active {
+    ${props.withoutBackground ? '' : 'text-decoration: none;'}
+  }
+  transition: 0.1s all ease-in-out;
+  -moz-user-select: none;
+`;
+export const WrapperAnchor = styled.a`
+  ${baseWrapperStyle}
+  ${isInteractive}
+`;
+WrapperAnchor.displayName = 'WrapperAnchor';
+export const WrapperSpan = styled.span`
+  ${baseWrapperStyle}
+`;
+WrapperSpan.displayName = 'WrapperSpan';

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

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+import { Skeleton } from '@atlaskit/linking-common';
+import React from 'react';
+
+// TODO: Figure out a more scalable/responsive solution
+// for vertical alignment.
+// Current rationale: vertically positioned at the top of
+// the smart card container (when set to 0). Offset this
+// to position it with appropriate whitespace from the top.
+export const Icon = styled.img`
+  height: 14px;
+  width: 14px;
+  margin-right: ${"var(--ds-space-050, 4px)"};
+  border-radius: 2px;
+  user-select: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+// 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 const AKIconWrapper = styled.span`
+  margin-right: calc(-1 * ${"var(--ds-space-025, 2px)"});
+`;
+export const Shimmer = ({
+  testId
+}) => {
+  const skeletonCustomStyles = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    marginRight: "var(--ds-space-050, 4px)"
+  };
+  return /*#__PURE__*/React.createElement(Skeleton, {
+    width: 14,
+    height: 14,
+    borderRadius: 2,
+    testId: testId,
+    style: skeletonCustomStyles
+  });
+};

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

@@ -0,0 +1,124 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import ImageLoader from 'react-render-image';
+import { Icon, Shimmer } from '../Icon';
+import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper, TitleWrapperClassName } from './styled';
+import LinkIcon from '@atlaskit/icon/glyph/link';
+import { LinkAppearance, NoLinkAppearance } from '../styled';
+export class IconAndTitleLayout extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "handleClick", event => {
+      const {
+        onClick
+      } = this.props;
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+    _defineProperty(this, "handleKeyPress", event => {
+      const {
+        onClick
+      } = this.props;
+      if (event.key !== ' ' && event.key !== 'Enter') {
+        return;
+      }
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+  }
+  renderAtlaskitIcon() {
+    const {
+      icon,
+      emoji
+    } = this.props;
+    if (emoji) {
+      return /*#__PURE__*/React.createElement(EmojiWrapper, null, emoji);
+    }
+    if (!icon || typeof icon === 'string') {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(IconWrapper, null, icon);
+  }
+  renderImageIcon(errored, testId) {
+    const {
+      icon: url
+    } = this.props;
+    if (!url || typeof url !== 'string') {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(ImageLoader, {
+      src: url,
+      loaded: /*#__PURE__*/React.createElement(Icon, {
+        className: "smart-link-icon",
+        src: url,
+        "data-testid": `${testId}-image`
+      }),
+      errored: errored,
+      loading: /*#__PURE__*/React.createElement(Shimmer, {
+        testId: `${testId}-loading`
+      })
+    });
+  }
+  renderIconPlaceholder(testId) {
+    const {
+      defaultIcon
+    } = this.props;
+    if (defaultIcon) {
+      return /*#__PURE__*/React.createElement(IconWrapper, null, defaultIcon);
+    }
+    return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(LinkIcon, {
+      label: "link",
+      size: "small",
+      testId: `${testId}-default`
+    }));
+  }
+  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.
+    const icon = this.renderAtlaskitIcon();
+    if (icon) {
+      return icon;
+    }
+    const placeholder = this.renderIconPlaceholder(testId);
+    const image = this.renderImageIcon(placeholder, testId);
+    return image || placeholder;
+  }
+  render() {
+    const {
+      children,
+      title,
+      titleColor,
+      titleTextColor,
+      link,
+      rightSide,
+      testId = 'inline-card-icon-and-title'
+    } = this.props;
+    const titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, {
+      style: {
+        color: titleTextColor
+      },
+      className: TitleWrapperClassName
+    }, title));
+    return /*#__PURE__*/React.createElement(IconTitleWrapper, {
+      style: {
+        color: titleColor
+      },
+      "data-testid": testId
+    }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
+      href: link,
+      onClick: this.handleClick,
+      onKeyPress: this.handleKeyPress
+    }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, rightSide) : null);
+  }
+}
+_defineProperty(IconAndTitleLayout, "defaultProps", {
+  rightSideSpacer: true
+});

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

@@ -0,0 +1,97 @@
+import styled from '@emotion/styled';
+// TODO: remove this override behaviour for @atlaskit/icon-object
+export const IconObjectOverrides = `
+  & > span {
+    height: 16px;
+    width: 14px;
+    position: absolute;
+    top: 3px;
+    left: 0;
+    line-height: 14px;
+    & > svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+`;
+// TODO: remove this override behaviour for @atlaskit/icon
+export const IconOverrides = `
+
+  & > * > span {
+    height: 16px;
+    width: 14px;
+    position: absolute;
+    left: 0;
+    & > svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+`;
+
+// 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 const IconWrapper = styled.span`
+  user-select: none;
+  ${IconOverrides}
+  ${IconObjectOverrides}
+`;
+
+// Wraps all emoji in Inline Links similar to icon
+export const EmojiWrapper = styled.span`
+  display: inline-block;
+  margin-right: ${"var(--ds-space-025, 2px)"};
+  user-select: none;
+  ${IconOverrides}
+  ${IconObjectOverrides}
+`;
+
+// The main 'wrapping' element, title of the content.
+// NB: `white-space` adds little whitespace before wrapping.
+// NB: `word-break` line breaks as soon as an overflow takes place.
+export const IconTitleWrapper = styled.span`
+  white-space: pre-wrap;
+  word-break: break-all;
+  box-decoration-break: clone;
+  padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"};
+`;
+
+// TODO: Replace overrides with proper AtlasKit solution.
+export const LozengeWrapper = styled.span`
+  display: inline-block;
+  vertical-align: 1px;
+  margin: 0 ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-025, 2px)"};
+`;
+export const RightIconPositionWrapper = styled.span`
+  margin-left: ${"var(--ds-space-025, 2px)"};
+  position: relative;
+  display: inline-block;
+`;
+
+// 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 const IconPositionWrapper = styled.span`
+  margin-right: ${"var(--ds-space-050, 4px)"};
+  position: relative;
+  display: inline-block;
+`;
+export const IconEmptyWrapper = styled.span`
+  width: 14px;
+  height: 100%;
+  display: inline-block;
+  opacity: 0;
+`;
+
+// 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 const TitleWrapperClassName = 'smart-link-title-wrapper';
+export const TitleWrapper = styled.span``;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Frame } from '../Frame';
+import Lozenge from '@atlaskit/lozenge';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { LozengeWrapper } from '../IconAndTitleLayout/styled';
+import { HoverCard } from '../../HoverCard/index';
+export class InlineCardResolvedView extends React.Component {
+  renderLozenge() {
+    const {
+      lozenge
+    } = this.props;
+    if (!lozenge) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+      testId: "inline-card-resolved-view-lozenge",
+      appearance: lozenge.appearance || 'default',
+      isBold: lozenge.isBold
+    }, lozenge.text));
+  }
+  render() {
+    const {
+      id,
+      title = '',
+      isSelected,
+      onClick,
+      icon,
+      link,
+      testId = 'inline-card-resolved-view',
+      titleTextColor,
+      titlePrefix,
+      showHoverPreview = false,
+      showServerActions = false
+    } = this.props;
+    const inlineCardResolvedView = /*#__PURE__*/React.createElement(Frame, {
+      testId: testId,
+      link: link,
+      isSelected: isSelected,
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+      emoji: titlePrefix,
+      icon: icon,
+      title: title,
+      titleTextColor: titleTextColor
+    }), this.renderLozenge());
+    if (showHoverPreview && link) {
+      return /*#__PURE__*/React.createElement(HoverCard, {
+        id: id,
+        showServerActions: showServerActions,
+        url: link
+      }, inlineCardResolvedView);
+    }
+    return inlineCardResolvedView;
+  }
+}