From f1b600b446dfbbe6a63ddba208ca942b26c57fea Mon Sep 17 00:00:00 2001 From: bmauger Date: Thu, 26 May 2022 17:03:52 -0400 Subject: [PATCH 1/3] WIP footer menu modal. --- .../footer-menu-modal.spec.js | 1 + .../footer-menu-modal/footer-menu-modal.vue | 52 ++++++++++++++ .../funnel-footer/funnel-footer.vue | 6 +- .../funnel-header/funnel-header.vue | 6 ++ .../menu-button/menu-button.vue | 70 +++++++++++-------- src/layouts/vehicle-damage/vehicle-damage.vue | 2 +- src/styles/common-styles.scss | 12 +++- src/styles/ux-variables.scss | 4 ++ 8 files changed, 120 insertions(+), 33 deletions(-) create mode 100644 src/common-components/footer-menu-modal/footer-menu-modal.spec.js create mode 100644 src/common-components/footer-menu-modal/footer-menu-modal.vue diff --git a/src/common-components/footer-menu-modal/footer-menu-modal.spec.js b/src/common-components/footer-menu-modal/footer-menu-modal.spec.js new file mode 100644 index 000000000..3d0843e10 --- /dev/null +++ b/src/common-components/footer-menu-modal/footer-menu-modal.spec.js @@ -0,0 +1 @@ +test.todo("some test to be written in the future"); diff --git a/src/common-components/footer-menu-modal/footer-menu-modal.vue b/src/common-components/footer-menu-modal/footer-menu-modal.vue new file mode 100644 index 000000000..929461a53 --- /dev/null +++ b/src/common-components/footer-menu-modal/footer-menu-modal.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index 27ee88cb3..4e7ce11c4 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -1,5 +1,5 @@ diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index d4e44feb7..557de9dae 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -5,7 +5,7 @@ ref="theForm" v-slot="{ meta }" > -
+
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss index 850f346b1..13eb42d53 100644 --- a/src/styles/common-styles.scss +++ b/src/styles/common-styles.scss @@ -47,4 +47,14 @@ body { .page-container-grouped-styles { @extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5; } -} \ No newline at end of file + + //Footer modal backdrop adjustments for positioning + .modal-backdrop { + left: 50%; + transform: translateX(-50%); + max-width: 576px; + height: calc(100% - 152px); + top: 72px; + } + +} diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index 88d95030e..52cf89169 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -180,3 +180,7 @@ $box-shadow-inset: inset 0 1px 2px rgba($black, .075); $alert-bg-scale: -90%; $alert-border-scale: -100%; $alert-color-scale: 40%; + +//Modal animation +$modal-fade-transform: translate(0, 0); +$modal-backdrop-opacity: 0; From 298da3b24deecbb755dc50d95b08121905b6d643 Mon Sep 17 00:00:00 2001 From: bmauger Date: Tue, 31 May 2022 16:04:42 -0400 Subject: [PATCH 2/3] Footer modal updates. --- .../footer-menu-modal/footer-menu-modal.vue | 52 -------- .../funnel-footer/funnel-footer.vue | 28 ++--- .../funnel-header/funnel-header.vue | 12 +- .../menu-button/menu-button.spec.js | 1 - .../menu-button/menu-button.vue | 65 ---------- .../menu-modal.spec.js} | 0 .../menu-modal/menu-modal.vue | 116 ++++++++++++++++++ src/layouts/component-test/component-test.vue | 6 +- src/mixins/base-mixin.js | 4 +- 9 files changed, 134 insertions(+), 150 deletions(-) delete mode 100644 src/common-components/footer-menu-modal/footer-menu-modal.vue delete mode 100644 src/common-components/menu-button/menu-button.spec.js delete mode 100644 src/common-components/menu-button/menu-button.vue rename src/common-components/{footer-menu-modal/footer-menu-modal.spec.js => menu-modal/menu-modal.spec.js} (100%) create mode 100644 src/common-components/menu-modal/menu-modal.vue diff --git a/src/common-components/footer-menu-modal/footer-menu-modal.vue b/src/common-components/footer-menu-modal/footer-menu-modal.vue deleted file mode 100644 index 929461a53..000000000 --- a/src/common-components/footer-menu-modal/footer-menu-modal.vue +++ /dev/null @@ -1,52 +0,0 @@ - - - - - diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index 4e7ce11c4..fb07779f0 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -1,21 +1,6 @@ @@ -77,12 +63,15 @@ export default { document.onkeydown = null; }, computed: { + height () { + return this.$refs.infoBox.clientHeight; + }, backLink(){ return this.getCmsContent(this.cmsWidgetName, 'BackButtonText'); }, buttonText(){ return this.customButtontext ? this.customButtontext : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText'); - } + }, }, methods: { onResize() { @@ -114,7 +103,6 @@ export default { diff --git a/src/common-components/menu-button/menu-button.spec.js b/src/common-components/menu-button/menu-button.spec.js deleted file mode 100644 index 3d0843e10..000000000 --- a/src/common-components/menu-button/menu-button.spec.js +++ /dev/null @@ -1 +0,0 @@ -test.todo("some test to be written in the future"); diff --git a/src/common-components/menu-button/menu-button.vue b/src/common-components/menu-button/menu-button.vue deleted file mode 100644 index 477ad4989..000000000 --- a/src/common-components/menu-button/menu-button.vue +++ /dev/null @@ -1,65 +0,0 @@ - - - - - diff --git a/src/common-components/footer-menu-modal/footer-menu-modal.spec.js b/src/common-components/menu-modal/menu-modal.spec.js similarity index 100% rename from src/common-components/footer-menu-modal/footer-menu-modal.spec.js rename to src/common-components/menu-modal/menu-modal.spec.js diff --git a/src/common-components/menu-modal/menu-modal.vue b/src/common-components/menu-modal/menu-modal.vue new file mode 100644 index 000000000..905c17b63 --- /dev/null +++ b/src/common-components/menu-modal/menu-modal.vue @@ -0,0 +1,116 @@ + + + + + diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue index 268351417..9cc376249 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -7,7 +7,7 @@
- +
@@ -1089,7 +1089,7 @@ import textboxQuestion from "@/common-components/textbox-question/textbox-question"; import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question"; import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information"; - import menuButton from "@/common-components/menu-button/menu-button"; + import menuModal from "@/common-components/menu-modal/menu-modal"; export default { name: "App", components: { @@ -1104,7 +1104,7 @@ textboxQuestion, dropdownQuestion, vinInformation, - menuButton, + menuModal, }, data() { return { diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index d0474d67b..0a30524ec 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -43,9 +43,9 @@ export default { } }, getFooterInfoBoxHeight() { - const footerInfoBox = document.querySelector(".footer #infoBox"); + const footerInfoBox = document.querySelector(".footer#infoBox"); return footerInfoBox ? footerInfoBox.offsetHeight : 0; - } + }, }, computed: { storeActions() { From 07c12f4d8be5272f20814c8c057813cace3afa74 Mon Sep 17 00:00:00 2001 From: bmauger Date: Tue, 31 May 2022 16:58:12 -0400 Subject: [PATCH 3/3] Temporarily exclude menu-modal from unit tests. Remove un-needed code. --- jest.config.js | 1 + .../funnel-footer/funnel-footer.spec.js | 28 ++----------------- .../funnel-footer/funnel-footer.vue | 3 -- .../funnel-header/funnel-header.vue | 1 - .../menu-modal/menu-modal.vue | 2 +- src/layouts/vehicle-damage/vehicle-damage.vue | 2 +- 6 files changed, 5 insertions(+), 32 deletions(-) diff --git a/jest.config.js b/jest.config.js index 839db4378..afe4a8e0e 100644 --- a/jest.config.js +++ b/jest.config.js @@ -29,6 +29,7 @@ module.exports = { "!src/common-components/textbox-question/textbox-question.vue", "!src/ux-components/alert\alert.vue", "!src/helpers/validation-rules.js", + "!src/common-components/menu-modal/menu-modal.vue", // END ], // ! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js index 198fa5657..d246b602b 100644 --- a/src/common-components/funnel-footer/funnel-footer.spec.js +++ b/src/common-components/funnel-footer/funnel-footer.spec.js @@ -3,30 +3,6 @@ import funnelFooter from "./funnel-footer"; describe("funnel-footer.vue", () => { - it("Should return footer-link class", async () => { - // Act - const r = { - test:"testing", - clientHeight: 10, - offsetHeight: 24, - }; - - global.document.querySelector = jest.fn().mockImplementation(()=> { - return r; - }); - - const wrapper = mount(funnelFooter, { - mixins: [mockMixin] - }); - - // Assert - const link = wrapper.find("a"); - - // Expect - expect(link.attributes('class')).toContain("footer"); - - }); - it("Should emit ForwardClicked on button click", async () => { // Act const wrapper = mount(funnelFooter, { @@ -53,7 +29,7 @@ describe("funnel-footer.vue", () => { mixins: [mockMixin] }); wrapper.vm.updateButtonText('newText'); - + // Assert expect(wrapper.componentVM.customButtontext).toBe('newText'); }); @@ -65,4 +41,4 @@ const mockMixin = { getCmsContent: jest.fn(), getFooterInfoBoxHeight: jest.fn(()=>80) } -} \ No newline at end of file +} diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index fb07779f0..ab4796325 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -63,9 +63,6 @@ export default { document.onkeydown = null; }, computed: { - height () { - return this.$refs.infoBox.clientHeight; - }, backLink(){ return this.getCmsContent(this.cmsWidgetName, 'BackButtonText'); }, diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue index 24e6c53c1..2244a52ab 100644 --- a/src/common-components/funnel-header/funnel-header.vue +++ b/src/common-components/funnel-header/funnel-header.vue @@ -27,7 +27,6 @@ export default { data() { return { displayGlobalAlert: false, - headerHeight: 0, globalAlertMessage: { isDismissible: false, messageCopy: "", diff --git a/src/common-components/menu-modal/menu-modal.vue b/src/common-components/menu-modal/menu-modal.vue index 905c17b63..de26738f0 100644 --- a/src/common-components/menu-modal/menu-modal.vue +++ b/src/common-components/menu-modal/menu-modal.vue @@ -43,8 +43,8 @@ export default { self.isActive = false; }); myModalEl.addEventListener('show.bs.modal', function (event) { - self.isActive = true; self.currentFooterAndHeaderHeight = self.getFooterInfoBoxHeight() + 72; + self.isActive = true; }) }, components: { diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 557de9dae..d4e44feb7 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -5,7 +5,7 @@ ref="theForm" v-slot="{ meta }" > -
+