@sikka/hawa 0.0.6 → 0.0.9

package/src/ui/HawaLogoButton.js

@@ -2,21 +2,20 @@ 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 theme = useContext(ThemeProvider);
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
   let buttonStyle = {};
-  let currentTheme = Object.keys(theme.logoButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  let currentTheme = Object.keys(hawaTheme.logoButton).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
   if (currentTheme) {
     buttonStyle = {
-      ...theme.logoButton[currentTheme],
-      //   marginTop: theme.actionButton[currentTheme].margin,
-      border: props.outlined ? "2px solid black" : "none",
-      //   borderRadius: theme.actionButton[currentTheme].borderRadius,
+      ...hawaTheme.logoButton[currentTheme],
       backgroundColor: "white",
-      //   height: 50,
       "&:hover": {
         backgroundColor: darken("#ffffff", 0.1)
       }
@@ -29,10 +28,12 @@ export const HawaLogoButton = (props) => {
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
-      marginTop: theme.logoButton[currentTheme]?.margin,
-      border: props.outlined ? "2px solid black" : "none",
-      //   borderRadius: 0,
+      marginTop: 10,
       height: 50,
+      padding: 30,
+      paddingTop: 0,
+      paddingBottom: 0,
+      border: "1px solid #ced4da",
       backgroundColor: "white",
       "&:hover": {
         backgroundColor: darken("#ffffff", 0.1)
@@ -44,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/HawaRadio.js

@@ -1,51 +1,73 @@
+import { Typography } from "@mui/material";
 import React, { useState, useContext } from "react";
+import { Box } from "../layout";
 import { ThemeProvider } from "../themes/HawaProvider";
 
 export const HawaRadio = (props) => {
   const [value, setValue] = useState(props.defaultValue);
-  const theme = useContext(ThemeProvider);
+
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
+  const currentTheme = Object.keys(hawaTheme.radioSelector).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  );
+  let radioSelectorStyle = {};
+
+  if (currentTheme) {
+    radioSelectorStyle = {
+      ...hawaTheme.radioSelector[currentTheme],
+      "-moz-user-select": "-moz-none",
+      "-khtml-user-select": "none",
+      "-webkit-user-select": "none",
+      "-ms-user-select": "none",
+      "user-select": "none"
+    };
+  } else {
+    radioSelectorStyle = {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      backgroundColor: "#F5F5F5",
+      margin: 0,
+
+      backgroundColor: "lightGrey",
+      color: "black",
+      padding: 10
+    };
+  }
 
   return (
-    <div
-      style={{
-        backgroundColor: "white",
-        display: "flex",
-        flexDirection: "row",
-        margin: theme.margins,
-        padding: theme.paddings,
-        marginBottom: 10
-      }}
-    >
+    <Box horizontal maxWidth={"fit-content"}>
       {props.options.map((singleOption) => {
         return (
           <div
             key={singleOption.label}
-            className="radio_option"
             onClick={() => {
               setValue(singleOption.label);
               if (props.handleChange) {
                 props.handleChange();
               }
             }}
-            style={
-              value.toLowerCase() === singleOption.label.toLowerCase()
-                ? {
-                    borderRadius: theme.borderRadius,
-                    padding: theme.paddings,
-                    backgroundColor:
-                      theme.primaryColor || props.bgSelectedColor || "blue",
-                    color: props.textSelectedColor || "lightgray"
-                  }
-                : {
-                    borderRadius: theme.borderRadius,
-                    padding: theme.paddings
-                  }
-            }
+            style={{
+              ...radioSelectorStyle,
+              backgroundColor:
+                value.toLowerCase() === singleOption.label.toLowerCase()
+                  ? currentTheme
+                    ? hawaTheme.actionButton[currentTheme]?.backgroundColor
+                    : "black"
+                  : hawaTheme?.layout[currentTheme]?.backgroundColor,
+              color:
+                value.toLowerCase() === singleOption.label.toLowerCase()
+                  ? hawaTheme.actionButton[currentTheme]?.color
+                  : currentTheme
+                  ? hawaTheme?.layout[currentTheme]?.color
+                  : "black"
+            }}
           >
-            {singleOption.text}
+            <Typography>{singleOption.text}</Typography>
           </div>
         );
       })}
-    </div>
+    </Box>
   );
 };

package/src/ui/HawaSettingsRow.js

@@ -0,0 +1,71 @@
+import React, { useContext } from "react";
+
+import PropTypes from "prop-types";
+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(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  );
+  let settingsRowStyle = {};
+
+  if (currentTheme) {
+    settingsRowStyle = {
+      ...hawaTheme.settingsRow[currentTheme],
+      margin: props.last ? 0 : hawaTheme.settingsRow[currentTheme].margin,
+      marginTop: props.last ? hawaTheme.settingsRow[currentTheme].margin * 2 : 0
+    };
+  } else {
+    settingsRowStyle = {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      backgroundColor: "#F5F5F5",
+      margin: 0,
+
+      backgroundColor: "lightGrey",
+      color: "black",
+      padding: 10
+    };
+  }
+
+  return (
+    <Box noColor>
+      {props.settingsType === "checkbox" && (
+        <div style={{ ...settingsRowStyle }}>
+          <HawaTypography>Checkbox Label</HawaTypography> <Checkbox />
+        </div>
+      )}
+      {props.settingsType === "text" && (
+        <div style={{ ...settingsRowStyle }}>
+          Text Label{" "}
+          <TextField
+            InputProps={{
+              style: {
+                ...hawaTheme.inputFields[currentTheme],
+                // borderRadius: 0,
+                // padding: 0,
+                // backgroundColor: "white",
+                height: 40
+              }
+            }}
+            style={{
+              padding: 0
+            }}
+            placeholder="test"
+          />
+        </div>
+      )}
+    </Box>
+  );
+};
+
+HawaSettingsRow.propTypes = {
+  type: PropTypes.oneOf(["text", "number", "password"]),
+  helperText: PropTypes.string
+};

package/src/ui/HawaTextField.js

@@ -1,7 +1,7 @@
 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";
@@ -10,25 +10,21 @@ import { Controller, useFormContext } from "react-hook-form";
 export const HawaTextField = (props) => {
   const { control, register } = useFormContext();
 
-  const theme = useContext(ThemeProvider);
-  const currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
+  const currentTheme = Object.keys(hawaTheme.inputFields).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
   let textFieldStyle = {};
 
   if (currentTheme) {
     textFieldStyle = {
-      ...theme.inputFields[currentTheme],
-      margin: props.last ? 0 : theme.inputFields[currentTheme].margin,
-      marginTop: props.last ? theme.inputFields[currentTheme].margin * 2 : 0
+      ...hawaTheme.inputFields[currentTheme],
+      margin: props.last ? 0 : hawaTheme.inputFields[currentTheme].margin,
+      marginTop: props.last ? hawaTheme.inputFields[currentTheme].margin * 2 : 0
     };
   } else {
     textFieldStyle = {
-      backgroundColor: "white",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      justifyContent: "flex-start"
+      backgroundColor: "white"
     };
   }
 
@@ -38,27 +34,26 @@ export const HawaTextField = (props) => {
       //   marginTop: theme.spacing(3)
       // },
       "& .MuiInputBase-input": {
-        backgroundColor: theme.palette.mode === "light" ? "#fcfcfb" : "#2b2b2b",
+        // backgroundColor: theme.palette.mode === "light" ? "#fcfcfb" : "#2b2b2b",
         transition: theme.transitions.create([
           "border-color",
           "background-color",
           "box-shadow"
-        ]),
+        ])
 
-        "&:focus": {
-          // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-          // borderColor: theme.palette.primary.main
-          // borderColor: theme.actionButton[currentTheme]?.backgroundColor
-        },
-        borderRadius: 4,
-        // position: "relative",
-        border: "1px solid #ced4da",
-        fontSize: 16,
-        // width: "auto",
-        padding: "10px 12px",
-        marginBottom: props.helperText ? 5 : 0,
-        ...textFieldStyle
-      }
+        // backgroundColor: "red"
+      },
+
+      // position: "relative",
+      border: "1px solid #ced4da",
+      fontSize: 16,
+      // width: "auto",
+      padding: "10px 12px",
+      marginBottom: props.helperText ? 5 : 0,
+      paddingLeft: 10,
+      paddingRight: 10,
+      ...textFieldStyle
+      // backgroundColor: "green"
     };
   });
 
