@atlaskit/smart-card 18.0.13 → 18.0.16

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { size as csssize, borderRadius, size, ellipsis } from '@atlaskit/media-ui';
 import { fontFamily } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { gs as gridSize } from '../../common/utils';
 export const className = 'media-card-frame';
 export const cardShadow = ``;
@@ -36,7 +37,7 @@ function getinteractiveStyles({
     ${visibleStyles}
   }
   &:active {
-    background-color: ${colors.B50};
+    background-color: ${token('color.background.selected', colors.B50)};
   }
 ` : '';
   return `${visibleFrameStyles}${interactiveFrameStyles}`;
@@ -49,7 +50,7 @@ function selected({
     ${visibleStyles}
     &::after {
       cursor: pointer;
-      box-shadow: 0 0 0 3px ${colors.B100};
+      box-shadow: 0 0 0 3px ${token('color.border.selected', colors.B100)};
       content: '';
       outline: none;
       position: absolute;
@@ -96,10 +97,10 @@ const wrapperStyles = props => `
 `;
 
 const visibleStyles = `
-  background-color: ${colors.N30};
+  background-color: ${token('color.background.neutral.subtle', colors.N30)};
 
   &:after {
-    background: ${colors.N30} !important;
+    background: ${token('color.background.neutral', colors.N30)} !important;
   }
   .embed-header {
     opacity: 1;
@@ -128,7 +129,7 @@ export const Header = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
-  color: ${colors.N300};
+  color: ${token('color.icon', colors.N300)};
   opacity: 0;
   transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);
 `;
@@ -140,7 +141,7 @@ export const IconWrapper = styled.div`
 }) => {
   if (isPlaceholder) {
     return `
-      background-color: ${colors.N30};
+      background-color: ${token('color.skeleton', colors.N30)};
     `;
   } else {
     return '';
@@ -156,12 +157,12 @@ export const TextWrapper = styled.div`
         ${borderRadius}
         width: 125px;
         height: 12px;
-        background-color: ${colors.N30};
+        background-color: ${token('color.skeleton', colors.N30)};
       `;
   } else {
     return '';
   }
-}} color: ${colors.N300};
+}} color: ${token('color.text.subtlest', colors.N300)};
   font-size: 12px;
   line-height: 16px;
   ${ellipsis('none')};
@@ -172,7 +173,7 @@ export const TextWrapper = styled.div`
 export const Content = styled.div`
   ${borderRadius}
   ${cardShadow}
-  background-color: white;
+  background-color: ${token('elevation.surface', 'white')};
   position: absolute;
   z-index: 1;
   width: 100%;
@@ -198,8 +199,7 @@ export const Content = styled.div`
   if (isInteractive) {
     return `
           .${className}:hover & {
-            box-shadow: 0 4px 8px -2px rgba(23, 43, 77, 0.32),
-              0 0 1px rgba(23, 43, 77, 0.25);
+            box-shadow: ${token('elevation.shadow.overlay', '0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25)')};
           }
         `;
   } else {
@@ -224,7 +224,7 @@ export const ContentWrapper = styled.div`
   padding: 8px 12px 12px 12px;
 `;
 export const Title = styled.div`
-  color: ${colors.N900};
+  color: ${token('color.text', colors.N900)};
   font-size: 16px;
   font-weight: 500;
   line-height: ${20 / 16};
@@ -233,7 +233,7 @@ export const Title = styled.div`
 `;
 export const Byline = styled.div`
   margin-top: 4px;
-  color: ${colors.N300};
+  color: ${token('color.text.subtlest', colors.N300)};
   font-size: 12px;
   font-weight: normal;
   line-height: ${16 / 12};
@@ -241,7 +241,7 @@ export const Byline = styled.div`
 `;
 export const Description = styled.div`
   margin-top: 7px;
-  color: ${colors.N800};
+  color: ${token('color.text', colors.N800)};
   font-size: 12px;
   font-weight: normal;
   line-height: ${18 / 12};
