Account Connections Component

[henryajisegiri]

Description

Implement the Account Connections Card component as defined in Figma. This component is used on the user profile or settings page to list a user's connected third-party accounts, with the option to manage existing connections or connect new ones.

Figma Link

Scope

Variants

• Connected
• Not connected

Component Structure

The Account Connections Card includes a section heading ("Account connections") and a row per third-party account. Each row contains a provider icon token, provider name, connection status label ("Connected" or "Not connected"), and an action button ("Manage" if connected, "Connect" if not).

Current providers:

• GitHub
• Google

States

Connection Row

• Connected — shows "Connected" status and a "Manage" button
• Not connected — shows "Not connected" status and a "Connect" button

Implementation Requirements

• Use design tokens for typography, spacing, border radius, and surface colours
• Provider icons must use icon tokens provided by the design system
• Action button must consume the existing Button component
• Each row's state (connected / not connected) must be driven by props
• The list of providers and their connection status must be passed in via props
• The component must support a variable number of provider rows without breaking layout

Out of Scope

• OAuth or authentication flows
• API integration or connection state management
• Error or loading states
• Analytics event wiring

Acceptance Criteria

Component

• Card renders with correct heading and provider rows
• Connected rows display "Connected" status and a "Manage" button
• Not connected rows display "Not connected" status and a "Connect" button
• Provider icon and name render correctly per row
• Component supports a variable number of provider rows

Storybook

• Account Connections Card is documented in Storybook
• Demonstrates:
  • All providers connected
  • All providers not connected
  • Mixed state (some connected, some not)
• Code snippets are provided

Accessibility and Analytics

• Semantic structure — Use appropriate structural elements for the card and row list
• Button context — "Manage" and "Connect" buttons must have accessible labels that include the provider name (e.g. "Connect Google") to avoid ambiguity for screen readers
• Analytics readiness — Component must allow analytics attributes or identifiers to be passed via props without internal modification

Dependencies / Assumptions

• Required design tokens are implemented
• Icon tokens for all supported providers are available
• Button component is available
• OAuth and connection logic is handled externally — this component is presentational only
• Figma is the source of truth for layout and spacing

Definition of Done

• Account Connections Card component implemented and reusable
• Connected and not connected variants verified against Figma
• Token usage reviewed
• Storybook documentation complete
• Task reviewed and approved

[jsiswickqa]

@gregjkal Issue 1:

The connection name and icon do not seem to be vertically aligned. The name appears to sit too high.

[gregjkal]

Good catch @jsiswickqa. I've fixed this and merged to develop - should be live in ~10 minutes.

[jsiswickqa]

PASSED QA!