WIP PWA for Grain
feat: add filled state and click events to grain-stat-count
+27
-3
+27
-3
src/components/molecules/grain-stat-count.js
+27
-3
src/components/molecules/grain-stat-count.js
···
4
4
export class GrainStatCount extends LitElement {
5
5
static properties = {
6
6
icon: { type: String },
7
-
count: { type: Number }
7
+
count: { type: Number },
8
+
filled: { type: Boolean },
9
+
interactive: { type: Boolean }
8
10
};
9
11
10
12
static styles = css`
···
42
44
constructor() {
43
45
super();
44
46
this.count = 0;
47
+
this.filled = false;
48
+
this.interactive = false;
45
49
}
46
50
47
51
#formatCount(n) {
···
50
54
return n.toString();
51
55
}
52
56
57
+
#handleClick() {
58
+
if (this.interactive) {
59
+
this.dispatchEvent(new CustomEvent('stat-click', { bubbles: true, composed: true }));
60
+
}
61
+
}
62
+
63
+
get #iconName() {
64
+
if (this.icon === 'heart' && this.filled) {
65
+
return 'heartFilled';
66
+
}
67
+
return this.icon;
68
+
}
69
+
53
70
render() {
71
+
const color = this.icon === 'heart' && this.filled ? 'var(--color-heart)' : 'inherit';
72
+
54
73
return html`
55
-
<button type="button" aria-label=${this.icon}>
56
-
<grain-icon name=${this.icon} size="16"></grain-icon>
74
+
<button
75
+
type="button"
76
+
aria-label=${this.icon}
77
+
style="color: ${color}"
78
+
@click=${this.#handleClick}
79
+
>
80
+
<grain-icon name=${this.#iconName} size="16"></grain-icon>
57
81
</button>
58
82
${this.count > 0 ? html`
59
83
<span class="count">${this.#formatCount(this.count)}</span>