test(CardHorizontal): 💍 visual regression

src/components/CardHorizontal/CardHorizontal.stories.tsx

@@ -8,6 +8,7 @@ import { CardHorizontal } from '@/components/CardHorizontal';
 const GridCenter = styled.div`
   display: grid;
   width: 60%;
+  max-width: 480px;
 `;
 
 const meta: Meta<typeof CardHorizontal> = {
@@ -20,12 +21,12 @@ const meta: Meta<typeof CardHorizontal> = {
     badgeState: {
       type: {
         name: 'enum',
-        // FIXME should refer to the Badge constants
         value: ['default', 'success', 'neutral', 'danger', 'disabled', 'warning', 'info'],
       },
     },
-    // FIXME should refer to a constant
     badgeIconDir: { type: { name: 'enum', value: ['start', 'end'] } },
+    color: { type: { name: 'enum', value: ['default', 'muted'] } },
+    size: { type: { name: 'enum', value: ['sm', 'md'] } },
   },
   decorators: Story => (
     <GridCenter>
@@ -36,7 +37,9 @@ const meta: Meta<typeof CardHorizontal> = {
 
 export default meta;
 
-export const Playground: StoryObj<typeof CardHorizontal> = {
+type Story = StoryObj<typeof CardHorizontal>;
+
+export const Playground: Story = {
   args: {
     icon: 'building',
     title: 'Card title',
@@ -50,5 +53,200 @@ export const Playground: StoryObj<typeof CardHorizontal> = {
     infoText: '',
     infoUrl: '',
     size: 'md',
+    color: 'default',
+  },
+};
+
+export const DefaultColor: Story = {
+  args: {
+    icon: 'building',
+    title: 'Default Color Card',
+    description: 'This is the default color variant.',
+    color: 'default',
+  },
+};
+
+export const MutedColor: Story = {
+  args: {
+    icon: 'building',
+    title: 'Muted Color Card',
+    description: 'This is the muted color variant.',
+    color: 'muted',
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    icon: 'building',
+    title: 'Small Card',
+    description: 'This is the small size variant.',
+    size: 'sm',
+  },
+};
+
+export const MediumSize: Story = {
+  args: {
+    icon: 'building',
+    title: 'Medium Card',
+    description: 'This is the medium size variant.',
+    size: 'md',
+  },
+};
+
+export const DefaultDisabled: Story = {
+  args: {
+    icon: 'building',
+    title: 'Disabled Default Card',
+    description: 'This card is disabled.',
+    disabled: true,
+    color: 'default',
+  },
+};
+
+export const MutedDisabled: Story = {
+  args: {
+    icon: 'building',
+    title: 'Disabled Muted Card',
+    description: 'This card is disabled.',
+    disabled: true,
+    color: 'muted',
+  },
+};
+
+export const DefaultSelected: Story = {
+  args: {
+    icon: 'building',
+    title: 'Selected Default Card',
+    description: 'This card is selected.',
+    isSelected: true,
+    color: 'default',
+  },
+};
+
+export const MutedSelected: Story = {
+  args: {
+    icon: 'building',
+    title: 'Selected Muted Card',
+    description: 'This card is selected.',
+    isSelected: true,
+    color: 'muted',
+  },
+};
+
+export const DefaultDisabledSelected: Story = {
+  args: {
+    icon: 'building',
+    title: 'Disabled & Selected Card',
+    description: 'This card is both disabled and selected.',
+    disabled: true,
+    isSelected: true,
+    color: 'default',
+  },
+};
+
+export const WithBadge: Story = {
+  args: {
+    icon: 'building',
+    title: 'Card with Badge',
+    description: 'This card has a badge.',
+    badgeText: 'New',
+    badgeState: 'success',
+  },
+};
+
+export const WithBadgeAndIcon: Story = {
+  args: {
+    icon: 'building',
+    title: 'Card with Badge and Icon',
+    description: 'This card has a badge with an icon.',
+    badgeText: 'Info',
+    badgeState: 'info',
+    badgeIcon: 'check',
+    badgeIconDir: 'start',
+  },
+};
+
+export const WithInfoButton: Story = {
+  args: {
+    icon: 'building',
+    title: 'Card with Info Button',
+    description: 'This card has an info button.',
+    infoText: 'Learn more',
+  },
+};
+
+export const WithInfoButtonMuted: Story = {
+  args: {
+    icon: 'building',
+    title: 'Muted Card with Info Button',
+    description: 'This is a muted card with an info button.',
+    infoText: 'Learn more',
+    color: 'muted',
+  },
+};
+
+export const WithInfoButtonDisabled: Story = {
+  args: {
+    icon: 'building',
+    title: 'Disabled Card with Info Button',
+    description: 'This is a disabled card with an info button.',
+    infoText: 'Learn more',
+    disabled: true,
+  },
+};
+
+export const NonSelectable: Story = {
+  args: {
+    icon: 'building',
+    title: 'Non-Selectable Card',
+    description: 'This card is not selectable (has infoText).',
+    infoText: 'Click me',
+  },
+};
+
+export const WithoutIcon: Story = {
+  args: {
+    title: 'Card Without Icon',
+    description: 'This card does not have an icon.',
+  },
+};
+
+export const TitleOnly: Story = {
+  args: {
+    icon: 'building',
+    title: 'Title Only Card',
+  },
+};
+
+export const DescriptionOnly: Story = {
+  args: {
+    icon: 'building',
+    description: 'This card only has a description, no title.',
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    icon: 'building',
+    title: 'Card with Children',
+    description: 'This card has children content.',
+    children: 'Additional child content goes here.',
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    icon: 'check',
+    title: 'Interactive Card',
+    description: 'Click this card to test interactions.',
+  },
+};
+
+export const InteractiveWithHandler: Story = {
+  args: {
+    icon: 'check',
+    title: 'Interactive Card with Handler',
+    description: 'This card has an onButtonClick handler for E2E testing.',
+    onButtonClick: () => console.log('Card clicked!'),
   },
 };

src/components/CardHorizontal/CardHorizontal.test.tsx

@@ -1,4 +1,4 @@
-import { screen } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
 import { CardHorizontal, CardHorizontalProps } from '@/components/CardHorizontal';
 import { renderCUI } from '@/utils/test-utils';
 
@@ -187,4 +187,108 @@ describe('CardHorizontal Component', () => {
     expect(windowOpenSpy).not.toHaveBeenCalled();
     windowOpenSpy.mockRestore();
   });
+
+  it('should have aria-pressed="true" when selected and selectable', () => {
+    const { container } = renderCard({
+      title: 'Test Card',
+      isSelected: true,
+      isSelectable: true,
+    });
+
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('should have aria-pressed="false" when not selected but selectable', () => {
+    const { container } = renderCard({
+      title: 'Test Card',
+      isSelected: false,
+      isSelectable: true,
+    });
+
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('should have aria-pressed="false" when selectable but isSelected is not provided', () => {
+    const { container } = renderCard({
+      title: 'Test Card',
+      isSelectable: true,
+    });
+
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('should not have aria-pressed when not selectable', () => {
+    const { container } = renderCard({
+      title: 'Test Card',
+      infoText: 'Click me',
+      isSelectable: false,
+    });
+
+    const wrapper = container.firstChild;
+    expect(wrapper).not.toHaveAttribute('aria-pressed');
+  });
+
+  it('should have role=button when selectable', () => {
+    const { container } = renderCard({
+      title: 'Test Card',
+      isSelectable: true,
+    });
+
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveAttribute('role', 'button');
+  });
+
+  it('should not have role when not selectable', () => {
+    const { container } = renderCard({
+      title: 'Test Card',
+      infoText: 'Click me',
+      isSelectable: false,
+    });
+
+    const wrapper = container.firstChild;
+    expect(wrapper).not.toHaveAttribute('role');
+  });
+
+  it('should call onClick on Space key when selectable', () => {
+    const onClickMock = vitest.fn();
+    const { container } = renderCard({
+      title: 'Test Card',
+      isSelectable: true,
+      onButtonClick: onClickMock,
+    });
+
+    const wrapper = container.firstChild as HTMLElement;
+    fireEvent.keyDown(wrapper, { key: ' ' });
+
+    expect(onClickMock).toHaveBeenCalled();
+  });
+
+  it('should not call onClick on Space key when disabled', () => {
+    const onClickMock = vitest.fn();
+    const { container } = renderCard({
+      title: 'Test Card',
+      disabled: true,
+      isSelectable: true,
+      onButtonClick: onClickMock,
+    });
+
+    const wrapper = container.firstChild as HTMLElement;
+    fireEvent.keyDown(wrapper, { key: ' ' });
+
+    expect(onClickMock).not.toHaveBeenCalled();
+  });
+
+  it('should not have onKeyDown when not selectable', () => {
+    const { container } = renderCard({
+      title: 'Test Card',
+      infoText: 'Click me',
+      isSelectable: false,
+    });
+
+    const wrapper = container.firstChild;
+    expect(wrapper).not.toHaveAttribute('onkeydown');
+  });
 });

src/components/CardHorizontal/CardHorizontal.tsx

@@ -1,3 +1,4 @@
+import { type KeyboardEvent, type MouseEvent } from 'react';
 import { styled } from 'styled-components';
 import { Badge } from '@/components/Badge';
 import { Button } from '@/components/Button';
@@ -195,7 +196,7 @@ export const CardHorizontal = ({
   onButtonClick,
   ...props
 }: CardHorizontalProps) => {
-  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+  const handleClick = (e: MouseEvent<HTMLElement>) => {
     if (disabled) {
       e.preventDefault();
       return;
@@ -208,6 +209,14 @@ export const CardHorizontal = ({
       window.open(infoUrl, '_blank');
     }
   };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {
+    if (isSelectable && !disabled && e.key === ' ') {
+      e.preventDefault();
+      handleClick(e as unknown as MouseEvent<HTMLElement>);
+    }
+  };
+
   return (
     <Wrapper
       $disabled={disabled}
@@ -216,8 +225,12 @@ export const CardHorizontal = ({
       $color={color}
       $size={size}
       tabIndex={disabled ? -1 : 0}
+      role={isSelectable ? 'button' : undefined}
       aria-disabled={disabled}
+      aria-pressed={isSelectable ? (isSelected ?? false) : undefined}
       onClick={handleClick}
+      onKeyDown={isSelectable ? handleKeyDown : undefined}
+      data-testid="card-horizontal"
       {...props}
     >
       <ContentWrapper $size={size}>