@atlaskit/smart-card 17.1.0 → 17.3.1

package/dist/cjs/view/FlexibleCard/components/elements/utils.js

@@ -84,17 +84,6 @@ var getContextKey = function getContextKey(name) {
   return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
 };
 
-var getFormattedMessage = function getFormattedMessage(descriptor, value) {
-  return value ? {
-    message: {
-      descriptor: descriptor,
-      values: {
-        context: value
-      }
-    }
-  } : undefined;
-};
-
 var getData = function getData(elementName, contextKey, context) {
   if (!context) {
     return undefined;
@@ -103,52 +92,72 @@ var getData = function getData(elementName, contextKey, context) {
   var data = context[contextKey];
 
   switch (elementName) {
+    case _constants.ElementName.AuthorGroup:
+    case _constants.ElementName.CollaboratorGroup:
+      return toAvatarGroupProps(data);
+
     case _constants.ElementName.CommentCount:
     case _constants.ElementName.ProgrammingLanguage:
     case _constants.ElementName.SubscriberCount:
-      return {
-        label: data
-      };
-
-    case _constants.ElementName.AuthorGroup:
-      return {
-        items: context.authorGroup
-      };
-
-    case _constants.ElementName.CollaboratorGroup:
-      return {
-        items: context.collaboratorGroup
-      };
+      return toBadgeProps(data);
 
     case _constants.ElementName.CreatedBy:
-      return getFormattedMessage(_messages.messages.created_by, context.createdBy);
+      return toFormattedTextProps(_messages.messages.created_by, context.createdBy);
+
+    case _constants.ElementName.CreatedOn:
+      return toDateTimeProps('created', context.createdOn);
 
     case _constants.ElementName.ModifiedBy:
-      return getFormattedMessage(_messages.messages.modified_by, context.modifiedBy);
+      return toFormattedTextProps(_messages.messages.modified_by, context.modifiedBy);
 
     case _constants.ElementName.ModifiedOn:
-      return context.modifiedOn ? {
-        date: new Date(context.modifiedOn),
-        type: 'modified'
-      } : undefined;
-
-    case _constants.ElementName.CreatedOn:
-      return context.createdOn ? {
-        date: new Date(context.createdOn),
-        type: 'created'
-      } : undefined;
+      return toDateTimeProps('modified', context.modifiedOn);
 
     case _constants.ElementName.Title:
-      return {
-        text: context.title,
-        url: context.url
-      };
+      return toLinkProps(context.title, context.url);
 
     default:
       return data;
   }
 };
 
+var toAvatarGroupProps = function toAvatarGroupProps(items) {
+  return items ? {
+    items: items
+  } : undefined;
+};
+
+var toBadgeProps = function toBadgeProps(label) {
+  return label ? {
+    label: label
+  } : undefined;
+};
+
+var toDateTimeProps = function toDateTimeProps(type, dateString) {
+  return dateString ? {
+    date: new Date(dateString),
+    type: type
+  } : undefined;
+};
+
+var toFormattedTextProps = function toFormattedTextProps(descriptor, context) {
+  return context ? {
+    message: {
+      descriptor: descriptor,
+      values: {
+        context: context
+      }
+    }
+  } : undefined;
+};
+
+var toLinkProps = function toLinkProps(text, url) {
+  return text ? {
+    text: text,
+    url: url
+  } : undefined;
+};
+
 var createElement = function createElement(name) {
   var _ref = elementMappings[name] || {},
       BaseElement = _ref.component,

package/dist/cjs/view/FlexibleCard/components/utils.js

@@ -78,7 +78,7 @@ exports.getLinkSizeStyles = getLinkSizeStyles;
 
 var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
-  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    flex: 1 1 auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), maxLines, maxLines, lineHeight);
+  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), maxLines, maxLines, lineHeight);
 };
 
 exports.getTruncateStyles = getTruncateStyles;

package/dist/es2019/index.js