@@ -66,12 +61,7 @@ export const HawaTextField = (props) => {
     <Controller
       render={({ field }) => (
         <>
-          {props.inputLabel && (
-            <HawaInputLabel
-              themeType={props.themeType}
-              label={props.inputLabel}
-            />
-          )}
+          {props.inputLabel && <HawaInputLabel label={props.inputLabel} />}
 
           <StyledTextField
             fullWidth={true}
@@ -88,13 +78,17 @@ export const HawaTextField = (props) => {
             //       }
             //     : {}
             // }
+
             defaultValue={props.defaultValue && ""}
             value={props.value && ""}
             {...props}
             // {...field}
             {...register(props.name)}
           />
-          <Typography variant="caption" style={{ margin: 5, color: "red" }}>
+          <Typography
+            variant="caption"
+            style={{ margin: 5, marginBottom: 0, color: "red" }}
+          >
             {props.helperText}
           </Typography>
         </>

package/src/ui/HawaTypography.js

@@ -1,18 +1,17 @@
 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";
 
 export const HawaTypography = (props) => {
-  const theme = useContext(ThemeProvider);
-  const currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  const { hawaTheme, themeName } = useContext(ThemeProvider);
+  const currentTheme = Object.keys(hawaTheme.typography).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
   let typographyStyle = {};
 
   if (currentTheme) {
-    typographyStyle = { ...theme.typography[currentTheme] };
+    typographyStyle = { ...hawaTheme.typography[currentTheme] };
   } else {
     typographyStyle = {
       color: "black"

package/src/ui/index.js

@@ -2,24 +2,11 @@ export * from "./AdaptiveButton";
 export * from "./ActionButton";
 export * from "./HawaCheckbox";
 export * from "./HawaRadio";
-// export * from "./RadioSelector";
-// export * from "./Row";
-// export * from "./SelectedField";
-// export * from "./TabPanel";
+
+export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
 export * from "./HawaButton";
 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.30a2c5d7.iframe.bundle.js"></script><script src="main.e55ce615.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>