Skip to content

Commit f248a31

Browse files
djthorpedjthorpe
committed
Added test components
1 parent 0a240f3 commit f248a31

File tree

5 files changed

+315
-0
lines changed

5 files changed

+315
-0
lines changed

‎src/component/button/ButtonElement.js

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
2+
import { LitElement, html, css } from 'lit';
3+
import Event from '../../core/event';
4+
5+
export class ButtonElement extends LitElement {
6+
static get properties() {
7+
return {
8+
/**
9+
* Name of the button to use when firing the EVENT_CLICK event
10+
* @type {String}
11+
*/
12+
name: { type: String },
13+
14+
/**
15+
* Whether the button is disabled
16+
* @type {Boolean}
17+
*/
18+
disabled: { type: Boolean },
19+
20+
/**
21+
* Set to URL to render <a> element styled as button.
22+
* @type {String}
23+
*/
24+
link: { type: String },
25+
26+
/**
27+
* The text transform, none, uppercase, lowercase,capitalize
28+
* @type {String}
29+
*/
30+
transform: { type: String },
31+
};
32+
}
33+
34+
static get styles() {
35+
return css`
36+
button {
37+
display: inline-block;
38+
position: relative;
39+
color: var(--button-color);
40+
background-color: var(--button-background-color);
41+
font-weight: var(--button-font-weight);
42+
font-size: var(--button-font-size);
43+
border: none;
44+
margin: none;
45+
padding: var(--button-padding-y) var(--button-padding-x);
46+
border-top-left-radius: var(--button-border-radius-left);
47+
border-bottom-left-radius: var(--button-border-radius-left);
48+
border-top-right-radius: var(--button-border-radius-right);
49+
border-bottom-right-radius: var(--button-border-radius-right);
50+
}
51+
button:active button:focus {
52+
top: var(--button-offset-active);
53+
left: var(--button-offset-active);
54+
color: var(--button-color-active);
55+
background-color: var(--button-background-color-active);
56+
font-weight: var(--button-font-weight-active);
57+
}
58+
button:hover {
59+
color: var(--button-color-hover);
60+
background-color: var(--button-background-color-hover);
61+
font-weight: var(--button-font-weight-hover);
62+
}
63+
button.disabled {
64+
pointer-events: none;
65+
color: var(--button-color-disabled);
66+
background-color: var(--button-background-color-disabled);
67+
font-weight: var(--button-font-weight-disabled);
68+
}
69+
.text-transform-capitalize {
70+
text-transform: capitalize;
71+
}
72+
.text-transform-uppercase {
73+
text-transform: uppercase;
74+
}
75+
.text-transform-lowercase {
76+
text-transform: lowercase;
77+
}
78+
.text-transform-none {
79+
text-transform: none;
80+
}
81+
`;
82+
}
83+
84+
render() {
85+
return html`
86+
${this.link
87+
? html`
88+
<a role="button" class="button ${this.transform ? `text-transform-${this.transform}` : ''}" href="${this.link}" ?disabled="${this.disabled}" @click=${this.onClick}>
89+
<slot></slot>
90+
</a>
91+
`
92+
: html`
93+
<button role="button" type="button" class="button ${this.transform ? `transform-${this.transform}` : ''}" ?disabled="${this.disabled}" role="presentation">
94+
<slot></slot>
95+
</button>
96+
`}
97+
`;
98+
}
99+
100+
constructor() {
101+
super();
102+
console.log("Hello from ButtonElement");
103+
// Initialize properties
104+
this.transform = 'none';
105+
this.disabled = false;
106+
}
107+
108+
onClick() {
109+
console.log('Button clicked');
110+
this.dispatchEvent(new CustomEvent(
111+
Event.EVENT_CLICK, { detail: this.name || this.textContent },
112+
));
113+
}
114+
115+
updated(changedProperties) {
116+
changedProperties.forEach((oldValue, propName) => {
117+
console.log(`${propName} changed. oldValue: ${oldValue}`);
118+
});
119+
}
120+
}