@@ -13,4 +13,4 @@ export { contentFooterClassName, metadataListClassName, blockCardResolvingViewCl
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback'; // Flexible UI
 
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
-export { TitleBlock } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, TitleBlock } from './view/FlexibleCard/components/blocks';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.1.0",
+	"version": "17.3.1",
 	"sideEffects": false
 }

package/dist/es2019/view/FlexibleCard/components/actions/{delete-action → action}/index.js

@@ -1,13 +1,10 @@
 /** @jsx jsx */
 import React from 'react';
-import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
 import Button from '@atlaskit/button/custom-theme-button';
-import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { SmartLinkSize } from '../../../../../constants';
 import Tooltip from '@atlaskit/tooltip';
 import { getIconSizeStyles } from '../../utils';
-import { messages } from '../../../../../messages';
 import { tokens } from '../../../../../utils/token';
 import { handleOnClick } from '../../../../../utils';
 
@@ -24,35 +21,54 @@ const getWidth = size => {
   }
 };
 
-const getStyles = size => css`
+const getIconStyles = size => css`
   color: ${tokens.actionIcon};
   ${getIconSizeStyles(getWidth(size))};
 `;
 
-const DeleteAction = ({
+const ActionIcon = ({
+  size,
+  testId,
+  icon
+}) => jsx("span", {
+  css: getIconStyles(size),
+  "data-testid": `${testId}-icon`
+}, icon);
+
+const Action = ({
   appearance = 'subtle',
   content,
   onClick,
   size = SmartLinkSize.Medium,
-  testId = 'smart-action-delete-action'
+  testId = 'smart-action',
+  icon,
+  iconPosition = 'before',
+  tooltipMessage
 }) => {
   if (!onClick) {
     return null;
   }
 
+  const iconBefore = iconPosition === 'before' ? jsx(ActionIcon, {
+    size: size,
+    testId: testId,
+    icon: icon
+  }) : undefined;
+  const iconAfter = iconPosition === 'after' ? jsx(ActionIcon, {
+    size: size,
+    testId: testId,
+    icon: icon
+  }) : undefined;
   return jsx(Tooltip, {
-    content: jsx(FormattedMessage, messages.delete)
+    content: tooltipMessage
   }, jsx(Button, {
     spacing: "none",
     appearance: appearance,
     testId: testId,
-    onClick: handleOnClick(onClick)
-  }, content || jsx("span", {
-    css: getStyles(size),
-    "data-testid": `${testId}-icon`
-  }, jsx(CrossIcon, {
-    label: "Delete"
-  }))));
+    onClick: handleOnClick(onClick),
+    iconBefore: iconBefore,
+    iconAfter: iconAfter
+  }, content));
 };
 
-export default DeleteAction;
+export default Action;

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

@@ -1,6 +1,8 @@
 import { ActionName } from '../../../../constants';
-import { createAction } from './utils';
-// Attention: Keep the export name and action name the same.
+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
-export const DeleteAction = createAction(ActionName.DeleteAction);
+// 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.
+
+export const DeleteAction = createUIAction(ActionName.DeleteAction);

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

@@ -2,10 +2,20 @@ import _extends from "@babel/runtime/helpers/extends";
 import { ActionName } from '../../../../constants';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import React, { useContext } from 'react';
-import DeleteAction from './delete-action';
+import Action from './action';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../../../../messages';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
 const actionMappings = {
   [ActionName.DeleteAction]: {
-    component: DeleteAction
+    component: Action,
+    props: {
+      testId: 'smart-action-delete-action',
+      icon: /*#__PURE__*/React.createElement(CrossIcon, {
+        label: "Delete"
+      }),
+      toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
+    }
   }
 };
 
@@ -23,13 +33,12 @@ const getActionData = (actionName, contextKey, context) => {
   const data = context[contextKey];
 
   switch (actionName) {
-    case ActionName.DeleteAction:
     default:
       return data;
   }
 };
 
-export const createAction = name => {
+export const createDataAction = name => {
   const {
     component: BaseAction,
     props
@@ -45,4 +54,18 @@ export const createAction = name => {
     const data = getActionData(name, contextKey, context);
     return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, data, overrides));
   };
+};
+export const createUIAction = name => {
+  const {
+    component: BaseAction,
+    props
+  } = actionMappings[name] || {};
+
+  if (!BaseAction) {
+    throw Error(`Action ${name} does not exist.`);
+  }
+
+  return overrides => {
+    return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, overrides));
+  };
 };

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

@@ -5,7 +5,7 @@ import { renderActionItems } from '../utils';
 import { SmartLinkSize } from '../../../../../constants';
 const styles = css`
   display: inline-flex;
