@bigbinary/neeto-molecules 1.0.42 → 1.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.0.42",
+  "version": "1.0.43",
   "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>",
@@ -70,6 +70,7 @@
     "@storybook/react": "6.5.16",
     "@svgr/rollup": "^6.2.1",
     "@svgr/webpack": "^6.5.1",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.3",
     "@testing-library/react-hooks": "^8.0.0",
@@ -135,6 +136,7 @@
     "react-router-dom": "^5.2.0",
     "react-toastify": "^9.0.8",
     "react-transition-group": "^4.4.5",
+    "react-window": "^1.8.9",
     "rollup": "^2.76.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-cleaner": "^1.0.0",

package/src/translations/en.json

@@ -386,6 +386,14 @@
     },
     "codeblock": {
       "codeSnippet": "Code snippet"
+    },
+    "iconPicker": {
+      "entity": "icons",
+      "dropdown": {
+        "label": "Select icon",
+        "noResults": "No results",
+        "removeButton": "Remove"
+      }
     }
   }
 }

package/types/IconPicker.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+/**
+ *
+ * A dropdown component that allows you to select an icon from a list of Google icons.
+ *
+ * ![image](https://user-images.githubusercontent.com/35304653/243669467-148585f0-5499-4914-ba84-4284bda8e2d8.png|height=200|width=300)
+ *
+ * We make use of a feature called ligatures that convert the snake cased name of an icon to an actual icon. It is achieved like so. Note that the classname "material-symbols-rounded" is necessary for this conversion to work.
+ *
+ * @example 
+ *
+ * <span className="material-symbols-rounded">icon_name</span>
+ * @endexample
+ * @example 
+ *
+ * import IconPicker from "@bigbinary/neeto-molecules/IconPicker";
+ * 
+ * const App = () => {
+ *   const [value, setValue] = useState("home");
+ *   return (
+ *     <IconPicker
+ *       value={value}
+ *       label="Select an icon"
+ *       onClick={value => setValue(value)}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+const IconPicker: React.FC<{
+  filled?: boolean;
+  value?: string;
+  label?: string;
+  onClick?: Function;
+  className?: string;
+}>;
+export default IconPicker;