@sikka/hawa 0.0.37 → 0.0.38

package/src/styles.scss

@@ -676,4 +676,6 @@
     transform: translateY(4px) scale(2.3);
     filter: blur(0.4px);
     position: relative;
-}
+}
+
+

package/src/theme/HawaTheme.js

@@ -19,7 +19,7 @@ export const CreateHawaTheme = (
       MuiStack: {
         variants: [
           {
-            props: { variants: "card" },
+            props: { variant: "card" },
             style: {
               backgroundColor: primaryLayoutColor,
               padding: 15,
@@ -75,11 +75,11 @@ export const CreateHawaTheme = (
       MuiTableCell: {
         variants: [
           {
-            props: { variants: "borderedLeft" },
+            props: { variant: "borderedLeft" },
             style: { borderLeft: "1px solid #dddddd" }
           },
           {
-            props: { variants: "borderedRight" },
+            props: { variant: "borderedRight" },
             style: { borderRight: "1px solid #dddddd" }
           }
         ]
@@ -99,7 +99,7 @@ export const CreateHawaTheme = (
       MuiFormControl: {
         variants: [
           {
-            props: { variants: "hawa" },
+            props: { variant: "hawa" },
             style: { width: "100%" }
           }
         ]
@@ -108,7 +108,7 @@ export const CreateHawaTheme = (
         styleOverrides: {},
         variants: [
           {
-            props: { variants: "validation" },
+            props: { variant: "validation" },
             style: {
               textAlign: "start",
               whiteSpace: "nowrap",
@@ -147,24 +147,36 @@ export const CreateHawaTheme = (
             paddingLeft: 10,
             borderRadius: allBorderRadius,
             "&:hover": { outline: `1px solid ${primaryActionColor}` },
-            "&:focus": { outline: `1px solid ${primaryActionColor}` }
+            "&:focus": { outline: `1px solid ${primaryActionColor}` },
           },
           input: {
             margin: 0,
             border: "none",
             padding: 10,
-            ":focus": { border: "none" }
+            ":focus": { border: "none" },
           }
         },
         variants: [
           {
-            props: { variants: "unscrollable" },
+            props: { variant: "unscrollable" },
             style: {
               "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
                 { display: "none" },
               "& input[type=number]": { MozAppearance: "textfield" }
             }
+          }, 
+          {
+            props : {variant : "pin"},
+            style:{
+              height: 60,
+              width : 50,
+              textAlign:"center",
+              "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+                { display: "none" },
+              "& input[type=number]": { MozAppearance: "textfield" }
+            },
           }
+          
         ]
       },
       MuiDialog: {
@@ -190,7 +202,7 @@ export const CreateHawaTheme = (
         },
         variants: [
           {
-            props: { variants: "drop-area" },
+            props: { variant: "drop-area" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -209,7 +221,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "page-controls" },
+            props: { variant: "page-controls" },
             style: {
               background: "none",
               fontSize: "2rem",
@@ -219,7 +231,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "auth" },
+            props: { variant: "auth" },
             style: {
               backgroundColor: primaryLayoutColor,
               fontSize: "2rem",
@@ -228,12 +240,12 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "plain" },
+            props: { variant: "plain" },
             style: { background: "none" }
           },
 
           {
-            props: { variants: "panelTabs" },
+            props: { variant: "panelTabs" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -247,7 +259,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "pricingTabs" },
+            props: { variant: "pricingTabs" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -261,7 +273,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "inSettings" },
+            props: { variant: "inSettings" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -275,7 +287,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "inPricing" },
+            props: { variant: "inPricing" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -293,7 +305,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "settingsRow" },
+            props: { variant: "settingsRow" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -308,7 +320,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "plan-card" },
+            props: { variant: "plan-card" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -324,7 +336,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "selected-plan-card" },
+            props: { variant: "selected-plan-card" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -340,7 +352,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "plan-header" },
+            props: { variant: "plan-header" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -355,7 +367,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "card-container" },
+            props: { variant: "card-container" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -366,7 +378,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "card-header" },
+            props: { variant: "card-header" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -382,7 +394,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "card-content" },
+            props: { variant: "card-content" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -397,7 +409,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "card-actions" },
+            props: { variant: "card-actions" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -407,7 +419,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "selected-plan-header" },
+            props: { variant: "selected-plan-header" },
             style: {
               display: "flex",
               flexDirection: "column",
@@ -421,7 +433,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "pricing" },
+            props: { variant: "pricing" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -433,7 +445,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "appbar" },
+            props: { variant: "appbar" },
             style: {
               boxShadow: "none",
               display: "flex",
@@ -464,7 +476,7 @@ export const CreateHawaTheme = (
         },
         variants: [
           {
-            props: { variants: "layout" },
+            props: { variant: "layout" },
             style: {
               backgroundColor: primaryLayoutColor,
               "&:hover": {
@@ -474,7 +486,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "color-picker" },
+            props: { variant: "color-picker" },
             style: ({ theme }) => ({
               ...{
                 height: 40,
@@ -491,21 +503,21 @@ export const CreateHawaTheme = (
             })
           },
           {
-            props: { variants: "danger" },
-            style: ({ palette }) => ({
+            props: { variant: "danger" },
+            style: ({ theme }) => ({
               ...{
-                backgroundColor: palette.error.main,
+                backgroundColor: theme.palette.error.main,
                 color: primaryActionTextColor,
                 borderRadius: allBorderRadius,
                 "&:hover": {
-                  backgroundColor: darken(palette.error.main, 0.5),
+                  backgroundColor: darken(theme.palette.error.main, 0.5),
                   color: "white"
                 }
               }
             })
           },
           {
-            props: { variants: "last" },
+            props: { variant: "last" },
             style: {
               backgroundColor: primaryActionColor,
               color: primaryActionTextColor,
@@ -518,7 +530,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "withLogo" },
+            props: { variant: "withLogo" },
             style: {
               textTransform: "none",
               border: `1px solid ${darken(primaryActionColor, 0.1)}`,
@@ -532,7 +544,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "selected" },
+            props: { variant: "selected" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -550,7 +562,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "unselected" },
+            props: { variant: "unselected" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -563,7 +575,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "adaptive-dark" },
+            props: { variant: "adaptive-dark" },
             style: {
               backgroundColor: primaryActionColor,
               height: 40,
@@ -576,7 +588,7 @@ export const CreateHawaTheme = (
             }
           },
           {
-            props: { variants: "adaptive-light" },
+            props: { variant: "adaptive-light" },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -641,11 +653,11 @@ export const CreateHawaTheme = (
         },
         variants: [
           {
-            props: { variants: "inContainer" },
+            props: { variant: "inContainer" },
             style: { color: "black", borderRadius: allBorderRadius }
           }
           // {
-          //   props: { variants: "offline" },
+          //   props: { variant: "offline" },
           //   style: ({ theme }) => ({
           //     ...{
           //       backgroundColor: lighten(theme.palette.error.main, 0.8),
@@ -667,7 +679,7 @@ export const CreateHawaTheme = (
         },
         variants: [
           {
-            props: { variants: "clicked" },
+            props: { variant: "clicked" },
             style: { backgroundColor: primaryActionColor, color: "white" }
           }
         ]
@@ -675,7 +687,7 @@ export const CreateHawaTheme = (
       MuiToolbar: {
         variants: [
           {
-            props: { variants: "appbar" },
+            props: { variant: "appbar" },
             style: {
               color: "black",
               height: 60,
@@ -692,7 +704,7 @@ export const CreateHawaTheme = (
         styleOverrides: { root: { boxShadow: "none", color: "black" } },
         variants: [
           {
-            props: { variants: "appbar" },
+            props: { variant: "appbar" },
             style: {
               color: "black",
               margin: 0,
@@ -701,7 +713,34 @@ export const CreateHawaTheme = (
             }
           }
         ]
+      },
+
+      MuiTextField : {
+        styleOverrides:{
+          root: {
+            backgroundColor: "white",
+            paddingRight: 10,
+            paddingLeft: 10,
+            borderRadius: allBorderRadius,
+            "&:hover": { outline: `1px solid ${primaryActionColor}` },
+            "&:focus": { outline: `1px solid ${primaryActionColor}` },
+          },
+        },
+        variants: [
+          {
+            props : {variant : "pinInput"},
+            style:{
+              height: 60,
+              width : 50,
+              textAlign:"center",
+              "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+                { display: "none" },
+              "& input[type=number]": { MozAppearance: "textfield" }
+            },
+          }
+        ]
       }
+
     }
   });
 
@@ -878,5 +917,5 @@ export const UpdateHawaTheme = (
   ].backgroundColor = primaryActionColor;
   theme.components.MuiListItemButton.variants[0].style.backgroundColor =
     primaryActionColor;
-    return theme;
+  return theme;
 };

package/src/util.js

@@ -16,5 +16,15 @@ const getTextColor = (backColor) => {
     return "#ffffff";
   }
 };
+const replaceAt = function (string, index, replacement) {
+  // if (replacement == "" || replacement == " ") {
+  //   return (
+  //     string.substring(0, index) +
+  //     string.substring(index + replacement.length )
+  //   );
+  // }
+  const replaced = string.substring(0, index) + replacement + string.substring(index + 1)
+  return replaced
+};
 
-export { hexToRgb, getTextColor };
+export { hexToRgb, getTextColor, replaceAt };

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.9be73be4.iframe.bundle.js"></script><script src="vendors~main.826e89a1.iframe.bundle.js"></script><script src="main.1a0e1257.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.9be73be4.iframe.bundle.js"></script><script src="vendors~main.826e89a1.iframe.bundle.js"></script><script src="main.2a7fa838.iframe.bundle.js"></script></body></html>