@granto-umbrella/umbrella-components 3.0.34 → 3.0.37

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

@@ -1,35 +1,35 @@
-import { 
-  semanticColors, 
-  typographyTokens 
-} from '../../../styles/tokens';
-import styled from 'styled-components';
-
-export const StyledText = styled.p<{
-  $size: string;
-  $weight: string;
-  $color: string;
-  $variant?: string;
-}>`
-  font-size: ${({ $size }) =>
-    $size === 'lg'
-      ? typographyTokens.fontSizes.bodyL
-      : $size === 'md'
-      ? typographyTokens.fontSizes.bodyM
-      : typographyTokens.fontSizes.bodyS};
-  font-weight: ${({ $weight }) => ($weight === 'bold' ? typographyTokens.fontWeights.bold : typographyTokens.fontWeights.regular)};
-  color: ${({ $color, $variant }) => {
-    if ($variant) {
-      switch ($variant) {
-        case 'error':
-          return semanticColors.danger.text.enabled;
-        case 'success':
-          return semanticColors.success.text.feedback.accent;
-        case 'warning':
-          return semanticColors.warning.text.feedback.strong;
-        default:
-          return $color;
-      }
-    }
-    return $color || semanticColors.base.text;
-  }};
-`;
+import { semanticColors, typographyTokens } from '../../../styles/tokens';
+import styled from 'styled-components';
+
+export const StyledText = styled.p<{
+  $size: string;
+  $weight: string;
+  $color: string;
+  $variant?: string;
+}>`
+  font-size: ${({ $size }) =>
+    $size === 'lg'
+      ? typographyTokens.fontSizes.bodyL
+      : $size === 'md'
+        ? typographyTokens.fontSizes.bodyM
+        : typographyTokens.fontSizes.bodyS};
+  font-weight: ${({ $weight }) =>
+    $weight === 'bold'
+      ? typographyTokens.fontWeights.bold
+      : typographyTokens.fontWeights.regular};
+  color: ${({ $color, $variant }) => {
+    if ($variant) {
+      switch ($variant) {
+        case 'error':
+          return semanticColors.danger.text.enabled;
+        case 'success':
+          return semanticColors.success.text.feedback.accent;
+        case 'warning':
+          return semanticColors.warning.text.feedback.strong;
+        default:
+          return $color;
+      }
+    }
+    return $color || semanticColors.base.text;
+  }};
+`;

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

@@ -1,31 +1,32 @@
-import React from "react";
-import { StyledText } from "./Text.styles";
-import { TextProps } from "./Text.types";
-import { semanticColors } from "../../../styles/tokens";
-
-const Text: React.FC<TextProps> = ({
-  children,
-  size = "md",
-  weight = "normal",
-  color,
-  testId,
-  variant,
-}) => {
-  // Define a cor padrão se não for fornecida
-  const defaultColor = color || semanticColors.base.text;
-
-  return (
-    <StyledText
-      data-testid={testId}
-      id={testId}
-      $size={size}
-      $weight={weight}
-      $color={defaultColor}
-      $variant={variant}
-    >
-      {children}
-    </StyledText>
-  );
-};
-
-export default Text;
+import React from 'react';
+import { StyledText } from './Text.styles';
+
+import { TextProps } from './Text.types';
+import { semanticColors } from '../../../styles/tokens';
+
+const Text: React.FC<TextProps> = ({
+  children,
+  size = 'md',
+  weight = 'normal',
+  color = 'black',
+  testId,
+  variant,
+}) => {
+  // Define a cor padrão se não for fornecida
+  const defaultColor = color || semanticColors.base.text;
+
+  return (
+    <StyledText
+      data-testid={testId}
+      id={testId}
+      $size={size}
+      $weight={weight}
+      $color={defaultColor}
+      $variant={variant}
+    >
+      {children}
+    </StyledText>
+  );
+};
+
+export default Text;

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

@@ -1,8 +1,8 @@
-export interface TextProps {
-  children: React.ReactNode;
-  size?: "sm" | "md" | "lg";
-  weight?: "normal" | "bold";
-  color?: string;
-  testId?: string;
-  variant?: string;
-}
+export interface TextProps {
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg';
+  weight?: 'normal' | 'bold';
+  color?: string;
+  testId?: string;
+  variant?: string;
+}

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

@@ -1 +1 @@
-export { default } from "./Text";
+export { default } from './Text';

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

