Updated

Author: djthorpe

src/app/CanvasElement.js

@@ -6,34 +6,30 @@ import { LitElement, html, css, nothing } from 'lit';
  * This class is used to contain  content boxes which are stacked
  * vertically or horizontally within the canvas.
  *
+ * @property {Boolean} vertical - Fill the canvas vertically rather than horizontally, default false
+ * @property {String} backgroundColor - Background color of the canvas, light or dark, default light
+ *
  * @example
- * <w2-canvas vertical>
- *  <w2-canvas-content>....</w2-canvas-content>
- *  <w2-canvas-content>....</w2-canvas-content>
- *  <w2-canvas-content>....</w2-canvas-content>
- * </w2-canvas>
+ * <wc-canvas vertical>
+ *  <wc-canvas-content>....</wc-canvas-content>
+ *  <wc-canvas-content>....</wc-canvas-content>
+ *  <wc-canvas-content>....</wc-canvas-content>
+ * </wc-canvas>
  */
 export class CanvasElement extends LitElement {
   static get localName() {
-    return 'w2-canvas';
+    return 'wc-canvas';
   }
 
   constructor() {
     super();
     this.backgroundColor = 'light';
+    this.vertical = false;
   }
 
   static get properties() {
     return {
-      /**
-       * @property {Boolean} vertical - Fill the canvas vertically rather than horizontally
-       */
       vertical: { type: Boolean },
-
-      /**
-       * @property {String} backgroundColor - Background color of the canvas
-       * @default 'light'
-       */
       backgroundColor: { type: String },
     };
   }
@@ -57,47 +53,61 @@ export class CanvasElement extends LitElement {
         flex-direction: column;
       }
 
-      /* Any canvas section is in flexbox mode */
-      ::slotted(w2-canvas-section),::slotted(w2-canvas-navbar) {
+      /* Any canvas section is in flexbox mode with a fixed size */
+      ::slotted(wc-canvas-section),::slotted(wc-canvas-navbar) {
         display: flex;
-        flex: 0 0;
-        justify-content: center;
+        justify-content: start;
         border-style: none;
       }
 
       /* The first section in vertical mode gets a border below */
-      div.vertical > ::slotted(w2-canvas-navbar:first-child),div.vertical > ::slotted(w2-canvas-section:first-child) {
+      div.vertical > ::slotted(wc-canvas-navbar:first-child),div.vertical > ::slotted(wc-canvas-section:first-child) {
         min-height: 40px;
         border-bottom-style: solid;
       }
+
       /* The first section in horizontal mode gets a border right */
-      div:not(.vertical) > ::slotted(w2-canvas-navbar:first-child), div:not(.vertical) > ::slotted(w2-canvas-section:first-child) {
+      div:not(.vertical) > ::slotted(wc-canvas-navbar:first-child), div:not(.vertical) > ::slotted(wc-canvas-section:first-child) {
         min-width: 60px;
         border-right-style: solid;
       }
+
       /* The last section in vertical mode gets a border above */
-      div.vertical > ::slotted(w2-canvas-navbar:last-child),div.vertical > ::slotted(w2-canvas-section:last-child) {
+      div.vertical > ::slotted(wc-canvas-navbar:last-child),div.vertical > ::slotted(wc-canvas-section:last-child) {
         min-height: 30px;
         border-top-style: solid;
       }
+
       /* The last section in horizonal mode gets a border left */
-      div:not(.vertical) > ::slotted(w2-canvas-navbar:last-child),div:not(.vertical) > ::slotted(w2-canvas-section:last-child) {
+      div:not(.vertical) > ::slotted(wc-canvas-navbar:last-child),div:not(.vertical) > ::slotted(wc-canvas-section:last-child) {
         min-width: 60px;
         border-left-style: solid;
       }
 
       /* Flex containers stretch */
-      ::slotted(w2-canvas-section[flex]) {
+      ::slotted(wc-canvas-section[flex]) {
         flex: 999 0;
         overflow: auto;
       }
 
       /* Light theme setting colours and border widths */
-      div.bg-color-light ::slotted(w2-canvas-navbar) {
-        background-color: var(--light-color);
-        color: var(--dark-color);
-        border-color: var(--grey-20-color);
-        border-width: 1px;
+      div.bg-color-light {
+        & ::slotted(wc-canvas-navbar), ::slotted(wc-canvas-section) {
+          background-color: var(--light-color);
+          color: var(--dark-color);
+          border-color: var(--grey-20-color);
+          border-width: 1px;
+        }
+      }
+
+      /* Dark theme setting colours and border widths */
+      div.bg-color-dark {
+        & ::slotted(wc-canvas-navbar), ::slotted(wc-canvas-section) {
+          background-color: var(--dark-color);
+          color: var(--light-color);
+          border-color: var(--grey-40-color);
+          border-width: 1px;
+        }
       }
     `;
   }

src/app/CanvasNavbarElement.js

@@ -7,16 +7,18 @@ import { CanvasSectionElement } from './CanvasSectionElement';
  * This class is a navigaton used to contain content boxes which are stacked
  * vertically or horizontally within the canvas.
  *
+ * @property {Boolean} hidden - Whether the navigation is hidden, default false
+ *
  * @example
- * <w2-canvas vertical>
- *  <w2-canvas-navbar>....</w2-canvas-navbar>
- *  <w2-canvas-section>....</w2-canvas-section>
- *  <w2-canvas-navbar>....</w2-canvas-navbar>
- * </w2-canvas>
+ * <wc-canvas vertical>
+ *  <wc-canvas-navbar>....</wc-canvas-navbar>
+ *  <wc-canvas-section>....</wc-canvas-section>
+ *  <wc-canvas-navbar>....</wc-canvas-navbar>
+ * </wc-canvas>
  */
-export class CanvasElement extends CanvasSectionElement {
+export class CanvasNavbarElement extends CanvasSectionElement {
   static get localName() {
-    return 'w2-canvas-navbar';
+    return 'wc-canvas-navbar';
   }
 
   constructor() {
@@ -26,18 +28,15 @@ export class CanvasElement extends CanvasSectionElement {
 
   static get properties() {
     return {
-      /**
-       * @property {Boolean} hidden - Whether the navigation is hidden
-       */
       hidden: { type: Boolean },
     };
   }
 
   static get styles() {
     return css`
-      .hidden {
-        display: none;        
-      }
+    .hidden {
+      display: none;        
+    }
     `;
   }
 
@@ -49,7 +48,6 @@ export class CanvasElement extends CanvasSectionElement {
     `;
   }
 
-  // eslint-disable-next-line class-methods-use-this
   get className() {
     const classes = [];
     if (this.hidden) {

src/app/CanvasSectionElement.js

@@ -7,34 +7,30 @@ import { LitElement, html, css, nothing } from 'lit';
  * vertically or horizontally within a canvas. The content
  * boxes can be flexed to fill the available space.
  *
+ * @property {Boolean} flex - Flex the element to fill the available space, default false
+ *
  * @example
- * <w2-canvas vertical>
- *  <w2-canvas-section>....</w2-canvas-section>
- *  <w2-canvas-section>....</w2-canvas-section>
- *  <w2-canvas-section>....</w2-canvas-section>
- * </w2-canvas>
+ * <wc-canvas vertical>
+ *  <wc-canvas-section>....</wc-canvas-section>
+ *  <wc-canvas-section>....</wc-canvas-section>
+ *  <wc-canvas-section>....</wc-canvas-section>
+ * </wc-canvas>
  */
 export class CanvasSectionElement extends LitElement {
   static get localName() {
-    return 'w2-canvas-section';
+    return 'wc-canvas-section';
   }
 
   static get properties() {
     return {
-      /**
-       * @property {Boolean} flex - Flex the element to fill the available space
-       */
       flex: { type: Boolean },
     };
   }
 
   static get styles() {
     return css`
-      :host {}
-      div {
-        left: 0;
-        right: 0;
-        border: 1px solid red;
+      .flex {
+        flex: 999 0;
       }
     `;
   }

src/app/NavGroupElement.js

@@ -0,0 +1,68 @@
+import { LitElement, html, css, nothing } from 'lit';
+
+/**
+ * @class NavGroupElement
+ *
+ * This class is used to contain a list of navigation items, either horizontally or vertically.
+ *
+ * @property {Boolean} vertical - Fill the canvas vertically rather than horizontally, default false
+ * @property {Boolean} flex - Take up all available space, default false
+ *
+ * @example
+ * <wc-nav-group name="group" vertical>
+ *  <wc-nav>....</wc-nav>
+ *  <wc-nav-spacer></wc-nav-spacer>
+ *  <wc-nav>....</wc-nav>
+ * </wc-nav-group>
+ */
+export class NavGroupElement extends LitElement {
+  static get localName() {
+    return 'wc-nav-group';
+  }
+
+  constructor() {
+    super();
+    this.vertical = false;
+  }
+
+  static get properties() {
+    return {
+      vertical: { type: Boolean },
+      flex: { type: Boolean },
+    };
+  }
+
+  static get styles() {
+    return css`
+    ul {
+        display: flex;
+        flex-direction: row;
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+      }
+      ul.vertical {
+        flex-direction: column;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <ul class=${this.className || nothing}>
+        <slot></slot>
+      </ul>
+    `;
+  }
+
+  get className() {
+    const classes = [];
+    if (this.vertical) {
+      classes.push('vertical');
+    }
+    if (this.flex) {
+      classes.push('flex');
+    }
+    return classes.join(' ');
+  }
+}

src/app/NavItemElement.js

@@ -0,0 +1,52 @@
+import { LitElement, html, css, nothing } from 'lit';
+
+/**
+ * @class NavItemElement
+ *
+ * This class is used as a navigation item within a group of navigational items
+ *
+ * @property {Boolean} vertical - Fill the canvas vertically rather than horizontally, default false
+ *
+ * @example
+ * <wc-nav-group name="group" vertical>
+ *  <wc-nav-item name="item-top">....</wc-nav-item>
+ *  <wc-nav-spacer></wc-nav-spacer>
+ *  <wc-nav-item name="item-bottom">....</wc-nav-item>
+ * </wc-nav-group>
+ */
+export class NavItemElement extends LitElement {
+  static get localName() {
+    return 'wc-nav-item';
+  }
+
+  constructor() {
+    super();
+    this.vertical = false;
+  }
+
+  static get properties() {
+    return {
+      vertical: { type: Boolean },
+    };
+  }
+
+  static get styles() {
+    return css``;
+  }
+
+  render() {
+    return html`
+      <li class=${this.className || nothing}>
+        <slot></slot>
+      </li>
+    `;
+  }
+
+  get className() {
+    const classes = [];
+    if (this.vertical) {
+      classes.push('vertical');
+    }
+    return classes.join(' ');
+  }
+}

src/app/NavSpacerElement.js

@@ -0,0 +1,36 @@
+import { LitElement, html, css, nothing } from 'lit';
+
+/**
+ * @class NavSpacerElement
+ *
+ * This class is used as a spacer to separate navigation items to push siblings apart
+ *
+ * @example
+ * <wc-nav-group name="group" vertical>
+ *  <wc-nav-item name="item-top">....</wc-nav-item>
+ *  <wc-nav-spacer></wc-nav-spacer>
+ *  <wc-nav-item name="item-bottom">....</wc-nav-item>
+ * </wc-nav-group>
+ */
+export class NavSpacerElement extends LitElement {
+  static get localName() {
+    return 'wc-nav-spacer';
+  }
+
+  static get styles() {
+    return css``;
+  }
+
+  render() {
+    return html`
+      <li class=${this.classes.join(' ') || nothing}></li>
+    `;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get classes() {
+    const classes = [];
+    classes.push('spacer');
+    return classes;
+  }
+}

src/app/app.js

@@ -4,7 +4,15 @@ import './app.css';
 // Classes
 import { CanvasElement } from './CanvasElement';
 import { CanvasSectionElement } from './CanvasSectionElement';
+import { CanvasNavbarElement } from './CanvasNavbarElement';
+import { NavGroupElement } from './NavGroupElement';
+import { NavItemElement } from './NavItemElement';
+import { NavSpacerElement } from './NavSpacerElement';
 
 // Web Components
-customElements.define(CanvasElement.localName, CanvasElement); // w2-canvas
-customElements.define(CanvasSectionElement.localName, CanvasSectionElement); // w2-canvas-section
+customElements.define(CanvasElement.localName, CanvasElement); // wc-canvas
+customElements.define(CanvasSectionElement.localName, CanvasSectionElement); // wc-canvas-section
+customElements.define(CanvasNavbarElement.localName, CanvasNavbarElement); // wc-canvas-navbar
+customElements.define(NavGroupElement.localName, NavGroupElement); // wc-nav-group
+customElements.define(NavItemElement.localName, NavItemElement); // wc-nav-item
+customElements.define(NavSpacerElement.localName, NavSpacerElement); // wc-nav-spacer