Skip to content

Commit 53044d8

Browse files
djthorpedjthorpe
committed
Added navbar and modal element
1 parent 15dc16f commit 53044d8

File tree

13 files changed

+465
-87
lines changed

13 files changed

+465
-87
lines changed

‎src/component/badge/BadgeElement.js‎

Lines changed: 55 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,33 +9,45 @@ export class BadgeElement extends LitElement {
99
super();
1010
// Default properties
1111
this.transform = 'none';
12+
this.backgroundColor = 'primary';
1213
}
1314

1415
static get properties() {
1516
return {
1617
/**
1718
* The text transform, none, uppercase, lowercase,capitalize
1819
* @type {String}
20+
* @memberof BadgeElement
1921
*/
20-
transform: { type: String },
22+
transform: { type: String },
23+
24+
/**
25+
* The badge background color. One of the following: primary, secondary, success, warning, danger, light, dark
26+
* @type {String}
27+
* @memberof BadgeElement
28+
*/
29+
backgroundColor: { type: String },
2130
};
2231
}
2332

2433
static get styles() {
2534
return css`
26-
:host {
27-
display: inline-block;
28-
background-color: var(--badge-background-color);
29-
color: var(--badge-color);
30-
padding: var(--badge-padding-y) var(--badge-padding-x);
31-
font-size: var(--badge-font-size);
32-
font-weight: var(--badge-font-weight);
33-
border-radius: var(--badge-border-radius);
34-
line-height: 1;
35-
text-align: center;
36-
white-space: nowrap;
37-
vertical-align: baseline;
38-
cursor: default;
35+
span {
36+
display: inline-block;
37+
background-color: var(--badge-background-color);
38+
color: var(--badge-color);
39+
padding: var(--badge-padding-y) var(--badge-padding-x);
40+
font-size: var(--badge-font-size);
41+
font-weight: var(--badge-font-weight);
42+
border-top-left-radius: var(--badge-border-radius-left);
43+
border-bottom-left-radius: var(--badge-border-radius-left);
44+
border-top-right-radius: var(--badge-border-radius-right);
45+
border-bottom-right-radius: var(--badge-border-radius-right);
46+
line-height: 1;
47+
text-align: center;
48+
white-space: nowrap;
49+
vertical-align: baseline;
50+
cursor: default;
3951
}
4052
.text-transform-capitalize {
4153
text-transform: capitalize;
@@ -49,12 +61,40 @@ export class BadgeElement extends LitElement {
4961
.text-transform-none {
5062
text-transform: none;
5163
}
64+
.bg-color-primary {
65+
background-color: var(--primary-color);
66+
color: var(--light-color);
67+
}
68+
.bg-color-secondary {
69+
background-color: var(--secondary-color);
70+
color: var(--dark-color);
71+
}
72+
.bg-color-success {
73+
background-color: var(--success-color);
74+
color: var(--light-color);
75+
}
76+
.bg-color-warning {
77+
background-color: var(--warning-color);
78+
color: var(--light-color);
79+
}
80+
.bg-color-error {
81+
background-color: var(--error-color);
82+
color: var(--light-color);
83+
}
84+
.bg-color-light {
85+
background-color: var(--light-color);
86+
color: var(--dark-color);
87+
}
88+
.bg-color-dark {
89+
background-color: var(--dark-color);
90+
color: var(--light-color);
91+
}
5292
`;
5393
}
5494

5595
render() {
5696
return html`
57-
<slot class="${this.transform ? `text-transform-${this.transform}` : ''}"></slot>
97+
<span class="bg-color-${this.backgroundColor}"><slot class="text-transform-${this.transform}"}></slot></span>
5898
`;
5999
}
60100
}

‎src/component/badge/BadgeGroupElement.js‎

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

