endorsements WIP

src/layouts/endorsements-page/endorsements-page.vue

@@ -7,7 +7,25 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5 mb-5 endorsements" />
+                <buttonQuestion
+                    v-model="schoolPropertyAnswer"
+                    cmsWidgetName="SchoolPropertyQuestion"
+                    :questionText="schoolPropertyQuestionText"
+                    :answers="schoolPropertyAnswersFromCms"
+                    buttonTypeString="listButton"
+                    isRequired
+                    :validationRules="rules.selectionRequired">
+                </buttonQuestion>
+                <buttonQuestion
+                    v-model="parkingLotAnswer"
+                    cmsWidgetName="ParkingLotQuestion"
+                    :questionText="parkingLotQuestionText"
+                    :answers="parkingLotAnswersFromCms"
+                    buttonTypeString="listButton"
+                    isRequired
+                    :validationRules="rules.selectionRequired">
+                </buttonQuestion>
                 <div class="container-fluid pb-2">
                     <siteFooter
                     ref="siteFooter"
@@ -25,11 +43,13 @@
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import buttonQuestion from '@/digital-components/button-question/button-question.vue';
 // Supporting files
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import globalRules from '@/constants/global-rules.js';
 
 export default {
     name: 'endorsements-page',
@@ -37,6 +57,7 @@ export default {
         siteHeader,
         siteSubHeader,
         siteFooter,
+        buttonQuestion,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
@@ -56,6 +77,29 @@ export default {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
+    data() {
+        return {
+            schoolPropertyAnswer: '',
+            parkingLotAnswer: '',
+            rules: {
+                selectionRequired: globalRules.OPTION_REQUIRED
+            }
+        }
+    },
+    computed: {
+        schoolPropertyQuestionText() {
+            return this.getCmsContent('SchoolPropertyQuestion', 'QuestionText');
+        },
+        schoolPropertyAnswersFromCms() {
+            return this.getCmsContent('SchoolPropertyQuestion', 'Answers');
+        },
+        parkingLotQuestionText() {
+            return this.getCmsContent('ParkingLotQuestion', 'QuestionText');
+        },
+        parkingLotAnswersFromCms() {
+            return this.getCmsContent('ParkingLotQuestion', 'Answers');
+        },
+    },
     methods:
         {
             backButtonAction() {
@@ -71,3 +115,24 @@ export default {
         }
 };
 </script>
+
+<style lang="scss" scoped>
+:deep .endorsements {
+    .subheader-primary {
+        span {
+            font-size: 20px;
+            line-height: 32px;
+        }
+    }
+    .subheader-secondary {
+        p {
+            margin-top: 0.5rem;
+            font-size: 14px;
+            line-height: 24px;
+        }
+        span {
+            text-align: left;
+        }
+    }
+}
+</style>