Add support for radio buttons on feedback forms. (#1311)

config/vufind/FeedbackForms.yaml

@@ -40,14 +40,14 @@
 #     required (boolean) Is the element required?
 #     settings (array)   HTML attributes as key-value pairs, for example:
 #       - [class, "custom-css-class another-class"]
-#     type (string)      Element type (text|textarea|email|url|select)
+#     type (string)      Element type (text|textarea|email|url|select|radio)
 #     help (string)      Element help text (translation key)
 #     
-#     And for select elements one of:
+#     And for select and radio elements:
 # 
 #     options (array) List of select values (translation keys)
 #
-#     or
+#     or for select elements alternatively:
 #
 #     optionGroups (array) List of option groups with keys:
 #       label (string) Group label (translation key)
@@ -141,3 +141,11 @@ forms:
         type: text
         label: Format
         required: true
+
+      - name: boolean
+        type: radio
+        label: Need Help?
+        required: true
+        options:
+          - Yes
+          - No

module/VuFind/src/VuFind/Form/Form.php

@@ -229,10 +229,15 @@ class Form extends \Zend\Form\Form implements
                 $value = $el[$field];
                 $element[$field] = $value;
             }
+
+            if ($element['type'] === 'radio' && ! isset($element['group'])) {
+                $element['group'] = $element['name'];
+            }
+
             $element['label'] = $this->translate($el['label']);
 
             $elementType = $element['type'];
-            if ($elementType === 'select') {
+            if (in_array($elementType, ['radio', 'select'])) {
                 if (empty($el['options']) && empty($el['optionGroups'])) {
                     continue;
                 }
@@ -367,6 +372,25 @@ class Form extends \Zend\Form\Form implements
         }
 
         switch ($type) {
+        case 'radio':
+            $options = [];
+            if (isset($el['options'])) {
+                $options = $el['options'];
+            }
+            $optionElements = [];
+            $first = true;
+            foreach ($options as $key => $val) {
+                $optionElements[] = [
+                    'label' => $key,
+                    'value' => $val,
+                    'label_attributes' => ['for' => $val],
+                    'attributes' => ['id' => $val],
+                    'selected' => $first
+                ];
+                $first = false;
+            }
+            $conf['options'] = ['value_options' => $optionElements];
+            break;
         case 'select':
             if (isset($el['options'])) {
                 $conf['options'] = ['value_options' => $el['options']];
@@ -401,6 +425,7 @@ class Form extends \Zend\Form\Form implements
             'url' => '\Zend\Form\Element\Url',
             'email' => '\Zend\Form\Element\Email',
             'textarea' => '\Zend\Form\Element\Textarea',
+            'radio' => '\Zend\Form\Element\Radio',
             'select' => '\Zend\Form\Element\Select',
             'submit' => '\Zend\Form\Element\Submit'
         ];
@@ -547,7 +572,7 @@ class Form extends \Zend\Form\Form implements
             }
             $value = $requestParams[$el['name']] ?? null;
 
-            if ($type === 'select') {
+            if (in_array($type, ['radio', 'select'])) {
                 $value = $this->translate($value);
             }
 

themes/bootstrap3/less/components/form.less

@@ -15,7 +15,33 @@ form {
         margin-left: 15px;
         margin-top: 5px;
     }
-    .form-group label.required::before {
+    .form-group label.required::before,
+    .form-group .radio-label.required::before,
+    {
         content: '* ';
     }
+
+    input[type=radio] {
+        height: 1em;
+    }
+    .form-group.radio {
+        margin-bottom: 15px;
+        label.control-label {
+            padding-left: 0;
+            font-weight: 700;
+            margin-bottom: 5px;
+        }
+        label {
+            display: table;
+            margin: 7px 0;
+            input {
+                width: auto;
+                margin-right: 10px;
+                margin-top: 3px;
+            }
+        }
+        .radio-label {
+            font-weight: 700;
+        }
+    }
 }

themes/bootstrap3/scss/components/form.scss

@@ -15,7 +15,33 @@ form {
         margin-left: 15px;
         margin-top: 5px;
     }
-    .form-group label.required::before {
+    .form-group label.required::before,
+    .form-group .radio-label.required::before,
+    {
         content: '* ';
     }
+
+    input[type=radio] {
+        height: 1em;
+    }
+    .form-group.radio {
+        margin-bottom: 15px;
+        label.control-label {
+            padding-left: 0;
+            font-weight: 700;
+            margin-bottom: 5px;
+        }
+        label {
+            display: table;
+            margin: 7px 0;
+            input {
+                width: auto;
+                margin-right: 10px;
+                margin-top: 3px;
+            }
+        }
+        .radio-label {
+            font-weight: 700;
+        }
+    }
 }

themes/bootstrap3/templates/feedback/form.phtml

@@ -64,15 +64,23 @@
       </div>
     <?php endif ?>
     <?php if (in_array($handleGroup, ['open', 'openAndClose'])): ?>
-      <div class="field-set">
+      <?php if ($el['type'] === 'radio'): ?>
+        <div class="field-set" role="group" aria-labelledby="<?=$this->escapeHtmlAttr($el['name'])?>">
+      <?php else: ?>
+        <div class="field-set">
+      <?php endif ?>
     <?php endif ?>
 
-    <div class="form-group">
+    <div class="form-group <?= $el['type'] ?>">
     <?php if (!empty($el['help'])): ?>
       <p class="info"><?= $this->transEsc($el['help']) ?></p>
     <?php endif ?>
     <?php if ($el['type'] !== 'submit'): ?>
-      <label for="<?=$this->escapeHtmlAttr($el['name'])?>" class="control-label<?=!empty($el['required']) ? ' required' : ''?>"><?=$this->transEsc($el['label'])?>:</label>
+      <?php if ($el['type'] === 'radio'): ?>
+        <p id="<?=$this->escapeHtmlAttr($el['name'])?>" class="control-label radio-label<?=!empty($el['required']) ? ' required' : ''?>"><?=$this->transEsc($el['label'])?>:</p>
+      <?php else: ?>
+        <label for="<?=$this->escapeHtmlAttr($el['name'])?>" class="control-label<?=!empty($el['required']) ? ' required' : ''?>"><?=$this->transEsc($el['label'])?>:</label>
+      <?php endif ?>
     <?php else: ?>
       <?php if ($helpPost): ?>
         <div class="form-info post">