@atlaskit/smart-card 17.1.0 → 17.3.1

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

@@ -57,17 +57,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 +65,72 @@ 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;
-
-    case ElementName.CreatedOn:
-      return context.createdOn ? {
-        date: new Date(context.createdOn),
-        type: 'created'
-      } : undefined;
+      return toDateTimeProps('modified', context.modifiedOn);
 
     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;
+};
+
 export var createElement = function createElement(name) {
   var _ref = elementMappings[name] || {},
       BaseElement = _ref.component,

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

@@ -53,5 +53,5 @@ export var getLinkSizeStyles = function getLinkSizeStyles(size) {
 };
 export var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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 css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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);
 };

package/dist/types/index.d.ts

@@ -17,5 +17,5 @@ export { useSmartLinkEvents } from './view/SmartLinkEvents/useSmartLinkEvents';
 export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName, } from './classNames';
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback';
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, } from './constants';
-export { TitleBlock } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, TitleBlock, } from './view/FlexibleCard/components/blocks';
 export type { ActionItem, ElementItem, } from './view/FlexibleCard/components/blocks/types';

package/dist/types/view/FlexibleCard/components/actions/action/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { ActionProps } from './types';
+declare const Action: React.FC<ActionProps>;
+export default Action;

package/dist/types/view/FlexibleCard/components/actions/action/types.d.ts

@@ -0,0 +1,18 @@
+import { SmartLinkSize } from '../../../../../constants';
+import { Appearance } from '@atlaskit/button/types';
+import { ReactChild } from 'react';
+export declare type ActionProps = {
+    size?: SmartLinkSize;
+    testId?: string;
+    content?: React.ReactNode;
+    appearance?: Appearance;
+    onClick: () => any;
+    icon?: ReactChild;
+    iconPosition?: 'before' | 'after';
+    tooltipMessage?: React.ReactNode;
+};
+export declare type ActionIconProps = {
+    size?: SmartLinkSize;
+    testId?: string;
+    icon?: ReactChild;
+};

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { ActionProps } from './types';
+import { ActionProps } from './action/types';
 export declare const DeleteAction: import("react").FC<ActionProps>;

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

@@ -1,3 +1,4 @@
 import { ActionName } from '../../../../constants';
 import React from 'react';
-export declare const createAction: <P extends {}>(name: ActionName) => React.FC<P>;
+export declare const createDataAction: <P extends {}>(name: ActionName) => React.FC<P>;
+export declare const createUIAction: <P extends {}>(name: ActionName) => React.FC<P>;

package/dist/types/view/FlexibleCard/components/blocks/element-group/types.d.ts

@@ -1,6 +1,8 @@
+import { Interpolation } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 export declare type ElementGroupProps = {
     align?: SmartLinkAlignment;
+    css?: Interpolation;
     direction?: SmartLinkDirection;
     size?: SmartLinkSize;
     testId?: string;

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

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

package/dist/types/view/FlexibleCard/components/blocks/metadata-block/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MetadataBlockProps } from './types';
+declare const MetadataBlock: React.FC<MetadataBlockProps>;
+export default MetadataBlock;

package/dist/types/view/FlexibleCard/components/blocks/metadata-block/types.d.ts

@@ -0,0 +1,6 @@
+import { BlockProps, ElementItem } from '../types';
+export declare type MetadataBlockProps = BlockProps & {
+    maxLines?: number;
+    primary?: ElementItem[];
+    secondary?: ElementItem[];
+};

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { SerializedStyles } from '@emotion/core';
 import { ActionItem, ElementItem } from './types';
 import { SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+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;

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/package.json

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

package/dist/esm/view/FlexibleCard/components/actions/delete-action/index.js

@@ -1,64 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
-/** @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';
-
-var getWidth = function getWidth(size) {
-  switch (size) {
-    case SmartLinkSize.XLarge:
-    case SmartLinkSize.Large:
-      return '1.5rem';
-
-    case SmartLinkSize.Medium:
-    case SmartLinkSize.Small:
-    default:
-      return '1rem';
-  }
-};
-
-var getStyles = function getStyles(size) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n"])), tokens.actionIcon, getIconSizeStyles(getWidth(size)));
-};
-
-var DeleteAction = function DeleteAction(_ref) {
-  var _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
-      content = _ref.content,
-      onClick = _ref.onClick,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-action-delete-action' : _ref$testId;
-
-  if (!onClick) {
-    return null;
-  }
-
-  return jsx(Tooltip, {
-    content: jsx(FormattedMessage, messages.delete)
-  }, jsx(Button, {
-    spacing: "none",
-    appearance: appearance,
-    testId: testId,
-    onClick: handleOnClick(onClick)
-  }, content || jsx("span", {
-    css: getStyles(size),
-    "data-testid": "".concat(testId, "-icon")
-  }, jsx(CrossIcon, {
-    label: "Delete"
-  }))));
-};
-
-export default DeleteAction;

package/dist/types/view/FlexibleCard/components/actions/delete-action/index.d.ts

@@ -1,5 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-import { ActionProps } from '../types';
-declare const DeleteAction: React.FC<ActionProps>;
-export default DeleteAction;

package/dist/types/view/FlexibleCard/components/actions/types.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { SmartLinkSize } from '../../../../constants';
-import { Appearance } from '@atlaskit/button/types';
-export declare type ActionProps = {
-    size?: SmartLinkSize;
-    testId?: string;
-    content?: React.ReactNode;
-    appearance?: Appearance;
-    onClick: () => any;
-};