Merge pull request #119 from Safelite/brm-list-card-demo-additions

CSR-241 add component variations to test page.

src/layouts/component-test/component-test.vue

@@ -67,6 +67,23 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Checkbox No Description</h6>
+        <fieldset>
+          <legend class="sr-only">Checkbox no Description</legend>
+          <listCard
+          isMultiSelect
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Checkbox b"
+          groupID="checkbox-demo-1a"
+          buttonLabelSubCopy=""
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Functioning as Radio Button</h6>
@@ -84,6 +101,23 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Radio Button no Description</h6>
+        <fieldset>
+          <legend class="sr-only">Radio Button no Description</legend>
+          <listCard
+          isRadio
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Radio Button b"
+          groupID="radio-demo-2b"
+          buttonLabelSubCopy=""
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
@@ -101,6 +135,23 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Checkbox no Description</h6>
+        <fieldset>
+          <legend class="sr-only">Checkbox no Description</legend>
+          <listCard
+          isMultiSelectHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Horizontal Checkbox b"
+          groupID="checkbox-demo-3b"
+          buttonLabelSubCopy=""
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
@@ -118,6 +169,23 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Radio Button no Description</h6>
+        <fieldset>
+          <legend class="sr-only">Radio Button no Description</legend>
+          <listCard
+          isRadioHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Horizontal Radio Button b"
+          groupID="radio-demo-4b"
+          buttonLabelSubCopy=""
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">With error</h6>

src/ux-components/list-card/list-card.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- Heavily documented below -->
   <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
@@ -41,17 +42,19 @@
 export default {
   name: "listCard",
   props: {
-    buttonImage: String,
+    //Must choose one of the following four options
-    buttonLabel: String,
+    isMultiSelect: Boolean,//Defines use as checkbox
+    isRadio: Boolean,//Defines use as radio button
+    isMultiSelectHorizontal: Boolean,//Defines use as horizontal checkbox
+    isRadioHorizontal: Boolean,//Defines use as horizontal radio button
+    //end must choose
+    buttonImage: String,//Optional: File name of image
+    buttonLabel: String,//Required: Label text
     altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
-    buttonID: String,
+    buttonID: String,//Required: Unique
-    groupName: String,
+    groupName: String,//Rquired: Unique
-    isMultiSelect: Boolean,
+    buttonLabelSubCopy: String,//Optional: sub text
-    isRadio: Boolean,
+    hasError: Boolean//Used to show error state
-    isMultiSelectHorizontal: Boolean,
-    isRadioHorizontal: Boolean,
-    buttonLabelSubCopy: String,
-    hasError: Boolean
   }
 };
 </script>