From b1efd351a05351c07eca5c52f6b2fd471962f52c Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Wed, 14 Dec 2022 10:22:10 -0500 Subject: [PATCH 1/6] modal component. --- src/common-components/modal/modal.spec.js | 68 +++++++++++ src/common-components/modal/modal.vue | 133 ++++++++++++++++++++++ 2 files changed, 201 insertions(+) create mode 100644 src/common-components/modal/modal.spec.js create mode 100644 src/common-components/modal/modal.vue diff --git a/src/common-components/modal/modal.spec.js b/src/common-components/modal/modal.spec.js new file mode 100644 index 00000000..2664accf --- /dev/null +++ b/src/common-components/modal/modal.spec.js @@ -0,0 +1,68 @@ +import { shallowMount } from "@vue/test-utils"; +import Modal from "./modal"; + +describe("modal.vue", () => { + it("Should display header text when HeaderText is defined in the CMS", async () => { + // Act + const wrapper = shallowMount(Modal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"])); + }); + + it("Should display subheader text when SubheaderText is defined in the CMS", async () => { + // Act + const wrapper = shallowMount(Modal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"])); + }); + + it("Should insert image url when Image is defined in the CMS", async () => { + // Act + const wrapper = shallowMount(Modal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"])); + }); + + it("Should display body text when BodyText is defined in the CMS", async () => { + // Act + const wrapper = shallowMount(Modal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"])); + }); +}); + +const mockMixin = { + methods: { + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + return mockCmsContent[cmsFieldName]; + }), + }, +}; + +const mockCmsContent = { + HeaderText: "Sample header text here.", + SubheaderText: "Sample subheader text here.", + Image: "https://www.sampleImage.sample", + BodyText: "Sample body text here.", + FooterText: "Sample footer text here.", +}; diff --git a/src/common-components/modal/modal.vue b/src/common-components/modal/modal.vue new file mode 100644 index 00000000..9845e089 --- /dev/null +++ b/src/common-components/modal/modal.vue @@ -0,0 +1,133 @@ + + + + + From b31b344137ff53b1dad2527c06d41e5b1e15e731 Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Wed, 14 Dec 2022 10:30:55 -0500 Subject: [PATCH 2/6] button-question-modal component --- .../button-question-modal/button-question-modal.vue | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/common-components/button-question-modal/button-question-modal.vue diff --git a/src/common-components/button-question-modal/button-question-modal.vue b/src/common-components/button-question-modal/button-question-modal.vue new file mode 100644 index 00000000..e69de29b From 0d7e8d4319a5de27ff1776fa0ef3e24cb642b8b6 Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Wed, 14 Dec 2022 13:43:11 -0500 Subject: [PATCH 3/6] Commit --- .../button-question-modal.vue | 128 ++++++++++++++++++ 1 file changed, 128 insertions(+) diff --git a/src/common-components/button-question-modal/button-question-modal.vue b/src/common-components/button-question-modal/button-question-modal.vue index e69de29b..d9aa4415 100644 --- a/src/common-components/button-question-modal/button-question-modal.vue +++ b/src/common-components/button-question-modal/button-question-modal.vue @@ -0,0 +1,128 @@ + + + + + From cf67e216f005f701a55699f790f8e3e2b7e8562f Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Thu, 15 Dec 2022 07:43:19 -0500 Subject: [PATCH 4/6] commit --- .../button-question-modal/button-question-modal.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common-components/button-question-modal/button-question-modal.vue b/src/common-components/button-question-modal/button-question-modal.vue index d9aa4415..bc5c1a1f 100644 --- a/src/common-components/button-question-modal/button-question-modal.vue +++ b/src/common-components/button-question-modal/button-question-modal.vue @@ -41,7 +41,7 @@ import { required } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; export default { - name: "modal", + name: "buttonQuestionModal", props: { cmsWidgetName: String, }, From 489cf492af70001066144d3910d3d21db7b4d78f Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Thu, 15 Dec 2022 10:55:54 -0500 Subject: [PATCH 5/6] commit --- .../textbox-question/textbox-question.vue | 21 +++++++++++++- src/layouts/welcome-page/welcome-page.vue | 29 +++++++++++++++---- 2 files changed, 44 insertions(+), 6 deletions(-) diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index a4462cd0..afee2057 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -10,6 +10,7 @@ class="input-wrapper" :class="[ includeSearchIcon ? 'has-search-icon' : '', + includeSelectIcon ? 'has-select-icon' : '', ]"> -
-
+
+
+
@@ -92,6 +109,8 @@ export default { box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25); border-radius: 1.5rem 1.5rem 0 0; .modal-body { + padding-bottom: 0px; + padding-top:0px; ul { margin-bottom: 0; } @@ -115,6 +134,12 @@ export default { margin: 0; } } + .radioQuestion + { + padding-bottom: 20px; + padding-right: 24px; + padding-left: 24px; + } } } body { diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index afee2057..1779953a 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -12,7 +12,7 @@ includeSearchIcon ? 'has-search-icon' : '', includeSelectIcon ? 'has-select-icon' : '', ]"> - + @focus="$emit('focus', $event.target.value)" + :data-bs-toggle="includeSelectIcon ? 'modal' : ''" + :data-bs-target="'#' + this.cmsWidgetName" />
{{ errorMessage }} diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue index 2936c4f1..f30b17a2 100644 --- a/src/layouts/welcome-page/welcome-page.vue +++ b/src/layouts/welcome-page/welcome-page.vue @@ -24,7 +24,6 @@ placeholderText="Select an option" includeSelectIcon disableAutoFill - :data-bs-target="'#' + DamageCauseQuestion" validationRules="damage-cause-required" />
@@ -41,8 +40,8 @@ import { defineRule } from "vee-validate"; import { required } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; - import textboxQuestion from "@/common-components/textbox-question/textbox-question" - import buttonQuestionModal from "@/common-components/button-question-modal/button-question-modal" + import textboxQuestion from "@/common-components/textbox-question/textbox-question"; + import buttonQuestionModal from "@/common-components/button-question-modal/button-question-modal"; //define validation rules defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED)); @@ -60,7 +59,6 @@ }, validationRules: String, }, - components: { siteHeader, siteSubHeader, textboxQuestion }, async beforeRouteEnter(to, from, next) { // Call APIs @@ -85,7 +83,7 @@ siteHeader, siteSubHeader, buttonQuestionModal, - textboxQuestion + textboxQuestion, }, } diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue index 29234e1c..967421b9 100644 --- a/src/ux-components/button-main/button-main.vue +++ b/src/ux-components/button-main/button-main.vue @@ -11,7 +11,7 @@ {{ this.buttonText }} @@ -28,6 +28,7 @@ export default { loaderColor: String, loaderPosition: String, isFloat: Boolean, + suppressLoader: Boolean, }, data() { return {