/
card-section.ts
110 lines (96 loc) · 2.34 KB
/
card-section.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import { attr, css, customElement, FASTElement, html, volatile, when } from '@microsoft/fast-element';
import { numberConverter } from '../../shared/components/converters/number-converter';
import '../../shared/components/codicon';
const template = html<CardSection>`<template
role="region"
style="${x => (x.backdrop !== '' ? `background-image: url(${x.backdrop})` : '')}"
>
${when(
x => x.noHeading === false,
html<CardSection>`<header>
<div class="heading" role="heading" aria-level="${x => x.headingLevel}">
<slot name="heading"></slot>
<small class="description"><slot name="description"></slot></small>
</div>
${when(
x => x.dismissable,
html<CardSection>`<button
class="dismiss"
type="button"
@click="${(x, c) => x.handleDismiss(c.event)}"
title="dismiss"
aria-label="dismiss"
>
<code-icon icon="close"></code-icon>
</button>`,
)}
</header>`,
)}
<div class="content"><slot></slot></div>
</template>`;
const styles = css`
* {
box-sizing: border-box;
}
:host {
display: block;
padding: 1.2rem;
background-color: #aaaaaa10;
margin-bottom: 1rem;
border-radius: 0.4rem;
background-repeat: no-repeat;
background-size: cover;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 0.4rem;
margin-bottom: 1rem;
}
.dismiss {
width: 2rem;
height: 2rem;
padding: 0;
font-size: var(--vscode-editor-font-size);
line-height: 2rem;
font-family: inherit;
border: none;
color: inherit;
background: none;
text-align: left;
cursor: pointer;
opacity: 0.5;
flex: none;
text-align: center;
}
.dismiss:focus {
outline: 1px solid var(--vscode-focusBorder);
outline-offset: 0.2rem;
}
.heading {
text-transform: uppercase;
}
.description {
margin-left: 0.2rem;
text-transform: none;
/* color needs to come from some sort property */
color: #b68cd8;
}
`;
@customElement({ name: 'card-section', template: template, styles: styles })
export class CardSection extends FASTElement {
@attr
backdrop = '';
@attr({ attribute: 'no-heading', mode: 'boolean' })
noHeading = false;
@attr({ attribute: 'heading-level', converter: numberConverter })
headingLevel = 2;
@attr({ mode: 'boolean' })
dismissable = false;
@attr({ mode: 'boolean' })
expanded = true;
handleDismiss(e: Event) {
this.$emit('dismiss');
}
}