‎src/component/button/ButtonElement.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,24 +39,30 @@ export class ButtonElement extends LitElement {
3939
.button {
4040
display: inline-block;
4141
position: relative;
42-
color: var(--button-color);
43-
background-color: var(--button-background-color);
44-
font-weight: var(--button-font-weight);
45-
font-size: var(--button-font-size);
46-
border: var(--button-border) solid var(--button-border-color);
42+
4743
margin: none;
4844
padding: var(--button-padding-y) var(--button-padding-x);
45+
border: var(--button-border) solid var(--button-border-color);
4946
border-top-left-radius: var(--button-border-radius-left);
5047
border-bottom-left-radius: var(--button-border-radius-left);
5148
border-top-right-radius: var(--button-border-radius-right);
52-
border-bottom-right-radius: var(--button-border-radius-right);
49+
border-bottom-right-radius: var(--button-border-radius-right);
50+
51+
color: var(--button-color);
52+
background-color: var(--button-background-color);
53+
font-weight: var(--button-font-weight);
54+
font-size: var(--button-font-size);
55+
56+
cursor: pointer;
57+
}
58+
a {
5359
text-decoration: none;
5460
}
5561
.button:active {
5662
top: var(--button-offset-active);
5763
left: var(--button-offset-active);
5864
color: var(--button-color-active);
59-
background-color: var(--button-background-color-active);
65+
background-color: var(--button-background-color-active) !important;
6066
font-weight: var(--button-font-weight-active);
6167
}
6268
.button:hover {

‎src/component/button/CloseButtonElement.js‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ import Event from '../../core/Event';
66
* CloseButtonElement
77
*/
88
export class CloseButtonElement extends LitElement {
9+
constructor() {
10+
super();
11+
// Default properties
12+
this.name = 'wc-close';
13+
this.disabled = false;
14+
}
915
static get properties() {
1016
return {
1117
/**
@@ -21,7 +27,6 @@ export class CloseButtonElement extends LitElement {
2127
disabled: { type: Boolean },
2228
};
2329
}
24-
2530
static get styles() {
2631
return css`
2732
button {
@@ -31,12 +36,7 @@ export class CloseButtonElement extends LitElement {
3136
padding: 0;
3237
border: 0;
3338
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);
39+
cursor: pointer;
4040
}
4141
button wc-icon {
4242
color: var(--button-close-color);
@@ -57,22 +57,13 @@ export class CloseButtonElement extends LitElement {
5757
}
5858
`;
5959
}
60-
6160
render() {
6261
return html`
63-
<button role="button" @click=${this.onClick}>
64-
<div><wc-icon name="x-circle"></wc-icon></div>
62+
<button role="button" ?disabled="${this.disabled}" @click=${this.onClick}>
63+
<wc-icon name="x-circle"></wc-icon>
6564
</button>
6665
`;
6766
}
68-
69-
constructor() {
70-
super();
71-
// Default properties
72-
this.name = '';
73-
this.disabled = false;
74-
}
75-
7667
onClick() {
7768
this.dispatchEvent(new CustomEvent(
7869
Event.EVENT_CLICK, {
@@ -84,4 +75,4 @@ export class CloseButtonElement extends LitElement {
8475
}
8576
}
8677

87-
customElements.define('wc-close', CloseButtonElement);
78+
customElements.define('wc-close', CloseButtonElement);

‎src/component/icon/IconElement.js‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,42 @@ export class IconElement extends LitElement {
1313
* @type {String}
1414
*/
1515
name: { type: String },
16+
/**
17+
* Size of the icon to display, either default, small, medium, large, xlarge
18+
* @type {String}
19+
*/
20+
size: { type: String },
1621
};
1722
}
1823

1924
static get styles() {
2025
return css`
21-
svg {
26+
.size-default {
27+
position: relative;
28+
width: var(--icon-size-default);
29+
height: var(--icon-size-default);
30+
}
31+
.size-small {
32+
position: relative;
33+
width: var(--icon-size-small);
34+
height: var(--icon-size-small);
35+
}
36+
.size-medium {
37+
position: relative;
38+
width: var(--icon-size-medium);
39+
height: var(--icon-size-medium);
40+
}
41+
.size-large {
42+
position: relative;
43+
width: var(--icon-size-large);
44+
height: var(--icon-size-large);
45+
}
46+
.size-xlarge {
47+
position: relative;
48+
width: var(--icon-size-xlarge);
49+
height: var(--icon-size-xlarge);
50+
}
51+
svg {
2252
width: 100%;
2353
height: 100%;
2454
fill: currentColor;
@@ -27,13 +57,14 @@ export class IconElement extends LitElement {
2757
}
2858

2959
render() {
30-
return svg`<svg><use href="${icons}#${this.name}"/></svg>`;
60+
return svg`<div class="size-${this.size}"><svg><use href="${icons}#${this.name}"/></svg></div>`;
3161
}
3262

3363
constructor() {
3464
super();
3565
// Default properties
3666
this.name = 'bootstrap-reboot';
67+
this.size = 'default';
3768
}
3869
}
3970

0 commit comments

Comments
 (0)