Merge branch 'develop' into feature/fix_selection_logic

src/common-components/funnel-footer/funnel-footer.vue

@@ -97,6 +97,10 @@ export default {
   .btn-primary {
     width: 100%;
   }
+  a {
+    display: flex;
+    justify-content: center;
+  }
   @media only screen and (min-width: 340px) {
     .button-col,
     .link-col {
@@ -105,6 +109,10 @@ export default {
     .btn-primary {
       width: auto;
     }
+    a {
+      display: flex;
+      justify-content: start;
+    }
   }
 }
 </style>

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

@@ -13,6 +13,14 @@
           tabIndex="1"
           checkboxLabel="I'm a checkbox"
         />
+        <p class="my-3">With Error:</p>
+        <checkbox
+          checkboxName="demo checkbox"
+          buttonID="checkbox-2"
+          tabIndex="1"
+          checkboxLabel="Error!"
+          hasError
+        />
       </div>
     </div>
     <div class="row my-4">
@@ -28,22 +36,32 @@
           buttonID="radio-button-a"
           isRequired
           value="I'm a radio button!"
-          modelValue="Model Value 1"
           screenReaderOnlyText="Model Value 1"
         />
-      </div>
-      <div class="col">
         <radio
           groupName="radio-demo-2"
           buttonLabel="I'm also a radio button!"
           buttonID="radio-button-b"
           isRequired
           value="I'm also a radio button!"
-          modelValue="Model Value 2"
           screenReaderOnlyText="Model Value 2"
         />
       </div>
     </div>
+    <div class="row">
+      <div class="col">
+        <p class="my-3">With Error:</p>
+        <radio
+          groupName="radio-demo-3"
+          buttonLabel="Error!"
+          buttonID="radio-button-c"
+          isRequired
+          value="Error!"
+          screenReaderOnlyText="Model Value 1"
+          hasError
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
@@ -61,12 +79,39 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonMain buttonText="Secondary" loaderColor="white" sizeInRem="1" />
+        <buttonMain
+          isPrimary
+          buttonText="Primary Disabled"
+          loaderColor="white"
+          sizeInRem="1"
+          disabled
+        />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonBack backButtonAccessibleText="Back button label" />
+        <buttonMain
+          buttonText="Secondary"
+          loaderColor="white"
+          sizeInRem="1"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonMain
+          buttonText="Secondary Disabled"
+          loaderColor="white"
+          sizeInRem="1"
+          disabled
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonBack
+          backButtonAccessibleText="Back button label"
+        />
       </div>
     </div>
     <div class="row my-4">
@@ -98,44 +143,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkbox in Column Layout</h6>
-      </div>
-    </div>
-    <fieldset>
-      <legend class="sr-only">Functioning as Checkbox</legend>
-      <div class="row g-2">
-        <listCard
-          isMultiSelect
-          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 1"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy="Description"
-        />
-        <listCard
-          isMultiSelect
-          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 2"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy="Description with more than one line"
-        />
-        <listCard
-          isMultiSelect
-          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 3"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy=""
-        />
-      </div>
-    </fieldset>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
@@ -151,7 +158,7 @@
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
-            buttonID="List Card Checkbox"
+            buttonID="List Card Checkbox 1"
             groupID="checkbox-demo-1"
             buttonLabelSubCopy="Description"
           />
@@ -168,13 +175,31 @@
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
-            buttonID="List Card Checkbox b"
+            buttonID="List Card Checkbox 2"
             groupID="checkbox-demo-1a"
             buttonLabelSubCopy=""
           />
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Checkbox with Error</h6>
+        <fieldset>
+          <legend class="sr-only">Checkbox with Error</legend>
+          <listCard
+            isMultiSelect
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Checkbox 3"
+            groupID="checkbox-demo-1e"
+            buttonLabelSubCopy="Description"
+            hasError
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Functioning as Radio Button</h6>
@@ -186,7 +211,7 @@
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Radio Button"
-            groupID="radio-demo-2"
+            groupID="radio-demo-2b"
             buttonLabelSubCopy="Description"
           />
         </fieldset>
@@ -209,6 +234,24 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Radio Button with Error</h6>
+        <fieldset>
+          <legend class="sr-only">Radio Button with Error</legend>
+          <listCard
+            isRadio
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Radio Button c"
+            groupID="radio-demo-2b"
+            buttonLabelSubCopy="Description"
+            hasError
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
@@ -245,6 +288,25 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Horizontal with Error</h6>
+        <fieldset>
+          <legend class="sr-only">Horizontal with Error</legend>
+          <listCard
+            isMultiSelect
+            isWide
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+            buttonLabel="Side Window"
+            altText=""
+            buttonID="List Card Horizontal Checkbox d"
+            groupID="checkbox-demo-3d"
+            buttonLabelSubCopy=""
+            hasError
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
@@ -279,6 +341,24 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Horizontal with Error</h6>
+        <fieldset>
+          <legend class="sr-only">Horizontal with Error</legend>
+          <listCard
+            isWide
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Horizontal Radio Button e"
+            groupID="radio-demo-4e"
+            buttonLabelSubCopy=""
+            hasError
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
@@ -333,6 +413,21 @@
           sizeInRem="1"
           screenReaderOnlyText=" opens new window"
         />
+        <h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
+        <listButton
+          isMultiSelect
+          groupName="demo-2"
+          ariaLabelBy="vehicle-year"
+          buttonID="2019b"
+          buttonLabel="2019"
+          isRequired="true"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
       </div>
     </div>
     <div class="row">
@@ -381,6 +476,20 @@
           sizeInRem="1"
           screenReaderOnlyText=" opens new window"
         />
+        <h6 class="mx-2 my-4">Radio Button with Error</h6>
+        <listButton
+          groupName="demo-1-checkbox"
+          ariaLabelBy="vehicle-year"
+          buttonID="2016"
+          buttonLabel="2016"
+          isRequired="true"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
       </div>
     </div>
     <div class="row my-4">
@@ -652,6 +761,63 @@
         />
       </div>
     </div>
+    <div class="row px-3">
+      <h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <div
+        role="radiogroup"
+        aria-labelledby="demo-4-radio-group"
+        class="d-flex flex-row p-0"
+      >
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
+        <listButtonHorizontal
+          isMultiSelect
+          groupName="demo-4b"
+          ariaLabelBy="vehicle-model"
+          buttonID="1b"
+          buttonLabel="1"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="1"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+        <listButtonHorizontal
+          isMultiSelect
+          groupName="demo-4b"
+          ariaLabelBy="vehicle-model"
+          buttonID="2b"
+          buttonLabel="2"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="2"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+        <listButtonHorizontal
+          isMultiSelect
+          groupName="demo-4b"
+          ariaLabelBy="vehicle-model"
+          buttonID="3b"
+          buttonLabel="3"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="3"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+      </div>
+    </div>
     <div class="row px-3">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
@@ -706,6 +872,63 @@
         />
       </div>
     </div>
+    <div class="row px-3">
+      <h6 class="mx-2 my-4 d-flex align-self-start">Radio Button with Error</h6>
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <div
+        role="radiogroup"
+        aria-labelledby="demo-4-checkbox-group"
+        class="d-flex flex-row p-0"
+      >
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
+        <listButtonHorizontal
+          groupName="demo-4-checkboxc"
+          ariaLabelBy="vehicle-model"
+          buttonID="4c"
+          buttonLabel="4"
+          textPosition="text-center"
+          loaderEnabled="true"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="1"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+        <listButtonHorizontal
+          groupName="demo-4-checkboxc"
+          ariaLabelBy="vehicle-model"
+          buttonID="5c"
+          buttonLabel="5"
+          textPosition="text-center"
+          loaderEnabled="true"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="2"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+        <listButtonHorizontal
+          groupName="demo-4-checkboxc"
+          ariaLabelBy="vehicle-model"
+          buttonID="6c"
+          buttonLabel="6"
+          textPosition="text-center"
+          loaderEnabled="true"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="3"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Typography</h4>
@@ -822,129 +1045,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Site Header</h4>
-      </div>
-    </div>
-    <div class="row my-3">
-      <div class="col">
-        <funnelHeader
-          imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Vehicle Banner</h4>
-      </div>
-    </div>
-    <div class="row my-3">
-      <div class="col">
-        <vehicleBanner
-        vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
-         :displayGenericVehicleImage=true
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Button Question</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <buttonQuestion
-        :answers="checkboxAnswers"
-        :isMultiSelect="true"
-        ariaLabelBy="checkbox"
-        groupName="checkbox-list"
-        questionText="List Button as checkbox"
-        />
-        <buttonQuestion
-        :answers="radioAnswers"
-        ariaLabelBy="radio"
-        groupName="radio-list"
-        questionText="List Button as radio"
-        />
-        <buttonQuestion
-        :answers="horizontalCheckboxAnswers"
-        buttonType="listButtonHorizontal"
-        :isMultiSelect="true"
-        isColumn
-        ariaLabelBy="checkbox"
-        groupName="checkbox-list-horizontal"
-        questionText="List Button Horizontal as checkbox"
-        />
-        <buttonQuestion
-        :answers="horizontalRadioAnswers"
-        buttonType="listButtonHorizontal"
-        isColumn
-        ariaLabelBy="radio"
-        groupName="radio-list-horizontal"
-        questionText="List Button Horizontal as radio"
-        sizeInRem="1"
-        />
-        <buttonQuestion
-        :answers="listCardCheckBox"
-        buttonType="listCard"
-        isMultiSelect
-        ariaLabelBy="check_card"
-        groupName="check-list-card"
-        questionText="List Card as checkbox"
-        />
-        <buttonQuestion
-        :answers="listCardRadio"
-        buttonType="listCard"
-        ariaLabelBy="radio_card"
-        groupName="radio-card"
-        questionText="List Card as radio"
-        />
-        <buttonQuestion
-        isMultiSelect
-        isWide
-        :answers="listCardCheckBoxHorizontal"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_check_card"
-        groupName="horizontal_check-card"
-        questionText="List Card Horizontal as checkbox"
-        />
-        <buttonQuestion
-        isMultiSelect
-        isWide
-        :answers="listCardCheckBoxHorizontalSubText"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_check_card-st"
-        groupName="horizontal_check-card-st"
-        questionText="With Subtext"
-        />
-        <buttonQuestion
-        isWide
-        :answers="listRadioHorizontal"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_radio_card"
-        groupName="horizontal_cradio-card"
-        questionText="List Card Horizontal as radio"
-        />
-        <buttonQuestion
-        isWide
-        :answers="listRadioHorizontalSubText"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_radio_card-st"
-        groupName="horizontal_cradio-card-st"
-        questionText="With Subtext"
-        />
-        <buttonQuestion
-        isMultiSelect
-        isRow
-        :answers="listCardGroup"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_radio_card-group"
-        groupName="horizontal_cradio-card-group"
-        questionText="In column layout"
-        />
-      </div>
-    </div>
   </div>
 </template>
 
@@ -954,8 +1054,6 @@ import buttonBack from "@/common-components/button-back/button-back";
 import listCard from "@/ux-components/list-card/list-card";
 import listButton from "@/ux-components/list-button/list-button";
 import alert from "@/ux-components/alert/alert";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import checkbox from "@/ux-components/checkbox/checkbox";
 import radio from "@/ux-components/radio/radio";
@@ -968,11 +1066,9 @@ export default {
     listCard,
     listButton,
     alert,
-    vehicleBanner,
     listButtonHorizontal,
     checkbox,
     radio,
-    funnelHeader,
     textLink
   },
   data() {

src/styles/common-error-styles.scss

@@ -13,6 +13,7 @@
   input[type=checkbox]:checked + label,
   input[type=radio]:checked + label {
     box-shadow: 0 0 0 2.5px transparent !important;
+    border: 1px solid $blue;
   }
   &.list-button-horizontal {
     color: $red;
@@ -20,6 +21,16 @@
       border: 1px solid $red;
     }
   }
+  &.ui-radio,
+  &.ui-checkbox {
+    input[type=radio]+label:before,
+    input[type=checkbox]+label:before {
+      border: 1px solid $red;
+    }
+    input[type=checkbox]:checked + label:before {
+      border: 1px solid $blue;
+    }
+  }
 }
 
 .form-test-error {

src/ux-components/button-main/button-main.vue

@@ -56,6 +56,7 @@ export default {
     border-radius: $border-radius-lg;
     color: $white;
     justify-content: center;
+    font-weight: 500;
     &:hover {
       background: linear-gradient(
         270deg,
@@ -82,7 +83,8 @@ export default {
         $gray-200 0%,
         $gray-200 100%
       ) !important;
-      color: $gray-550 !important;
+      color: $gray-600 !important;
+      font-weight: 400;
       height: 48px;
       border: none;
       border-radius: $border-radius-lg;
@@ -103,6 +105,7 @@ export default {
     border: 1px solid $blue;
     border-radius: $border-radius-lg;
     color: $blue;
+    font-weight: 500;
     transition: all 150ms linear;
     &:hover {
       color: $white;
@@ -118,10 +121,13 @@ export default {
     }
     &:disabled {
       background: transparent;
-      color: $gray !important;
+      color: $gray-550 !important;
+      font-weight: 400;
       height: 48px;
-      border: 1px solid $gray-300;
+      border: 1px solid $gray-550;
       border-radius: $border-radius-lg;
+      cursor: pointer;
+      pointer-events: all;
     }
     &.has-loader {
       color: $white;

src/ux-components/checkbox/checkbox.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
-  <div class="ui-checkbox d-flex">
+  <div class="ui-checkbox d-flex" :class="[hasError ? 'has-error' : '']">
     <input
       type="checkbox"
       aria-checked="false"
@@ -28,6 +28,7 @@ export default {
     checkboxLabel: String,
     screenReaderOnlyText: String,
     isRequired: Boolean,
+    hasError: Boolean
   },
 };
 </script>

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
+    :class="hasError ? 'has-error' : ''"
     @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
@@ -71,6 +72,7 @@ export default {
       default: "",
     },
     selectedButtonIDs: [Array, String],
+    hasError: Boolean,
   },
   data() {
     return {

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

@@ -1,6 +1,7 @@
 <template>
   <div
     class="list-group list-button d-flex flex-column w-100 mb-2"
+    :class="hasError ? 'has-error' : ''"
     @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
@@ -73,6 +74,7 @@ export default {
       default: "",
     },
     selectedButtonIDs: [Array, String],
+    hasError: Boolean,
   },
   data() {
     return {

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

@@ -2,7 +2,7 @@
   <div :class="'col' + colLength">
     <div
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
-      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '']"
+      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
     >
       <input
         :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -53,10 +53,8 @@ import { useField } from "vee-validate";
 export default {
   name: "listCard",
   props: {
-    //Must choose one of the following four options
     isMultiSelect: Boolean, //Defines use as checkbox
     isWide: Boolean,
-    //end must choose
     buttonImage: String, //Required: File name of image
     buttonImageId: String,
     buttonLabel: String, //Required: Label text
@@ -73,6 +71,7 @@ export default {
     colLength: String,
     validationRules: String,
     selectedButtonIDs: [Array, String],
+    hasError: Boolean,
   },
   data(){
     return {

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">
+  <div class="ui-radio d-flex" :class="[hasError ? 'has-error' : '']">
     <input
     type="radio"
     aria-checked="false"
@@ -35,6 +35,7 @@ export default {
       default: "",
     },
     screenReaderOnlyText: String,
+    hasError: Boolean,
   },
   data() {
     return {