DemocracyLab / DemocracyLab/CivicTechExchange

VAR-Profile-Link-Card

Open
#1,132 3 comments 0 reactions 0 assignees View on GitHub
Front End
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

![Image](https://github.com/user-attachments/assets/4e611e7e-cd75-43a7-8cbc-410846d4d016)

```
{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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.