@sikka/hawa 0.0.48 → 0.0.50

package/package.json

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

package/src/blocks/Account/UserProfileForm.js

@@ -1,8 +1,7 @@
 import React from "react";
-import { HawaTextField } from "../../elements";
+import { HawaButton, HawaTextField } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
 
 export const UserProfileForm = (props) => {
   const methods = useForm();
@@ -141,9 +140,10 @@ export const UserProfileForm = (props) => {
                 />
               );
             })}
-          <Button type="submit" fullWidth variant="last">
+
+          <HawaButton fullWidth type="submit">
             {props.texts.updateProfile}
-          </Button>
+          </HawaButton>
         </form>
       </FormProvider>
     </Container>

package/src/blocks/Account/UserSettingsForm.js

@@ -1,18 +1,13 @@
-import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
+import { HawaButton } from "../../elements";
 
 export const UserSettingsForm = (props) => {
   return (
     <Container maxWidth="sm">
       {props.children}
-      <Button
-        type="submit"
-        fullWidth
-        variant="last"
-        onClick={props.handleSaveSettings}
-      >
+      <HawaButton type="submit" fullWidth onClick={props.handleSaveSettings}>
         {props.saveSettingsText}
-      </Button>
+      </HawaButton>
     </Container>
   );
 };

package/src/blocks/Payment/ChargeWalletForm.js

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
-import { HawaTextField } from "../../elements";
+import { HawaButton, HawaTextField } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import PropTypes from "prop-types";
 
@@ -56,9 +55,9 @@ export const ChargeWalletForm = (props) => {
             }}
           />
 
-          <Button type="submit" fullWidth variant="last">
+          <HawaButton type="submit" fullWidth>
             {props.texts.chargeWallet}
-          </Button>
+          </HawaButton>
         </form>
       </FormProvider>
     </Container>

package/src/blocks/Payment/CheckoutForm.js

@@ -1,7 +1,11 @@
 import React from "react";
-import { HawaTextField, HawaTable, HawaSelect } from "../../elements";
+import {
+  HawaTextField,
+  HawaTable,
+  HawaSelect,
+  HawaButton
+} from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
@@ -236,9 +240,9 @@ export const CheckoutForm = (props) => {
               )}
             />
           </Container>
-          <Button type="submit" fullWidth variant="last">
+          <HawaButton type="submit" fullWidth>
             {props.texts.payNow}
-          </Button>
+          </HawaButton>
         </form>
       </FormProvider>
     </Container>

package/src/blocks/Payment/Confirmation.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { HawaTable } from "../../elements";
-import Button from "@mui/material/Button";
+import { HawaButton, HawaTable } from "../../elements";
 import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
@@ -69,15 +68,15 @@ export const ConfirmationPage = (props) => {
             <Divider variant="middle" />
           </>
         )}
-        <Button onClick={props.handlePrint} variant="contained">
+        <HawaButton fullWidth onClick={props.handlePrint}>
           {props.texts.print}
-        </Button>
-        <Button onClick={props.handleHistory} variant="last">
+        </HawaButton>
+        <HawaButton fullWidth onClick={props.handleHistory}>
           {props.texts.history}
-        </Button>
-        <Button onClick={props.handleHome} variant="last">
+        </HawaButton>
+        <HawaButton fullWidth onClick={props.handleHome}>
           {props.texts.homePage}
-        </Button>
+        </HawaButton>
         <Typography align="center" variant="body2" style={{ marginTop: 10 }}>
           {props.texts.fasterPaymentNote}
         </Typography>

package/src/blocks/Payment/CreditCardForm.js

@@ -1,7 +1,6 @@
 import React from "react";
-import { HawaTextField } from "../../elements";
+import { HawaButton, HawaTextField } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 
 export const CreditCardForm = (props) => {
@@ -79,14 +78,13 @@ export const CreditCardForm = (props) => {
           )}
         />
 
-        <Button
+        <HawaButton
           type="submit"
           fullWidth
-          variant="last"
           onClick={props.handlePayWithCreditCard}
         >
           {"Pay with Credit Card"}
-        </Button>
+        </HawaButton>
       </form>
     </Container>
   );

