@atlaskit/smart-card 18.0.12 → 18.0.15

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -4,11 +4,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
+import { LinkIcon } from '../../../elements';
+import Block from '../../block';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
 import ElementGroup from '../../element-group';
 import { tokens } from '../../../../../../utils/token';
-import { BaseTitleBlockComponent } from '../utils';
 const actionStyles = css`
   cursor: pointer;
   :hover {
@@ -28,31 +29,46 @@ const getMessageStyles = (size, hasAction) => {
     color: ${tokens.errorMessage};
   `;
 };
+/**
+ * Represents an Errored TitleBlock view.
+ * This will render when a Smart Link did not successfully resolve.
+ * This may be a result of a Smart Link not having the correct credentials,
+ * or the backend response was errored or malformed.
+ * @see TitleBlock
+ */
 
-const TitleBlockErroredView = props => {
-  const {
-    size = SmartLinkSize.Medium,
-    retry,
-    testId
-  } = props;
+
+const TitleBlockErroredView = ({
+  actionGroup,
+  retry,
+  position,
+  testId,
+  title,
+  ...blockProps
+}) => {
   const {
-    descriptor: retryDescriptor,
+    descriptor,
     onClick,
-    values: retryValues
+    values
   } = retry || {};
+  const {
+    size = SmartLinkSize.Medium
+  } = blockProps;
   const hasAction = onClick !== undefined;
-  return jsx(BaseTitleBlockComponent, _extends({}, props, {
-    blockTestIdPostfix: "errored-view"
-  }), retryDescriptor && jsx(ElementGroup, {
+  return jsx(Block, _extends({}, blockProps, {
+    testId: `${testId}-errored-view`
+  }), jsx(LinkIcon, {
+    position: position
+  }), title, descriptor && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {
     css: getMessageStyles(size, hasAction),
     onClick: onClick,
     "data-testid": `${testId}-errored-view-message`
-  }, jsx(FormattedMessage, _extends({}, retryDescriptor, {
-    values: retryValues
-  })))));
+  }, jsx(FormattedMessage, _extends({}, descriptor, {
+    values: values
+  })))), actionGroup);
 };
 
 export default TitleBlockErroredView;

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/index.js

@@ -1,26 +1,37 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useState } from 'react';
+import { css } from '@emotion/core';
 import { SmartLinkStatus } from '../../../../../constants';
 import TitleBlockResolvedView from './resolved';
 import TitleBlockErroredView from './errored';
 import TitleBlockResolvingView from './resolving';
+import ActionGroup from '../action-group';
+import { Title } from '../../elements';
 
-const TitleBlock = ({
-  status = SmartLinkStatus.Fallback,
-  testId = 'smart-block-title',
-  ...props
-}) => {
+const getActionStyles = (showOnHover, isOpen) => {
+  if (showOnHover && !isOpen) {
+    return css`
+      .actions-button-group {
+        visibility: hidden;
+      }
+
+      &:hover {
+        .actions-button-group {
+          visibility: visible;
+        }
+      }
+    `;
+  }
+};
+
+const getTitleBlockViewComponent = status => {
   switch (status) {
     case SmartLinkStatus.Pending:
     case SmartLinkStatus.Resolving:
-      return /*#__PURE__*/React.createElement(TitleBlockResolvingView, _extends({}, props, {
-        testId: testId
-      }));
+      return TitleBlockResolvingView;
 
     case SmartLinkStatus.Resolved:
-      return /*#__PURE__*/React.createElement(TitleBlockResolvedView, _extends({}, props, {
-        testId: testId
-      }));
+      return TitleBlockResolvedView;
 
     case SmartLinkStatus.Unauthorized:
     case SmartLinkStatus.Forbidden:
@@ -28,10 +39,61 @@ const TitleBlock = ({
     case SmartLinkStatus.Errored:
     case SmartLinkStatus.Fallback:
     default:
-      return /*#__PURE__*/React.createElement(TitleBlockErroredView, _extends({}, props, {
-        testId: testId
-      }));
+      return TitleBlockErroredView;
   }
 };
+/**
+ * Represents a TitleBlock, which is the foundation of all Flexible Smart Links.
+ * This contains an icon, the link, and any associated metadata and actions in one block.
+ * The TitleBlock will also render differently given the state of the smart link.
+ * This can be found in the corresponding Resolving, Resolved and Errored views.
+ * @param {TitleBlockProps} TitleBlockProps
+ * @see Block
+ * @see TitleBlockResolvingView
+ * @see TitleBlockResolvedView
+ * @see TitleBlockErroredView
+ */
+
+
+const TitleBlock = ({
+  actions = [],
+  anchorTarget,
+  maxLines,
+  onClick,
+  overrideCss,
+  status = SmartLinkStatus.Fallback,
+  showActionOnHover,
+  testId = 'smart-block-title',
+  text,
+  theme,
+  ...props
+}) => {
+  const [actionDropdownOpen, setActionDropdownOpen] = useState(false);
+  const actionGroup = actions.length > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: isOpen => setActionDropdownOpen(isOpen)
+  });
+  const actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
+  const combinedCss = css`
+    ${actionStyles} ${overrideCss}
+  `;
+  const overrideText = !!text ? {
+    text
+  } : {};
+  const title = /*#__PURE__*/React.createElement(Title, _extends({
+    maxLines: maxLines,
+    onClick: onClick,
+    target: anchorTarget,
+    theme: theme
+  }, overrideText));
+  const Component = getTitleBlockViewComponent(status);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    actionGroup: actionGroup,
+    overrideCss: combinedCss,
+    testId: testId,
+    title: title
+  }));
+};
 
 export default TitleBlock;

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -1,14 +1,41 @@
 import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
