FIX Reorder text checkbox group and apply Reactstrap styles

client/src/boot/registerComponents.js

@@ -12,6 +12,7 @@ import InlineEditForm from 'components/ElementEditor/InlineEditForm';
 import AddElementPopover from 'components/ElementEditor/AddElementPopover';
 import HoverBar from 'components/ElementEditor/HoverBar';
 import DragPositionIndicator from 'components/ElementEditor/DragPositionIndicator';
+import TextCheckboxGroupField from 'components/TextCheckboxGroupField/TextCheckboxGroupField';
 
 export default () => {
   Injector.component.registerMany({
@@ -28,5 +29,6 @@ export default () => {
     AddElementPopover,
     HoverBar,
     DragPositionIndicator,
+    TextCheckboxGroupField,
   });
 };

client/src/components/TextCheckboxGroupField/TextCheckboxGroupField.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
+import fieldHolder from 'components/FieldHolder/FieldHolder';
+
+const TextCheckboxGroupField = () => {
+    const { children } = this.props;
+
+    const childrenWithProps = React.Children.toArray(
+      React.Children.map(children, child =>
+        React.cloneElement(child, { noHolder: true })
+      )
+    );
+    return (
+      <InputGroup className="text-checkout-group-field">
+        {childrenWithProps[0]}
+        <InputGroupAddon addonType="append">
+          <InputGroupText >{childrenWithProps[1]}</InputGroupText>
+        </InputGroupAddon>
+      </InputGroup>
+    );
+};
+
+export default fieldHolder(TextCheckboxGroupField);

client/src/components/TextCheckboxGroupField/TextCheckboxGroupField.scss

@@ -0,0 +1,9 @@
+// Temporarily overwriting the styles form the CheckboxField component
+// since it cannot be removed easily
+.text-checkout-group-field {
+  .form-check {
+    display: inline;
+    padding-left: 0;
+    margin-bottom: 0;
+  }
+}

client/src/styles/bundle.scss

@@ -22,3 +22,4 @@
 @import "../components/ElementEditor/DragPositionIndicator";
 @import "../components/ElementEditor/ElementEditor";
 @import "../components/ElementEditor/ElementDragPreview";
+@import "../components/TextCheckboxGroupField/TextCheckboxGroupField";

src/Forms/TextCheckboxGroupField.php

@@ -6,6 +6,8 @@
 
 class TextCheckboxGroupField extends CompositeField
 {
+    protected $schemaComponent = 'TextCheckboxGroupField';
+
     /**
      * Set the composite's title to that of the first child
      *