package/src/blocks/Payment/Form/CForm.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useState, useRef } from "react";
 import sha256 from "crypto-js/sha256";
-import Button from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
 import useTranslation from "next-translate/useTranslation";
 import axios from "axios";
+import { HawaButton } from "../../../elements";
 
 const currentYear = new Date().getFullYear();
 const monthsArr = Array.from({ length: 12 }, (x, i) => {
@@ -305,9 +305,8 @@ export default function CForm({
                 />
               )}
           </form>
-          <Button
-            variant="contained"
-            color="primary"
+          <HawaButton
+            // color="primary"
             fullWidth
             onClick={handlePayfortForm}
           >
@@ -320,7 +319,7 @@ export default function CForm({
             ) : (
               <span className="pay-new-btn-txt">{t("pay-now")}</span>
             )}
-          </Button>
+          </HawaButton>
         </div>
       </div>
     </div>

package/src/blocks/Payment/Form/PaymentMethod.js

@@ -1,5 +1,4 @@
 import useTranslation from "next-translate/useTranslation";
-import Button from "@mui/material/Button";
 import Chip from "@mui/material/Chip";
 import PropTypes from "prop-types";
 
@@ -68,7 +67,7 @@ export const PaymentMethod = (props) => {
 
 const PaymentMethodButton = (props) => {
   return (
-    <Button
+    <button
       disabled={props?.chip ? true : false}
       fullWidth
       variant="contained"
@@ -116,7 +115,7 @@ const PaymentMethodButton = (props) => {
           />
         ) : null}
       </div>
-    </Button>
+    </button>
   );
 };
 

package/src/blocks/Payment/Gateway/Wallet.js

@@ -1,5 +1,4 @@
 import useTranslation from "next-translate/useTranslation";
-import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
 import CircularProgress from "@mui/material/CircularProgress";
@@ -120,7 +119,7 @@ const Wallet = (props) => {
             </Grid>
             {!props.leftAmount && (
               <Grid item xs={12}>
-                <Button
+                <button
                   variant="contained"
                   color="primary"
                   fullWidth
@@ -136,7 +135,7 @@ const Wallet = (props) => {
                   ) : (
                     t("pay-now")
                   )}
-                </Button>
+                </button>
               </Grid>
             )}
           </Grid>

package/src/blocks/Payment/PayWithWallet.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Typography from "@mui/material/Typography";
 import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
+import { HawaButton } from "../../elements";
 
 export const PayWithWallet = (props) => {
   return (
@@ -11,14 +11,13 @@ export const PayWithWallet = (props) => {
         {props.walletBalance || "0"}
         <Typography>{props.currency || "SAR"}</Typography>
       </Typography>
-      <Button
+      <HawaButton
         type="submit"
         fullWidth
-        variant="last"
         onClick={props.handlePayWithWallet}
       >
         {"Pay Now"}
-      </Button>
+      </HawaButton>
     </Container>
   );
 };

package/src/elements/HawaLogoButton.js

@@ -1,9 +1,7 @@
 import React from "react";
-import Button from "@mui/material/Button";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import TwitterIcon from "@mui/icons-material/Twitter";
 import WalletIcon from "@mui/icons-material/AccountBalanceWallet";
-import Typography from "@mui/material/Typography";
 import PropTypes from "prop-types";
 
 export const HawaLogoButton = (props) => {
@@ -29,7 +27,8 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png"
-          height={20}
+          // height={20}
+          className="h-6"
         />
       );
       break;
@@ -37,7 +36,8 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png"
-          height={20}
+          // height={20}
+          className="h-6"
         />
       );
       break;
@@ -45,7 +45,8 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png"
-          height={30}
+          // height={30}
+          className="h-6"
         />
       );
       break;
@@ -53,7 +54,8 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
-          height={25}
+          // height={25}
+          className="h-6"
         />
       );
       break;
@@ -61,7 +63,8 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
-          height={20}
+          // height={20}
+          className="h-6"
         />
       );
       break;
@@ -69,7 +72,8 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
-          height={40}
+          // height={40}
+          className="h-11"
         />
       );
       break;
@@ -81,26 +85,20 @@ export const HawaLogoButton = (props) => {
       break;
   }
   return (
-    <Button
+    <button
       style={{ direction: isArabic ? "rtl" : "ltr" }}
       {...props}
-      variant="withLogo"
+      // variant="withLogo"
+      className="bg-white rounded-xl my-2 h-11 flex flex-row justify-center align-middle"
     >
-      {logoElement}
+      <div className="h-full w-1/2 flex flex-row justify-end items-center">
+        {logoElement}
+      </div>
       <div style={{ width: 10 }} />
-      <Typography
-        style={{
-          color: "black",
-          fontSize: 14,
-          textAlign: "center",
-          letterSpacing: 0.4,
-          fontFamily: "Roboto",
-          fontWeight: 500
-        }}
-      >
+      <div className="h-full w-1/2 flex flex-col justify-center items-start">
         {props.buttonText}
-      </Typography>
-    </Button>
+      </div>
+    </button>
   );
 };
 

package/src/elements/HawaPanelTabs.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import Button from "@mui/material/Button";
+
 import Container from "@mui/material/Container";
 import PropTypes from "prop-types";
 
@@ -9,7 +9,7 @@ export const HawaPanelTabs = (props) => {
     <Container variant={props.location || "panelTabs"}>
       {props.options.map((singleOption, i) => {
         return (
-          <Button
+          <button
             key={i}
             onClick={() => {
               props.handleChange(singleOption.value);
@@ -23,7 +23,7 @@ export const HawaPanelTabs = (props) => {
             }
           >
             {singleOption.label}
-          </Button>
+          </button>
         );
       })}
     </Container>

package/src/elements/HawaPricingCard.js

@@ -1,6 +1,5 @@
 import React from "react";
 import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
 import PropTypes from "prop-types";
@@ -139,13 +138,13 @@ export const HawaPricingCard = (props) => {
           );
         })}
       </div>
-      <Button
+      <button
         onClick={props.selectPlan}
         variant={props.selectedPlan ? "outlined" : "contained"}
         style={{ margin: 20 }}
       >
         {props.buttonText}
-      </Button>
+      </button>
     </Container>
   );
 };

package/src/elements/HawaTooltip.js

@@ -0,0 +1,54 @@
+import React from "react";
+import "flowbite";
+export const HawaTooltip = (props) => {
+  const screenSize = {
+    width: 1500,
+    height: 200
+  };
+  return (
+    <div
+      id={props.tooltipID}
+      role="tooltip"
+      class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
+    >
+      Tooltip content
+      <div class="tooltip-arrow" data-popper-arrow></div>
+    </div>
+
+    // <Tooltip
+    //   placement={screenSize.width > 400 ? "bottom-center" : "top-center"}
+    //   enterTouchDelay={100}
+    //   title={
+    //     props.hint ? (
+    //       props.hint
+    //     ) : (
+    //       <div>
+    //         <div
+    //           style={{
+    //             fontSize: 20,
+    //             fontWeight: 800,
+    //             padding: 10,
+    //             paddingBottom: 5,
+    //             textAlign: "center"
+    //           }}
+    //         >
+    //           {props.hintTitle}
+    //         </div>
+    //         <div
+    //           style={{
+    //             fontSize: 13,
+    //             fontWeight: 100,
+    //             padding: 10,
+    //             textAlign: "center"
+    //           }}
+    //         >
+    //           {props.hintContent}
+    //         </div>
+    //       </div>
+    //     )
+    //   }
+    // >
+    //   {props.children}
+    // </Tooltip>
+  );
+};

package/src/elements/ResponsiveButton.js

@@ -1,25 +1,28 @@
 import React from "react";
-import Button from "@mui/material/Button";
-import Tooltip from "@mui/material/Tooltip";
 import PropTypes from "prop-types";
 
 export const ResponsiveButton = (props) => {
   if (props.showText) {
     return (
-      <Button variant="adaptive-dark" onClick={props.onClick}>
+      <button variant="adaptive-dark" onClick={props.onClick}>
         {props.icon}
         <div style={{ width: 10 }} />
         {props.buttonText}
-      </Button>
+      </button>
     );
   } else {
     //icon only
     return (
-      <Tooltip title={props.buttonText} placement="top">
-        <Button variant="adaptive-dark" onClick={props.onClick}>
+      <>
+        <button
+          data-tooltip-target="btn1"
+          variant="adaptive-dark"
+          onClick={props.onClick}
+        >
           {props.icon}
-        </Button>
-      </Tooltip>
+        </button>
+        <HawaTooltip tooltipID="btn1" content={props.buttonText} />
+      </>
     );
   }
 };
