kahuna-base-react-components 0.1.11 → 0.1.12

package/dist/types.d.ts

@@ -15,6 +15,7 @@ interface KButtonProps {
     textColor?: string;
     padding?: string;
     shadowDisabled?: boolean;
+    hoverBackground?: string;
 }
 declare const KButton: React.FC<KButtonProps>;
 
@@ -69,6 +70,7 @@ interface KInputProps {
     leftIconClick?: () => void;
     rightIconClick?: () => void;
     accentColor?: string;
+    hoverBackground?: string;
 }
 declare const KInput: React.FC<KInputProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/KButton/KButton.stories.tsx

@@ -23,7 +23,8 @@ KButtonText.args = {
   background: "#F2FE67",
   borderRadius: 10,
   width: "160px",
-  height: "44px"
+  height: "44px",
+  hoverBackground: "#A2FE67"
 };
 
 export const KButtonIcon = Template.bind({});

package/src/components/KButton/KButton.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useState } from "react"
 import "../../main.css"
-import KSpan from "../KSpan";
+import KSpan from "../KSpan"
 
 export interface KButtonProps {
   onClick: () => void
@@ -16,9 +16,12 @@ export interface KButtonProps {
   textColor?: string
   padding?: string
   shadowDisabled?: boolean
+  hoverBackground?: string
 }
 
 const KButton: React.FC<KButtonProps> = (props) => {
+  const [hover, setHover] = useState(false);
+
   const disabled = props.disabled || false
   const background = disabled ? "#F0F0F0" : props.background || "#F2FE67"
   const borderRadius = props.borderRadius || 10
@@ -27,18 +30,25 @@ const KButton: React.FC<KButtonProps> = (props) => {
   const textColor = disabled ? "#D6D6D6" : props.textColor || "#111"
   const padding = props.padding || "12px 16px"
   const boxShadow = props.shadowDisabled ? "" : "0 0 0 1px rgba(17, 17, 17, 0.04), 0 1px 1px 0 rgba(17, 17, 17, 0.04)"
+  const hoverBackground = props.hoverBackground || background
 
   return (
-    <button className={"k-button"} disabled={disabled} onClick={props.onClick}
-            style={{background, borderRadius, width, height, padding, boxShadow}}>
+    <button
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      className={"k-button"}
+      disabled={disabled}
+      onClick={props.onClick}
+      style={{ background: hover ? hoverBackground : background, borderRadius, width, height, padding, boxShadow }}
+    >
       <div className={"flex"}>
-        {props.leftIcon && <img src={props.leftIcon} alt={"button-left-icon"}/>}
-        {props.text && <KSpan text={props.text} color={textColor}/>}
-        {props.icon && <img src={props.icon} alt={"button-icon"}/>}
-        {props.rightIcon && <img src={props.rightIcon} alt={"button-right-icon"}/>}
+        {props.leftIcon && <img src={props.leftIcon} alt={"button-left-icon"} />}
+        {props.text && <KSpan text={props.text} color={textColor} />}
+        {props.icon && <img src={props.icon} alt={"button-icon"} />}
+        {props.rightIcon && <img src={props.rightIcon} alt={"button-right-icon"} />}
       </div>
     </button>
-  );
-};
+  )
+}
 
-export default KButton;
+export default KButton

package/src/components/KInput/KInput.stories.tsx

@@ -18,7 +18,8 @@ KInputPrimary.args = {
   onChange: (value: string) => {
 
   },
-  placeholder: "Placeholder..."
+  placeholder: "Placeholder...",
+  hoverBackground: "white"
 };
 
 export const KInputLeftIcon = Template.bind({});

package/src/components/KInput/KInput.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react"
 import "../../main.css"
 
 export interface KInputProps {
@@ -19,10 +19,12 @@ export interface KInputProps {
   leftIconClick?: () => void
   rightIconClick?: () => void
   accentColor?: string
+  hoverBackground?: string
 }
 
 const KInput: React.FC<KInputProps> = (props) => {
   const [background, setBackground] = useState("#F5F5F5")
+  const [hover, setHover] = useState(false)
 
   useEffect(() => {
     const emptyBackground = props.background || "#F5F5F5"
@@ -39,19 +41,30 @@ const KInput: React.FC<KInputProps> = (props) => {
   const type = props.type || "text"
   const accentColor = props.accentColor || ""
   const disabled = props.disabled || false
+  const hoverBackground = props.hoverBackground || background
 
   return (
-    <div className={"k-input-container"} style={{background, borderRadius, boxShadow}}>
+    <div
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      className={"k-input-container"}
+      style={{ background: hover ? hoverBackground : background, borderRadius, boxShadow }}
+    >
       {props.leftIcon && (
-        <img src={props.leftIcon} alt={"l-icon"} className={props.leftIconClick && "cursor-pointer"} onClick={() => {
-          if (props.leftIconClick) props.leftIconClick()
-        }}/>
+        <img
+          src={props.leftIcon}
+          alt={"l-icon"}
+          className={props.leftIconClick && "cursor-pointer"}
+          onClick={() => {
+            if (props.leftIconClick) props.leftIconClick()
+          }}
+        />
       )}
 
       <input
         type={type}
         className={"k-input"}
-        style={{background, width, height, accentColor}}
+        style={{ background: hover ? hoverBackground : background, width, height, accentColor }}
         value={props.value}
         placeholder={props.placeholder || ""}
         disabled={disabled}
@@ -60,15 +73,21 @@ const KInput: React.FC<KInputProps> = (props) => {
         }}
         onChange={(event) => {
           props.onChange(event.target.value)
-        }}/>
+        }}
+      />
 
       {props.rightIcon && (
-        <img src={props.rightIcon} alt={"r-icon"} className={props.rightIconClick && "cursor-pointer"} onClick={() => {
-          if (props.rightIconClick) props.rightIconClick()
-        }}/>
+        <img
+          src={props.rightIcon}
+          alt={"r-icon"}
+          className={props.rightIconClick && "cursor-pointer"}
+          onClick={() => {
+            if (props.rightIconClick) props.rightIconClick()
+          }}
+        />
       )}
     </div>
-  );
-};
+  )
+}
 
-export default KInput;
+export default KInput