LT-253: Creating radio group component

Packages/lesiontracker/client/components/additionalFindings/additionalFindings.html

@@ -1,70 +1,51 @@
 <template name="additionalFindings">
     <div class="additionalFindings">
         <div class="scrollArea">
-            <div class="row">
-                <div class="header">
-                    Additional Findings: Baseline
+            {{#form schema=currentSchema}}
+                <div class="row">
+                    <div class="header">Additional Findings: Baseline</div>
+                    {{>groupRadio labelClass='form-group' key='measurableDisease'}}
                 </div>
-                {{>radioOptionGroup (stateDataWithKey "measurableDisease")}}
-            </div>
-
-            <!-- <h4>Testing dynamic components</h4>
-            {{#form id="testForm" schema=currentSchema}}
-                {{>inputText key='test' label='testing'}}
-                {{>groupRadio mixins='schemaData' key='acceptableImageQuality'}}
-            {{/form}} -->
-
-            <div class="row">
-                <div class="header">
-                    Supplementary Measurements
+                <div class="row">
+                    <div class="header">Supplementary Measurements</div>
+                    {{>selectInput (stateDataWithKey "numberOfBoneLesions")}}
+                    {{>select2Input
+                        key="regionsOfMetastaticDisease"
+                        select2Options=regionsOfMetastaticDiseaseSelect2Options
+                        state=state
+                        currentSchema=currentSchema
+                    }}
+                    {{>groupRadio labelClass='form-group' key='tracerRelatedToMetastaticDisease'}}
                 </div>
-                {{>selectInput (stateDataWithKey "numberOfBoneLesions")}}
-                {{>select2Input
-                    key="regionsOfMetastaticDisease"
-                    select2Options=regionsOfMetastaticDiseaseSelect2Options
-                    state=state
-                    currentSchema=currentSchema
-                }}
-                {{>radioOptionGroup (stateDataWithKey "tracerRelatedToMetastaticDisease")}}
-            </div>
-            <div class="row">
-                <div class="header">
-                    Image Quality
+                <div class="row">
+                    <div class="header">Image Quality</div>
+                    {{>groupRadio labelClass='form-group' key='acceptableImageQuality'}}
+                    {{>groupRadio labelClass='form-group' key='adequateAnatomicalCoverage'}}
+                    {{>groupRadio labelClass='form-group' key='presenceOfContrast'}}
                 </div>
-                {{>radioOptionGroup (stateDataWithKey "acceptableImageQuality")}}
-                {{>radioOptionGroup (stateDataWithKey "adequateAnatomicalCoverage")}}
-                {{>radioOptionGroup (stateDataWithKey "presenceOfContrast")}}
-            </div>
-            <div class="row">
-                <div class="header">
-                    Additional Screen Captures
-                </div>
-                <div class="entrySection buttonSection">
-                    <div class="svgContainer">
-                        <svg>
-                            <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-create-screen-capture"></use>
-                        </svg>
-                    </div>
-                    <div class="buttonLabel noselect">
-                        Add new screen capture
+                <div class="row">
+                    <div class="header">Additional Screen Captures</div>
+                    <div class="entrySection buttonSection">
+                        <div class="svgContainer">
+                            <svg>
+                                <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-create-screen-capture"></use>
+                            </svg>
+                        </div>
+                        <div class="buttonLabel noselect">Add new screen capture</div>
                     </div>
                 </div>
-            </div>
-            <div class="row">
-                <div class="header">
-                    Comments
-                </div>
-                <div class="entrySection buttonSection">
-                    <div class="svgContainer">
-                        <svg>
-                            <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-create-comment"></use>
-                        </svg>
-                    </div>
-                    <div class="buttonLabel noselect">
-                        Add a comment
+                <div class="row">
+                    <div class="header">Comments</div>
+                    <div class="entrySection buttonSection">
+                        <div class="svgContainer">
+                            <svg>
+                                <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-create-comment"></use>
+                            </svg>
+                        </div>
+                        <div class="buttonLabel noselect">Add a comment</div>
                     </div>
                 </div>
-            </div>
+            {{/form}}
         </div>
     </div>
 </template>

Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl

@@ -38,6 +38,13 @@
       &:not(:last-child)
         border-bottom: $uiBorderThickness solid $uiBorderColorDark
 
+      & > .wrapperText
+        display: block
+        font-weight: bold
+        line-height: 15px
+        margin: 10px 0 8px
+
+      // TODO: remove
       h5
         font-weight: bold
         margin-bottom: 8px
@@ -48,10 +55,11 @@
         display: inline-block
         padding: 5px
 
-      .radio-group
+      // TODO: remove radio-group
+      .radio-group, .group-radio
         height: 30px
 
-        .radio-option
+        label
           display: inline-block
           float: left
           font-size: 14px