diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 37ebee18e..e412678ff 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -25,17 +25,17 @@
-
-
@@ -53,6 +53,7 @@ export default {
props: {
headerText: String,
footerButtonText: String,
+ suppressPageScroll: Boolean,
onModalOpenedCallback: {
type: Function,
},
@@ -107,8 +108,10 @@ export default {
onModalClosed() {
this.resetButtonStyle();
this.onModalClosedCallback?.();
+ if (this.suppressPageScroll) document.querySelector("body").classList.remove("prevent-modal-scroll");
},
openModal() {
+ if (this.suppressPageScroll) document.querySelector("body").classList.add("prevent-modal-scroll");
const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
modal.show();
this.$emit("isModalOpened", true);
@@ -231,6 +234,29 @@ export default {
}
}
}
+.save-progress-modal-question {
+ p.modal-body {
+ padding: 0;
+ }
+ .modal-body {
+ display: flex;
+ flex-direction: column;
+ .textbox-question {
+ padding: .25rem 0;
+ label {
+ text-align: left;
+ font-weight: 600;
+ }
+ }
+ }
+ .modal-disclaimer {
+ font-size: .75rem;
+ order: 2;
+ }
+ .modal-footer {
+ padding: 1.5rem 0;
+ }
+}
body {
.modal-backdrop {
height: 100%;
diff --git a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
index 982738394..2c4d71803 100644
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@@ -25,7 +25,7 @@
-
+
+
+
diff --git a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.spec.js b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.spec.js
new file mode 100644
index 000000000..15fb1481d
--- /dev/null
+++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.spec.js
@@ -0,0 +1,51 @@
+import { mount, shallowMount } from "@vue/test-utils";
+import saveProgressModalQuestion from "./save-progress-modal-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+jest.mock("@/digital-components/modal/modal", () => ({
+ methods: {
+ openModal: jest.fn(),
+ resetButtonStyle: jest.fn(),
+ },
+}));
+
+describe("save-progress-modal-question ", () => {
+ describe("when openModal is run ", () => {
+ test("the modal should open ", () => {
+ // Arrange
+ const { wrapper } = setupMocks({
+ props: {
+ modelValue: "",
+ modalWidgetName: "testModal",
+ },
+ });
+
+ // Act
+ wrapper.vm.openModal();
+
+ // Assert
+ expect(wrapper.vm.modal).not.toBeNull();
+ });
+ });
+});
+
+function setupMocks({ options, props }) {
+ const mountOptions = getMountOptions({
+ ...options,
+ });
+
+ const mockBaseMixin = {
+ methods: {
+ getCmsContent: jest.fn(),
+ dispatchStoreAction: jest.fn(),
+ },
+ };
+
+ if (props) mountOptions.propsData = props;
+
+ mountOptions.global.mixins = [mockBaseMixin];
+
+ const wrapper = mount(saveProgressModalQuestion, mountOptions);
+
+ return { wrapper };
+}
diff --git a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
new file mode 100644
index 000000000..dcbc5d76e
--- /dev/null
+++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
@@ -0,0 +1,191 @@
+
+
+
+
+
+ {{ modalBodyText }}
+
+
+
+
+
+
+
+
+
diff --git a/src/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.spec.js b/src/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.spec.js
new file mode 100644
index 000000000..7cc3d100c
--- /dev/null
+++ b/src/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.spec.js
@@ -0,0 +1,40 @@
+import { shallowMount } from "@vue/test-utils";
+import saveProgressQuestion from "./save-progress-question";
+
+describe("save-progress-question.vue", () => {
+ it("Should get the modelValue", async () => {
+ // Arrange
+ const text = "test";
+ const wrapper = shallowMount(saveProgressQuestion, {
+ props: {
+ modelValue: text,
+ },
+ attachTo: document.body,
+ });
+
+ // Act
+ const modelValueText = wrapper.vm.value;
+ wrapper.vm.value = "test also";
+
+ // Assert
+ expect(modelValueText).toEqual("test");
+ });
+
+ it("Should emit to set value", async () => {
+ // Arrange
+ const text = "test";
+ const wrapper = shallowMount(saveProgressQuestion, {
+ props: {
+ modelValue: text,
+ },
+ attachTo: document.body,
+ });
+
+ // Act
+ const modelValueText = wrapper.vm.value;
+ wrapper.vm.value = "test also";
+
+ // Assert
+ expect(wrapper.emitted("update:modelValue")).toEqual([["test also"]]);
+ });
+});
diff --git a/src/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.vue b/src/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.vue
new file mode 100644
index 000000000..221aa3415
--- /dev/null
+++ b/src/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
diff --git a/src/layouts/capability-questions/capability-questions.vue b/src/layouts/capability-questions/capability-questions.vue
index 4d637c978..d189f0f44 100644
--- a/src/layouts/capability-questions/capability-questions.vue
+++ b/src/layouts/capability-questions/capability-questions.vue
@@ -12,13 +12,22 @@
@forwardButtonAction="forwardButtonAction"
@back-click="navigateBack"
:key="currentGlassIndex"
- :index="currentGlassIndex" />
+ :index="currentGlassIndex">
+
+
+
+
+
diff --git a/src/layouts/molding-questions/molding-questions.vue b/src/layouts/molding-questions/molding-questions.vue
index 00df8c04b..c314d7225 100644
--- a/src/layouts/molding-questions/molding-questions.vue
+++ b/src/layouts/molding-questions/molding-questions.vue
@@ -12,13 +12,22 @@
@forwardButtonAction="forwardButtonAction"
@back-click="navigateBack"
:key="currentGlassIndex"
- :index="currentGlassIndex" />
+ :index="currentGlassIndex">
+
+
+
+
+
diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue
index bc1ec308e..199a39493 100644
--- a/src/layouts/part-questions/part-questions.vue
+++ b/src/layouts/part-questions/part-questions.vue
@@ -12,13 +12,22 @@
@forwardButtonAction="forwardButtonAction"
@back-click="navigateBack"
:key="currentGlassIndex"
- :index="currentGlassIndex" />
+ :index="currentGlassIndex">
+
+
+
+
+
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 002debed8..a378f881e 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -77,7 +77,7 @@ body {
}
}
}
-.modal-open {
+.modal-open:not(.prevent-modal-scroll) {
.container-fluid {
&.page-container-grouped-styles {
overflow: hidden;
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 9cc61e051..848cf3866 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -5,7 +5,7 @@
:class="[
isPrimary ? 'btn-primary' : 'btn-secondary',
isFloat ? 'float-end' : '',
- isLoaderDisplayed ? 'has-loader' : '',
+ (isLoaderDisplayed && !suppressLoader) ? 'has-loader' : '',
]"
@click="clicked">
{{ this.buttonText }}
@@ -47,7 +47,7 @@ export default {
true
);
if (!this.isDisabled) {
- this.isLoaderDisplayed = true;
+ if (!this.suppressLoader) this.isLoaderDisplayed = true;
this.$emit("click-event");
}
},