Added view and view group

Author: djthorpe

src/nav/ViewElement.js

@@ -0,0 +1,63 @@
+import {
+  LitElement, html, css, nothing,
+} from 'lit';
+
+/**
+ * ViewElement
+ * This class is used to create a view, within a view group, which
+ * displays one view at a time. In general you should use a
+ * TabGroupElement as a controller for this view group to switch
+ * between visible views.
+ *
+ * @example
+ * <wc-view-group>
+ *   <wc-view name="view1" selected>View1</wc-tab>
+ *   <wc-view name="view2">View2</wc-tab>
+ *   <wc-view name="view3">View3</wc-tab>
+ *   <wc-view name="view4">View4</wc-tab>
+ * </wc-view-group>
+ */
+export class ViewElement extends LitElement {
+  static get localName() {
+    return 'wc-view';
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Whether the tab is selected. Only one tab within a group should
+       * be selected at a time.
+       * @type {Boolean}
+       * @default false
+       * @memberof TabElement
+       */
+      selected: { type: Boolean },
+
+      /**
+       * The name of the tab, for click events.
+       * @type {String}
+       * @default ''
+       * @memberof TabElement
+       */
+      name: { type: String },
+    };
+  }
+
+  static get styles() {
+    return css``;
+  }
+
+  get className() {
+    const classes = [];
+    if (this.selected) {
+      classes.push('selected');
+    }
+    return classes.join(' ');
+  }
+
+  render() {
+    return html`
+          <div class=${this.className || nothing}><slot></slot></div>
+        `;
+  }
+}

src/nav/ViewGroupElement.js

@@ -0,0 +1,63 @@
+import {
+  LitElement, html, css, nothing,
+} from 'lit';
+
+/**
+ * ViewGroupElement
+ * This class is used to create a view, within a view group, which
+ * displays one view at a time. In general you should use a
+ * TabGroupElement as a controller for this view group to switch
+ * between visible views.
+ *
+ * @example
+ * <wc-view-group>
+ *   <wc-view name="view1" selected>View1</wc-tab>
+ *   <wc-view name="view2">View2</wc-tab>
+ *   <wc-view name="view3">View3</wc-tab>
+ *   <wc-view name="view4">View4</wc-tab>
+ * </wc-view-group>
+ */
+export class ViewGroupElement extends LitElement {
+  static get localName() {
+    return 'wc-view-group';
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Whether the tab is selected. Only one tab within a group should
+       * be selected at a time.
+       * @type {Boolean}
+       * @default false
+       * @memberof TabElement
+       */
+      selected: { type: Boolean },
+
+      /**
+       * The name of the tab, for click events.
+       * @type {String}
+       * @default ''
+       * @memberof TabElement
+       */
+      name: { type: String },
+    };
+  }
+
+  static get styles() {
+    return css``;
+  }
+
+  get className() {
+    const classes = [];
+    if (this.selected) {
+      classes.push('selected');
+    }
+    return classes.join(' ');
+  }
+
+  render() {
+    return html`
+            <div class=${this.className || nothing}><slot></slot></div>
+          `;
+  }
+}

src/nav/nav.js

@@ -11,6 +11,8 @@ import { SideBarElement } from './SideBarElement';
 import { ContentElement } from './ContentElement';
 import { TabElement } from './TabElement';
 import { TabGroupElement } from './TabGroupElement';
+import { ViewElement } from './ViewElement';
+import { ViewGroupElement } from './ViewGroupElement';
 
 // Web Components
 customElements.define(NavBarElement.localName, NavBarElement); // wc-navbar
@@ -22,3 +24,5 @@ customElements.define(SideBarElement.localName, SideBarElement); // wc-sidebar
 customElements.define(ContentElement.localName, ContentElement); // wc-content
 customElements.define(TabElement.localName, TabElement); // wc-tab
 customElements.define(TabGroupElement.localName, TabGroupElement); // wc-tab-group
+customElements.define(ViewElement.localName, ViewElement); // wc-view
+customElements.define(ViewGroupElement.localName, ViewGroupElement); // wc-view-group