Skip to content

Commit ff6a34e

Browse files
djthorpedjthorpe
authored
Merge pull request #11 from mutablelogic/dev
Updated code for new organization
2 parents 713d87a + 3fc9e7b commit ff6a34e

File tree

7 files changed

+243
-42
lines changed

7 files changed

+243
-42
lines changed

‎.eslintrc.yml

-9
This file was deleted.

‎config/eslint.config.mjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,4 @@ export default [
1919
},
2020
},
2121
...compat.extends('airbnb-base'),
22-
];
22+
];

‎src/component/layout/RowElement.js

+197-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import { LitElement, html, css } from 'lit';
2+
import { LitElement, html, css, nothing } from 'lit';
33

44
/**
55
* A row element which allows you to create a row with cells, either populating
@@ -10,7 +10,7 @@ import { LitElement, html, css } from 'lit';
1010
* Example:
1111
*
1212
* ```html
13-
* <wc-row ltr>
13+
* <wc-row>
1414
* <wc-row-6>
1515
* <!-- content goes here -->
1616
* </wc-row-6>
@@ -22,13 +22,206 @@ export class RowElement extends LitElement {
2222

2323
constructor() {
2424
super();
25+
this.backgroundColor = '';
26+
}
27+
static get properties() {
28+
return {
29+
/**
30+
* The badge background color. One of the following: primary, secondary, success, warning, danger, light, dark
31+
* @type {String}
32+
* @memberof BadgeElement
33+
*/
34+
backgroundColor: { type: String },
35+
};
2536
}
2637
static get styles() {
27-
return css``;
38+
return css`
39+
slot {
40+
position: relative;
41+
display: flex;
42+
flex: 0 1 auto;
43+
flex-direction: row;
44+
flex-wrap: wrap;
45+
}
46+
.bg-color-primary {
47+
background-color: var(--primary-color);
48+
color: var(--light-color);
49+
}
50+
.bg-color-secondary {
51+
background-color: var(--secondary-color);
52+
color: var(--dark-color);
53+
}
54+
.bg-color-success {
55+
background-color: var(--success-color);
56+
color: var(--light-color);
57+
}
58+
.bg-color-warning {
59+
background-color: var(--warning-color);
60+
color: var(--light-color);
61+
}
62+
.bg-color-error {
63+
background-color: var(--error-color);
64+
color: var(--light-color);
65+
}
66+
.bg-color-light {
67+
background-color: var(--light-color);
68+
color: var(--dark-color);
69+
}
70+
.bg-color-dark {
71+
background-color: var(--dark-color);
72+
color: var(--light-color);
73+
}
74+
`;
2875
}
2976
render() {
3077
return html`
31-
<div class="row"><slot></slot></div>
78+
<slot class="bg-color-${this.backgroundColor}"></slot>
3279
`;
3380
}
3481
}
82+
83+
export class RowCellElement extends LitElement {
84+
static localName = 'wc-row-cell';
85+
86+
constructor() {
87+
super();
88+
this.width = 0;
89+
}
90+
static get properties() {
91+
return {
92+
/**
93+
* The width of the cell, in a 12 column grid
94+
* @type {Number}
95+
* @memberof RowCellElement
96+
*/
97+
width: { type: Number },
98+
};
99+
}
100+
get flexBasis() {
101+
if (this.width <= 12) {
102+
return `${this.width * (100 / 12)}%`;
103+
}
104+
return 'none';
105+
}
106+
107+
get display() {
108+
return this.width ? 'block' : 'none';
109+
}
110+
render() {
111+
this.style.maxWidth = `${this.flexBasis}`;
112+
this.style.flexBasis = `${this.flexBasis}`;
113+
this.style.display = `${this.display}`;
114+
return html`
115+
<slot></slot>
116+
`;
117+
}
118+
}
119+
120+
export class RowCell1Element extends RowCellElement {
121+
static localName = 'wc-row-1';
122+
123+
constructor() {
124+
super();
125+
this.width = 1;
126+
}
127+
}
128+
129+
export class RowCell2Element extends RowCellElement {
130+
static localName = 'wc-row-2';
131+
132+
constructor() {
133+
super();
134+
this.width = 2;
135+
}
136+
}
137+
138+
export class RowCell3Element extends RowCellElement {
139+
static localName = 'wc-row-3';
140+
141+
constructor() {
142+
super();
143+
this.width = 3;
144+
}
145+
}
146+
147+
export class RowCell4Element extends RowCellElement {
148+
static localName = 'wc-row-4';
149+
150+
constructor() {
151+
super();
152+
this.width = 4;
153+
}
154+
}
155+
156+
export class RowCell5Element extends RowCellElement {
157+
static localName = 'wc-row-5';
158+
159+
constructor() {
160+
super();
161+
this.width = 5;
162+
}
163+
}
164+
165+
export class RowCell6Element extends RowCellElement {
166+
static localName = 'wc-row-6';
167+
168+
constructor() {
169+
super();
170+
this.width = 6;
171+
}
172+
}
173+
174+
export class RowCell7Element extends RowCellElement {
175+
static localName = 'wc-row-7';
176+
177+
constructor() {
178+
super();
179+
this.width = 7;
180+
}
181+
}
182+
183+
export class RowCell8Element extends RowCellElement {
184+
static localName = 'wc-row-8';
185+
186+
constructor() {
187+
super();
188+
this.width = 8;
189+
}
190+
}
191+
192+
export class RowCell9Element extends RowCellElement {
193+
static localName = 'wc-row-9';
194+
195+
constructor() {
196+
super();
197+
this.width = 9;
198+
}
199+
}
200+
201+
export class RowCell10Element extends RowCellElement {
202+
static localName = 'wc-row-10';
203+
204+
constructor() {
205+
super();
206+
this.width = 10;
207+
}
208+
}
209+
210+
export class RowCell11Element extends RowCellElement {
211+
static localName = 'wc-row-11';
212+
213+
constructor() {
214+
super();
215+
this.width = 11;
216+
}
217+
}
218+
219+
220+
export class RowCell12Element extends RowCellElement {
221+
static localName = 'wc-row-12';
222+
223+
constructor() {
224+
super();
225+
this.width = 12;
226+
}
227+
}

