@sikka/hawa 0.0.6 → 0.0.7

package/src/stories/UIStories/RadioSelector.stories.js

@@ -2,50 +2,39 @@ import React from "react";
 import { HawaProvider } from "../../themes/HawaProvider";
 import { HawaRadio } from "../../ui";
 
-const Template = (args) => {
-  const theme = {
-    borderRadius: 5,
-    primaryColor: "green",
-    secondaryColor: "red",
-    // margins: "10px",
-    paddings: 10
-  };
-  return (
-    <HawaProvider theme={theme}>
-      <HawaRadio {...args} />
-    </HawaProvider>
-  );
-};
 export default {
   title: "UI/RadioSelector",
   component: HawaRadio,
   argTypes: {
-    options: {
-      control: "array"
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
     }
   },
   args: {
-    options: [
-      { text: "Option 1", label: "option1" },
-      { text: "Option 2", label: "option2" },
-      { text: "Option 3", label: "option3" }
-    ]
+    theme: "primary"
   }
 };
 
+const Template = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <HawaRadio
+        defaultValue="option1"
+        options={[
+          { text: "Option 1", label: "option1" },
+          { text: "Option 2", label: "option2" },
+          { text: "Option 3", label: "option3" }
+        ]}
+      />
+    </HawaProvider>
+  );
+};
 export const Light = Template.bind({});
 
 Light.args = {
-  options: [
-    { text: "Option 1", label: "option1" },
-    { text: "Option 2", label: "option2" },
-    { text: "Option 3", label: "option3" }
-  ],
-  selectedColor: "blue",
-  borderRadius: 12,
-  defaultValue: "option2",
-  bgSelectedColor: "red",
-  textSelectedColor: "white",
+  theme: "primary",
+
   handleChange: () => {
     console.log("handleChange goes here");
   }
@@ -57,11 +46,7 @@ Dark.args = {
     { text: "Option 2", label: "option2" },
     { text: "Option 3", label: "option3" }
   ],
-  selectedColor: "blue",
-  borderRadius: 12,
   defaultValue: "option2",
-  bgSelectedColor: "blue",
-  textSelectedColor: "white",
   handleChange: () => {
     console.log("handleChange goes here");
   }

package/src/stories/UIStories/SettingsRow.stories.js

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+  SelectPayment,
+  CreditCardForm,
+  ChargeWalletForm,
+  PayWithWallet
+} from "../../blocks/Payment";
+import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
+import { HawaSettingsRow } from "../../ui";
+
+export default {
+  title: "UI/SettingsRow",
+  component: [SelectPayment, CreditCardForm],
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    },
+    type: {
+      options: ["checkbox", "text", "default"],
+      control: { type: "select" }
+    }
+  },
+  args: {
+    theme: "primary",
+    type: "checkbox"
+  }
+};
+
+const HawaSettingsRowTemplate = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <HawaSettingsRow settingsType={args.type} />
+    </HawaProvider>
+  );
+};
+
+export const Checkbox = HawaSettingsRowTemplate.bind({});
+Checkbox.args = {
+  theme: "primary",
+  type: "checkbox"
+};
+export const Text = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <HawaSettingsRow settingsType={args.type} />
+    </HawaProvider>
+  );
+};
+Text.args = {
+  theme: "primary",
+  type: "text"
+};
+export const Radio = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <HawaSettingsRow settingsType={args.type} />
+    </HawaProvider>
+  );
+};
+Radio.args = {
+  theme: "primary",
+  type: "radio"
+};

package/src/themes/HawaProvider.js

@@ -1,7 +1,12 @@
 import { createContext } from "react";
 
 //make the text color of the action buttons different from the text color of the layout
