Merge pull request #29 from codecret/main

Add Attributes
manyclues · Sep 9, 2024 · 61a8bc6 · 61a8bc6
2 parents c60e312 + 1339d1a
commit 61a8bc6
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 9 deletions.
diff --git a/lib/IUTextField/IUTextField.tsx b/lib/IUTextField/IUTextField.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 import "./iu-textfield.css";
 import { cva } from "class-variance-authority";
 
@@ -8,6 +8,12 @@ interface TextFieldProps {
   placeholder?: string;
   fieldType?: "text" | "email" | "password" | "number";
   borderColor?: string;
+  disabled?: boolean;
+  error: boolean;
+  success: boolean;
+  onClick?: () => void;
+  className?: string;
+  style?: CSSProperties;
 }
 const textFieldStyles = cva("iu_textfield", {
   variants: {
@@ -33,18 +39,31 @@ const textFieldStyles = cva("iu_textfield", {
 const IUTextField = ({
   variant,
   size,
+  onClick,
   placeholder,
   fieldType,
   borderColor,
+  disabled = false,
+  error = false,
+  success = false,
+  className = "",
+  style = {},
 }: TextFieldProps): ReactNode => {
   return (
     <input
       type={fieldType || "text"}
-      className={textFieldStyles({ variant, size })}
+      className={`${textFieldStyles({ variant, size })} ${className}`}
       placeholder={placeholder ? placeholder : ""}
       style={{
-        borderColor: borderColor || "initial",
+        borderColor: error
+          ? "red"
+          : success
+            ? "green"
+            : borderColor || "transparent",
+        ...style,
       }}
+      disabled={disabled}
+      onClick={onClick}
     />
   );
 };

diff --git a/lib/IUTextField/TextField.stories.tsx b/lib/IUTextField/TextField.stories.tsx
@@ -11,8 +11,12 @@ type Story = StoryObj<typeof IUTextField>;
 
 export const Default: Story = {
   args: {
-    variant: "outline",
-    size: "md",
+    variant: "flushed",
+    size: "lg",
     fieldType: "text",
+    borderColor: "#757575",
+    disabled: false,
+    error: false,
+    success: false
   },
 };
diff --git a/lib/IUTextField/iu-textfield.css b/lib/IUTextField/iu-textfield.css
@@ -1,12 +1,12 @@
 .iu_textfield {
-  border: 1px solid rgba(224, 224, 224, 0.623);
+  border: 1px solid var(--iu-color-secondary-400);
   border-radius: 5px;
   outline: none;
 }
 
 /* variant */
 .iu_outline {
-  border: 1px solid rgba(224, 224, 224, 0.623);
+  border: 1px solid var(--iu-color-secondary-400);
   border-radius: 5px;
   outline: none;
   background-color: none;
@@ -17,10 +17,10 @@
 .iu_flushed {
   border: none;
   border-radius: 0;
-  border-bottom: 1px solid rgba(224, 224, 224, 0.339);
+  border-bottom: 1px solid var(--iu-color-secondary-400);
 }
 .iu_filled {
-  background-color: rgba(224, 224, 224, 0.339);
+  background-color: var(--iu-color-secondary-400);
 }
 
 /* size */