@bigbinary/neeto-molecules 1.1.7 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/src/translations/en.json

@@ -555,6 +555,13 @@
     },
     "confirmationModal": {
       "required": "Enter \"{{confirmationText}}\" to confirm"
+    },
+    "metadata": {
+      "detailsTitle": "Details",
+      "card": {
+        "viewMore": "View more",
+        "viewLess": "View less"
+      }
     }
   }
 }

package/types/Metadata.d.ts

@@ -0,0 +1,108 @@
+import React from "react";
+type BlockProps = {
+  title?: string;
+  actionBlock?: React.ReactNode;
+  className?: string;
+};
+interface BlockComposition {
+  Block: React.FC<BlockProps>;
+  DetailsBlock: React.FC<BlockProps & {
+    details: Array<{
+      label?: string;
+      value?: React.ReactNode;
+      type?: string;
+    }>;
+    style?: "inline" | "multiline";
+    truncate?: Boolean;
+    truncateAt?: number;
+  }>;
+}
+/**
+ *
+ * This is a wrapper for displaying metadata information about an entity. It can
+ *
+ * have a header block and multiple card blocks inside it.
+ *
+ * ![image](https://user-images.githubusercontent.com/35304653/276496457-9bb7fbbd-2a28-43af-b32b-67e8f1b4fe24.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import Metadata from "@bigbinary/neeto-molecules/Metadata";
+ * 
+ * const MetadataComponent = () => (
+ *   <Metadata headerBlock={<Header />}>
+ *     <Metadata.Block>Custom content</Metadata.Block>
+ *   </Metadata>
+ * );
+ * @endexample
+ * A block component that can be rendered inside the Metadata wrapper component.
+ *
+ * ![image](https://user-images.githubusercontent.com/35304653/276496694-2a2edd90-d023-4838-bcbc-8a6bf3c7c51b.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * const ActionBlock = ({ onAdd, onEdit }) => (
+ *   <MoreDropdown
+ *     menuItems={[
+ *       {
+ *         label: "Add",
+ *         onClick: onAdd,
+ *       },
+ *       {
+ *         label: "Edit",
+ *         onClick: onEdit,
+ *       },
+ *     ]}
+ *   />
+ * );
+ * 
+ * const MetadataComponent = () => (
+ *   <Metadata>
+ *     <Metadata.Block actionBlock={<ActionBlock />} title="Tags">
+ *       Custom content
+ *     </Metadata.Block>
+ *   </Metadata>
+ * );
+ * @endexample
+ * A custom block component built on top of Metadata.Block. It can be used to
+ *
+ * display some details as label-value pairs. It has a few options for rendering
+ *
+ * label and value inline or multiline. It also has the option to set a view more
+ *
+ * button to hide certain fields.
+ *
+ * ![image](https://user-images.githubusercontent.com/35304653/276496874-ae846576-b892-40ee-84bf-df2abaa87f14.png|height=200|width=300)
+ *
+ * @example 
+ *
+ * const MetadataComponent = () => (
+ *   const detailsToTruncate = [
+ *   { label: "Name", value: "Oliver" },
+ *   { label: "Phone", value: "1234567890" },
+ *   { label: "Email", value: "oliver@example.com" },
+ *   { label: "Custom", value: <Input /> },
+ *   ];
+ * 
+ *   const detailsWithDivider = [
+ *   { label: "Name", value: "Oliver" },
+ *   { label: "Phone", value: "1234567890" },
+ *   { type: "divider" },
+ *   { label: "Email", value: "oliver@example.com" },
+ *   { label: "Custom", value: <Input /> },
+ * ];
+ * 
+ *   <Metadata>
+ *     <Metadata.DetailsBlock truncate details={detailsToTruncate} truncateAt={2} />
+ *     <Metadata.DetailsBlock details={detailsWithDivider} />
+ *   </Metadata>
+ * );
+ * @endexample
+*/
+const Metadata: React.FC<{
+  className?: string;
+  headerBlock?: React.ReactNode;
+  size?: "small" | "medium";
+}> & BlockComposition;
+export default Metadata;