@yuno-payments/dashboard-design-system 0.0.1

package/src/components/molecules/announcement/announcement.test.tsx

@@ -0,0 +1,354 @@
+import { describe, it, expect, vi } from 'vitest'
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
+import { act } from 'react-dom/test-utils'
+import { Announcement } from './index'
+
+function render(ui: React.ReactElement) {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+  act(() => {
+    root.render(ui)
+  })
+  return { container, root }
+}
+
+function getByText(container: HTMLElement, text: string) {
+  const el = Array.from(container.querySelectorAll('*')).find((n) => n.textContent?.includes(text))
+  if (!el) throw new Error(`Element with text "${text}" not found`)
+  return el as HTMLElement
+}
+
+function getByTestId(container: HTMLElement, testId: string) {
+  const el = container.querySelector(`[data-testid="${testId}"]`)
+  if (!el) throw new Error(`Element with data-testid="${testId}" not found`)
+  return el as HTMLElement
+}
+
+describe('Announcement', () => {
+  it('renders with default props', () => {
+    const { container } = render(
+      <Announcement title="Test title" description="Test description" />
+    )
+    
+    expect(getByText(container, 'Test title')).toBeTruthy()
+    expect(getByText(container, 'Test description')).toBeTruthy()
+  })
+
+  it('renders title when provided', () => {
+    const { container } = render(
+      <Announcement title="Test Title" />
+    )
+    
+    const title = getByTestId(container, 'title')
+    expect(title.textContent).toBe('Test Title')
+  })
+
+  it('renders description when provided', () => {
+    const { container } = render(
+      <Announcement description="Test Description" />
+    )
+    
+    const description = getByTestId(container, 'description')
+    expect(description.textContent).toBe('Test Description')
+  })
+
+  it('does not render when visible is false', () => {
+    const { container } = render(
+      <Announcement title="Test" visible={false} />
+    )
+    
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders with neutral variant by default', () => {
+    const { container } = render(
+      <Announcement title="Test" />
+    )
+    
+    const announcement = container.firstChild as HTMLElement
+    expect(announcement.className).toMatch(/bg-background/)
+  })
+
+  it('renders with attentive variant', () => {
+    const { container } = render(
+      <Announcement title="Test" variant="attentive" />
+    )
+    
+    const announcement = container.firstChild as HTMLElement
+    expect(announcement.className).toMatch(/bg-amber-50/)
+  })
+
+  it('renders with informative variant', () => {
+    const { container } = render(
+      <Announcement title="Test" variant="informative" />
+    )
+    
+    const announcement = container.firstChild as HTMLElement
+    expect(announcement.className).toMatch(/bg-blue-50/)
+  })
+
+  it('renders with negative variant', () => {
+    const { container } = render(
+      <Announcement title="Test" variant="negative" />
+    )
+    
+    const announcement = container.firstChild as HTMLElement
+    expect(announcement.className).toMatch(/bg-destructive/)
+  })
+
+  it('renders with positive variant', () => {
+    const { container } = render(
+      <Announcement title="Test" variant="positive" />
+    )
+    
+    const announcement = container.firstChild as HTMLElement
+    expect(announcement.className).toMatch(/bg-green-50/)
+  })
+
+  it('renders with large size by default', () => {
+    const { container } = render(
+      <Announcement title="Test" />
+    )
+    
+    const announcement = container.firstChild as HTMLElement
+    expect(announcement.className).toMatch(/w-full max-w-full/)
+  })
+
+  it('renders with small size', () => {
+    const { container } = render(
+      <Announcement title="Test" size="small" />
+    )
+    
+    const announcement = container.firstChild as HTMLElement
+    expect(announcement.className).toMatch(/max-w-\[343px\]/)
+  })
+
+  it('renders icon by default', () => {
+    const { container } = render(
+      <Announcement title="Test" />
+    )
+    
+    const icon = container.querySelector('svg')
+    expect(icon).toBeTruthy()
+  })
+
+  it('does not render icon when withIcon is false', () => {
+    const { container } = render(
+      <Announcement title="Test" withIcon={false} />
+    )
+    
+    const icon = container.querySelector('svg')
+    expect(icon).toBeFalsy()
+  })
+
+  it('renders custom icon when provided', () => {
+    const customIcon = <span data-testid="custom-icon">Custom</span>
+    const { container } = render(
+      <Announcement title="Test" iconName={customIcon} />
+    )
+    
+    expect(getByTestId(container, 'custom-icon')).toBeTruthy()
+  })
+
+  it('renders link when linkText and link are provided', () => {
+    const { container } = render(
+      <Announcement 
+        title="Test" 
+        linkText="Click here" 
+        link="https://example.com" 
+      />
+    )
+    
+    const link = getByTestId(container, 'linkButton')
+    expect(link.textContent).toBe('Click here')
+  })
+
+  it('renders link when linkText and onClickLink are provided', () => {
+    const handleClick = vi.fn()
+    const { container } = render(
+      <Announcement 
+        title="Test" 
+        linkText="Click here" 
+        onClickLink={handleClick} 
+      />
+    )
+    
+    const link = getByTestId(container, 'linkButton')
+    expect(link.textContent).toBe('Click here')
+  })
+
+  it('does not render link when only linkText is provided', () => {
+    const { container } = render(
+      <Announcement title="Test" linkText="Click here" />
+    )
+    
+    expect(() => getByTestId(container, 'linkButton')).toThrow()
+  })
+
+  it('renders remove button when isRemovable is true', () => {
+    const { container } = render(
+      <Announcement title="Test" isRemovable />
+    )
+    
+    const removeButton = getByTestId(container, 'removeAnnouncement')
+    expect(removeButton).toBeTruthy()
+  })
+
+  it('does not render remove button when isRemovable is false', () => {
+    const { container } = render(
+      <Announcement title="Test" isRemovable={false} />
+    )
+    
+    expect(() => getByTestId(container, 'removeAnnouncement')).toThrow()
+  })
+
+  it('calls onClose when remove button is clicked', () => {
+    const handleClose = vi.fn()
+    const { container } = render(
+      <Announcement title="Test" isRemovable onClose={handleClose} />
+    )
+    
+    const removeButton = getByTestId(container, 'removeAnnouncement')
+    act(() => {
+      removeButton.click()
+    })
+    
+    expect(handleClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('hides announcement when remove button is clicked', () => {
+    const { container } = render(
+      <Announcement title="Test" isRemovable />
+    )
+    
+    const removeButton = getByTestId(container, 'removeAnnouncement')
+    act(() => {
+      removeButton.click()
+    })
+    
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('forwards ref correctly', () => {
+    const ref = { current: null }
+    render(
+      <Announcement ref={ref} title="Test" />
+    )
+    
+    expect(ref.current).toBeTruthy()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <Announcement title="Test" className="custom-class" />
+    )
+    
+    const announcement = container.firstChild as HTMLElement
+    expect(announcement.className).toMatch(/custom-class/)
+  })
+
+  it('passes through HTML attributes', () => {
+    const { container } = render(
+      <Announcement title="Test" data-custom="value" />
+    )
+    
+    const announcement = container.firstChild as HTMLElement
+    expect(announcement.getAttribute('data-custom')).toBe('value')
+  })
+
+  it('updates visibility when visible prop changes', () => {
+    const { container, root } = render(
+      <Announcement title="Test" visible={true} />
+    )
+    
+    expect(container.firstChild).toBeTruthy()
+    
+    act(() => {
+      root.render(<Announcement title="Test" visible={false} />)
+    })
+    
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders correct icon for attentive variant', () => {
+    const { container } = render(
+      <Announcement title="Test" variant="attentive" />
+    )
+    
+    const icon = container.querySelector('svg')
+    expect(icon).toBeTruthy()
+  })
+
+  it('renders correct icon for informative variant', () => {
+    const { container } = render(
+      <Announcement title="Test" variant="informative" />
+    )
+    
+    const icon = container.querySelector('svg')
+    expect(icon).toBeTruthy()
+  })
+
+  it('renders correct icon for negative variant', () => {
+    const { container } = render(
+      <Announcement title="Test" variant="negative" />
+    )
+    
+    const icon = container.querySelector('svg')
+    expect(icon).toBeTruthy()
+  })
+
+  it('renders correct icon for positive variant', () => {
+    const { container } = render(
+      <Announcement title="Test" variant="positive" />
+    )
+    
+    const icon = container.querySelector('svg')
+    expect(icon).toBeTruthy()
+  })
+
+  it('handles all variant and size combinations', () => {
+    const variants = ['neutral', 'attentive', 'informative', 'negative', 'positive'] as const
+    const sizes = ['large', 'small'] as const
+    
+    variants.forEach(variant => {
+      sizes.forEach(size => {
+        const { container } = render(
+          <Announcement title="Test" variant={variant} size={size} />
+        )
+        
+        expect(container.firstChild).toBeTruthy()
+      })
+    })
+  })
+
+  it('renders without title or description', () => {
+    const { container } = render(
+      <Announcement />
+    )
+    
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  it('handles complex content structure', () => {
+    const { container } = render(
+      <Announcement 
+        title="Complex Title"
+        description="Complex Description"
+        linkText="Complex Link"
+        link="https://example.com"
+        withIcon
+        isRemovable
+        variant="informative"
+        size="large"
+      />
+    )
+    
+    expect(getByText(container, 'Complex Title')).toBeTruthy()
+    expect(getByText(container, 'Complex Description')).toBeTruthy()
+    expect(getByText(container, 'Complex Link')).toBeTruthy()
+    expect(container.querySelector('svg')).toBeTruthy()
+    expect(getByTestId(container, 'removeAnnouncement')).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,200 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { AlertTriangle, Info, X } from "lucide-react"
+import { cn } from "../../../lib/utils"
+import { Link } from "../../atoms/link"
+
+const announcementVariants = cva(
+  "flex gap-4 rounded-lg border p-4 transition-all",
+  {
+    variants: {
+      variant: {
+        neutral: "bg-background border-border text-foreground",
+        attentive: "bg-amber-50 border-amber-200 text-amber-900 dark:bg-amber-950 dark:border-amber-800 dark:text-amber-100",
+        informative: "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-100",
+        negative: "bg-destructive/10 border-destructive/20 text-destructive-foreground",
+        positive: "bg-green-50 border-green-200 text-green-900 dark:bg-green-950 dark:border-green-800 dark:text-green-100",
+      },
+      size: {
+        large: "w-full max-w-full",
+        small: "w-full max-w-[343px]",
+      },
+    },
+    defaultVariants: {
+      variant: "neutral",
+      size: "large",
+    },
+  }
+)
+
+const announcementContentVariants = cva(
+  "flex flex-1 gap-4",
+  {
+    variants: {
+      size: {
+        large: "md:flex-row md:items-center flex-col items-start",
+        small: "flex-col items-start",
+      },
+    },
+    defaultVariants: {
+      size: "large",
+    },
+  }
+)
+
+const announcementIconVariants = cva(
+  "shrink-0",
+  {
+    variants: {
+      variant: {
+        neutral: "text-muted-foreground",
+        attentive: "text-amber-600 dark:text-amber-400",
+        informative: "text-blue-600 dark:text-blue-400",
+        negative: "text-destructive",
+        positive: "text-green-600 dark:text-green-400",
+      },
+    },
+    defaultVariants: {
+      variant: "neutral",
+    },
+  }
+)
+
+export interface AnnouncementProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof announcementVariants> {
+  title?: string
+  description?: string
+  linkText?: string
+  link?: string
+  withIcon?: boolean
+  iconName?: React.ReactNode
+  isRemovable?: boolean
+  visible?: boolean
+  onClose?: () => void
+  onClickLink?: React.MouseEventHandler<HTMLAnchorElement>
+}
+
+const Announcement = React.forwardRef<HTMLDivElement, AnnouncementProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      title,
+      description,
+      linkText,
+      link,
+      withIcon = true,
+      iconName,
+      isRemovable = false,
+      visible = true,
+      onClose,
+      onClickLink,
+      ...props
+    },
+    ref
+  ) => {
+    const [isVisible, setIsVisible] = React.useState(visible)
+
+    const handleClose = React.useCallback(() => {
+      onClose?.()
+      setIsVisible(false)
+    }, [onClose])
+
+    const getDefaultIcon = () => {
+      switch (variant) {
+        case "attentive":
+        case "negative":
+          return <AlertTriangle className="size-6" />
+        case "informative":
+        case "positive":
+          return <Info className="size-6" />
+        default:
+          return <AlertTriangle className="size-6" />
+      }
+    }
+
+    React.useEffect(() => {
+      setIsVisible(visible)
+    }, [visible])
+
+    if (!isVisible) return null
+
+    return (
+      <div
+        ref={ref}
+        className={cn(announcementVariants({ variant, size, className }))}
+        {...props}
+      >
+        {withIcon && (
+          <div className={cn(announcementIconVariants({ variant }))}>
+            {iconName || getDefaultIcon()}
+          </div>
+        )}
+        
+        <div className={cn(announcementContentVariants({ size }))}>
+          <div className="flex-1 space-y-1">
+            {title && (
+              <div 
+                className="text-[var(--font-size-small)] font-medium leading-[var(--line-height-small)]"
+                data-testid="title"
+              >
+                {title}
+              </div>
+            )}
+            {description && (
+              <div 
+                className="text-[var(--font-size-tiny)] leading-[var(--line-height-tiny)]"
+                data-testid="description"
+              >
+                {description}
+              </div>
+            )}
+          </div>
+          
+          <div className="flex items-center gap-4">
+            {linkText && (link || onClickLink) && (
+              <Link
+                href={link}
+                onClick={onClickLink}
+                target={link ? "_blank" : undefined}
+                inline
+                size="small"
+                data-testid="linkButton"
+              >
+                {linkText}
+              </Link>
+            )}
+            
+            {isRemovable && (size === "large" || size === undefined) && (
+              <button
+                onClick={handleClose}
+                className="inline-flex items-center justify-center size-6 rounded-sm opacity-70 hover:opacity-100 transition-opacity"
+                aria-label="Close announcement"
+                data-testid="removeAnnouncement"
+              >
+                <X className="size-4" />
+              </button>
+            )}
+          </div>
+        </div>
+        
+        {isRemovable && size === "small" && (
+          <button
+            onClick={handleClose}
+            className="inline-flex items-center justify-center size-6 rounded-sm opacity-70 hover:opacity-100 transition-opacity"
+            aria-label="Close announcement"
+            data-testid="removeAnnouncement"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+    )
+  }
+)
+
+Announcement.displayName = "Announcement"
+
+export { Announcement }