@@ -1,52 +1,52 @@
-import styled from "styled-components";
-import {
-  semanticColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens,
-} from "../../../styles/tokens";
-
-export const TextareaWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${semanticSizes.global.gap.sm};
-  width: 100%;
-`;
-
-export const Label = styled.label`
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.global.text.subtitle.enabled};
-  font-weight: 500;
-`;
-
-export const StyledTextarea = styled.textarea`
-  display: flex;
-  padding: ${semanticSizes.global.padding.lg};
-  font-size: ${typographyTokens.fontSizes.bodyM};
-  color: ${semanticColors.base.text};
-  background: ${semanticColors.base.background};
-  border: 1px solid ${semanticColors.global.border.medium};
-  border-radius: ${semanticRadius.global.radius.md};
-  resize: vertical;
-  transition: border-color 0.2s; 
-
-  &::placeholder {
-    color: ${semanticColors.global.text.subtitle.enabled};
-  }
-
-  &:focus {
-    border-color: ${semanticColors.branding.border.enabled};
-    box-shadow: 0 0 0 2px ${semanticColors.branding.surface.hover};
-    outline: none;
-  }
-
-  &:disabled {
-    background-color: ${semanticColors.global.surface.disabled}; 
-    cursor: not-allowed;
-  }
-`;
-
-export const SupportingText = styled.span`
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.global.text.subtitle.enabled}; 
-`;
+import styled from 'styled-components';
+import {
+  semanticColors,
+  semanticSizes,
+  semanticRadius,
+  typographyTokens,
+} from '../../../styles/tokens';
+
+export const TextareaWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${semanticSizes.global.gap.sm};
+  width: 100%;
+`;
+
+export const Label = styled.label`
+  font-size: ${typographyTokens.fontSizes.labelS};
+  color: ${semanticColors.global.text.subtitle.enabled};
+  font-weight: 500;
+`;
+
+export const StyledTextarea = styled.textarea`
+  display: flex;
+  padding: ${semanticSizes.global.padding.lg};
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  color: ${semanticColors.base.text};
+  background: ${semanticColors.base.background};
+  border: 1px solid ${semanticColors.global.border.medium};
+  border-radius: ${semanticRadius.global.radius.md};
+  resize: vertical;
+  transition: border-color 0.2s;
+
+  &::placeholder {
+    color: ${semanticColors.global.text.subtitle.enabled};
+  }
+
+  &:focus {
+    border-color: ${semanticColors.branding.border.enabled};
+    box-shadow: 0 0 0 2px ${semanticColors.branding.surface.hover};
+    outline: none;
+  }
+
+  &:disabled {
+    background-color: ${semanticColors.global.surface.disabled};
+    cursor: not-allowed;
+  }
+`;
+
+export const SupportingText = styled.span`
+  font-size: ${typographyTokens.fontSizes.labelS};
+  color: ${semanticColors.global.text.subtitle.enabled};
+`;

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

@@ -1,31 +1,31 @@
-import React from "react";
-import { TextareaProps } from "./Textarea.types";
-import {
-  TextareaWrapper,
-  Label,
-  StyledTextarea,
-  SupportingText,
-} from "./Textarea.styles";
-
-const Textarea: React.FC<TextareaProps> = ({
-  label,
-  info,
-  supportingText,
-  testId,
-  ...props
-}) => {
-  return (
-    <TextareaWrapper>
-      {label && (
-        <Label>
-          {label}
-          {info}
-        </Label>
-      )}
-      <StyledTextarea data-testid={testId} id={testId} {...props} />
-      {supportingText && <SupportingText>{supportingText}</SupportingText>}
-    </TextareaWrapper>
-  );
-};
-
-export default Textarea;
+import React from 'react';
+import { TextareaProps } from './Textarea.types';
+import {
+  TextareaWrapper,
+  Label,
+  StyledTextarea,
+  SupportingText,
+} from './Textarea.styles';
+
+const Textarea: React.FC<TextareaProps> = ({
+  label,
+  info,
+  supportingText,
+  testId,
+  ...props
+}) => {
+  return (
+    <TextareaWrapper>
+      {label && (
+        <Label>
+          {label}
+          {info}
+        </Label>
+      )}
+      <StyledTextarea data-testid={testId} id={testId} {...props} />
+      {supportingText && <SupportingText>{supportingText}</SupportingText>}
+    </TextareaWrapper>
+  );
+};
+
+export default Textarea;

package/src/components/atoms/Title/Title.tsx

@@ -1,7 +1,7 @@
-import type React from "react"
-import { Container } from "./Title.styles"
-import type { TitleProps } from "./Title.types"
-
-export const Title: React.FC<TitleProps> = ({ children }) => {
-  return <Container>{children}</Container>
-}
+import type React from 'react';
+import { Container } from './Title.styles';
+import type { TitleProps } from './Title.types';
+
+export const Title: React.FC<TitleProps> = ({ children }) => {
+  return <Container>{children}</Container>;
+};

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