-  line-height: 0;
+  line-height: 1rem;
 `;
 
 const ActionGroup = ({

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

@@ -4,20 +4,26 @@ import { css, jsx } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 import { getBaseStyles, renderChildren } from '../utils';
 
-const getFlexJustifyContent = align => {
+const getAlignmentStyles = align => {
   switch (align) {
     case SmartLinkAlignment.Right:
-      return 'flex-end';
+      return css`
+        justify-content: flex-end;
+        text-align: right;
+      `;
 
     case SmartLinkAlignment.Left:
     default:
-      return 'flex-start';
+      return css`
+        justify-content: flex-start;
+        text-align: left;
+      `;
   }
 };
 
 export const getElementGroupStyles = (direction, size, align, width) => css`
   ${getBaseStyles(direction, size)}
-  justify-content: ${getFlexJustifyContent(align)};
+  ${getAlignmentStyles(align)}
   min-width: 10%;
   ${width === SmartLinkWidth.Flexible ? `flex: 1 3;` : ''}
 `;
@@ -25,12 +31,13 @@ export const getElementGroupStyles = (direction, size, align, width) => css`
 const ElementGroup = ({
   align = SmartLinkAlignment.Left,
   children,
+  css,
   direction = SmartLinkDirection.Horizontal,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-group',
   width = SmartLinkWidth.FitToContent
 }) => jsx("div", {
-  css: getElementGroupStyles(direction, size, align, width),
+  css: [getElementGroupStyles(direction, size, align, width), css],
   "data-smart-element-group": true,
   "data-testid": testId
 }, renderChildren(children, size));

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

@@ -1 +1,2 @@
-export { default as TitleBlock } from './title-block';
+export { default as TitleBlock } from './title-block';
+export { default as MetadataBlock } from './metadata-block';

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

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { css } from '@emotion/core';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import { getGapSize, renderElementItems } from '../utils';
+import Block from '../block';
+import ElementGroup from '../element-group';
+const DEFAULT_MAX_LINES = 2;
+const MAXIMUM_MAX_LINES = 2;
+const MINIMUM_MAX_LINES = 1;
+
+const getElementGroupStyles = (size, maxLines) => {
+  // MetadataBlock allows metadata elements to be displayed in
+  // multiple lines, with maximum of 2 lines.
+  // a) We need the height of the line to be equal on both left and right
+  //    sides so they line up nicely.
+  // b) There is no way to truncate non-text elements nicely. Here
+  //    it's fix max height of the element group so that anything that is
+  //    overflown will not be visible.
+  const lineHeight = getLineHeight(size);
+  const gap = getGapSize(size);
+  const gapHeight = gap * (maxLines - 1);
+  const height = lineHeight * maxLines + gapHeight;
+  return css`
+    flex-wrap: wrap;
+    line-height: ${lineHeight}rem;
+    max-height: ${height}rem;
+    > span,
+    > div {
+      min-height: ${lineHeight}rem;
+      max-height: ${lineHeight}rem;
+      line-height: ${lineHeight}rem;
+    }
+  `;
+};
+
+const getLineHeight = size => {
+  // The maximum height of all elements in specific size.
+  // These heights belongs to AvatarGroup.
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return 1.75;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return 1.5;
+  }
+};
+
+const getMaxLines = maxLines => {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+
+  return maxLines;
+};
+
+const MetadataBlock = ({
+  maxLines = DEFAULT_MAX_LINES,
+  status = SmartLinkStatus.Fallback,
+  testId = 'smart-block-metadata',
+  primary = [],
+  secondary = [],
+  ...blockProps
+}) => {
+  if (primary.length === 0 && secondary.length === 0 || status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  const primaryElements = renderElementItems(primary);
+  const secondaryElements = renderElementItems(secondary);
+  const {
+    size = SmartLinkSize.Medium
+  } = blockProps;
+  const elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: `${testId}-resolved-view`
+  }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Left,
+    css: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Right,
+    css: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, secondaryElements));
+};
+
+export default MetadataBlock;

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

