@contentful/field-editor-reference 5.17.0 → 5.19.0

package/dist/cjs/assets/WrappedAssetCard/AssetCardActions.js

@@ -18,7 +18,9 @@ _export(exports, {
 });
 const _react = _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
 const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _emotion = require("emotion");
 const _get = _interop_require_default(require("lodash/get"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -64,6 +66,40 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+const styles = {
+    dragHandle: (0, _emotion.css)({
+        alignSelf: 'stretch'
+    }),
+    fileInformation: {
+        menuItem: (0, _emotion.css)({
+            opacity: 1
+        }),
+        dl: (0, _emotion.css)({
+            backgroundColor: _f36tokens.default.gray100,
+            borderRadius: _f36tokens.default.borderRadiusMedium,
+            padding: _f36tokens.default.spacingXs,
+            width: '200px',
+            lineHeight: _f36tokens.default.lineHeightS,
+            fontSize: _f36tokens.default.fontSizeS,
+            dt: {
+                font: 'inherit',
+                color: _f36tokens.default.gray700,
+                marginRight: _f36tokens.default.spacingXs,
+                paddingTop: _f36tokens.default.spacing2Xs,
+                paddingBottom: _f36tokens.default.spacing2Xs,
+                float: 'left',
+                clear: 'left'
+            },
+            dd: {
+                font: 'inherit',
+                marginLeft: 0,
+                color: _f36tokens.default.gray900,
+                paddingTop: _f36tokens.default.spacing2Xs,
+                paddingBottom: _f36tokens.default.spacing2Xs
+            }
+        })
+    }
+};
 function downloadAsset(url) {
     window.open(url, '_blank', 'noopener,noreferrer');
 }
@@ -77,23 +113,20 @@ function renderAssetInfo(props) {
         _react.createElement(_f36components.Menu.SectionTitle, {
             key: "file-section"
         }, "File info"),
-        fileName && _react.createElement(_f36components.Menu.Item, {
-            key: "file-name"
-        }, _react.createElement(_f36components.Text, {
+        _react.createElement(_f36components.Menu.Item, {
+            key: "file-information",
+            className: styles.fileInformation.menuItem,
+            isDisabled: true
+        }, _react.createElement("dl", {
+            className: styles.fileInformation.dl
+        }, fileName && _react.createElement(_react.Fragment, null, _react.createElement("dt", null, "File Name:"), _react.createElement(_f36components.Text, {
+            as: "dd",
             isTruncated: true
-        }, fileName)),
-        mimeType && _react.createElement(_f36components.Menu.Item, {
-            key: "file-type"
-        }, _react.createElement(_f36components.Text, {
+        }, fileName)), mimeType && _react.createElement(_react.Fragment, null, _react.createElement("dt", null, "File Type:"), _react.createElement(_f36components.Text, {
+            as: "dd",
             isTruncated: true
-        }, mimeType)),
-        fileSize && _react.createElement(_f36components.Menu.Item, {
-            key: "file-size"
-        }, (0, _fieldeditorshared.shortenStorageUnit)(fileSize, 'B')),
-        image && _react.createElement(_f36components.Menu.Item, {
-            key: "file-dimentions"
-        }, `${image.width} × ${image.height}`)
-    ].filter((item)=>item);
+        }, mimeType)), fileSize && _react.createElement(_react.Fragment, null, _react.createElement("dt", null, "Size:"), _react.createElement("dd", null, (0, _fieldeditorshared.shortenStorageUnit)(fileSize, 'B'))), image && _react.createElement(_react.Fragment, null, _react.createElement("dt", null, "Dimensions:"), _react.createElement("dd", null, `${image.width} × ${image.height}`))))
+    ];
 }
 function renderActions(props) {
     const { entityFile , isDisabled , onEdit , onRemove  } = props;

package/dist/cjs/components/SpaceName/SpaceName.js

@@ -66,7 +66,7 @@ const styles = {
         color: _f36tokens.default.gray600,
         fontSize: _f36tokens.default.fontSizeS,
         fontWeight: _f36tokens.default.fontWeightMedium,
-        maxWidth: '80px',
+        maxWidth: '160px',
         textOverflow: 'ellipsis',
         overflow: 'hidden',
         whiteSpace: 'nowrap'

package/dist/esm/assets/WrappedAssetCard/AssetCardActions.js

@@ -1,7 +1,43 @@
 import * as React from 'react';
 import { Menu, Text } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
 import { shortenStorageUnit } from '@contentful/field-editor-shared';
+import { css } from 'emotion';
 import get from 'lodash/get';
+const styles = {
+    dragHandle: css({
+        alignSelf: 'stretch'
+    }),
+    fileInformation: {
+        menuItem: css({
+            opacity: 1
+        }),
+        dl: css({
+            backgroundColor: tokens.gray100,
+            borderRadius: tokens.borderRadiusMedium,
+            padding: tokens.spacingXs,
+            width: '200px',
+            lineHeight: tokens.lineHeightS,
+            fontSize: tokens.fontSizeS,
+            dt: {
+                font: 'inherit',
+                color: tokens.gray700,
+                marginRight: tokens.spacingXs,
+                paddingTop: tokens.spacing2Xs,
+                paddingBottom: tokens.spacing2Xs,
+                float: 'left',
+                clear: 'left'
+            },
+            dd: {
+                font: 'inherit',
+                marginLeft: 0,
+                color: tokens.gray900,
+                paddingTop: tokens.spacing2Xs,
+                paddingBottom: tokens.spacing2Xs
+            }
+        })
+    }
+};
 function downloadAsset(url) {
     window.open(url, '_blank', 'noopener,noreferrer');
 }
@@ -15,23 +51,20 @@ export function renderAssetInfo(props) {
         React.createElement(Menu.SectionTitle, {
             key: "file-section"
         }, "File info"),
-        fileName && React.createElement(Menu.Item, {
-            key: "file-name"
-        }, React.createElement(Text, {
+        React.createElement(Menu.Item, {
+            key: "file-information",
+            className: styles.fileInformation.menuItem,
+            isDisabled: true
+        }, React.createElement("dl", {
+            className: styles.fileInformation.dl
+        }, fileName && React.createElement(React.Fragment, null, React.createElement("dt", null, "File Name:"), React.createElement(Text, {
+            as: "dd",
             isTruncated: true
-        }, fileName)),
-        mimeType && React.createElement(Menu.Item, {
-            key: "file-type"
-        }, React.createElement(Text, {
+        }, fileName)), mimeType && React.createElement(React.Fragment, null, React.createElement("dt", null, "File Type:"), React.createElement(Text, {
+            as: "dd",
             isTruncated: true
-        }, mimeType)),
-        fileSize && React.createElement(Menu.Item, {
-            key: "file-size"
-        }, shortenStorageUnit(fileSize, 'B')),
-        image && React.createElement(Menu.Item, {
-            key: "file-dimentions"
-        }, `${image.width} × ${image.height}`)
-    ].filter((item)=>item);
+        }, mimeType)), fileSize && React.createElement(React.Fragment, null, React.createElement("dt", null, "Size:"), React.createElement("dd", null, shortenStorageUnit(fileSize, 'B'))), image && React.createElement(React.Fragment, null, React.createElement("dt", null, "Dimensions:"), React.createElement("dd", null, `${image.width} × ${image.height}`))))
+    ];
 }
 export function renderActions(props) {
     const { entityFile , isDisabled , onEdit , onRemove  } = props;

package/dist/esm/components/SpaceName/SpaceName.js

@@ -12,7 +12,7 @@ const styles = {
         color: tokens.gray600,
         fontSize: tokens.fontSizeS,
         fontWeight: tokens.fontWeightMedium,
-        maxWidth: '80px',
+        maxWidth: '160px',
         textOverflow: 'ellipsis',
         overflow: 'hidden',
         whiteSpace: 'nowrap'

package/dist/types/assets/WrappedAssetCard/AssetCardActions.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { File } from '../../types';
 export declare function renderAssetInfo(props: {
     entityFile: File;
-}): any[];
+}): React.JSX.Element[];
 export declare function renderActions(props: {
     onEdit?: () => void;
     onRemove?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-reference",
-  "version": "5.17.0",
+  "version": "5.19.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -64,5 +64,5 @@
     "@contentful/app-sdk": "^4.17.1",
     "react": ">=16.8.0"
   },
-  "gitHead": "ff0704c0aa9e0f0cdbb4fc70de7ac4ca337529e4"
+  "gitHead": "77b1ef646776001d2a746176bb424772a12173c6"
 }