Updated code for new organization

config/eslint.config.mjs

@@ -19,4 +19,4 @@ export default [
     },
   },
   ...compat.extends('airbnb-base'),
-];
+];

src/component/layout/RowElement.js

@@ -1,5 +1,5 @@
 
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 
 /**
  * A row element which allows you to create a row with cells, either populating
@@ -10,7 +10,7 @@ import { LitElement, html, css } from 'lit';
  * Example:
  * 
  * ```html
- * <wc-row ltr>
+ * <wc-row>
  *  <wc-row-6>
  *      <!-- content goes here -->
  *  </wc-row-6>
@@ -22,13 +22,206 @@ export class RowElement extends LitElement {
 
   constructor() {
     super();
+    this.backgroundColor = '';
+  }
+  static get properties() {
+    return {
+      /** 
+       * The badge background color. One of the following: primary, secondary, success, warning, danger, light, dark
+       * @type {String}
+       * @memberof BadgeElement
+       */
+      backgroundColor: { type: String },
+    };
   }
   static get styles() {
-    return css``;
+    return css`
+      slot {
+          position: relative;
+          display: flex;
+          flex: 0 1 auto;
+          flex-direction: row;
+          flex-wrap: wrap;
+      }
+      .bg-color-primary {
+        background-color: var(--primary-color);
+        color: var(--light-color);
+      }
+      .bg-color-secondary {
+        background-color: var(--secondary-color);
+        color: var(--dark-color);
+      }
+      .bg-color-success {
+        background-color: var(--success-color);
+        color: var(--light-color);
+      }
+      .bg-color-warning {
+        background-color: var(--warning-color);
+        color: var(--light-color);
+      }
+      .bg-color-error {
+        background-color: var(--error-color);
+        color: var(--light-color);
+      }
+      .bg-color-light {
+        background-color: var(--light-color);
+        color: var(--dark-color);
+      }
+      .bg-color-dark {
+        background-color: var(--dark-color);
+        color: var(--light-color);
+      }
+    `;
   }
   render() {
     return html`
-        <div class="row"><slot></slot></div>
+        <slot class="bg-color-${this.backgroundColor}"></slot>
     `;
   }
 }
+
+export class RowCellElement extends LitElement {
+  static localName = 'wc-row-cell';
+
+  constructor() {
+    super();
+    this.width = 0;
+  }
+  static get properties() {
+    return {
+      /** 
+       * The width of the cell, in a 12 column grid
+       * @type {Number}
+       * @memberof RowCellElement
+       */
+      width: { type: Number },
+    };
+  }
+  get flexBasis() {
+    if (this.width <= 12) {
+      return `${this.width * (100 / 12)}%`;
+    }
+    return 'none';
+  }
+
+  get display() {
+    return this.width ? 'block' : 'none';
+  }
+  render() {
+    this.style.maxWidth = `${this.flexBasis}`;
+    this.style.flexBasis = `${this.flexBasis}`;
+    this.style.display = `${this.display}`;
+    return html`
+        <slot></slot>
+    `;
+  }
+}
+
+export class RowCell1Element extends RowCellElement {
+  static localName = 'wc-row-1';
+
+  constructor() {
+    super();
+    this.width = 1;
+  }
+}
+
+export class RowCell2Element extends RowCellElement {
+  static localName = 'wc-row-2';
+
+  constructor() {
+    super();
+    this.width = 2;
+  }
+}
+
+export class RowCell3Element extends RowCellElement {
+  static localName = 'wc-row-3';
+
+  constructor() {
+    super();
+    this.width = 3;
+  }
+}
+
+export class RowCell4Element extends RowCellElement {
+  static localName = 'wc-row-4';
+
+  constructor() {
+    super();
+    this.width = 4;
+  }
+}
+
+export class RowCell5Element extends RowCellElement {
+  static localName = 'wc-row-5';
+
+  constructor() {
+    super();
+    this.width = 5;
+  }
+}
+
+export class RowCell6Element extends RowCellElement {
+  static localName = 'wc-row-6';
+
+  constructor() {
+    super();
+    this.width = 6;
+  }
+}
+
+export class RowCell7Element extends RowCellElement {
+  static localName = 'wc-row-7';
+
+  constructor() {
+    super();
+    this.width = 7;
+  }
+}
+
+export class RowCell8Element extends RowCellElement {
+  static localName = 'wc-row-8';
+
+  constructor() {
+    super();
+    this.width = 8;
+  }
+}
+
+export class RowCell9Element extends RowCellElement {
+  static localName = 'wc-row-9';
+
+  constructor() {
+    super();
+    this.width = 9;
+  }
+}
+
+export class RowCell10Element extends RowCellElement {
+  static localName = 'wc-row-10';
+
+  constructor() {
+    super();
+    this.width = 10;
+  }
+}
+
+export class RowCell11Element extends RowCellElement {
+  static localName = 'wc-row-11';
+
+  constructor() {
+    super();
+    this.width = 11;
+  }
+}
+
+
+export class RowCell12Element extends RowCellElement {
+  static localName = 'wc-row-12';
+
+  constructor() {
+    super();
+    this.width = 12;
+  }
+}

src/component/nav/NavBarElement.js

@@ -20,7 +20,6 @@ export class NavBarElement extends LitElement {
             disabled: { type: Boolean },
         };
     }
-
     static get styles() {
         return css`
         nav {            

src/css/document.css

@@ -82,3 +82,4 @@ div.container {
 .m-6 {
     margin: var(--spacer-6) !important;
 }
+

src/index.html

@@ -5,8 +5,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Storybook</title>
-    <script type="module" src="./index.js" defer></script>
-    <link href="./index.css" rel="stylesheet">
+    <script type="module" src="index.js" defer></script>
+    <link href="index.css" rel="stylesheet">
 </head>
 
 <body>
@@ -105,30 +105,37 @@ <h1>Modal</h1>
     <div class="container">
         <form method="POST" action="#" onSubmit="console.log('submit'); return false;">
             <h1>Form</h1>
-            <wc-form-input name="test" disabled placeholder="Generic input box without a label"></wc-form-input>
-            <wc-spacer></wc-spacer>
-            <wc-form-text name="name" placeholder="Name" autocomplete required minlength="3">Name</wc-form-text>
-            <wc-spacer></wc-spacer>
-            <wc-form-text name="email" placeholder="Email" pattern="^\S+@\S+$" description="Email Address (optional)" autocomplete minlength="3">Email Address</wc-form-text>
-            <wc-spacer></wc-spacer>
-            <wc-form-text name="address" placeholder="Address" labelabove rows="4" description="Shipping address (optional)">Address</wc-form-text>
-            <wc-spacer></wc-spacer>
-            <wc-form-date name="date" placeholder="Date of Birth" labelabove>Date of Birth</wc-form-date>
-            <wc-spacer></wc-spacer>
-            <wc-button-group style="border: 1px solid red">
-                <wc-button name="save" submit default>Save</wc-button>
-                <wc-button name="save" submit>Cancel</wc-button>
-            </wc-button-group>
+            <wc-row backgroundColor="light">
+                <wc-row-6>
+                    <wc-form-text name="name" placeholder="Name" autocomplete required minlength="3">Name</wc-form-text>
+                    <wc-spacer></wc-spacer>
+                    <wc-form-text name="email" placeholder="Email" pattern="^\S+@\S+$" description="Email Address (optional)" autocomplete minlength="3">Email Address</wc-form-text>
+                    <wc-spacer></wc-spacer>
+                    <wc-form-date name="date" placeholder="Date of Birth" labelabove>Date of Birth</wc-form-date>
+                </wc-row-6>
+                <wc-row-6>
+                    <wc-form-text name="address" placeholder="Address" labelabove rows="6" description="Shipping address (optional)">Address</wc-form-text>
+                </wc-row-6>
+            </wc-row>
+            <wc-row backgroundColor="light">
+                <wc-row-12>                    
+                    <wc-spacer></wc-spacer>
+                    <wc-button-group>
+                        <wc-button name="save" submit default>Save</wc-button>
+                        <wc-button name="save" submit>Cancel</wc-button>
+                    </wc-button-group>        
+                    <wc-spacer></wc-spacer>
+                </wc-row-12>
+            </wc-row>
         </form>
     </div>
     <hr>
 
-
     <div class="container">
         <h1>Row Layout</h1>
 
         <h3>Two Columns</h3>
-        <wc-row> <!-- 1, 2, 3, 4, 6, 9 and 12 are defined -->
+        <wc-row backgroundColor="light">
             <wc-row-6>
                 Left Hand Side
             </wc-row-6>
@@ -180,13 +187,13 @@ <h2>Six Columns</h2>
             <wc-row-2>
                 Col 3
             </wc-row-2>
-            <wc-row-3>
+            <wc-row-2>
                 Col 4
             </wc-row-2>
-            <wc-row-3>
+            <wc-row-2>
                 Col 5
             </wc-row-2>
-            <wc-row-3>
+            <wc-row-2>
                 Col 6
             </wc-row-2>
         </wc-row>

src/index.js

@@ -11,12 +11,11 @@ import './component/button/ButtonGroupElement';
 import './component/button/CloseButtonElement';
 
 // Badges
-import './component/badge/BadgeElement';
+import { BadgeElement } from './component/badge/BadgeElement';
 import './component/badge/BadgeGroupElement';
 
 customElements.define(BadgeElement.localName, BadgeElement); // wc-badge
 
-
 // Icons
 import './component/icon/IconElement';
 
@@ -34,18 +33,29 @@ import './component/form/FormTextElement';
 import './component/form/FormDateElement';
 
 // Layout Elements
-import './component/layout/SpacerElement.js';
-import './component/layout/RowElement.js';
+import { SpacerElement } from './component/layout/SpacerElement';
+import { RowElement, RowCell1Element, RowCell2Element,RowCell3Element,RowCell4Element,RowCell5Element,RowCell6Element,RowCell7Element,RowCell8Element,RowCell9Element,RowCell10Element,RowCell11Element,RowCell12Element } from './component/layout/RowElement';
 
 customElements.define(SpacerElement.localName, SpacerElement); // wc-spacer
 customElements.define(RowElement.localName, RowElement); // wc-row
+customElements.define(RowCell1Element.localName, RowCell1Element); // wc-row-1
+customElements.define(RowCell2Element.localName, RowCell2Element); // wc-row-2
+customElements.define(RowCell3Element.localName, RowCell3Element); // wc-row-3
+customElements.define(RowCell4Element.localName, RowCell4Element); // wc-row-4
+customElements.define(RowCell5Element.localName, RowCell5Element); // wc-row-5
+customElements.define(RowCell6Element.localName, RowCell6Element); // wc-row-6
+customElements.define(RowCell7Element.localName, RowCell7Element); // wc-row-7
+customElements.define(RowCell8Element.localName, RowCell8Element); // wc-row-8
+customElements.define(RowCell9Element.localName, RowCell9Element); // wc-row-9
+customElements.define(RowCell10Element.localName, RowCell10Element); // wc-row-10
+customElements.define(RowCell11Element.localName, RowCell11Element); // wc-row-11
+customElements.define(RowCell12Element.localName, RowCell12Element); // wc-row-12
 
 // CSS
 import './css/core.css';
 import './css/document.css';
 
 // Other
 import './esbuild.js';
-import './test.js';import { BadgeElement } from './component/badge/BadgeElement';
-import { SpacerElement } from './component/layout/SpacerElement.js';
+import './test.js';