@@ -21,6 +21,7 @@ const actionStyles = css`
 const getMessageStyles = (size, hasAction) => {
   const sizeStyles = getLinkSizeStyles(size);
   return css`
+    flex: 1 1 auto;
     justify-content: flex-end;
     ${hasAction ? actionStyles : ''}
     ${sizeStyles}

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -25,26 +25,25 @@ const getDirectionStyles = direction => {
   }
 };
 
-const getGapSize = size => {
+export const getGapSize = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
-      return '1.25rem';
+      return 1.25;
 
     case SmartLinkSize.Large:
-      return '1rem';
+      return 1;
 
     case SmartLinkSize.Medium:
-      return '.5rem';
+      return 0.5;
 
     case SmartLinkSize.Small:
     default:
-      return '.25rem';
+      return 0.25;
   }
 };
-
 export const getBaseStyles = (direction, size) => css`
   display: flex;
-  gap: ${getGapSize(size)};
+  gap: ${getGapSize(size)}rem;
   line-height: 1rem;
   min-width: 0;
   overflow: hidden;
@@ -63,6 +62,10 @@ export const getBaseStyles = (direction, size) => css`
 
 const isActionGroup = node => /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;
 
+const isElementNull = children => {
+  return Boolean(children.type() === null);
+};
+
 const isElementOrElementGroup = node => /*#__PURE__*/React.isValidElement(node) && (isFlexibleUiElement(node) || node.type === ElementGroup);
 
 export const renderChildren = (children, size) => React.Children.map(children, child => {
@@ -87,9 +90,13 @@ export const renderElementItems = (items = []) => {
     const Element = Elements[name];
 
     if (Element) {
-      return [...acc, /*#__PURE__*/React.createElement(Element, _extends({
+      const element = /*#__PURE__*/React.createElement(Element, _extends({
         key: idx
-      }, props))];
+      }, props));
+
+      if (!isElementNull(element)) {
+        return [...acc, element];
+      }
     }
 
     return acc;

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

@@ -1,8 +1,32 @@
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/core';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 const MAX_COUNT = 4;
 
+const getStyles = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      // Default AK small size
+      return;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return css`
+        li {
+          span,
+          svg {
+            max-height: 1.25rem;
+            max-width: 1.25rem;
+          }
+        }
+      `;
+  }
+};
+
 const AvatarGroup = ({
   items = [],
   maxCount = MAX_COUNT,
@@ -13,13 +37,15 @@ const AvatarGroup = ({
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(AtlaskitAvatarGroup, {
+  return jsx("span", {
+    css: getStyles(size)
+  }, jsx(AtlaskitAvatarGroup, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
     data: items,
     testId: testId
-  });
+  }));
 };
 
 export default AvatarGroup;

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

@@ -44,6 +44,7 @@ const getThemeStyles = theme => {
 const getAnchorStyles = (size, theme, maxLines) => {
   const sizeStyles = getLinkSizeStyles(size);
   return css`
+    flex: 1 1 auto;
     ${sizeStyles}
     ${getTruncateStyles(maxLines, getLinkLineHeight(size))}
     // Theme should be last to be spread because it contains override values