Merge pull request #254 from Safelite/buttonQuestion-test
Adding button question example test page
This commit is contained in:
max-dempsey
GitHub
commit
13e5e53965
3 changed files with 145 additions and 0 deletions
|
|
@ -1,3 +1,4 @@
|
|||
<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component#Example-of-listButton-as-radio-button -->
|
||||
<template>
|
||||
<div :class="isOverflowScrollable ? 'button_question' : ''">
|
||||
<div v-if="questionText" class="mt-6 mb-4 d-flex">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue