@contentful/field-editor-reference 5.23.0 → 5.25.0

package/dist/cjs/resources/Cards/ResourceCard.spec.js

@@ -224,6 +224,6 @@ describe('ResourceCard', ()=>{
         });
         await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
         expect(getByText(_resourcejson.default.fields.title)).toBeDefined();
-        expect(getByText(_resourcetypejson.default.name)).toBeDefined();
+        expect(getByText(`${_resourcetypejson.default.sys.resourceProvider.sys.id} ${_resourcetypejson.default.name}`)).toBeDefined();
     });
 });

package/dist/cjs/resources/ExternalResourceCard/ExternalResourceCard.js

@@ -10,6 +10,14 @@ Object.defineProperty(exports, "ExternalResourceCard", {
 });
 const _react = _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+const _truncate = _interop_require_default(require("truncate"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -56,20 +64,48 @@ const defaultProps = {
     hasCardMoveActions: true,
     hasCardRemoveActions: true
 };
+const styles = {
+    subtitle: (0, _emotion.css)({
+        color: _f36tokens.default.gray600
+    }),
+    description: (0, _emotion.css)({
+        color: _f36tokens.default.gray900
+    })
+};
 function ExternalEntityBadge(badge) {
     return badge ? _react.createElement(_f36components.Badge, {
         variant: badge.variant
     }, badge.label) : null;
 }
-function ExternalResourceCard({ info, isClickable, onEdit, onRemove, onMoveTop, onMoveBottom, hasCardEditActions, hasCardMoveActions, hasCardRemoveActions, renderDragHandle, onClick }) {
+function ExternalResourceCardDescription({ subtitle, description }) {
+    if (!subtitle) {
+        return null;
+    }
+    if (!description) {
+        return _react.createElement(_f36components.Paragraph, {
+            className: styles.description,
+            marginBottom: "none",
+            isWordBreak: true
+        }, subtitle);
+    }
+    const truncatedDescription = (0, _truncate.default)(description, 95, {});
+    return _react.createElement(_react.Fragment, null, _react.createElement(_f36components.Caption, {
+        className: styles.subtitle
+    }, subtitle), _react.createElement(_f36components.Paragraph, {
+        className: styles.description,
+        marginBottom: "none",
+        isWordBreak: true
+    }, truncatedDescription));
+}
+ExternalResourceCardDescription.displayName = 'ExternalResourceCardDescription';
+function ExternalResourceCard({ info, isClickable, onEdit, onRemove, onMoveTop, onMoveBottom, hasCardEditActions, hasCardMoveActions, hasCardRemoveActions, renderDragHandle, onClick, isSelected }) {
     const { resource: entity, resourceType } = info;
     const badge = ExternalEntityBadge(entity.fields.badge);
     return _react.createElement(_f36components.EntryCard, {
         as: entity.fields.externalUrl ? 'a' : 'article',
         href: entity.fields.externalUrl,
         title: entity.fields.title,
-        description: entity.fields.description,
-        contentType: resourceType.name,
+        contentType: `${resourceType.sys.resourceProvider.sys.id} ${resourceType.name}`,
         size: 'auto',
         thumbnailElement: entity.fields.image?.url ? _react.createElement("img", {
             alt: entity.fields.image.altText,
@@ -78,6 +114,7 @@ function ExternalResourceCard({ info, isClickable, onEdit, onRemove, onMoveTop,
         dragHandleRender: renderDragHandle,
         withDragHandle: !!renderDragHandle,
         badge: badge,
+        isSelected: isSelected,
         actions: [
             hasCardEditActions && onEdit ? _react.createElement(_f36components.MenuItem, {
                 key: "edit",
@@ -112,6 +149,9 @@ function ExternalResourceCard({ info, isClickable, onEdit, onRemove, onMoveTop,
             if (onClick) return onClick(e);
             onEdit && onEdit();
         } : undefined
-    });
+    }, _react.createElement(ExternalResourceCardDescription, {
+        subtitle: entity.fields.subtitle,
+        description: entity.fields.description
+    }));
 }
 ExternalResourceCard.defaultProps = defaultProps;

package/dist/esm/resources/Cards/ResourceCard.spec.js

@@ -174,6 +174,6 @@ describe('ResourceCard', ()=>{
         });
         await waitFor(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
         expect(getByText(resource.fields.title)).toBeDefined();
-        expect(getByText(resourceType.name)).toBeDefined();
+        expect(getByText(`${resourceType.sys.resourceProvider.sys.id} ${resourceType.name}`)).toBeDefined();
     });
 });

package/dist/esm/resources/ExternalResourceCard/ExternalResourceCard.js

@@ -1,24 +1,55 @@
 import * as React from 'react';
-import { Badge, EntryCard, MenuItem, MenuDivider } from '@contentful/f36-components';
+import { Badge, EntryCard, MenuItem, MenuDivider, Paragraph, Caption } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+import truncate from 'truncate';
 const defaultProps = {
     isClickable: true,
     hasCardMoveActions: true,
     hasCardRemoveActions: true
 };
+const styles = {
+    subtitle: css({
+        color: tokens.gray600
+    }),
+    description: css({
+        color: tokens.gray900
+    })
+};
 function ExternalEntityBadge(badge) {
     return badge ? React.createElement(Badge, {
         variant: badge.variant
     }, badge.label) : null;
 }
-export function ExternalResourceCard({ info, isClickable, onEdit, onRemove, onMoveTop, onMoveBottom, hasCardEditActions, hasCardMoveActions, hasCardRemoveActions, renderDragHandle, onClick }) {
+function ExternalResourceCardDescription({ subtitle, description }) {
+    if (!subtitle) {
+        return null;
+    }
+    if (!description) {
+        return React.createElement(Paragraph, {
+            className: styles.description,
+            marginBottom: "none",
+            isWordBreak: true
+        }, subtitle);
+    }
+    const truncatedDescription = truncate(description, 95, {});
+    return React.createElement(React.Fragment, null, React.createElement(Caption, {
+        className: styles.subtitle
+    }, subtitle), React.createElement(Paragraph, {
+        className: styles.description,
+        marginBottom: "none",
+        isWordBreak: true
+    }, truncatedDescription));
+}
+ExternalResourceCardDescription.displayName = 'ExternalResourceCardDescription';
+export function ExternalResourceCard({ info, isClickable, onEdit, onRemove, onMoveTop, onMoveBottom, hasCardEditActions, hasCardMoveActions, hasCardRemoveActions, renderDragHandle, onClick, isSelected }) {
     const { resource: entity, resourceType } = info;
     const badge = ExternalEntityBadge(entity.fields.badge);
     return React.createElement(EntryCard, {
         as: entity.fields.externalUrl ? 'a' : 'article',
         href: entity.fields.externalUrl,
         title: entity.fields.title,
-        description: entity.fields.description,
-        contentType: resourceType.name,
+        contentType: `${resourceType.sys.resourceProvider.sys.id} ${resourceType.name}`,
         size: 'auto',
         thumbnailElement: entity.fields.image?.url ? React.createElement("img", {
             alt: entity.fields.image.altText,
@@ -27,6 +58,7 @@ export function ExternalResourceCard({ info, isClickable, onEdit, onRemove, onMo
         dragHandleRender: renderDragHandle,
         withDragHandle: !!renderDragHandle,
         badge: badge,
+        isSelected: isSelected,
         actions: [
             hasCardEditActions && onEdit ? React.createElement(MenuItem, {
                 key: "edit",
@@ -61,6 +93,9 @@ export function ExternalResourceCard({ info, isClickable, onEdit, onRemove, onMo
             if (onClick) return onClick(e);
             onEdit && onEdit();
         } : undefined
-    });
+    }, React.createElement(ExternalResourceCardDescription, {
+        subtitle: entity.fields.subtitle,
+        description: entity.fields.description
+    }));
 }
 ExternalResourceCard.defaultProps = defaultProps;

package/dist/types/resources/ExternalResourceCard/ExternalResourceCard.d.ts

@@ -16,7 +16,7 @@ export interface ExternalResourceCardProps {
     hasCardMoveActions?: boolean;
     hasCardRemoveActions?: boolean;
 }
-export declare function ExternalResourceCard({ info, isClickable, onEdit, onRemove, onMoveTop, onMoveBottom, hasCardEditActions, hasCardMoveActions, hasCardRemoveActions, renderDragHandle, onClick, }: ExternalResourceCardProps): JSX.Element;
+export declare function ExternalResourceCard({ info, isClickable, onEdit, onRemove, onMoveTop, onMoveBottom, hasCardEditActions, hasCardMoveActions, hasCardRemoveActions, renderDragHandle, onClick, isSelected, }: ExternalResourceCardProps): JSX.Element;
 export declare namespace ExternalResourceCard {
     var defaultProps: {
         isClickable: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-reference",
-  "version": "5.23.0",
+  "version": "5.25.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "7018fb86df27fcb2e0d4bdb475549367fe6ee87d"
+  "gitHead": "1df39db2c93daecf0236570e3656a965eabc5ae0"
 }