From fa965468b480f873fa91e5e02f310df64a2c1f6b Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Mon, 5 Jan 2026 10:42:15 -0600 Subject: [PATCH 01/14] Initial work on moving heritage button styles to NextGen button component Added button variant support Added button size support Merged button features from modal button to button component Removed modal button component Created button mixins for creating buttons Created initial button variants using mixins Moved client button customizations to mixins --- src/constants/button-sizes.js | 8 + src/constants/button-variants.js | 9 + src/digital-components/modal/modal.vue | 32 +-- .../button-question-modal.vue | 3 +- .../continue-modal/continue-modal.vue | 25 +-- .../site-footer/site-footer.vue | 6 +- .../cancel-claim-modal/cancel-claim-modal.vue | 35 +--- src/layouts/tpa-submit/tpa-submit.spec.js | 2 +- src/layouts/tpa-submit/tpa-submit.vue | 2 +- src/styles/client-customizations.scss | 192 ++---------------- src/styles/common-styles.scss | 46 +++++ src/styles/mixins/customMixins.scss | 51 +++++ .../button-main/button-main.spec.js | 152 +++++++++++++- src/ux-components/button-main/button-main.vue | 118 +++-------- .../modal-button-main.spec.js | 95 --------- .../modal-button-main/modal-button-main.vue | 121 ----------- 16 files changed, 342 insertions(+), 555 deletions(-) create mode 100644 src/constants/button-sizes.js create mode 100644 src/constants/button-variants.js delete mode 100644 src/ux-components/modal-button-main/modal-button-main.spec.js delete mode 100644 src/ux-components/modal-button-main/modal-button-main.vue diff --git a/src/constants/button-sizes.js b/src/constants/button-sizes.js new file mode 100644 index 00000000..d4f46ecc --- /dev/null +++ b/src/constants/button-sizes.js @@ -0,0 +1,8 @@ +const buttonSizes = Object.freeze({ + xs: 'xs', + sm: 'sm', + md: 'md', + lg: 'lg' +}); + +export default buttonSizes; diff --git a/src/constants/button-variants.js b/src/constants/button-variants.js new file mode 100644 index 00000000..cf73718a --- /dev/null +++ b/src/constants/button-variants.js @@ -0,0 +1,9 @@ +const buttonVariants = Object.freeze({ + primary: 'primary', + secondary: 'secondary', + success: 'success', + link: 'link', + navigation: 'navigation' +}); + +export default buttonVariants; diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 8a4664e7..0ab74b24 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -34,30 +34,18 @@
- -
@@ -65,7 +53,7 @@ diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue index 81cb42f6..b73ab67a 100644 --- a/src/iss-components/site-footer/site-footer.vue +++ b/src/iss-components/site-footer/site-footer.vue @@ -16,7 +16,7 @@
- + variant="success" + :buttonText="modalBodyText2" + class="mt-4 w-100" + @clickEvent="returnToClaim"> + @@ -29,10 +26,12 @@ diff --git a/src/layouts/tpa-submit/tpa-submit.spec.js b/src/layouts/tpa-submit/tpa-submit.spec.js index 9ce2cf6d..7dd6920b 100644 --- a/src/layouts/tpa-submit/tpa-submit.spec.js +++ b/src/layouts/tpa-submit/tpa-submit.spec.js @@ -169,7 +169,7 @@ describe('tpa-submit', () => { // Assert expect(mainButton.exists()).toBeTruthy(); - expect(mainButton.props().isPrimary).toBe(true); + expect(mainButton.props().variant).toBe('success'); expect(mainButton.classes()).toContain('w-100'); expect(mainButton.classes()).toContain('mb-5'); }); diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue index 5b3b223a..181fa0aa 100644 --- a/src/layouts/tpa-submit/tpa-submit.vue +++ b/src/layouts/tpa-submit/tpa-submit.vue @@ -32,7 +32,7 @@ class="mb-4 small text-color--darker-gray" /> diff --git a/src/styles/client-customizations.scss b/src/styles/client-customizations.scss index 26beae9f..487a63ae 100644 --- a/src/styles/client-customizations.scss +++ b/src/styles/client-customizations.scss @@ -86,52 +86,14 @@ .btn-link { color: $link; } - - .btn { - &.btn-override[aria-disabled="false"]:not(.form-test-invalid) { - &.btn-primary { - background: $button-color; - color: $button-text-color; - } - - &:focus-visible { - background: $button-color; - color: $button-text-color; - box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $button-color; - } - - } - } } - &.modal-open { - .modal { - .modal-body { - .btn { - &.btn-override[aria-disabled="false"]:not(.form-test-invalid) { - &.btn-primary { - background: $button-color; - color: $button-text-color; - } - - &:focus-visible { - background: $button-color; - color: $button-text-color; - box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $button-color; - } - - } - } - } - - .modal-footer { - .btn:not(.navigation-link) { - background: $button-color; - color: $button-text-color; - } - } - } + .btn { + &.btn-override { + @include heritage-btn-variant('success', $button-text-color, $button-color, transparent, true); + @include heritage-btn-variant('navigation', $button-text-color, $button-color, transparent, true); } + } } // End Amica @@ -171,52 +133,14 @@ a.new-window-link { color: $link; } - - .btn { - &.btn-override[aria-disabled="false"]:not(.form-test-invalid) { - &.btn-primary { - background: $button-color; - color: $button-text-color; - } - - &:focus-visible { - background: $button-color; - color: $button-text-color; - box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $button-color; - } - - } - } } - &.modal-open { - .modal { - .modal-body { - .btn { - &.btn-override[aria-disabled="false"]:not(.form-test-invalid) { - &.btn-primary { - background: $button-color; - color: $button-text-color; - } - - &:focus-visible { - background: $button-color; - color: $button-text-color; - box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $button-color; - } - - } - } - } - - .modal-footer { - .btn:not(.navigation-link) { - background: $button-color; - color: $button-text-color; - } - } - } + .btn { + &.btn-override { + @include heritage-btn-variant('success', $button-text-color, $button-color, transparent, true); + @include heritage-btn-variant('navigation', $button-text-color, $button-color, transparent, true); } + } } // End Nationwide @@ -256,52 +180,14 @@ a.new-window-link { color: $link; } - - .btn { - &.btn-override[aria-disabled="false"]:not(.form-test-invalid) { - &.btn-primary { - background: $button-color; - color: $button-text-color; - } - - &:focus-visible { - background: $button-color; - color: $button-text-color; - box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $button-color; - } - - } - } } - &.modal-open { - .modal { - .modal-body { - .btn { - &.btn-override[aria-disabled="false"]:not(.form-test-invalid) { - &.btn-primary { - background: $button-color; - color: $button-text-color; - } - - &:focus-visible { - background: $button-color; - color: $button-text-color; - box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $button-color; - } - - } - } - } - - .modal-footer { - .btn:not(.navigation-link) { - background: $button-color; - color: $button-text-color; - } - } - } + .btn { + &.btn-override { + @include heritage-btn-variant('success', $button-text-color, $button-color, transparent, true); + @include heritage-btn-variant('navigation', $button-text-color, $button-color, transparent, true); } + } } // End Country Financial @@ -341,52 +227,14 @@ a.new-window-link { color: $link; } - - .btn { - &.btn-override[aria-disabled="false"]:not(.form-test-invalid) { - &.btn-primary { - background: $button-color; - color: $button-text-color; - } - - &:focus-visible { - background: $button-color; - color: $button-text-color; - box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $button-color; - } - - } - } } - &.modal-open { - .modal { - .modal-body { - .btn { - &.btn-override[aria-disabled="false"]:not(.form-test-invalid) { - &.btn-primary { - background: $button-color; - color: $button-text-color; - } - - &:focus-visible { - background: $button-color; - color: $button-text-color; - box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $button-color; - } - - } - } - } - - .modal-footer { - .btn:not(.navigation-link) { - background: $button-color; - color: $button-text-color; - } - } - } + .btn { + &.btn-override { + @include heritage-btn-variant('success', $button-text-color, $button-color, transparent, true); + @include heritage-btn-variant('navigation', $button-text-color, $button-color, transparent, true); } + } } // End Travelers \ No newline at end of file diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss index 01208d7f..fceed06e 100644 --- a/src/styles/common-styles.scss +++ b/src/styles/common-styles.scss @@ -182,4 +182,50 @@ body { :root { --iss-loader-color: white; +} + +//Button Styles +$heritage-btn-border-radius: 1.40625rem; // 22.5px +$heritage-btn-height: 2.8125rem; // 45px +$heritage-btn-width: 9.0625rem; // 145px + +.btn { + position: relative; + --bs-btn-font-weight: #{$font-weight-bolder}; + min-height: $heritage-btn-height; + min-width: $heritage-btn-width; + letter-spacing: inherit; + line-height: .94; + + @include heritage-btn-variant('primary', $white, $heritage-blue-primary, transparent, true); + @include heritage-btn-variant('success', $white, $green, transparent, true); + @include heritage-btn-variant('navigation', $white, $green, transparent, true); + @include heritage-btn-variant('secondary', $white, $heritage-blue-secondary, transparent, true); + @include heritage-btn-link('link', $blue, transparent, $heritage-blue-secondary); + + @include heritage-btn-size('lg', 0.625rem, 1.25rem, 20px, $heritage-btn-border-radius); + @include heritage-btn-size('md', 7px, 15px, 15px, $heritage-btn-border-radius); + @include heritage-btn-size('sm', 3px, 6px, 12px, $heritage-btn-border-radius); + @include heritage-btn-size('xs', 1px, 5px, 12px, $heritage-btn-border-radius); + + &.btn-link { + --bs-btn-padding-x: 0px; + text-decoration: none; + + &:hover, + &:focus { + text-decoration: underline; + } + + &.disabled, + &[disabled], + fieldset[disabled] { + text-decoration: none; + } + } + + &.delay { + // fixes flicker while transitioning between states + transition: background 0s 0s ease-in-out; + } } \ No newline at end of file diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss index cd3555cc..fa1c1c15 100644 --- a/src/styles/mixins/customMixins.scss +++ b/src/styles/mixins/customMixins.scss @@ -8,3 +8,54 @@ @mixin box-shadow-hover($color) { box-shadow: 0 0 0 4px $color; } + +@mixin heritage-btn-box-shadow($color) { + box-shadow:0 0 0 3px $white,0 0 0 5.5px $color +} + +@mixin heritage-btn-variant($name, $color, $background, $border-color, $box-shadow) { + &.btn-#{$name} { + @include button-variant($background, + $border-color, + $color, + #{darken($background, 10%)}, + $border-color, + $color, + $background, + $border-color, + $color, + $background, + $border-color, + $color + ); + @if($box-shadow) { + &:focus, &:active, &:active:focus { + @include heritage-btn-box-shadow($background); + } + } + } + &.btn-outline-#{$name} { + @include button-outline-variant($background, + $color, + $background, + $color, + $background + $color, + ); + } +} + +@mixin heritage-btn-size($size, $y-padding, $x-padding, $font-size, $border-radius) { + &.btn-#{$size} { + @include button-size($y-padding, $x-padding, $font-size, $border-radius); + } +} + +@mixin heritage-btn-link($name, $color, $background, $hover-color) { + &.btn-#{$name} { + --bs-btn-color: #{$color}; + --bs-btn-bg: #{$background}; + --bs-btn-hover-color: #{$hover-color}; + --bs-btn-active-color: #{$hover-color}; + } +} \ No newline at end of file diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js index 95664421..bec1abf5 100644 --- a/src/ux-components/button-main/button-main.spec.js +++ b/src/ux-components/button-main/button-main.spec.js @@ -1,6 +1,7 @@ import { shallowMount } from '@vue/test-utils'; import { getMountOptions } from '@/helpers/unit-test-helper.js'; import buttonMain from '@/ux-components/button-main/button-main.vue'; +import buttonVariants from '@/constants/button-variants'; /** @ignore */ function setupMocks(mountOptionsMockData = {}) { @@ -12,13 +13,75 @@ function setupMocks(mountOptionsMockData = {}) { } describe('buttonMain.vue', () => { - it('Should return btn-primary class', async () => { + describe.each([...Object.keys(buttonVariants)])('Button Variants', (variant) => { + test(`Should return btn-${variant} class`, () => { + // Act + const wrapper = shallowMount( + buttonMain, + setupMocks({ + propsData: { + variant + } + }) + ); + + // Assert + const button = wrapper.find('button'); + + // Expect + expect(button.attributes('class')).toContain(`btn-${variant}`); + }); + }); + + describe.each([...Object.keys(buttonVariants)])('Button Outline Variants', (variant) => { + test(`Should return btn-outline-${variant} class`, () => { + // Act + const wrapper = shallowMount( + buttonMain, + setupMocks({ + propsData: { + variant, + isOutline: true + } + }) + ); + + // Assert + const button = wrapper.find('button'); + + // Expect + expect(button.attributes('class')).toContain(`btn-outline-${variant}`); + }); + }); + + describe.each(['', 'sm', 'lg'])('Button Sizes', (size) => { + test(`Should return btn-${size} class`, () => { + // Act + const wrapper = shallowMount( + buttonMain, + setupMocks({ + propsData: { + size + } + }) + ); + + // Assert + const button = wrapper.find('button'); + + // Expect + expect(button.attributes('class')).toContain(`btn-${size}`); + }); + }); + + it('Should return button text', async () => { // Act + const buttonText = 'Test Text'; const wrapper = shallowMount( buttonMain, setupMocks({ propsData: { - isPrimary: true + buttonText } }) ); @@ -27,10 +90,10 @@ describe('buttonMain.vue', () => { const button = wrapper.find('button'); // Expect - expect(button.attributes('class')).toContain('btn-primary'); + expect(button.text()).toContain(buttonText); }); - it('Should return aria-disabled state', async () => { + it('Should return disabled state', async () => { // Act const wrapper = shallowMount( buttonMain, @@ -47,4 +110,85 @@ describe('buttonMain.vue', () => { // Expect expect(button.attributes()['aria-disabled']).toEqual('true'); }); + + it('Should emit click-event', async () => { + // Act + const wrapper = shallowMount( + buttonMain, + setupMocks({ + propsData: { + isDisabled: false + } + }) + ); + + // Assert + const button = wrapper.find('button'); + await button.trigger('click'); + + // Expect + expect(wrapper.emitted('click').length).toBe(1); + }); + + it('Should not emit click-event when disabled', async () => { + // Act + const wrapper = shallowMount( + buttonMain, + setupMocks({ + propsData: { + isDisabled: true + } + }) + ); + + // Assert + const button = wrapper.find('button'); + await button.trigger('click'); + + // Expect + expect(wrapper.emitted('click').length).toBe(1); + }); + + it('Should emit GA event when clicked', async () => { + // Act + const wrapper = shallowMount( + buttonMain, + setupMocks({ + propsData: { + pushToGA: true + } + }) + ); + + const spy = jest.spyOn(wrapper.vm, 'pushEventToGA'); + + // Assert + + const button = wrapper.find('button'); + await button.trigger('click'); + + // Expect + expect(spy).toHaveBeenCalled(); + }); + + it('Should not emit GA event when clicked', async () => { + // Act + const wrapper = shallowMount( + buttonMain, + setupMocks({ + propsData: { + pushToGA: false + } + }) + ); + + const spy = jest.spyOn(wrapper.vm, 'pushEventToGA'); + + // Assert + const button = wrapper.find('button'); + await button.trigger('click'); + + // Expect + expect(spy).not.toHaveBeenCalled(); + }); }); diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue index 6000a9f2..1a69fd51 100644 --- a/src/ux-components/button-main/button-main.vue +++ b/src/ux-components/button-main/button-main.vue @@ -1,30 +1,49 @@ diff --git a/src/ux-components/modal-button-main/modal-button-main.spec.js b/src/ux-components/modal-button-main/modal-button-main.spec.js deleted file mode 100644 index d06fc1ca..00000000 --- a/src/ux-components/modal-button-main/modal-button-main.spec.js +++ /dev/null @@ -1,95 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import { getMountOptions } from '@/helpers/unit-test-helper.js'; -import { nextTick } from 'vue'; -import modalButtonMain from '@/ux-components/modal-button-main/modal-button-main.vue'; - -/** @ignore */ -function setupMocks(mountOptionsMockData = {}) { - const defaultMountOptions = { route: { query: { issPage: 'page-name' } } }; - const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData)); - const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions); - - return allMountOptions; -} - -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 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(); - }); -}); diff --git a/src/ux-components/modal-button-main/modal-button-main.vue b/src/ux-components/modal-button-main/modal-button-main.vue deleted file mode 100644 index 7508667e..00000000 --- a/src/ux-components/modal-button-main/modal-button-main.vue +++ /dev/null @@ -1,121 +0,0 @@ - - - - - From 22079729965d780d4318f9794fe5c79442c639b7 Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Mon, 5 Jan 2026 10:58:55 -0600 Subject: [PATCH 02/14] Heritage Buttons Fixed cursor comments --- src/iss-components/continue-modal/continue-modal.vue | 2 +- src/ux-components/button-main/button-main.spec.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/iss-components/continue-modal/continue-modal.vue b/src/iss-components/continue-modal/continue-modal.vue index 4bee8bb9..1627e509 100644 --- a/src/iss-components/continue-modal/continue-modal.vue +++ b/src/iss-components/continue-modal/continue-modal.vue @@ -18,7 +18,7 @@ variant="success" class="mt-2 w-100" :buttonText="modalBodyText" - @click="continueReferral"> + @click-event="continueReferral"> diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js index bec1abf5..39b3e1c0 100644 --- a/src/ux-components/button-main/button-main.spec.js +++ b/src/ux-components/button-main/button-main.spec.js @@ -127,7 +127,7 @@ describe('buttonMain.vue', () => { await button.trigger('click'); // Expect - expect(wrapper.emitted('click').length).toBe(1); + expect(wrapper.emitted('click-event').length).toBe(1); }); it('Should not emit click-event when disabled', async () => { From 45e31efca53c1e37b588a6d73d021ab9a4995a08 Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Mon, 5 Jan 2026 11:13:36 -0600 Subject: [PATCH 03/14] Heritage Buttons Cursor bug fixes round 2 --- src/styles/mixins/customMixins.scss | 2 +- src/ux-components/button-main/button-main.spec.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss index fa1c1c15..517e5e1a 100644 --- a/src/styles/mixins/customMixins.scss +++ b/src/styles/mixins/customMixins.scss @@ -39,7 +39,7 @@ $color, $background, $color, - $background + $background, $color, ); } diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js index 39b3e1c0..e0c8a993 100644 --- a/src/ux-components/button-main/button-main.spec.js +++ b/src/ux-components/button-main/button-main.spec.js @@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils'; import { getMountOptions } from '@/helpers/unit-test-helper.js'; import buttonMain from '@/ux-components/button-main/button-main.vue'; import buttonVariants from '@/constants/button-variants'; +import buttonSizes from '@/constants/button-sizes'; /** @ignore */ function setupMocks(mountOptionsMockData = {}) { @@ -54,7 +55,7 @@ describe('buttonMain.vue', () => { }); }); - describe.each(['', 'sm', 'lg'])('Button Sizes', (size) => { + describe.each([...Object.keys(buttonSizes)])('Button Sizes', (size) => { test(`Should return btn-${size} class`, () => { // Act const wrapper = shallowMount( @@ -146,7 +147,7 @@ describe('buttonMain.vue', () => { await button.trigger('click'); // Expect - expect(wrapper.emitted('click').length).toBe(1); + expect(wrapper.emitted('click-event')).toBeUndefined(); }); it('Should emit GA event when clicked', async () => { From c7bff1c75838f080d08e02a0700399d1b959f911 Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Mon, 5 Jan 2026 12:09:55 -0600 Subject: [PATCH 04/14] Heritage Buttons Removed resetButtonStyle method calls as this method was removed before our recent button work --- src/digital-components/modal/modal.spec.js | 17 ----------------- src/digital-components/modal/modal.vue | 6 ------ .../button-question-modal.vue | 6 +----- .../tpa-recal-modal/tpa-recal-modal.vue | 1 - .../mobile-location-modal-questions.vue | 4 ---- .../service-zip-modal-question.spec.js | 3 +-- .../service-zip-modal-question.vue | 4 ---- 7 files changed, 2 insertions(+), 39 deletions(-) diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js index 4c130e08..fd05174d 100644 --- a/src/digital-components/modal/modal.spec.js +++ b/src/digital-components/modal/modal.spec.js @@ -81,7 +81,6 @@ describe('modal.vue', () => { validate: mockValidate(true) }); - const resetButtonStyle = jest.fn(); const wrapper = shallowMount(modal, { props: { footerButtonText, @@ -89,7 +88,6 @@ describe('modal.vue', () => { }, attachTo: document.body }); - wrapper.vm.resetButtonStyle = resetButtonStyle; // Act const buttonMain = wrapper.findComponent({ ref: 'modalButtonMain' }); @@ -112,8 +110,6 @@ describe('modal.vue', () => { meta: mockMeta(fakeMeta), validate: mockValidate(false) }); - - const resetButtonStyle = jest.fn(); const wrapper = shallowMount(modal, { props: { footerButtonText, @@ -121,7 +117,6 @@ describe('modal.vue', () => { }, attachTo: document.body }); - wrapper.vm.resetButtonStyle = resetButtonStyle; // Act const buttonMain = wrapper.findComponent({ ref: 'modalButtonMain' }); @@ -144,8 +139,6 @@ describe('modal.vue', () => { meta: mockMeta(fakeMeta), validate: mockValidate(true) }); - - const resetButtonStyle = jest.fn(); const wrapper = shallowMount(modal, { props: { footerButtonText, @@ -153,7 +146,6 @@ describe('modal.vue', () => { }, attachTo: document.body }); - wrapper.vm.resetButtonStyle = resetButtonStyle; // Assert expect(wrapper.vm.isFooterButtonDisabled).toBe(true); @@ -172,8 +164,6 @@ describe('modal.vue', () => { meta: mockMeta(fakeMeta), validate: mockValidate(true) }); - - const resetButtonStyle = jest.fn(); const wrapper = shallowMount(modal, { props: { footerButtonText, @@ -181,7 +171,6 @@ describe('modal.vue', () => { }, attachTo: document.body }); - wrapper.vm.resetButtonStyle = resetButtonStyle; // Assert expect(wrapper.vm.isFooterButtonDisabled).toBe(true); @@ -202,8 +191,6 @@ describe('modal.vue', () => { }); const showMock = jest.spyOn(Modal.prototype, 'show'); - - const resetButtonStyle = jest.fn(); const wrapper = shallowMount(modal, { props: { footerButtonText, @@ -211,7 +198,6 @@ describe('modal.vue', () => { }, attachTo: document.body }); - wrapper.vm.resetButtonStyle = resetButtonStyle; // Act wrapper.vm.openModal(); @@ -234,8 +220,6 @@ describe('modal.vue', () => { validate: mockValidate(true) }); const hideMock = jest.spyOn(Modal.prototype, 'hide'); - - const resetButtonStyle = jest.fn(); const wrapper = shallowMount(modal, { props: { footerButtonText, @@ -243,7 +227,6 @@ describe('modal.vue', () => { }, attachTo: document.body }); - wrapper.vm.resetButtonStyle = resetButtonStyle; // Act wrapper.vm.openModal(); diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 0ab74b24..97f18ee6 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -115,8 +115,6 @@ export default { const validationResult = await this.validate(); if (validationResult.valid) { this.$emit('footer-button-event'); - } else { - this.resetButtonStyle(); } }, async onKeyDown(e) { @@ -125,14 +123,10 @@ export default { this.$refs.modalButtonMain.clicked(); document.getElementById(this.modalId)?.focus(); }, - resetButtonStyle() { - this.$refs.modalButtonMain?.resetButtonStyle(); - }, onModalOpened() { this.onModalOpenedCallback?.(); }, onModalClosed() { - this.resetButtonStyle(); this.onModalClosedCallback?.(); }, openModal() { diff --git a/src/iss-components/button-question-modal/button-question-modal.vue b/src/iss-components/button-question-modal/button-question-modal.vue index 76260a7f..14070bc9 100644 --- a/src/iss-components/button-question-modal/button-question-modal.vue +++ b/src/iss-components/button-question-modal/button-question-modal.vue @@ -5,8 +5,7 @@ class="modal fade modal-component" tabindex="-1" aria-labelledby="ModalComponentLabel" - aria-hidden="true" - v-on="{ 'hidden.bs.modal': resetButtonStyle }"> + aria-hidden="true">
@@ -69,9 +68,6 @@ export default { } }, methods: { - resetButtonStyle() { - this.$refs.buttonMain.resetButtonStyle(); - } } }; diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue index fb53470f..9141b32e 100644 --- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue +++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue @@ -101,7 +101,6 @@ export default { this.$refs[this.ModalName]?.closeModal(); this.$emit('buttonClick'); } else { - this.$refs[this.ModalName]?.resetButtonStyle(); this.showError = true; } } diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index dd6df70d..9647c322 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -260,9 +260,6 @@ export default { this.displayInvalidZipAlert = false; this.internalModel = deepClone(this.modelValue); }, - resetModalButtonStyle() { - this.modal.resetButtonStyle(); - }, async setMobileLocation() { if ( this.internalModel.addressQuestions.zipCode @@ -273,7 +270,6 @@ export default { if (!zipCodeData.isValid) { this.displayInvalidZipAlert = true; - this.resetModalButtonStyle(); } else { // retrieve mobile fee part const serviceZipCode = this.internalModel.addressQuestions.zipCode; diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js index c303c838..8029dc06 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js @@ -10,8 +10,7 @@ jest.mock('@/digital-components/textbox-question/textbox-question', () => ({ jest.mock('@/digital-components/modal/modal', () => ({ methods: { - closeModal: jest.fn(), - resetButtonStyle: jest.fn() + closeModal: jest.fn() } })); diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue index c0cd4da3..a537526a 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue @@ -127,9 +127,6 @@ export default { closeModal() { this.$refs[this.modalName].closeModal(); }, - resetModalButtonStyle() { - this.$refs[this.modalName].resetButtonStyle(); - }, onInputIdAssigned(inputId) { this.serviceZipCodeTextInputId = inputId; }, @@ -150,7 +147,6 @@ export default { if (!zipCodeData.isValid) { this.displayInvalidZipAlert = true; this.focusOnZipInput(); - this.resetModalButtonStyle(); } else { this.internalModel.state = zipCodeData.state; const serviceZipCode = this.internalModel.zipCode; From 5daa0a40532d16ab5146211ce2302e9952c1bec6 Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Mon, 5 Jan 2026 13:03:44 -0600 Subject: [PATCH 05/14] Heritage Buttons don't send GA event for disabled buttons Fixed extra parameter in mixin --- src/styles/mixins/customMixins.scss | 3 +-- src/ux-components/button-main/button-main.vue | 18 +++++++++--------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss index 517e5e1a..86574d91 100644 --- a/src/styles/mixins/customMixins.scss +++ b/src/styles/mixins/customMixins.scss @@ -39,8 +39,7 @@ $color, $background, $color, - $background, - $color, + $background ); } } diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue index 1a69fd51..cf5f03e7 100644 --- a/src/ux-components/button-main/button-main.vue +++ b/src/ux-components/button-main/button-main.vue @@ -35,16 +35,16 @@ export default { }, methods: { clicked() { - if (this.pushToGA) { - this.pushEventToGA( - this.$route.query[this.queryStrings.ISS_PAGE], - this.GaActions.CLICKED, - this.buttonText, - true - ); - } - if (!this.isDisabled) { + if (this.pushToGA) { + this.pushEventToGA( + this.$route.query[this.queryStrings.ISS_PAGE], + this.GaActions.CLICKED, + this.buttonText, + true + ); + } + this.$emit('click-event'); } } From e47dfbc17853d52cd8f5983cf4285239e0ac02f5 Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Mon, 5 Jan 2026 14:19:57 -0600 Subject: [PATCH 06/14] Heritage buttons added missed scss button variables --- src/styles/ux-variables.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index d34f8d8b..41cd8269 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -216,4 +216,8 @@ $enable-important-utilities: false; $letter-spacing-primary: 0.03em; // Borders $border-input: 1px solid rgba(179, 180, 181); -$border-input-focus: 2.5px solid $blue; \ No newline at end of file +$border-input-focus: 2.5px solid $blue; + +//Heritage +$heritage-blue-primary: #0070D1; +$heritage-blue-secondary: #167cac; \ No newline at end of file From 6f1f9636047a73659d178efaa9a93ed2bbe1053d Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Tue, 6 Jan 2026 11:13:04 -0600 Subject: [PATCH 07/14] INSR-7765 Heritage Policy Vehicle changes --- .../policy-vehicles-question.vue | 4 -- .../policy-vehicles/policy-vehicles.vue | 23 ++++++++++- src/styles/shared-input-button-styles.scss | 2 +- src/ux-components/list-button/list-button.vue | 38 ++++++++----------- 4 files changed, 37 insertions(+), 30 deletions(-) diff --git a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue index cc427f09..5f811333 100644 --- a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue +++ b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue @@ -2,7 +2,6 @@
+ + :validationRules="rules.optionRequired" + class="mb-2"/> + + buttonWrapperClasses="list-group base-input-button list-button no-hover d-flex flex-column w-100 mb-2">
@@ -67,6 +67,12 @@ export default {