@atlaskit/smart-card 17.2.1 → 17.4.0

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

@@ -1,8 +1,28 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/core';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 var MAX_COUNT = 4;
 
+var getStyles = function getStyles(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      // Default AK small size
+      return;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])));
+  }
+};
+
 var AvatarGroup = function AvatarGroup(_ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
@@ -17,13 +37,15 @@ var AvatarGroup = function AvatarGroup(_ref) {
     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/esm/view/FlexibleCard/components/elements/badge/index.js

@@ -17,7 +17,7 @@ var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLite
 var labelStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n"])), tokens.badgeText);
 var messageMapper = (_messageMapper = {}, _defineProperty(_messageMapper, IconType.PriorityBlocker, messages.priority_blocker), _defineProperty(_messageMapper, IconType.PriorityCritical, messages.priority_critical), _defineProperty(_messageMapper, IconType.PriorityHigh, messages.priority_high), _defineProperty(_messageMapper, IconType.PriorityHighest, messages.priority_highest), _defineProperty(_messageMapper, IconType.PriorityLow, messages.priority_low), _defineProperty(_messageMapper, IconType.PriorityLowest, messages.priority_lowest), _defineProperty(_messageMapper, IconType.PriorityMajor, messages.priority_major), _defineProperty(_messageMapper, IconType.PriorityMedium, messages.priority_medium), _defineProperty(_messageMapper, IconType.PriorityMinor, messages.priority_minor), _defineProperty(_messageMapper, IconType.PriorityTrivial, messages.priority_trivial), _defineProperty(_messageMapper, IconType.PriorityUndefined, messages.priority_undefined), _messageMapper);
 
-var getFormattedMessageOrLabel = function getFormattedMessageOrLabel(icon, content) {
+var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
   if (icon) {
     var descriptor = messageMapper[icon];
 
@@ -27,8 +27,6 @@ var getFormattedMessageOrLabel = function getFormattedMessageOrLabel(icon, conte
       });
     }
   }
-
-  return content;
 };
 
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
@@ -56,7 +54,7 @@ var Badge = function Badge(_ref) {
       label = _ref.label,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId;
-  var formattedMessageOrLabel = getFormattedMessageOrLabel(icon, label);
+  var formattedMessageOrLabel = getFormattedMessageFromIcon(icon) || label;
   var badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
 
   if (!formattedMessageOrLabel || !badgeIcon) {

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

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

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

@@ -7,10 +7,15 @@ import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), tokens.text, getTruncateStyles(1));
+
+var getStyles = function getStyles(maxLines) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), tokens.text, getTruncateStyles(maxLines));
+};
 
 var Text = function Text(_ref) {
   var content = _ref.content,
+      _ref$maxLines = _ref.maxLines,
+      maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
       message = _ref.message,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-text' : _ref$testId;
@@ -20,7 +25,7 @@ var Text = function Text(_ref) {
   }
 
   return jsx("span", {
-    css: styles,
+    css: getStyles(maxLines),
     "data-smart-element-text": true,
     "data-testid": testId
   }, getFormattedMessage(message) || content);

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

@@ -36,6 +36,11 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   props: {
     icon: IconType.ProgrammingLanguage
   }
+}), _defineProperty(_elementMappings, ElementName.Snippet, {
+  component: Text,
+  props: {
+    maxLines: 3
+  }
 }), _defineProperty(_elementMappings, ElementName.State, {
   component: Lozenge
 }), _defineProperty(_elementMappings, ElementName.SubscriberCount, {
@@ -49,6 +54,8 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   component: DateTime
 }), _defineProperty(_elementMappings, ElementName.ModifiedOn, {
   component: DateTime
+}), _defineProperty(_elementMappings, ElementName.Provider, {
+  component: Badge
 }), _elementMappings);
 
 var getContextKey = function getContextKey(name) {
@@ -57,17 +64,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;
@@ -76,52 +72,81 @@ var getData = function getData(elementName, contextKey, context) {
   var 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;
   }
 };
 
