Merge pull request #234 from Safelite/CSR-342-add-button-question

CSR-342 replace radio with button-question.

src/layouts/nested-radio-poc/nested-radio.vue

@@ -1,7 +1,7 @@
 <template>
 
   <div class="container-fluid nested-radio">
-    <div class="row mb-1 demo-animate"><!-- demo-animate for demo only -->
+    <div class="row mb-1">
       <div class="col">
         <listCard
         groupName="listcard1"
@@ -12,24 +12,17 @@
         />
       </div>
     </div>
-    <div class="row mb-1 show-hide"><!-- show-hide for demo only -->
+    <div class="row mb-1">
       <div class="col">
         <p class="mb-0 fw-bold">Ok, select the features</p>
-        <radio ref="radio"
+        <buttonQuestion
-        groupName="group1"
+          buttonType="radio"
-        buttonLabel="rain sensor, solar, 3rd visor band"
+          groupName="Demo Group"
-        buttonID="button1"
+          buttonID="button1"
-        isRequired
+          isRequired
-        value="test button"
+          value="test button"
-        screenReaderOnlyText="rain sensor, solar, 3rd visor band"
+          screenReaderOnlyText="rain sensor, solar, 3rd visor band"
-        />
+          :answers="demoArray"
-        <radio ref="radio"
-        groupName="group1"
-        buttonLabel="rain sensor, heated glass, solar, 3rd visor band"
-        buttonID="button2"
-        isRequired
-        value="test button"
-        screenReaderOnlyText="rain sensor, heated glass, solar, 3rd visor band"
         />
       </div>
     </div>
@@ -49,14 +42,24 @@
 </template>
 
 <script>
+import buttonQuestion from "@/common-components/button-question/button-question";
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
 
 export default {
   name: "nestedRadio",
   components: {
+    buttonQuestion,
     radio,
     listCard,
+  },
+  data() {
+    return {
+      demoArray: [
+        "rain sensor, solar, 3rd visor band",
+        "rain sensor, heated glass, solar, 3rd visor band",
+      ]
+    }
   }
 };
 </script>
@@ -64,26 +67,11 @@ export default {
 <style lang="scss">
 .nested-radio {
   .ui-radio {
+    flex-direction: column;
     margin: .25rem 0;
   }
   p {
     font-size: .875rem;
   }
-  // For demo only
-  padding: 20px;
-  .show-hide {
-    max-height: 0;
-    transition: max-height 0.35s ease-out;
-    overflow: hidden;
-  }
-  .demo-animate {
-    &:hover {
-      + .show-hide {
-        max-height: 140px;
-        transition: max-height 0.35s ease-in;
-      }
-    }
-  }
-  // END for demo only
 }
 </style>

src/ux-components/radio/radio.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
-  <div class="ui-radio d-flex form-check" :class="[hasError ? 'has-error' : '']">
+  <div class="ui-radio form-check" :class="[hasError ? 'has-error' : '']">
     <input
     type="radio"
     class="form-check-input"