-import { BaseTitleBlockComponent } from '../utils';
+import { LinkIcon } from '../../../elements';
+import Block from '../../block';
+import ElementGroup from '../../element-group';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkWidth } from '../../../../../../constants';
+import { renderElementItems } from '../../utils';
+/**
+ * This renders a fully resolved TitleBlock.
+ * This should render when a Smart Link returns a valid response.
+ * @see TitleBlock
+ */
 
-const TitleBlockResolvedView = props => {
-  return jsx(BaseTitleBlockComponent, _extends({}, props, {
-    blockTestIdPostfix: "resolved-view"
-  }));
+const TitleBlockResolvedView = ({
+  actionGroup,
+  metadata = [],
+  position,
+  subtitle = [],
+  testId,
+  text,
+  title,
+  ...blockProps
+}) => {
+  const metadataElements = renderElementItems(metadata);
+  const subtitleElements = renderElementItems(subtitle);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: `${testId}-resolved-view`
+  }), /*#__PURE__*/React.createElement(LinkIcon, {
+    position: position
+  }), /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Vertical,
+    width: SmartLinkWidth.Flexible
+  }, title, subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal
+  }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    align: SmartLinkAlignment.Right
+  }, metadataElements), actionGroup);
 };
 
 export default TitleBlockResolvedView;

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -4,8 +4,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { jsx } from '@emotion/core';
 import Spinner from '@atlaskit/spinner';
+import Block from '../../block';
 import { SmartLinkSize } from '../../../../../../constants';
-import { BaseTitleBlockComponent } from '../utils';
 
 const getSpinnerSize = size => {
   // Spinner sizes should be equivalent or smaller than Icon size
@@ -25,20 +25,29 @@ const getSpinnerSize = size => {
       return 12;
   }
 };
+/**
+ * This represents a TitleBlock for a Smart Link that is currently waiting
+ * for a request to finish.
+ * This should render when a Smart Link has sent a request.
+ * @see TitleBlock
+ */
 
-const TitleBlockResolvingView = props => {
+
+const TitleBlockResolvingView = ({
+  actionGroup,
+  testId,
+  title,
+  ...blockProps
+}) => {
   const {
-    size = SmartLinkSize.Medium,
-    testId
-  } = props;
-  const spinnerIcon = jsx(Spinner, {
+    size = SmartLinkSize.Medium
+  } = blockProps;
+  return jsx(Block, _extends({}, blockProps, {
+    testId: `${testId}-resolving-view`
+  }), jsx(Spinner, {
     size: getSpinnerSize(size),
     testId: `${testId}-resolving-spinner`
-  });
-  return jsx(BaseTitleBlockComponent, _extends({}, props, {
-    blockIcon: spinnerIcon,
-    blockTestIdPostfix: "resolving-view"
-  }));
+  }), title, actionGroup);
 };
 
 export default TitleBlockResolvingView;

package/dist/es2019/view/FlexibleCard/components/container/index.js

@@ -70,6 +70,11 @@ const renderChildren = (children, containerSize, containerTheme, status, retry,
     });
   }
 });
