@granto-umbrella/umbrella-components 2.0.4 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",

package/src/components/atoms/Button/Button.tsx

@@ -15,6 +15,7 @@ const Button: React.FC<ButtonProps> = ({
   rightIcon,
   width,
   height,
+  testId,
   ...props
 }) => {
   const IconComponentLeft =
@@ -29,6 +30,7 @@ const Button: React.FC<ButtonProps> = ({
       $radius={radius}
       $width={width}
       $height={height}
+      data-testid={testId}
       {...props}
     >
       {isLoading ? (

package/src/components/atoms/Button/Button.types.ts

@@ -10,4 +10,5 @@ export interface ButtonProps
   fontSize?: string;
   width?: string;
   height?: string;
+  testId?: string;
 }

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

@@ -39,6 +39,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       shadow = "default" as "none" | "default" | "md" | "lg",
       style,
       register,
+      testId,
     },
     ref
   ) => {
@@ -50,6 +51,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           $disabled={disabled}
           $radius={radius}
           $shadow={shadow}
+          data-testid={testId}
         >
           {icon && <Icon>{icon}</Icon>}
           <StyledInput

package/src/components/atoms/Input/Input.types.ts

@@ -36,4 +36,5 @@ export interface InputProps {
   shadow?: "none" | "default" | "md" | "lg";
   style?: React.CSSProperties;
   register?: any;
+  testId?: string;
 }

package/src/components/atoms/RadioButton/RadioButton.tsx

@@ -9,10 +9,12 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   checked,
   onChange,
   disabled = false,
+  testId,
 }) => {
   return (
     <RadioContainer>
       <StyledRadio
+        data-testid={testId}
         type="radio"
         name={name}
         value={value}

package/src/components/atoms/RadioButton/RadioButton.types.ts

@@ -5,4 +5,5 @@ export interface RadioButtonProps {
   checked?: boolean;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
+  testId?: string;
 }

package/src/components/atoms/Select/Select.tsx

@@ -20,6 +20,7 @@ interface SelectProps {
   options: { label: string; value: string }[];
   onChange?: (newValue: Option | null, actionMeta: { action: string }) => void;
   value?: Option | null;
+  testId?: string;
 }
 
 const Select: React.FC<SelectProps> = ({
@@ -29,6 +30,7 @@ const Select: React.FC<SelectProps> = ({
   placeholder,
   onChange,
   value,
+  testId,
 }) => {
   return (
     <Container>
@@ -42,6 +44,7 @@ const Select: React.FC<SelectProps> = ({
         }
         value={value}
         isSearchable
+        data-testid={testId}
       />
       {supportingText && <SupportingText>{supportingText}</SupportingText>}
     </Container>

package/src/components/atoms/Switch/Switch.tsx

@@ -3,13 +3,14 @@ import { SwitchWrapper, SwitchInput, SwitchLabel } from "./Switch.styles";
 
 interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
+  testId?: string;
 }
 
-export const Switch: React.FC<SwitchProps> = ({ label, ...props }) => {
+export const Switch: React.FC<SwitchProps> = ({ label, testId, ...props }) => {
   return (
     <SwitchWrapper>
       {label && <SwitchLabel>{label}</SwitchLabel>}
-      <SwitchInput {...props} />
+      <SwitchInput data-testid={testId} {...props} />
     </SwitchWrapper>
   );
 };

package/src/components/atoms/Switch/Switch.types.ts

@@ -3,4 +3,5 @@ export interface SwitchProps {
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   label?: string;
   disabled?: boolean;
+  testId?: string;
 }

package/src/components/atoms/Text/Text.tsx

@@ -7,9 +7,15 @@ const Text: React.FC<TextProps> = ({
   size = "md",
   weight = "normal",
   color = "black",
+  testId,
 }) => {
   return (
-    <StyledText $size={size} $weight={weight} $color={color}>
+    <StyledText
+      data-testid={testId}
+      $size={size}
+      $weight={weight}
+      $color={color}
+    >
       {children}
     </StyledText>
   );

package/src/components/atoms/Text/Text.types.ts

@@ -3,4 +3,5 @@ export interface TextProps {
   size?: "sm" | "md" | "lg";
   weight?: "normal" | "bold";
   color?: string;
+  testId?: string;
 }

package/src/components/atoms/Textarea/Textarea.tsx

@@ -10,12 +10,13 @@ import {
 const Textarea: React.FC<TextareaProps> = ({
   label,
   supportingText,
+  testId,
   ...props
 }) => {
   return (
     <TextareaWrapper>
       {label && <Label>{label}</Label>}
-      <StyledTextarea {...props} />
+      <StyledTextarea data-testid={testId} {...props} />
       {supportingText && <SupportingText>{supportingText}</SupportingText>}
     </TextareaWrapper>
   );

package/src/components/atoms/Textarea/Textarea.types.ts

@@ -2,4 +2,5 @@ export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   label?: string;
   supportingText?: string;
+  testId?: string;
 }