This PR implements the IconCard component (CR-47) following the Figma design specifications. The IconCard is an interactive card component that displays an icon, title, and description, designed for showcasing different community rule categories (e.g., Worker's cooperatives). The component follows the container/presentation pattern, includes full accessibility support, keyboard navigation, and comprehensive test coverage.
Changes
New Component: IconCard
Created app/components/IconCard/ with container/presentation pattern
Fixed dimensions: 288px width × 350px height
Transparent background with border styling
Typography: Title uses Typography/Family 1, weight 400, Sizing/800 (32px)
Spacing: Padding measures/spacing/500 (20px), space-between layout for icon, title, and description
Interactive states: Hover scale effect, focus ring for keyboard navigation
Accessibility: ARIA labels, keyboard support (Enter/Space), focus management
Files Created:
app/components/IconCard/IconCard.container.tsx - Container logic with keyboard handlers
app/components/IconCard/IconCard.view.tsx - Presentational component with styling
tests/components/IconCard.test.tsx - 10 unit tests covering rendering, accessibility, keyboard navigation, and props
stories/IconCard.stories.js - Storybook stories with multiple variants
Files Modified:
app/components-preview/page.tsx - Added IconCard demo section with example using Vector_WorkerCoop.svg asset
Design Tokens Used:
--color-border-default-primary - Border color
--color-content-default-primary - Text color (white)
--color-content-default-brand-primary - Focus ring color
--measures-spacing-020 - Padding (20px)
Assets:
Uses @public/assets/Vector_WorkerCoop.svg as example icon (swappable via icon prop)
Screenshots
How to Test
View in Storybook:
npm run storybook
# Implement IconCard Component (CR-47)
## Overview
This PR implements the IconCard component (CR-47) following the Figma design specifications. The IconCard is an interactive card component that displays an icon, title, and description, designed for showcasing different community rule categories (e.g., Worker's cooperatives). The component follows the container/presentation pattern, includes full accessibility support, keyboard navigation, and comprehensive test coverage.
## Changes
- **New Component: IconCard**
- Created `app/components/IconCard/` with container/presentation pattern
- Fixed dimensions: 288px width × 350px height
- Transparent background with border styling
- Typography: Title uses `Typography/Family 1`, weight 400, `Sizing/800` (32px)
- Spacing: Padding `measures/spacing/500` (20px), `space-between` layout for icon, title, and description
- Interactive states: Hover scale effect, focus ring for keyboard navigation
- Accessibility: ARIA labels, keyboard support (Enter/Space), focus management
- **Files Created:**
- `app/components/IconCard/IconCard.container.tsx` - Container logic with keyboard handlers
- `app/components/IconCard/IconCard.view.tsx` - Presentational component with styling
- `app/components/IconCard/IconCard.types.ts` - TypeScript interfaces
- `app/components/IconCard/index.tsx` - Component export
- `tests/components/IconCard.test.tsx` - 10 unit tests covering rendering, accessibility, keyboard navigation, and props
- `stories/IconCard.stories.js` - Storybook stories with multiple variants
- **Files Modified:**
- `app/components-preview/page.tsx` - Added IconCard demo section with example using `Vector_WorkerCoop.svg` asset
- **Design Tokens Used:**
- `--color-border-default-primary` - Border color
- `--color-content-default-primary` - Text color (white)
- `--color-content-default-brand-primary` - Focus ring color
- `--measures-spacing-020` - Padding (20px)
- **Assets:**
- Uses `@public/assets/Vector_WorkerCoop.svg` as example icon (swappable via `icon` prop)
## Screenshots
<img width="302" alt="Screenshot 2026-02-02 at 3.01.11 PM.png" src="attachments/a454b155-6621-47c6-9283-e41cba5b3b28">
## How to Test
1. **View in Storybook:**
npm run storybook
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Implement IconCard Component (CR-47)
Overview
This PR implements the IconCard component (CR-47) following the Figma design specifications. The IconCard is an interactive card component that displays an icon, title, and description, designed for showcasing different community rule categories (e.g., Worker's cooperatives). The component follows the container/presentation pattern, includes full accessibility support, keyboard navigation, and comprehensive test coverage.
Changes
New Component: IconCard
app/components/IconCard/with container/presentation patternTypography/Family 1, weight 400,Sizing/800(32px)measures/spacing/500(20px),space-betweenlayout for icon, title, and descriptionFiles Created:
app/components/IconCard/IconCard.container.tsx- Container logic with keyboard handlersapp/components/IconCard/IconCard.view.tsx- Presentational component with stylingapp/components/IconCard/IconCard.types.ts- TypeScript interfacesapp/components/IconCard/index.tsx- Component exporttests/components/IconCard.test.tsx- 10 unit tests covering rendering, accessibility, keyboard navigation, and propsstories/IconCard.stories.js- Storybook stories with multiple variantsFiles Modified:
app/components-preview/page.tsx- Added IconCard demo section with example usingVector_WorkerCoop.svgassetDesign Tokens Used:
--color-border-default-primary- Border color--color-content-default-primary- Text color (white)--color-content-default-brand-primary- Focus ring color--measures-spacing-020- Padding (20px)Assets:
@public/assets/Vector_WorkerCoop.svgas example icon (swappable viaiconprop)Screenshots
How to Test
npm run storybook