jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/CSR-319

Browse source
This commit is contained in:
Adam Caouette 2022-03-01 09:19:00 -05:00
commit bb3894441a
17 changed files with 278 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/assets/img/icons/location-pin.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.8 16" xml:space="preserve">
<path d="M6.4 0c-.85 0-1.69.18-2.47.52-.78.34-1.49.84-2.07 1.47A7.026 7.026 0 0 0 0 6.75c0 1.77.67 3.48 1.86 4.77l4.02 4.26c.07.07.15.13.23.16.1.04.19.06.29.06.1 0 .19-.02.28-.06.09-.04.17-.09.23-.16l4.02-4.26a6.884 6.884 0 0 0 1.87-4.77c.01-1.78-.66-3.49-1.87-4.77A6.166 6.166 0 0 0 8.86.51C8.09.18 7.25 0 6.4 0zm0 9.13c-.47 0-.93-.14-1.32-.41-.39-.27-.7-.64-.88-1.09-.19-.44-.23-.93-.14-1.4.09-.47.32-.9.65-1.24.33-.34.76-.57 1.22-.66.46-.09.94-.05 1.38.14.44.18.81.49 1.07.89s.4.87.4 1.35c0 .64-.25 1.26-.7 1.71-.44.46-1.05.71-1.68.71z" fill="#8e9292"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 650 B

15
src/common-components/button-question/button-question.vue
View file

@ -1,7 +1,8 @@
<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
<template>
<div :class="isOverflowScrollable ? 'button_question' : ''">
<div v-if="questionText" class="mt-6 mb-4 d-flex">
<span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
<div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'">
<div v-if="questionText" class="mt-5 mb-4 d-flex">
<span class="fs-5 fw-bold w-100" :class="this.buttonType === 'radio' ? 'text-start' : 'text-center'">{{ questionText }}</span>
</div>
<div class="w-100 d-flex justify-content-center">
<fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
@ -125,8 +126,8 @@ export default {
console.log('BQ handleCheckedChanged, val: ', val)
if(this.isMultiSelect && this.selectedValues) {
// Add or remove item to array of data to emit
const newSelectedValues = this.selectedValues;
if(Array.isArray(this.selectedValues)) {
const newSelectedValues = this.selectedValues;
val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
this.selectedValues = newSelectedValues;
}
@ -147,8 +148,7 @@ export default {
</script>
<style lang="scss" scoped>
.button_question {
color: $black;
.button-question-overflow {
height: calc(100vh - 280px);
.overflow-scroll {
@ -157,4 +157,7 @@ export default {
-webkit-overflow-scrolling: touch;
}
}
.button-question {
color: $black;
}
</style>

13
src/common-components/dropdown-question/dropdown-question.vue
View file

@ -26,22 +26,21 @@ export default {
<style lang="scss">
.dropdown-question {
label {
color: $black;
}
.form-label {
margin-bottom: .25rem;
}
.form-select {
color: $gray-500;
color: $gray-600;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
border: 1px solid $gray-500;
border-radius: .5rem;
min-height: 3rem;
option[selected] {
color: $gray-500;
background-color: red;
}
&:focus,
&:focus-visible {
box-shadow: 0 0 0 2px $blue;
box-shadow: 0 0 0 2.5px $blue;
}
&:disabled,
&.disabled {
@ -53,7 +52,7 @@ export default {
}
}
&:hover {
border: 1px solid transparent;
border: 1px solid $gray-500;
box-shadow: 0 0 0 4px $blue-300;
}
}

34
src/common-components/textbox-question/textbox-question.vue
View file

@ -1,8 +1,10 @@
<template>
<div class="textbox-question">
<div class="textbox-question" :class="hasError ? 'has-error' : ''">
<label :for="inputId" class="form-label">{{labelText}}</label>
<input type="text" class="form-control" :id="inputId" :placeholder="placeholderText" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
<p class="mt-1 mb-0">There has been an error!</p>
<input type="text" class="form-control" :id="inputId" :placeholder="placeholderText" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired" :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']">
<p class="mt-2 form-test-error" v-if="!suppressError">
There has been an error!
</p>
</div>
</template>
@ -16,12 +18,31 @@ export default {
placeholderText: String,
inputId: String,
isRequired: Boolean,
hasIcon: Boolean,// If input has an icon
iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used
hasError: Boolean,
}
};
</script>
<style lang="scss">
.textbox-question {
label {
color: $black;
}
input {
&.has-icon {
background-image: url(~@/assets/img/icons/location-pin.svg);
background-repeat: no-repeat;
background-position: .75rem 50%;
background-size: 1rem auto;
padding: 0 0.75rem 0 2.5rem;
&.icon-right {
background-position: calc(100% - .75rem) 50%;
padding: 0 2.5rem 0 0.75rem
}
}
}
.form-label {
margin-bottom: .25rem;
}
@ -33,7 +54,7 @@ export default {
color: $gray-500;
}
&:focus {
box-shadow: 0 0 0 2px $blue;
box-shadow: 0 0 0 2.5px $blue;
}
&:disabled,
&.disabled {
@ -44,9 +65,12 @@ export default {
}
}
&:hover {
border: 1px solid transparent;
border: 1px solid $gray-500;
box-shadow: 0 0 0 4px $blue-300;
}
}
p {
display: none;
}
}
</style>

138
src/layouts/button-question-examples/button-question-examples.vue Normal file
View file

@ -0,0 +1,138 @@
<template>
<div class="container-fluid">
<h4 class="m-0 p-2 bg-light rounded">List Buttons</h4>
<buttonQuestion :answers="years" text-position="text-start" questionText="List Button as Radio" groupName="years" />
<buttonQuestion :answers="checkboxAnswers" isMultiSelect text-position="text-start" questionText="List Button as checkbox" groupName="check-box-answers" />
<buttonQuestion :answers="checkboxAnswers" isMultiSelect text-position="text-end" questionText="List Button as checkbox text end" groupName="check-box-answers-text-right" />
<buttonQuestion :answers="years" questionText="List Button as Radio text center (default)" groupName="years-text-center" />
<buttonQuestion :answers="years" selectingInitiatesLoad questionText="List Button as Radio with spinner" groupName="years-text-spinner" />
<span>(Selecting button with spinner will cause page overlay, page refresh needed to select buttons from other groups)</span>
<h4 class="m-0 p-2 bg-light rounded mt-5">List ButtonHorizontals</h4>
<buttonQuestion buttonType="listButtonHorizontal" :answers="radioAnswers" questionText="List Button Horizontal as radio" groupName="lbh-radio" />
<buttonQuestion buttonType="listButtonHorizontal" isMultiSelect :answers="horizontalCheckboxAnswers" questionText="List Button Horizontal as checkbox" groupName="lbh-checkbox" />
<h4 class="m-0 p-2 bg-light rounded mt-5">List Cards</h4>
<buttonQuestion buttonType="listCard" :answers="listCardRadio" questionText="List Card as radio" groupName="lc-radio" />
<buttonQuestion isMultiSelect buttonType="listCard" :answers="listCardCheckBox" questionText="List Card as checkbox" groupName="lc-checkbox" />
<buttonQuestion buttonType="listCard" :answers="listCardGroup" questionText="List Cards as radios" groupName="lc-mult" />
<buttonQuestion buttonType="listCard" isMultiSelect :answers="listCardGroup" questionText="List Cards as checkboxes" groupName="lcc-mult" />
<buttonQuestion isWide buttonType="listCard" :answers="listCardGroup" questionText="List Cards as radios full width (text left image right)" groupName="lc-multWide" />
<buttonQuestion isWide isMultiSelect buttonType="listCard" :answers="listCardGroup" questionText="List Cards as checkboxes full width (text left image right)" groupName="lcc-multWide" />
<h4 class="m-0 p-2 bg-light rounded mt-5">Radio</h4>
<buttonQuestion buttonType="radio" :answers="radioAnswers" questionText="Used with radio" groupName="radio" />
</div>
</template>
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
export default {
name: "App",
components: {
buttonQuestion
},
data() {
return {
years: [2023, 2022, 2021, 2020],
checkboxAnswers: [
"Checkbox Answer 1",
"Checkbox Answer 2",
"Checkbox Answer 3",
],
radioAnswers: ["Radio Answer 1", "Radio Answer 2", "Radio Answer 3"],
horizontalCheckboxAnswers: ["HCB Answer 1","HCB Answer 2","HCB Answer 3"],
horizontalRadioAnswers: ["HR Answer 1", "HR Answer 2", "HR Answer 3"],
listCardCheckBox: [
{
Name: "List-Card-CB",
Text: "List Card CB",
SubText: "checkbox",
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
},
],
listCardRadio: [
{
Name: "List-Card-R",
Text: "List Card R",
SubText: "Radio",
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
},
],
listCardCheckBoxHorizontalSubText: [
{
Name: "List-Card-CBHst",
Text: "List Card CBHst",
SubText: "With Subtext",
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
},
],
listCardCheckBoxHorizontal: [
{
Name: "List-Card-CBH",
Text: "List Card CBH",
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
},
],
listRadioHorizontalSubText: [
{
Name: "List-Card-RHst",
Text: "List Card RHst",
SubText: "With Subtext",
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
},
],
listRadioHorizontal: [
{
Name: "List-Card-RH",
Text: "List Card RH",
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
},
],
listCardGroup: [
{
Name: "Side-Window-1",
Text: "Side Window",
SubText: "With Subtext",
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
},
{
Name: "Side-Window-2",
Text: "Side Window",
SubText: "With Subtext that is more than one line",
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
},
{
Name: "Side-Window-3",
Text: "Side Window",
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
},
],
};
},
}
</script>

27
src/layouts/component-test/component-test.vue
View file

@ -27,12 +27,35 @@
</div>
<div class="row">
<div class="col">
<h6 class="my-4">With Error (class="has-error"):</h6>
<h6 class="my-4">With icon aligned left</h6>
<textboxQuestion
labelText="Text Input Label"
placeholderText="Text Input Label"
inputID="test-text-input"
hasIcon
/>
</div>
</div>
<div class="row">
<div class="col">
<h6 class="my-4">With icon aligned right</h6>
<textboxQuestion
labelText="Text Input Label"
placeholderText="Text Input Label"
inputID="test-text-input"
hasIcon
iconRight
/>
</div>
</div>
<div class="row">
<div class="col">
<h6 class="my-4">With Error</h6>
<textboxQuestion
labelText="Text Input Label"
placeholderText="Placeholder"
inputID="test-text-input"
class="has-error"
hasError
/>
</div>
</div>

10
src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
View file

@ -30,9 +30,9 @@ describe("replace-options-question.vue", () => {
//Act
wrapper.vm.selectedDoorSidesValues = ["DriverSide"]
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.emitted()["update:selectedDoorSides"][0]).toEqual([["DriverSide"]]);
expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
});
});
@ -43,11 +43,11 @@ describe("replace-options-question.vue", () => {
const { wrapper } = setupMocks({});
//Act
wrapper.vm.selectedDriverSideReplacOptionsValues = ["FrontDoor"]
wrapper.vm.selectedDriverSideReplaceOptionsValues = ["FrontDoor"]
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.emitted()["update:selectedDriverSideReplacOptions"][0]).toEqual([["FrontDoor"]]);
expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
});
});
@ -62,7 +62,7 @@ describe("replace-options-question.vue", () => {
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.emitted()["update:selectedPassengerSideReplaceOptions"][0]).toEqual([["BacktDoor"]]);
expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
});
});

