kahuna-base-react-components 0.1.10 → 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>;
 
@@ -26,6 +27,8 @@ interface KSpanProps {
     lineHeight?: string;
     fontStyle?: string;
     letterSpacing?: string;
+    hoverText?: string;
+    hoverTextColor?: string;
 }
 declare const KSpan: React.FC<KSpanProps>;
 
@@ -67,6 +70,7 @@ interface KInputProps {
     leftIconClick?: () => void;
     rightIconClick?: () => void;
     accentColor?: string;
+    hoverBackground?: string;
 }
 declare const KInput: React.FC<KInputProps>;
 
@@ -76,6 +80,7 @@ interface KSelectOption {
     type?: string;
     label2?: string;
     value2?: string;
+    icon?: string;
 }
 interface KDropdownProps {
     defaultValue?: KSelectOption | MultiValue<KSelectOption>;
@@ -94,6 +99,7 @@ interface KDropdownProps {
     label?: string;
     textColor?: string;
     shadowDisabled?: boolean;
+    menuBackground?: string;
 }
 declare const KDropdown: React.FC<KDropdownProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -65,4 +65,4 @@
   "dependencies": {
     "react-select": "^5.8.0"
   }
-}
+}

package/src/assets/check.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0199 6.01961L6.66638 11.3732L3.97949 8.68627L4.6866 7.97917L6.66638 9.95895L11.3128 5.3125L12.0199 6.01961Z" fill="#111111"/>
+</svg>

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/KDropdown/KDropdown.stories.tsx

@@ -19,8 +19,9 @@ KDropdownSingle.args = {
   onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {
 
   },
-  placeholder: "Placeholder...",
-  options: [{label: "Label 1", value: 1}, {label: "Label 2", value: 2}, {label: "Label 3", value: 3}]
+  width: 250,
+  placeholder: "Select single...",
+  options: [{label: "Label 1", value: 1, icon: TracksIcon}, {label: "Label 2", value: 2, icon: TracksIcon}, {label: "Label 3", value: 3}]
 };
 
 export const KDropdownMulti = Template.bind({});
@@ -28,8 +29,9 @@ KDropdownMulti.args = {
   onSelect: (value: KSelectOption | MultiValue<KSelectOption>) => {
 
   },
+  width: 250,
   placeholder: "Multi...",
-  options: [{label: "Label 1", value: 1}, {label: "Label 2", value: 2}, {label: "Label 3", value: 3}],
+  options: [{label: "Label 1", value: 1, icon: TracksIcon}, {label: "Label 2", value: 2, icon: TracksIcon}, {label: "Label 3", value: 3}],
   isMulti: true
 };
 
@@ -49,6 +51,8 @@ KDropdownRightIcon.args = {
   },
   placeholder: "Placeholder...",
   rightIcon: TracksIcon,
+  width: 250,
+  options: [{label: "Label 1", value: 1, icon: TracksIcon}, {label: "Label 2", value: 2, icon: TracksIcon}, {label: "Label 3", value: 3}],
 };
 
 export const KDropdownLeftRightIcon = Template.bind({});

package/src/components/KDropdown/KDropdown.tsx

@@ -1,7 +1,8 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react"
 import "../../main.css"
-import Select, {MultiValue} from 'react-select'
-
+import Select, { MultiValue } from "react-select"
+// @ts-ignore
+import CheckIcon from "../../assets/check.svg"
 
 export interface KSelectOption {
   label: string
@@ -9,6 +10,7 @@ export interface KSelectOption {
   type?: string
   label2?: string
   value2?: string
+  icon?: string
 }
 
 export interface KDropdownProps {
@@ -28,9 +30,11 @@ export interface KDropdownProps {
   label?: string
   textColor?: string
   shadowDisabled?: boolean
+  menuBackground?: string
 }
 
 const KDropdown: React.FC<KDropdownProps> = (props) => {
+  const [selectedOption, setSelectedOption] = useState<KSelectOption | MultiValue<KSelectOption>>()
   const [background, setBackground] = useState("#F5F5F5")
 
   useEffect(() => {
@@ -47,10 +51,26 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
   const isMulti = props.isMulti || false
   const textColor = props.textColor || "#111"
   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 menuBackground = props.menuBackground || "#dddddd"
+
+  const getOptionLabels = (option: KSelectOption) => {
+    return (
+      <div className="flex justify-between" style={{ width: "100%" }}>
+        <div className="flex">
+          {option.icon && <img src={option.icon} className="mr-2" width={20} alt={"option-icon"} />}
+          <span>{option.label}</span>
+        </div>
+        {
+          //@ts-ignore
+          !isMulti && selectedOption?.value === option.value && <img src={CheckIcon} width={24} alt={"check-icon"} />
+        }
+      </div>
+    )
+  }
 
   return (
-    <div className={"k-dropdown-container"} style={{background, borderRadius, width, height, boxShadow}}>
-      {props.leftIcon && <img src={props.leftIcon} width={24} className={"ml-2"} alt={"l-icon"}/>}
+    <div className={"k-dropdown-container"} style={{ background, borderRadius, width, height, boxShadow }}>
+      {props.leftIcon && <img src={props.leftIcon} width={24} className={"ml-2"} alt={"l-icon"} />}
 
       <Select
         defaultValue={props.defaultValue}
@@ -68,26 +88,47 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
             fontSize: 16,
             cursor: "pointer"
           }),
-          singleValue: provided => ({
+          menu: (base) => ({
+            ...base,
+            borderRadius: 10,
+            background: menuBackground
+          }),
+          singleValue: (provided) => ({
             ...provided,
             color: textColor
+          }),
+          option: (provided, state) => ({
+            ...provided,
+            display: "flex",
+            alignItems: "center",
+            background: "transparent",
+            color: "#111"
           })
         }}
         components={{
           IndicatorSeparator: () => null,
-          DropdownIndicator: () => null
+          DropdownIndicator: () => null,
+          SingleValue: ({ data, ...props }) => (
+            <div className="flex ml-3" style={{ position: "absolute" }}>
+              {data.icon && <img src={data.icon} className="mr-2" width={20} alt={"data-icon"} />}
+              <span>{data.label}</span>
+            </div>
+          )
         }}
         onChange={(event) => {
           if (!event) {
             return
           }
+          setSelectedOption(event)
           props.onSelect(event)
         }}
+        //@ts-ignore
+        getOptionLabel={(option: KSelectOption) => getOptionLabels(option)}
       />
 
-      {props.rightIcon && <img src={props.rightIcon} width={24} className={"mr-2"} alt={"r-icon"}/>}
+      {props.rightIcon && <img src={props.rightIcon} width={24} className={"mr-2"} alt={"r-icon"} />}
     </div>
-  );
-};
+  )
+}
 
