@bigbinary/neeto-site-blocks 0.4.5 → 0.4.7

package/README.md

@@ -1,16 +1,124 @@
 # @bigbinary/neeto-site-blocks
 
-neetoSiteBlocks is the library that serves the building blocks for website in neeto-site. It is used in `neeto-site-web` and `neeto-site-eui` to serve the blocks.
+neetoSiteBlocks is the library that serves the building blocks for website in neeto-site. It is used in [`neeto-site-web`](https://github.com/bigbinary/neeto-site-web)  and [`neeto-site-eui`](https://github.com/bigbinary/neeto-site-eui) to serve the blocks.
 
 ## Installation
 
-```zsh
+```
 yarn add @bigbinary/neeto-site-blocks
 ```
 
 ## Usage
 
-```zsh
+### Eg: FeatureSection
+
+#### Props
+1. **id**: To specify the id of the block.
+2. **configuration**: Object containing the configuration for the block. It contains the following keys:
+    1. **design**: To specify the design of the block.
+    2. **properties**: To specify the properties of the block.
+3. **className**: To specify the external classnames.
+4. **baseUrl**: It is used within button and link component to specify the base url for navigation.
+
+Here is an example of how to use the `FeatureSection` block.
+
+```js
+import { FeatureSection } from "@bigbinary/neeto-site-blocks";
+
+configurations: {
+      properties: {
+        content: {
+          title: "Title",
+          description: "Description",
+          position: "left",
+        },
+        buttons: [],
+        image: {
+          src:
+            "https://tailwindui.com/img/component-images/inbox-app-screenshot-2.jpg",
+          position: "right",
+        },
+        backgroundImage: {
+          src: "",
+        },
+      },
+      design: {
+        body: {
+          backgroundColor: "#FFFFFF",
+          paddingVertical: 20,
+          borderTop: {
+            borderStyle: "none",
+            borderWidth: 0,
+            borderColor: "#FFFFFF",
+          },
+          borderBottom: {
+            borderStyle: "none",
+            borderWidth: 0,
+            borderColor: "#FFFFFF",
+          },
+        },
+        title: {
+          fontSize: "3xl",
+          fontWeight: "extrabold",
+          color: "#2F3941",
+          marginTop: 0,
+          marginBottom: 5,
+          lineHeight: "none",
+          letterSpacing: "normal",
+        },
+        description: {
+          fontSize: "base",
+          fontWeight: "normal",
+          color: "#68737D",
+          marginTop: 0,
+          marginBottom: 8,
+          lineHeight: "normal",
+          letterSpacing: "normal",
+        },
+        buttons: {
+          fontSize: "sm",
+          fontWeight: "medium",
+          color: "#FFFFFF",
+          backgroundColor: "#4F46E5",
+          border: {
+            borderStyle: "none",
+            borderWidth: 0,
+            borderColor: "#4F46E5",
+          },
+          borderRadius: "sm",
+          paddingHorizontal: 4,
+          paddingVertical: 2,
+          letterSpacing: "normal",
+        },
+        image: {
+          width: "3/4",
+          borderRadius: "sm",
+        },
+        backgroundImage: {
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat",
+        },
+      },
+    },
+
+const FeatureSectionBlock = () => {
+  return (
+    <FeatureSection
+      id="feature-section"
+      configuration={configuration}
+      className="my-10"
+      baseUrl="/"
+    />
+  );
+};
+```
+
+## Development
+
+Install all the dependencies by executing the following command
+
+```bash
 yarn install
 yarn start
 ```
@@ -19,8 +127,6 @@ This will open up a playground for building the different blocks.
 
 ## Building
 
-## Building
-
 The `neeto-site-blocks` package gets auto-published to npm for every new merge to the
 main branch. You can checkout the `publish` workflow in git actions to get a
 live update.