‎src/component/nav/NavBarElement.js

-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ export class NavBarElement extends LitElement {
2020
disabled: { type: Boolean },
2121
};
2222
}
23-
2423
static get styles() {
2524
return css`
2625
nav {

‎src/css/document.css

+1
Original file line numberDiff line numberDiff line change
@@ -82,3 +82,4 @@ div.container {
8282
.m-6 {
8383
margin: var(--spacer-6) !important;
8484
}
85+

‎src/index.html

+28-21
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Storybook</title>
8-
<script type="module" src="./index.js" defer></script>
9-
<link href="./index.css" rel="stylesheet">
8+
<script type="module" src="index.js" defer></script>
9+
<link href="index.css" rel="stylesheet">
1010
</head>
1111

1212
<body>
@@ -105,30 +105,37 @@ <h1>Modal</h1>
105105
<div class="container">
106106
<form method="POST" action="#" onSubmit="console.log('submit'); return false;">
107107
<h1>Form</h1>
108-
<wc-form-input name="test" disabled placeholder="Generic input box without a label"></wc-form-input>
109-
<wc-spacer></wc-spacer>
110-
<wc-form-text name="name" placeholder="Name" autocomplete required minlength="3">Name</wc-form-text>
111-
<wc-spacer></wc-spacer>
112-
<wc-form-text name="email" placeholder="Email" pattern="^\S+@\S+$" description="Email Address (optional)" autocomplete minlength="3">Email Address</wc-form-text>
113-
<wc-spacer></wc-spacer>
114-
<wc-form-text name="address" placeholder="Address" labelabove rows="4" description="Shipping address (optional)">Address</wc-form-text>
115-
<wc-spacer></wc-spacer>
116-
<wc-form-date name="date" placeholder="Date of Birth" labelabove>Date of Birth</wc-form-date>
117-
<wc-spacer></wc-spacer>
118-
<wc-button-group style="border: 1px solid red">
119-
<wc-button name="save" submit default>Save</wc-button>
120-
<wc-button name="save" submit>Cancel</wc-button>
121-
</wc-button-group>
108+
<wc-row backgroundColor="light">
109+
<wc-row-6>
110+
<wc-form-text name="name" placeholder="Name" autocomplete required minlength="3">Name</wc-form-text>
111+
<wc-spacer></wc-spacer>
112+
<wc-form-text name="email" placeholder="Email" pattern="^\S+@\S+$" description="Email Address (optional)" autocomplete minlength="3">Email Address</wc-form-text>
113+
<wc-spacer></wc-spacer>
114+
<wc-form-date name="date" placeholder="Date of Birth" labelabove>Date of Birth</wc-form-date>
115+
</wc-row-6>
116+
<wc-row-6>
117+
<wc-form-text name="address" placeholder="Address" labelabove rows="6" description="Shipping address (optional)">Address</wc-form-text>
118+
</wc-row-6>
119+
</wc-row>
120+
<wc-row backgroundColor="light">
121+
<wc-row-12>
122+
<wc-spacer></wc-spacer>
123+
<wc-button-group>
124+
<wc-button name="save" submit default>Save</wc-button>
125+
<wc-button name="save" submit>Cancel</wc-button>
126+
</wc-button-group>
127+
<wc-spacer></wc-spacer>
128+
</wc-row-12>
129+
</wc-row>
122130
</form>
123131
</div>
124132
<hr>
125133

126-
127134
<div class="container">
128135
<h1>Row Layout</h1>
129136

130137
<h3>Two Columns</h3>
131-
<wc-row> <!-- 1, 2, 3, 4, 6, 9 and 12 are defined -->
138+
<wc-row backgroundColor="light">
132139
<wc-row-6>
133140
Left Hand Side
134141
</wc-row-6>
@@ -180,13 +187,13 @@ <h2>Six Columns</h2>
180187
<wc-row-2>
181188
Col 3
182189
</wc-row-2>
183-
<wc-row-3>
190+
<wc-row-2>
184191
Col 4
185192
</wc-row-2>
186-
<wc-row-3>
193+
<wc-row-2>
187194
Col 5
188195
</wc-row-2>
189-
<wc-row-3>
196+
<wc-row-2>
190197
Col 6
191198
</wc-row-2>
192199
</wc-row>

‎src/index.js

+16-6
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,11 @@ import './component/button/ButtonGroupElement';
1111
import './component/button/CloseButtonElement';
1212

1313
// Badges
14-
import './component/badge/BadgeElement';
14+
import { BadgeElement } from './component/badge/BadgeElement';
1515
import './component/badge/BadgeGroupElement';
1616

1717
customElements.define(BadgeElement.localName, BadgeElement); // wc-badge
1818

19-
2019
// Icons
2120
import './component/icon/IconElement';
2221

@@ -34,18 +33,29 @@ import './component/form/FormTextElement';
3433
import './component/form/FormDateElement';
3534

3635
// Layout Elements
37-
import './component/layout/SpacerElement.js';
38-
import './component/layout/RowElement.js';
36+
import { SpacerElement } from './component/layout/SpacerElement';
37+
import { RowElement, RowCell1Element, RowCell2Element,RowCell3Element,RowCell4Element,RowCell5Element,RowCell6Element,RowCell7Element,RowCell8Element,RowCell9Element,RowCell10Element,RowCell11Element,RowCell12Element } from './component/layout/RowElement';
3938

4039
customElements.define(SpacerElement.localName, SpacerElement); // wc-spacer
4140
customElements.define(RowElement.localName, RowElement); // wc-row
41+
customElements.define(RowCell1Element.localName, RowCell1Element); // wc-row-1
42+
customElements.define(RowCell2Element.localName, RowCell2Element); // wc-row-2
43+
customElements.define(RowCell3Element.localName, RowCell3Element); // wc-row-3
44+
customElements.define(RowCell4Element.localName, RowCell4Element); // wc-row-4
45+
customElements.define(RowCell5Element.localName, RowCell5Element); // wc-row-5
46+
customElements.define(RowCell6Element.localName, RowCell6Element); // wc-row-6
47+
customElements.define(RowCell7Element.localName, RowCell7Element); // wc-row-7
48+
customElements.define(RowCell8Element.localName, RowCell8Element); // wc-row-8
49+
customElements.define(RowCell9Element.localName, RowCell9Element); // wc-row-9
50+
customElements.define(RowCell10Element.localName, RowCell10Element); // wc-row-10
51+
customElements.define(RowCell11Element.localName, RowCell11Element); // wc-row-11
52+
customElements.define(RowCell12Element.localName, RowCell12Element); // wc-row-12
4253

4354
// CSS
4455
import './css/core.css';
4556
import './css/document.css';
4657

4758
// Other
4859
import './esbuild.js';
49-
import './test.js';import { BadgeElement } from './component/badge/BadgeElement';
50-
import { SpacerElement } from './component/layout/SpacerElement.js';
60+
import './test.js';
5161

0 commit comments

Comments
 (0)