@atlaskit/smart-card 17.3.1 → 17.4.2

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

@@ -10,6 +10,8 @@ import AvatarGroup from './avatar-group';
 import Text from './text';
 import { messages } from '../../../../messages';
 import DateTime from './date-time';
+import { tokens } from '../../../../utils/token';
+const SNIPPET_DEFAULT_MAX_LINES = 3;
 const elementMappings = {
   [ElementName.AuthorGroup]: {
     component: AvatarGroup
@@ -41,6 +43,13 @@ const elementMappings = {
       icon: IconType.ProgrammingLanguage
     }
   },
+  [ElementName.Snippet]: {
+    component: Text,
+    props: {
+      color: tokens.snippet,
+      maxLines: SNIPPET_DEFAULT_MAX_LINES
+    }
+  },
   [ElementName.State]: {
     component: Lozenge
   },
@@ -58,6 +67,9 @@ const elementMappings = {
   },
   [ElementName.ModifiedOn]: {
     component: DateTime
+  },
+  [ElementName.Provider]: {
+    component: Badge
   }
 };
 
@@ -96,6 +108,9 @@ const getData = (elementName, contextKey, context) => {
     case ElementName.ModifiedOn:
       return toDateTimeProps('modified', context.modifiedOn);
 
+    case ElementName.Snippet:
+      return toTextProps(data);
+
     case ElementName.Title:
       return toLinkProps(context.title, context.url);
 
@@ -141,6 +156,12 @@ const toLinkProps = (text, url) => {
   } : undefined;
 };
 
