feat: disable html margin by props

Author: madiyar

.github/workflows/deploy-docs.yml

@@ -31,6 +31,9 @@ jobs:
     - name: Build docs
       run: pnpm run build:docs
 
+    - name: Run tests
+      run: pnpm run test:run
+
     - name: Show current directory files
       run: ls -la
 

.github/workflows/publish.yml

@@ -34,6 +34,9 @@ jobs:
     - name: Biome format & linter
       run: pnpm run format
 
+    - name: Run tests
+      run: pnpm run test:run
+
     - name: Build library
       run: pnpm run build
 

docs/index.html

@@ -179,6 +179,11 @@ <h2 id="props">Props</h2>
               <td><code>navigator.language</code> or <code>'us'</code></td>
               <td><code>string</code> <p>Language code used to generate App Store or Play Store URLs.</p></td>
             </tr>
+            <tr>
+              <td><code>disableHtmlMargin</code></td>
+              <td><code>false</code></td>
+              <td><code>boolean</code> <p>Disable HTML margin.</p></td>
+            </tr>
             <tr>
               <td><code>withPortal</code></td>
               <td><code>true</code></td>

package.json

@@ -74,5 +74,6 @@
   "dependencies": {
     "js-cookie": "^3.0.5",
     "ua-parser-js": "^2.0.3"
-  }
+  },
+  "packageManager": "pnpm@9.4.0"
 }

src/utils.test.ts src/__tests__/utils.test.tssrc/utils.test.ts renamed to src/__tests__/utils.test.ts

@@ -7,7 +7,7 @@ import {
   iconsRels,
   isStandalone,
   cookie,
-} from "./utils";
+} from "../utils";
 
 describe("utils", () => {
   describe("is_client", () => {

src/smartbanner.tsx

@@ -33,6 +33,7 @@ export const SmartBanner: React.FC<SmartBannerProps> = ({
   ignoreIosVersion = false,
   onClose,
   onInstall,
+  disableHtmlMargin = false,
   withPortal = true,
   portalTargetId,
   target,
@@ -91,8 +92,10 @@ export const SmartBanner: React.FC<SmartBannerProps> = ({
   React.useEffect(() => {
     if (!html) return;
 
-    html.classList.toggle(ClassNames.TOP, placement === "top");
-    html.classList.toggle(ClassNames.BOTTOM, placement === "bottom");
+    if (!disableHtmlMargin) {
+      html.classList.toggle(ClassNames.TOP, placement === "top");
+      html.classList.toggle(ClassNames.BOTTOM, placement === "bottom");
+    }
 
     // return () => {
     //   if (!html) return;
@@ -103,7 +106,7 @@ export const SmartBanner: React.FC<SmartBannerProps> = ({
     //     ClassNames.BOTTOM
     //   );
     // }
-  }, [placement]);
+  }, [placement, disableHtmlMargin]);
 
   const handleShow = React.useCallback((show: boolean) => {
     if (html) {

src/types.ts

@@ -97,6 +97,12 @@ export interface SmartBannerProps {
    */
   onInstall?: () => void;
 
+  /**
+   * Disable HTML margin.
+   * @default false
+   */
+  disableHtmlMargin?: boolean;
+
   /**
    * Whether to render the banner using a React Portal.
    * @default true