Merge pull request #904 from Safelite/defect/digital/SSR-1924

SSR-1924 Fix custom client loader color

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'

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');
         });

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 {

src/styles/common-styles.scss

@@ -124,4 +124,8 @@ body {
             height: auto;
         }
     }
+}
+
+:root {
+    --iss-loader-color: white;
 }

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(

src/ux-components/button-main/button-main.vue

@@ -12,7 +12,7 @@
         <loader
             v-if="isLoaderDisplayed && !suppressLoader"
             class="ms-2"
-            :class="[loaderColor, loaderPosition]" />
+            :class="[loaderPosition]" />
     </button>
 </template>
 
@@ -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
+        // Mouse, touch, stylus focus
-    &:focus-visible {
+        &: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;

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: var(--iss-loader-color);
-      background-color: $blue;
-  }
-  &.red:after {
-      background-color: $red;
-  }
-  &.green:after {
-      background-color: $green;
-  }
-  &.white:after {
-      background-color: $white;
-  }
-  &.black:after {
-      background-color: $black;
   }
 }
 </style>