@atlaskit/smart-card 17.2.0 → 17.3.2

package/dist/es2019/constants.js

@@ -48,7 +48,19 @@ export let SmartLinkTheme;
   SmartLinkTheme["Link"] = "link";
 })(SmartLinkTheme || (SmartLinkTheme = {}));
 
-export let SmartLinkWidth;
+export let SmartLinkWidth; // When adding an element...
+// 1) Create base element if it doesn't already existed.
+//    Base element are inside src/view/FlexibleCard/components/elements.
+//    E.g. Badge,DateTime, Icon, Lozenge, etc.
+// 2) Update FlexibleUiContext with the new prop for data representing
+//    the element, preferably with the same name as the element itself.
+//    (src/state/flexible-ui-context/types.ts)
+// 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
+// 4) Set base element and data mapping.
+//    (src/view/FlexibleCard/components/elements/utils.tsx)
+// 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
+// 6) Update element ElementDisplaySchema for inline/block display
+//    (src/view/FlexibleCard/components/blocks/utils.tsx)
 
 (function (SmartLinkWidth) {
   SmartLinkWidth["FitToContent"] = "fit-to-content";
@@ -68,6 +80,7 @@ export let ElementName;
   ElementName["ModifiedOn"] = "ModifiedOn";
   ElementName["Priority"] = "Priority";
   ElementName["ProgrammingLanguage"] = "ProgrammingLanguage";
+  ElementName["Snippet"] = "Snippet";
   ElementName["State"] = "State";
   ElementName["SubscriberCount"] = "SubscriberCount";
   ElementName["Title"] = "Title";

package/dist/es2019/extractors/flexible/index.js

@@ -1,4 +1,4 @@
-import { extractLink, extractTitle } from '../common/primitives';
+import { extractLink, extractSummary, extractTitle } from '../common/primitives';
 import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
 import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount } from './utils';
@@ -26,6 +26,8 @@ const extractFlexibleUiContext = (response, renderers) => {
     modifiedOn: extractDateUpdated(data),
     priority: extractPriority(data),
     programmingLanguage: extractProgrammingLanguage(data),
+    snippet: extractSummary(data) || undefined,
+    // Explicitly set here to remove an empty string
     state: extractLozenge(data),
     subscriberCount: extractSubscriberCount(data),
     title: extractTitle(data) || url,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.2.0",
+	"version": "17.3.2",
 	"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/metadata-block/index.js

@@ -13,12 +13,11 @@ 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. 1.75 is the The maximum height of
-  //    all elements in specific size. This height belongs to AvatarGroup.
+  //    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 = 1.75;
+  const lineHeight = getLineHeight(size);
   const gap = getGapSize(size);
   const gapHeight = gap * (maxLines - 1);
   const height = lineHeight * maxLines + gapHeight;
@@ -35,6 +34,21 @@ const getElementGroupStyles = (size, maxLines) => {
   `;
 };
 
+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;

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

@@ -1,12 +1,29 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { css } from '@emotion/core';
-import { SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
 import * as Elements from '../elements';
 import * as Actions from '../actions';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
-import ElementGroup from './element-group';
+import ElementGroup from './element-group'; // Determine whether the element can be display as inline/block.
+
+export const ElementDisplaySchema = {
+  [ElementName.AuthorGroup]: ['inline'],
+  [ElementName.CollaboratorGroup]: ['inline'],
+  [ElementName.CommentCount]: ['inline'],
+  [ElementName.CreatedBy]: ['inline'],
+  [ElementName.CreatedOn]: ['inline'],
+  [ElementName.LinkIcon]: ['inline'],
+  [ElementName.ModifiedBy]: ['inline'],
+  [ElementName.ModifiedOn]: ['inline'],
+  [ElementName.Priority]: ['inline'],
+  [ElementName.ProgrammingLanguage]: ['inline'],
+  [ElementName.Snippet]: ['block'],
+  [ElementName.State]: ['inline'],
+  [ElementName.SubscriberCount]: ['inline'],
+  [ElementName.Title]: ['inline']
+};
 
 const getDirectionStyles = direction => {
   switch (direction) {
@@ -62,6 +79,16 @@ export const getBaseStyles = (direction, size) => css`
 
 const isActionGroup = node => /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;
 
+const isElementDisplayValid = (name, display) => {
+  var _ElementDisplaySchema, _ElementDisplaySchema2;
+
+  return (_ElementDisplaySchema = (_ElementDisplaySchema2 = ElementDisplaySchema[name]) === null || _ElementDisplaySchema2 === void 0 ? void 0 : _ElementDisplaySchema2.includes(display)) !== null && _ElementDisplaySchema !== void 0 ? _ElementDisplaySchema : false;
+};
+
+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 => {
@@ -77,7 +104,7 @@ export const renderChildren = (children, size) => React.Children.map(children, c
 
   return child;
 });
-export const renderElementItems = (items = []) => {
+export const renderElementItems = (items = [], display = 'inline') => {
   const elements = items.reduce((acc, curr, idx) => {
     const {
       name,
@@ -85,10 +112,14 @@ export const renderElementItems = (items = []) => {
     } = curr;
     const Element = Elements[name];
 
-    if (Element) {
-      return [...acc, /*#__PURE__*/React.createElement(Element, _extends({
+    if (Element && isElementDisplayValid(name, display)) {
+      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/index.js

@@ -13,6 +13,7 @@ export const ModifiedBy = createElement(ElementName.ModifiedBy);
 export const ModifiedOn = createElement(ElementName.ModifiedOn);
 export const Priority = createElement(ElementName.Priority);
 export const ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
+export const Snippet = createElement(ElementName.Snippet);
 export const State = createElement(ElementName.State);
 export const SubscriberCount = createElement(ElementName.SubscriberCount);
 export const Title = createElement(ElementName.Title);

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

@@ -3,15 +3,17 @@ import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
-const styles = css`
+
+const getStyles = maxLines => css`
   color: ${tokens.text};
   font-size: 0.75rem;
   line-height: 1rem;
-  ${getTruncateStyles(1)}
+  ${getTruncateStyles(maxLines)}
 `;
 
 const Text = ({
   content,
+  maxLines = 1,
   message,
   testId = 'smart-element-text'
 }) => {
@@ -20,7 +22,7 @@ const Text = ({
   }
 
   return jsx("span", {
-    css: styles,
+    css: getStyles(maxLines),
     "data-smart-element-text": true,
     "data-testid": testId
   }, getFormattedMessage(message) || content);

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

@@ -41,6 +41,12 @@ const elementMappings = {
       icon: IconType.ProgrammingLanguage
     }
   },
+  [ElementName.Snippet]: {
+    component: Text,
+    props: {
+      maxLines: 3
+    }
+  },
   [ElementName.State]: {
     component: Lozenge
   },
@@ -67,15 +73,6 @@ const getContextKey = name => {
   return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
 };
 
-const getFormattedMessage = (descriptor, value) => value ? {
-  message: {
-    descriptor,
-    values: {
-      context: value
-    }
-  }
-} : undefined;
-
 const getData = (elementName, contextKey, context) => {
   if (!context) {
     return undefined;
@@ -84,52 +81,81 @@ const getData = (elementName, contextKey, context) => {
   const data = context[contextKey];
 
   switch (elementName) {
+    case ElementName.AuthorGroup:
+    case ElementName.CollaboratorGroup:
+      return toAvatarGroupProps(data);
+
     case ElementName.CommentCount:
     case ElementName.ProgrammingLanguage:
     case ElementName.SubscriberCount:
-      return {
-        label: data
-      };
-
-    case ElementName.AuthorGroup:
-      return {
-        items: context.authorGroup
-      };
-
-    case ElementName.CollaboratorGroup:
-      return {
-        items: context.collaboratorGroup
-      };
+      return toBadgeProps(data);
 
     case ElementName.CreatedBy:
-      return getFormattedMessage(messages.created_by, context.createdBy);
+      return toFormattedTextProps(messages.created_by, context.createdBy);
+
+    case ElementName.CreatedOn:
+      return toDateTimeProps('created', context.createdOn);
 
     case ElementName.ModifiedBy:
-      return getFormattedMessage(messages.modified_by, context.modifiedBy);
+      return toFormattedTextProps(messages.modified_by, context.modifiedBy);
 
     case ElementName.ModifiedOn:
-      return context.modifiedOn ? {
-        date: new Date(context.modifiedOn),
-        type: 'modified'
-      } : undefined;
+      return toDateTimeProps('modified', context.modifiedOn);
 
-    case ElementName.CreatedOn:
-      return context.createdOn ? {
-        date: new Date(context.createdOn),
-        type: 'created'
-      } : undefined;
+    case ElementName.Snippet:
+      return toTextProps(data);
 
     case ElementName.Title:
-      return {
-        text: context.title,
-        url: context.url
-      };
+      return toLinkProps(context.title, context.url);
 
     default:
       return data;
   }
 };
 
+const toAvatarGroupProps = items => {
+  return items ? {
+    items
+  } : undefined;
+};
+
+const toBadgeProps = label => {
+  return label ? {
+    label
+  } : undefined;
+};
+
+const toDateTimeProps = (type, dateString) => {
+  return dateString ? {
+    date: new Date(dateString),
+    type
+  } : undefined;
+};
+
+const toFormattedTextProps = (descriptor, context) => {
+  return context ? {
+    message: {
+      descriptor,
+      values: {
+        context
+      }
+    }
+  } : undefined;
+};
+
+const toLinkProps = (text, url) => {
+  return text ? {
+    text,
+    url
+  } : undefined;
+};
+
+const toTextProps = content => {
+  return content ? {
+    content
+  } : undefined;
+};
+
 export const createElement = name => {
   const {
     component: BaseElement,

package/dist/esm/constants.js

@@ -48,7 +48,19 @@ export var SmartLinkTheme;
   SmartLinkTheme["Link"] = "link";
 })(SmartLinkTheme || (SmartLinkTheme = {}));
 
-export var SmartLinkWidth;
+export var SmartLinkWidth; // When adding an element...
+// 1) Create base element if it doesn't already existed.
+//    Base element are inside src/view/FlexibleCard/components/elements.
+//    E.g. Badge,DateTime, Icon, Lozenge, etc.
+// 2) Update FlexibleUiContext with the new prop for data representing
+//    the element, preferably with the same name as the element itself.
+//    (src/state/flexible-ui-context/types.ts)
+// 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
+// 4) Set base element and data mapping.
+//    (src/view/FlexibleCard/components/elements/utils.tsx)
+// 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
+// 6) Update element ElementDisplaySchema for inline/block display
+//    (src/view/FlexibleCard/components/blocks/utils.tsx)
 
 (function (SmartLinkWidth) {
   SmartLinkWidth["FitToContent"] = "fit-to-content";
@@ -68,6 +80,7 @@ export var ElementName;
   ElementName["ModifiedOn"] = "ModifiedOn";
   ElementName["Priority"] = "Priority";
   ElementName["ProgrammingLanguage"] = "ProgrammingLanguage";
+  ElementName["Snippet"] = "Snippet";
   ElementName["State"] = "State";
   ElementName["SubscriberCount"] = "SubscriberCount";
   ElementName["Title"] = "Title";

package/dist/esm/extractors/flexible/index.js

@@ -1,4 +1,4 @@
-import { extractLink, extractTitle } from '../common/primitives';
+import { extractLink, extractSummary, extractTitle } from '../common/primitives';
 import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
 import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount } from './utils';
@@ -26,6 +26,8 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     modifiedOn: extractDateUpdated(data),
     priority: extractPriority(data),
     programmingLanguage: extractProgrammingLanguage(data),
+    snippet: extractSummary(data) || undefined,
+    // Explicitly set here to remove an empty string
     state: extractLozenge(data),
     subscriberCount: extractSubscriberCount(data),
     title: extractTitle(data) || url,

package/dist/esm/version.json

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