Added control button group

Author: djthorpe

src/app/CardGroupElement.js

@@ -22,13 +22,14 @@ export class CardGroupElement extends LitElement {
       :host {
         flex: 0 1 auto;
       }
-      div.card-group {
+      div {
         display: flex;
         flex-wrap: wrap;
       }
 
       /* Colours */
       ::slotted(wc-card) {
+        position: relative;
         border: 1px solid var(--grey-20-color);
         border-radius: var(--card-border-radius);
         margin: var(--card-margin-y) var(--card-margin-x);

src/button/ControlButtonGroupElement.js

@@ -0,0 +1,46 @@
+import { LitElement, html, css, nothing } from 'lit';
+
+/**
+ * @class ControlButtonGroupElement
+ *
+ * This class is used as a group of control buttons, as decoration of a card, located on the
+ * top right corner of the card.
+ *
+ * @example
+ * <wc-control-button-group name="controls"></wc-control-button-group>
+ */
+export class ControlButtonGroupElement extends LitElement {
+  static get localName() {
+    return 'wc-control-button-group';
+  }
+
+  static get styles() {
+    return css`
+      div {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 0;
+        border: 0;
+        background: transparent;
+      }
+    `;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get classes() {
+    const classes = [];
+    classes.push('control-button-group');
+    return classes;
+  }
+
+  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,8 @@
+// CSS
+import './button.css';
+
+// Classes
+import { ControlButtonGroupElement } from './ControlButtonGroupElement';
+
+// wc-control-button-group
+customElements.define(ControlButtonGroupElement.localName, ControlButtonGroupElement);

src/button/button.js

@@ -79,14 +79,18 @@ export class FormControlElement extends LitElement {
 
       label.select {
         cursor: inherit;
-        
+
         & select {
           width: 100%;
           cursor: pointer;
           font-family: inherit;
           appearance: none;
           padding: var(--form-select-padding-y) var(--form-select-padding-x);
+          background-image: var(--form-select-background-image);
           background-color: var(--form-select-background-color);
+          background-repeat: no-repeat;
+          background-position: right center;
+          background-size: contain;          
           border: 1px solid var(--form-select-border-color);
           border-radius: var(--form-select-border-radius);
 

src/form/FormControlElement.js

@@ -17,4 +17,5 @@
     --form-select-padding-y: 0.1em;
     --form-select-border-color: var(--control-color);
     --form-select-background-color: var(--control-color);
+    --form-select-background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");
 }

src/form/form.css

@@ -102,6 +102,7 @@ <h4>Card</h4>
                     </script>
                 </wc-card>
                 <wc-card>
+                    <wc-control-button-group name="controls"></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
@@ -113,6 +114,12 @@ <h2>Subtitle</h2>
                 <wc-card backgroundColor="success" width="12">
                     <wc-icon name="check-circle-fill"></wc-icon> The operation was successful
                 </wc-card>
+                <wc-card backgroundColor="warning" width="6">
+                    <wc-icon name="exclamation-circle-fill"></wc-icon> Warning: Something happened
+                </wc-card>
+                <wc-card backgroundColor="error" width="6">
+                    <wc-icon name="x-circle-fill"></wc-icon> Error: An internal error occurred
+                </wc-card>
             </wc-card-group>
         </wc-canvas-section>
         <wc-canvas-navbar id="end">END</wc-canvas-navbar>

src/index.html

@@ -8,6 +8,7 @@ import './document.css';
 import './app/app';
 import './layout/layout';
 import './form/form';
+import './button/button';
 
 // Other
 import './esbuild';