+let allPrimaryBG = "#f90900";
+let allPrimaryAction = "#B20D30";
 export const defaultTheme = {
+  allPrimaryBG: "#f90900",
+  allPrimaryAction: "#138A36",
+  allBorderRadius: 10,
   borderRadius: 10,
   primaryColor: "blue",
   secondaryColor: "grey",
@@ -16,7 +21,6 @@ export const defaultTheme = {
   testcolor: "green",
   margins: 10,
   paddings: 10,
-  allBorderRadius: 10,
   typography: {
     primary: { color: "black" },
     secondary: { color: "white" }
@@ -24,18 +28,20 @@ export const defaultTheme = {
   logoButton: {
     primary: {
       borderRadius: 10,
-      backgroundColor: "#f90900",
-
+      backgroundColor: allPrimaryAction,
+      // margin: 10,
+      marginTop: 10,
       padding: 10,
       border: "1px solid #ced4da",
       height: 50,
       "&:focus": {
-        borderColor: "green"
+        borderColor: allPrimaryAction
       }
     },
     secondary: {
       borderRadius: 10,
       backgroundColor: "#f90900",
+      marginTop: 10,
       padding: 10,
       border: "1px solid #ced4da",
       height: 50,
@@ -47,7 +53,8 @@ export const defaultTheme = {
   actionButton: {
     primary: {
       borderRadius: 10,
-      backgroundColor: "#f90900",
+      // backgroundColor: "#f90900",
+      backgroundColor: allPrimaryAction,
       color: "white",
       margin: 10,
       padding: 10,
@@ -86,29 +93,26 @@ export const defaultTheme = {
   inputFields: {
     primary: {
       backgroundColor: "white",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      justifyContent: "flex-start",
       borderRadius: 10,
       "&:focus": {
-        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-        // borderColor: theme.palette.primary.main
-        borderColor: "#f90900"
+        borderColor: "red",
+        borderWidth: 1,
+        border: "1px solid black"
+      },
+      "&:hover": {
+        borderColor: "red",
+        borderWidth: 1,
+        border: "1px solid black"
       }
     },
     secondary: {
       backgroundColor: "white",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      justifyContent: "flex-start",
+
       borderRadius: 10
     }
   },
   alerts: {
     primary: {
-      //  marginTop: 10,
       marginBottom: 10,
       padding: 10,
       borderRadius: 10
@@ -118,12 +122,45 @@ export const defaultTheme = {
       padding: 10,
       borderRadius: 10
     }
+  },
+  settingsRow: {
+    primary: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      backgroundColor: "#F5F5F5",
+      margin: 0,
+      padding: 10,
+      borderRadius: 10
+    },
+    secondary: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      backgroundColor: "blue",
+      margin: 0,
+      padding: 5,
+      borderRadius: 10
+    }
+  },
+  radioSelector: {
+    primary: {
+      padding: 10,
+      borderRadius: 10
+    },
+    secondary: {
+      padding: 10,
+      borderRadius: 10
+    }
   }
 };
 
 export const ThemeProvider = createContext(defaultTheme);
 
 export const HawaProvider = ({ theme, ...props }) => {
+  console.log("theme is ", theme);
   if (props.size === "large") {
     theme = {
       ...theme,
@@ -132,7 +169,9 @@ export const HawaProvider = ({ theme, ...props }) => {
     };
   }
   return (
-    <ThemeProvider.Provider value={theme || defaultTheme}>
+    <ThemeProvider.Provider
+      value={{ hawaTheme: defaultTheme, themeName: props.themeName }}
+    >
       {props.children}
     </ThemeProvider.Provider>
   );

package/src/ui/ActionButton.js

@@ -4,20 +4,22 @@ import { ThemeProvider } from "../themes/HawaProvider";
 import { styled, darken } from "@mui/material/styles";
 
 export const ActionButton = (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.actionButton).find(
+    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
   );
   let actionButtonStyle = {};
 
   if (currentTheme) {
     actionButtonStyle = {
-      ...theme.actionButton[currentTheme],
-      margin: props.last ? 0 : theme.actionButton[currentTheme].margin,
-      marginTop: props.last ? theme.actionButton[currentTheme].margin * 2 : 0,
+      ...hawaTheme.actionButton[currentTheme],
+      margin: props.last ? 0 : hawaTheme.actionButton[currentTheme].margin,
+      marginTop: props.last
+        ? hawaTheme.actionButton[currentTheme].margin * 2
+        : 0,
       "&:hover": {
         backgroundColor: darken(
-          theme.actionButton[currentTheme]?.backgroundColor,
+          hawaTheme.actionButton[currentTheme]?.backgroundColor,
           0.1
         )
       }
@@ -27,7 +29,8 @@ export const ActionButton = (props) => {
       backgroundColor: "black",
       color: "white",
       padding: 10,
-      marginTop: props.last ? 10 * 2 : 0
+      marginTop: props.last ? 10 * 2 : 0,
+      borderRadius: 0
     };
   }
 

package/src/ui/ApplePayButton.js

@@ -1,76 +1,9 @@
-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";
+import React from "react";
+import { HawaLogoButton } from "./HawaLogoButton";
 
 export const ApplePayButton = (props) => {
-  const theme = useContext(ThemeProvider);
-  let buttonStyle = {};
-
-  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}
-    >
+    <HawaLogoButton {...props}>
       <img
         src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
         height={40}
@@ -88,6 +21,6 @@ export const ApplePayButton = (props) => {
       >
         {props.buttonText}
       </p>
-    </StyledButton>
+    </HawaLogoButton>
   );
 };

package/src/ui/GithubButton.js

@@ -1,76 +1,10 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import Button from "@mui/material/Button";
-import { styled, darken } from "@mui/material/styles";
-
+import React from "react";
 import GitHubIcon from "@mui/icons-material/GitHub";
+import { HawaLogoButton } from "./HawaLogoButton";
 
 export const GithubButton = (props) => {
-  const theme = useContext(ThemeProvider);
-  let buttonStyle = {};
-
-  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}
-    >
+    <HawaLogoButton {...props}>
       <GitHubIcon />
       <div style={{ width: 10 }} />
       <p
@@ -85,6 +19,6 @@ export const GithubButton = (props) => {
       >
         {props.buttonText}
       </p>
-    </StyledButton>
+    </HawaLogoButton>
   );
 };

package/src/ui/GoogleButton.js

@@ -1,68 +1,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 React from "react";
+import { HawaLogoButton } from "./HawaLogoButton";
 
 export const GoogleButton = (props) => {
-  const theme = useContext(ThemeProvider);
-  let buttonStyle = {};
-
-  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}>
+    <HawaLogoButton {...props}>
       <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" />
       <div style={{ width: 10 }} />
       <p
@@ -77,6 +18,6 @@ export const GoogleButton = (props) => {
       >
         {props.buttonText}
       </p>
-    </StyledButton>
+    </HawaLogoButton>
   );
 };

package/src/ui/GooglePayButton.js

@@ -1,80 +1,13 @@
-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";
+import React from "react";
+import { HawaLogoButton } from "./HawaLogoButton";
 
 export const GooglePayButton = (props) => {
-  const theme = useContext(ThemeProvider);
-  let buttonStyle = {};
-
-  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}
-    >
+    <HawaLogoButton {...props}>
       <img
         src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
         height={20}
-      />{" "}
+      />
       <div style={{ width: 10 }} />
       <p
         style={{
@@ -88,6 +21,6 @@ export const GooglePayButton = (props) => {
       >
         {props.buttonText}
       </p>
-    </StyledButton>
+    </HawaLogoButton>
   );
 };