@sikka/hawa 0.0.49 → 0.0.50

package/package.json

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

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,5 +1,4 @@
 import React from "react";
-import Tooltip from "@mui/material/Tooltip";
 import PropTypes from "prop-types";
 
 export const ResponsiveButton = (props) => {
@@ -14,11 +13,16 @@ export const ResponsiveButton = (props) => {
   } 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>
+        <HawaTooltip tooltipID="btn1" content={props.buttonText} />
+      </>
     );
   }
 };
@@ -26,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.8bf9785a.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>