CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Text area component with storybook and testing

Browse Source
This commit is contained in:
adilallo
2025-10-10 12:37:52 -06:00
parent 9c72afdc52
commit b71f0a7dea
8 changed files with 1126 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Input.js
+7 -8
View File
@@ -59,7 +59,7 @@ const Input = forwardRef(
return {
input:
"bg-[var(--color-content-default-secondary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)] cursor-not-allowed",
label: "text-[var(--color-content-default-primary)]",
label: "text-[var(--color-content-default-secondary)]",
};
}
@@ -67,7 +67,7 @@ const Input = forwardRef(
return {
input:
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-utility-negative)]",
label: "text-[var(--color-content-default-primary)]",
label: "text-[var(--color-content-default-secondary)]",
};
}
@@ -76,25 +76,25 @@ const Input = forwardRef(
return {
input:
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)]",
label: "text-[var(--color-content-default-primary)]",
label: "text-[var(--color-content-default-secondary)]",
};
case "hover":
return {
input:
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)] shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
label: "text-[var(--color-content-default-primary)]",
label: "text-[var(--color-content-default-secondary)]",
};
case "focus":
return {
input:
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-utility-info)] shadow-[0_0_5px_3px_#3281F8]",
label: "text-[var(--color-content-default-primary)]",
label: "text-[var(--color-content-default-secondary)]",
};
default:
return {
input:
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)] hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
label: "text-[var(--color-content-default-primary)]",
label: "text-[var(--color-content-default-secondary)]",
};
}
};
@@ -153,8 +153,7 @@ const Input = forwardRef(
{label && (
<label
htmlFor={inputId}
className={`${labelClasses} font-inter font-medium`}
style={{ color: "var(--color-content-default-secondary)" }}
className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-secondary)]`}
>
{label}
</label>