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; + } +} +