diff --git a/src/digital-components/base-input-button/base-input-button.vue b/src/digital-components/base-input-button/base-input-button.vue
index 8768bb8c..0c92db50 100644
--- a/src/digital-components/base-input-button/base-input-button.vue
+++ b/src/digital-components/base-input-button/base-input-button.vue
@@ -121,9 +121,7 @@ export default {
return this.isMultiSelect ? "checkbox" : "radio";
},
buttonId() {
- return `${this.groupName?.replace(" ", "-")}-${this.value
- ?.toString()
- ?.replace(" ", "-")}`;
+ return `${this.groupName}-${this.value}`.replaceAll(" ", "-");
},
isValueSelectedOnClick() {
return this.isMultiSelect || this.selectingInitiatesLoad;
diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 5679e96c..55033df7 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -31,7 +31,7 @@
+ :key="answer.value ?? answer">
@@ -27,7 +27,7 @@
:loaderEnabled="false"
isRequired
isSmallQuestionText
- :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
+ :groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}-${selectedTint}`)"
:validationRules="partValidationRules" />
@@ -210,6 +210,10 @@ export default {
}
});
},
+
+ replaceAllSpaceWithDash(str) {
+ return String(str).replaceAll(" ", "-");
+ },
},
watch: {
selectedTint() {
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 238d99f5..5be0c629 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -76,69 +76,75 @@ export default {
value: inputValue,
handleChange,
errors,
+ resetField
} = useField(props.groupName, props.validationRules,
- {
- type: inputType,
- checkedValue: props.value,
- });
- return {
- handleChange,
- errors,
- };
- },
- };
-
+ {
+ type: inputType
+ });
-
+
+ .form-check-input {
+ border: 1px solid $gray-500;
+ border-radius: 50%;
+ margin-right: 0.5rem;
+
+ &:checked {
+ background-color: $white;
+ background-size: 71%;
+ background-position: center;
+ border: 1px solid $blue;
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
+ + label {
+ p {
+ font-weight: 500;
+ font-size: .875rem;
+ color: $black;
+ }
+ }
+ }
+ &:focus {
+ box-shadow: 0 0 0 2.5px $blue;
+ }
+
+ &, & + label {
+ margin-top: 0;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ }
+
+ &:hover {
+ .form-check-input {
+ box-shadow: 0 0 0 4px $blue-300;
+ }
+ }
+ p {
+ font-weight: 400;
+ font-size: .875rem;
+ color: $gray-600;
+ }
+}
+