sbwb-ds 2.2.0 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbwb-ds",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "type": "module",
   "description": "Sistema de design para padronização dos processos visuais do portal SUBWEB",
   "main": "dist/sbwb-ds.js",

package/src/presentation/components/atoms/Input/index.tsx

@@ -84,6 +84,28 @@ const Input: React.FC<InputProps> = forwardRef<
       setHasValue(e.target.value !== '');
     };
 
+    const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
+      if (type === 'number') {
+        preventNonNumericalInput(e);
+      }
+    };
+
+    function preventNonNumericalInput(e: KeyboardEvent<HTMLInputElement>) {
+      const char = e.key;
+      const currentValue = e.currentTarget.value;
+
+      if (!/[0-9]/.test(char) && char !== '.' && char !== ',') {
+        e.preventDefault();
+      }
+
+      if (
+        (char === '.' || char === ',') &&
+        (currentValue.includes('.') || currentValue.includes(','))
+      ) {
+        e.preventDefault();
+      }
+    }
+
     const VisibilityIcon =
       Icons[`Visibility${size === 'Small' ? 'Ant' : 'Sm'}`];
     const VisibilityIconOff =
@@ -155,7 +177,7 @@ const Input: React.FC<InputProps> = forwardRef<
               data-testid="input"
               id={`input-${id}`}
               disabled={disabled}
-              type={inputType}
+              type={'float'}
               placeholder={placeholder}
               error={errorMessage}
               value={value}
@@ -163,6 +185,7 @@ const Input: React.FC<InputProps> = forwardRef<
               size={size}
               variant={variant}
               onKeyDown={handleKeyDown}
+              onKeyPress={handleKeyPress}
               onFocus={(e) => {
                 setIsFocused(true);
                 focus();

package/src/presentation/components/atoms/Input/styles.ts

@@ -226,10 +226,15 @@ interface InputProps {
 export const Input = styled.input<InputProps>`
   ${resetStyles}
   font-family: ${sg.fonts.fontFamily.fontFamilyPrimary};
-  font-size: ${({ size }) =>
-    size === 'Small'
-      ? sg.fonts.fontSize.fontSizeBodyMd
-      : sg.fonts.fontSize.fontSizeBodyLg};
+  font-size: ${({ size, variant }) => {
+    if (variant === 'table') {
+      return size === 'large' ? '12px' : '10px';
+    } else {
+      return size === 'Small'
+        ? sg.fonts.fontSize.fontSizeBodyMd
+        : sg.fonts.fontSize.fontSizeBodyLg;
+    }
+  }};
   background-color: ${({ disabled }) =>
     disabled ? sg.colors.brandColors.colorBrandSeSoft : 'transparent'};
   outline: none;
@@ -239,10 +244,15 @@ export const Input = styled.input<InputProps>`
 
   &::placeholder {
     font-family: ${sg.fonts.fontFamily.fontFamilyPrimary};
-    font-size: ${({ size }) =>
-      size === 'Small'
-        ? sg.fonts.fontSize.fontSizeBodyMd
-        : sg.fonts.fontSize.fontSizeBodyLg};
+    font-size: ${({ size, variant }) => {
+      if (variant === 'table') {
+        return size === 'large' ? '12px' : '10px';
+      } else {
+        return size === 'Small'
+          ? sg.fonts.fontSize.fontSizeBodyMd
+          : sg.fonts.fontSize.fontSizeBodyLg;
+      }
+    }};
     color: ${({ error, variant }) => {
       if (error && variant === 'table') {
         return sg.colors.feedbackColors.colorFeedbackError;