@salesforcedevs/arch-components 1.20.17-alpha1 → 1.20.17-alpha3

package/src/modules/tds/button/__tests__/button.test.ts

@@ -6,7 +6,7 @@ customElements.define('tds-button', Button.CustomElementConstructor);
 
 describe('tds-button', () => {
     it('reflects attributes', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-button aria-label="Hello"></tds-button> `
         );
         expect(element.shadowRoot!.querySelector('button')).toHaveAttribute(
@@ -16,7 +16,7 @@ describe('tds-button', () => {
     });
 
     it('can show a spinner', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-button spinner>Creating...</tds-button> `
         );
 
@@ -24,7 +24,7 @@ describe('tds-button', () => {
     });
 
     it('applies size small class', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-button size="small"></tds-button> `
         );
         expect(
@@ -33,7 +33,7 @@ describe('tds-button', () => {
     });
 
     it('applies size large class', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-button size="large"></tds-button> `
         );
         expect(
@@ -42,7 +42,7 @@ describe('tds-button', () => {
     });
 
     it('does not apply invalid size class', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-button size="floogle"></tds-button> `
         );
         expect(

package/src/modules/tds/buttonIcon/__tests__/buttonIcon.test.ts

@@ -6,7 +6,7 @@ customElements.define('tds-button-icon', ButtonIcon.CustomElementConstructor);
 
 describe('tds-button-icon', () => {
     it('reflects attributes', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-button-icon aria-label="Hello"></tds-button-icon> `
         );
         expect(element.shadowRoot!.querySelector('button')).toHaveAttribute(

package/src/modules/tds/buttonLink/__tests__/buttonLink.test.ts

@@ -6,7 +6,7 @@ customElements.define('tds-button-link', ButtonLink.CustomElementConstructor);
 
 describe('tds-button-link', () => {
     it('reflects attributes', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-button-link aria-label="Hello"></tds-button-link> `
         );
         expect(element.shadowRoot!.querySelector('a')).toHaveAttribute(

package/src/modules/tds/childSummary/childSummary.ts

@@ -38,12 +38,12 @@ export default class extends LightningElement {
         switch (this.titleMode) {
             case 'anchor': {
                 if (e.target && (e.target as HTMLElement).tagName === 'A')
-                    break;
+                    {break;}
                 window.location.href = this.path!;
             }
             case 'button': {
                 if (e.target && (e.target as HTMLElement).tagName === 'BUTTON')
-                    break;
+                    {break;}
                 this.dispatchEvent(new CustomEvent('navigate'));
             }
         }

package/src/modules/tds/contentChildListItem/__tests__/contentChildListItem.test.ts

@@ -10,8 +10,8 @@ customElements.define(
 
 describe('tds-content-child-list-item', () => {
     it('dispatches a navigate event', async () => {
-        let handler = jest.fn();
-        let element = renderIntoBody(html`
+        const handler = jest.fn();
+        const element = renderIntoBody(html`
             <tds-content-child-list-item
                 .summary=${{ title: 'Hello' }}
                 title-mode="button"

package/src/modules/tds/contentIcon/contentIcon.ts

@@ -33,7 +33,7 @@ export default class extends LightningElement {
     }
 
     private get imageContainerStyles() {
-        let styles = `height: ${this.imageSize}px; width: ${this.imageSize}px;`;
+        const styles = `height: ${this.imageSize}px; width: ${this.imageSize}px;`;
         if (this.background) {
             return [styles, `background-color: ${this.color};`].join(' ');
         }

package/src/modules/tds/footerLinks/__tests__/footerLinks.test.ts

@@ -92,7 +92,7 @@ describe('tds-footer-links', () => {
                 `
             );
 
-            let handler = jest.fn();
+            const handler = jest.fn();
             document.addEventListener('trailhead_track', handler, {
                 once: true
             });
@@ -128,7 +128,7 @@ describe('tds-footer-links', () => {
                     ></tds-footer-links>
                 `
             );
-            let handler = jest.fn();
+            const handler = jest.fn();
             element.addEventListener('link_click', handler);
             // Columns
             element

package/src/modules/tds/headerAvatar/__tests__/headerAvatar.test.ts

@@ -9,7 +9,7 @@ customElements.define(
 
 describe('tds-header-avatar', () => {
     it('sets the img src', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-header-avatar img-src="image.png"></tds-header-avatar> `
         );
         expect(element.shadowRoot!.querySelector('img')).toHaveAttribute(
@@ -18,7 +18,7 @@ describe('tds-header-avatar', () => {
         );
     });
     it('sets the progress percent', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-header-avatar .percent=${50}></tds-header-avatar> `
         );
         expect(
@@ -26,7 +26,7 @@ describe('tds-header-avatar', () => {
         ).toHaveAttribute('aria-valuenow', '50');
     });
     it('sets the progress path', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-header-avatar .percent=${100}></tds-header-avatar> `
         );
         expect(element.shadowRoot!.querySelector('path')).toHaveAttribute(
@@ -35,7 +35,7 @@ describe('tds-header-avatar', () => {
         );
     });
     it('hides the progress if no percent is passed', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-header-avatar></tds-header-avatar> `
         );
         expect(element.shadowRoot!.querySelector('svg')).toBeNull();

package/src/modules/tds/headerAvatar/headerAvatar.ts

@@ -5,11 +5,11 @@ export default class extends LightningElement {
     @api percent: number | null = null;
 
     private get d() {
-        if (!this.percent) return '';
-        let isLong = this.percent > 50 ? 1 : 0;
-        let fill = 1 - this.percent / 100;
-        let arcX = Math.cos(2 * Math.PI * fill);
-        let arcY = Math.sin(2 * Math.PI * fill);
+        if (!this.percent) {return '';}
+        const isLong = this.percent > 50 ? 1 : 0;
+        const fill = 1 - this.percent / 100;
+        const arcX = Math.cos(2 * Math.PI * fill);
+        const arcY = Math.sin(2 * Math.PI * fill);
         return `M 1 0 A 1 1 0 ${isLong} 0 ${arcX} ${arcY} L 0 0`;
     }
 }

package/src/modules/tds/headerHelpButton/__tests__/headerHelpButton.test.ts

@@ -10,12 +10,12 @@ customElements.define(
 describe('tds-header-help-button', () => {
     describe('tracking', () => {
         it('header_help_clicked', () => {
-            let element = renderIntoBody(
+            const element = renderIntoBody(
                 html`
                     <tds-header-help-button href="/"></tds-header-help-button>
                 `
             );
-            let handler = jest.fn();
+            const handler = jest.fn();
             document.addEventListener('trailhead_track', handler, {
                 once: true
             });

package/src/modules/tds/heading/__tests__/heading.test.ts

@@ -6,43 +6,43 @@ customElements.define('tds-heading', Heading.CustomElementConstructor);
 
 describe('tds-heading', () => {
     it('level 1', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-heading level="1"></tds-heading> `
         );
         expect(element.shadowRoot!.querySelector('h1')).toBeTruthy();
     });
     it('level 2', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-heading level="2"></tds-heading> `
         );
         expect(element.shadowRoot!.querySelector('h2')).toBeTruthy();
     });
     it('level 3', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-heading level="3"></tds-heading> `
         );
         expect(element.shadowRoot!.querySelector('h3')).toBeTruthy();
     });
     it('level 4', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-heading level="4"></tds-heading> `
         );
         expect(element.shadowRoot!.querySelector('h4')).toBeTruthy();
     });
     it('level 5', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-heading level="5"></tds-heading> `
         );
         expect(element.shadowRoot!.querySelector('h5')).toBeTruthy();
     });
     it('level 6', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-heading level="6"></tds-heading> `
         );
         expect(element.shadowRoot!.querySelector('h6')).toBeTruthy();
     });
     it('null', () => {
-        let element = renderIntoBody(html` <tds-heading></tds-heading> `);
+        const element = renderIntoBody(html` <tds-heading></tds-heading> `);
         expect(
             Array.from(element.shadowRoot!.children).map((n) => n.tagName)
         ).toEqual(['SLOT']);

package/src/modules/tds/icon/icon.ts

@@ -43,32 +43,32 @@ export default class extends LightningElement {
     }
 
     renderedCallback() {
-        if (this.context.crossOriginAssets) this.appendNodes();
+        if (this.context.crossOriginAssets) {this.appendNodes();}
     }
 
     private async appendNodes() {
-        if (process.env.NODE_ENV === 'test') return;
-        let { symbolId } = this;
-        if (this.node && this.node.id === symbolId) return;
+        if (process.env.NODE_ENV === 'test') {return;}
+        const { symbolId } = this;
+        if (this.node && this.node.id === symbolId) {return;}
         await this.fetchSprite(this.sprite);
-        let svg = this.template.querySelector('svg')!;
-        let node = document
+        const svg = this.template.querySelector('svg')!;
+        const node = document
             .getElementById(symbolId)!
             .cloneNode(true) as SVGSymbolElement;
-        while (svg.firstChild) svg.removeChild(svg.firstChild);
-        for (let n of Array.from(node.childNodes)) svg.appendChild(n);
+        while (svg.firstChild) {svg.removeChild(svg.firstChild);}
+        for (const n of Array.from(node.childNodes)) {svg.appendChild(n);}
         svg.setAttribute('viewBox', node.getAttribute('viewBox')!);
     }
 
     private async fetchSprite(sprite: Sprite) {
-        if (fetches.has(sprite)) return fetches.get(sprite);
-        let promise = fetch(
+        if (fetches.has(sprite)) {return fetches.get(sprite);}
+        const promise = fetch(
             `${this.context.assetsUrl}/icons/${this.sprite}-sprite/svg/symbols.svg`
         )
             .then((res) => res.text())
             .then((svg) => svg.replace(/id=\"/g, `id="tds__${sprite}__`))
             .then((svg) => {
-                let node = document.createElement('div');
+                const node = document.createElement('div');
                 node.innerHTML = svg;
                 node.style.display = 'none';
                 document.body.appendChild(node);

package/src/modules/tds/radio/__tests__/radio.test.ts

@@ -6,7 +6,7 @@ customElements.define('tds-radio', Radio.CustomElementConstructor);
 
 describe('tds-radio', () => {
     it('works', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-radio label="Hello"></tds-radio> `
         );
     });

package/src/modules/tds/search/__tests__/search.test.ts

@@ -4,7 +4,7 @@ import { default as Search } from '../search';
 
 customElements.define('tds-search', Search.CustomElementConstructor);
 
-let location = {};
+const location = {};
 
 Object.defineProperty(window, 'location', {
     get: () => location
@@ -25,7 +25,7 @@ describe('tds-search', () => {
         document.body.innerHTML = '';
     });
     it('placeholder', () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html` <tds-search placeholder="Search"></tds-search> `
         );
         expect(element.shadowRoot!.querySelector('input')).toHaveAttribute(
@@ -34,7 +34,7 @@ describe('tds-search', () => {
         );
     });
     it('defaultValue', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`
                 <tds-search
                     default-value="lwc"
@@ -56,7 +56,7 @@ describe('tds-search', () => {
         ).toBe(null);
     });
     it('sets the icon style', async () => {
-        let element = renderIntoBody(
+        const element = renderIntoBody(
             html`
                 <tds-search
                     .recents=${[
@@ -79,7 +79,7 @@ describe('tds-search', () => {
         // Wait a bit more for the listbox to render
         await new Promise((resolve) => setTimeout(resolve, 100));
 
-        let image = element.shadowRoot!.querySelector('.search-result__image');
+        const image = element.shadowRoot!.querySelector('.search-result__image');
 
         if (image) {
             expect(image).toHaveStyle('background-color: red;');
@@ -90,17 +90,17 @@ describe('tds-search', () => {
     }, 10000);
     describe('events', () => {
         it('focus', () => {
-            let onFocus = jest.fn();
-            let element = renderIntoBody(html` <tds-search></tds-search> `);
+            const onFocus = jest.fn();
+            const element = renderIntoBody(html` <tds-search></tds-search> `);
             element.addEventListener('focus', onFocus);
             element.shadowRoot!.querySelector('input')!.focus();
             expect(onFocus).toHaveBeenCalled();
         });
         it('change', async () => {
-            let onChange = jest.fn();
-            let element = renderIntoBody(html` <tds-search></tds-search> `);
+            const onChange = jest.fn();
+            const element = renderIntoBody(html` <tds-search></tds-search> `);
             element.addEventListener('change', onChange);
-            let $input = element.shadowRoot!.querySelector('input')!;
+            const $input = element.shadowRoot!.querySelector('input')!;
             $input.value = 'test';
             $input.dispatchEvent(new InputEvent('input', { bubbles: true }));
             await new Promise((resolve) => setTimeout(resolve, 50));
@@ -111,8 +111,8 @@ describe('tds-search', () => {
         });
         describe('search', () => {
             it('type=completion', async () => {
-                let onSearch = jest.fn();
-                let element = renderIntoBody(
+                const onSearch = jest.fn();
+                const element = renderIntoBody(
                     html`
                         <tds-search
                             .completions=${[{ value: 'Test' }]}
@@ -148,10 +148,10 @@ describe('tds-search', () => {
                 }
             }, 10000);
             it('type=input', async () => {
-                let onSearch = jest.fn();
-                let element = renderIntoBody(html` <tds-search></tds-search> `);
+                const onSearch = jest.fn();
+                const element = renderIntoBody(html` <tds-search></tds-search> `);
                 element.addEventListener('search', onSearch);
-                let $input = element.shadowRoot!.querySelector('input')!;
+                const $input = element.shadowRoot!.querySelector('input')!;
                 $input.value = 'test';
                 $input.dispatchEvent(
                     new InputEvent('input', { bubbles: true })
@@ -190,8 +190,8 @@ describe('tds-search', () => {
                 }
             }, 10000);
             it('type=recent', async () => {
-                let onSearch = jest.fn();
-                let element = renderIntoBody(
+                const onSearch = jest.fn();
+                const element = renderIntoBody(
                     html`
                         <tds-search
                             .recents=${[

package/src/modules/tds/search/lib/__tests__/listbox.test.ts

@@ -18,7 +18,7 @@ describe('Listbox', () => {
         onChange = jest.fn();
         onSelect = jest.fn();
         onSubmit = jest.fn();
-        let $element = document.createElement('div');
+        const $element = document.createElement('div');
         $shadow = $element.attachShadow({ mode: 'open' });
         $shadow.innerHTML = createListboxTemplate(createListboxItems());
         listbox = createListbox($shadow, onChange, onSelect, onSubmit);
@@ -29,7 +29,7 @@ describe('Listbox', () => {
         expect($shadow.innerHTML).toMatchSnapshot();
     });
     it('focus', async () => {
-        let focusEvent = new FocusEvent('focus', {
+        const focusEvent = new FocusEvent('focus', {
             bubbles: false,
             cancelable: true
         });
@@ -37,13 +37,13 @@ describe('Listbox', () => {
         expect($shadow.innerHTML).toMatchSnapshot();
     });
     it('focus (empty)', async () => {
-        let $element = document.createElement('div');
+        const $element = document.createElement('div');
         $shadow = $element.attachShadow({ mode: 'open' });
         $shadow.innerHTML = createListboxTemplate([]);
         listbox = createListbox($shadow, onChange, onSelect, onSubmit);
         listbox.renderedCallback();
         $input = $shadow.querySelector('input') as HTMLInputElement;
-        let focusEvent = new FocusEvent('focus', {
+        const focusEvent = new FocusEvent('focus', {
             bubbles: false,
             cancelable: true
         });
@@ -51,11 +51,11 @@ describe('Listbox', () => {
         expect($shadow.innerHTML).toMatchSnapshot();
     });
     it('submit', async () => {
-        let focusEvent = new FocusEvent('focus', {
+        const focusEvent = new FocusEvent('focus', {
             bubbles: false,
             cancelable: true
         });
-        let keydownEvent = new KeyboardEvent('keydown', {
+        const keydownEvent = new KeyboardEvent('keydown', {
             bubbles: false,
             cancelable: true,
             key: 'Enter'
@@ -66,11 +66,11 @@ describe('Listbox', () => {
         expect(onSubmit).toHaveBeenCalledTimes(1);
     });
     it('arrow down', async () => {
-        let focusEvent = new FocusEvent('focus', {
+        const focusEvent = new FocusEvent('focus', {
             bubbles: false,
             cancelable: true
         });
-        let keydownEvent = new KeyboardEvent('keydown', {
+        const keydownEvent = new KeyboardEvent('keydown', {
             bubbles: false,
             cancelable: true,
             key: 'ArrowDown'
@@ -86,11 +86,11 @@ describe('Listbox', () => {
         expect($input).toHaveAttribute('aria-activedescendant', 'a');
     });
     it('arrow up', async () => {
-        let focusEvent = new FocusEvent('focus', {
+        const focusEvent = new FocusEvent('focus', {
             bubbles: false,
             cancelable: true
         });
-        let keydownEvent = new KeyboardEvent('keydown', {
+        const keydownEvent = new KeyboardEvent('keydown', {
             bubbles: false,
             cancelable: true,
             key: 'ArrowUp'
@@ -102,11 +102,11 @@ describe('Listbox', () => {
         expect($input).toHaveAttribute('aria-activedescendant', 'b');
     });
     it('enter', async () => {
-        let focusEvent = new FocusEvent('focus', {
+        const focusEvent = new FocusEvent('focus', {
             bubbles: false,
             cancelable: true
         });
-        let keydownEvent = (key: string) =>
+        const keydownEvent = (key: string) =>
             new KeyboardEvent('keydown', {
                 bubbles: false,
                 cancelable: true,
@@ -119,7 +119,7 @@ describe('Listbox', () => {
         expect(onSelect).toHaveBeenCalledWith(1);
     });
     it('blur', async () => {
-        let focusEvent = new FocusEvent('blur', {
+        const focusEvent = new FocusEvent('blur', {
             bubbles: false,
             cancelable: true
         });
@@ -127,15 +127,15 @@ describe('Listbox', () => {
         expect($shadow.innerHTML).toMatchSnapshot();
     });
     it('click', async () => {
-        let focusEvent = new FocusEvent('blur', {
+        const focusEvent = new FocusEvent('blur', {
             bubbles: false,
             cancelable: true
         });
-        let mouseEnterEvent = new MouseEvent('mouseenter', {
+        const mouseEnterEvent = new MouseEvent('mouseenter', {
             bubbles: false,
             cancelable: true
         });
-        let clickEvent = new MouseEvent('click', {
+        const clickEvent = new MouseEvent('click', {
             bubbles: true,
             cancelable: true
         });

package/src/modules/tds/search/lib/listbox.ts

@@ -55,7 +55,7 @@ export class Listbox {
             | Partial<ListboxState>
             | ((state: ListboxState) => Partial<ListboxState>)
     ) {
-        let { state } = this;
+        const { state } = this;
         this.state = {
             ...state,
             ...(typeof nextState === 'function' ? nextState(state) : nextState)
@@ -64,8 +64,8 @@ export class Listbox {
 
     renderedCallback() {
         if (!this.state.setup) {
-            let $input = this.getElement('input')!;
-            let $options = this.getElement(SELECTOR_OPTIONS)!;
+            const $input = this.getElement('input')!;
+            const $options = this.getElement(SELECTOR_OPTIONS)!;
             $input.addEventListener('blur', this.onBlur as EventListener);
             $input.addEventListener('focus', this.onFocus as EventListener);
             $input.addEventListener('keydown', this.onKeyDown as EventListener);
@@ -81,8 +81,8 @@ export class Listbox {
     }
 
     disconnectedCallback() {
-        let $input = this.getElement(SELECTOR_INPUT)!;
-        let $options = this.getElement(SELECTOR_OPTIONS)!;
+        const $input = this.getElement(SELECTOR_INPUT)!;
+        const $options = this.getElement(SELECTOR_OPTIONS)!;
         if ($input) {
             $input.removeEventListener('blur', this.onBlur as EventListener);
             $input.removeEventListener('focus', this.onFocus as EventListener);
@@ -100,7 +100,7 @@ export class Listbox {
     }
 
     private onClick = (e: MouseEvent) => {
-        let selectedIndex = Array.from(
+        const selectedIndex = Array.from(
             this.input.shadowRoot.querySelectorAll(getSelector(SELECTOR_OPTION))
         ).findIndex((n) => n.contains(e.target as HTMLElement));
         this.setState({ active: false, selectedIndex });
@@ -123,7 +123,7 @@ export class Listbox {
                 this.setState((state) => {
                     let { selectedIndex } = state;
                     selectedIndex--;
-                    if (selectedIndex < 0) selectedIndex = this._count - 1;
+                    if (selectedIndex < 0) {selectedIndex = this._count - 1;}
                     return { selectedIndex };
                 });
                 break;
@@ -131,7 +131,7 @@ export class Listbox {
                 this.setState((state) => {
                     let { selectedIndex } = state;
                     selectedIndex++;
-                    if (selectedIndex === this._count) selectedIndex = 0;
+                    if (selectedIndex === this._count) {selectedIndex = 0;}
                     return { selectedIndex };
                 });
                 break;
@@ -155,18 +155,18 @@ export class Listbox {
     };
 
     private setRootAttributes() {
-        let $root = this.getElement(SELECTOR_ROOT)!;
+        const $root = this.getElement(SELECTOR_ROOT)!;
         $root.setAttribute('aria-expanded', String(this.isExpanded));
         $root.setAttribute('aria-haspopup', 'listbox');
         $root.setAttribute('role', 'combobox');
     }
 
     private setInputAttributes() {
-        let $activeDecendant = this.input.shadowRoot.querySelectorAll(
+        const $activeDecendant = this.input.shadowRoot.querySelectorAll(
             getSelector(SELECTOR_OPTION)
         )[this.state.selectedIndex] as HTMLElement | undefined;
-        let $input = this.getElement(SELECTOR_INPUT)!;
-        let $options = this.getElement(SELECTOR_OPTIONS)!;
+        const $input = this.getElement(SELECTOR_INPUT)!;
+        const $options = this.getElement(SELECTOR_OPTIONS)!;
         $input.setAttribute(
             'aria-activedescendant',
             $activeDecendant ? $activeDecendant.getAttribute('id') || '' : ''
@@ -177,12 +177,12 @@ export class Listbox {
     }
 
     private setListboxAttributes() {
-        let $options = this.getElement(SELECTOR_OPTIONS)!;
+        const $options = this.getElement(SELECTOR_OPTIONS)!;
         $options.setAttribute('role', 'listbox');
         $options.setAttribute('aria-hidden', String(!this.isExpanded));
         this.input.shadowRoot.querySelectorAll('ui,li').forEach((node) => {
-            let element = node as HTMLElement;
-            if (element.hasAttribute('role')) return;
+            const element = node as HTMLElement;
+            if (element.hasAttribute('role')) {return;}
             element.setAttribute('role', 'presentation');
         });
     }
@@ -191,7 +191,7 @@ export class Listbox {
         this.input.shadowRoot
             .querySelectorAll(getSelector(SELECTOR_OPTION))
             .forEach((node, i) => {
-                let element = node as HTMLElement;
+                const element = node as HTMLElement;
                 element.setAttribute(
                     'aria-selected',
                     String(i === this.state.selectedIndex)