+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 toTextProps = function toTextProps(content) {
+  return content ? {
+    content: content
+  } : undefined;
+};
+
 export var createElement = function createElement(name) {
   var _ref = elementMappings[name] || {},
       BaseElement = _ref.component,

package/dist/types/__fixtures__/flexible-ui-data-context.d.ts

@@ -0,0 +1,3 @@
+import { FlexibleUiDataContext } from '../state/flexible-ui-context/types';
+declare const context: FlexibleUiDataContext;
+export default context;

package/dist/types/constants.d.ts

@@ -45,9 +45,11 @@ export declare enum ElementName {
     ModifiedOn = "ModifiedOn",
     Priority = "Priority",
     ProgrammingLanguage = "ProgrammingLanguage",
+    Snippet = "Snippet",
     State = "State",
     SubscriberCount = "SubscriberCount",
-    Title = "Title"
+    Title = "Title",
+    Provider = "Provider"
 }
 export declare enum ActionName {
     DeleteAction = "DeleteAction"

package/dist/types/extractors/flexible/icon/extract-provider-icon.d.ts

@@ -1,4 +1,4 @@
 import { JsonLd } from 'json-ld-types';
 import { IconDescriptor } from './types';
-declare const extractProviderIcon: (provider?: string | undefined, icon?: string | JsonLd.Primitives.LinkModel | JsonLd.Primitives.Image | undefined, label?: string | undefined) => IconDescriptor | undefined;
+declare const extractProviderIcon: (data?: JsonLd.Data.BaseData | undefined) => IconDescriptor | undefined;
 export default extractProviderIcon;

package/dist/types/extractors/flexible/icon/index.d.ts

@@ -3,10 +3,10 @@ import { JsonLd } from 'json-ld-types';
 import { IconType, SmartLinkStatus } from '../../../constants';
 import { CardProviderRenderers } from '../../../state/context/types';
 export declare const extractLinkIcon: (response: JsonLd.Response, renderers?: CardProviderRenderers | undefined) => {
-    icon: IconType | undefined;
-    label: string | undefined;
     render: (() => import("react").ReactNode) | undefined;
-    url: string | undefined;
+    icon?: IconType | undefined;
+    label?: string | undefined;
+    url?: string | undefined;
 };
 export declare const extractErrorIcon: (response?: JsonLd.Response<JsonLd.Data.BaseData> | undefined, status?: SmartLinkStatus | undefined) => {
     icon: IconType | undefined;

package/dist/types/extractors/flexible/icon/types.d.ts

@@ -1,2 +1,6 @@
 import { IconType } from '../../../constants';
-export declare type IconDescriptor = [IconType?, string?, string?];
+export declare type IconDescriptor = {
+    icon?: IconType;
+    label?: string;
+    url?: string;
+};

package/dist/types/state/flexible-ui-context/types.d.ts

@@ -2,6 +2,8 @@ import { LinkLozenge } from '../../extractors/common/lozenge/types';
 import { LinkPerson } from '../../extractors/common/person/types';
 import { IconType } from '../../constants';
 export declare type FlexibleUiDataContext = {
+    authorGroup?: LinkPerson[];
+    collaboratorGroup?: LinkPerson[];
     commentCount?: number;
     createdBy?: string;
     createdOn?: string;
@@ -10,12 +12,12 @@ export declare type FlexibleUiDataContext = {
     modifiedOn?: string;
     priority?: Icon;
     programmingLanguage?: string;
+    snippet?: string;
     subscriberCount?: number;
     state?: LinkLozenge;
     title?: string;
     url?: string;
-    authorGroup?: LinkPerson[];
-    collaboratorGroup?: LinkPerson[];
+    provider?: Icon;
 };
 export declare type Icon = {
     icon?: IconType;

package/dist/types/view/FlexibleCard/components/blocks/utils.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { SerializedStyles } from '@emotion/core';
 import { ActionItem, ElementItem } from './types';
-import { SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+export declare type ElementDisplaySchemaType = 'inline' | 'block';
+export declare const ElementDisplaySchema: Record<ElementName, ElementDisplaySchemaType[]>;
 export declare const getGapSize: (size: SmartLinkSize) => number;
 export declare const getBaseStyles: (direction: SmartLinkDirection, size: SmartLinkSize) => SerializedStyles;
 export declare const renderChildren: (children: React.ReactNode, size: SmartLinkSize) => React.ReactNode;
-export declare const renderElementItems: (items?: ElementItem[]) => React.ReactNode | undefined;
+export declare const renderElementItems: (items?: ElementItem[], display?: ElementDisplaySchemaType) => React.ReactNode | undefined;
 export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize) => React.ReactNode | undefined;

package/dist/types/view/FlexibleCard/components/elements/avatar-group/index.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { AvatarGroupProps } from './types';
 declare const AvatarGroup: React.FC<AvatarGroupProps>;

package/dist/types/view/FlexibleCard/components/elements/avatar-group/types.d.ts

@@ -1,5 +1,5 @@
 import { ElementProps } from '../types';
-declare type AvatarItemProps = {
+export declare type AvatarItemProps = {
     src?: string;
     name: string;
 };
@@ -7,4 +7,3 @@ export declare type AvatarGroupProps = ElementProps & {
     items?: AvatarItemProps[];
     maxCount?: number;
 };
-export {};

package/dist/types/view/FlexibleCard/components/elements/index.d.ts

@@ -16,6 +16,8 @@ export declare const ModifiedBy: import("react").FC<TextProps>;
 export declare const ModifiedOn: import("react").FC<DateTimeProps>;
 export declare const Priority: import("react").FC<BadgeProps>;
 export declare const ProgrammingLanguage: import("react").FC<BadgeProps>;
+export declare const Snippet: import("react").FC<TextProps>;
 export declare const State: import("react").FC<LozengeProps>;
 export declare const SubscriberCount: import("react").FC<BadgeProps>;
 export declare const Title: import("react").FC<LinkProps>;
+export declare const Provider: import("react").FC<BadgeProps>;

package/dist/types/view/FlexibleCard/components/elements/text/types.d.ts

@@ -2,5 +2,6 @@ import { ElementProps } from '../types';
 import { MessageProps } from '../../types';
 export declare type TextProps = ElementProps & {
     content?: string;
+    maxLines?: number;
     message?: MessageProps;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "17.2.1",
+  "version": "17.4.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"