Updates

Author: djthorpe

src/index.html

@@ -78,8 +78,19 @@ <h1>Tab & View Group</h1>
             <wc-tab name="tab-icons">Icons</wc-tab>
           </wc-tab-group>
           <wc-view-group id="view-group" backgroundColor="light">
-            <wc-view name="tab-tables">
-              TABLES CONTENT
+            <wc-view name="tab-tables" selected>
+              <div class="container">
+                <h1>Tables</h1>
+        
+                <!-- Table of data -->
+                <wc-table id="table" backgroundColor="black" stripedRows>Table of Fruit</wc-table>
+                <script>
+                  document.getElementById('table').data = [
+                    { fruit: 'apple', color: 'green', weight: '100gr' },
+                    { fruit: 'banana', color: 'yellow', weight: '140gr' }
+                  ];
+                </script>
+              </div>
             </wc-view>
             <wc-view name="tab-buttons">
               BUTTONS CONTENT
@@ -95,20 +106,6 @@ <h1>Tab & View Group</h1>
       </div>
       <hr>
 
-      <div class="container">
-        <h1>Tables</h1>
-
-        <!-- Table of data -->
-        <wc-table id="table" backgroundColor="black" stripedRows>Table of Fruit</wc-table>
-        <script>
-          document.getElementById('table').data = [
-            { fruit: 'apple', color: 'green', weight: '100gr' },
-            { fruit: 'banana', color: 'yellow', weight: '140gr' }
-          ];
-        </script>
-      </div>
-      <hr>
-
       <div class="container">
         <h1>Buttons</h1>
 

src/nav/ViewGroupElement.js

@@ -21,17 +21,62 @@ export class ViewGroupElement extends LitElement {
     return 'wc-view-group';
   }
 
+  constructor() {
+    super();
+    this.backgroundColor = 'light';
+  }
+
   static get properties() {
-    return {};
+    return {
+      /**
+       * Background color of the view group, one of light or  dark
+       *
+       * @type {String}
+       * @default light
+       * @memberof TabGroupElement
+       */
+      backgroundColor: { type: String },
+    };
   }
 
   static get styles() {
-    return css``;
+    return css`
+      div {
+        position: relative;
+        height: 100vh;
+      }
+      ::slotted(wc-view) {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        transition: visibility 0.2s, opacity 0.2s;
+      }
+      ::slotted(wc-view[selected]) {
+        opacity: 1;
+        flex: 1 0;
+      }
+      ::slotted(wc-view:not([selected])) {
+        opacity: 0;
+        flex: 0 0;
+      }
+
+      /* light theme */
+      div.bg-color-light {
+        border-bottom: 1px solid var(--grey-40-color);
+        border-left: 1px solid var(--grey-40-color);
+        border-right: 1px solid var(--grey-40-color);
+      }
+    `;
   }
 
   // eslint-disable-next-line class-methods-use-this
   get className() {
     const classes = [];
+    if (this.backgroundColor) {
+      classes.push(`bg-color-${this.backgroundColor}`);
+    }
     return classes.join(' ');
   }
 
@@ -41,8 +86,23 @@ export class ViewGroupElement extends LitElement {
     `;
   }
 
+  /**
+   * Select a view by name, and deselect all other view
+   *
+   * @param {String} name: The name of the tab to select
+   * @returns The node that was selected, or null
+   */
   select(name) {
-    // TODO
-    console.log('select', this, name);
+    const views = this.querySelectorAll('wc-view');
+    let selectedNode = null;
+    views.forEach((view) => {
+      if (view.name === name && !view.selected) {
+        view.setAttribute('selected', 'selected');
+        selectedNode = view;
+      } else if (view.name !== name && view.selected) {
+        view.removeAttribute('selected');
+      }
+    });
+    return selectedNode;
   }
 }