@@ -1,5 +1,5 @@
-import type React from "react"
-
-export interface TitleProps {
-  children: React.ReactNode
-}
+import type React from 'react';
+
+export interface TitleProps {
+  children: React.ReactNode;
+}

package/src/components/atoms/Title/index.tsx

@@ -1 +1 @@
-export { Title } from "./Title"
+export { Title } from './Title';

package/src/components/molecules/BannerAjuda/BannerAjuda.styles.tsx

@@ -1,9 +1,9 @@
-import styled from "styled-components";
-import { semanticRadius, semanticColors } from "../../../styles/tokens";
-
-export const BannerWrapper = styled.div`
-  border-radius: ${semanticRadius.global.radius.md2};
-  text-align: center;
-  color: ${semanticColors.base.background};
-  cursor: pointer;
-`;
+import styled from 'styled-components';
+import { semanticRadius, semanticColors } from '../../../styles/tokens';
+
+export const BannerWrapper = styled.div`
+  border-radius: ${semanticRadius.global.radius.md2};
+  text-align: center;
+  color: ${semanticColors.base.background};
+  cursor: pointer;
+`;

package/src/components/molecules/BannerAjuda/BannerAjuda.tsx

@@ -1,19 +1,18 @@
-import React from "react";
-import { BannerWrapper } from "./BannerAjuda.styles";
-import { BannerAjudaProps } from "./BannerAjuda.types";
-import banner_contato from "../../../assets/_banner_contato.png";
-
-
-const BannerAjuda: React.FC<BannerAjudaProps> = ({ 
-  onClick,
-  imageSrc = banner_contato,
-  alt = "Banner de ajuda e contato"
-}) => {
-  return (
-    <BannerWrapper onClick={onClick}>
-      <img src={imageSrc} alt={alt} />
-    </BannerWrapper>
-  );
-};
-
-export { BannerAjuda };
+import React from 'react';
+import { BannerWrapper } from './BannerAjuda.styles';
+import { BannerAjudaProps } from './BannerAjuda.types';
+import banner_contato from '../../../assets/_banner_contato.png';
+
+const BannerAjuda: React.FC<BannerAjudaProps> = ({
+  onClick,
+  imageSrc = banner_contato,
+  alt = 'Banner de ajuda e contato',
+}) => {
+  return (
+    <BannerWrapper onClick={onClick}>
+      <img src={imageSrc} alt={alt} />
+    </BannerWrapper>
+  );
+};
+
+export { BannerAjuda };

package/src/components/molecules/BannerAjuda/index.tsx

@@ -1 +1 @@
-export { BannerAjuda } from "./BannerAjuda";
+export { BannerAjuda } from './BannerAjuda';

package/src/components/molecules/ButtonGroup/ButtonGroup.styles.ts

@@ -1,10 +1,10 @@
-import { semanticSizes } from "../../../styles/tokens";
-import styled from "styled-components";
-
-export const ButtonGroupContainer = styled.div<{ $orientation: string }>`
-  display: flex;
-  flex-direction: ${({ $orientation }) =>
-    $orientation === "vertical" ? "column" : "row"};
-  gap: ${semanticSizes.global.gap.md};
-  align-items: center;
-`;
+import { semanticSizes } from '../../../styles/tokens';
+import styled from 'styled-components';
+
+export const ButtonGroupContainer = styled.div<{ $orientation: string }>`
+  display: flex;
+  flex-direction: ${({ $orientation }) =>
+    $orientation === 'vertical' ? 'column' : 'row'};
+  gap: ${semanticSizes.global.gap.md};
+  align-items: center;
+`;

package/src/components/molecules/ButtonGroup/ButtonGroup.types.ts

@@ -1,22 +1,22 @@
-// ButtonGroup.types.ts
-
-export interface ButtonGroupProps {
-  buttons: {
-    label: string;
-    variant?:
-      | "primary"
-      | "outline"
-      | "danger"
-      | "ghost"
-      | "alert"
-      | "danger-no-fill"
-      | "accent-outline"
-      | "accent-fill"
-      | "secondary-outline"
-      | "danger-fill";
-    onClick?: () => void;
-    leftIcon?: string;
-    rightIcon?: string;
-  }[];
-  orientation?: "horizontal" | "vertical";
-}
+// ButtonGroup.types.ts
+
+export interface ButtonGroupProps {
+  buttons: {
+    label: string;
+    variant?:
+      | 'primary'
+      | 'outline'
+      | 'danger'
+      | 'ghost'
+      | 'alert'
+      | 'danger-no-fill'
+      | 'accent-outline'
+      | 'accent-fill'
+      | 'secondary-outline'
+      | 'danger-fill';
+    onClick?: () => void;
+    leftIcon?: string;
+    rightIcon?: string;
+  }[];
+  orientation?: 'horizontal' | 'vertical';
+}