From 0d6e8f2cd94601fbcf18821dc050a8110fb91a53 Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Wed, 27 Nov 2024 10:58:32 -0600 Subject: [PATCH 1/2] SSR-1924 Fix custom client loader color --- .../site-footer/site-footer.vue | 1 - src/styles/client-customizations.scss | 45 +++++++------------ src/styles/common-styles.scss | 4 ++ src/ux-components/button-main/button-main.vue | 9 ++-- src/ux-components/loader/loader.vue | 19 +------- 5 files changed, 24 insertions(+), 54 deletions(-) diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue index 8ca18f60..fd41ea76 100644 --- a/src/iss-components/site-footer/site-footer.vue +++ b/src/iss-components/site-footer/site-footer.vue @@ -18,7 +18,6 @@ ref="buttonMain" isPrimary :buttonText="buttonText" - loaderColor="white" :class=" (disableForwardAction || isForwardActionDisabled) && 'form-test-invalid' diff --git a/src/styles/client-customizations.scss b/src/styles/client-customizations.scss index 06af6ea6..bf59ece8 100644 --- a/src/styles/client-customizations.scss +++ b/src/styles/client-customizations.scss @@ -12,6 +12,9 @@ $button-text-color: #181643; $svg-fill-color: '%2309748b'; // Color of calendar icon. Place HEX code *after* %23 + //Variables + --iss-loader-color: #{$button-text-color}; + .site-header { background-color: $header-background; } @@ -47,12 +50,6 @@ } } - - .loader { - &:after { - background-color: $button-text-color; - } - } } &.modal-open { @@ -100,6 +97,9 @@ $button-text-color: #fff; $svg-fill-color: '%231574a1'; // Color of calendar icon. Place HEX code *after* %23 + //Variables + --iss-loader-color: #{$button-text-color}; + .site-header { background-color: $header-background; } @@ -137,12 +137,6 @@ } } - - .loader { - &:after { - background-color: $button-text-color; - } - } } &.modal-open { @@ -190,6 +184,9 @@ $button-text-color: #fff; $svg-fill-color: '%231c57a5'; // Color of calendar icon. Place HEX code *after* %23 + //Variables + --iss-loader-color: #{$button-text-color}; + .site-header { background-color: $header-background; } @@ -225,12 +222,6 @@ } } - - .loader { - &:after { - background-color: $button-text-color; - } - } } &.modal-open { @@ -278,6 +269,9 @@ $button-text-color: #fff; $svg-fill-color: '%23007a3e'; // Color of calendar icon. Place HEX code *after* %23 + //Variables + --iss-loader-color: #{$button-text-color}; + .site-header { background-color: $header-background; } @@ -313,12 +307,6 @@ } } - - .loader { - &:after { - background-color: $button-text-color; - } - } } &.modal-open { @@ -366,6 +354,9 @@ $button-text-color: #fff; $svg-fill-color: '%23007395'; // Color of calendar icon. Place HEX code *after* %23 + //Variables + --iss-loader-color: #{$button-text-color}; + .site-header { background-color: $header-background; } @@ -401,12 +392,6 @@ } } - - .loader { - &:after { - background-color: $button-text-color; - } - } } &.modal-open { diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss index 6cecb8ec..66c9534e 100644 --- a/src/styles/common-styles.scss +++ b/src/styles/common-styles.scss @@ -124,4 +124,8 @@ body { height: auto; } } +} + +:root { + --iss-loader-color: white; } \ No newline at end of file diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue index fc04831a..69649e08 100644 --- a/src/ux-components/button-main/button-main.vue +++ b/src/ux-components/button-main/button-main.vue @@ -12,7 +12,7 @@ + :class="[loaderPosition]" /> @@ -28,7 +28,6 @@ export default { isPrimary: Boolean, buttonText: String, isDisabled: Boolean, - loaderColor: String, loaderPosition: String, isFloat: Boolean, suppressLoader: Boolean @@ -69,8 +68,8 @@ export default { @media (hover: hover) { background: linear-gradient(270deg, $blue 0%, $blue-800 100%); } - // Mouse, touch, stylus focus - &:focus-visible { + // Mouse, touch, stylus focus + &:focus-visible { // Keyboard focus for accessibility outline: none; box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; @@ -112,7 +111,7 @@ export default { @include blue-gradient; } &:focus, // Mouse, touch, stylus focus - &:focus-visible { + &:focus-visible { // Keyboard focus for accessibility outline: none; box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700; diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue index a84730c5..f8f82966 100644 --- a/src/ux-components/loader/loader.vue +++ b/src/ux-components/loader/loader.vue @@ -21,10 +21,6 @@ export default { type: Boolean, default: false }, - /* Color options: red, green, blue, white, black */ - loaderColor: { - type: String - }, /* Position options: center, right, left (OPTIONAL, do NOT use on btn-* classes) */ loaderPosition: { type: String @@ -112,20 +108,7 @@ export default { } //Spinner color &:after { - //Default spinner color (blue) if no other color is specified from the options below - background-color: $blue; - } - &.red:after { - background-color: $red; - } - &.green:after { - background-color: $green; - } - &.white:after { - background-color: $white; - } - &.black:after { - background-color: $black; + background-color: var(--iss-loader-color); } } From 96c29f38ccfdbd72dab96bdadd6b53a58bfc7d99 Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Wed, 27 Nov 2024 11:15:39 -0600 Subject: [PATCH 2/2] SSR-1924 Fix unit tests for changes --- src/layouts/tpa-submit/tpa-submit.spec.js | 1 - .../button-main/button-main.spec.js | 23 ------------------- 2 files changed, 24 deletions(-) diff --git a/src/layouts/tpa-submit/tpa-submit.spec.js b/src/layouts/tpa-submit/tpa-submit.spec.js index 910fabb7..30934db3 100644 --- a/src/layouts/tpa-submit/tpa-submit.spec.js +++ b/src/layouts/tpa-submit/tpa-submit.spec.js @@ -184,7 +184,6 @@ describe('tpa-submit', () => { // Assert expect(mainButton.exists()).toBeTruthy(); expect(mainButton.props().isPrimary).toBe(true); - expect(mainButton.props().loaderColor).toBe('white'); expect(mainButton.classes()).toContain('w-100'); expect(mainButton.classes()).toContain('mb-5'); }); diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js index 2caf56f1..0494405f 100644 --- a/src/ux-components/button-main/button-main.spec.js +++ b/src/ux-components/button-main/button-main.spec.js @@ -49,29 +49,6 @@ describe('buttonMain.vue', () => { expect(button.attributes()['aria-disabled']).toEqual('true'); }); - it('Should return loader color', async () => { - // Act - const wrapper = shallowMount( - buttonMain, - setupMocks({ - propsData: { - loaderColor: 'blue', - loaderEnabled: true - } - }) - ); - - // Assert - - wrapper.vm.clicked(); - - await nextTick(); - - const loader = wrapper.find('loader-stub'); - - expect(loader.attributes('class')).toContain('blue'); - }); - it('Should return loader position', async () => { // Act const wrapper = shallowMount(