Skip to content

Commit f67f532

Browse files
djthorpedjthorpe
committed
Added button
1 parent 30308cd commit f67f532

File tree

5 files changed

+152
-15
lines changed

5 files changed

+152
-15
lines changed

‎npm/helloworld/src/index.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,16 @@
4949

5050
<wc-content vertical>
5151
<wc-content>
52-
TOP CONTENT
52+
<wc-button color="primary">Primary</wc-button>
53+
<wc-button color="secondary">Secondary</wc-button>
54+
<wc-button color="light">Light</wc-button>
55+
<wc-button color="dark">Dark</wc-button>
56+
<wc-button color="white">White</wc-button>
57+
<wc-button color="black">Black</wc-button>
58+
<wc-button color="success">Success</wc-button>
59+
<wc-button color="warning">Warning</wc-button>
60+
<wc-button color="error">Error</wc-button>
61+
<wc-button disabled>Disabled</wc-button>
5362
</wc-content>
5463
<wc-content>
5564
BOTTOM CONTENT

‎npm/helloworld/src/wc/layout/Button.ts‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { LitElement, html, css, nothing } from 'lit';
2+
import { customElement, property } from 'lit/decorators.js';
3+
4+
/**
5+
* @class Button
6+
*
7+
* This class is a button element, which can be used to trigger actions or events.
8+
*
9+
* @example
10+
* <wc-button>...</wc-button>
11+
*/
12+
@customElement('wc-button')
13+
export class Button extends LitElement {
14+
@property({ type: String }) size: string = 'default';
15+
@property({ type: Boolean }) disabled: boolean;
16+
@property({ type: String }) color: string = 'primary';
17+
18+
render() {
19+
return html`
20+
<button class=${this.className || nothing} ?disabled=${this.disabled} @click=${this.#onClick}>
21+
<slot></slot>
22+
</div>
23+
`;
24+
}
25+
26+
static get styles() {
27+
return css`
28+
button {
29+
align-items: center;
30+
display: inline-flex;
31+
margin: var(--button-margin);
32+
padding: var(--button-padding);
33+
border: var(--button-border);
34+
border-radius: var(--button-border-radius);
35+
}
36+
37+
button:not(:disabled) {
38+
cursor: pointer;
39+
user-select: none;
40+
}
41+
42+
button:disabled {
43+
cursor: default;
44+
opacity: var(--button-opacity-disabled);
45+
}
46+
47+
button:not(:disabled):hover {
48+
transform: scale(1.05);
49+
}
50+
51+
button:not(:disabled):active {
52+
font-weight: var(--button-font-weight-active);
53+
}
54+
55+
button.color-primary {
56+
background-color: var(--primary-color);
57+
color: var(--primary-opp-color);
58+
}
59+
button.color-secondary {
60+
background-color: var(--secondary-color);
61+
color: var(--secondary-opp-color);
62+
}
63+
button.color-light {
64+
background-color: var(--light-color);
65+
color: var(--light-opp-color);
66+
}
67+
button.color-dark {
68+
background-color: var(--dark-color);
69+
color: var(--dark-opp-color);
70+
}
71+
button.color-white {
72+
background-color: var(--white-color);
73+
color: var(--white-opp-color);
74+
}
75+
button.color-black {
76+
background-color: var(--black-color);
77+
color: var(--black-opp-color);
78+
}
79+
button.color-success {
80+
background-color: var(--success-color);
81+
color: var(--success-opp-color);
82+
}
83+
button.color-warning {
84+
background-color: var(--warning-color);
85+
color: var(--warning-opp-color);
86+
}
87+
button.color-error {
88+
background-color: var(--error-color);
89+
color: var(--error-opp-color);
90+
}
91+
`;
92+
}
93+
94+
#onClick(event: MouseEvent): void {
95+
event.preventDefault();
96+
}
97+
98+
get className() {
99+
const classes = [];
100+
if (this.size) {
101+
classes.push(`size-${this.size}`);
102+
}
103+
if (this.color) {
104+
classes.push(`color-${this.color}`);
105+
}
106+
return classes.join(' ');
107+
}
108+
}

