49 lines
1.3 KiB
Markdown
49 lines
1.3 KiB
Markdown
|
# @idp.global/catalog
|
||
|
|
|
||
|
|
Web component catalog for idp.global, based on the v2 product design language.
|
||
|
|
|
||
|
|
The catalog converts the `idp.global v2.zip` design studies into reusable custom elements for landing pages, approval surfaces, account/admin shells, and mobile-style identity flows.
|
||
|
|
|
||
|
|
## Install
|
||
|
|
|
||
|
|
```bash
|
||
|
|
pnpm add @idp.global/catalog
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import '@idp.global/catalog';
|
||
|
|
```
|
||
|
|
|
||
|
|
```html
|
||
|
|
<idp-landing-hero></idp-landing-hero>
|
||
|
|
<idp-approval-card app-name="GitHub" request-text="Sign in to github.com"></idp-approval-card>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Elements
|
||
|
|
|
||
|
|
- `idp-button` for v2 button variants.
|
||
|
|
- `idp-badge` for small status labels.
|
||
|
|
- `idp-card` for bordered shadcn-style content containers.
|
||
|
|
- `idp-input` for text/password/email inputs.
|
||
|
|
- `idp-toggle` for compact boolean controls.
|
||
|
|
- `idp-icon` for bundled monochrome identity icons.
|
||
|
|
- `idp-approval-card` for approve/deny request cards.
|
||
|
|
- `idp-inbox-preview` for mobile approval inbox previews.
|
||
|
|
- `idp-mobile-frame` for iOS-style product screenshots.
|
||
|
|
- `idp-admin-shell` for account/org admin layout previews.
|
||
|
|
- `idp-landing-hero` for the public landing hero section.
|
||
|
|
|
||
|
|
## Scope
|
||
|
|
|
||
|
|
This package is component-only. It does not perform authentication, store sessions, or call the idp.global backend.
|
||
|
|
|
||
|
|
## Development
|
||
|
|
|
||
|
|
```bash
|
||
|
|
pnpm install
|
||
|
|
pnpm run build
|
||
|
|
pnpm test
|
||
|
|
```
|