40
src/layouts/vehicle-damage/side-door-options/side-door-options.vue
View file

@ -68,10 +68,6 @@ export default ({
return {
questionText: String,
answersFromCms: Array,
selectedDoorSides: [],
// Child component data
selectedDriverSideReplacOptions: [],
selectedPassengerSideReplaceOptions: [],
}
},
props: {
@ -87,11 +83,11 @@ export default ({
this.$refs.driverSideOptions.initializeComponent(driverSideReplaceOptions, driverSideOptions);
this.$refs.passengerSideOptions.initializeComponent(passengerSideReplaceOptions, passengerSideOptions);
},
getSideDoorReplacementOptions(){
getSideDoorReplacementOptions(selectedDoorSides, selectedDriverSideReplaceOptions, selectedPassengerSideReplaceOptions){
return {
selectedDoorSides: this.selectedDoorSides,
selectedDriverSideReplacOptions: this.selectedDriverSideReplacOptions,
selectedPassengerSideReplaceOptions: this.selectedPassengerSideReplaceOptions
selectedDoorSides: selectedDoorSides,
selectedDriverSideReplaceOptions: selectedDriverSideReplaceOptions,
selectedPassengerSideReplaceOptions: selectedPassengerSideReplaceOptions
}
},
},
@ -106,29 +102,26 @@ export default ({
},
selectedDoorSidesValues: {
get: function() {
return this.selectedDoorSides;
return this.selectedValues.selectedDoorSides;
},
set: function(newValue) {
this.$emit("update:selectedDoorSides", newValue);
this.selectedValues = this.getSideDoorReplacementOptions();
this.selectedValues = this.getSideDoorReplacementOptions(newValue, this.selectedValues.selectedDriverSideReplaceOptions, this.selectedValues.selectedPassengerSideReplaceOptions);
}
},
selectedDriverSideReplacOptionsValues: {
selectedDriverSideReplaceOptionsValues: {
get: function() {
return this.selectedDriverSideReplacOptions;
return this.selectedValues.selectedDriverSideReplaceOptions;
},
set: function(newValue) {
this.$emit("update:selectedDriverSideReplacOptions", newValue);
this.selectedValues = this.getSideDoorReplacementOptions();
this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, newValue, this.selectedValues.selectedPassengerSideReplaceOptions);
}
},
selectedPassengerSideReplaceOptionsValues: {
get: function() {
return this.selectedPassengerSideReplaceOptions;
return this.selectedValues.selectedPassengerSideReplaceOptions;
},
set: function(newValue) {
this.$emit("update:selectedPassengerSideReplaceOptions", newValue);
this.selectedValues = this.getSideDoorReplacementOptions();
this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, this.selectedValues.selectedDriverSideReplaceOptions, newValue);
}
},
answersToDisplay(){
@ -147,19 +140,12 @@ export default ({
});
},
isDriverSideReplaceOptionsQuestionAvailable(){
return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("DriverSide");
return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("DriverSide") && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes("SideDoor")));
},
isPassengerSideReplaceOptionsQuestionAvailable(){
return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide");
return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide") && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes("SideDoor")));
},
},
mounted() {
if(typeof(this.selectedValues) === "object"){
this.selectedDoorSides = this.selectedValues.selectedDoorSides;
this.selectedDriverSideReplacOptions = this.selectedValues.selectedDriverSideReplacOptions;
this.selectedPassengerSideReplaceOptions = this.selectedValues.selectedPassengerSideReplaceOptions;
}
},
components: {
buttonQuestion,
replaceOptionsQuestion,

2
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -125,7 +125,7 @@ export default {
selectedDamageLocations: [],
sideDoorOptionsData: {
selectedDoorSides: [],
selectedDriverSideReplacOptions: [],
selectedDriverSideReplaceOptions: [],
selectedPassengerSideReplaceOptions: []
},
selectedWindshieldOptions: [],

1
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -15,6 +15,7 @@
/>
<replaceOptionsQuestion ref="replaceOptionsQuestion"
:isAvailable=isReplaceOptionSelected
isMultiSelect
groupName="WindshieldReplaceOptions"
v-model="selectedWindshieldReplaceOptionsValues"
validationRules="windshield-replace-options-required"

6
src/router/index.js
View file

@ -12,6 +12,7 @@ import ComponentTest from "@/layouts/component-test/component-test.vue";
import AddressPOC from "@/layouts/address-poc/address-poc.vue";
import FormTest from "@/layouts/form-test/form-test.vue";
import NestedRadio from "@/layouts/nested-radio-poc/nested-radio.vue";
import buttonQuestionExamples from "@/layouts/button-question-examples/button-question-examples.vue"
const routes = [
{
@ -39,6 +40,11 @@ const routes = [
name: "NestedRadio",
component: NestedRadio,
},
{
path: "/button-question-examples", // This is a temporary route for testing.
name: "buttonQuestionExamples",
component: buttonQuestionExamples,
},
{
path: "/",
name: "root",

2
src/styles/common-error-styles.scss
View file

@ -1,7 +1,7 @@
.has-error {
&.list-button,
&.list-card {
border: 1px solid $red;
border: 1px solid $gray-500;
color: $red;
label {
box-shadow: 0 0 1px $red;

14
src/ux-components/checkbox/checkbox.vue
View file

@ -41,9 +41,16 @@ export default {
&:checked {
background-size: 125%;
border: 1px solid $blue;
+ label {
p {
font-weight: 500;
font-size: .875rem;
color: $black;
}
}
}
&:focus {
box-shadow: 0 0 0 4px $blue-300;
box-shadow: 0 0 0 2.5px $blue;
}
}
&:hover {
@ -51,5 +58,10 @@ export default {
box-shadow: 0 0 0 4px $blue-300;
}
}
p {
font-weight: 400;
font-size: .875rem;
color: $gray-600;
}
}
</style>

8
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -162,9 +162,11 @@ export default {
width: 100%;
color: $gray-600;
&:hover {
box-shadow: 0 0 0 4px $blue-300;
cursor: pointer;
z-index: 4 !important;
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-300;
cursor: pointer;
z-index: 4 !important;
}
}
+ p {
display: none;

6
src/ux-components/list-card/list-card.spec.js
View file

@ -145,7 +145,7 @@ describe("list-card.vue", () => {
// Assert
const label = wrapper.find("label");
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-8"]);
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-4"]);
});
it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is true", async () => {
@ -167,7 +167,7 @@ describe("list-card.vue", () => {
// Assert
const label = wrapper.find("label");
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-8", "checkboxTop"]);
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-4", "checkboxTop"]);
});
it("Should return flex column classes if isWide is false", async () => {
@ -188,7 +188,7 @@ describe("list-card.vue", () => {
// Assert
const label = wrapper.find("label");
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-2"]);
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-3"]);
});
it("Should emit button value on click", async () => {

10
src/ux-components/list-card/list-card.vue
View file

@ -89,13 +89,13 @@ export default {
computed: {
getLabelClasses() {
if (this.isWide) {
let classes = "flex-row py-r ps-3 pe-8";
let classes = "flex-row py-r ps-3 pe-4";
if (this.buttonLabelSubCopy) {
classes += " checkboxTop";
}
return classes;
} else {
return "flex-column pt-4 pb-2";
return "flex-column pt-4 pb-3";
}
},
},
@ -165,8 +165,10 @@ export default {
max-width: 100%;
}
&:hover {
box-shadow: 0px 0px 0px 4px $blue-300;
border: 1px solid transparent;
@include media-breakpoint-up(sm) {
box-shadow: 0px 0px 0px 4px $blue-300;
border: 1px solid transparent;
}
}
input[type="checkbox"],
input[type="radio"] {

16
src/ux-components/radio/radio.vue
View file

@ -10,7 +10,7 @@
:aria-required="isRequired"
:value="value"
:v-model="checkValue"
@change="handleCheckChanged()"
@change="handleCheckChange()"
/>
<label class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@ -89,9 +89,16 @@ export default {
background-size: 71%;
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 4px $blue-300;
box-shadow: 0 0 0 2.5px $blue;
}
}
&:hover {
@ -99,5 +106,10 @@ export default {
box-shadow: 0 0 0 4px $blue-300;
}
}
p {
font-weight: 400;
font-size: .875rem;
color: $gray-600;
}
}
</style>