‎npm/helloworld/src/wc/layout/Icon.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,7 @@ export class Icon extends LitElement {
2222

2323
render() {
2424
return svg`
25-
<div class=${this.className || nothing}>
26-
<svg class=${this.className || nothing}><use href="${icons}#${this.name}"/></svg>
27-
</div>
25+
<svg class=${this.className || nothing}><use href="${icons}#${this.name}"/></svg>
2826
`;
2927
}
3028

‎npm/helloworld/src/wc/root.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import './tokens.css';
44

55
// Web Components
6+
import './layout/Button'
67
import './layout/Canvas'
78
import './layout/Content'
89
import './layout/Icon'

‎npm/helloworld/src/wc/tokens.css‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,28 @@ body {
2525
font-size: var(--font-size-default);
2626
}
2727

28+
/* spacings */
29+
:root {
30+
--space-default: 0.5em;
31+
--space-small: calc(var(--space-default) / 2);
32+
}
33+
2834
/* fonts */
2935
:root {
3036
--font-family-base: 'IBM Plex Sans', sans-serif;
3137
--font-family-mono: 'IBM Plex Mono', monospace;
32-
--font-size-default: 0.9em;
33-
--font-size-small: 0.8em;
34-
--font-size-large: 1.2em;
35-
--font-size-xlarge: 1.5em;
38+
--font-size-default: calc(var(--space-default) * 2);
39+
--font-size-small: calc(var(--font-size-default) * 0.8);
40+
--font-size-large: calc(var(--font-size-default) * 1.2);
41+
--font-size-xlarge: calc(var(--font-size-default) * 1.5);
3642
--font-weight-normal: 400;
3743
--font-weight-semibold: 600;
3844
}
3945

4046
/* colors */
4147
:root {
42-
--light-color: #fafafa;
43-
--dark-color: #0f0f0f;
48+
--light-color: #f7f7f7;
49+
--dark-color: #555;
4450
--white-color: #fff;
4551
--black-color: #000;
4652

@@ -50,6 +56,16 @@ body {
5056
--warning-color: #f72;
5157
--error-color: #f55;
5258

59+
--primary-opp-color: var(--light-color);
60+
--secondary-opp-color: var(--light-color);
61+
--success-opp-color: var(--light-color);
62+
--warning-opp-color: var(--light-color);
63+
--error-opp-color: var(--light-color);
64+
--light-opp-color: var(--dark-color);
65+
--dark-opp-color: var(--light-color);
66+
--white-opp-color: var(--black-color);
67+
--black-opp-color: var(--white-color);
68+
5369
--grey-10-color: #EAEAEA;
5470
--grey-20-color: #D0D0D0;
5571
--grey-30-color: #B6B6B6;
@@ -61,11 +77,6 @@ body {
6177
--grey-90-color: #1A1A1A;
6278
}
6379

64-
/* space */
65-
:root {
66-
--space-default: 0.5em;
67-
}
68-
6980
/* icons */
7081
:root {
7182
--icon-size-small: 1.1em;
@@ -74,6 +85,16 @@ body {
7485
--icon-size-xlarge: 3em;
7586
}
7687

88+
/* buttons */
89+
:root {
90+
--button-margin: calc(var(--space-small) * 2) var(--space-small);
91+
--button-padding: var(--space-default) var(--space-default);
92+
--button-border: calc(var(--space-small) / 4) solid light-dark(var(--grey-50-color),var(--grey-50-color));
93+
--button-border-radius: calc(var(--space-small) / 2);
94+
--button-font-weight-active: var(--font-weight-semibold);
95+
--button-opacity-disabled: 0.4;
96+
}
97+
7798
/* navigation */
7899
:root {
79100
--nav-background-color: light-dark(var(--grey-20-color),var(--grey-80-color));

0 commit comments

Comments
 (0)