Ship-It Designv0.0.21

GitHub

ConnectorCard

Integration-hub card. Renders a connector logo (via @ship-it-ui/icons connector glyphs), the connector name, a sync-state dot (with a pulse on syncing), a relative last-synced timestamp, an optional summary, and an actions slot.

When onClick is provided the whole card becomes keyboard-focusable (role="button", Enter/Space activate). Inner action buttons stop event propagation so they don't trigger the card's click.

Default#

Three connectors in three states — connected, syncing, and error. The syncing dot pulses to indicate live activity.

Loading…

Props#

Props for ConnectorCard
PropTypeDefaultDescription
connector *(string & {}) | "go" | "meta" | "medium" | "github" | "notion" | "slack" | "linear" | "jira" | "pagerduty" | "confluence" | "gdrive" | "s3" | "postgres" | "gitlab" | "bitbucket" | ... 226 more ... | "proton"—Connector name keyed into `@ship-it-ui/icons` connectorGlyphs.
name *ReactNode—Display name shown next to the logo.
status *enum—Sync status. Drives the status dot tone + the default status label.
lastSyncedAtstring | number | Date | undefined—Last successful sync timestamp. Formatted relative to `relativeNow`.
relativeNowDate | undefined—Reference time for relative formatting (injectable for tests/SSR).
summaryReactNode—Free-text summary (e.g. "1,243 docs · 8 channels").
actionsReactNode—Trailing action slot — typically a `Button` or `DropdownMenu` trigger.
onClick(() => void) | undefined—Click handler. When provided, the card becomes a button.
accessibleNamestring | undefined—Accessible name override. Required when `onClick` is set *and* `name` is not a string — without it the button has no accessible name (axe `button-name`). Optional otherwise.
nameTextstring | undefined—String version of `name` for the JSON-LD `name` field.
applicationCategorystring | undefined—schema.org `applicationCategory` (e.g. `'CRM'`, `'DataConnector'`).
urlstring | undefined—Connector detail URL — emitted as the entity `url`.
softwareVersionstring | undefined—Optional `softwareVersion` string.
noStructuredDataboolean | undefined—Opt out of emitting the `SoftwareApplication` JSON-LD script.