Added buttons

Author: djthorpe

src/button/ButtonElement.js

@@ -0,0 +1,67 @@
+import { LitElement, html, css, nothing } from 'lit';
+
+/**
+ * @class ButtonElement
+ *
+ * This class is used as a button, either a control (close, help, etc), a form submission or
+ * a normal button.
+ *
+ * @property {String} name - The name of the button
+ * @property {String} type - The type of the button if not standard
+ *                           (control, submit)
+ * @property {String} textTransform - If the button text should be transformed
+ *                                    (uppercase, lowercase, capitalize)
+ * @property {Boolean} disabled - Whether the button is disabled
+ *
+ * @example
+ * <wc-button type="control">Close</wc-button>
+ */
+export class ButtonElement extends LitElement {
+  static get localName() {
+    return 'wc-button';
+  }
+
+  constructor() {
+    super();
+
+    // Default properties
+    this.name = '';
+    this.type = '';
+    this.textTransform = '';
+    this.disabled = false;
+  }
+
+  static get properties() {
+    return {
+      name: { type: String },
+      type: { type: String },
+      textTransform: { type: String },
+      disabled: { type: Boolean },
+    };
+  }
+
+  static get styles() {
+    return css`
+      button.control {
+        background: transparent;
+      }
+    `;
+  }
+
+  get classes() {
+    const classes = [];
+    if (this.type) {
+      classes.push(this.type);
+    }
+    if (this.textTransform) {
+      classes.push(`text-transform-${this.textTransform}`);
+    }
+    return classes;
+  }
+
+  render() {
+    return html`
+      <button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled}><slot></slot></button>
+    `;
+  }
+}

src/button/ControlButtonGroupElement.js

@@ -6,14 +6,31 @@ import { LitElement, html, css, nothing } from 'lit';
  * This class is used as a group of control buttons, as decoration of a card, located on the
  * top right corner of the card.
  *
+ * @property {String} name - The name of the control group
+ *
  * @example
- * <wc-control-button-group name="controls"></wc-control-button-group>
+ * <wc-control-button-group name="controls">
+ *   <wc-button type="control">Close</wc-button>
+ * </wc-control-button-group>
  */
 export class ControlButtonGroupElement extends LitElement {
   static get localName() {
     return 'wc-control-button-group';
   }
 
+  constructor() {
+    super();
+
+    // Default properties
+    this.name = '';
+  }
+
+  static get properties() {
+    return {
+      name: { type: String },
+    };
+  }
+
   static get styles() {
     return css`
       div {
@@ -37,8 +54,6 @@ export class ControlButtonGroupElement extends LitElement {
   render() {
     return html`
       <div class=${this.classes.join(' ') || nothing}>
-        <button class="control-button" title="Close">CLOSE</button>
-        <button class="control-button" title="Help">HELP</button>
         <slot></slot>
       </div>
     `;

src/button/button.css

@@ -0,0 +1,11 @@
+.text-transform-uppercase {
+    text-transform: uppercase;
+}
+
+.text-transform-lowercase {
+    text-transform: lowercase;
+}
+
+.text-transform-capitalize {
+    text-transform: capitalize;
+}

src/button/button.js

@@ -3,6 +3,9 @@ import './button.css';
 
 // Classes
 import { ControlButtonGroupElement } from './ControlButtonGroupElement';
+import { ButtonElement } from './ButtonElement';
 
 // wc-control-button-group
 customElements.define(ControlButtonGroupElement.localName, ControlButtonGroupElement);
+// wc-button
+customElements.define(ButtonElement.localName, ButtonElement);

src/index.html

@@ -102,7 +102,10 @@ <h4>Card</h4>
                     </script>
                 </wc-card>
                 <wc-card>
-                    <wc-control-button-group name="controls"></wc-control-button-group>
+                    <wc-control-button-group name="controls">
+                        <wc-button type="control">Close</wc-button>
+                        <wc-button type="control">Help</wc-button>
+                    </wc-control-button-group>
                     <h1>Header</h1>
                     <h2>Subtitle</h2>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut