revises CSS of RenderFields

src/client/components/forms/RenderFields/index.js

@@ -4,12 +4,10 @@ import fieldTypes from '../field-types';
 
 import './index.scss';
 
-const baseClass = 'render-fields';
-
 const RenderFields = ({ fields }) => {
   if (fields) {
     return (
-      <div className={baseClass}>
+      <>
         {fields.map((field, i) => {
           const FieldComponent = field.component || fieldTypes[field.type];
 
@@ -24,7 +22,7 @@ const RenderFields = ({ fields }) => {
 
           return (
             <div
-              className={`${baseClass}__no-field-found`}
+              className="missing-field"
               key={i}
             >
               No matched field found for
@@ -35,7 +33,7 @@ const RenderFields = ({ fields }) => {
             </div>
           );
         })}
-      </div>
+      </>
     );
   }
 

src/client/components/forms/RenderFields/index.scss

@@ -1,7 +1,5 @@
 @import '../../../scss/styles';
 
-.render-fields {
-  &__no-field-found {
-    @include gutter;
-  }
+.missing-field {
+  @include gutter;
 }

src/client/components/forms/field-types/Group/index.js

@@ -3,13 +3,22 @@ import PropTypes from 'prop-types';
 import Section from '../../../layout/Section';
 import RenderFields from '../../RenderFields';
 
+import './index.scss';
+
+const formatSubField = (subField) => {
+  return subField;
+};
+
 const Group = ({ label, fields }) => {
   return (
     <Section
       heading={label}
       className="field-group"
     >
-      <RenderFields fields={fields} />
+      <RenderFields
+        fields={fields}
+        formatter={formatSubField}
+      />
     </Section>
   );
 };

src/client/components/forms/field-types/Group/index.scss

@@ -0,0 +1,3 @@
+.field-group {
+
+}

src/client/components/forms/field-types/Repeater/index.js

@@ -3,13 +3,20 @@ import PropTypes from 'prop-types';
 import Section from '../../../layout/Section';
 import RenderFields from '../../RenderFields';
 
+const formatSubField = (subField) => {
+  return subField;
+};
+
 const Repeater = (props) => {
   const { label, fields } = props;
 
   return (
     <div className="field-repeater">
       <Section heading={label}>
-        <RenderFields fields={fields} />
+        <RenderFields
+          fields={fields}
+          formatter={formatSubField}
+        />
       </Section>
     </div>
   );