Reworking button question widget to work with 3 different button components
This commit is contained in:
Max
parent
e3b1272429
commit
80560902f0
5 changed files with 197 additions and 71 deletions
|
|
@ -6,29 +6,33 @@
|
|||
}}</span>
|
||||
</div>
|
||||
<div class="w-100 d-flex justify-content-center">
|
||||
<fieldset class="w-100" :class="isVehicleQuestion ? vehicleQuestionClasses : isHorizontal ? horizontalClasses : ''" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
|
||||
<fieldset class="w-100" :class="isVehicleQuestion ? vehicleQuestionClasses : ''" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
|
||||
<legend class="sr-only">{{groupName}}</legend>
|
||||
<component :is="buttonType" v-for="answer in answers" :key="answer"
|
||||
:buttonID="answer"
|
||||
@mouseup="chooseAnswer(answer)"
|
||||
@keyup.space="chooseAnswer(answer)"
|
||||
:loaderEnabled="loaderEnabled"
|
||||
:loaderColor="loaderColor"
|
||||
:loaderPosition="loaderPosition"
|
||||
:sizeInRem="sizeInRem"
|
||||
data-test="button"
|
||||
:groupName="groupName"
|
||||
:textPosition="textPosition"
|
||||
:value="modelValue"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:ariaLabelBy="ariaLabelBy"
|
||||
:isRequired="isRequired"
|
||||
:buttonImage="buttonImage"
|
||||
:buttonLabel="buttonLabel"
|
||||
:altText="altText"
|
||||
:buttonLabelSubCopy="buttonLabelSubCopy"
|
||||
/>
|
||||
<div :class="isRow ? 'row g-2' : isColumn ? columnClasses : 'w-100'">
|
||||
<component :is="buttonType" v-for="answer in answers" :key="answer"
|
||||
:buttonID="answer.Name ? answer.Name : answer"
|
||||
@mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
|
||||
@keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
|
||||
:loaderEnabled="loaderEnabled"
|
||||
:loaderColor="loaderColor"
|
||||
:loaderPosition="loaderPosition"
|
||||
:sizeInRem="sizeInRem"
|
||||
data-test="button"
|
||||
:groupName="groupName"
|
||||
:textPosition="textPosition"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:isHorizontal="isHorizontal"
|
||||
:ariaLabelBy="ariaLabelBy"
|
||||
:isRequired="isRequired"
|
||||
:buttonImage="answer.AnswerImageUrl"
|
||||
:buttonImageId="answer.ImageId"
|
||||
:buttonLabel="answer.Text ? answer.Text : answer"
|
||||
:altText="altText"
|
||||
:buttonLabelSubCopy="answer.SubText"
|
||||
:value="modelValue"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -72,7 +76,10 @@ export default {
|
|||
isRequired: Boolean,
|
||||
isVehicleQuestion: Boolean,
|
||||
isHorizontal: Boolean,
|
||||
isColumn: Boolean,
|
||||
isRow: Boolean,
|
||||
buttonImage: String,
|
||||
buttonImageId: String,
|
||||
buttonLabel: String,
|
||||
altText: String,
|
||||
buttonLabelSubCopy: String,
|
||||
|
|
@ -80,7 +87,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
vehicleQuestionClasses: 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0',
|
||||
horizontalClasses: 'd-flex flex-row p-0'
|
||||
columnClasses: 'd-flex flex-row p-0'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -53,39 +53,33 @@
|
|||
<fieldset>
|
||||
<legend class="sr-only">Functioning as Checkbox</legend>
|
||||
<div class="row g-2">
|
||||
<div class="col-4">
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox 1"
|
||||
groupID="checkbox-demo-1"
|
||||
buttonLabelSubCopy="Description"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="side-window-damage-right-all.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox 2"
|
||||
groupID="checkbox-demo-1"
|
||||
buttonLabelSubCopy="Description with more than one line"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox 3"
|
||||
groupID="checkbox-demo-1"
|
||||
buttonLabelSubCopy=""
|
||||
/>
|
||||
</div>
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox 1"
|
||||
groupID="checkbox-demo-1"
|
||||
buttonLabelSubCopy="Description"
|
||||
/>
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="side-window-damage-right-all.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox 2"
|
||||
groupID="checkbox-demo-1"
|
||||
buttonLabelSubCopy="Description with more than one line"
|
||||
/>
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox 3"
|
||||
groupID="checkbox-demo-1"
|
||||
buttonLabelSubCopy=""
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="row my-4">
|
||||
|
|
@ -778,7 +772,7 @@
|
|||
:answers="horizontalCheckboxAnswers"
|
||||
buttonType="listButtonHorizontal"
|
||||
:isMultiSelect="true"
|
||||
:isHorizontal="true"
|
||||
isColumn
|
||||
ariaLabelBy="checkbox"
|
||||
groupName="checkbox-list-horizontal"
|
||||
questionText="List Button Horizontal as checkbox"
|
||||
|
|
@ -786,12 +780,70 @@
|
|||
<buttonQuestion
|
||||
:answers="horizontalRadioAnswers"
|
||||
buttonType="listButtonHorizontal"
|
||||
:isHorizontal="true"
|
||||
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
|
||||
isHorizontal
|
||||
:answers="listCardCheckBoxHorizontal"
|
||||
buttonType="listCard"
|
||||
ariaLabelBy="horizontal_check_card"
|
||||
groupName="horizontal_check-card"
|
||||
questionText="List Card Horizontal as checkbox"
|
||||
/>
|
||||
<buttonQuestion
|
||||
isMultiSelect
|
||||
isHorizontal
|
||||
:answers="listCardCheckBoxHorizontalSubText"
|
||||
buttonType="listCard"
|
||||
ariaLabelBy="horizontal_check_card-st"
|
||||
groupName="horizontal_check-card-st"
|
||||
questionText="With Subtext"
|
||||
/>
|
||||
<buttonQuestion
|
||||
isHorizontal
|
||||
:answers="listRadioHorizontal"
|
||||
buttonType="listCard"
|
||||
ariaLabelBy="horizontal_radio_card"
|
||||
groupName="horizontal_cradio-card"
|
||||
questionText="List Card Horizontal as radio"
|
||||
/>
|
||||
<buttonQuestion
|
||||
isHorizontal
|
||||
: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>
|
||||
</template>
|
||||
|
||||
|
|
@ -829,6 +881,66 @@ export default {
|
|||
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: "side-window-damage-right-all.svg"
|
||||
}],
|
||||
listCardRadio: [{
|
||||
Name: 'List-Card-R',
|
||||
Text: "List Card R",
|
||||
SubText: "Radio",
|
||||
ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
|
||||
AnswerImageUrl: "side-window-damage-right-all.svg"
|
||||
}],
|
||||
listCardCheckBoxHorizontalSubText: [{
|
||||
Name: 'List-Card-CBHst',
|
||||
Text: "List Card CBHst",
|
||||
SubText: "With Subtext",
|
||||
ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
|
||||
AnswerImageUrl: "side-window-damage-right-all.svg"
|
||||
}],
|
||||
listCardCheckBoxHorizontal: [{
|
||||
Name: 'List-Card-CBH',
|
||||
Text: "List Card CBH",
|
||||
ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
|
||||
AnswerImageUrl: "side-window-damage-right-all.svg"
|
||||
}],
|
||||
listRadioHorizontalSubText: [{
|
||||
Name: 'List-Card-RHst',
|
||||
Text: "List Card RHst",
|
||||
SubText: "With Subtext",
|
||||
ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
|
||||
AnswerImageUrl: "side-window-damage-right-all.svg"
|
||||
}],
|
||||
listRadioHorizontal: [{
|
||||
Name: 'List-Card-RH',
|
||||
Text: "List Card RH",
|
||||
ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
|
||||
AnswerImageUrl: "side-window-damage-right-all.svg"
|
||||
}],
|
||||
listCardGroup: [{
|
||||
Name: 'Side-Window-1',
|
||||
Text: "Side Window",
|
||||
SubText: "With Subtext",
|
||||
ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
|
||||
AnswerImageUrl: "side-window-damage-right-all.svg"
|
||||
},
|
||||
{
|
||||
Name: 'Side-Window-2',
|
||||
Text: "Side Window",
|
||||
SubText: "With Subtext that is more than one line",
|
||||
ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
|
||||
AnswerImageUrl: "side-window-damage-right-all.svg"
|
||||
},
|
||||
{
|
||||
Name: 'Side-Window-3',
|
||||
Text: "Side Window",
|
||||
ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
|
||||
AnswerImageUrl: "side-window-damage-right-all.svg"
|
||||
}],
|
||||
};
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
<div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
|
||||
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
|
||||
<label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
|
||||
<span class="m-0" :class="textPosition">{{buttonID}}</span>
|
||||
<span class="m-0" :class="textPosition">{{buttonLabel}}</span>
|
||||
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
|
||||
<loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[loaderColor, loaderPosition]" />
|
||||
</label>
|
||||
|
|
@ -20,6 +21,8 @@ export default {
|
|||
isMultiSelect: Boolean,
|
||||
groupName: String,
|
||||
buttonID: String,
|
||||
buttonLabel: String,
|
||||
buttonLabelSubCopy: String,
|
||||
screenReaderOnlyText: String,
|
||||
textPosition: String,
|
||||
loaderEnabled: Boolean,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="list-group list-button d-flex flex-column w-100 mb-2">
|
||||
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName">
|
||||
<label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
|
||||
<span class="m-0" :class="textPosition">{{ buttonID }}</span>
|
||||
<span class="m-0" :class="textPosition">{{ buttonLabel }}</span>
|
||||
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
|
||||
<loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
|
||||
|
|
@ -19,6 +19,7 @@ export default {
|
|||
props: {
|
||||
isMultiSelect: Boolean,
|
||||
groupName: String,
|
||||
buttonLabel: [Number,String],
|
||||
buttonID: [Number,String],
|
||||
isRequired: Boolean,
|
||||
textPosition: String,
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
<template>
|
||||
<!-- Heavily documented below -->
|
||||
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
|
||||
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
|
||||
<label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="[isHorizontal ? rowClasses : columnClasses,isHorizontal && buttonLabelSubCopy ? 'checkboxTop' : '']" tabindex="-1">
|
||||
<img :class="!isHorizontal ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
|
||||
<p v-if="!isHorizontal" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy && !isHorizontal" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
|
||||
<div v-if="isHorizontal" class="order-2">
|
||||
<p class="m-0 small">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
|
||||
</div>
|
||||
</label>
|
||||
<div class="col">
|
||||
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
|
||||
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
|
||||
<label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="[isHorizontal ? rowClasses : columnClasses,isHorizontal && buttonLabelSubCopy ? 'checkboxTop' : '']" tabindex="-1">
|
||||
<img :id="buttonImageId" :class="!isHorizontal ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
|
||||
<p v-if="!isHorizontal" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy && !isHorizontal" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
|
||||
<div v-if="isHorizontal" class="order-2">
|
||||
<p class="m-0 small">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -26,6 +28,7 @@ export default {
|
|||
isHorizontal: Boolean,
|
||||
//end must choose
|
||||
buttonImage: String,//Required: File name of image
|
||||
buttonImageId: String,
|
||||
buttonLabel: String,//Required: Label text
|
||||
isRequired: Boolean, //Required: is aria-required required or not?
|
||||
altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
|
||||
|
|
|
|||
Loading…
Reference in a new issue