-
@@ -42,40 +41,71 @@
@@ -92,9 +122,17 @@ export default {
.modal-header {
border-bottom: none;
.btn-close {
+ position: absolute;
+ right: 1rem;
+ top: 1rem;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
opacity: 1;
}
+
+ .modal-title {
+ font-weight: 500;
+ color: rgb(0, 0, 0);
+ }
}
&.modal-component {
.modal-dialog {
diff --git a/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.spec.js b/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.spec.js
new file mode 100644
index 000000000..f212d8ec3
--- /dev/null
+++ b/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.spec.js
@@ -0,0 +1,187 @@
+import { shallowMount } from "@vue/test-utils";
+import modalButtonMain from "./modal-button-main";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
+
+describe("modal-button-main.vue", () => {
+ it("Should return btn-primary class", () => {
+ // Arrange/Act
+ const wrapper = shallowMount(
+ modalButtonMain,
+ setupMocks({
+ propsData: {
+ isPrimary: true,
+ },
+ })
+ );
+ const button = wrapper.find("button");
+
+ // Assert
+ expect(button.attributes("class")).toContain("btn-primary");
+ });
+
+ it("Should return aria-disabled state", () => {
+ // Arrange/Act
+ const wrapper = shallowMount(
+ modalButtonMain,
+ setupMocks({
+ propsData: {
+ isDisabled: true,
+ },
+ })
+ );
+ const button = wrapper.find("button");
+
+ // Assert
+ expect(button.attributes()["aria-disabled"]).toEqual("true");
+ });
+
+ it("Should return loader color", async () => {
+ // Arrange
+ const wrapper = shallowMount(
+ modalButtonMain,
+ setupMocks({
+ propsData: {
+ loaderColor: "blue",
+ loaderEnabled: true,
+ },
+ })
+ );
+
+ // Act
+ wrapper.vm.clicked();
+ await nextTick();
+
+ // Assert
+ const loader = wrapper.find("loader-stub");
+ expect(loader.attributes("class")).toContain("blue");
+ });
+
+ it("Should return loader position", async () => {
+ // Arrange
+ const wrapper = shallowMount(
+ modalButtonMain,
+ setupMocks({
+ propsData: {
+ loaderPosition: "right",
+ loaderEnabled: true,
+ },
+ })
+ );
+
+ // Act
+ wrapper.vm.clicked();
+ await nextTick();
+
+ // Assert
+ const loader = wrapper.find("loader-stub");
+ expect(loader.attributes("class")).toContain("right");
+ });
+
+ it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => {
+ // Arrange
+ const wrapper = shallowMount(
+ modalButtonMain,
+ setupMocks({
+ propsData: {
+ loaderPosition: "right",
+ loaderEnabled: true,
+ },
+ })
+ );
+
+ wrapper.setData({
+ isLoaderDisplayed: true,
+ });
+
+ // Act
+ wrapper.vm.removeLoader();
+ await nextTick();
+
+ // Assert
+ const loader = wrapper.find("loader-stub");
+ expect(wrapper.vm.isLoaderDisplayed).toBe(false);
+ });
+
+ it("Should set 'isLoaderDisplayed' to false when calling 'resetButtonStyle'", async () => {
+ // Arrange
+ const wrapper = shallowMount(
+ modalButtonMain,
+ setupMocks({
+ propsData: {
+ loaderPosition: "right",
+ loaderEnabled: true,
+ },
+ })
+ );
+
+ wrapper.setData({
+ isLoaderDisplayed: true,
+ });
+
+ // Act
+ wrapper.vm.resetButtonStyle();
+ await nextTick();
+
+ // Assert
+ expect(wrapper.vm.isLoaderDisplayed).toBe(false);
+ });
+
+ it("Should emit 'click-event' event when clicking if the button is enabled", async () => {
+ // Arrange
+ const wrapper = shallowMount(
+ modalButtonMain,
+ setupMocks({
+ propsData: {
+ loaderPosition: "right",
+ loaderEnabled: true,
+ isDisabled: false,
+ },
+ })
+ );
+
+ const buttonElement = wrapper.find("button");
+
+ // Act
+ buttonElement.trigger("click");
+
+ await nextTick();
+
+ // Assert
+ expect(wrapper.emitted("click-event")).toBeTruthy();
+ });
+
+ it("Should not emit 'click-event' event when clicking if the button is disabled", async () => {
+ // Arrange
+ const wrapper = shallowMount(
+ modalButtonMain,
+ setupMocks({
+ propsData: {
+ loaderPosition: "right",
+ loaderEnabled: true,
+ isDisabled: true,
+ },
+ })
+ );
+
+ const buttonElement = wrapper.find("button");
+
+ // Act
+ buttonElement.trigger("click");
+
+ await nextTick();
+
+ // Assert
+ expect(wrapper.emitted("click-event")).toBeFalsy();
+ });
+});
+
+function setupMocks(mountOptionsMockData = {}) {
+ const defaultMountOptions = { route: { query: { fmgPage: "page-name" } } };
+ const baseMountOptions = getMountOptions(
+ Object.assign(defaultMountOptions, mountOptionsMockData)
+ );
+ const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
+
+ return allMountOptions;
+}
diff --git a/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue b/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue
new file mode 100644
index 000000000..eaffdf2d0
--- /dev/null
+++ b/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue
@@ -0,0 +1,153 @@
+
+
+
+
+
+
+
diff --git a/src/common-components/question-chain/question-chain.spec.js b/src/digital-components/question-chain/question-chain.spec.js
similarity index 99%
rename from src/common-components/question-chain/question-chain.spec.js
rename to src/digital-components/question-chain/question-chain.spec.js
index 8288f351c..2444fd22d 100644
--- a/src/common-components/question-chain/question-chain.spec.js
+++ b/src/digital-components/question-chain/question-chain.spec.js
@@ -1,5 +1,5 @@
import { shallowMount } from "@vue/test-utils";
-import questionChain from "@/common-components/question-chain/question-chain.vue";
+import questionChain from "./question-chain.vue";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { nextTick } from "vue";
diff --git a/src/common-components/question-chain/question-chain.vue b/src/digital-components/question-chain/question-chain.vue
similarity index 98%
rename from src/common-components/question-chain/question-chain.vue
rename to src/digital-components/question-chain/question-chain.vue
index bf68a4363..d72cec9c8 100644
--- a/src/common-components/question-chain/question-chain.vue
+++ b/src/digital-components/question-chain/question-chain.vue
@@ -17,7 +17,7 @@
+
+
diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/fmg-components/funnel-footer/funnel-footer.spec.js
similarity index 100%
rename from src/common-components/funnel-footer/funnel-footer.spec.js
rename to src/fmg-components/funnel-footer/funnel-footer.spec.js
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/fmg-components/funnel-footer/funnel-footer.vue
similarity index 97%
rename from src/common-components/funnel-footer/funnel-footer.vue
rename to src/fmg-components/funnel-footer/funnel-footer.vue
index 2a6119681..f1900596b 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/fmg-components/funnel-footer/funnel-footer.vue
@@ -34,6 +34,7 @@ import buttonMain from "@/ux-components/button-main/button-main";
export default {
name: "funnelFooter",
+ emits: ["BackClicked", "ForwardClicked"], // <--- should remove oodles of warnings in dev tools
props: {
isForwardActionDisabled: Boolean,
isBackButtonHidden: { type: Boolean, default: false },
diff --git a/src/common-components/funnel-header/funnel-header.spec.js b/src/fmg-components/funnel-header/funnel-header.spec.js
similarity index 100%
rename from src/common-components/funnel-header/funnel-header.spec.js
rename to src/fmg-components/funnel-header/funnel-header.spec.js
diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
similarity index 96%
rename from src/common-components/funnel-header/funnel-header.vue
rename to src/fmg-components/funnel-header/funnel-header.vue
index f952b94a8..acfacd709 100644
--- a/src/common-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -19,7 +19,7 @@
import alert from "@/ux-components/alert/alert";
import eventBus from "@/helpers/event-bus/event-bus";
import { globalEvents } from "@/constants/events";
-import menuModal from "@/common-components/funnel-header/menu-modal/menu-modal";
+import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
export default {
name: "funnel-header",
diff --git a/src/common-components/funnel-header/menu-modal/menu-modal.spec.js b/src/fmg-components/funnel-header/menu-modal/menu-modal.spec.js
similarity index 100%
rename from src/common-components/funnel-header/menu-modal/menu-modal.spec.js
rename to src/fmg-components/funnel-header/menu-modal/menu-modal.spec.js
diff --git a/src/common-components/funnel-header/menu-modal/menu-modal.vue b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
similarity index 90%
rename from src/common-components/funnel-header/menu-modal/menu-modal.vue
rename to src/fmg-components/funnel-header/menu-modal/menu-modal.vue
index fd0c96cb8..ccf2c38e0 100644
--- a/src/common-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -4,8 +4,7 @@
class="menu-button"
type="button"
:class="[isActive ? 'active' : '']"
- data-bs-toggle="modal"
- data-bs-target="#footerModal"
+ @click="toggleModal"
aria-label="Hamburger Menu (modal window)">
@@ -22,19 +21,6 @@
aria-hidden="true"
v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }"
:style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
-