@@ -256,7 +256,7 @@ export const Thumbnail = styled.div`
   ${size(48)}
   float: right;
   margin: 4px 0 12px 12px;
-  background-color: ${colors.N30};
+  background-color: ${token('color.skeleton', colors.N30)};
   background-image: url(${({
   src
 }) => src});

package/dist/es2019/view/EmbedCard/views/ErroredView.js

@@ -4,6 +4,7 @@ import Button from '@atlaskit/button/custom-theme-button';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { fontSize } from '@atlaskit/theme/constants';
 import { R300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { Frame } from '../../BlockCard/components/Frame';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui/messages';
@@ -20,7 +21,7 @@ export const EmbedCardErroredView = ({
   testId: testId
 }, jsx(ErrorIcon, {
   size: "small",
-  primaryColor: R300,
+  primaryColor: token('color.icon.danger', R300),
   label: "error-icon"
 }), jsx("span", {
   css: {

package/dist/es2019/view/FlexibleCard/components/actions/action/index.js

@@ -27,7 +27,23 @@ const getIconStyles = size => css`
   ${getIconSizeStyles(getIconWidth(size))};
 `;
 
-const getButtonStyle = (size, iconOnly) => size === SmartLinkSize.Small ? css`
+const getButtonStyle = (size, iconOnly) => {
+  switch (size) {
+    case SmartLinkSize.Large:
+      return iconOnly ? css`
+            button,
+            button:hover,
+            button:focus,
+            button:active {
+              padding: 0;
+              > span {
+                margin: 0;
+              }
+            }
+          ` : '';
+
+    case SmartLinkSize.Small:
+      return css`
         font-size: 0.75rem;
         font-weight: 500;
         line-height: 1rem;
@@ -43,7 +59,14 @@ const getButtonStyle = (size, iconOnly) => size === SmartLinkSize.Small ? css`
             padding-right: 0.25rem;
           `}
         }
-      ` : '';
+      `;
+
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Medium:
+    default:
+      return '';
+  }
+};
 
 const ActionIcon = ({
   size,
@@ -60,6 +83,14 @@ export const sizeToSpacing = {
   [SmartLinkSize.Large]: 'compact',
   [SmartLinkSize.XLarge]: 'default'
 };
+/**
+ * An action that can be triggered with an on click.
+ * @public
+ * @param {ActionProps} ActionProps - The props necessary for the Action.
+ * @see DeleteAction
+ * @see EditAction
+ * @see CustomAction
+ */
 
 const Action = ({
   appearance = 'subtle',
@@ -70,7 +101,8 @@ const Action = ({
   icon,
   iconPosition = 'before',
   tooltipMessage,
-  asDropDownItem
+  asDropDownItem,
+  overrideCss
 }) => {
   if (!onClick) {
     return null;
@@ -99,7 +131,8 @@ const Action = ({
     return jsx(Tooltip, {
       content: tooltipMessage
     }, jsx("div", {
-      css: getButtonStyle(size, iconOnly)
+      css: [getButtonStyle(size, iconOnly), overrideCss],
+      "data-testid": `${testId}-button-wrapper`
     }, jsx(Button, {
       spacing: sizeToSpacing[size],
       appearance: appearance,

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

@@ -2,9 +2,25 @@ import { ActionName } from '../../../../constants';
 import { createUIAction } from './utils'; // Attention: Keep the export name and action name the same.
 // This will help reducing the code for mapping action inside
 // createAction and renderActionItems
-// UIActions infer that you do not need to get any data from the context.
-// DataActions infer that the action depends on the data from the context.
+
+/**
+ * Creates a DeleteAction component. Accepts default ActionProps, but defaults
+ * the icon to a cross icon.
+ * @see Action
+ */
 
 export const DeleteAction = createUIAction(ActionName.DeleteAction);
+/**
+ * Creates a EditAction component. Accepts default ActionProps, but defaults
+ * the icon to an edit (pencil) icon.
+ * @see Action
+ */
+
 export const EditAction = createUIAction(ActionName.EditAction);
+/**
+ * Creates a CustomAction component. Accepts default ActionProps. Required to provide
+ * your own icon or text.
+ * @see Action
+ */
+
 export const CustomAction = createUIAction(ActionName.CustomAction);

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -13,6 +13,12 @@ const styles = css`
   display: inline-flex;
   line-height: 1rem;
 `;
+/**
+ * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
+ * preferences.
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
 
 const ActionGroup = ({
   items = [],

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

@@ -12,15 +12,22 @@ const getBlockStyles = (direction, size) => css`
     margin-right: ${getGapSize(size)}rem;
   }
 `;
+/**
+ * A block represents a collection of elements and actions that are arranged in a row.
+ * All elements and actions should be contained within a Block.
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
+
 
 const Block = ({
   children,
   direction = SmartLinkDirection.Horizontal,
   size = SmartLinkSize.Medium,
   testId = 'smart-block',
-  extraCss
+  overrideCss
 }) => jsx("div", {
-  css: [getBlockStyles(direction, size), extraCss],
+  css: [getBlockStyles(direction, size), overrideCss],
   "data-smart-block": true,
   "data-testid": testId
 }, renderChildren(children, size));

package/dist/es2019/view/FlexibleCard/components/blocks/element-group/index.js

@@ -27,17 +27,23 @@ export const getElementGroupStyles = (direction, size, align, width) => css`
   min-width: 10%;
   ${width === SmartLinkWidth.Flexible ? `flex: 1 3;` : ''}
 `;
+/**
+ * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
+ * preferences.
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
 
 const ElementGroup = ({
   align = SmartLinkAlignment.Left,
   children,
-  css,
+  overrideCss,
   direction = SmartLinkDirection.Horizontal,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-group',
   width = SmartLinkWidth.FitToContent
 }) => jsx("div", {
-  css: [getElementGroupStyles(direction, size, align, width), css],
+  css: [getElementGroupStyles(direction, size, align, width), overrideCss],
   "data-smart-element-group": true,
   "data-testid": testId
 }, renderChildren(children, size));

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

@@ -5,6 +5,12 @@ import Block from '../block';
 import ElementGroup from '../element-group';
 import { Provider } from '../../elements';
 import ActionGroup from '../action-group';
+/**
+ * Represents a FooterBlock, designed to contain elements and actions that should appear
+ * at the bottom of a link card.
+ * @param {FooterBlockProps} FooterBlockProps
+ * @see Block
+ */
 
 const FooterBlock = props => {
   const {

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

@@ -60,6 +60,13 @@ const getMaxLines = maxLines => {
 
   return maxLines;
 };
+/**
+ * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
+ * Accepts an array of elements to be shown either primary (left hand side) or secondary (right hand side).
+ * @param {MetadataBlockProps} MetadataBlockProps
+ * @see Block
+ */
+
 
 const MetadataBlock = ({
   maxLines = DEFAULT_MAX_LINES,
@@ -83,12 +90,12 @@ const MetadataBlock = ({
     testId: `${testId}-resolved-view`
   }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Left,
-    css: elementGroupStyles,
+    overrideCss: elementGroupStyles,
     direction: SmartLinkDirection.Horizontal,
     width: SmartLinkWidth.Flexible
   }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Right,
-    css: elementGroupStyles,
+    overrideCss: elementGroupStyles,
     direction: SmartLinkDirection.Horizontal,
     width: SmartLinkWidth.Flexible
   }, secondaryElements));

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

@@ -3,6 +3,11 @@ import React from 'react';
 import { SmartLinkStatus } from '../../../../../constants';
 import Block from '../block';
 import { Preview } from '../../elements';
+/**
+ * Represents a PreviewBlock, which typically contains media or other large format content.
+ * @param {PreviewBlock} PreviewBlock
+ * @see Block
+ */
 
 const PreviewBlock = ({
   status = SmartLinkStatus.Fallback,

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

@@ -7,6 +7,11 @@ import { getMaxLines } from '../../utils';
 const DEFAULT_MAX_LINES = 3;
 const MAXIMUM_MAX_LINES = 3;
 const MINIMUM_MAX_LINES = 1;
+/**
+ * Represents a SnippetBlock, which is used to display longer form text content, like descriptions.
+ * @param {SnippetBlock} SnippetBlock
+ * @see Block
+ */
 
 const SnippetBlock = ({
   maxLines = DEFAULT_MAX_LINES,

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;