DemocracyLab / DemocracyLab/CivicTechExchange
VAR-Profile-Link-Card
- Dominant language
- JavaScript
- Stars
- 105
- Forks
- 71
- PR merge metrics
- No merged PRs in 30d
Description
### Volunteer Activity Reporting Profile Link Card
**Definition:**
In the VolunteerActivityReportingLogWeek component, document links submitted through VARQ3 (as part of the weekly activity form) should be displayed using the existing IconLinkDisplay component.
This leverages Civic Tech Exchange's standardized UI for labeled, categorized links with appropriate icons.
Each card shows:
- The document name (as a clickable link)
- The category (e.g., Design Files, Project Management)
- An icon inferred from the URL (e.g., Figma, Github)
**Figma:** [VAR Profile Link Card](https://www.figma.com/design/WADcmVjJh5ARVoZ09xlpfdFN/DemocracyLab?node-id=39340-82378&t=xN7sRcVmsUugDaKa-4)
**Location:**
- common/components/chrome/IconLinkDisplay.jsx

```
{projectLinks.map(link => (
))}
```
**Props:**
- link - LinkInfo |-An object containing linkUrl (string) and linkName (string).
**Storybook Test Cases**
- **Basic Render:** Shows the card with title, category, and matching icon.
- **External Link Behavior:** Clicking the title opens the link in a new tab.
- **Icon Based on URL:** Display correct icon for known domains (e.g., figma.com → Figma icon).
- **Text Overflow Handling:** Handle text overflow or wrapping.
Contributor guide
Research direction
Start by reading common/components/chrome/IconLinkDisplay.jsx and locating the VolunteerActivityReportingLogWeek component that renders VARQ3 document links. Use the listed Storybook test cases to check the title, category, URL-derived icon, new-tab behavior, and text wrapping. Done means submitted links use the existing card with the specified information and behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100