Skip to content

Commit 39a512c

Browse files
djthorpedjthorpe
committed
Updated
1 parent 83cfba3 commit 39a512c

File tree

11 files changed

+290
-8
lines changed

11 files changed

+290
-8
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# js-framework
2+

‎config/jsdoc.config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"source": {
33
"include": [
4-
"js"
4+
"src"
55
],
66
"exclude": [
77
"node_modules"

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
"description": "Javascript Framework",
55
"main": "dist/index.js",
66
"scripts": {
7-
"serve": "esbuild src/index.js src/index.js src/index.html --outdir=dist --format=esm --sourcemap --minify --bundle --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file --loader:.html=copy --watch --serve",
8-
"build": "rm -fr dist && install -d dist && cp -r src/html/* dist && esbuild src/index.js --format=esm --minify --bundle --outdir=dist --sourcemap --asset-names=assets/[name]-[hash] --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file",
7+
"serve": "rm -fr dist && install -d dist && esbuild src/index.js src/index.html --outdir=dist --format=esm --sourcemap --minify --bundle --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file --loader:.html=copy --watch --serve",
8+
"build": "rm -fr dist && install -d dist && esbuild src/index.js src/index.html --outdir=dist --format=esm --sourcemap --minify --bundle --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file --loader:.html=copy",
99
"lint": "eslint js",
1010
"docs": "jsdoc -c config/jsdoc.config.json"
1111
},

‎src/component/button/ButtonElement.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
import { LitElement, html, css } from 'lit';
33
import Event from '../../core/event';
44

5+
/**
6+
* A button element
7+
*/
58
export class ButtonElement extends LitElement {
69
static get properties() {
710
return {
@@ -40,15 +43,15 @@ export class ButtonElement extends LitElement {
4043
background-color: var(--button-background-color);
4144
font-weight: var(--button-font-weight);
4245
font-size: var(--button-font-size);
43-
border: none;
46+
border: var(--button-border) solid var(--button-border-color);
4447
margin: none;
4548
padding: var(--button-padding-y) var(--button-padding-x);
4649
border-top-left-radius: var(--button-border-radius-left);
4750
border-bottom-left-radius: var(--button-border-radius-left);
4851
border-top-right-radius: var(--button-border-radius-right);
4952
border-bottom-right-radius: var(--button-border-radius-right);
5053
}
51-
button:active button:focus {
54+
button:active {
5255
top: var(--button-offset-active);
5356
left: var(--button-offset-active);
5457
color: var(--button-color-active);
@@ -113,5 +116,7 @@ export class ButtonElement extends LitElement {
113116
}
114117
}
115118

116-
window.customElements.define('js-button', ButtonElement);
119+
120+
customElements.define('wc-button', ButtonElement);
121+
117122

‎src/component/button/ButtonGroupElement.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
2+
import { LitElement, html, css } from 'lit';
3+
4+
/**
5+
* wc-button-group is a group of buttons
6+
*
7+
* @slot - This element has a slot to include wc-button elements
8+
*/
9+
export class ButtonGroupElement extends LitElement {
10+
static get styles() {
11+
return css`
12+
:host {
13+
display: flex;
14+
--button-border-radius-left: 0;
15+
--button-border-radius-right: 0;
16+
}
17+
::slotted(:not(:last-child)) {
18+
border-right: 1px solid var(--button-group-divider-color);
19+
}
20+
::slotted(*:first-child) {
21+
--button-border-radius-left: var(--button-border-radius);
22+
}
23+
::slotted(*:last-child) {
24+
--button-border-radius-right: var(--button-border-radius);
25+
}
26+
`;
27+
}
28+
29+
render() {
30+
return html`<slot></slot>`;
31+
}
32+
constructor() {
33+
super();
34+
}
35+
}
36+
37+
customElements.define('wc-button-group', ButtonGroupElement);
38+
39+

‎src/component/button/CloseButtonElement.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
2+
import { LitElement, html, css } from 'lit';
3+
import Event from '../../core/event';
4+
5+
/**
6+
* CloseButtonElement
7+
*/
8+
export class CloseButtonElement extends LitElement {
9+
static get properties() {
10+
return {
11+
/**
12+
* Name of the button to use when firing the EVENT_CLICK event
13+
* @type {String}
14+
*/
15+
name: { type: String },
16+
17+
/**
18+
* Whether the button is disabled
19+
* @type {Boolean}
20+
*/
21+
disabled: { type: Boolean },
22+
};
23+
}
24+
25+
static get styles() {
26+
return css`
27+
button {
28+
position: absolute;
29+
top: 0;
30+
right: 0;
31+
padding: 0;
32+
border: 0;
33+
background: transparent;
34+
}
35+
button div {
36+
position: relative;
37+
width: var(--button-close-size);
38+
height: var(--button-close-size);
39+
padding: var(--button-close-padding);
40+
}
41+
button wc-icon {
42+
color: var(--button-close-color);
43+
}
44+
button:hover wc-icon {
45+
color: var(--button-close-color-hover);
46+
}
47+
button:active {
48+
top: var(--button-offset-active);
49+
right: var(--button-offset-active);
50+
}
51+
button:active wc-icon {
52+
color: var(--button-close-color-active);
53+
}
54+
button:disabled {
55+
pointer-events: none;
56+
color: var(--button-close-color-disabled);
57+
}
58+
`;
59+
}
60+
61+
render() {
62+
return html`
63+
<button role="button" @click=${this.onClick}>
64+
<div><wc-icon name="x-circle"></wc-icon></div>
65+
</button>
66+
`;
67+
}
68+
69+
constructor() {
70+
super();
71+
// Default properties
72+
this.name = '';
73+
this.disabled = false;
74+
}
75+
76+
onClick() {
77+
this.dispatchEvent(new CustomEvent(
78+
Event.EVENT_CLICK, { detail: this.name },
79+
));
80+
}
81+
}
82+
83+
customElements.define('wc-close', CloseButtonElement);

‎src/component/icon/IconElement.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
import { LitElement, svg, css } from 'lit';
3+
import icons from 'bootstrap-icons/bootstrap-icons.svg';
4+
5+
/**
6+
* IconElement
7+
*/
8+
export class IconElement extends LitElement {
9+
static get properties() {
10+
return {
11+
/**
12+
* Name of the icon to display
13+
* @type {String}
14+
*/
15+
name: { type: String },
16+
};
17+
}
18+
19+
static get styles() {
20+
return css`
21+
svg {
22+
width: 100%;
23+
height: 100%;
24+
fill: currentColor;
25+
}
26+
`;
27+
}
28+
29+
render() {
30+
return svg`<svg><use href="${icons}#${this.name}"/></svg>`;
31+
}
32+
33+
constructor() {
34+
super();
35+
// Default properties
36+
this.name = 'bootstrap-reboot';
37+
}
38+
}
39+
40+
customElements.define('wc-icon', IconElement);

‎src/css/core.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,13 +73,16 @@
7373
--button-font-weight-hover: var(--font-weight-bold);
7474
--button-font-weight-active: var(--font-weight-bold);
7575
--button-font-weight-disabled: var(--font-weight-bold);
76+
--button-border: none;
77+
--button-border-color: var(--black-color);
7678
--button-border-radius: var(--border-radius);
7779
--button-border-radius-left: var(--button-border-radius);
7880
--button-border-radius-right: var(--button-border-radius);
7981
--button-font-size: var(--font-size-normal);
8082
--button-padding-x: 0.45em;
8183
--button-padding-y: 0.45em;
8284
--button-offset-active: 0.1em;
85+
--button-group-divider-color: var(--light-color);
8386

8487
/* close */
8588
--button-close-size: 16px;

‎src/css/document.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
2+
@import url(../assets/font/opensans.css);
3+
4+
body {
5+
margin: 0;
6+
font-family: var(--font-family-base);
7+
font-size: var(--font-size-normal);
8+
}
9+
10+
/* Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border` */
11+
*, *::before, *::after {
12+
box-sizing: border-box;
13+
}
14+
15+
/* Headings */
16+
h1, h2, h3, h4, h5, h6 {
17+
margin-top: 0;
18+
margin-bottom: var(--heading-margin-bottom);
19+
font-family: var(--heading-font-family);
20+
font-weight: var(--heading-font-weight);
21+
line-height: var(--heading-line-height);
22+
color: var(--heading-color);
23+
}
24+
25+
h1 {
26+
font-size: var(--h1-font-size);
27+
}
28+
29+
h2 {
30+
font-size: var(--h2-font-size);
31+
}
32+
33+
h3 {
34+
font-size: var(--h3-font-size);
35+
}
36+
37+
h4 {
38+
font-size: var(--h4-font-size);
39+
}
40+
41+
h5 {
42+
font-size: var(--h5-font-size);
43+
}
44+
45+
h6 {
46+
font-size: var(--h6-font-size);
47+
}
48+
49+
/* HR */
50+
hr {
51+
margin: var(--spacer-1) 0;
52+
color: black;
53+
border: 0;
54+
}
55+
56+
/* Containers */
57+
div.container {
58+
padding: var(--container-padding-y) var(--container-padding-x) !important;
59+
margin: auto;
60+
}
61+
62+
/* Margin units */
63+
.m-0 {
64+
margin: var(--spacer-0) !important;
65+
}
66+
.m-1 {
67+
margin: var(--spacer-1) !important;
68+
}
69+
.m-2 {
70+
margin: var(--spacer-2) !important;
71+
}
72+
.m-3 {
73+
margin: var(--spacer-3) !important;
74+
}
75+
.m-4 {
76+
margin: var(--spacer-4) !important;
77+
}
78+
.m-5 {
79+
margin: var(--spacer-5) !important;
80+
}
81+
.m-6 {
82+
margin: var(--spacer-6) !important;
83+
}

‎src/index.html‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,29 @@
88
<link href="./index.css" rel="stylesheet">
99
</head>
1010
<body>
11-
<js-button>Button</js-button>
11+
<div class="container">
12+
<h1>Button Group</h1>
13+
<wc-button-group>
14+
<wc-button name="save">Save</wc-button>
15+
<wc-button name="retry">Retry</wc-button>
16+
<wc-button name="cancel">Cancel</wc-button>
17+
</wc-button-group>
18+
</div>
19+
20+
<div class="container">
21+
<h1>Close Button</h1>
22+
<div style="position:relative; border: 1px solid red; margin: 0 100px 0 100px; padding: 5px;">
23+
<wc-close></wc-close>
24+
<p>Here is some content within a container</p>
25+
</div>
26+
</div>
27+
28+
<div class="container">
29+
<h1>Icon</h1>
30+
<wc-icon name="0-circle-fill"></wc-icon>
31+
</div>
32+
</div>
33+
34+
1235
</body>
1336
</html>

0 commit comments

Comments
 (0)