@granto-umbrella/umbrella-components 2.3.23 → 3.0.1

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

@@ -1,5 +1,8 @@
-import { semanticColors, typographyTokens } from "../../../styles/tokens";
-import styled from "styled-components";
+import { 
+  semanticColors, 
+  typographyTokens 
+} from '../../../styles/tokens';
+import styled from 'styled-components';
 
 export const StyledText = styled.p<{
   $size: string;
@@ -9,12 +12,12 @@ export const StyledText = styled.p<{
   display: flex;
   width: 100%;
   font-size: ${({ $size }) =>
-    $size === "lg"
+    $size === 'lg'
       ? typographyTokens.fontSizes.bodyL
-      : $size === "md"
+      : $size === 'md'
       ? typographyTokens.fontSizes.bodyM
       : typographyTokens.fontSizes.bodyS};
 
-  font-weight: ${({ $weight }) => ($weight === "bold" ? "bold" : "normal")};
+  font-weight: ${({ $weight }) => ($weight === 'bold' ? 'bold' : 'normal')};
   color: ${({ $color }) => $color || semanticColors.base.text};
 `;

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { StyledText } from "./Text.styles";
+
 import { TextProps } from "./Text.types";
 
 const Text: React.FC<TextProps> = ({

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

@@ -0,0 +1,17 @@
+import styled from "styled-components"
+import { typographyTokens, semanticColors } from "../../../styles/tokens"
+
+export const Container = styled.div`
+  width: 505px;
+  font-size: ${typographyTokens.fontSizes.displayM};
+  color: ${semanticColors.base.text};
+  font-weight: 600;
+  line-height: 120%;
+  letter-spacing: -0.64px;
+  text-align: center;
+
+  /* Media Query (padrão) */
+  @media (max-width: 768px) {
+    font-size: ${typographyTokens.fontSizes.displayL};
+  }
+`

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

@@ -0,0 +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>
+}

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

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

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

@@ -0,0 +1 @@
+export { Title } from "./Title"

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

@@ -0,0 +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;
+`;

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

@@ -0,0 +1,19 @@
+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/BannerAjuda.types.ts

@@ -0,0 +1,5 @@
+export interface BannerAjudaProps {
+  onClick: () => void;
+  imageSrc?: string;
+  alt?: string;
+}

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

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

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

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import { semanticSizes } from "../../../styles/tokens";
+
+export const StyledCodeInputContainer = styled.div`
+  display: flex;
+  margin-bottom: ${semanticSizes.global.padding.xl};  
+`;

package/src/components/molecules/CodeInputContainer/CodeInputContainer.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyledCodeInputContainer } from './CodeInputContainer.styles';
+import { CodeInputContainerProps } from './CodeInputContainer.types';
+import CodeInput from '../../atoms/CodeInput';
+
+const CodeInputContainer: React.FC<CodeInputContainerProps> = ({
+  code,
+  inputRefs,
+  handleChange,
+  handleKeyDown,
+  handlePaste,
+  testId,
+}) => {
+  return (
+    <StyledCodeInputContainer data-testid={testId} id={testId}>
+      {code.map((value, index) => (
+        <CodeInput
+          key={index}
+          ref={(el) => (inputRefs.current[index] = el)}
+          type="text"
+          maxLength={1}
+          value={value}
+          onChange={(e) => handleChange(e.target.value, index)}
+          onKeyDown={(e) => handleKeyDown(e, index)}
+          onPaste={handlePaste}
+        />
+      ))}
+    </StyledCodeInputContainer>
+  );
+};
+
+export { CodeInputContainer };

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

@@ -0,0 +1,13 @@
+import React from "react";
+
+export interface CodeInputContainerProps {
+  code: string[];
+  inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>;
+  handleChange: (value: string, index: number) => void;
+  handleKeyDown: (
+    event: React.KeyboardEvent<HTMLInputElement>,
+    index: number
+  ) => void;
+  handlePaste: (event: React.ClipboardEvent<HTMLInputElement>) => void;
+  testId?: string;
+}

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

@@ -0,0 +1,3 @@
+
+
+export { CodeInputContainer } from "./CodeInputContainer";

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

@@ -0,0 +1,118 @@
+import styled from "styled-components"; 
+import * as Dialog from "@radix-ui/react-dialog";
+import { semanticRadius, semanticColors, typographyTokens, semanticSizes, semanticShadows } from "../../../styles/tokens"
+
+export const Overlay = styled(Dialog.Overlay)`
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.6); 
+    z-index: 50;
+`;
+
+export const Content = styled(Dialog.Content)`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: ${typographyTokens.fontFamily.base};
+  background: ${semanticColors.base.background};
+  border-radius: 12px;  
+  padding: ${semanticSizes.global.padding["3xl"]};
+  width: 100%;
+  max-width: 520px;
+  z-index: 1000;
+  box-shadow: ${semanticShadows.shadow.lg};
+  border-top: 6px solid #c53030;  
+`;
+
+export const Title = styled.h2`
+  font-size: 28px;  
+  font-weight: ${typographyTokens.fontWeights.semibold};
+  line-height: ${typographyTokens.lineHeights.displayM};
+  color: ${semanticColors.global.text.default.enabled};
+  margin-bottom: ${semanticSizes.global.gap.sm};
+  padding-right: ${semanticSizes.global.padding.md};
+`;
+
+export const Description = styled.p`
+  font-size: 1.1rem;  
+  line-height: 1.5; 
+  color: ${semanticColors.global.text.onSurface.subtitle};
+  margin-bottom: ${semanticSizes.global.gap.lg};
+
+  span {
+    cursor: pointer;
+    color: ${semanticColors.global.text.default.enabled};
+  }
+
+  strong {
+    font-weight: ${typographyTokens.fontWeights.semibold};
+    color: ${semanticColors.global.text.default.enabled};
+  }
+`;
+
+export const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${semanticSizes.global.gap.md};
+  margin-top: ${semanticSizes.global.gap.xl};
+`;
+
+
+export const CancelButton = styled(Dialog.Close)`
+  background: ${semanticColors.base.background};
+  border: 2px solid ${semanticColors.global.border.strong};
+  border-radius: ${semanticRadius.global.radius.md2};
+  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
+  font-weight: ${typographyTokens.fontWeights.semibold};
+  font-size: ${typographyTokens.fontSizes.labelM};
+  color: ${semanticColors.global.border.strong};
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: ${semanticColors.neutral[100]};
+  }
+`;
+
+export const ConfirmButton = styled.button`
+  background: #c53030;  
+  color: ${semanticColors.danger.text.onSurface};
+  border: none;
+  border-radius: ${semanticRadius.global.radius.md2};
+  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
+  font-weight: ${typographyTokens.fontWeights.semibold};
+  font-size: ${typographyTokens.fontSizes.labelM};
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #b02828;  
+  }
+
+  &:active {
+    background: #952020; 
+  }
+
+  &:disabled {
+    background: #e2e2e2;  
+    cursor: not-allowed;
+  }
+`;
+
+export const CloseIcon = styled(Dialog.Close)`
+  position: absolute;
+  top: ${semanticSizes.global.padding["3xl"]};
+  right: ${semanticSizes.global.padding["3xl"]};
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  svg {
+    color: ${semanticColors.global.text.onSurface.subtitle};
+  }
+
+  &:hover svg {
+    color: ${semanticColors.global.text.default.enabled};
+  }
+`;

package/src/components/molecules/ExcludeModal/ExcludeModal.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import {
+  Overlay,
+  Content,
+  Title,
+  Description,
+  Footer,
+  CancelButton,
+  ConfirmButton,
+  CloseIcon,
+} from "./ExcludeModal.styles";
+import { ExcludeModalProps } from "./ExcludeModal.types";
+
+const ExcludeModal: React.FC<ExcludeModalProps> = ({
+  open,
+  onOpenChange,
+  onClose,
+  onConfirm,
+  isLoading = false,
+  title = "Você tem certeza que deseja excluir essa cotação?",
+  description = "Essa cotação será excluída mas ainda será mantida no nosso sistema, caso queira restaurar, precisa entrar em contato conosco.",
+}) => {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Overlay />
+      <Content>
+        <CloseIcon aria-label="Fechar" onClick={onClose}>
+          <X size={28} />
+        </CloseIcon>
+
+        <Title>{title}</Title>
+
+        <Description>{description}</Description>
+
+        <Footer>
+          <CancelButton onClick={onClose}>Cancelar</CancelButton>
+          <ConfirmButton onClick={onConfirm} disabled={isLoading}>
+            {isLoading ? "Excluindo..." : "Sim, excluir"}
+          </ConfirmButton>
+        </Footer>
+      </Content>
+    </Dialog.Root>
+  );
+};
+
+export { ExcludeModal };

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

@@ -0,0 +1,10 @@
+export interface ExcludeModalProps{
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onClose: () => void;
+    onConfirm: () => void;
+    orderId?: string;
+    isLoading?: boolean;
+    title?: string;
+    description?: string;
+}

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

@@ -0,0 +1 @@
+export { ExcludeModal } from "./ExcludeModal";

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

@@ -0,0 +1,68 @@
+import styled from "styled-components";
+import {
+  primitiveColors,
+  semanticColors,
+  semanticSizes,
+  typographyTokens,
+} from "../../../styles/tokens";
+import { HighlightProps } from "./HighlightsCard.types";
+
+export const CardWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 225px);
+  gap: ${semanticSizes.global.gap["lg"]}; 
+  
+  width: 100%;
+`;
+
+
+const backgroundColors: Record<HighlightProps["color"], string> = {
+  red: primitiveColors.red[600],       // #CB2C2D
+  orange: primitiveColors.orange[600], // #CB712C
+  blue: primitiveColors.blue[400],     // #5F73E0
+  gray: primitiveColors.gray[400],     // #CFCFCF
+};
+
+export const Card = styled.div<{ color: HighlightProps["color"] }>`
+  width: 225px;
+  background-color: ${({ color }) => backgroundColors[color]};
+  padding:  ${semanticSizes.global.padding.xl};
+  border-radius: 8px;
+  position: relative;
+  min-height: 120px;
+  box-sizing: border-box;
+`;
+
+export const IconWrapper = styled.div`
+  position: absolute;
+  top: ${semanticSizes.global.padding.xl};
+  right:  ${semanticSizes.global.padding.xl};
+  background-color: ${semanticColors.base.background};
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const CardContent = styled.div`
+  width: 100%;
+  margin-top: 60px;
+  text-align: left;
+
+  p {
+    font-size: ${typographyTokens.fontSizes.bodyXS};
+    font-weight: ${typographyTokens.fontWeights.medium};
+    margin: 0;
+    margin-bottom: ${semanticSizes.global.padding.sm};
+    color: ${semanticColors.base.background};
+  }
+
+  h3 {
+    font-size: ${typographyTokens.fontSizes.displayXL};
+    font-weight:  ${typographyTokens.fontWeights.bold};
+    margin: 0;
+    color: ${semanticColors.base.background};
+  }
+`;

package/src/components/molecules/HighlightsCard/HighlightsCard.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Card, CardWrapper, IconWrapper, CardContent } from "./HighlightsCard.styles";
+import { HighlightsCardProps } from "./HighlightsCard.types";
+import { Icon } from "@granto-umbrella/umbrella-components";
+
+const HighlightsCard: React.FC<HighlightsCardProps> = ({ items }) => {
+  return (
+    <CardWrapper>
+      {items.map((item, index) => (
+        <Card key={index} color={item.color}>
+          {item.icon && (
+            <IconWrapper>
+              <Icon name={item.icon} size="xs" />
+            </IconWrapper>
+          )}
+          <CardContent>
+            <p>{item.label}</p>
+            <h3>{item.value}</h3>
+          </CardContent>
+        </Card>
+      ))}
+    </CardWrapper>
+  );
+};
+
+export { HighlightsCard };

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

@@ -0,0 +1,10 @@
+export interface HighlightProps {
+  label: string;
+  value: number;
+  color: string; 
+  icon?: string;
+}
+
+export interface HighlightsCardProps {
+  items: HighlightProps[];
+}

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

@@ -0,0 +1 @@
+export { HighlightsCard } from "./HighlightsCard";

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

@@ -0,0 +1,174 @@
+/* eslint-disable react-refresh/only-export-components */
+import styled from "styled-components";
+import { StatusVariant } from "./InsuranceCard.types";
+import {
+  semanticColors,
+  primitiveColors,
+  semanticSizes,
+  semanticRadius,
+} from "../../../styles/tokens";
+
+// Movendo os Records para o topo antes dos componentes
+export const variantColors: Record<StatusVariant, string> = {
+  primary: semanticColors.info.border.feedback,
+  success: semanticColors.global.border.feedback.success,
+  warning: semanticColors.border.feedback,
+  danger: semanticColors.global.border.feedback.error,
+};
+
+export const variantColorsText: Record<StatusVariant, string> = {
+  primary: semanticColors.global.text.onSurface.enabled,
+  success: semanticColors.global.text.feedback.success,
+  warning: semanticColors.global.text.feedback.warning,
+  danger: semanticColors.global.text.feedback.error,
+};
+
+export const CardContainer = styled.div<{ $variant: StatusVariant }>`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  gap: ${semanticSizes.global.gap.sm};
+  padding: ${semanticSizes.global.padding.lg};
+  border-top: 4px solid ${(props) => variantColors[props.$variant]};
+  border-radius: ${semanticRadius.global.radius.md2};
+  background-color: ${semanticColors.global.surface.default};
+`;
+
+export const HeaderRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.xl};
+`;
+
+export const BodyRow = styled.div`
+  display: flex;
+  gap: ${semanticSizes.global.gap.xl};
+  justify-content: space-between;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: ${semanticSizes.global.gap.lg};
+  }
+`;
+
+export const Text = styled.span<{ $variant?: StatusVariant }>`
+  font-size: 10px;
+  color: ${(props) =>
+    props.$variant ? variantColors[props.$variant] : variantColorsText.primary};
+`;
+
+export const InfoRow = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  min-width: 0;
+`;
+
+export const InfoLabel = styled.span`
+  font-size: 12px;
+  color: ${primitiveColors.gray[600]};
+  margin-bottom: ${semanticSizes.global.gap.md};
+`;
+
+export const InfoValue = styled.span`
+  font-size: 14px;
+  font-weight: 900;
+  color: ${primitiveColors.gray[900]};
+`;
+
+export const TruncatedValue = styled(InfoValue)`
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export const ProdValue = styled(InfoValue)`
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export const ProcessValue = styled(InfoValue)`
+  display: inline-block;
+  max-width: 100%;
+`;
+
+export const InfoSubValue = styled.span`
+  font-size: 12px;
+  color: ${primitiveColors.gray[900]};
+  line-height: 1.4;
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export const DropdownWrapper = styled.div`
+  position: relative;
+`;
+
+export const ActionButton = styled.button`
+  display: inline-flex;
+  justify-content: space-between;
+  min-width: 170px;
+  max-width: 100%;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.sm};
+  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.md};
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  border-radius: ${semanticRadius.global.radius.md};
+  background-color: ${semanticColors.branding.border.enabled};
+  color: ${primitiveColors.base.white};
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+export const DropdownMenu = styled.div`
+  position: absolute;
+  right: 0;
+  background-color: ${semanticColors.global.surface.default};
+  border-radius: ${semanticRadius.global.radius.md};
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: grid;
+  gap: ${semanticSizes.global.gap.xs};
+  padding: ${semanticSizes.global.padding.sm} 0;
+  width: 100%;
+  z-index: 10;
+`;
+
+export const StyledMenuItem = styled.div<{ $danger?: boolean }>`
+  color: ${(props) =>
+    props.$danger
+      ? semanticColors.danger.text.enabled
+      : primitiveColors.gray[900]};
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${semanticSizes.global.gap.sm};
+  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.md};
+  font-size: 0.875rem;
+  cursor: pointer;
+  
+  &:hover {
+    background-color: ${primitiveColors.gray[100]};
+  }
+`;