‎src/component/button/Test.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
import { LitElement, html } from 'lit';
3+
import {customElement} from 'lit/decorators.js';
4+
5+
export class Test extends LitElement {
6+
render() {
7+
return html`<button role="button">Test</button>`;
8+
}
9+
}
10+
11+
customElements.define('Test', Test);

‎src/core/event.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Define events used by web components
2+
const EVENT_CLICK = 'js-click';
3+
const EVENT_START = 'js-start';
4+
const EVENT_DONE = 'js-done';
5+
const EVENT_ERROR = 'js-error';
6+
7+
export default {
8+
EVENT_CLICK, EVENT_START, EVENT_DONE, EVENT_ERROR,
9+
};

‎src/css/core.css

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
2+
:root {
3+
/* fonts */
4+
--font-family-base: "Open Sans", "Helvetica Neue", Arial, sans-serif;
5+
--font-size-normal: 0.85rem;
6+
--font-size-small: 0.75rem;
7+
--font-size-large: 1.25rem;
8+
--font-weight-light: 300;
9+
--font-weight-normal: 300;
10+
--font-weight-bold: 400;
11+
--font-weight-extrabold: 800;
12+
13+
/* colours */
14+
--primary-color: #16f;
15+
--secondary-color: #aaa;
16+
--success-color: #285;
17+
--warning-color: #f72;
18+
--error-color: #f55;
19+
--light-color: #eee;
20+
--white-color: #fff;
21+
--dark-color: #333;
22+
--black-color: #000;
23+
--grey-900-color: #222;
24+
25+
/* controls */
26+
--control-color: #bbb;
27+
--control-color-hover: #ccc;
28+
--control-color-active: #ddd;
29+
--control-color-disabled: #ddd;
30+
31+
/* grids and spacing */
32+
--spacer: 1rem;
33+
--spacer-0: 0;
34+
--spacer-1: var(--spacer);
35+
--spacer-2: calc(var(--spacer) * 1.1);
36+
--spacer-3: calc(var(--spacer) * 1.2);
37+
--spacer-4: calc(var(--spacer) * 1.3);
38+
--spacer-5: calc(var(--spacer) * 1.4);
39+
--spacer-6: calc(var(--spacer) * 1.5);
40+
--container-padding-x: var(--spacer);
41+
--container-padding-y: 0;
42+
43+
/* body */
44+
--body-background-color: var(--white-color);
45+
--body-color: var(--gray-900-color);
46+
47+
/* headings */
48+
--h1-font-size: calc(var(--font-size-normal) * 2.5);
49+
--h2-font-size: calc(var(--font-size-normal) * 2);
50+
--h3-font-size: calc(var(--font-size-normal) * 1.75);
51+
--h4-font-size: calc(var(--font-size-normal) * 1.5);
52+
--h5-font-size: calc(var(--font-size-normal) * 1.25);
53+
--h6-font-size: calc(var(--font-size-normal));
54+
--heading-margin-bottom: calc(var(--spacer) * 0.9);
55+
--heading-font-family: var(--font-family-base);
56+
--heading-font-weight: var(--font-weight-bold);
57+
--heading-line-height: 1.2;
58+
--heading-color: inherit;
59+
60+
/* borders */
61+
--border-radius: 0.20em;
62+
63+
/* button */
64+
--button-background-color: var(--control-color);
65+
--button-background-color-hover: var(--control-color-hover);
66+
--button-background-color-active: var(--control-color-active);
67+
--button-background-color-disabled: var(--control-color-disabled);
68+
--button-color: var(--dark-color);
69+
--button-color-hover: var(--dark-color);
70+
--button-color-active: var(--light-color);
71+
--button-color-disabled: var(--light-color);
72+
--button-font-weight: var(--font-weight-bold);
73+
--button-font-weight-hover: var(--font-weight-bold);
74+
--button-font-weight-active: var(--font-weight-bold);
75+
--button-font-weight-disabled: var(--font-weight-bold);
76+
--button-border-radius: var(--border-radius);
77+
--button-border-radius-left: var(--button-border-radius);
78+
--button-border-radius-right: var(--button-border-radius);
79+
--button-font-size: var(--font-size-normal);
80+
--button-padding-x: 0.45em;
81+
--button-padding-y: 0.45em;
82+
--button-offset-active: 0.1em;
83+
84+
/* close */
85+
--button-close-size: 16px;
86+
--button-close-padding: 0;
87+
--button-close-color: var(--control-color);
88+
--button-close-color-hover: var(--control-color-hover);
89+
--button-close-color-active: var(--control-color-active);
90+
--button-close-color-disabled: var(--control-color-disabled);
91+
92+
/* badge */
93+
--badge-background-color: var(--primary-color);
94+
--badge-color: var(--light-color);
95+
--badge-padding-x: 0.35em;
96+
--badge-padding-y: 0.35em;
97+
--badge-font-size: var(--font-size-small);
98+
--badge-font-weight: var(--font-weight-bold);
99+
--badge-border-radius: var(--border-radius);
100+
101+
/* nav */
102+
--nav-border-bottom: 1px solid var(--secondary-color);
103+
104+
/* navbar */
105+
--navbar-background-color: var(--primary-color);
106+
--navbar-color: var(--light-color);
107+
--navbar-border-bottom: 0.5px solid var(--light-color);
108+
--navbar-padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 1.5);
109+
110+
/* navitem-view */
111+
--navitem-color: var(--dark-color);
112+
--navitem-color-hover: var(--dark-color);
113+
--navitem-color-active: var(--dark-color);
114+
--navitem-color-disabled: var(--light-color);
115+
--navitem-background-color: inherit;
116+
--navitem-background-color-hover: inherit;
117+
--navitem-background-color-active: inherit;
118+
--navitem-background-color-disabled: inherit;
119+
--navitem-font-weight: var(--font-weight-normal);
120+
--navitem-font-weight-active: var(--font-weight-bold);
121+
--navitem-font-weight-hover: var(--font-weight-bold);
122+
--navitem-font-weight-disabled: var(--font-weight-light);
123+
--navitem-padding: calc(var(--spacer) * 0.5) var(--spacer);
124+
125+
/* forms */
126+
--form-input-background-color: none;
127+
--form-input-color: var(--dark-color);
128+
--form-input-margin: calc(var(--spacer) * 0.5) 0;
129+
--form-input-padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 0.5);
130+
--form-input-font-size: var(--font-size-normal);
131+
--form-input-font-weight: var(--font-weight-normal);
132+
--form-input-line-height: 1;
133+
--form-input-border: 0.5px solid var(--control-color);
134+
135+
--form-input-background-color-focus: none;
136+
--form-input-color-focus: var(--dark-color);
137+
--form-input-border-focus: 0.5px solid var(--dark-color);
138+
139+
--form-checkbox-background-color: none;
140+
--form-checkbox-color: var(--dark-color);
141+
--form-checkbox-margin: calc(var(--spacer) * 0.5) 0;
142+
--form-checkbox-padding: 1 0;
143+
--form-checkbox-line-height: 1;
144+
145+
--form-label-background-color: none;
146+
--form-label-color: var(--dark-color);
147+
--form-label-padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 0.5);
148+
--form-label-font-size: var(--font-size-small);
149+
--form-label-font-weight: var(--font-weight-light);
150+
--form-label-line-height: 1;
151+
--form-label-border: none;
152+
153+
/* modal */
154+
--modal-margin: 20%;
155+
--modal-padding: calc(var(--spacer) * 1.5);
156+
--modal-color: var(--body-color);
157+
--modal-background-color: var(--body-background-color);
158+
--modal-border: 0.5px solid var(--control-color);
159+
--modal-border-radius: var(--border-radius);
160+
}
161+

‎src/index.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
// This file defines all the styles and elements used for the web components
3+
4+
// Styles
5+
//import './css/core.css';
6+
7+
// Components
8+
//export { ButtonElement } from './component/button/ButtonElement';
9+
export { Test } from './component/button/Test';
10+
11+
// Test
12+
window.addEventListener('load', () => {
13+
console.log("Loaded Document");
14+
});

0 commit comments

Comments
 (0)