-export default KDropdown;
+export default KDropdown

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

package/src/components/KSpan/KSpan.stories.tsx

@@ -1,17 +1,17 @@
-import {Meta, StoryFn} from "@storybook/react";
-import KSpan from "./KSpan";
+import { Meta, StoryFn } from "@storybook/react"
+import KSpan from "./KSpan"
 
 export default {
   title: "ReactComponentLibrary/KSpan",
   component: KSpan,
   parameters: {
-    layout: 'centered',
-  },
-} as Meta<typeof KSpan>;
+    layout: "centered"
+  }
+} as Meta<typeof KSpan>
 
-const Template: StoryFn<typeof KSpan> = (args) => <KSpan {...args} />;
+const Template: StoryFn<typeof KSpan> = (args) => <KSpan {...args} />
 
-export const KSpanPrimary = Template.bind({});
+export const KSpanPrimary = Template.bind({})
 KSpanPrimary.args = {
   text: "Hello World",
   fontSize: 14,
@@ -20,4 +20,17 @@ KSpanPrimary.args = {
   lineHeight: "20px",
   fontStyle: "normal",
   letterSpacing: "-0.084px"
-};
+}
+
+
+export const KSpanHoverText = Template.bind({})
+KSpanHoverText.args = {
+  text: "Hello World",
+  fontSize: 14,
+  fontWeight: 400,
+  lineHeight: "20px",
+  color: "#111",
+  fontStyle: "normal",
+  letterSpacing: "-0.084px",
+  hoverText: "Hover"
+}

package/src/components/KSpan/KSpan.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react"
 import "../../main.css"
 
 export interface KSpanProps {
@@ -9,21 +9,45 @@ export interface KSpanProps {
   lineHeight?: string
   fontStyle?: string
   letterSpacing?: string
+  hoverText?: string
+  hoverTextColor?: string
 }
 
 const KSpan: React.FC<KSpanProps> = (props) => {
+  const [onHover, setOnHover] = useState(false)
+
   const fontSize = props.fontSize || 14
   const color = props.color || "#737373"
   const fontWeight = props.fontWeight || 400
   const lineHeight = props.lineHeight || "20px"
   const fontStyle = props.fontStyle || "normal"
   const letterSpacing = props.letterSpacing || "-0.084px"
+  const hoverTextColor = props.hoverTextColor || "#737373"
 
-  return (
-    <span className={"k-span"} style={{fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing}}>
+  return props.hoverText ? (
+    <div className="grid justify-items-center k-span-hover-div">
+      <span className={"k-span"} style={{ fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing }}>
+        {props.text}
+      </span>
+      <span
+        className={"k-span-hover"}
+        style={{
+          fontSize: fontSize - 2,
+          color: hoverTextColor,
+          fontWeight,
+          lineHeight,
+          fontStyle,
+          letterSpacing
+        }}
+      >
+        {props.hoverText}
+      </span>
+    </div>
+  ) : (
+    <span className={"k-span"} style={{ fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing }}>
       {props.text}
     </span>
-  );
-};
+  )
+}
 
-export default KSpan;
+export default KSpan

package/src/main.css

@@ -13,6 +13,15 @@
     font-family: "Inter";
 }
 
+.k-span-hover {
+    display: none;
+}
+
+.k-span-hover-div:hover .k-span-hover {
+    display: inline;
+}
+
+
 .k-input-container {
     display: flex;
     padding: 8px;