Gizra - Home Assignment FE Tickets for the Publications component

Publications-FE-1

FE-1: Build Publication List Item Component

**Type:** Frontend  
**Priority:** High

**Description:**  
Implement the publication list item UI per Figma.

**Includes:**
- Title (linked)
- Summary text
- CTA icon/button
- Optional file indicator (PDF, DOC, link)

**Requirements:**
- Text truncation via CSS
- Hover and focus states
- Accessible clickable targets

**Acceptance Criteria:**
- Matches Figma typography and spacing
- Handles long titles gracefully
- Fully keyboard accessible

Publications-FE-2

FE-2: Build Publications Two-Column Layout

**Type:** Frontend  
**Priority:** High

**Description:**  
Implement the Publications layout with two columns:
- Reports (left)
- Documents (right)

**Requirements:**
- Responsive grid
- Stacked layout on mobile
- Section headings per column

**Acceptance Criteria:**
- Desktop: two-column layout
- Mobile: single-column stacked
- No layout shift on load

Publications-FE-3

FE-3: Integrate Drupal Views with Component

**Type:** Frontend / Drupal  
**Priority:** High

**Description:**  
Wire Drupal Views into the Publications component.

**Requirements:**
- Twig maps View fields to UI components
- No hard-coded content
- Supports variable item counts

**Acceptance Criteria:**
- Content updates automatically from CMS
- Empty states handled gracefully

Publications-FE-4

FE-4: Implement “View All” Buttons

**Type:** Frontend  
**Priority:** Medium

**Description:**  
Style and implement “View all” buttons per Figma.

**Requirements:**
- Correct routing to full list pages
- Accessible button/link markup
- Consistent styling with design system

**Acceptance Criteria:**
- Buttons navigate correctly
- Keyboard and screen-reader accessible

Publications-FE-5

FE-5: Responsive & Cross-Browser QA

**Type:** Frontend QA  
**Priority:** Medium

**Description:**  
Validate Publications component across devices and browsers.

**Acceptance Criteria:**
- Mobile-friendly stacking
- No overflow or truncation bugs
- Tested in Chrome, Firefox, Safari, Edge

Please refer to this image when generating the News view.

For responsive versions: