@liguelead/design-system 0.0.21 → 0.0.22

package/components/Dialog/Dialog.style.ts

@@ -1,6 +1,6 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import styled from 'styled-components';
-import { spacing, shadow } from '@liguelead/foundation';
+import { spacing, shadow, fontSize } from '@liguelead/foundation';
 import { parseColor } from '../../utils';
 
 export const Overlay = styled(DialogPrimitive.Overlay)`
@@ -22,9 +22,9 @@ export const Content = styled(DialogPrimitive.Content)<{$centerContent?: boolean
   min-width: 425px;
   max-width: 90vw;
   position: fixed;
-  top: 50%;
+  top: 8vh;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
 `
 export const CloseDialogIconButton = styled.button`
   position: absolute;
@@ -60,3 +60,16 @@ export const ButtonContainer = styled.div<{$centerContent?: boolean}>`
   gap: ${spacing.spacing12}px;
   margin-top: ${spacing.spacing24}px;
 `;
+
+export const DialogDescription = styled(DialogPrimitive.Description)`
+  color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+  font-size: ${fontSize.fontSize14}px;
+  font-weight: 400;
+  white-space: pre-line;
+`
+
+export const DialogTitle = styled(DialogPrimitive.Title)`
+  color: ${({ theme }) => parseColor(theme.colors.textDark)};
+  font-size: ${fontSize.fontSize18}px;
+  font-weight: 500;
+`

package/components/Dialog/Dialog.tsx

@@ -6,42 +6,49 @@ import {
   ChildrenContainer,
   CloseDialogIconButton,
   Content,
+  DialogDescription,
+  DialogTitle,
   Overlay
 } from "./Dialog.style"
 import { TDialogProps } from "./Dialog.types"
 
 import Button from "../Button"
-import Text from "../Text"
 
 export const Dialog: React.FC<TDialogProps> = ({
   open,
   onOpenChange,
   title,
   description,
+  confirmButton = true,
+  cancelButton = true,
   trigger,
   children,
   onConfirm,
   variant = 'default',
+  confirmButtonColor = 'primary',
   className,
   confirmLabel = 'Confirmar',
   cancelLabel = 'Cancelar',
   centerContent = false,
+  ...rest
 }: TDialogProps) => {
   return (
     <DialogPrimitive.Root
-      open={open} 
+      open={open}
       onOpenChange={onOpenChange}
     >
       {trigger
-        && <DialogPrimitive.Trigger asChild className={className}>
+        && <DialogPrimitive.Trigger asChild className={className} >
             {trigger}
           </DialogPrimitive.Trigger>
       }
 
-      <DialogPrimitive.Portal>
+      <DialogPrimitive.Portal
+      >
         <Overlay />
 
         <Content
+          {...rest}
           className={className}
           $centerContent={centerContent}
           onInteractOutside={(event) => {
@@ -52,50 +59,40 @@ export const Dialog: React.FC<TDialogProps> = ({
           }}
         >
           {title && (
-            <DialogPrimitive.Title>
-              <Text
-                isTitle
-                tag='h1'
-                size="heading01"
-                weight="fontWeight500"
-                color='textDark'
-              >
+            <DialogTitle>
                 {title}
-              </Text>
-            </DialogPrimitive.Title>
+            </DialogTitle>
           )}
 
           {description && (
-            <DialogPrimitive.Description>
-              <Text
-                tag='p'
-                size="body02"
-                weight="fontWeight400"
-                color='textMedium'
-              >
+            <DialogDescription>
                 {description}
-              </Text>
-            </DialogPrimitive.Description>
+            </DialogDescription>
           )}
 
           <ChildrenContainer>
               {children}
-            </ChildrenContainer>
+          </ChildrenContainer>
 
           <ButtonContainer $centerContent={centerContent}>
             <DialogPrimitive.Close asChild>
-              <Button
+              {cancelButton && (
+                <Button
                 variant="outline"
-              >
-                {cancelLabel}
-              </Button>
+                >
+                  {cancelLabel}
+                </Button>
+              )}
             </DialogPrimitive.Close>
 
-            <Button
-              onClick={onConfirm}
+            {confirmButton && (
+              <Button
+                onClick={onConfirm}
+                color={confirmButtonColor}
               >
-              {confirmLabel}
-            </Button>
+                {confirmLabel}
+              </Button>
+            )}
           </ButtonContainer>
           {variant === 'danger' ? null : (
             <DialogPrimitive.Close asChild>

package/components/Dialog/Dialog.types.ts

@@ -1,17 +1,22 @@
-import { ReactNode } from "react"
+import { colorType } from "package/types"
+import { ReactNode, HTMLAttributes } from "react"
+
 
 export type TDialogProps = {
   open?: boolean
   onOpenChange?: (open: boolean) => void
   title: string
+  confirmButton?: boolean
+  cancelButton?: boolean
   description?: string
   className?: string
   trigger?: ReactNode
-  children: ReactNode
+  children?: ReactNode
   onConfirm?: () => void
+  confirmButtonColor?: colorType
   confirmLabel?: string
   cancelLabel?: string
   disableClose?: boolean
   centerContent?: boolean
   variant?: 'default' | 'danger'
-}
+} & Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'className'>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@liguelead/design-system",
-    "version": "0.0.21",
+    "version": "0.0.22",
     "type": "module",
     "main": "components/index.ts",
     "publishConfig": {