@sikka/hawa 0.0.92 → 0.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.92",
+  "version": "0.0.95",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/HawaCheckbox.js

@@ -24,17 +24,5 @@ export const HawaCheckbox = (props) => {
         </div>
       )}
     </div>
-
-    // <React.Fragment>
-    //   <FormControlLabel
-    //     label={props.label}
-    //     control={
-    //       <Checkbox
-    //         style={{ color: props.color || null }}
-    //         defaultChecked={props.defaultValue}
-    //       />
-    //     }
-    //   />
-    // </React.Fragment>
   );
 };

package/src/elements/HawaCopyrights.js

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from "react";
+
+export const HawaCopyrights = (props) => {
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        textAlign: "center",
+        color: "grey",
+        fontSize: 14,
+        marginTop: 10,
+        marginBottom: 10
+      }}
+    >
+      {props.withLogo ? (
+        <a href={"https://qawaim.app/" + lang}>
+          <div style={{ cursor: "pointer" }}>
+            <image
+              src="/qawaim-logo.svg"
+              alt="Qawaim"
+              width={100}
+              height={50}
+            />
+          </div>
+        </a>
+      ) : null}
+
+      <div>{props.version}</div>
+    </div>
+  );
+};

package/src/elements/HawaLogoButton.js

@@ -32,13 +32,10 @@ export const HawaLogoButton = (props) => {
         <svg
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
-          // xmlns:xlink="http://www.w3.org/1999/xlink"
           x="0px"
           y="0px"
           className="w-5 h-5"
           viewBox="0 0 512.002 512.002"
-          // style="enable-background:new 0 0 512.002 512.002;"
-          // xml:space="preserve"
         >
           <path
             // style="fill:#73A1FB;"
@@ -62,7 +59,6 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png"
-          // height={20}
           className="h-6"
         />
       );
@@ -80,7 +76,6 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png"
-          // height={30}
           className="h-6"
         />
       );
@@ -89,7 +84,6 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
-          // height={25}
           className="h-6"
         />
       );
@@ -98,7 +92,6 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
-          // height={20}
           className="h-6"
         />
       );
@@ -107,7 +100,6 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
-          // height={40}
           className="h-11"
         />
       );
@@ -142,7 +134,6 @@ export const HawaLogoButton = (props) => {
     <button
       style={{ direction: isArabic ? "rtl" : "ltr" }}
       {...props}
-      // variant="withLogo"
       className="bg-white rounded-xl my-2 h-11 flex max-w-sm w-full flex-row justify-center align-middle"
     >
       <div className="h-full flex flex-row justify-end items-center">

package/src/elements/HawaMenu.js

@@ -6,42 +6,54 @@ export const HawaMenu = ({
   withHeader,
   withIcons,
   headerTitle,
-  headerSubtitle
+  headerSubtitle,
+  open,
+  handleClose
 }) => {
   return (
-    <div
-      id={popMenuID}
-      className="z-10 w-44 bg-white rounded-lg divide-y divide-gray-100 shadow dark:bg-gray-700"
-    >
-      {withHeader && (
-        <div class="py-3 px-4 text-sm text-gray-900 dark:text-white">
-          <div>{headerTitle}</div>
-          <div class="font-medium truncate">{headerSubtitle}</div>
-        </div>
-      )}
-      {menuItems.map((group) => {
-        return (
-          <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
-            {group.map((item) => {
-              return (
-                <li
-                  onClick={item.action}
-                  className={
-                    item.button
-                      ? "bg-primary-500 text-white hover:bg-primary-600 flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-primary-600 dark:hover:text-white"
-                      : "flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-                  }
-                >
-                  {withIcons && (
-                    <div className="mr-2 rtl:ml-2">{item.icon}</div>
-                  )}
-                  {item.label}
-                </li>
-              );
-            })}
-          </ul>
-        );
-      })}
+    <div>
+      <button
+        className="border rounded w-44 p-2 bg-blue-700 text-white"
+        onClick={() => handleClose(!open)}
+      >
+        Menu Dropdown
+      </button>
+      <div
+        id={popMenuID}
+        className={`${
+          open ? "block" : "hidden"
+        } z-10 w-44 bg-white rounded-lg divide-y divide-gray-100 shadow dark:bg-gray-700`}
+      >
+        {withHeader && (
+          <div class="py-3 px-4 text-sm text-gray-900 dark:text-white">
+            <div>{headerTitle}</div>
+            <div class="font-medium truncate">{headerSubtitle}</div>
+          </div>
+        )}
+        {menuItems.map((group) => {
+          return (
+            <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
+              {group.map((item) => {
+                return (
+                  <li
+                    onClick={item.action}
+                    className={
+                      item.button
+                        ? "bg-primary-500 text-white hover:bg-primary-600 flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-primary-600 dark:hover:text-white"
+                        : "flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                    }
+                  >
+                    {withIcons && (
+                      <div className="mr-2 rtl:ml-2">{item.icon}</div>
+                    )}
+                    {item.label}
+                  </li>
+                );
+              })}
+            </ul>
+          );
+        })}
+      </div>
     </div>
   );
 };

package/src/elements/HawaModal.js

@@ -7,8 +7,6 @@ export const HawaModal = ({
   closeOnClickOutside,
   ...props
 }) => {
-  console.log("open : ", open);
-
   useEffect(() => {
     if (closeOnClickOutside) {
       window.onclick = () => {

package/src/elements/HawaPanelTabs.js

@@ -47,27 +47,6 @@ export const HawaPanelTabs = (props) => {
         })}
       </div>
     </div>
-    // <Container variant={props.location || "panelTabs"}>
-    //   {props.options.map((singleOption, i) => {
-    //     return (
-    //       <button
-    //         key={i}
-    //         onClick={() => {
-    //           props.handleChange(singleOption.value);
-    //           setValue(singleOption.value);
-    //         }}
-    //         fullWidth
-    //         variant={
-    //           value?.toLowerCase() === singleOption.value?.toLowerCase()
-    //             ? "selected"
-    //             : "unselected"
-    //         }
-    //       >
-    //         {singleOption.label}
-    //       </button>
-    //     );
-    //   })}
-    // </Container>
   );
 };
 

package/src/elements/HawaPhoneInput.js

@@ -42,14 +42,7 @@ export const HawaPhoneInput = ({ preferredCountry, label }) => {
   };
 
   return (
-    <div
-      // style={{
-      //   justifyContent: "center",
-      //   alignItems: "center",
-      //   height: "100%"
-      // }}
-      className="flex flex-col mb-3"
-    >
+    <div className="flex flex-col mb-3">
       {label && (
         <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
           {label}

package/src/elements/index.js

@@ -26,3 +26,4 @@ export * from "./HawaTabs";
 export * from "./HawaModal";
 export * from "./HawaMenu";
 export * from "./HawaDrawer";
+export * from "./HawaCopyrights";

package/storybook-static/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.67ec6e92.iframe.bundle.js"></script><script src="vendors~main.30019f92.iframe.bundle.js"></script><script src="main.c9ced472.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.67ec6e92.iframe.bundle.js"></script><script src="vendors~main.a40572d0.iframe.bundle.js"></script><script src="main.ea9904c2.iframe.bundle.js"></script></body></html>