@atlaskit/smart-card 17.2.1 → 17.4.0

package/dist/es2019/extractors/flexible/icon/extract-jira-task-icon.js

@@ -3,32 +3,59 @@ import { IconType } from '../../../constants';
 const extractJiraTaskIcon = (taskType, label = 'Task') => {
   switch (taskType) {
     case 'JiraBug':
-      return [IconType.Bug, label];
+      return {
+        icon: IconType.Bug,
+        label
+      };
 
     case 'JiraChange':
-      return [IconType.Change, label];
+      return {
+        icon: IconType.Change,
+        label
+      };
 
     case 'JiraEpic':
-      return [IconType.Epic, label];
+      return {
+        icon: IconType.Epic,
+        label
+      };
 
     case 'JiraIncident':
-      return [IconType.Incident, label];
+      return {
+        icon: IconType.Incident,
+        label
+      };
 
     case 'JiraProblem':
-      return [IconType.Problem, label];
+      return {
+        icon: IconType.Problem,
+        label
+      };
 
     case 'JiraServiceRequest':
-      return [IconType.ServiceRequest, label];
+      return {
+        icon: IconType.ServiceRequest,
+        label
+      };
 
     case 'JiraStory':
-      return [IconType.Story, label];
+      return {
+        icon: IconType.Story,
+        label
+      };
 
     case 'JiraSubTask':
-      return [IconType.SubTask, label];
+      return {
+        icon: IconType.SubTask,
+        label
+      };
 
     case 'JiraTask':
     default:
-      return [IconType.Task, label];
+      return {
+        icon: IconType.Task,
+        label
+      };
   }
 };
 

package/dist/es2019/extractors/flexible/icon/extract-jsonld-data-icon.js

@@ -15,7 +15,10 @@ const extractTask = (data, label) => {
     icon: url
   } = extractTaskType(data) || {};
   const taskType = id === null || id === void 0 ? void 0 : id.split('#').pop();
-  const taskIcon = url ? [undefined, label, url] : undefined;
+  const taskIcon = url ? {
+    label,
+    url
+  } : undefined;
   return {
     taskType,
     taskIcon
@@ -39,7 +42,7 @@ const extractJsonldDataIcon = data => {
   const type = extractType(data);
   const urlIcon = extractUrlIcon(data.icon, label);
   const provider = generator === null || generator === void 0 ? void 0 : generator['@id'];
-  const providerIcon = extractProviderIcon(provider, generator === null || generator === void 0 ? void 0 : generator.icon, label);
+  const providerIcon = extractProviderIcon(data);
 
   switch (type) {
     case 'Document':
@@ -68,25 +71,46 @@ const extractJsonldDataIcon = data => {
           taskType,
           taskIcon
         } = extractTask(data);
-        return taskType === 'JiraCustomTaskType' ? taskIcon || urlIcon || providerIcon || [IconType.Task, taskLabel] : extractJiraTaskIcon(taskType, taskLabel);
+        return taskType === 'JiraCustomTaskType' ? taskIcon || urlIcon || providerIcon || {
+          icon: IconType.Task,
+          label: taskLabel
+        } : extractJiraTaskIcon(taskType, taskLabel);
       }
 
-      return [IconType.Task, taskLabel];
+      return {
+        icon: IconType.Task,
+        label: taskLabel
+      };
 
     case 'atlassian:Project':
-      return urlIcon || [IconType.Project, label || 'Project'];
+      return urlIcon || {
+        icon: IconType.Project,
+        label: label || 'Project'
+      };
 
     case 'atlassian:SourceCodeCommit':
-      return [IconType.Commit, label || 'Commit'];
+      return {
+        icon: IconType.Commit,
+        label: label || 'Commit'
+      };
 
     case 'atlassian:SourceCodePullRequest':
-      return [IconType.PullRequest, label || 'Pull request'];
+      return {
+        icon: IconType.PullRequest,
+        label: label || 'Pull request'
+      };
 
     case 'atlassian:SourceCodeReference':
-      return [IconType.Branch, label || 'Reference'];
+      return {
+        icon: IconType.Branch,
+        label: label || 'Reference'
+      };
 
     case 'atlassian:SourceCodeRepository':
-      return [IconType.Repo, label || 'Repository'];
+      return {
+        icon: IconType.Repo,
+        label: label || 'Repository'
+      };
 
     default:
       return providerIcon;

package/dist/es2019/extractors/flexible/icon/extract-provider-icon.js

@@ -1,14 +1,30 @@
 import { CONFLUENCE_GENERATOR_ID, JIRA_GENERATOR_ID } from '../../constants';
 import { IconType } from '../../../constants';
 import extractUrlIcon from './extract-url-icon';
+import { extractTitle } from '../../common/primitives';
+
+const extractProviderIcon = data => {
+  if (!data) {
+    return undefined;
+  }
+
+  const generator = data.generator;
+  const provider = generator === null || generator === void 0 ? void 0 : generator['@id'];
+  const icon = generator === null || generator === void 0 ? void 0 : generator.icon;
+  const label = (generator === null || generator === void 0 ? void 0 : generator.name) || extractTitle(data);
 
-const extractProviderIcon = (provider, icon, label) => {
   if (provider === CONFLUENCE_GENERATOR_ID) {
-    return [IconType.Confluence, label || 'Confluence'];
+    return {
+      icon: IconType.Confluence,
+      label: label || 'Confluence'
+    };
   }
 
   if (provider === JIRA_GENERATOR_ID) {
-    return [IconType.Jira, label || 'Jira'];
+    return {
+      icon: IconType.Jira,
+      label: label || 'Jira'
+    };
   }
 
   return extractUrlIcon(icon, label);

package/dist/es2019/extractors/flexible/icon/extract-url-icon.js

@@ -2,7 +2,10 @@ import { extractUrlFromIconJsonLd } from '../../common/utils';
 
 const extractUrlIcon = (icon, label) => {
   const url = icon && extractUrlFromIconJsonLd(icon);
-  return url ? [undefined, label, url] : undefined;
+  return url ? {
+    label,
+    url
+  } : undefined;
 };
 
 export default extractUrlIcon;

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

@@ -4,22 +4,19 @@ import { IconType, SmartLinkStatus } from '../../../constants';
 import extractIconRenderer from './extract-icon-renderer';
 export const extractLinkIcon = (response, renderers) => {
   const data = response.data;
-  const [icon, label, url] = extractJsonldDataIcon(data) || [];
   const render = extractIconRenderer(data, renderers);
-  return {
-    icon,
-    label,
-    render,
-    url
+  return { ...extractJsonldDataIcon(data),
+    render
   };
 };
 export const extractErrorIcon = (response, status) => {
   // Try to get provider icon first.
   if (response) {
     const data = response.data;
-    const generator = data.generator;
-    const provider = generator === null || generator === void 0 ? void 0 : generator['@id'];
-    const [icon,, url] = extractProviderIcon(provider, generator === null || generator === void 0 ? void 0 : generator.icon) || [];
+    const {
+      icon,
+      url
+    } = extractProviderIcon(data) || {};
 
     if (icon || url) {
       return {

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';
@@ -7,6 +7,7 @@ import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractDateUpdated } from '../common/date/extractDateUpdated';
 import { extractDateCreated } from '../common/date/extractDateCreated';
 import extractPriority from './extract-priority';
+import extractProviderIcon from './icon/extract-provider-icon';
 
 const extractFlexibleUiContext = (response, renderers) => {
   if (!response) {
@@ -26,9 +27,12 @@ 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,
+    provider: extractProviderIcon(data),
     url
   };
 };

package/dist/es2019/version.json

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

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,30 @@
 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'],
+  [ElementName.Provider]: ['inline']
+};
 
 const getDirectionStyles = direction => {
   switch (direction) {
@@ -62,6 +80,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 +105,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 +113,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/common/atlaskit-icon/index.js

@@ -217,6 +217,8 @@ const AtlaskitIcon = ({
     case IconType.Jira:
       // Logo component has a different prop set from other icon components
       return /*#__PURE__*/React.createElement(ImportedIcon, {
+        "data-testId": testId // Confluence and Jira imports don't have native testId prop
+        ,
         textColor: N700,
         iconColor: B200,
         iconGradientStart: B400,

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/badge/index.js

@@ -40,7 +40,7 @@ const messageMapper = {
   [IconType.PriorityUndefined]: messages.priority_undefined
 };
 
-const getFormattedMessageOrLabel = (icon, content) => {
+const getFormattedMessageFromIcon = icon => {
   if (icon) {
     const descriptor = messageMapper[icon];
 
@@ -50,8 +50,6 @@ const getFormattedMessageOrLabel = (icon, content) => {
       });
     }
   }
-
-  return content;
 };
 
 const renderAtlaskitIcon = (icon, testId) => {
@@ -79,7 +77,7 @@ const Badge = ({
   label,
   testId = 'smart-element-badge'
 }) => {
-  const formattedMessageOrLabel = getFormattedMessageOrLabel(icon, label);
+  const formattedMessageOrLabel = getFormattedMessageFromIcon(icon) || label;
   const badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
 
   if (!formattedMessageOrLabel || !badgeIcon) {

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

@@ -13,6 +13,8 @@ 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);
+export const Title = createElement(ElementName.Title);
+export const Provider = createElement(ElementName.Provider);

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
   },
@@ -58,6 +64,9 @@ const elementMappings = {
   },
   [ElementName.ModifiedOn]: {
     component: DateTime
+  },
+  [ElementName.Provider]: {
+    component: Badge
   }
 };
 
@@ -67,15 +76,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 +84,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,9 +80,11 @@ export var ElementName;
   ElementName["ModifiedOn"] = "ModifiedOn";
   ElementName["Priority"] = "Priority";
   ElementName["ProgrammingLanguage"] = "ProgrammingLanguage";
+  ElementName["Snippet"] = "Snippet";
   ElementName["State"] = "State";
   ElementName["SubscriberCount"] = "SubscriberCount";
   ElementName["Title"] = "Title";
+  ElementName["Provider"] = "Provider";
 })(ElementName || (ElementName = {}));
 
 export var ActionName;