From f6af95a753a2c710578c16f2f074a721cfc9ef8e Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 25 Feb 2022 14:45:57 -0500
Subject: [PATCH] Adding button question example test page

---
 .../button-question/button-question.vue       |   1 +
 .../button-question-examples.vue              | 138 ++++++++++++++++++
 src/router/index.js                           |   6 +
 3 files changed, 145 insertions(+)
 create mode 100644 src/layouts/button-question-examples/button-question-examples.vue

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 6bc67a273..5a1f2ee21 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -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">
diff --git a/src/layouts/button-question-examples/button-question-examples.vue b/src/layouts/button-question-examples/button-question-examples.vue
new file mode 100644
index 000000000..6df20ddf1
--- /dev/null
+++ b/src/layouts/button-question-examples/button-question-examples.vue
@@ -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>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index b564b7e94..337c3f766 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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",