@sikka/hawa 0.0.2 → 0.0.5

package/src/{components/Hawa/RadioSelector/RadioSelector.jsx → ui/RadioSelector.js}

@@ -1,51 +1,51 @@
-import React, { useState, useContext } from "react";
-import { ThemeProvider } from "../HawaProvider";
-
-export const StyledRadioSelector = (props) => {
-  const [value, setValue] = useState(props.defaultValue);
-  const theme = useContext(ThemeProvider);
-
-  return (
-    <div
-      style={{
-        backgroundColor: "white",
-        display: "flex",
-        flexDirection: "row",
-        margin: theme.margins,
-        padding: theme.paddings,
-        marginBottom: 10
-      }}
-    >
-      {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
-                  }
-            }
-          >
-            {singleOption.text}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
+import React, { useState, useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+
+export const StyledRadioSelector = (props) => {
+  const [value, setValue] = useState(props.defaultValue);
+  const theme = useContext(ThemeProvider);
+
+  return (
+    <div
+      style={{
+        backgroundColor: "white",
+        display: "flex",
+        flexDirection: "row",
+        margin: theme.margins,
+        padding: theme.paddings,
+        marginBottom: 10
+      }}
+    >
+      {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
+                  }
+            }
+          >
+            {singleOption.text}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/{components/Hawa/Row/Row.jsx → ui/Row.js}

@@ -1,21 +1,21 @@
-export const Row = (props) => {
-  return (
-    <div
-      style={{
-        backgroundColor: "var(--light)",
-        borderRadius: "var(--borderR)",
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        height: 50,
-        padding: 10,
-        marginBottom: 20,
-        width: "100%"
-      }}
-    >
-      <div style={{ fontWeight: 800 }}>{props.title}</div>
-      {props.actionComponent}
-    </div>
-  );
-};
+export const Row = (props) => {
+  return (
+    <div
+      style={{
+        backgroundColor: "var(--light)",
+        borderRadius: "var(--borderR)",
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        height: 50,
+        padding: 10,
+        marginBottom: 20,
+        width: "100%"
+      }}
+    >
+      <div style={{ fontWeight: 800 }}>{props.title}</div>
+      {props.actionComponent}
+    </div>
+  );
+};

package/src/ui/STCPayButton.js

@@ -0,0 +1,94 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+import Button from "@mui/material/Button";
+import { styled, darken } from "@mui/material/styles";
+
+import GitHubIcon from "@mui/icons-material/GitHub";
+
+export const STCPayButton = (props) => {
+  const theme = useContext(ThemeProvider);
+  let buttonStyle = {};
+
+  console.log(Object.keys(theme.actionButton));
+  let currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  if (currentTheme) {
+    buttonStyle = {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 0,
+      marginTop: theme.actionButton[currentTheme].margin,
+      border: props.outlined ? "2px solid black" : "none",
+      borderRadius: theme.actionButton[currentTheme].borderRadius,
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  } else {
+    buttonStyle = {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      marginTop: theme.margins,
+      border: props.outlined ? "2px solid black" : "none",
+      borderRadius: 0,
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  }
+
+  const StyledButton = styled(Button)(({ theme }) => {
+    return {
+      // "label + &": {
+      //   marginTop: theme.spacing(3)
+      // },
+
+      borderRadius: 4,
+      position: "relative",
+      border: "1px solid #ced4da",
+      fontSize: 16,
+      // width: "auto",
+      height: 50,
+      // padding: "10px 12px",
+      ...buttonStyle,
+      "&:focus": {
+        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+        borderColor: theme.palette.primary.main
+      }
+    };
+  });
+
+  return (
+    <StyledButton
+      //  style={buttonStyle}
+      onClick={props.handleClick}
+    >
+      <img
+        src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png"
+        height={30}
+      />{" "}
+      <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/{components/Hawa/SelectedField/SelectedField.jsx → ui/SelectedField.js}

@@ -1,46 +1,46 @@
-import React from "react";
-import { Controller, useFormContext } from "react-hook-form";
-import FormHelperText from "@material-ui/core/FormHelperText";
-import FormControl from "@material-ui/core/FormControl";
-import MenuItem from "@material-ui/core/MenuItem";
-import Select from "@material-ui/core/Select";
-
-const MuiSelect = (props) => {
-  const { name, options, required, error } = props;
-  let isError = false;
-  let errorMessage = "";
-  if (error && error.hasOwnProperty(name)) {
-    isError = true;
-    errorMessage = error[name].message;
-  }
-
-  return (
-    <FormControl fullWidth={true} error={isError}>
-      {label} {required ? <span className="req-label">*</span> : null}
-      <Select id={name} {...props}>
-        <MenuItem value="">
-          <em>None</em>
-        </MenuItem>
-        {options.map((item) => (
-          <MenuItem key={item.id} value={item.id}>
-            {item.label}
-          </MenuItem>
-        ))}
-      </Select>
-      <FormHelperText>{errorMessage}</FormHelperText>
-    </FormControl>
-  );
-};
-
-export const SelectField = (props) => {
-  const { control } = useFormContext();
-  return (
-    <React.Fragment>
-      <Controller
-        control={control}
-        render={(field) => <MuiSelect {...props} {...field} />}
-        {...props}
-      />
-    </React.Fragment>
-  );
-};
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import FormHelperText from "@mui/material/FormHelperText";
+import FormControl from "@mui/material/FormControl";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+
+const MuiSelect = (props) => {
+  const { name, options, required, error } = props;
+  let isError = false;
+  let errorMessage = "";
+  if (error && error.hasOwnProperty(name)) {
+    isError = true;
+    errorMessage = error[name].message;
+  }
+
+  return (
+    <FormControl fullWidth={true} error={isError}>
+      {label} {required ? <span className="req-label">*</span> : null}
+      <Select id={name} {...props}>
+        <MenuItem value="">
+          <em>None</em>
+        </MenuItem>
+        {options.map((item) => (
+          <MenuItem key={item.id} value={item.id}>
+            {item.label}
+          </MenuItem>
+        ))}
+      </Select>
+      <FormHelperText>{errorMessage}</FormHelperText>
+    </FormControl>
+  );
+};
+
+export const SelectField = (props) => {
+  const { control } = useFormContext();
+  return (
+    <React.Fragment>
+      <Controller
+        control={control}
+        render={(field) => <MuiSelect {...props} {...field} />}
+        {...props}
+      />
+    </React.Fragment>
+  );
+};

package/src/ui/StyledAlert.js

@@ -0,0 +1,30 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+
+export const StyledAlert = (props) => {
+  const theme = useContext(ThemeProvider);
+
+  let alertStyle = {
+    backgroundColor: "green",
+    padding: 10,
+    marginTop: 10,
+    marginBottom: 10,
+    borderRadius: theme.borderRadius
+  };
+  switch (props.type) {
+    case "warning":
+      alertStyle.backgroundColor = "yellow";
+      return <div style={alertStyle}>{props.text}</div>;
+      break;
+    case "danger":
+      alertStyle.backgroundColor = "red";
+      return <div style={alertStyle}>{props.text}</div>;
+      break;
+    case "notification":
+      alertStyle.backgroundColor = "blue";
+      return <div style={alertStyle}>{props.text}</div>;
+      break;
+    default:
+      return <div style={alertStyle}>{props.text}</div>;
+  }
+};

package/src/{components/Hawa/StyledTooltip → ui}/StyledTooltip.js

@@ -1,46 +1,46 @@
-import React, { useState, useContext } from "react";
-import Tooltip from "@material-ui/core/Tooltip";
-
-export const StyledTooltip = (props) => {
-  const screenSize = {
-    width: 1500,
-    height: 200
-  };
-  return (
-    <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>
-  );
-};
+import React, { useState, useContext } from "react";
+import Tooltip from "@mui/material/Tooltip";
+
+export const StyledTooltip = (props) => {
+  const screenSize = {
+    width: 1500,
+    height: 200
+  };
+  return (
+    <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/{components/Hawa/TabPanel/TabPanel.jsx → ui/TabPanel.js}

@@ -1,37 +1,37 @@
-import React from "react";
-import { makeStyles } from "@material-ui/core";
-
-const useStyles = makeStyles((theme) => ({
-  panelsContainer: {
-    height: "100%",
-    width: "100%"
-  },
-  panel: {
-    backgroundColor: "var(--lightGrey)",
-    borderRadius: "var(--borderR)",
-    height: "100%",
-    width: "100%",
-    padding: 10
-  }
-}));
-
-export const TabPanel = (props) => {
-  const classes = useStyles();
-  const { children, value, index, ...other } = props;
-  return (
-    <div
-      role="tabpanel"
-      className={classes.panelsContainer}
-      hidden={value !== index}
-      id={`vertical-tabpanel-${index}`}
-      aria-labelledby={`vertical-tab-${index}`}
-      {...other}
-    >
-      {value === index && (
-        <div className={classes.panel}>
-          <span>{children}</span>
-        </div>
-      )}
-    </div>
-  );
-};
+import React from "react";
+import { makeStyles } from "@mui/material/styles";
+
+const useStyles = makeStyles((theme) => ({
+  panelsContainer: {
+    height: "100%",
+    width: "100%"
+  },
+  panel: {
+    backgroundColor: "var(--lightGrey)",
+    borderRadius: "var(--borderR)",
+    height: "100%",
+    width: "100%",
+    padding: 10
+  }
+}));
+
+export const TabPanel = (props) => {
+  const classes = useStyles();
+  const { children, value, index, ...other } = props;
+  return (
+    <div
+      role="tabpanel"
+      className={classes.panelsContainer}
+      hidden={value !== index}
+      id={`vertical-tabpanel-${index}`}
+      aria-labelledby={`vertical-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <div className={classes.panel}>
+          <span>{children}</span>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/ui/TwitterButton.js

@@ -0,0 +1,84 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+import TwitterIcon from "@mui/icons-material/Twitter";
+import Button from "@mui/material/Button";
+import { styled, alpha, darken } from "@mui/material/styles";
+
+export const TwitterButton = (props) => {
+  const theme = useContext(ThemeProvider);
+  let buttonStyle = {};
+
+  console.log(Object.keys(theme.actionButton));
+  let currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  if (currentTheme) {
+    buttonStyle = {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      marginTop: theme.layout[currentTheme].margin,
+      border: props.outlined ? "2px solid black" : "none",
+      borderRadius: theme.layout[currentTheme].borderRadius,
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  } else {
+    buttonStyle = {
+      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      marginTop: theme.margins,
+      border: props.outlined ? "2px solid black" : "none",
+      borderRadius: 0,
+      backgroundColor: "white",
+      "&:hover": {
+        backgroundColor: darken("#ffffff", 0.1)
+      }
+    };
+  }
+  const StyledButton = styled(Button)(({ theme }) => {
+    return {
+      // "label + &": {
+      //   marginTop: theme.spacing(3)
+      // },
+
+      borderRadius: 4,
+      position: "relative",
+      border: "1px solid #ced4da",
+      fontSize: 16,
+      // width: "auto",
+      height: 50,
+      // padding: "10px 12px",
+      ...buttonStyle,
+      "&:focus": {
+        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+        borderColor: theme.palette.primary.main
+      }
+    };
+  });
+  return (
+    <StyledButton onClick={props.handleClick}>
+      <TwitterIcon />
+      <div style={{ width: 10 }} />
+      <p
+        style={{
+          color: "black",
+          fontSize: 14,
+          textAlign: "center",
+          letterSpacing: 0.4,
+          fontFamily: "Roboto",
+          fontWeight: 500
+        }}
+      >
+        {props.buttonText}
+      </p>
+    </StyledButton>
+  );
+};