chore(all): format components (VIV-1590)

.prettierignore

@@ -12,4 +12,13 @@ package-lock.json
 **/*.ts
 **/*.mts
 **/*.cts
+!libs/components/src/**/*.js
+!libs/components/src/**/*.mjs
+!libs/components/src/**/*.cjs
+!libs/components/src/**/*.ts
+!libs/components/src/**/*.mts
+!libs/components/src/**/*.cts
+**/*.css
+**/*.scss
+**/*.vue
 **/*.md

libs/components/.eslintrc.json

@@ -10,27 +10,14 @@
 	"extends": [
 		"../../.eslintrc.json",
 		"@microsoft/eslint-config-fast-dna",
-		"plugin:compat/recommended"
+		"plugin:compat/recommended",
+		"prettier"
 	],
 	"rules": {
 		// lint
 		"@nrwl/nx/workspace/no-attribute-default-value": "error",
 		"@typescript-eslint/no-non-null-assertion": "off",
-		"indent": "off",
-		"@typescript-eslint/indent": ["error", "tab"],
-		"no-tabs": "off",
-		"no-mixed-spaces-and-tabs": "error",
-		"linebreak-style": ["warn", "unix"],
-		"semi": ["error", "always"],
-		"quotes": [
-			"error",
-			"single",
-			{
-				"avoidEscape": true
-			}
-		],
 		"no-var": "error",
-		"no-floating-decimal": "error",
 		"prefer-const": "error",
 		// functional
 		"compat/compat": "error",

libs/components/src/lib/accordion-item/accordion-item.spec.ts

@@ -21,7 +21,9 @@ describe('vwc-accordion-item', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-accordion-item', async () => {
-			expect(accordionItemDefinition()).toBeInstanceOf(FoundationElementRegistry);
+			expect(accordionItemDefinition()).toBeInstanceOf(
+				FoundationElementRegistry
+			);
 			expect(element).toBeInstanceOf(AccordionItem);
 			expect(element.expanded).toBeFalsy();
 			expect(element.icon).toBeUndefined();
@@ -37,7 +39,9 @@ describe('vwc-accordion-item', () => {
 	describe('click', () => {
 		let itemHeaderButton: HTMLButtonElement;
 		beforeEach(function () {
-			itemHeaderButton = element.shadowRoot?.querySelector('.heading-button') as HTMLButtonElement;
+			itemHeaderButton = element.shadowRoot?.querySelector(
+				'.heading-button'
+			) as HTMLButtonElement;
 		});
 
 		it('should expand a closed item on click', async () => {
@@ -55,38 +59,52 @@ describe('vwc-accordion-item', () => {
 
 	describe('icon', () => {
 		it('should have an icon slot', async () => {
-			expect(element.shadowRoot?.querySelector('slot[name="icon"]')).toBeTruthy();
+			expect(
+				element.shadowRoot?.querySelector('slot[name="icon"]')
+			).toBeTruthy();
 		});
 
 		it('should render an icon when the icon property is set', async () => {
-			const secondChildWithoutIcon = element.shadowRoot?.querySelector('.heading-button :nth-child(2)') as HTMLSpanElement;
+			const secondChildWithoutIcon = element.shadowRoot?.querySelector(
+				'.heading-button :nth-child(2)'
+			) as HTMLSpanElement;
 			element.icon = 'chat-solid';
 			await elementUpdated(element);
-			const secondChildWithIcon = element.shadowRoot?.querySelector('.heading-button :nth-child(1)') as HTMLSpanElement;
+			const secondChildWithIcon = element.shadowRoot?.querySelector(
+				'.heading-button :nth-child(1)'
+			) as HTMLSpanElement;
 
 			expect(secondChildWithoutIcon.classList).toContain('heading-content');
 			expect(secondChildWithoutIcon.classList).not.toContain('icon');
 			expect(secondChildWithIcon.classList).not.toContain('heading-content');
-			expect(secondChildWithIcon.querySelector('vwc-icon')?.getAttribute('name')).toBe('chat-solid');
+			expect(
+				secondChildWithIcon.querySelector('vwc-icon')?.getAttribute('name')
+			).toBe('chat-solid');
 		});
 
 		it('should render a trailing icon when the iconTrailing property is set', async () => {
-			const headerLastIcon = () => element.shadowRoot?.querySelector('vwc-icon:last-of-type') as HTMLElement;
+			const headerLastIcon = () =>
+				element.shadowRoot?.querySelector(
+					'vwc-icon:last-of-type'
+				) as HTMLElement;
 
 			const lastIconWithDefaultIcon = headerLastIcon();
 			element.icon = 'chat-solid';
 			element.iconTrailing = true;
 			await elementUpdated(element);
 			const lastIconWithIconSet = headerLastIcon();
 
-			expect(lastIconWithDefaultIcon.getAttribute('name')).toBe('chevron-down-solid');
+			expect(lastIconWithDefaultIcon.getAttribute('name')).toBe(
+				'chevron-down-solid'
+			);
 			expect(lastIconWithIconSet.getAttribute('name')).toBe('chat-solid');
 		});
 	});
 
 	describe('no-indicator', () => {
 		it('should remove indicator', async () => {
-			const indicatorExistsOnInit = !!element.shadowRoot?.querySelector('.icon');
+			const indicatorExistsOnInit =
+				!!element.shadowRoot?.querySelector('.icon');
 			element.noIndicator = true;
 			await elementUpdated(element);
 
@@ -97,7 +115,8 @@ describe('vwc-accordion-item', () => {
 
 	describe('heading level', () => {
 		it('should update heading level', async () => {
-			const headerTag = () => element.shadowRoot?.querySelector(':first-child')?.tagName as string;
+			const headerTag = () =>
+				element.shadowRoot?.querySelector(':first-child')?.tagName as string;
 			const headerTagOnInit = headerTag();
 
 			element.headinglevel = 4;
@@ -125,7 +144,8 @@ describe('vwc-accordion-item', () => {
 			(element as any).size = size;
 			await elementUpdated(element);
 
-			const accordionButton = element.shadowRoot?.querySelector('.heading-button');
+			const accordionButton =
+				element.shadowRoot?.querySelector('.heading-button');
 			const accordionRegion = element.shadowRoot?.querySelector('.region');
 
 			expect(accordionButton?.classList.contains(`size-${size}`)).toBeTruthy();
@@ -149,9 +169,13 @@ describe('vwc-accordion-item', () => {
 			await elementUpdated(element);
 
 			const accordionButton = element.shadowRoot?.getElementById(TEST_ID);
-			const accordionRegion = element.shadowRoot?.getElementById(`${TEST_ID}-panel`);
+			const accordionRegion = element.shadowRoot?.getElementById(
+				`${TEST_ID}-panel`
+			);
 
-			expect(accordionButton?.getAttribute('aria-controls')).toBe(`${TEST_ID}-panel`);
+			expect(accordionButton?.getAttribute('aria-controls')).toBe(
+				`${TEST_ID}-panel`
+			);
 			expect(accordionRegion?.getAttribute('aria-labelledby')).toBe(TEST_ID);
 		});
 

libs/components/src/lib/accordion-item/accordion-item.template.ts

@@ -1,36 +1,39 @@
 import { html, ref, ViewTemplate, when } from '@microsoft/fast-element';
 import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import type { AccordionItem } from './accordion-item.js';
 
-
-
-
 const header = (context: ElementDefinitionContext, hTag: string) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
 	/* eslint-disable @typescript-eslint/indent */
 	return html<AccordionItem>`
 		<${hTag} class="heading-container">
 			<button
-				class="heading-button ${x => x.size ? `size-${x.size}` : ''}"
-				id="${x => x.id}"
-				aria-expanded="${x => x.expanded}"
-				aria-controls="${x => x.id}-panel"
+				class="heading-button ${(x) => (x.size ? `size-${x.size}` : '')}"
+				id="${(x) => x.id}"
+				aria-expanded="${(x) => x.expanded}"
+				aria-controls="${(x) => x.id}-panel"
 				@click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
 				${ref('expandbutton')}
 			>
 
-				${x => !x.iconTrailing ? affixIconTemplate(x.icon, IconWrapper.Slot) : null}
+				${(x) => (!x.iconTrailing ? affixIconTemplate(x.icon, IconWrapper.Slot) : null)}
 
-				<span class="heading-content">${x => x.heading}</span>
+				<span class="heading-content">${(x) => x.heading}</span>
 
-				${when(x => x.meta, html`<span class="meta">${x => x.meta}</span>`)}
+				${when((x) => x.meta, html`<span class="meta">${(x) => x.meta}</span>`)}
 
-				${x => x.icon && x.iconTrailing
-					? affixIconTemplate(x.icon) : null}
-				${x => !(x.icon && x.iconTrailing) && !x.noIndicator
-					? affixIconTemplate(x.expanded ? 'chevron-up-solid' : 'chevron-down-solid') : null}
+				${(x) => (x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null)}
+				${(x) =>
+					!(x.icon && x.iconTrailing) && !x.noIndicator
+						? affixIconTemplate(
+								x.expanded ? 'chevron-up-solid' : 'chevron-down-solid'
+						  )
+						: null}
 
 			</button>
 		</${hTag}>
@@ -42,12 +45,13 @@ export const AccordionItemTemplate: (
 ) => ViewTemplate<AccordionItem> = (
 	context: ElementDefinitionContext
 ) => html<AccordionItem>`
-	${x => header(context, 'h' + x.headinglevel)}
+	${(x) => header(context, 'h' + x.headinglevel)}
 	<div
-		id="${x => x.id}-panel"
-		aria-labelledby="${x => x.id}"
+		id="${(x) => x.id}-panel"
+		aria-labelledby="${(x) => x.id}"
 		role="region"
-		class="region ${x => x.icon && !x.iconTrailing ? 'padded' : ''} ${x => x.size ? `size-${x.size}` : ''}"
+		class="region ${(x) => (x.icon && !x.iconTrailing ? 'padded' : '')} ${(x) =>
+			x.size ? `size-${x.size}` : ''}"
 	>
 		<slot></slot>
 	</div>

libs/components/src/lib/accordion-item/accordion-item.ts

@@ -1,9 +1,11 @@
 import { attr } from '@microsoft/fast-element';
-import { applyMixins, AccordionItem as FASTAccordionItem } from '@microsoft/fast-foundation';
+import {
+	applyMixins,
+	AccordionItem as FASTAccordionItem,
+} from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 import type { Size } from '../enums.js';
 
-
 /**
  * Types of accordion size.
  *
@@ -53,9 +55,5 @@ export class AccordionItem extends FASTAccordionItem {
 	@attr size?: AccordionItemSize;
 }
 
-
-
-
-
-export interface AccordionItem extends AffixIconWithTrailing { }
+export interface AccordionItem extends AffixIconWithTrailing {}
 applyMixins(AccordionItem, AffixIconWithTrailing);

libs/components/src/lib/accordion-item/definition.ts

@@ -6,7 +6,6 @@ import styles from './accordion-item.scss?inline';
 import { AccordionItem } from './accordion-item';
 import { AccordionItemTemplate as template } from './accordion-item.template';
 
-
 /**
  *
  * @internal
@@ -21,7 +20,10 @@ export const accordionItemDefinition =
 /**
  * @internal
  */
-export const accordionItemRegistries = [accordionItemDefinition(), ...iconRegistries];
+export const accordionItemRegistries = [
+	accordionItemDefinition(),
+	...iconRegistries,
+];
 
 /**
  * Registers the accordion item elements with the design system.

libs/components/src/lib/accordion-item/index.ts

@@ -1,4 +1,3 @@
 import { registerAccordionItem } from './definition';
 
-
 registerAccordionItem();

libs/components/src/lib/accordion-item/ui.test.ts

@@ -4,7 +4,7 @@ import type { Page } from '@playwright/test';
 import {
 	extractHTMLBlocksFromReadme,
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['accordion', 'accordion-item', 'icon'];