Add "neutral" severity style to Input (#2061)

Author: hasparus

.changeset/green-rice-brake.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': patch
+---
+
+Add (missing, so this is a patch) neutral severity to Input

packages/components/src/components/input/index.tsx

@@ -7,7 +7,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   message?: string;
 }
 
-export function Input({ severity, message, ...props }: InputProps) {
+export function Input({ severity = 'neutral', message, ...props }: InputProps) {
   return (
     <div
       // todo: discuss colors with designers.
@@ -40,15 +40,18 @@ export function Input({ severity, message, ...props }: InputProps) {
           severity === 'critical' && 'bg-critical-dark/10 dark:bg-critical-bright/20',
           severity === 'warning' && 'bg-warning-bright/10',
           severity === 'positive' && 'bg-positive-dark/10',
+          severity === 'neutral' && 'bg-blue-100 dark:bg-neutral-800',
         )}
       >
         {message &&
           (severity === 'critical' ? (
             <p className="py-0.5 text-sm text-critical-dark dark:text-white">{message}</p>
           ) : severity === 'warning' ? (
             <p className="py-0.5 text-sm text-warning-bright">{message}</p>
-          ) : (
+          ) : severity === 'positive' ? (
             <p className="py-0.5 text-sm text-positive-dark">{message}</p>
+          ) : (
+            <p className="py-0.5 text-sm text-green-800">{message}</p>
           ))}
       </div>
     </div>

packages/components/src/components/input/input.stories.tsx

@@ -92,6 +92,15 @@ export const Positive: StoryObj<InputProps> = {
   },
 };
 
+export const Neutral: StoryObj<InputProps> = {
+  args: {
+    severity: 'neutral',
+    message: 'Retrying...',
+    type: 'email',
+    value: '[email protected]',
+  },
+};
+
 export const Disabled: StoryObj<InputProps> = {
   args: {
     disabled: true,

packages/components/src/types/severity.ts

@@ -1 +1 @@
-export type Severity = 'critical' | 'positive' | 'warning';
+export type Severity = 'critical' | 'positive' | 'warning' | 'neutral';