@@ -27,5 +30,5 @@ export const ResponsiveButton = (props) => {
 ResponsiveButton.propTypes = {
   buttonText: PropTypes.string,
   onClick: PropTypes.func,
-  showText: PropTypes.bool,
+  showText: PropTypes.bool
 };

package/src/elements/index.js

@@ -24,3 +24,4 @@ export * from "./DraggableCard";
 export * from "./HawaPhoneInput";
 export * from "./HawaPhoneInput2";
 export * from "./HawaDrawerItem";
+export * from "./HawaTooltip";

package/src/layout/HawaAppLayout2.js

@@ -14,7 +14,6 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
 import Avatar from "@mui/material/Avatar";
-import Tooltip from "@mui/material/Tooltip";
 import { HawaPopMenu } from "../elements/HawaPopMenu";
 
 const drawerWidth = 200;
@@ -154,18 +153,15 @@ export function HawaAppLayout(props) {
             </Typography>
 
             <Box style={{ position: "absolute", right: 10 }}>
-              <Tooltip title="Open settings">
-                <IconButton
-                  onClick={handleOpenUserMenu}
-                  // sx={{ p: 0 }}
-                  size="small"
-                >
-                  <Avatar
-                    style={{ width: 30, height: 30 }}
-                    fontSize="inherit"
-                  />
-                </IconButton>
-              </Tooltip>
+              <IconButton
+                onClick={handleOpenUserMenu}
+                // sx={{ p: 0 }}
+                size="small"
+              >
+                <Avatar style={{ width: 30, height: 30 }} fontSize="inherit" />
+              </IconButton>
+              {/* <Tooltip title="Open settings">
+              </Tooltip> */}
               <HawaPopMenu
                 menuItems={props.accountMenu}
                 anchor={anchorElUser}
@@ -207,34 +203,32 @@ export function HawaAppLayout(props) {
         >
           {props.pages.map((p, jk) => {
             return (
-              <Tooltip
-                title={p.text}
-                key={jk}
-                placement={"right"}
-                arrow={true}
-                PopperProps={{ style: { opacity: open ? 0 : 1 } }}
+              // <Tooltip
+              //   title={p.text}
+              //   key={jk}
+              //   placement={"right"}
+              //   arrow={true}
+              //   PopperProps={{ style: { opacity: open ? 0 : 1 } }}
+              // >
+
+              // </Tooltip>
+              <ListItemButton
+                variant={
+                  props.pageName?.toLowerCase() === p.slug?.toLowerCase() &&
+                  "clicked"
+                }
+                onClick={p.action}
+                key={p.text}
+                sx={{
+                  minHeight: 48,
+                  justifyContent: open ? "initial" : "center",
+                  px: 2.5
+                }}
               >
-                <ListItemButton
-                  variant={
-                    props.pageName?.toLowerCase() === p.slug?.toLowerCase() &&
-                    "clicked"
-                  }
-                  onClick={p.action}
-                  key={p.text}
-                  sx={{
-                    minHeight: 48,
-                    justifyContent: open ? "initial" : "center",
-                    px: 2.5
-                  }}
-                >
-                  <p.icon />
-                  <div style={{ width: 20 }} />
-                  <ListItemText
-                    primary={p.text}
-                    sx={{ opacity: open ? 1 : 0 }}
-                  />
-                </ListItemButton>
-              </Tooltip>
+                <p.icon />
+                <div style={{ width: 20 }} />
+                <ListItemText primary={p.text} sx={{ opacity: open ? 1 : 0 }} />
+              </ListItemButton>
             );
           })}
         </List>

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.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.ceb9a32a.iframe.bundle.js"></script><script src="main.7d233d65.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.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.c0e24dea.iframe.bundle.js"></script><script src="main.c82b0a52.iframe.bundle.js"></script></body></html>