LT-253: Creating radio component

Packages/design/components/radioOption/radioOption.html

@@ -0,0 +1,10 @@
+<template name="radioOption">
+    <label class="radio-option">
+        <input type="radio"
+            name="{{this.name}}"
+            value="{{this.value}}"
+            class="{{this.class}}"
+            checked="{{#if this.checked}}checked{{/if}}"/>
+        <span>{{this.label}}</span>
+    </label>
+</template>

Packages/design/components/radioOption/radioOption.styl

@@ -0,0 +1,35 @@
+@import "{design}/app"
+
+label.radio-option
+  cursor: pointer
+  input
+    height: 0
+    width: 0
+  span
+    padding-left: 20px
+    position: relative
+    &:before
+      background: white
+      border-radius: 8px
+      content: ''
+      display: block
+      height: 16px
+      left: 0
+      position: absolute
+      top: 50%
+      transform(translateY(-50%))
+      width: 16px
+  input:focus + span:before
+    // TODO: [design] define a outline for the design
+    outline: none
+    box-shadow: 0 0 2px 2px $textSecondaryColor
+  input:checked + span:after
+    background: $uiBorderColorDark
+    border-radius: 5px
+    content: ''
+    height: 10px
+    left: 3px
+    position: absolute
+    top: 50%
+    transform(translateY(-50%))
+    width: 10px

Packages/design/package.js

@@ -36,4 +36,10 @@ Package.onUse(function(api) {
         'components/roundedButtonGroup/roundedButtonGroup.js'
     ], 'client');
 
+    // Radio Option
+    api.addFiles([
+        'components/radioOption/radioOption.html',
+        'components/radioOption/radioOption.styl'
+    ], 'client');
+
 });

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

@@ -5,28 +5,28 @@
                 <div class="header">
                     Additional Findings: Baseline
                 </div>
-                {{> radioOptionGroup (stateDataWithKey "measurableDisease")}}
+                {{>radioOptionGroup (stateDataWithKey "measurableDisease")}}
             </div>
             <div class="row">
                 <div class="header">
                     Supplementary Measurements
                 </div>
-                {{> selectInput (stateDataWithKey "numberOfBoneLesions")}}
-                {{> select2Input
+                {{>selectInput (stateDataWithKey "numberOfBoneLesions")}}
+                {{>select2Input
                     key="regionsOfMetastaticDisease"
                     select2Options=regionsOfMetastaticDiseaseSelect2Options
                     state=state
                     currentSchema=currentSchema
                 }}
-                {{> radioOptionGroup (stateDataWithKey "tracerRelatedToMetastaticDisease")}}
+                {{>radioOptionGroup (stateDataWithKey "tracerRelatedToMetastaticDisease")}}
             </div>
             <div class="row">
                 <div class="header">
                     Image Quality
                 </div>
-                {{> radioOptionGroup (stateDataWithKey "acceptableImageQuality")}}
-                {{> radioOptionGroup (stateDataWithKey "adequateAnatomicalCoverage")}}
-                {{> radioOptionGroup (stateDataWithKey "presenceOfContrast")}}
+                {{>radioOptionGroup (stateDataWithKey "acceptableImageQuality")}}
+                {{>radioOptionGroup (stateDataWithKey "adequateAnatomicalCoverage")}}
+                {{>radioOptionGroup (stateDataWithKey "presenceOfContrast")}}
             </div>
             <div class="row">
                 <div class="header">
@@ -60,4 +60,4 @@
             </div>
         </div>
     </div>
-</template>
+</template>

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

@@ -41,7 +41,7 @@
       h5
         font-weight: 300
 
-      label
+      .control-label
         font-size: 14px
         font-weight: 100
         display: inline-block
@@ -51,26 +51,13 @@
         height: 30px
 
         .radio-option
-          width: 50%
-          text-align: center
-          float: left
           display: inline-block
-          padding: 5px
+          float: left
+          font-size: 14px
+          font-weight: 100
           height: 30px
-
-          input
-            float: left
-            height: 30px
-            width: 30px
-            display: inline-block
-
-          label
-            float: left
-            height: 30px
-            line-height: 30px
-            font-size: 14px
-            font-weight: 100
-            display: inline-block
+          line-height: 30px
+          width: 50%
 
       #regionsOfMetastaticDisease
         width: 285px

Packages/reactive-form-controls/client/components/radioOptionGroup/radioOptionGroup.html

@@ -1,22 +1,18 @@
 <template name="radioOptionGroup">
     <div class="{{class}} form-group">
-        {{ #with getSchema key }}
-        <h5>{{label}}</h5>
-        <div class="radio-group">
-            {{#each option in allowedValues}}
-                <div class="radio-option">
-                    <input type="radio"
-                           id="{{../key}}_{{option}}"
-                           name="{{../key}}"
-                           value="{{option}}"
-                           class="form-control js-form-update"
-                           {{inlineIf value option 'checked'}}/>
-                    <label for="{{../key}}_{{option}}">
-                        {{option}}
-                    </label>
-                </div>
-            {{/each}}
-        </div>
-        {{ /with }}
+        {{#let schema=(getSchema key)}}
+            <h5>{{schema.label}}</h5>
+            <div class="radio-group">
+                {{#each option in schema.allowedValues}}
+                    {{>radioOption
+                        name=key
+                        value=option
+                        checked=(eq value option)
+                        label=option
+                        class="js-form-update"
+                    }}
+                {{/each}}
+            </div>
+        {{/let}}
     </div>
-</template>
+</template>