From 5413ad130fac76235609ea735aea6c41467f1b22 Mon Sep 17 00:00:00 2001
From: Thomas Allmer <thomas.allmer@ing.com>
Date: Wed, 11 Dec 2019 15:52:07 +0100
Subject: [PATCH] feat(field): add wrappers to allow label left of input

---
 packages/field/src/FormControlMixin.js | 25 ++++++++++++++++++++++---
 packages/switch/src/LionSwitch.js      | 22 ++++++++++++++++++++--
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/packages/field/src/FormControlMixin.js b/packages/field/src/FormControlMixin.js
index 8fe6a210e..c835e2922 100644
--- a/packages/field/src/FormControlMixin.js
+++ b/packages/field/src/FormControlMixin.js
@@ -209,14 +209,16 @@ export const FormControlMixin = dedupeMixin(
       }
 
       /**
-       *
        * Default Render Result:
+       * <div class="form-field__group-one">
        *   <div class="form-field__label">
        *     <slot name="label"></slot>
        *   </div>
        *   <small class="form-field__help-text">
        *     <slot name="help-text"></slot>
        *   </small>
+       * </div>
+       * <div class="form-field__group-two">
        *   <div class="input-group">
        *     <div class="input-group__before">
        *       <slot name="before"></slot>
@@ -239,11 +241,28 @@ export const FormControlMixin = dedupeMixin(
        *   <div class="form-field__feedback">
        *     <slot name="feedback"></slot>
        *   </div>
+       * </div>
        */
       render() {
         return html`
-          ${this.labelTemplate()} ${this.helpTextTemplate()} ${this.inputGroupTemplate()}
-          ${this.feedbackTemplate()}
+          <div class="form-field__group-one">
+            ${this.groupOneTemplate()}
+          </div>
+          <div class="form-field__group-two">
+            ${this.groupTwoTemplate()}
+          </div>
+        `;
+      }
+
+      groupOneTemplate() {
+        return html`
+          ${this.labelTemplate()} ${this.helpTextTemplate()}
+        `;
+      }
+
+      groupTwoTemplate() {
+        return html`
+          ${this.inputGroupTemplate()} ${this.feedbackTemplate()}
         `;
       }
 
diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js
index 2f0d82bc3..e24be04d8 100644
--- a/packages/switch/src/LionSwitch.js
+++ b/packages/switch/src/LionSwitch.js
@@ -23,11 +23,29 @@ export class LionSwitch extends ChoiceInputMixin(LionField) {
     };
   }
 
+  /**
+   * Restore original render function from FormControlMixin.js
+   * As it gets overwritten in ChoiceInputMixin
+   */
   render() {
     return html`
-      <div class="input-switch__container">
-        ${this.labelTemplate()} ${this.helpTextTemplate()} ${this.feedbackTemplate()}
+      <div class="form-field__group-one">
+        ${this.groupOneTemplate()}
       </div>
+      <div class="form-field__group-two">
+        ${this.groupTwoTemplate()}
+      </div>
+    `;
+  }
+
+  groupOneTemplate() {
+    return html`
+      ${this.labelTemplate()} ${this.helpTextTemplate()} ${this.feedbackTemplate()}
+    `;
+  }
+
+  groupTwoTemplate() {
+    return html`
       ${this.inputGroupTemplate()}
     `;
   }