+const toTextProps = content => {
+  return content ? {
+    content
+  } : undefined;
+};
+
 export const createElement = name => {
   const {
     component: BaseElement,

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

@@ -80,6 +80,17 @@ export const getLinkSizeStyles = size => {
       `;
   }
 };
+export const getMaxLines = (value, defaultValue, max, min) => {
+  if (value > max) {
+    return defaultValue;
+  }
+
+  if (value < min) {
+    return min;
+  }
+
+  return value;
+};
 export const getTruncateStyles = (maxLines, lineHeight = '1rem') => css`
     display: -webkit-box;
     overflow: hidden;

package/dist/esm/constants.js

@@ -1,4 +1,12 @@
+/**
+ * The alignment of Flexible UI component.
+ */
 export var SmartLinkAlignment;
+/**
+ * The direction of Flexible UI components. It establish the main-axis
+ * or how the child components laid out inside the parent component.
+ * Similar to flex's flex-direction concept.
+ */
 
 (function (SmartLinkAlignment) {
   SmartLinkAlignment["Left"] = "left";
@@ -6,6 +14,10 @@ export var SmartLinkAlignment;
 })(SmartLinkAlignment || (SmartLinkAlignment = {}));
 
 export var SmartLinkDirection;
+/**
+ * The positioning of the component within the parent component.
+ * Similar to flex's align-items or align-self concept.
+ */
 
 (function (SmartLinkDirection) {
   SmartLinkDirection["Horizontal"] = "horizontal";
@@ -13,6 +25,11 @@ export var SmartLinkDirection;
 })(SmartLinkDirection || (SmartLinkDirection = {}));
 
 export var SmartLinkPosition;
+/**
+ * The sizing options of the Flexible UI component. Every component
+ * has or inherits the sizing props. Implementation varies
+ * as per component.
+ */
 
 (function (SmartLinkPosition) {
   SmartLinkPosition["Top"] = "top";
@@ -20,6 +37,9 @@ export var SmartLinkPosition;
 })(SmartLinkPosition || (SmartLinkPosition = {}));
 
 export var SmartLinkSize;
+/**
+ * Smart Links link request status
+ */
 
 (function (SmartLinkSize) {
   SmartLinkSize["XLarge"] = "xlarge";
@@ -29,6 +49,10 @@ export var SmartLinkSize;
 })(SmartLinkSize || (SmartLinkSize = {}));
 
 export var SmartLinkStatus;
+/**
+ * Flexible UI theme available on the Card level.
+ * This determine the styling of the link.
+ */
 
 (function (SmartLinkStatus) {
   SmartLinkStatus["Pending"] = "pending";
@@ -42,6 +66,11 @@ export var SmartLinkStatus;
 })(SmartLinkStatus || (SmartLinkStatus = {}));
 
 export var SmartLinkTheme;
+/**
+ * Determines whether the container size will fit to the content
+ * or expand to the available width or the parent component.
+ * Similar to flex's flex-grow concept.
+ */
 
 (function (SmartLinkTheme) {
   SmartLinkTheme["Black"] = "black";
@@ -49,6 +78,22 @@ export var SmartLinkTheme;
 })(SmartLinkTheme || (SmartLinkTheme = {}));
 
 export var SmartLinkWidth;
+/**
+ * Flexible UI element name - each reflecting the link data its represented.
+ * 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";
@@ -56,6 +101,9 @@ export var SmartLinkWidth;
 })(SmartLinkWidth || (SmartLinkWidth = {}));
 
 export var ElementName;
+/**
+ * Flexible UI action (button)
+ */
 
 (function (ElementName) {
   ElementName["AuthorGroup"] = "AuthorGroup";
@@ -68,12 +116,17 @@ 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;
+/**
+ * Flexible UI icons - each mapped to AK icons.
+ */
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";

package/dist/esm/extractors/flexible/icon/extract-document-type-icon.js

@@ -3,25 +3,46 @@ import { IconType } from '../../../constants';
 var extractDocumentTypeIcon = function extractDocumentTypeIcon(documentType, label) {
   switch (documentType) {
     case 'schema:BlogPosting':
-      return [IconType.Blog, label || 'Blog'];
+      return {
+        icon: IconType.Blog,
+        label: label || 'Blog'
+      };
 
     case 'schema:DigitalDocument':
-      return [IconType.File, label || 'File'];
+      return {
+        icon: IconType.File,
+        label: label || 'File'
+      };
 
     case 'schema:TextDigitalDocument':
-      return [IconType.Document, label || 'Document'];
+      return {
+        icon: IconType.Document,
+        label: label || 'Document'
+      };
 
     case 'schema:PresentationDigitalDocument':
-      return [IconType.Presentation, label || 'Presentation'];
+      return {
+        icon: IconType.Presentation,
+        label: label || 'Presentation'
+      };
 
     case 'schema:SpreadsheetDigitalDocument':
-      return [IconType.Spreadsheet, label || 'Spreadsheet'];
+      return {
+        icon: IconType.Spreadsheet,
+        label: label || 'Spreadsheet'
+      };
 
     case 'atlassian:Template':
-      return [IconType.Template, label || 'Template'];
+      return {
+        icon: IconType.Template,
+        label: label || 'Template'
+      };
 
     case 'atlassian:UndefinedLink':
-      return [IconType.Document, label || 'Undefined link'];
+      return {
+        icon: IconType.Document,
+        label: label || 'Undefined link'
+      };
 
     default:
       return undefined;

package/dist/esm/extractors/flexible/icon/extract-file-formatIcon.js

@@ -4,66 +4,111 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
   switch (fileFormat) {
     // Generic documents
     case 'folder':
-      return [IconType.Folder, 'Folder'];
+      return {
+        icon: IconType.Folder,
+        label: 'Folder'
+      };
 
     case 'text/plain':
     case 'application/vnd.oasis.opendocument.text':
     case 'application/vnd.apple.pages':
-      return [IconType.Document, 'Document'];
+      return {
+        icon: IconType.Document,
+        label: 'Document'
+      };
 
     case 'application/pdf':
-      return [IconType.PDF, 'PDF document'];
+      return {
+        icon: IconType.PDF,
+        label: 'PDF document'
+      };
 
     case 'application/vnd.oasis.opendocument.presentation':
     case 'application/vnd.apple.keynote':
-      return [IconType.Presentation, 'Presentation'];
+      return {
+        icon: IconType.Presentation,
+        label: 'Presentation'
+      };
 
     case 'application/vnd.oasis.opendocument.spreadsheet':
     case 'application/vnd.apple.numbers':
-      return [IconType.Spreadsheet, 'Spreadsheet'];
+      return {
+        icon: IconType.Spreadsheet,
+        label: 'Spreadsheet'
+      };
     // Google Drive
 
     case 'application/vnd.google-apps.document':
-      return [IconType.GoogleDocs, 'Google Docs'];
+      return {
+        icon: IconType.GoogleDocs,
+        label: 'Google Docs'
+      };
 
     case 'application/vnd.google-apps.form':
-      return [IconType.GoogleForms, 'Google Form'];
+      return {
+        icon: IconType.GoogleForms,
+        label: 'Google Form'
+      };
 
     case 'application/vnd.google-apps.spreadsheet':
-      return [IconType.GoogleSheets, 'Google Sheets'];
+      return {
+        icon: IconType.GoogleSheets,
+        label: 'Google Sheets'
+      };
 
     case 'application/vnd.google-apps.presentation':
-      return [IconType.GoogleSlides, 'Google Slides'];
+      return {
+        icon: IconType.GoogleSlides,
+        label: 'Google Slides'
+      };
     // Microsoft
 
     case 'application/vnd.ms-excel':
     case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
-      return [IconType.MSExcel, 'Excel spreadsheet'];
+      return {
+        icon: IconType.MSExcel,
+        label: 'Excel spreadsheet'
+      };
 
     case 'application/vnd.ms-powerpoint':
     case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
-      return [IconType.MSPowerpoint, 'PowerPoint presentation'];
+      return {
+        icon: IconType.MSPowerpoint,
+        label: 'PowerPoint presentation'
+      };
 
     case 'application/msword':
     case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-      return [IconType.MSWord, 'Word document'];
+      return {
+        icon: IconType.MSWord,
+        label: 'Word document'
+      };
 
     case 'image/png':
     case 'image/jpeg':
     case 'image/bmp':
     case 'image/webp':
     case 'image/svg+xml':
-      return [IconType.Image, 'Image'];
+      return {
+        icon: IconType.Image,
+        label: 'Image'
+      };
 
     case 'image/gif':
-      return [IconType.GIF, 'GIF'];
+      return {
+        icon: IconType.GIF,
+        label: 'GIF'
+      };
 
     case 'audio/midi':
     case 'audio/mpeg':
     case 'audio/webm':
     case 'audio/ogg':
     case 'audio/wav':
-      return [IconType.Audio, 'Audio'];
+      return {
+        icon: IconType.Audio,
+        label: 'Audio'
+      };
 
     case 'video/mp4':
     case 'video/quicktime':
@@ -72,13 +117,19 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'video/ogg':
     case 'video/x-ms-wmv':
     case 'video/x-msvideo':
-      return [IconType.Video, 'Video'];
+      return {
+        icon: IconType.Video,
+        label: 'Video'
+      };
     // Others
 
     case 'text/css':
     case 'text/html':
     case 'application/javascript':
-      return [IconType.Code, 'Source Code'];
+      return {
+        icon: IconType.Code,
+        label: 'Source Code'
+      };
 
     case 'application/zip':
     case 'application/x-tar':
@@ -86,19 +137,34 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'application/x-7z-compressed':
     case 'application/x-apple-diskimage':
     case 'application/vnd.rar':
-      return [IconType.Archive, 'Archive'];
+      return {
+        icon: IconType.Archive,
+        label: 'Archive'
+      };
 
     case 'application/dmg':
-      return [IconType.Executable, 'Executable'];
+      return {
+        icon: IconType.Executable,
+        label: 'Executable'
+      };
 
     case 'application/sketch':
-      return [IconType.Sketch, 'Sketch'];
+      return {
+        icon: IconType.Sketch,
+        label: 'Sketch'
+      };
 
     case 'application/octet-stream':
-      return [IconType.Generic, 'Binary file'];
+      return {
+        icon: IconType.Generic,
+        label: 'Binary file'
+      };
 
     case 'application/invision.prototype':
-      return [IconType.Generic, 'Prototype'];
+      return {
+        icon: IconType.Generic,
+        label: 'Prototype'
+      };
 
     default:
       return undefined;

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

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

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

@@ -15,7 +15,10 @@ var extractTask = function extractTask(data, label) {
       url = _ref.icon;
 
   var taskType = id === null || id === void 0 ? void 0 : id.split('#').pop();
-  var taskIcon = url ? [undefined, label, url] : undefined;
+  var taskIcon = url ? {
+    label: label,
+    url: url
+  } : undefined;
   return {
     taskType: taskType,
     taskIcon: taskIcon
@@ -47,7 +50,7 @@ var extractJsonldDataIcon = function extractJsonldDataIcon(data) {
   var type = extractType(data);
   var urlIcon = extractUrlIcon(data.icon, label);
   var provider = generator === null || generator === void 0 ? void 0 : generator['@id'];
-  var providerIcon = extractProviderIcon(provider, generator === null || generator === void 0 ? void 0 : generator.icon, label);
+  var providerIcon = extractProviderIcon(data);
 
   switch (type) {
     case 'Document':
@@ -76,25 +79,46 @@ var extractJsonldDataIcon = function extractJsonldDataIcon(data) {
             taskType = _extractTask.taskType,
             taskIcon = _extractTask.taskIcon;
 
-        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/esm/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';
+
+var extractProviderIcon = function extractProviderIcon(data) {
+  if (!data) {
+    return undefined;
+  }
+
+  var generator = data.generator;
+  var provider = generator === null || generator === void 0 ? void 0 : generator['@id'];
+  var icon = generator === null || generator === void 0 ? void 0 : generator.icon;
+  var label = (generator === null || generator === void 0 ? void 0 : generator.name) || extractTitle(data);
 
-var extractProviderIcon = function 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/esm/extractors/flexible/icon/extract-url-icon.js

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

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

@@ -1,36 +1,28 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import extractJsonldDataIcon from './extract-jsonld-data-icon';
 import extractProviderIcon from './extract-provider-icon';
 import { IconType, SmartLinkStatus } from '../../../constants';
 import extractIconRenderer from './extract-icon-renderer';
 export var extractLinkIcon = function extractLinkIcon(response, renderers) {
   var data = response.data;
-
-  var _ref = extractJsonldDataIcon(data) || [],
-      _ref2 = _slicedToArray(_ref, 3),
-      icon = _ref2[0],
-      label = _ref2[1],
-      url = _ref2[2];
-
   var render = extractIconRenderer(data, renderers);
-  return {
-    icon: icon,
-    label: label,
-    render: render,
-    url: url
-  };
+  return _objectSpread(_objectSpread({}, extractJsonldDataIcon(data)), {}, {
+    render: render
+  });
 };
 export var extractErrorIcon = function extractErrorIcon(response, status) {
   // Try to get provider icon first.
   if (response) {
     var data = response.data;
-    var generator = data.generator;
-    var provider = generator === null || generator === void 0 ? void 0 : generator['@id'];
 
-    var _ref3 = extractProviderIcon(provider, generator === null || generator === void 0 ? void 0 : generator.icon) || [],
-        _ref4 = _slicedToArray(_ref3, 3),
-        icon = _ref4[0],
-        url = _ref4[2];
+    var _ref = extractProviderIcon(data) || {},
+        icon = _ref.icon,
+        url = _ref.url;
 
     if (icon || url) {
       return {