+/**
+ * This represents the container in which all Flexible UI Smart Links are rendered.
+ * @see Block
+ */
+
 
 const Container = ({
   children,

package/dist/es2019/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -26,10 +26,19 @@ const getStyles = size => {
       `;
   }
 };
+/**
+ * An element that displays a group of avatars.
+ * @public
+ * @param {AvatarGroupProps} AvatarGroupProps - The props necessary for the AvatarGroup.
+ * @see AuthorGroup
+ * @see CollaboratorGroup
+ */
+
 
 const AvatarGroup = ({
   items = [],
   maxCount = MAX_COUNT,
+  overrideCss,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-avatar-group'
 }) => {
@@ -38,7 +47,9 @@ const AvatarGroup = ({
   }
 
   return jsx("span", {
-    css: getStyles(size)
+    css: [getStyles(size), overrideCss],
+    "data-smart-element-avatar-group": true,
+    "data-testid": testId
   }, jsx(AtlaskitAvatarGroup, {
     maxCount: maxCount,
     appearance: "stack",

package/dist/es2019/view/FlexibleCard/components/elements/badge/index.js

@@ -70,12 +70,27 @@ const renderImageIcon = (url, testId) => {
     });
   }
 };
+/**
+ * An element that displays some text with an associated icon.
+ * @public
+ * @param {BadgeProps} BadgeProps - The props necessary for the Badge.
+ * @see CommentCount
+ * @see ViewCount
+ * @see ReactCount
+ * @see VoteCount
+ * @see SubscriberCount
+ * @see Priority
+ * @see ProgrammingLanguage
+ * @see Provider
+ */
+
 
 const Badge = ({
   icon,
-  url,
   label,
-  testId = 'smart-element-badge'
+  overrideCss,
+  testId = 'smart-element-badge',
+  url
 }) => {
   const formattedMessageOrLabel = getFormattedMessageFromIcon(icon) || label;
   const badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
@@ -85,7 +100,7 @@ const Badge = ({
   }
 
   return jsx("div", {
-    css: badgeStyles,
+    css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-badge": true,
     "data-testid": testId

package/dist/es2019/view/FlexibleCard/components/elements/date-time/index.js

@@ -18,9 +18,17 @@ const typeToDescriptorMap = {
   created: messages.created_on,
   modified: messages.modified_on
 };
+/**
+ * An element that displays an ISO Timestamp in text.
+ * @public
+ * @param {DateTimeProps} DateTimeProps - The props necessary for the DateTime element.
+ * @see CreatedOn
+ * @see ModifiedOn
+ */
 
 const DateTime = ({
   date,
+  overrideCss,
   type,
   testId = 'smart-element-date-time'
 }) => {
@@ -40,7 +48,7 @@ const DateTime = ({
     numeric: 'auto'
   });
   return jsx("span", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId

package/dist/es2019/view/FlexibleCard/components/elements/icon/index.js

@@ -83,11 +83,19 @@ const renderImageIcon = (defaultIcon, icon, url, testId) => {
     });
   }
 };
+/**
+ * An element that displays an Icon or favicon.
+ * @public
+ * @param {IconProps} IconProps - The props necessary for the Icon element.
+ * @see LinkIcon
+ */
+
 
 const Icon = ({
   icon,
   label = 'Link',
   position = SmartLinkPosition.Top,
+  overrideCss,
   render,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-icon',
@@ -101,7 +109,7 @@ const Icon = ({
   const styles = getIconStyles(size, position, width);
   const renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return jsx("div", {
-    css: [styles, renderStyles],
+    css: [styles, renderStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element-icon": true,
     "data-testid": testId

package/dist/es2019/view/FlexibleCard/components/elements/index.js

@@ -3,22 +3,118 @@ import { ElementName } from '../../../../constants';
 // Attention: Keep the export name and element name the same.
 // This will help reducing the code for mapping elements inside
 // createElement and renderElementItems
+
+/**
+ * Creates an AvatarGroup element using the data from AuthorGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
 export const AuthorGroup = createElement(ElementName.AuthorGroup);
+/**
+ * Creates an AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
+
 export const CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
+/**
+ * Creates a CommentCount Badge element using the data from CommentCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const CommentCount = createElement(ElementName.CommentCount);
+/**
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const ViewCount = createElement(ElementName.ViewCount);
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const ReactCount = createElement(ElementName.ReactCount);
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const VoteCount = createElement(ElementName.VoteCount);
+/**
+ * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
+ * @see Text
+ */
+
 export const CreatedBy = createElement(ElementName.CreatedBy);
+/**
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
+ */
+
 export const CreatedOn = createElement(ElementName.CreatedOn);
+/**
+ * Creates a LinkIcon Icon element using the data from LinkIcon in the Flexible UI Context.
+ * @see Icon
+ */
+
 export const LinkIcon = createElement(ElementName.LinkIcon);
+/**
+ * Creates a ModifiedBy Text element using the data from ModifiedBy in the Flexible UI Context.
+ * @see Text
+ */
+
 export const ModifiedBy = createElement(ElementName.ModifiedBy);
+/**
+ * Creates a ModifiedOn DateTime element using the data from ModifiedOn in the Flexible UI Context.
+ * @see DateTime
+ */
+
 export const ModifiedOn = createElement(ElementName.ModifiedOn);
+/**
+ * Creates a Preview element using the data from Preview in the Flexible UI Context.
+ * @see Preview
+ */
+
 export const Preview = createElement(ElementName.Preview);
+/**
+ * Creates a Priority Badge element using the data from Priority in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const Priority = createElement(ElementName.Priority);
+/**
+ * Creates a ProgrammingLanguage Badge element using the data from ProgrammingLanguage in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
+/**
+ * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
+ * @see Text
+ */
+
 export const Snippet = createElement(ElementName.Snippet);
+/**
+ * Creates a State Lozenge element using the data from State in the Flexible UI Context.
+ * @see Lozenge
+ */
+
 export const State = createElement(ElementName.State);
+/**
+ * Creates a SubscriberCount Badge element using the data from SubscriberCount in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const SubscriberCount = createElement(ElementName.SubscriberCount);
+/**
+ * Creates a Title Link element using the data from Title in the Flexible UI Context.
+ * This represents the main link text within the Smart Link.
+ * @see Link
+ */
+
 export const Title = createElement(ElementName.Title);
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+
 export const Provider = createElement(ElementName.Provider);

package/dist/es2019/view/FlexibleCard/components/elements/link/index.js

@@ -63,9 +63,17 @@ const getMaxLines = maxLines => {
 
   return maxLines;
 };
+/**
+ * An element that represent.
+ * @public
+ * @param {LinkProps} LinkProps - The props necessary for the Icon element.
+ * @see LinkIcon
+ */
+
 
 const Link = ({
   maxLines = DEFAULT_MAX_LINES,
+  overrideCss,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-link',
   text,
@@ -80,7 +88,7 @@ const Link = ({
   testId: `${testId}-tooltip`,
   tag: "span"
 }, jsx("a", {
-  css: getAnchorStyles(size, theme, getMaxLines(maxLines)),
+  css: [getAnchorStyles(size, theme, getMaxLines(maxLines)), overrideCss],
   "data-smart-element-link": true,
   "data-testid": testId,
   onClick: onClick,

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/index.js

@@ -5,9 +5,16 @@ import AtlaskitLozenge from '@atlaskit/lozenge';
 const styles = css`
   line-height: inherit;
 `;
+/**
+ * An element that displays a Lozenge.
+ * @public
+ * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
+ * @see State
+ */
 
 const Lozenge = ({
   appearance = 'default',
+  overrideCss,
   text,
   testId = 'smart-element-lozenge'
 }) => {
@@ -16,12 +23,13 @@ const Lozenge = ({
   }
 
   return jsx("span", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-fit-to-content": true,
-    "data-smart-element-lozenge": true
+    "data-smart-element-lozenge": true,
+    "data-testid": testId
   }, jsx(AtlaskitLozenge, {
     appearance: appearance,
-    testId: testId
+    testId: `${testId}-lozenge`
   }, text));
 };
 

package/dist/es2019/view/FlexibleCard/components/elements/media/index.js

@@ -45,8 +45,15 @@ const styles = css`
     }
   }
 `;
+/**
+ * An element that displays a Media.
+ * @public
+ * @param {MediaProps} MediaProps - The props necessary for the Media element.
+ * @see Preview
+ */
 
 const Media = ({
+  overrideCss,
   testId = 'smart-element-media',
   type,
   url
@@ -56,7 +63,7 @@ const Media = ({
   }
 
   return jsx("div", {
-    css: styles,
+    css: [styles, overrideCss],
     "data-smart-element-media": true,
     "data-testid": testId
   }, jsx(ImageIcon, {

package/dist/es2019/view/FlexibleCard/components/elements/text/index.js

@@ -4,18 +4,25 @@ import { css, jsx } from '@emotion/core';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 
-const getStyles = (maxLines, color) => css`
-  color: ${color};
+const getStyles = maxLines => css`
+  color: ${tokens.text};
   font-size: 0.75rem;
   line-height: 1rem;
   ${getTruncateStyles(maxLines)}
 `;
+/**
+ * An element that displays some Text.
+ * @public
+ * @param {TextProps} TextProps - The props necessary for the Text element.
+ * @see Title
+ */
+
 
 const Text = ({
-  color = tokens.text,
   content,
   maxLines = 1,
   message,
+  overrideCss,
   testId = 'smart-element-text'
 }) => {
   if (!message && !content) {
@@ -23,7 +30,7 @@ const Text = ({
   }
 
   return jsx("span", {
-    css: getStyles(maxLines, color),
+    css: [getStyles(maxLines), overrideCss],
     "data-separator": true,
     "data-smart-element-text": true,
     "data-testid": testId