@granto-umbrella/umbrella-components 2.3.18 → 2.3.20

package/package.json

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

package/src/components/atoms/Badge/Badge.styles.ts

@@ -17,8 +17,8 @@ const badgeVariants = {
     color: ${semanticColors.branding.text.accent.enabled};
   `,
   danger: css`
-    background: ${semanticColors.danger.surface.enabled};
-    color: ${semanticColors.danger.text.onSurface};
+    background: ${semanticColors.global.surface.danger.disabled};
+    color: ${semanticColors.global.text.feedback.strong.error};
   `,
   success: css`
     background: ${semanticColors.success.surface.feedback};

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

@@ -94,6 +94,23 @@ const buttonVariants = {
       background: ${semanticColors.global.surface.disabled};
     }
   `,
+  outline_danger: css`
+    border: 1px solid ${semanticColors.danger.surface.enabled};
+    color: ${semanticColors.danger.text.enabled};
+    background: transparent;
+    &:hover {
+      border: 1px solid ${semanticColors.danger.surface.hover};
+      color: ${semanticColors.danger.text.hover};
+    }
+    &:active {
+      border: 1px solid ${semanticColors.danger.surface.pressed};
+      color: ${semanticColors.danger.text.pressed};
+    }
+    &:disabled {
+      border: 1px solid ${semanticColors.danger.surface.disabled};
+      color: ${semanticColors.danger.text.disabled};
+    }
+  `,
   ghost: css`
     background: transparent;
     color: ${semanticColors.branding.text.accent.enabled};

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

@@ -31,6 +31,7 @@ const Button: React.FC<ButtonProps> = ({
       $width={width}
       $height={height}
       data-testid={testId}
+      id={testId}
       {...props}
     >
       {isLoading ? (

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

@@ -6,6 +6,7 @@ export interface ButtonProps
     | "outline"
     | "outline_ghost"
     | "outline_ghost_disabled"
+    | "outline_danger"
     | "danger"
     | "ghost"
     | "ghost_alert"

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

@@ -57,6 +57,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           {icon && <Icon>{icon}</Icon>}
           <StyledInput
             data-testid={testId}
+            id={testId}
             {...(register || {})}
             ref={mergeRefs(ref, register ? register.ref : null)}
             style={style}