@sikka/hawa 0.0.28 → 0.0.29

package/src/elements/HawaColorPicker.js

@@ -0,0 +1,61 @@
+import { useTheme } from "@mui/system";
+import React from "react";
+import styled from "@emotion/styled";
+import PropTypes from "prop-types";
+
+const ColorInput = styled.input`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  cursor: pointer;
+  height: 35px;
+  border-radius: ${(props) => props.borderRadius}px;
+  background-color: ${(props) => props.value};
+  &::-webkit-color-swatch {
+    border: none;
+  }
+  &::-moz-color-swatch {
+    border: none;
+  }
+`;
+const ColorText = styled.input`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  //   height: 30px;
+  padding: 10px;
+  border-radius: ${(props) => props.borderRadius}px;
+  &::-webkit-color-swatch {
+    border: none;
+  }
+  &::-moz-color-swatch {
+    border: none;
+  }
+`;
+export const HawaColorPicker = (props) => {
+  const theme = useTheme();
+  return (
+    <div style={{ display: "flex", flexDirection: "row" }}>
+      <ColorText
+        type={"text"}
+        value={props.color}
+        borderRadius={theme.allBorderRadius}
+        onChange={props.handleChange}
+      />
+      <div style={{ width: 10 }} />
+      <ColorInput
+        type={"color"}
+        value={props.color}
+        onChange={props.handleChange}
+        borderRadius={theme.allBorderRadius}
+      />
+    </div>
+  );
+};
+
+HawaColorPicker.propTypes = {
+  color: PropTypes.string,
+  handleChange: PropTypes.func
+};

package/src/elements/HawaRadio.js

@@ -33,5 +33,6 @@ HawaRadio.propTypes = {
   lang: PropTypes.string,
   options: PropTypes.array,
   defaultValue: PropTypes.string,
+  handleChange: PropTypes.func,
   location: PropTypes.string
 };

package/src/elements/HawaSettingsRow.js

@@ -1,12 +1,13 @@
 import React from "react";
-
 import PropTypes from "prop-types";
 import Checkbox from "@mui/material/Checkbox";
-import { HawaTypography } from "./HawaTypography";
 import Container from "@mui/material/Container";
+import { HawaTypography } from "./HawaTypography";
 import { HawaTextField } from "./HawaTextField";
 import { HawaRadio } from "./HawaRadio";
 import { HawaSwitch } from "./HawaSwitch";
+import { HawaColorPicker } from "./HawaColorPicker";
+
 export const HawaSettingsRow = (props) => {
   return (
     <Container variant="settingsRow">
@@ -17,11 +18,12 @@ export const HawaSettingsRow = (props) => {
         <HawaRadio location="inSettings" {...props} />
       )}
       {props.settingsType === "boolean" && <HawaSwitch {...props} />}
+      {props.settingsType === "color" && <HawaColorPicker {...props} />}
     </Container>
   );
 };
 
 HawaSettingsRow.propTypes = {
-  type: PropTypes.oneOf(["text", "number", "password"]),
+  type: PropTypes.oneOf(["checkbox", "text", "radio", "boolean", "color"]),
   helperText: PropTypes.string
 };

package/src/elements/index.js

@@ -15,3 +15,4 @@ export * from "./HawaInputLabel";
 export * from "./HawaTypography";
 export * from "./HawaAlert";
 export * from "./HawaTable";
+export * from "./HawaColorPicker";

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.708d7ac1.iframe.bundle.js"></script><script src="vendors~main.b026595c.iframe.bundle.js"></script><script src="main.9dd59e4f.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.708d7ac1.iframe.bundle.js"></script><script src="vendors~main.b026595c.iframe.bundle.js"></script><script src="main.c6115a9b.iframe.bundle.js"></script></body></html>