@sikka/hawa 0.0.7 → 0.0.8

package/src/ui/AdaptiveButton.js

@@ -1,7 +1,6 @@
 import React, { useState, useContext } from "react";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
-import { motion } from "framer-motion";
 import PropTypes from "prop-types";
 import { ThemeProvider } from "../themes/HawaProvider";
 import { StyledTooltip } from "./StyledTooltip";
@@ -19,81 +18,35 @@ export const AdaptiveButton = (props) => {
   //full button
   if (showText) {
     return (
-      <motion.div
-        transition={{ duration: 0.2 }}
-        whileTap={{ scale: 1.2 }}
-        whileHover={{
-          // backgroundColor: props.hoverColor,
+      <Button
+        disableRipple
+        disabled={props.disabled}
+        aria-label={props.buttonLabel}
+        color={props.danger ? "secondary" : "primary"}
+        onClick={props.handleClick}
+        style={{
+          backgroundColor: theme.primaryColor,
           borderRadius: theme.borderRadius,
-          color: "red"
+          padding: theme.paddings,
+          color: getTextColor(theme.primaryColor)
+          // color: hovered
+          //   ? "#ffffff"
+          //   : props.danger
+          //   ? "#f50057"
+          //   : "var(--blue)"
         }}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-        onMouseDown={() => setHovered(true)}
-        onMouseUp={() => setHovered(false)}
-        onMouseOver={() => setHovered(true)}
-        onMouseOut={() => setHovered(false)}
       >
-        <Button
-          disableRipple
-          disabled={props.disabled}
-          aria-label={props.buttonLabel}
-          color={props.danger ? "secondary" : "primary"}
-          onClick={props.handleClick}
-          style={{
-            backgroundColor: theme.primaryColor,
-            borderRadius: theme.borderRadius,
-            padding: theme.paddings,
-            color: getTextColor(theme.primaryColor)
-            // color: hovered
-            //   ? "#ffffff"
-            //   : props.danger
-            //   ? "#f50057"
-            //   : "var(--blue)"
-          }}
-        >
-          {props.icon}
-          {props.showText ? (
-            <span style={{ marginLeft: props.icon ? 5 : 0 }}>
-              {props.buttonLabel}
-            </span>
-          ) : null}
-        </Button>
-      </motion.div>
+        {props.icon}
+        {props.showText ? (
+          <span style={{ marginLeft: props.icon ? 5 : 0 }}>
+            {props.buttonLabel}
+          </span>
+        ) : null}
+      </Button>
     );
   } else if (props.buttonLabelOnly) {
     return (
-      <motion.div
-        transition={{ duration: 0.2 }}
-        initial={{
-          width: "fit-content",
-          backgroundColor: props.buttonColor,
-          borderRadius: theme.borderRadius
-        }}
-        whileTap={{ scale: 1.2 }}
-        whileHover={{
-          backgroundColor: props.hoverColor,
-          borderRadius: theme.borderRadius
-        }}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-        onMouseDown={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseUp={() => {
-          setHovered(false);
-          setTooltip(true);
-        }}
-        onMouseOver={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseOut={() => {
-          setHovered(false);
-          // setTooltip(true);
-        }}
-      >
+      <>
         <Tooltip
           placement={screenSize.width > 400 ? "bottom-center" : "top-center"}
           enterTouchDelay={100}
@@ -146,100 +99,31 @@ export const AdaptiveButton = (props) => {
             {props.buttonLabel}
           </Button>
         </Tooltip>
-      </motion.div>
+      </>
     );
   } else {
     //icon only
     return (
-      <motion.div
-        transition={{ duration: 0.2 }}
-        initial={{
-          width: "fit-content",
-          backgroundColor: props.buttonColor,
-          borderRadius: theme.borderRadius,
-          // padding: 5,
-          margin: 5
-        }}
-        whileTap={{ scale: 1.2 }}
-        whileHover={{
-          backgroundColor: props.hoverColor,
-          borderRadius: theme.borderRadius
-        }}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-        onMouseDown={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseUp={() => {
-          setHovered(false);
-          setTooltip(true);
-        }}
-        onMouseOver={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseOut={() => {
-          setHovered(false);
-          // setTooltip(true);
-        }}
-      >
-        <StyledTooltip hintTitle="Example" hintContent="More explaination here">
-          <Button
-            disabled={props.disabled}
-            size="small"
-            disableRipple
-            aria-label={props.buttonLabel}
-            onClick={props.handleClick}
-            color={props.danger ? "secondary" : "primary"}
-            style={{
-              padding: 10,
-              color: hovered
-                ? "#ffffff"
-                : props.danger
-                ? "#f50057"
-                : "var(--blue)"
-            }}
-          >
-            {props.icon}
-          </Button>
-        </StyledTooltip>
-        {/* <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>
-            )
-          }
+      <StyledTooltip hintTitle="Example" hintContent="More explaination here">
+        <Button
+          disabled={props.disabled}
+          size="small"
+          disableRipple
+          aria-label={props.buttonLabel}
+          onClick={props.handleClick}
+          color={props.danger ? "secondary" : "primary"}
+          style={{
+            padding: 10,
+            color: hovered
+              ? "#ffffff"
+              : props.danger
+              ? "#f50057"
+              : "var(--blue)"
+          }}
         >
-
-        </Tooltip> */}
-      </motion.div>
+          {props.icon}
+        </Button>
+      </StyledTooltip>
     );
   }
 };

package/src/ui/HawaAlert.js

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { ThemeProvider } from "../themes/HawaProvider";
-import { styled, alpha } from "@mui/material/styles";
+import { styled } from "@mui/material/styles";
 
 import Alert from "@mui/material/Alert";
 import AlertTitle from "@mui/material/AlertTitle";

package/src/ui/HawaLogoButton.js

@@ -2,6 +2,9 @@ import React, { useContext } from "react";
 import { ThemeProvider } from "../themes/HawaProvider";
 import { styled, darken } from "@mui/material/styles";
 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";
 
 export const HawaLogoButton = (props) => {
   const { hawaTheme, themeName } = useContext(ThemeProvider);
@@ -27,6 +30,9 @@ export const HawaLogoButton = (props) => {
       justifyContent: "center",
       marginTop: 10,
       height: 50,
+      padding: 30,
+      paddingTop: 0,
+      paddingBottom: 0,
       border: "1px solid #ced4da",
       backgroundColor: "white",
       "&:hover": {
@@ -39,5 +45,94 @@ export const HawaLogoButton = (props) => {
       ...buttonStyle
     };
   });
-  return <StyledButton {...props}>{props.children}</StyledButton>;
+  let logoElement = "";
+  switch (props.logo?.toLowerCase()) {
+    case "google":
+      logoElement = (
+        <img
+          src={
+            "https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
+          }
+        />
+      );
+      break;
+    case "github":
+      logoElement = <GitHubIcon />;
+      break;
+    case "twitter":
+      logoElement = <TwitterIcon />;
+      break;
+    case "mada":
+      logoElement = (
+        <img
+          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png"
+          height={20}
+        />
+      );
+      break;
+    case "stcpay":
+      logoElement = (
+        <img
+          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png"
+          height={20}
+        />
+      );
+      break;
+    case "visa/master":
+      logoElement = (
+        <img
+          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png"
+          height={30}
+        />
+      );
+      break;
+    case "paypal":
+      logoElement = (
+        <img
+          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
+          height={25}
+        />
+      );
+      break;
+    case "googlepay":
+      logoElement = (
+        <img
+          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
+          height={20}
+        />
+      );
+      break;
+    case "applepay":
+      logoElement = (
+        <img
+          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
+          height={40}
+        />
+      );
+      break;
+    case "wallet":
+      logoElement = <WalletIcon />;
+      break;
+
+    default:
+      break;
+  }
+  return (
+    <StyledButton {...props}>
+      {logoElement}
+      <div style={{ width: 10 }} />
+      <p
+        style={{
+          color: "black",
+          fontSize: 14,
+          textAlign: "center",
+          letterSpacing: 0.4,
+          fontFamily: "Roboto",
+          fontWeight: 500
+        }}
+      >
+        {props.buttonText}
+      </p>
+    </StyledButton>
+  );
 };

package/src/ui/HawaSettingsRow.js

@@ -5,7 +5,7 @@ import { ThemeProvider } from "../themes/HawaProvider";
 import { Box } from "../layout";
 import Checkbox from "@mui/material/Checkbox";
 import TextField from "@mui/material/TextField";
-
+import { HawaTypography } from "./HawaTypography";
 export const HawaSettingsRow = (props) => {
   const { hawaTheme, themeName } = useContext(ThemeProvider);
   const currentTheme = Object.keys(hawaTheme.settingsRow).find(
@@ -38,7 +38,7 @@ export const HawaSettingsRow = (props) => {
     <Box noColor>
       {props.settingsType === "checkbox" && (
         <div style={{ ...settingsRowStyle }}>
-          Checkbox Label <Checkbox />
+          <HawaTypography>Checkbox Label</HawaTypography> <Checkbox />
         </div>
       )}
       {props.settingsType === "text" && (

package/src/ui/HawaTextField.js

@@ -1,15 +1,12 @@
 import React, { useContext } from "react";
 import InputBase from "@mui/material/InputBase";
 import Typography from "@mui/material/Typography";
-import { styled, alpha } from "@mui/material/styles";
+import { styled } from "@mui/material/styles";
 import PropTypes from "prop-types";
 import { ThemeProvider } from "../themes/HawaProvider";
 import { HawaInputLabel } from "./HawaInputLabel";
 import { Controller, useFormContext } from "react-hook-form";
 
-import { InputAdornment, TextField } from "@mui/material";
-import { MailOutline } from "@mui/icons-material";
-
 export const HawaTextField = (props) => {
   const { control, register } = useFormContext();
 

package/src/ui/HawaTypography.js

@@ -1,6 +1,5 @@
 import React, { useContext } from "react";
-import { styled, alpha } from "@mui/material/styles";
-import PropTypes from "prop-types";
+import { styled } from "@mui/material/styles";
 import { ThemeProvider } from "../themes/HawaProvider";
 import Typography from "@mui/material/Typography";
 

package/src/ui/index.js

@@ -2,9 +2,7 @@ export * from "./AdaptiveButton";
 export * from "./ActionButton";
 export * from "./HawaCheckbox";
 export * from "./HawaRadio";
-// export * from "./RadioSelector";
-// export * from "./Row";
-// export * from "./SelectedField";
+
 export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
 export * from "./HawaButton";
@@ -12,14 +10,3 @@ export * from "./HawaTextField";
 export * from "./HawaInputLabel";
 export * from "./HawaTypography";
 export * from "./HawaAlert";
-
-export * from "./GoogleButton";
-export * from "./GithubButton";
-export * from "./TwitterButton";
-export * from "./VisaMasterButton";
-export * from "./MadaButton";
-export * from "./STCPayButton";
-export * from "./PayPalButton";
-export * from "./ApplePayButton";
-export * from "./GooglePayButton";
-export * from "./WalletButton";

package/storybook-static/iframe.html

@@ -345,4 +345,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.cfefe972.iframe.bundle.js"></script><script src="vendors~main.8ebae370.iframe.bundle.js"></script><script src="main.b7ffaed0.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.cfefe972.iframe.bundle.js"></script><script src="vendors~main.aa1d952a.iframe.bundle.js"></script><script src="main.5731dbe3.iframe.bundle.js"></script></body></html>