tycho-components 0.14.19 → 0.14.21

package/dist/AppForm/AppFormField.d.ts

@@ -28,4 +28,6 @@ export type AppFormField = {
     rows?: number;
     size?: 'medium' | 'small';
     display?: DisplayFunction;
+    copyToClipboard?: boolean;
+    truncate?: number;
 };

package/dist/AppForm/AppFormInfo.js

@@ -2,7 +2,18 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { formatSwitchFieldValue } from './AppFormField';
 import './style.scss';
+import { Icon } from 'tycho-storybook';
+import { UsabilityUtils } from '..';
+function truncateValue(value, truncate) {
+    if (value.length <= truncate) {
+        return value;
+    }
+    return `${value.slice(0, truncate)}…`;
+}
 function getFieldDisplayContent(field, raw, t) {
+    if (field.truncate) {
+        return truncateValue(raw, field.truncate);
+    }
     if (field.display) {
         return field.display(raw);
     }
@@ -24,6 +35,8 @@ function getFieldDisplayContent(field, raw, t) {
 export default function AppFormInfo({ fields, data }) {
     const { t } = useTranslation('common');
     return (_jsx("div", { className: "app-form-info-container", children: fields.map((field, idx) => {
-            return (_jsxs("div", { className: "item", children: [_jsxs("span", { className: "label", children: [field.name, ":"] }), _jsx("span", { className: "value", children: getFieldDisplayContent(field, data[field.attr], t) })] }, idx));
+            return (_jsxs("div", { className: "item", ...(field.title && { title: field.title }), children: [_jsxs("span", { className: "label", children: [field.name, ":"] }), _jsx("span", { className: "value", children: getFieldDisplayContent(field, data[field.attr], t) }), field.copyToClipboard && (_jsx(Icon, { name: "content_copy", size: "small", className: "ds-copy-icon", filled: true, onClick: () => {
+                            UsabilityUtils.copy(data[field.attr]);
+                        } }))] }, idx));
         }) }));
 }

package/dist/AppForm/style.scss

@@ -21,6 +21,11 @@
       @include body-medium-1;
       color: var(--text-secondary);
     }
+
+    > .ds-copy-icon {
+      color: var(--icon-primary);
+      cursor: pointer;
+    }
   }
 }
 
@@ -34,4 +39,4 @@
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
   }
-}
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.14.19",
+  "version": "0.14.21",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {