Linting changes to ux-compontents

jsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+      "target": "esnext",
+      "module": "esnext",
+      "baseUrl": "./",
+      "moduleResolution": "node",
+      "paths": {
+        "@/*": [
+          "src/*"
+        ]
+      },
+      "lib": [
+        "esnext",
+        "dom",
+        "dom.iterable",
+        "scripthost"
+      ]
+    }
+  }
+  

src/ux-components/alert/alert.spec.js

@@ -6,8 +6,7 @@ import alert from './alert';
 describe('alert.vue', () => {
     it("Should add class 'alert-dismissible' if isDismissible is true", async () => {
         // Arrange
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(alert,
-            alert,
             setupMocks({
                 propsData: {
                     isDismissible: true,
@@ -15,8 +14,7 @@ describe('alert.vue', () => {
                     manualCopy: 'testCopy',
                     cmsWidgetName: 'alert'
                 }
-            })
+            }));
-        );
 
         const wrapperDiv = wrapper.find('div');
 
@@ -26,8 +24,7 @@ describe('alert.vue', () => {
 
     it('Should add specified alert class', async () => {
         // Arrange
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(alert,
-            alert,
             setupMocks({
                 propsData: {
                     alertClass: 'warning',
@@ -35,8 +32,7 @@ describe('alert.vue', () => {
                     manualCopy: 'testCopy',
                     cmsWidgetName: 'alert'
                 }
-            })
+            }));
-        );
 
         const wrapperDiv = wrapper.find('div');
 
@@ -54,24 +50,21 @@ describe('alert.vue', () => {
 
     it('Should container a <router-link> tag if the manualCopy contains a {routerLink: testName, testLink} placeholder', () => {
         // Arrange & Act
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(alert,
-            alert,
             setupMocks({
                 propsData: {
                     manualHeadline: 'testHeader',
                     manualCopy: 'testCopy with a {routerLink: testName, testLink} inside of it',
                     cmsWidgetName: 'alert'
                 }
-            })
+            }));
-        );
         // Assert
         expect(wrapper.findComponent(RouterLinkStub).exists()).toBe(true);
     });
 
     it("Should contain 'n+1' <p> tags if the body copy has 'n' <p> tags", () => {
         // Arrange & Act
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(alert,
-            alert,
             setupMocks({
                 propsData: {
                     manualHeadline: 'testHeader',
@@ -79,22 +72,19 @@ describe('alert.vue', () => {
                         '<p>testCopy with a {routerLink: testName, testLink} inside of it</p><p>and two paragraphs</p>',
                     cmsWidgetName: 'alert'
                 }
-            })
+            }));
-        );
         // Assert
         expect(wrapper.findAll('p').length === 3).toBe(true);
     });
 
     it('Should call scrollIntoView() when the clientBoundingRect is not entirely in the viewport (out of view top)', () => {
         // Arrange
-        var viewPortHeight = 200;
+        const viewPortHeight = 200;
         setUpViewPort(viewPortHeight);
 
-        Element.prototype.getBoundingClientRect = jest.fn(() => {
+        Element.prototype.getBoundingClientRect = jest.fn(() => ({ top: -100, bottom: 200 }));
-            return { top: -100, bottom: 200 };
-        });
 
-        var mockScrollIntoView = jest.fn();
+        const mockScrollIntoView = jest.fn();
         Element.prototype.scrollIntoView = mockScrollIntoView;
 
         // Act
@@ -109,14 +99,12 @@ describe('alert.vue', () => {
 
     it('Should call scrollIntoView() when the clientBoundingRect is not entirely in the viewport (bottom is hidden behind footer)', () => {
         // Arrange
-        var viewPortHeight = 240;
+        const viewPortHeight = 240;
         setUpViewPort(viewPortHeight);
 
-        Element.prototype.getBoundingClientRect = jest.fn(() => {
+        Element.prototype.getBoundingClientRect = jest.fn(() => ({ top: 100, bottom: 200 }));
-            return { top: 100, bottom: 200 };
-        });
 
-        var mockScrollIntoView = jest.fn();
+        const mockScrollIntoView = jest.fn();
         Element.prototype.scrollIntoView = mockScrollIntoView;
 
         // Act
@@ -131,19 +119,16 @@ describe('alert.vue', () => {
 
     it("Should not call scrollIntoView() when the clientBoundingRect is not entirely in the viewport but 'shouldScrollToOnMount' is false", () => {
         // Arrange
-        var viewPortHeight = 200;
+        const viewPortHeight = 200;
         setUpViewPort(viewPortHeight);
 
-        Element.prototype.getBoundingClientRect = jest.fn(() => {
+        Element.prototype.getBoundingClientRect = jest.fn(() => ({ top: -100, bottom: 200 }));
-            return { top: -100, bottom: 200 };
-        });
 
-        var mockScrollIntoView = jest.fn();
+        const mockScrollIntoView = jest.fn();
         Element.prototype.scrollIntoView = mockScrollIntoView;
 
         // Act
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(alert,
-            alert,
             setupMocks({
                 propsData: {
                     shouldScrollToOnMount: false,
@@ -151,8 +136,7 @@ describe('alert.vue', () => {
                     manualCopy: 'testCopy',
                     cmsWidgetName: 'alert'
                 }
-            })
+            }));
-        );
 
         // Assert
         // This is an implementation detail - we just need to test that the final step of snapping
@@ -163,14 +147,12 @@ describe('alert.vue', () => {
 
     it('Should not call scrollIntoView() when the clientBoundingRect is entirely in the viewport', () => {
         // Arrange
-        var viewPortHeight = 500;
+        const viewPortHeight = 500;
         setUpViewPort(viewPortHeight);
 
-        Element.prototype.getBoundingClientRect = jest.fn(() => {
+        Element.prototype.getBoundingClientRect = jest.fn(() => ({ top: 100, bottom: 200 }));
-            return { top: 100, bottom: 200 };
-        });
 
-        var mockScrollIntoView = jest.fn();
+        const mockScrollIntoView = jest.fn();
         Element.prototype.scrollIntoView = mockScrollIntoView;
 
         // Act
@@ -187,18 +169,20 @@ describe('alert.vue', () => {
 const mockMixin = {
     methods: {
         getCmsContent: jest.fn(),
-        getFooterInfoBoxHeight: jest.fn(() => 50),
+        getFooterInfoBoxHeight: jest.fn(() => 50)
     },
     computed: {
-        dynamicStrings: jest.fn(() => {
+        dynamicStrings: jest.fn(() => ({ ROUTER_LINK: 'routerLink:' })),
-            return { ROUTER_LINK: 'routerLink:' };
-        }),
         cssClassNameForCmsWidget() {
             return 'widget-name-';
         }
     }
 };
 
+/**
+ *
+ * @param height
+ */
 function setUpViewPort(height) {
     Object.defineProperty(global.window, 'innerHeight', {
         writable: true,
@@ -213,6 +197,10 @@ function setUpViewPort(height) {
     });
 }
 
+/**
+ *
+ * @param mountOptionsMockData
+ */
 function setupMocks(mountOptionsMockData = {}) {
     const defaultMountOptions = {
         propsData: {
@@ -222,9 +210,7 @@ function setupMocks(mountOptionsMockData = {}) {
         },
         mixins: [mockMixin]
     };
-    const baseMountOptions = getMountOptions(
+    const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
-        Object.assign(defaultMountOptions, mountOptionsMockData)
-    );
     const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
     return allMountOptions;
 }

src/ux-components/alert/alert.vue

@@ -4,32 +4,47 @@
         role="alert"
         :class="[
             isDismissible ? 'alert-dismissible' : '',
-            this.alertClass,
+            alertClass,
-            this.cssClassNameForCmsWidget,
+            cssClassNameForCmsWidget,
         ]">
-        <p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
+        <p class="m-0 fw-bold alert-heading">
-        <template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
+        {{ alertHeadline }}
+        </p>
+        <template
+            v-for="paragraph in splitAlertCopyForParagraphTag"
+            :key="paragraph">
             <p
-                class="m-0 text-body small"
                 v-if="!doesCopyContainRouterLink(paragraph)"
+                class="m-0 text-body small"
                 v-html="paragraph"></p>
-            <p class="m-0 text-body small" v-else>
+            <p
-                <template v-for="copy in splitCopyOnCMSPlaceHolder(paragraph)" :key="copy">
+                v-else
-                    <span v-if="!doesCopyContainRouterLink(copy)" v-html="copy"></span>
+                class="m-0 text-body small">
+                <template
+                    v-for="copy in splitCopyOnCMSPlaceHolder(paragraph)"
+                    :key="copy">
+                    <span
+                        v-if="!doesCopyContainRouterLink(copy)"
+                        v-html="copy"></span>
                     <span v-else>
                         <router-link
                             :to="{
                                 query: { [pageQueryString]: `${getRouterLinkRouteFromCopy(copy)}` },
                                 name: 'root',
-                            }"
+                            }">{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link>
-                            >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
-                        >
                     </span>
                 </template>
             </p>
         </template>
-        <button type="button" class="btn-close p-2" data-bs-dismiss="alert" aria-label="Close">
+        <button
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.7 23.7" xml:space="preserve">
+            type="button"
+            class="btn-close p-2"
+            data-bs-dismiss="alert"
+            aria-label="Close">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 23.7 23.7"
+                xml:space="preserve">
                 <path
                     d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
             </svg>
@@ -93,14 +108,17 @@ export default {
             return splitCMSCopyOnParagraphTag(this.alertCopy);
         }
     },
+    mounted() {
+        this.ensureAlertIsInViewPort();
+    },
     methods: {
         doesCopyContainRouterLink,
         splitCopyOnCMSPlaceHolder,
         getRouterLinkRouteFromCopy,
         getRouterLinkDisplayTextFromCopy,
         ensureAlertIsInViewPort() {
-            if (this.shouldScrollToOnMount && this.$el.style.display != 'none') {
+            if (this.shouldScrollToOnMount && this.$el.style.display !== 'none') {
-                var footerHeight = this.getFooterInfoBoxHeight();
+                const footerHeight = this.getFooterInfoBoxHeight();
                 if (!this.isAlertInViewport(footerHeight)) {
                     this.$el.scrollIntoView(true); // 'true' attempts to scroll element to top of viewport
                 }
@@ -109,21 +127,18 @@ export default {
         isAlertInViewport(footerHeight) {
             const rect = this.$el.getBoundingClientRect();
             return (
-                rect.top >= 0 &&
+                rect.top >= 0
                 // remove footerHeight from window height to avoid items being hidden behind footer
-                rect.bottom <=
+                && rect.bottom
-                    (window.innerHeight - footerHeight ||
+                    <= (window.innerHeight - footerHeight
-                        document.documentElement.clientHeight - footerHeight)
+                        || document.documentElement.clientHeight - footerHeight)
             );
         }
-    },
-    mounted() {
-        this.ensureAlertIsInViewPort();
     }
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .alert {
     button {
         display: none;

src/ux-components/button-main/button-main.spec.js

@@ -1,19 +1,17 @@
 import { shallowMount } from '@vue/test-utils';
-import buttonMain from './button-main';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import { nextTick } from 'vue';
+import buttonMain from './button-main';
 
 describe('buttonMain.vue', () => {
     it('Should return btn-primary class', async () => {
         // Act
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(buttonMain,
-            buttonMain,
             setupMocks({
                 propsData: {
                     isPrimary: true
                 }
-            })
+            }));
-        );
 
         // Assert
         const button = wrapper.find('button');
@@ -24,14 +22,12 @@ describe('buttonMain.vue', () => {
 
     it('Should return aria-disabled state', async () => {
         // Act
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(buttonMain,
-            buttonMain,
             setupMocks({
                 propsData: {
                     isDisabled: true
                 }
-            })
+            }));
-        );
 
         // Assert
         const button = wrapper.find('button');
@@ -42,15 +38,13 @@ describe('buttonMain.vue', () => {
 
     it('Should return loader color', async () => {
         // Act
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(buttonMain,
-            buttonMain,
             setupMocks({
                 propsData: {
                     loaderColor: 'blue',
                     loaderEnabled: true
                 }
-            })
+            }));
-        );
 
         // Assert
 
@@ -67,15 +61,13 @@ describe('buttonMain.vue', () => {
 
     it('Should return loader position', async () => {
         // Act
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(buttonMain,
-            buttonMain,
             setupMocks({
                 propsData: {
                     loaderPosition: 'right',
                     loaderEnabled: true
                 }
-            })
+            }));
-        );
 
         // Assert
 
@@ -91,11 +83,13 @@ describe('buttonMain.vue', () => {
     });
 });
 
+/**
+ *
+ * @param mountOptionsMockData
+ */
 function setupMocks(mountOptionsMockData = {}) {
     const defaultMountOptions = { route: { query: { issPage: 'page-name' } } };
-    const baseMountOptions = getMountOptions(
+    const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
-        Object.assign(defaultMountOptions, mountOptionsMockData)
-    );
     const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
 
     return allMountOptions;

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

@@ -8,11 +8,11 @@
             isLoaderDisplayed ? 'has-loader' : '',
         ]"
         @click="clicked">
-        <span class="m-0">{{ this.buttonText }}</span>
+        <span class="m-0">{{ buttonText }}</span>
         <loader
-            class="ms-2"
             v-if="isLoaderDisplayed && !suppressLoader"
-            v-bind:class="[this.loaderColor, this.loaderPosition]" />
+            class="ms-2"
+            :class="[loaderColor, loaderPosition]" />
     </button>
 </template>
 
@@ -20,7 +20,10 @@
 import loader from '@/ux-components/loader/loader';
 
 export default {
-    name: 'buttonMain',
+    name: 'button-main',
+    components: {
+        loader
+    },
     props: {
         isPrimary: Boolean,
         buttonText: String,
@@ -30,6 +33,7 @@ export default {
         isFloat: Boolean,
         suppressLoader: Boolean
     },
+    emits: ['click-event'],
     data() {
         return {
             isLoaderDisplayed: false
@@ -48,14 +52,11 @@ export default {
         resetButtonStyle() {
             this.isLoaderDisplayed = false;
         }
-    },
-    components: {
-        loader
     }
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .btn {
     &.btn-primary {
         position: relative;
@@ -90,7 +91,7 @@ export default {
         &.has-loader {
             color: $white;
             background: $blue-700;
-           
+
         }
         &.delay {
             // fixes flicker while transitioning between states

src/ux-components/checkbox/checkbox.spec.js

@@ -1,6 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
 import checkbox from './checkbox';
-import { nextTick } from 'vue';
 
 describe('checkbox.vue', () => {
     it('Should return checkbox name', async () => {

src/ux-components/checkbox/checkbox.vue

@@ -1,20 +1,29 @@
 <template>
     <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
-    <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
+    <div
+        class="form-check ui-checkbox"
+        :class="[hasError ? 'has-error' : '']">
         <input
+            :id="buttonID"
+            :ref="checkboxName"
             class="form-check-input"
             type="checkbox"
             aria-checked="false"
             :name="checkboxName"
-            :id="buttonID"
             :tabindex="tabIndex"
             :aria-required="isRequired"
             :checked="isChecked"
-            @change="handleCheckChange"
+            @change="handleCheckChange" />
-            :ref="checkboxName" />
+        <label
-        <label class="d-flex align-items-start" :for="buttonID">
+            class="d-flex align-items-start"
-            <p v-if="checkboxLabel" class="m-0" v-html="checkboxLabel"></p>
+            :for="buttonID">
-            <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
+            <p
+                v-if="checkboxLabel"
+                class="m-0"
+                v-html="checkboxLabel"></p>
+            <span
+                v-if="screenReaderOnlyText"
+                class="sr-only">{{ screenReaderOnlyText }}</span>
         </label>
     </div>
 </template>
@@ -35,6 +44,7 @@ export default {
             default: false
         }
     },
+    emits: ['update:modelValue'],
     methods: {
         handleCheckChange() {
             this.$emit('update:modelValue', this.$refs[this.checkboxName].checked);

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
-import listButtonHorizontal from './list-button-horizontal';
 import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
+import listButtonHorizontal from './list-button-horizontal';
 
 describe('list-button-horizontal.vue', () => {
     describe('styling/UI', () => {
@@ -123,6 +123,11 @@ describe('list-button-horizontal.vue', () => {
     });
 });
 
+/**
+ *
+ * @param root0
+ * @param root0.mockData
+ */
 function setupMocks({ mockData }) {
     const wrapper = mount(listButtonHorizontal, {
         ...mockData,

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -1,20 +1,27 @@
 <template>
   <baseInputButton
       v-bind="$props"
+      v-model="selectedValue"
       :buttonWrapperClasses="[
           'list-group list-button-horizontal d-flex flex-column w-100 base-input-button',
           { strong: isStrongStyling },
-      ]"
+      ]">
-      v-model="selectedValue">
       <div
           class="button-content list-button-horizontal-content d-flex flex-column justify-content-center p-3">
-          <span class="m-0" :class="textPosition">
+          <span
+            class="m-0"
+            :class="textPosition">
               {{ buttonLabel }}
           </span>
-          <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
+          <span
+            v-if="buttonLabelSubCopy"
+            class="m-0 small"
+            :class="textPosition">
               {{ buttonLabelSubCopy }}
           </span>
-          <span v-if="screenReaderOnlyText" class="sr-only">
+          <span
+            v-if="screenReaderOnlyText"
+            class="sr-only">
               {{ screenReaderOnlyText }}
           </span>
       </div>
@@ -26,20 +33,20 @@ import baseInputButton from '@/digital-components/base-input-button/base-input-b
 import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
 
 export default {
-    name: 'listButtonHorizontal',
+    name: 'list-button-horizontal',
+    components: {
+        baseInputButton
+    },
     mixins: [inputButtonWrapperMixin],
     computed: {
         isStrongStyling() {
             return this.additionalButtonStyling === 'listButtonHorizontalStrong';
         }
-    },
-    components: {
-        baseInputButton
     }
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .list-button-horizontal {
   input[type="radio"],
   input[type="checkbox"] {

src/ux-components/list-button/list-button.spec.js

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
-import listButton from './list-button';
 import { GaActions } from '@/constants/analytics';
 import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
+import listButton from './list-button';
 
 describe('list-button.vue', () => {
     describe('loader', () => {
@@ -12,7 +12,7 @@ describe('list-button.vue', () => {
                     global: {
                         mocks: {
                             $route: { query: { issPage: 'page-name' } },
-                            GaActions: GaActions,
+                            GaActions,
                             pushEventToGA: jest.fn()
                         }
                     },
@@ -38,7 +38,7 @@ describe('list-button.vue', () => {
                     global: {
                         mocks: {
                             $route: { query: { issPage: 'page-name' } },
-                            GaActions: GaActions,
+                            GaActions,
                             pushEventToGA: jest.fn()
                         }
                     },
@@ -65,7 +65,7 @@ describe('list-button.vue', () => {
                     global: {
                         mocks: {
                             $route: { query: { issPage: 'page-name' } },
-                            GaActions: GaActions,
+                            GaActions,
                             pushEventToGA: jest.fn()
                         }
                     },
@@ -294,6 +294,11 @@ describe('list-button.vue', () => {
     });
 });
 
+/**
+ *
+ * @param root0
+ * @param root0.mockData
+ */
 function setupMocks({ mockData }) {
     const wrapper = mount(listButton, {
         ...mockData,

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

@@ -1,23 +1,30 @@
 <template>
   <baseInputButton
       v-bind="$props"
-      buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
+      v-model="selectedValue"
-      v-model="selectedValue">
+      buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2">
       <div
           :aria-label="buttonLabel"
           class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
-          <span class="m-0" :class="textPosition">
+          <span
+            class="m-0"
+            :class="textPosition">
               {{ buttonLabel }}
           </span>
-          <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
+          <span
+            v-if="buttonLabelSubCopy"
+            class="m-0 small"
+            :class="textPosition">
               {{ buttonLabelSubCopy }}
           </span>
-          <span v-if="screenReaderOnlyText" class="sr-only">
+          <span
+            v-if="screenReaderOnlyText"
+            class="sr-only">
               {{ screenReaderOnlyText }}
           </span>
           <loader
               v-if="isLoaderDisplayed && selectingInitiatesLoad"
-              :class="[this.loaderColor, this.loaderPosition]" />
+              :class="[loaderColor, loaderPosition]" />
       </div>
   </baseInputButton>
 </template>
@@ -28,7 +35,11 @@ import baseInputButton from '@/digital-components/base-input-button/base-input-b
 import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
 
 export default {
-    name: 'listButton',
+    name: 'list-button',
+    components: {
+        loader,
+        baseInputButton
+    },
     mixins: [inputButtonWrapperMixin],
     props: {
         loaderColor: String,
@@ -51,10 +62,6 @@ export default {
                 this.displayLoader();
             }
         }
-    },
-    components: {
-        loader,
-        baseInputButton
     }
 };
 </script>

src/ux-components/list-card/list-card.spec.js

@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils';
 import listCard from './list-card';
-import { nextTick } from 'vue';
 
 describe('list-card.vue', () => {
     it('Should return input type checkbox if isMultiSelect is true', () => {
@@ -121,7 +120,7 @@ describe('list-card.vue', () => {
         // Assert
         const label = wrapper.find('.list-card-content');
         expect(label.exists()).toBe(true);
-        const labelClasses = wrapper.vm.labelClasses;
+        const { labelClasses } = wrapper.vm;
         expect(labelClasses).toContain('flex-row');
         expect(label.classes()).toContain('flex-row');
     });
@@ -146,7 +145,7 @@ describe('list-card.vue', () => {
         // Assert
         const label = wrapper.find('.list-card-content');
         expect(label.exists()).toBe(true);
-        const labelClasses = wrapper.vm.labelClasses;
+        const { labelClasses } = wrapper.vm;
         expect(labelClasses).toContain('flex-row');
         expect(label.classes()).toContain('flex-row');
         expect(labelClasses).toContain('checkboxTop');
@@ -172,7 +171,7 @@ describe('list-card.vue', () => {
         // Assert
         const label = wrapper.find('.list-card-content');
         expect(label.exists()).toBe(true);
-        const labelClasses = wrapper.vm.labelClasses;
+        const { labelClasses } = wrapper.vm;
         expect(labelClasses).toContain('flex-column');
         expect(label.classes()).toContain('flex-column');
     });

src/ux-components/list-card/list-card.vue

@@ -1,11 +1,11 @@
 <template>
     <baseInputButton
         v-bind="$props"
+        v-model="selectedValue"
         :buttonWrapperClasses="[
             'list-card w-100 rounded-3 d-flex align-items-center h-100 base-input-button',
             { horizontal: isWide },
-        ]"
+        ]">
-        v-model="selectedValue">
         <div
             class="d-flex w-100 align-items-center px-2 h-100 list-card-content button-content rounded-3"
             :class="labelClasses">
@@ -14,15 +14,26 @@
                 :class="!isWide ? 'order-1' : 'ms-auto order-3'"
                 :src="buttonImage"
                 :alt="altText" />
-            <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
+            <p
+                v-if="!isWide"
+                class="small order-3"
+                :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
                 {{ buttonLabel }}
             </p>
-            <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
+            <p
+                v-if="buttonLabelSubCopy && !isWide"
+                class="fs-7 m-0 order-4 sub-copy">
                 {{ buttonLabelSubCopy }}
             </p>
-            <div v-if="isWide" class="order-2">
+            <div
-                <p class="m-0 small">{{ buttonLabel }}</p>
+                v-if="isWide"
-                <p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
+                class="order-2">
+                <p class="m-0 small">
+                {{ buttonLabel }}
+                </p>
+                <p
+                    v-if="buttonLabelSubCopy"
+                    class="m-0 fs-7 sub-copy">
                     {{ buttonLabelSubCopy }}
                 </p>
             </div>
@@ -35,11 +46,11 @@ import baseInputButton from '@/digital-components/base-input-button/base-input-b
 import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
 
 export default {
-    name: 'listCard',
+    name: 'list-card',
-    mixins: [inputButtonWrapperMixin],
     components: {
         baseInputButton
     },
+    mixins: [inputButtonWrapperMixin],
     computed: {
         labelClasses() {
             if (this.isWide) {
@@ -48,15 +59,14 @@ export default {
                     classes += ' checkboxTop';
                 }
                 return classes;
-            } else {
-                return 'flex-column pt-4 pb-3';
             }
+            return 'flex-column pt-4 pb-3';
         }
     }
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @mixin list-card-focus($box-shadow-color) {
     &:focus-visible + .list-card-content {
         box-shadow: 0 0 0 2.5px $box-shadow-color;
@@ -81,7 +91,8 @@ export default {
     }
 
     img {
-        // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
+        // svg's should be constructed on the same canvas size/viewbox to ensure
+        // they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
         height: auto;
         width: 6.5rem;
         margin-bottom: 2.2rem;

src/ux-components/loader/loader.vue

@@ -3,7 +3,7 @@
       class="loader"
       role="alert"
       aria-label="Loading new page"
-      v-bind:class="[this.loaderColor, this.loaderPosition]"></div>
+      :class="[loaderColor, loaderPosition]"></div>
 </template>
 
 <script>
@@ -23,7 +23,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .loader {
   display: flex;
 

src/ux-components/modal-button-main/modal-button-main.spec.js

@@ -1,19 +1,17 @@
 import { shallowMount } from '@vue/test-utils';
-import modalButtonMain from './modal-button-main';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import { nextTick } from 'vue';
+import modalButtonMain from './modal-button-main';
 
 describe('modal-button-main.vue', () => {
     it('Should return btn-primary class', () => {
         // Arrange/Act
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(modalButtonMain,
-            modalButtonMain,
             setupMocks({
                 propsData: {
                     isPrimary: true
                 }
-            })
+            }));
-        );
         const button = wrapper.find('button');
 
         // Assert
@@ -22,14 +20,12 @@ describe('modal-button-main.vue', () => {
 
     it('Should return aria-disabled state', () => {
         // Arrange/Act
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(modalButtonMain,
-            modalButtonMain,
             setupMocks({
                 propsData: {
                     isDisabled: true
                 }
-            })
+            }));
-        );
         const button = wrapper.find('button');
 
         // Assert
@@ -38,15 +34,13 @@ describe('modal-button-main.vue', () => {
 
     it('Should return loader color', async () => {
         // Arrange
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(modalButtonMain,
-            modalButtonMain,
             setupMocks({
                 propsData: {
                     loaderColor: 'blue',
                     loaderEnabled: true
                 }
-            })
+            }));
-        );
 
         // Act
         wrapper.vm.clicked();
@@ -60,15 +54,13 @@ describe('modal-button-main.vue', () => {
 
     it('Should return loader position', async () => {
         // Arrange
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(modalButtonMain,
-            modalButtonMain,
             setupMocks({
                 propsData: {
                     loaderPosition: 'right',
                     loaderEnabled: true
                 }
-            })
+            }));
-        );
 
         // Act
         wrapper.vm.clicked();
@@ -81,15 +73,13 @@ describe('modal-button-main.vue', () => {
 
     it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => {
         // Arrange
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(modalButtonMain,
-            modalButtonMain,
             setupMocks({
                 propsData: {
                     loaderPosition: 'right',
                     loaderEnabled: true
                 }
-            })
+            }));
-        );
 
         wrapper.setData({
             isLoaderDisplayed: true
@@ -106,15 +96,13 @@ describe('modal-button-main.vue', () => {
 
     it("Should set 'isLoaderDisplayed' to false when calling 'resetButtonStyle'", async () => {
         // Arrange
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(modalButtonMain,
-            modalButtonMain,
             setupMocks({
                 propsData: {
                     loaderPosition: 'right',
                     loaderEnabled: true
                 }
-            })
+            }));
-        );
 
         wrapper.setData({
             isLoaderDisplayed: true
@@ -130,16 +118,14 @@ describe('modal-button-main.vue', () => {
 
     it("Should emit 'click-event' event when clicking if the button is enabled", async () => {
         // Arrange
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(modalButtonMain,
-            modalButtonMain,
             setupMocks({
                 propsData: {
                     loaderPosition: 'right',
                     loaderEnabled: true,
                     isDisabled: false
                 }
-            })
+            }));
-        );
 
         const buttonElement = wrapper.find('button');
 
@@ -154,16 +140,14 @@ describe('modal-button-main.vue', () => {
 
     it("Should not emit 'click-event' event when clicking if the button is disabled", async () => {
         // Arrange
-        const wrapper = shallowMount(
+        const wrapper = shallowMount(modalButtonMain,
-            modalButtonMain,
             setupMocks({
                 propsData: {
                     loaderPosition: 'right',
                     loaderEnabled: true,
                     isDisabled: true
                 }
-            })
+            }));
-        );
 
         const buttonElement = wrapper.find('button');
 
@@ -177,11 +161,13 @@ describe('modal-button-main.vue', () => {
     });
 });
 
+/**
+ *
+ * @param mountOptionsMockData
+ */
 function setupMocks(mountOptionsMockData = {}) {
     const defaultMountOptions = { route: { query: { issPage: 'page-name' } } };
-    const baseMountOptions = getMountOptions(
+    const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
-        Object.assign(defaultMountOptions, mountOptionsMockData)
-    );
     const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
 
     return allMountOptions;

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

@@ -9,11 +9,11 @@
             isLoaderDisplayed ? 'has-loader' : '',
         ]"
         @click="clicked">
-        <span class="m-0">{{ this.buttonText }}</span>
+        <span class="m-0">{{ buttonText }}</span>
         <loader
-            class="ms-2"
             v-if="isLoaderDisplayed && !suppressLoader"
-            v-bind:class="[this.loaderColor, this.loaderPosition]" />
+            class="ms-2"
+            :class="[loaderColor, loaderPosition]" />
     </button>
 </template>
 
@@ -21,7 +21,10 @@
 import loader from '@/ux-components/loader/loader';
 
 export default {
-    name: 'modalButtonMain',
+    name: 'modal-button-main',
+    components: {
+        loader
+    },
     props: {
         isPrimary: Boolean,
         buttonText: String,
@@ -31,6 +34,7 @@ export default {
         isFloat: Boolean,
         suppressLoader: Boolean
     },
+    emits: ['click-event'],
     data() {
         return {
             isLoaderDisplayed: false
@@ -41,12 +45,10 @@ export default {
             this.isLoaderDisplayed = false;
         },
         clicked() {
-            this.pushEventToGA(
+            this.pushEventToGA(this.$route.query[this.queryStrings.ISS_PAGE],
-                this.$route.query[this.queryStrings.ISS_PAGE],
                 this.GaActions.CLICKED,
                 this.buttonText,
-                true
+                true);
-            );
             if (!this.isDisabled) {
                 this.isLoaderDisplayed = true;
                 this.$emit('click-event');
@@ -55,14 +57,11 @@ export default {
         resetButtonStyle() {
             this.isLoaderDisplayed = false;
         }
-    },
-    components: {
-        loader
     }
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .btn {
     &.btn-primary {
         position: relative;
@@ -97,7 +96,7 @@ export default {
         }
         &.has-loader {
             color: $white;
-            background: $blue-700;           
+            background: $blue-700;
             pointer-events: none;
         }
         &.delay {

src/ux-components/radio/radio.spec.js

@@ -65,7 +65,7 @@ describe('radio.vue', () => {
         const wrapper = shallowMount(radio, {
             global: {
                 mocks: {
-                    '$route': { query: { issPage: 'page-name' } },
+                    $route: { query: { issPage: 'page-name' } }
                 }
             },
             propsData: {
@@ -81,7 +81,8 @@ describe('radio.vue', () => {
         });
         wrapper.vm.handleCheckChange();
         // Assert
-        expect(wrapper.emitted()['isCheckedChanged'][0]).toEqual([{'buttonID': 'List Card Checkbox', value: 'List Card Checkbox', checkValue: false}]);;
+        expect(wrapper.emitted().isCheckedChanged[0])
+            .toEqual([{ buttonID: 'List Card Checkbox', value: 'List Card Checkbox', checkValue: false }]);
     });
 
     it('Should set checkValue data if selectedButtonIDs has value(s)', async () => {
@@ -89,7 +90,7 @@ describe('radio.vue', () => {
         const wrapper = shallowMount(radio, {
             global: {
                 mocks: {
-                    '$route': { query: { issPage: 'page-name' } },
+                    $route: { query: { issPage: 'page-name' } }
                 }
             },
             propsData: {

src/ux-components/radio/radio.vue

@@ -1,24 +1,31 @@
 <template>
     <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
-    <div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']">
+    <div
-        <label class="d-inline-flex align-items-start form-check-label" :for="buttonID">
+        class="ui-radio form-check"
+        :class="[(errors.length > 0 || hasError) ? 'has-error' : '']">
+        <label
+            class="d-inline-flex align-items-start form-check-label"
+            :for="buttonID">
             <input
-            type="radio"
+                :id="buttonID"
-            class="form-check-input"
+                type="radio"
-            aria-checked="false"
+                class="form-check-input"
-            :name="groupName"
+                aria-checked="false"
-            :id="buttonID"
+                :name="groupName"
-            :aria-required="isRequired"
+                :aria-required="isRequired"
-            :value="value"
+                :value="value"
-            :v-model="checkValue"
+                :v-model="checkValue"
-            @change="handleCheckChange"
+                :checked="checkValue"
-            :checked="checkValue"
+                :validationRules="validationRules"
-            :validationRules="validationRules"
+                @change="handleCheckChange" />
-            />
+            <p
-            <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
+                v-if="buttonLabel"
-            <span v-if="screenReaderOnlyText" class="sr-only">{{
+                class="m-0">{{ buttonLabel }}</p>
-                screenReaderOnlyText
+            <span
-            }}</span>
+                v-if="screenReaderOnlyText"
+                class="sr-only">
+                {{ screenReaderOnlyText }}
+            </span>
         </label>
     </div>
 </template>
@@ -43,6 +50,24 @@ export default {
         validationRules: String,
         valueToLogType: String
     },
+    emits: ['isCheckedChanged', 'update:modelValue'],
+    setup(props) {
+        const inputType = 'radio';
+        const {
+            value: inputValue,
+            handleChange,
+            errors,
+            resetField
+        } = useField(props.groupName, props.validationRules, {
+            type: inputType
+        });
+
+        return {
+            handleChange,
+            errors,
+            resetField
+        };
+    },
     data() {
         return {
             checkValue: Boolean
@@ -56,6 +81,9 @@ export default {
             this.checkValue = false;
         }
     },
+    unmounted() {
+        this.resetField();
+    },
     methods: {
         handleCheckChange() {
             this.handleChange(this.value);
@@ -68,27 +96,6 @@ export default {
             this.$emit('isCheckedChanged', emitEvent);
             this.$emit('update:modelValue', emitEvent);
         }
-    },
-    setup(props) {
-        const inputType = 'radio';
-        const {
-            value: inputValue,
-            handleChange,
-            errors,
-            resetField
-        } = useField(props.groupName, props.validationRules,
-            {
-                type: inputType
-            });
-
-        return {
-            handleChange,
-            errors,
-            resetField
-        };
-    },
-    unmounted() {
-        this.resetField();
     }
 };
 </script>

src/ux-components/text-link/text-link.vue

@@ -1,21 +1,37 @@
 <template>
-    <a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">
+    <a
-      {{text}}<slot name="after-text"></slot>
+      v-if="linkType === 'navigation'"
+      class="navigation-link"
+      :href="href"
+      @click="handleClick">
+      {{ text }}<slot name="after-text"></slot>
     </a>
-    <a v-else-if="linkType === 'footer'" @click="handleClick" class="footer-link" :href="href" target="_blank">
+    <a
-      {{text}}<slot name="after-text"></slot>
+      v-else-if="linkType === 'footer'"
+      class="footer-link"
+      :href="href"
+      target="_blank"
+      @click="handleClick">
+      {{ text }}<slot name="after-text"></slot>
     </a>
-    <a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">
+    <a
-      {{text}}<slot name="after-text"></slot>
+      v-else-if="linkType === 'textSmall'"
+      class="small"
+      :href="href"
+      @click="handleClick">
+      {{ text }}<slot name="after-text"></slot>
     </a>
-    <a v-else-if="linkType === 'text'" @click="handleClick" :href="href">
+    <a
-      {{text}}<slot name="after-text"></slot>
+      v-else-if="linkType === 'text'"
+      :href="href"
+      @click="handleClick">
+      {{ text }}<slot name="after-text"></slot>
     </a>
   </template>
 
 <script>
 export default {
-    name: 'textLink',
+    name: 'text-link',
     props: {
         linkType: String,
         text: String,
@@ -23,21 +39,20 @@ export default {
             type: String
         }
     },
+    emits: ['click-event'],
     methods: {
-        handleClick(event) {
+        handleClick() {
-            this.pushEventToGA(
+            this.pushEventToGA(this.$route.query[this.queryStrings.ISS_PAGE],
-                this.$route.query[this.queryStrings.ISS_PAGE],
                 this.GaActions.CLICKED,
                 this.text,
-                true
+                true);
-            );
             this.$emit('click-event');
         }
     }
 };
 </script>
 
-  <style lang="scss">
+<style lang="scss" scoped>
   a {
     color: $blue;
     text-underline-offset: 5px;