@boostdev/design-system-components 1.2.6 → 1.2.7

package/src/components/layout/Card/Card.spec.tsx

@@ -30,4 +30,34 @@ describe('Card', () => {
     const { container } = render(<Card className="custom">Content</Card>);
     expect(container.firstChild).toHaveClass('custom');
   });
+
+  it('renders as a custom element via the as prop', () => {
+    const { container } = render(<Card as="section">Section card</Card>);
+    expect(container.firstChild?.nodeName).toBe('SECTION');
+  });
+
+  it('renders as an anchor when as="a"', () => {
+    render(<Card as="a" href="/details">Link card</Card>);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/details');
+  });
+
+  it('renders as a custom component via the as prop', () => {
+    const CustomWrapper = ({ children, ...props }: { children: React.ReactNode; className?: string }) => (
+      <article {...props} data-testid="custom">{children}</article>
+    );
+    render(<Card as={CustomWrapper}>Custom</Card>);
+    expect(screen.getByTestId('custom')).toBeInTheDocument();
+    expect(screen.getByTestId('custom').nodeName).toBe('ARTICLE');
+  });
+
+  it('prefers as prop over onClick button fallback', () => {
+    const { container } = render(<Card as="div" onClick={() => {}}>Content</Card>);
+    expect(container.firstChild?.nodeName).toBe('DIV');
+  });
+
+  it('renders the extra-large padding variant', () => {
+    const { container } = render(<Card padding="extra-large">Content</Card>);
+    expect(container.firstChild).toHaveClass('--padding-extra-large');
+  });
 });

package/src/components/layout/Card/Card.stories.tsx

@@ -6,7 +6,7 @@ const meta = {
   component: Card,
   argTypes: {
     variant: { control: 'select', options: ['default', 'elevated', 'outlined'] },
-    padding: { control: 'select', options: ['none', 'small', 'medium', 'large'] },
+    padding: { control: 'select', options: ['none', 'small', 'medium', 'large', 'extra-large'] },
     textAlign: { control: 'select', options: ['start', 'center', 'end'] },
   },
 } satisfies Meta<typeof Card>;
@@ -18,6 +18,8 @@ export const Default: Story = { args: { children: 'Card content', variant: 'defa
 export const Elevated: Story = { args: { children: 'Elevated card', variant: 'elevated' } };
 export const Outlined: Story = { args: { children: 'Outlined card', variant: 'outlined' } };
 export const Clickable: Story = { args: { children: 'Click me', onClick: () => alert('clicked') } };
+export const AsLink: Story = { args: { children: 'Card as link', as: 'a', href: '#' } as Record<string, unknown> };
+export const AsSection: Story = { args: { children: 'Card as section', as: 'section' } as Record<string, unknown> };
 export const Centered: Story = { args: { children: 'Centered', textAlign: 'center' } };
 export const AllVariants: Story = {
   args: { children: '' },

package/src/components/layout/Card/Card.tsx

@@ -1,23 +1,27 @@
-import { HTMLAttributes } from 'react';
+import { ElementType, ComponentPropsWithoutRef } from 'react';
 import css from './Card.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface CardProps extends WithClassName, HTMLAttributes<HTMLElement> {
+type CardOwnProps = WithClassName & {
   variant?: 'default' | 'elevated' | 'outlined';
-  padding?: 'none' | 'small' | 'medium' | 'large';
+  padding?: 'none' | 'small' | 'medium' | 'large' | 'extra-large';
   textAlign?: 'start' | 'center' | 'end';
-}
+  as?: ElementType;
+};
+
+type CardProps<C extends ElementType = 'div'> = CardOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps>;
 
-export function Card({
+export function Card<C extends ElementType = 'div'>({
   children,
   className,
   variant = 'default',
   padding = 'medium',
   textAlign = 'start',
+  as,
   onClick,
   ...rest
-}: CardProps) {
+}: CardProps<C>) {
   const classNames = cn(
     css.card,
     css[`--${variant}`],
@@ -27,14 +31,14 @@ export function Card({
     className,
   );
 
-  const Component = onClick ? 'button' : 'div';
+  const Component = as ?? (onClick ? 'button' : 'div');
 
   return (
     <Component
       {...rest}
       className={classNames}
       onClick={onClick}
-      {...(onClick && { type: 'button' as const })}
+      {...(!as && onClick && { type: 'button' as const })}
     >
       {children}
     </Component>