Auto prettier/linting fixes

docs/assets/main.scss

@@ -27,6 +27,7 @@ code {
 
 a code {
   color: $link-color;
+
   &:hover {
     color: $link-hover-color;
   }
@@ -44,6 +45,7 @@ a {
 
   &:hover {
     color: $link-hover-color;
+
     svg {
       fill: $link-hover-color;
     }
@@ -70,6 +72,7 @@ html {
 html {
   box-sizing: border-box;
 }
+
 *,
 *::before,
 *::after {

docs/common/DocsFilter/index.vue

@@ -70,6 +70,7 @@
     font-size: 12px;
     border: 1px solid $border-color;
     border-radius: 4px;
+
     &::placeholder {
       color: $border-color;
     }

docs/common/DocsPageTemplate/SideNav/index.vue

@@ -55,7 +55,7 @@
         return termList(this.filterText);
       },
       visibleTableOfContents() {
-        let toc = [];
+        const toc = [];
         for (const section of tableOfContents) {
           // if the section title matches, add the entire thing
           if (matches(this.terms, section.title)) {

docs/pages/principles.vue

@@ -61,6 +61,7 @@
   .description {
     font-size: 18px;
   }
+
   li {
     font-size: 14px;
     color: #616161;

lib/KDropdownMenu.vue

@@ -174,9 +174,9 @@
         const lastChild = menuElements[menuElements.length - 1];
         const popoverIsOpen = popover.clientWidth > 0 && popover.clientHeight > 0;
         // set current element and its siblings
-        let focusedElement = document.activeElement;
-        let sibling = focusedElement.nextElementSibling;
-        let prevSibling = focusedElement.previousElementSibling;
+        const focusedElement = document.activeElement;
+        const sibling = focusedElement.nextElementSibling;
+        const prevSibling = focusedElement.previousElementSibling;
 
         // manage rotating through the options using arrow keys
         // UP arrow: .keyCode is depricated and should used only as a fallback

lib/KImg/__tests__/KImg.spec.js

@@ -10,7 +10,7 @@ describe('KImg', () => {
     const error = jest.fn();
     const wrapper = makeWrapper({
       propsData: { src: '/le-logo.svg', altText: 'LE logo' },
-      listeners: { error }
+      listeners: { error },
     });
 
     expect(wrapper.exists()).toBe(true);
@@ -26,19 +26,21 @@ describe('KImg', () => {
     const error = jest.fn();
     makeWrapper({
       propsData: { src: '/le-logo.svg', altText: undefined },
-      listeners: { error }
+      listeners: { error },
     });
     expect(error).toHaveBeenCalled();
     expect(error.mock.calls[0][0]).toBeInstanceOf(Error);
-    expect(error.mock.calls[0][0].message).toBe("Missing required prop - provide altText or indicate isDecorative");
+    expect(error.mock.calls[0][0].message).toBe(
+      'Missing required prop - provide altText or indicate isDecorative'
+    );
   });
 
   describe(`when no 'altText' is provided and it is a decorative image`, () => {
     it(`does not throw an error`, () => {
       const error = jest.fn();
       makeWrapper({
         propsData: { src: '/le-logo.svg', altText: undefined, isDecorative: true },
-        listeners: { error }
+        listeners: { error },
       });
       expect(error).not.toHaveBeenCalled();
     });
@@ -56,18 +58,18 @@ describe('KImg', () => {
     const error = jest.fn();
     makeWrapper({
       propsData: { src: '/le-logo.svg', altText: 'LE logo', aspectRatio: '16/9' },
-      listeners: { error }
+      listeners: { error },
     });
     expect(error).toHaveBeenCalled();
     expect(error.mock.calls[0][0]).toBeInstanceOf(Error);
-    expect(error.mock.calls[0][0].message).toBe("Invalid aspect ratio provided: 16/9");
+    expect(error.mock.calls[0][0].message).toBe('Invalid aspect ratio provided: 16/9');
   });
 
   it(`doesn't throw an error when 'aspectRatio' has a valid format`, () => {
     const error = jest.fn();
     makeWrapper({
       propsData: { src: '/le-logo.svg', altText: 'LE logo', aspectRatio: '16:9' },
-      listeners: { error }
+      listeners: { error },
     });
     expect(error).not.toHaveBeenCalled();
   });
@@ -76,15 +78,15 @@ describe('KImg', () => {
     const error = jest.fn();
     const wrapper = makeWrapper({
       propsData: { src: '/le-logo.svg', altText: 'LE logo' },
-      listeners: { error }
+      listeners: { error },
     });
 
     // Manually trigger the onError method to simulate the image load failure
     const e = new Event('error');
     wrapper.vm.onError(e);
 
     expect(error).toHaveBeenCalled();
-    expect(error.mock.calls[0][0]).toBeInstanceOf(Event)
+    expect(error.mock.calls[0][0]).toBeInstanceOf(Event);
     expect(error.mock.calls[0][0]).toEqual(e);
   });
 });

lib/KLabeledIcon.vue

@@ -93,10 +93,10 @@
         );
       },
       labelStyle() {
-        let styles = {};
+        const styles = {};
         let margins = 0;
-        let leftLtr = this.isRtl ? 'marginRight' : 'marginLeft';
-        let rightLtr = this.isRtl ? 'marginLeft' : 'marginRight';
+        const leftLtr = this.isRtl ? 'marginRight' : 'marginLeft';
+        const rightLtr = this.isRtl ? 'marginLeft' : 'marginRight';
         // Margin for icons - use em to match parent font size
         if (this.iconAfter || this.$slots['iconAfter']) {
           styles[rightLtr] = '1.975em'; // scale with parent font size

lib/KModal.vue

@@ -432,8 +432,8 @@
   }
 
   .scroll-shadow {
-    background: linear-gradient(white 30%, hsla(0, 0%, 100%, 0)),
-      linear-gradient(hsla(0, 0%, 100%, 0) 10px, white 70%) bottom,
+    background: linear-gradient(white 30%, hsla(0deg, 0%, 100%, 0)),
+      linear-gradient(hsla(0deg, 0%, 100%, 0) 10px, white 70%) bottom,
       radial-gradient(at top, rgba(0, 0, 0, 0.2), transparent 70%),
       radial-gradient(at bottom, rgba(0, 0, 0, 0.2), transparent 70%) bottom;
     background-repeat: no-repeat;
@@ -448,6 +448,7 @@
   .actions {
     padding: 24px;
     text-align: right;
+
     button {
       margin: 0;
     }

lib/KSelect/index.vue

@@ -920,6 +920,7 @@
 
     &.is-active:not(.is-disabled) {
       border-bottom-color: $ui-input-border-color--active;
+
       .ui-icon {
         color: $ui-input-icon-color--active;
       }

lib/KSwitch.vue

@@ -226,6 +226,7 @@
         cursor: default;
       }
     }
+
     &.is-rtl {
       direction: rtl;
     }
@@ -265,6 +266,7 @@
     transition-duration: 0.2s;
     transition-property: background-color, transform;
   }
+
   .k-switch-label-text {
     margin-left: 16px;
     font-size: 15px;
@@ -290,6 +292,7 @@
       .k-switch-track {
         background-color: #b4c3fb;
       }
+
       .k-switch-thumb {
         background-color: #4368f5;
       }

lib/KTransition.vue

@@ -55,6 +55,7 @@
   .component-fade-leave-active {
     transition: opacity 0.25s ease;
   }
+
   .component-fade-enter,
   .component-fade-leave-to {
     opacity: 0;

lib/__tests__/KModal.spec.js

@@ -30,7 +30,7 @@ describe('KModal component', () => {
     });
 
     it(`text should appear on the close button`, () => {
-      let cancelText = 'goodbye';
+      const cancelText = 'goodbye';
       const onClick = jest.fn();
       const wrapper = shallowMount(KModal, {
         propsData: {
@@ -42,7 +42,7 @@ describe('KModal component', () => {
     });
 
     it(`submit button is disabled if submitDisabled is true`, () => {
-      let submitText = 'hello';
+      const submitText = 'hello';
       const onClick = jest.fn();
       const wrapper = shallowMount(KModal, {
         propsData: {
@@ -55,7 +55,7 @@ describe('KModal component', () => {
     });
 
     it(`cancel button is disabled if cancelDisabled is true`, () => {
-      let cancelText = 'goodbye';
+      const cancelText = 'goodbye';
       const onClick = jest.fn();
       const wrapper = shallowMount(KModal, {
         propsData: {

lib/buttons-and-links/KButton.vue

@@ -131,7 +131,7 @@
         };
       },
       textStyle() {
-        let styles = {};
+        const styles = {};
         if (this.icon) {
           if (this.isRtl) {
             // If RTL-language, but English link, displays correct margins

lib/buttons-and-links/KExternalLink.vue

@@ -104,7 +104,7 @@
        * If link opens in new tab or if icon is provided, add 8px margin between the icon and the text
        */
       spanStyle() {
-        let styles = {};
+        const styles = {};
         if (this.openInNewTab || this.icon) {
           if (this.isRtl) {
             // If RTL-language, but English link, displays correct margins

lib/buttons-and-links/KRouterLink.vue

@@ -98,7 +98,7 @@
        * If icon is provided, add 8px margin between the icon and the text
        */
       spanStyle() {
-        let styles = {};
+        const styles = {};
         if (this.icon) {
           if (this.isRtl) {
             // If RTL-language, but English link, displays correct margins

lib/loaders/KCircularLoader.vue

@@ -221,6 +221,7 @@
     from {
       opacity: 0;
     }
+
     to {
       opacity: 1;
     }

lib/loaders/KLinearLoader.vue

@@ -113,6 +113,7 @@
     from {
       opacity: 0;
     }
+
     to {
       opacity: 1;
     }

lib/styles/definitions.scss

@@ -49,6 +49,7 @@ $core-time: 0.25s;
   .partial-fonts-loaded & {
     font-family: 'noto-subset', 'noto-common', sans-serif;
   }
+
   .full-fonts-loaded & {
     // Continue to include the common and subset font subsets since they may contain
     // glyphs not available in the language's default font.

lib/tabs/__tests__/KTabs.spec.js

@@ -32,7 +32,7 @@ const TABS_WITH_ROUTES = [
 // spec files where majority of tabs functionality is tested.
 describe(`KTabs`, () => {
   it(`smoke test`, () => {
-    const wrapper = shallowMount(KTabs, { listeners: { error: () => {}}});
+    const wrapper = shallowMount(KTabs, { listeners: { error: () => {} } });
     expect(wrapper.exists()).toBeTruthy();
   });
 

lib/tabs/__tests__/KTabsList.spec.js

@@ -13,17 +13,17 @@ const routerPush = router.push;
 // @see https://github.com/vuejs/vue-router/issues/2881#issuecomment-520554378
 router.push = function(location, onResolve, onReject) {
   if (onResolve || onReject) {
-    return routerPush.call(this, location, onResolve, onReject)
+    return routerPush.call(this, location, onResolve, onReject);
   }
-  return routerPush.call(this, location).catch((err) => {
+  return routerPush.call(this, location).catch(err => {
     if (VueRouter.isNavigationFailure(err)) {
       // resolve err
       return err;
     }
     // rethrow error
     return Promise.reject(err);
-  })
-}
+  });
+};
 
 const TABS = [
   { id: 'tabLessons', label: 'Lessons' },
@@ -46,7 +46,7 @@ describe(`KTabsList`, () => {
       router,
       listeners: {
         error: errorListener,
-      }
+      },
     });
   }
 
@@ -59,7 +59,7 @@ describe(`KTabsList`, () => {
   });
 
   it(`smoke test`, () => {
-    const wrapper = shallowMount(KTabsList, { listeners: { error: errorListener }});
+    const wrapper = shallowMount(KTabsList, { listeners: { error: errorListener } });
     expect(wrapper.exists()).toBeTruthy();
   });
 
@@ -74,7 +74,9 @@ describe(`KTabsList`, () => {
     expect(errorListener).toHaveBeenCalled();
     expect(errorListener).toHaveBeenCalledTimes(1);
     expect(errorListener.mock.calls[0][0]).toBeInstanceOf(Error);
-    expect(errorListener.mock.calls[0][0].message).toBe(`[KTabsList] Missing 'ariaLabel' or 'ariaLabelledBy'`);
+    expect(errorListener.mock.calls[0][0].message).toBe(
+      `[KTabsList] Missing 'ariaLabel' or 'ariaLabelledBy'`
+    );
   });
 
   describe(`when 'ariaLabel' prop is provided`, () => {