@granto-umbrella/umbrella-components 3.0.27 → 3.0.28

package/package.json

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

package/src/components/atoms/ResendLink/ResendLink.styles.tsx

@@ -1,20 +1,20 @@
 import styled from "styled-components";
 import {
+  primitiveSizes,
   semanticColors,
   typographyTokens,
 } from "../../../styles/tokens";
 
-export const StyledText = styled.p<{
-  $size: string;
-  $weight: string;
-  $color: string;
-}>`
-  font-size: ${({ $size }) =>
-    $size === "lg"
-      ? typographyTokens.fontSizes.bodyL
-      : $size === "md"
-      ? typographyTokens.fontSizes.bodyM
-      : typographyTokens.fontSizes.bodyL};
-  font-weight: ${({ $weight }) => ($weight === "bold" ? "bold" : "normal")};
-  color: ${({ $color }) => $color || semanticColors.base.text};
+
+export const Container = styled.div<{ disabled?: boolean }>`
+  font-size: ${typographyTokens.fontSizes.labelS};
+  color: ${({ disabled }) =>
+    disabled
+      ? semanticColors.branding.text.accent.disabled
+      : semanticColors.branding.text.accent.enabled};
+  text-decoration: none;
+  margin-top: ${primitiveSizes.size.x12};
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
 `;

package/src/components/atoms/ResendLink/ResendLink.tsx

@@ -1,16 +1,21 @@
 import React from "react";
-import { StyledText } from "./ResendLink.styles";
+import { Container } from "./ResendLink.styles";
 import { ResendLinkProps } from "./ResendLink.types";
 
-export const ResendLink: React.FC<ResendLinkProps> = ({
-  children,
-  size = "md",
-  weight = "normal",
-  color = "black",
+export const ResendLink: React.FC<ResendLinkProps> = ({ 
+  children, 
+  onClick, 
+  disabled, 
+  testId 
 }) => {
   return (
-    <StyledText $size={size} $weight={weight} $color={color}>
+    <Container
+      data-testid={testId}
+      id={testId}
+      onClick={!disabled ? onClick : undefined}
+      disabled={disabled}
+    >
       {children}
-    </StyledText>
+    </Container>
   );
 };

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

@@ -1,9 +1,9 @@
 import React from "react";
 
-export interface ResendLinkProps{
-    children: React.ReactNode;
-    size?: "sm" | "md" | "lg";
-    weight?: "normal" | "bold";
-    color?: string;
+export interface ResendLinkProps {
+  children: React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+  testId?: string;
 }