85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
|
import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
|
||
|
|
import { idpElementStyles } from './tokens.js';
|
||
|
|
|
||
|
|
export type TIdpBadgeVariant = 'default' | 'accent' | 'ok' | 'warn' | 'error' | 'outline';
|
||
|
|
|
||
|
|
declare global {
|
||
|
|
interface HTMLElementTagNameMap {
|
||
|
|
'idp-badge': IdpBadge;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@customElement('idp-badge')
|
||
|
|
export class IdpBadge extends DeesElement {
|
||
|
|
public static demo = () => html`
|
||
|
|
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||
|
|
<idp-badge>Default</idp-badge>
|
||
|
|
<idp-badge variant="accent">Admin</idp-badge>
|
||
|
|
<idp-badge variant="ok">Trusted</idp-badge>
|
||
|
|
<idp-badge variant="warn">New network</idp-badge>
|
||
|
|
<idp-badge variant="error">Denied</idp-badge>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
public static demoGroups = ['idp.global v3 primitives'];
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
public accessor variant: TIdpBadgeVariant = 'default';
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
...idpElementStyles,
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: inline-flex;
|
||
|
|
}
|
||
|
|
.badge {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 4px;
|
||
|
|
padding: 2px 8px;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
border-radius: 999px;
|
||
|
|
font-family: var(--idp-mono);
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 600;
|
||
|
|
letter-spacing: -0.01em;
|
||
|
|
line-height: 16px;
|
||
|
|
}
|
||
|
|
.default {
|
||
|
|
background: var(--idp-muted);
|
||
|
|
color: var(--idp-muted-fg);
|
||
|
|
}
|
||
|
|
.accent {
|
||
|
|
background: var(--idp-accent-soft);
|
||
|
|
color: var(--idp-accent);
|
||
|
|
}
|
||
|
|
.ok {
|
||
|
|
background: var(--idp-ok-bg);
|
||
|
|
color: var(--idp-ok);
|
||
|
|
border-color: var(--idp-ok-border);
|
||
|
|
}
|
||
|
|
.warn {
|
||
|
|
background: var(--idp-warn-bg);
|
||
|
|
color: var(--idp-warn);
|
||
|
|
border-color: var(--idp-warn-border);
|
||
|
|
}
|
||
|
|
.error {
|
||
|
|
background: var(--idp-error-bg);
|
||
|
|
color: var(--idp-error);
|
||
|
|
border-color: var(--idp-error-border);
|
||
|
|
}
|
||
|
|
.accent {
|
||
|
|
border-color: var(--idp-info-border);
|
||
|
|
}
|
||
|
|
.outline {
|
||
|
|
background: transparent;
|
||
|
|
color: var(--idp-fg);
|
||
|
|
border-color: var(--idp-border);
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
];
|
||
|
|
|
||
|
|
public render(): TemplateResult {
|
||
|
|
return html`<span class="badge ${this.variant}"><slot></slot></span>`;
|
||
|
|
}
|
||
|
|
}
|