77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
|
import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
|
||
|
|
import { idpElementStyles } from './tokens.js';
|
||
|
|
|
||
|
|
declare global {
|
||
|
|
interface HTMLElementTagNameMap {
|
||
|
|
'idp-card': IdpCard;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@customElement('idp-card')
|
||
|
|
export class IdpCard extends DeesElement {
|
||
|
|
public static demo = () => html`<idp-card headline="Card title" description="Muted supporting text.">Card content</idp-card>`;
|
||
|
|
public static demoGroups = ['idp.global v3 primitives'];
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
public accessor headline = '';
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
public accessor description = '';
|
||
|
|
|
||
|
|
@property({ type: Boolean, reflect: true })
|
||
|
|
public accessor elevated = false;
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
...idpElementStyles,
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.card {
|
||
|
|
background: var(--idp-card);
|
||
|
|
border: 1px solid var(--idp-border);
|
||
|
|
border-radius: var(--idp-radius-lg);
|
||
|
|
color: var(--idp-fg);
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
:host([elevated]) .card {
|
||
|
|
box-shadow: 0 8px 24px -10px rgb(0 0 0 / 0.28);
|
||
|
|
}
|
||
|
|
.head {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 16px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
.headline {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 650;
|
||
|
|
line-height: 1.35;
|
||
|
|
}
|
||
|
|
.description {
|
||
|
|
color: var(--idp-muted-fg);
|
||
|
|
font-size: 13px;
|
||
|
|
line-height: 1.5;
|
||
|
|
margin-top: 3px;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
];
|
||
|
|
|
||
|
|
public render(): TemplateResult {
|
||
|
|
return html`
|
||
|
|
<section class="card" part="card">
|
||
|
|
${this.headline || this.description ? html`
|
||
|
|
<div class="head">
|
||
|
|
<div>
|
||
|
|
${this.headline ? html`<div class="headline">${this.headline}</div>` : html``}
|
||
|
|
${this.description ? html`<div class="description">${this.description}</div>` : html``}
|
||
|
|
</div>
|
||
|
|
<slot name="action"></slot>
|
||
|
|
</div>
|
||
|
|
` : html``}
|
||
|
|
<slot></slot>
|
||
|
|
</section>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|