@atlaskit/smart-card 26.9.15 → 26.9.17

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;
+  }
+}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Frame } from '../Frame';
+import Spinner from '@atlaskit/spinner';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { SpinnerWrapper } from './styled';
+import { IconTitleWrapper, RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
+export class InlineCardResolvingView extends React.Component {
+  render() {
+    const {
+      url,
+      onClick,
+      isSelected,
+      inlinePreloaderStyle,
+      testId = 'inline-card-resolving-view',
+      titleTextColor
+    } = this.props;
+    if (inlinePreloaderStyle === 'on-right-without-skeleton') {
+      return /*#__PURE__*/React.createElement(Frame, {
+        withoutBackground: true,
+        testId: testId,
+        onClick: onClick,
+        isSelected: isSelected
+      }, /*#__PURE__*/React.createElement(IconTitleWrapper, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapper, null, /*#__PURE__*/React.createElement(SpinnerWrapper, {
+        className: "inline-resolving-spinner"
+      }, /*#__PURE__*/React.createElement(Spinner, {
+        size: 14
+      })))));
+    } else {
+      return /*#__PURE__*/React.createElement(Frame, {
+        testId: testId,
+        onClick: onClick,
+        isSelected: isSelected
+      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+        link: url,
+        title: url,
+        titleTextColor: titleTextColor
+      }, /*#__PURE__*/React.createElement(SpinnerWrapper, {
+        className: "inline-resolving-spinner"
+      }, /*#__PURE__*/React.createElement(Spinner, {
+        size: 14
+      }))));
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+import styled from '@emotion/styled';
+import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
+export const SpinnerWrapper = styled(IconTitleWrapper)`
+  vertical-align: text-bottom;
+  padding: 0px;
+`;

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

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import Button from '@atlaskit/button/custom-theme-button';
+import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import { N500, R400 } from '@atlaskit/theme/colors';
+import withFrameStyleControl from '../utils/withFrameStyleControl';
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../../../messages';
+import { Frame } from '../Frame';
+import { AKIconWrapper } from '../Icon';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { IconStyledButton } from '../styled';
+import { HoverCard } from '../../HoverCard';
+const FallbackUnauthorizedIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
+  label: "error",
+  size: "small",
+  primaryColor: `var(--ds-icon-danger, ${R400})`
+}));
+export class InlineCardUnauthorizedView extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "frameRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "handleConnectAccount", event => {
+      const {
+        analytics,
+        extensionKey,
+        onAuthorise
+      } = this.props;
+      event.preventDefault();
+      event.stopPropagation();
+      if (onAuthorise) {
+        analytics === null || analytics === void 0 ? void 0 : analytics.track.appAccountAuthStarted({
+          extensionKey
+        });
+      }
+      return onAuthorise();
+    });
+    _defineProperty(this, "renderActionButton", () => {
+      const {
+        onAuthorise,
+        context
+      } = this.props;
+      const ActionButton = withFrameStyleControl(Button, this.frameRef);
+      return onAuthorise ? /*#__PURE__*/React.createElement(ActionButton, {
+        spacing: "none",
+        component: IconStyledButton,
+        onClick: this.handleConnectAccount,
+        testId: "button-connect-account"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+        values: {
+          context
+        }
+      }))) : undefined;
+    });
+  }
+  render() {
+    const {
+      url,
+      icon,
+      onClick,
+      isSelected,
+      testId = 'inline-card-unauthorized-view',
+      showAuthTooltip = false
+    } = this.props;
+    const inlineCardUnauthenticatedView = /*#__PURE__*/React.createElement(Frame, {
+      testId: testId,
+      isSelected: isSelected,
+      ref: this.frameRef
+    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+      icon: icon ? icon : FallbackUnauthorizedIcon,
+      title: url,
+      link: url,
+      onClick: onClick,
+      titleColor: `var(--ds-text-subtle, ${N500})`
+    }), this.renderActionButton());
+    if (showAuthTooltip) {
+      return /*#__PURE__*/React.createElement(HoverCard, {
+        url: url,
+        onAuthorize: this.props.onAuthorise,
+        id: this.props.id
+      }, inlineCardUnauthenticatedView);
+    }
+    return inlineCardUnauthenticatedView;
+  }
+}