CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Icon Card #35

Merged
an.di merged 4 commits from adilallo/component/IconCard into main 2026-02-03 01:57:25 +00:00
Conversation 0 Commits 4 Files Changed 17
+426 -32
an.di commented 2026-02-02 22:01:23 +00:00
Owner
Copy Link
Copy Source

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

Screenshot 2026-02-02 at 3.01.11 PM.png

How to Test

  1. 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
Screenshot 2026-02-02 at 3.01.11 PM.png
55 KiB
an.di self-assigned this 2026-02-02 22:01:23 +00:00
an.di added 2 commits 2026-02-02 22:01:23 +00:00
Implementation of icon card e227e0c658
Fix icon card component and tests to pass 4ab37afaf3
an.di added 1 commit 2026-02-02 22:51:58 +00:00
Update Create.stories.js 1ec9e9d639
an.di added 1 commit 2026-02-03 01:56:59 +00:00
Update and resolve storybook issues 9a42035b0c
an.di merged commit 000cbc02bc into main 2026-02-03 01:57:25 +00:00
an.di deleted branch adilallo/component/IconCard 2026-02-03 01:57:25 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
an.di (Andy DiLallo) ntnsndr (Nathan Schneider)
No Assignees an.di
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#35
Delete Branch "adilallo/component/IconCard"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?