ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update prettier

Browse source 
* update prettier to v3.x
* update prettify in @lion/nodejs-helpers to match updated prettier
* remove redundant await for promise
* remove `@types/prettier` as it's now included in `prettier`
* format lit template snippets with `jsx`
This commit is contained in:
Kristján Oddsson 2024-05-17 19:43:23 +00:00 committed by GitHub
parent 1df3854196
commit c7c83d1d8b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
49 changed files with 490 additions and 430 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.changeset/yellow-mails-exist.md Normal file
View file

@ -0,0 +1,7 @@
---
'@lion/nodejs-helpers': minor
---
Update underlying code-formatter prettier to major version 3 and updated the prettify API accordingly.
Consumers of this package need to make sure to await any calls to `prettify` as the function now returns a promise.

3
docs/blog/extending-documentation.md
View file

@ -262,8 +262,7 @@ Or you can add an extra paragraph below the content. Create a fenced codeblock:
### Lea Tabs Special Feature
```js
export const specialFeature = () =>
html`
export const specialFeature = () => html`
<lea-tabs>
<lea-tab slot="tab">Info</lea-tab>
<lea-tab-panel slot="panel"> Info page with lots of information about us. </lea-tab-panel>

3
docs/components/button/use-cases.md
View file

@ -28,7 +28,8 @@ export const disabled = () => html`<lion-button disabled>Disabled</lion-button>`
The minimum click area needs to be at least `44px` by `44px` according to [WCAG Success Criterion 2.5.5 Target Size (Enhanced)](https://www.w3.org/TR/WCAG22/#target-size-enhanced).
```js preview-story
export const minimumClickArea = () => html` <style>
export const minimumClickArea = () =>
html` <style>
.small {
padding: 4px;
line-height: 1em;

8
docs/components/collapsible/assets/applyDemoCollapsibleStyles.js
View file

@ -7,7 +7,9 @@ const applyDemoCollapsibleStyles = () => {
margin: 16px;
border-radius: 4px;
width: 400px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
}
.demo-custom-collapsible-body {
@ -18,7 +20,9 @@ const applyDemoCollapsibleStyles = () => {
border-width: 0;
border-radius: 2px;
padding: 12px 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
font-weight: bold;
color: #3f51b5;
}

5
docs/components/combobox/overview.md
View file

@ -25,8 +25,9 @@ export const main = () => html`
<lion-combobox name="combo" label="Default">
${lazyRender(
listboxData.map(
(entry, i) =>
html` <lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option> `,
(entry, i) => html`
<lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option>
`,
),
)}
</lion-combobox>

4
docs/components/combobox/src/gh-combobox/gh-button.js
View file

@ -35,7 +35,9 @@ export class GhButton extends LionButton {
color: #24292e;
background-color: #fafbfc;
border-color: rgba(27, 31, 35, 0.15);
box-shadow: 0 1px 0 rgba(27, 31, 35, 0.04), inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
box-shadow:
0 1px 0 rgba(27, 31, 35, 0.04),
inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
}

11
docs/components/combobox/src/gh-combobox/gh-combobox.js
View file

@ -123,8 +123,15 @@ export class GhCombobox extends LionCombobox {
/** @configure LionCombobox */
:host {
font-family: apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
Apple Color Emoji, Segoe UI Emoji;
font-family:
apple-system,
BlinkMacSystemFont,
Segoe UI,
Helvetica,
Arial,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji;
font-size: 14px;
}

12
docs/components/combobox/src/google-combobox/google-combobox.js
View file

@ -403,15 +403,13 @@ export class GoogleCombobox extends LionCombobox {
),
prefix: () => renderLitAsNode(html` <span>${googleSearchIcon}</span> `),
suffix: () =>
renderLitAsNode(
html` <button aria-label="Search by voice">${googleVoiceSearchIcon}</button> `,
),
renderLitAsNode(html`
<button aria-label="Search by voice">${googleVoiceSearchIcon}</button>
`),
'clear-btn': () =>
renderLitAsNode(
html`
renderLitAsNode(html`
<button @click="${this.__clearText}" aria-label="Clear text">${googleClearIcon}</button>
`,
),
`),
};
}

10
docs/components/combobox/src/md-combobox/MdFieldMixin.js
View file

@ -48,7 +48,8 @@ export const MdFieldMixin = dedupeMixin(
transform: perspective(100px);
-ms-transform: none;
transform-origin: 0 0;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
transition:
transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
/* z-index: 1; */
@ -205,7 +206,9 @@ export const MdFieldMixin = dedupeMixin(
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.25s, opacity 0.5s;
transition:
transform 0.25s,
opacity 0.5s;
}
.input-group__container > .input-group__prefix ::slotted(button:active)::after,
@ -288,7 +291,8 @@ export const MdFieldMixin = dedupeMixin(
visibility: visible;
opacity: 1;
transform: scaleX(1);
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
transition:
transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1),
background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

18
docs/components/combobox/src/wa-combobox/wa-combobox.js
View file

@ -28,7 +28,9 @@ class WaOption extends LionOption {
cursor: pointer;
color: rgb(74, 74, 74);
padding: 0;
transition: max-height 0.4s ease, opacity 0.3s ease;
transition:
max-height 0.4s ease,
opacity 0.3s ease;
max-height: 500px;
}
@ -287,8 +289,18 @@ class WaCombobox extends LionCombobox {
...super.styles,
css`
:host {
font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui, BlinkMacSystemFont,
Helvetica Neue, Helvetica, Lucida Grande, Kohinoor Devanagari, sans-serif;
font-family:
SF Pro Text,
SF Pro Icons,
system,
-apple-system,
system-ui,
BlinkMacSystemFont,
Helvetica Neue,
Helvetica,
Lucida Grande,
Kohinoor Devanagari,
sans-serif;
}
.input-group__container {

16
docs/components/combobox/use-cases.md
View file

@ -242,8 +242,9 @@ export const multipleChoice = () => html`
></demo-selection-display>
${lazyRender(
listboxData.map(
(entry, i) =>
html` <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> `,
(entry, i) => html`
<lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
`,
),
)}
</lion-combobox>
@ -264,8 +265,9 @@ export const multipleCustomizableChoice = () => html`
></demo-selection-display>
${lazyRender(
listboxData.map(
(entry, i) =>
html` <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> `,
(entry, i) => html`
<lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
`,
),
)}
</lion-combobox>
@ -434,15 +436,15 @@ const onModelValueChanged = event => {
console.log(`event.target.modelValue: ${JSON.stringify(event.target.modelValue)}`);
};
export const complexObjectChoiceValue = () => html` <complex-object-combobox
export const complexObjectChoiceValue = () =>
html` <complex-object-combobox
name="combo"
label="Display only the label once selected"
@model-value-changed="${onModelValueChanged}"
>
${lazyRender(
listboxComplexData.map(
entry =>
html`
entry => html`
<lion-option .choiceValue="${entry.label}">
<div data-key>${entry.label}</div>
<small>${entry.description}</small>

20
docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js
View file

@ -46,9 +46,15 @@ export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdo
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-webkit-transition:
border-color ease-in-out 0.15s,
-webkit-box-shadow ease-in-out 0.15s;
-o-transition:
border-color ease-in-out 0.15s,
box-shadow ease-in-out 0.15s;
transition:
border-color ease-in-out 0.15s,
box-shadow ease-in-out 0.15s;
}
.input-group__input {
@ -64,8 +70,12 @@ export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdo
:host([focused]) .input-group__container {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
-webkit-box-shadow:
inset 0 1px 1px rgb(0 0 0 / 8%),
0 0 8px rgb(102 175 233 / 60%);
box-shadow:
inset 0 1px 1px rgb(0 0 0 / 8%),
0 0 8px rgb(102 175 233 / 60%);
}
`,
];

5
docs/components/input/use-cases.md
View file

@ -20,8 +20,9 @@ Can be provided via the `label-sr-only` boolean attribute.
The label will be hidden, but still readable by screen readers.
```js preview-story
export const labelSrOnly = () =>
html` <lion-input label-sr-only label="Input" name="input"></lion-input> `;
export const labelSrOnly = () => html`
<lion-input label-sr-only label="Input" name="input"></lion-input>
`;
```
> Note: Once we support the ElementInternals API, the equivalent will be `<lion-input aria-label="Input" name="input"></lion-input>`

8
docs/components/progress-indicator/examples.md
View file

@ -51,8 +51,7 @@ By given the progress-indicator a value it becomes determinate.
The min is automatically set to "0" and max to "100", but they can be set to your local needs.
```js preview-story
export const progressBarDemo = () =>
html`
export const progressBarDemo = () => html`
<my-determinate-progress-bar
aria-label="Interest rate"
name="my-bar"
@ -120,6 +119,7 @@ class MyIndeterminateProgressSpinner extends LionProgressIndicator {
```
```js preview-story
export const main = () =>
html` <my-indeterminate-progress-spinner></my-indeterminate-progress-spinner> `;
export const main = () => html`
<my-indeterminate-progress-spinner></my-indeterminate-progress-spinner>
`;
```

4
docs/components/tabs/src/lea-tab-panel.js
View file

@ -7,7 +7,9 @@ export class LeaTabPanel extends LitElement {
background-color: #fff;
background-image: linear-gradient(top, #fff, #ddd);
border-radius: 0 2px 2px 2px;
box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
box-shadow:
0 2px 2px #000,
0 -1px 0 #fff inset;
padding: 30px;
}
`;

9
docs/components/tabs/src/lea-tab.js
View file

@ -10,7 +10,10 @@ export class LeaTab extends LitElement {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
color: #fff;
float: left;
font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
font:
bold 12px/35px 'Lucida sans',
Arial,
Helvetica;
height: 35px;
padding: 0 30px;
text-decoration: none;
@ -23,7 +26,9 @@ export class LeaTab extends LitElement {
:host(:focus) {
border-radius: 4px;
box-shadow: 0 0 8px #9fcaea, 0 0 0 1px #559bd1;
box-shadow:
0 0 8px #9fcaea,
0 0 0 1px #559bd1;
/* outline: 0; */
}

40
docs/fundamentals/node-tools/providence-analytics/assets/_mermaid.svg.js
View file

@ -19,7 +19,10 @@ export const providenceFlowSvg = html` <svg
>
<style>
#mermaid-1592918098747 .label {
font-family: trebuchet ms, verdana, arial;
font-family:
trebuchet ms,
verdana,
arial;
color: #333;
}
#mermaid-1592918098747 .node circle,
@ -57,7 +60,10 @@ export const providenceFlowSvg = html` <svg
max-width: 200px;
max-height: 400px;
padding: 2px;
font-family: trebuchet ms, verdana, arial;
font-family:
trebuchet ms,
verdana,
arial;
font-size: 12px;
background: #ffffde;
border: 1px solid #aa3;
@ -118,7 +124,10 @@ export const providenceFlowSvg = html` <svg
#mermaid-1592918098747 .noteText {
fill: #000;
stroke: none;
font-family: trebuchet ms, verdana, arial;
font-family:
trebuchet ms,
verdana,
arial;
font-size: 14px;
}
#mermaid-1592918098747 .section {
@ -267,7 +276,10 @@ export const providenceFlowSvg = html` <svg
#mermaid-1592918098747 g.classGroup text {
fill: #9370db;
stroke: none;
font-family: trebuchet ms, verdana, arial;
font-family:
trebuchet ms,
verdana,
arial;
font-size: 10px;
}
#mermaid-1592918098747 g.classGroup rect {
@ -553,7 +565,10 @@ export const providenceInternalFlowSvg = html`
>
<style>
#mermaid-1592918099462 .label {
font-family: trebuchet ms, verdana, arial;
font-family:
trebuchet ms,
verdana,
arial;
color: #333;
}
#mermaid-1592918099462 .node circle,
@ -591,7 +606,10 @@ export const providenceInternalFlowSvg = html`
max-width: 200px;
max-height: 400px;
padding: 2px;
font-family: trebuchet ms, verdana, arial;
font-family:
trebuchet ms,
verdana,
arial;
font-size: 12px;
background: #ffffde;
border: 1px solid #aa3;
@ -652,7 +670,10 @@ export const providenceInternalFlowSvg = html`
#mermaid-1592918099462 .noteText {
fill: #000;
stroke: none;
font-family: trebuchet ms, verdana, arial;
font-family:
trebuchet ms,
verdana,
arial;
font-size: 14px;
}
#mermaid-1592918099462 .section {
@ -801,7 +822,10 @@ export const providenceInternalFlowSvg = html`
#mermaid-1592918099462 g.classGroup text {
fill: #9370db;
stroke: none;
font-family: trebuchet ms, verdana, arial;
font-family:
trebuchet ms,
verdana,
arial;
font-size: 10px;
}
#mermaid-1592918099462 g.classGroup rect {

18
docs/fundamentals/systems/overlays/_edge-cases.md
View file

@ -33,8 +33,7 @@ See [css-tricks: popping-hidden-overflow](https://css-tricks.com/popping-hidden-
#### Overflow: the problem
```js preview-story
export const edgeCaseOverflowProblem = () =>
html`
export const edgeCaseOverflowProblem = () => html`
<div style="padding: 54px 24px 36px;">
<div
style="overflow: hidden; border: 1px black dashed; padding-top: 44px; padding-bottom: 16px;"
@ -60,17 +59,13 @@ Two solutions are thinkable:
Our overlay system makes sure that there's always a fixed layer that pops out of the hidden parent.
```js preview-story
export const edgeCaseOverflowSolution = () =>
html`
export const edgeCaseOverflowSolution = () => html`
<div style="padding: 54px 24px 36px;">
<div
style="overflow: hidden; border: 1px black dashed; padding-top: 36px; padding-bottom: 16px;"
>
<div style="display: flex; justify-content: space-evenly; position: relative;">
<demo-overlay-el
opened
.config="${{ placementMode: 'local', trapsKeyboardFocus: false }}"
>
<demo-overlay-el opened .config="${{ placementMode: 'local', trapsKeyboardFocus: false }}">
<button slot="invoker" aria-label="local, non modal"></button>
<div slot="content">no matter</div>
</demo-overlay-el>
@ -114,8 +109,7 @@ The example below shows the difference between a modal and non-modal overlay pla
#### Stacking context: the problem
```js preview-story
export const edgeCaseStackProblem = () =>
html`
export const edgeCaseStackProblem = () => html`
<div style="width: 300px; height: 300px; position: relative;">
<div
id="stacking-context-a"
@ -131,8 +125,8 @@ export const edgeCaseStackProblem = () =>
<demo-overlay-el no-dialog-el style="overflow:hidden; position: relative;">
<button slot="invoker">invoke</button>
<div slot="content">
The overlay can never be in front, since the parent stacking context has a lower
priority than its sibling.
The overlay can never be in front, since the parent stacking context has a lower priority
than its sibling.
<div id="stacking-context-b-inner" style="position: absolute; z-index: 9999;">
So, even if we add a new stacking context in our overlay with z-index 9999, it will
never be painted on top.

9
docs/fundamentals/systems/overlays/use-cases.md
View file

@ -131,15 +131,12 @@ render() {
or declaratively in your template with the `.config` property
```html
<demo-el-using-overlaymixin .config=${{ ...withModalDialogConfig() }}>
```jsx
<demo-el-using-overlaymixin .config="${{ ...withModalDialogConfig() }}">
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
>
⨯
<button @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}">
</button>
</div>
</demo-el-using-overlaymixin>

9
docs/fundamentals/tools/helpers/action-logger.md
View file

@ -40,13 +40,10 @@ const uid = Math.random().toString(36).substr(2, 10);
This connects the logger element to the trigger.
```html
```jsx
<div>To log: <code>Hello, World!</code></div>
<button
@click=${e => {
e.target.parentElement.querySelector('#logger-${uid}').log('Hello, World!')
}}
>Click this button</button>
<button @click="${e => { e.target.parentElement.querySelector('#logger-${uid}').log('Hello, World!') }}">Click this button
</button>
<sb-action-logger id="logger-${uid}"></sb-action-logger>
```

4
docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js
View file

@ -37,7 +37,9 @@ class DemoApp extends LitElement {
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease;
transition:
background 250ms ease-in-out,
transform 150ms ease;
}
button:hover,

4
docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js
View file

@ -35,7 +35,9 @@ class DemoApp extends LitElement {
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease;
transition:
background 250ms ease-in-out,
transform 150ms ease;
}
button:hover,

4
docs/fundamentals/tools/singleton-manager/example-success/demo-app.js
View file

@ -37,7 +37,9 @@ class DemoApp extends LitElement {
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease;
transition:
background 250ms ease-in-out,
transform 150ms ease;
}
button:hover,

4
package.json
View file

@ -58,7 +58,7 @@
"@types/fs-extra": "^11.0.4",
"@types/glob": "^8.1.0",
"@types/mocha": "^10.0.6",
"@types/prettier": "^2.7.3",
"@types/prettier": "^3.0.0",
"@web/dev-server-legacy": "^0.1.7",
"@web/test-runner": "^0.18.1",
"@web/test-runner-browserstack": "^0.7.1",
@ -82,7 +82,7 @@
"mocha": "^10.4.0",
"npm-run-all": "^4.1.5",
"postinstall-postinstall": "^2.1.0",
"prettier": "^2.8.8",
"prettier": "^3.2.5",
"prettier-package-json": "^2.8.0",
"remark-html": "^13.0.2",
"rollup": "^2.79.1",

10
packages-node/nodejs-helpers/package.json
View file

@ -29,13 +29,13 @@
"types": "wireit"
},
"dependencies": {
"@babel/generator": "^7.24.4",
"@babel/parser": "^7.24.4",
"@babel/traverse": "^7.24.1",
"@babel/types": "^7.24.0",
"@babel/generator": "^7.24.5",
"@babel/parser": "^7.24.5",
"@babel/traverse": "^7.24.5",
"@babel/types": "^7.24.5",
"es-module-lexer": "^0.3.26",
"globby": "^14.0.1",
"prettier": "^2.8.8"
"prettier": "^3.2.5"
},
"keywords": [
"lion-tools",

8
packages-node/nodejs-helpers/src/prettify.js
View file

@ -48,14 +48,14 @@ const getPrettierParser = fileExtension => {
* Prettifies text using the prettier.
* - Supported file extensions are: js | cjs | mjs | md | html | json | css | yaml | yml
* @example
* prettify('some js code');
* prettify('<html>some html</html>', 'html');
* prettify('some-markdown', 'md', {printWidth: 120});
* await prettify('some js code');
* await prettify('<html>some html</html>', 'html');
* await prettify('some-markdown', 'md', {printWidth: 120});
* @param {string} text
* @param {string} fileExtension ['js']
* @param {PrettierOptions} [options] [{ printWidth = 100, singleQuote = true }]
* @see {@link https://prettier.io/docs/en/options.html}
* @returns {string}
* @returns {Promise<string>}
* @throws ERROR_UNSUPPORTED_FILE_EXTENSION
*/
export const prettify = (text, fileExtension = 'js', options = {}) => {

2
packages-node/nodejs-helpers/src/tasks/bypass-export-map.js
View file

@ -115,7 +115,7 @@ const generateAdjustedExportFile = async (fileName, exportsDir, outputDir) => {
const initialCode = await readFile(inputPath, 'utf-8');
const adjustImportExportVisitor = getAdjustImportExportVisitor(exportsDir, outputDir);
const adjustedCode = transformCode(initialCode, adjustImportExportVisitor);
return writeFile(outputPath, prettify(adjustedCode));
return writeFile(outputPath, await prettify(adjustedCode));
};
/**

4
packages-node/nodejs-helpers/src/tasks/bypass-import-map.js
View file

@ -95,8 +95,8 @@ const bypassImportMapForFile = async (filePath, packageDir, importMap) => {
const initialCode = await readFile(filePath, 'utf-8');
const adjustImportVisitor = getAdjustImportVisitor(filePath, packageDir, importMap);
const updatedCode = transformCode(initialCode, adjustImportVisitor);
const prettyInitialCode = prettify(initialCode);
const prettyUpdatedCode = prettify(updatedCode);
const prettyInitialCode = await prettify(initialCode);
const prettyUpdatedCode = await prettify(updatedCode);
if (prettyInitialCode === prettyUpdatedCode) {
return Promise.resolve();
}

4
packages-node/nodejs-helpers/test-node/tasks/bypass-export-map.test.js
View file

@ -194,7 +194,7 @@ describe('components import other components and native + 3rd party imports', ()
'utf-8',
);
// Then
expect(prettify(adjustedCode)).to.equal(prettify(expectedCode));
expect(await prettify(adjustedCode)).to.equal(await prettify(expectedCode));
}
});
@ -216,7 +216,7 @@ describe('components import other components and native + 3rd party imports', ()
);
// Then
expect(prettify(adjustedCode)).to.equal(prettify(expectedCode));
expect(await prettify(adjustedCode)).to.equal(await prettify(expectedCode));
}
});
});

8
packages-node/nodejs-helpers/test-node/tasks/bypass-import-map.test.js
View file

@ -58,8 +58,8 @@ describe('Bypass import map task', () => {
// Then
if (process.platform !== 'win32') {
// FIXME: skipping test for windows case
expect(prettify(adjustedCodeArrowDown)).to.equal(prettify(expectedCodeArrowDown));
expect(prettify(adjustedCodeArrowUp)).to.equal(prettify(expectedCodeArrowUp));
expect(await prettify(adjustedCodeArrowDown)).to.equal(await prettify(expectedCodeArrowDown));
expect(await prettify(adjustedCodeArrowUp)).to.equal(await prettify(expectedCodeArrowUp));
}
});
@ -101,8 +101,8 @@ describe('Bypass import map task', () => {
// Then
if (process.platform !== 'win32') {
// FIXME: skipping test for windows case
expect(prettify(adjustedCodeArrowDown)).to.equal(prettify(expectedCodeArrowDown));
expect(prettify(adjustedCodeArrowUp)).to.equal(prettify(expectedCodeArrowUp));
expect(await prettify(adjustedCodeArrowDown)).to.equal(await prettify(expectedCodeArrowDown));
expect(await prettify(adjustedCodeArrowUp)).to.equal(await prettify(expectedCodeArrowUp));
}
});
});

5
packages-node/providence-analytics/test-node/program/analyzers/match-imports.test.js
View file

@ -15,9 +15,8 @@ import MatchImportsAnalyzer from '../../../src/program/analyzers/match-imports.j
setupAnalyzerTest();
//
describe('Analyzer "match-imports"', async () => {
const matchImportsQueryConfig = await QueryService.getQueryConfigFromAnalyzer(
MatchImportsAnalyzer,
);
const matchImportsQueryConfig =
await QueryService.getQueryConfigFromAnalyzer(MatchImportsAnalyzer);
/** @type {Partial<ProvidenceConfig>} */
const _providenceCfg = {
targetProjectPaths: ['/importing/target/project'],

5
packages-node/providence-analytics/test-node/program/analyzers/match-subclasses.test.js
View file

@ -84,9 +84,8 @@ describe('Analyzer "match-subclasses"', async () => {
],
};
const matchSubclassesQueryConfig = await QueryService.getQueryConfigFromAnalyzer(
MatchSubclassesAnalyzer,
);
const matchSubclassesQueryConfig =
await QueryService.getQueryConfigFromAnalyzer(MatchSubclassesAnalyzer);
/** @type {Partial<ProvidenceConfig>} */
const _providenceCfg = {
targetProjectPaths: [searchTargetProject.path],

6
packages/ui/components/button/test-suites/LionButtonReset.suite.js
View file

@ -164,15 +164,13 @@ export function LionButtonResetSuite({ klass = LionButtonReset } = {}) {
const formSpyLater = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
const form2El = /** @type {HTMLFormElement} */ (
await fixture(
html`
await fixture(html`
<div @click="${outsideSpy}">
<form @click="${formSpyEarly}">
<div @click="${insideSpy}">${lionButton}</div>
</form>
</div>
`,
)
`)
);
const form2Node = /** @type {HTMLFormElement} */ (form2El.querySelector('form'));

24
packages/ui/components/calendar/test/lion-calendar.test.js
View file

@ -355,10 +355,12 @@ describe('<lion-calendar>', () => {
it('has a initCentralDate() method for external contexts like datepickers', async () => {
const initialCentralDate = new Date('2014/07/05');
const initialSelectedDate = new Date('2014/07/07');
const el = await fixture(html`<lion-calendar
const el = await fixture(
html`<lion-calendar
.centralDate="${initialCentralDate}"
.selectedDate="${initialSelectedDate}"
></lion-calendar>`);
></lion-calendar>`,
);
expect(el.selectedDate).to.equal(initialSelectedDate);
expect(el.centralDate).to.equal(initialCentralDate);
@ -408,14 +410,12 @@ describe('<lion-calendar>', () => {
it('disables a date with disableDates function', async () => {
/** @param {Date} d */
const disable15th = d => d.getDate() === 15;
const el = await fixture(
html`
const el = await fixture(html`
<lion-calendar
.selectedDate="${new Date('2000/12/01')}"
.disableDates=${disable15th}
></lion-calendar>
`,
);
`);
const elObj = new CalendarObject(el);
elObj.dayEls.forEach((d, i) => {
const shouldBeDisabled = i === 15 - 1;
@ -490,15 +490,13 @@ describe('<lion-calendar>', () => {
// without normalization, selectedDate < minDate would wrongfully be disabled
const minDate = new Date('2000-11-02T04:00:00');
const el = await fixture(
html`
const el = await fixture(html`
<lion-calendar
.selectedDate="${selectedDate}"
.minDate="${minDate}"
.maxDate="${maxDate}"
></lion-calendar>
`,
);
`);
const elObj = new CalendarObject(el);
expect(elObj.getDayObj(29).isDisabled).to.equal(false);
@ -1531,15 +1529,13 @@ describe('<lion-calendar>', () => {
});
it('is accessible with disabled dates', async () => {
const el = await fixture(
html`
const el = await fixture(html`
<lion-calendar
.disableDates=${
/** @param {Date} date */ date => date.getDay() === 6 || date.getDay() === 0
}
></lion-calendar>
`,
);
`);
await expect(el).to.be.accessible();
});

6
packages/ui/components/form-integrations/test/dialog-integrations.test.js
View file

@ -17,10 +17,12 @@ import '@lion/ui/define/lion-radio.js';
// Test umbrella form inside dialog
describe('Form inside dialog Integrations', () => {
it('Successfully registers all form components inside a dialog', async () => {
const el = /** @type {LionDialog} */ await fixture(html` <lion-dialog>
const el = /** @type {LionDialog} */ await fixture(
html` <lion-dialog>
<button slot="invoker">Open Dialog</button>
<umbrella-form slot="content"></umbrella-form>
</lion-dialog>`);
</lion-dialog>`,
);
// @ts-ignore
const formEl = /** @type {LionForm} */ (el._overlayCtrl.contentNode._lionFormNode);

13
packages/ui/components/helpers/src/SbActionLogger.js
View file

@ -25,8 +25,17 @@ export class SbActionLogger extends LitElement {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: block;
font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-family:
'Nunito Sans',
-apple-system,
'.SFNSText-Regular',
'San Francisco',
BlinkMacSystemFont,
'Segoe UI',
'Helvetica Neue',
Helvetica,
Arial,
sans-serif;
}
.header__info {

6
packages/ui/components/icon/test/lion-icon.test.js
View file

@ -118,8 +118,7 @@ describe('lion-icon', () => {
window.addEventListener('importDone', resolve);
});
const el = await fixture(
html`
const el = await fixture(html`
<lion-icon
.svg=${until(
import('./heart.svg.js').then(e => {
@ -130,8 +129,7 @@ describe('lion-icon', () => {
)}
aria-label="Love"
></lion-icon>
`,
);
`);
await svgLoading;
// We need to await the until directive is resolved and rendered to the dom

12
packages/ui/components/input-amount/test/lion-input-amount.test.js
View file

@ -36,24 +36,20 @@ describe('<lion-input-amount>', () => {
it('formatAmount uses locale provided in formatOptions', async () => {
let el = /** @type {LionInputAmount} */ (
await fixture(
html`
await fixture(html`
<lion-input-amount
.formatOptions="${{ locale: 'en-GB' }}"
.modelValue="${123}"
></lion-input-amount>
`,
)
`)
);
expect(el.formattedValue).to.equal('123.00');
el = await fixture(
html`
el = await fixture(html`
<lion-input-amount
.formatOptions="${{ locale: 'nl-NL' }}"
.modelValue="${123}"
></lion-input-amount>
`,
);
`);
expect(el.formattedValue).to.equal('123,00');
});

8
packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js
View file

@ -286,10 +286,10 @@ describe('<lion-input-datepicker>', () => {
it('converts MinDate validator to "minDate" property', async () => {
const myMinDate = new Date('2019/06/15');
const el = await fixture(html` <lion-input-datepicker
.validators="${[new MinDate(myMinDate)]}"
>
</lion-input-datepicker>`);
const el = await fixture(
html` <lion-input-datepicker .validators="${[new MinDate(myMinDate)]}">
</lion-input-datepicker>`,
);
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();

6
packages/ui/components/input-file/test/lion-input-file.test.js
View file

@ -637,9 +637,9 @@ describe('lion-input-file', () => {
})
);
const el = await fixture(
html` <lion-input-file multiple max-file-size="3" accept=".txt"></lion-input-file> `,
);
const el = await fixture(html`
<lion-input-file multiple max-file-size="3" accept=".txt"></lion-input-file>
`);
setTimeout(() => {
mimicSelectFile(el, [file, fileWrongSize, file2, fileWrongType]);

27
packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js
View file

@ -46,8 +46,9 @@ class WithFormControlInputTelDropdown extends ScopedElementsMixin(LionInputTelDr
${repeat(
data.regionMetaList,
regionMeta => regionMeta.regionCode,
regionMeta =>
html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
regionMeta => html`
<lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
`,
)}
</lion-select-rich>
`;
@ -86,8 +87,9 @@ describe('WithFormControlInputTelDropdown', () => {
${repeat(
data.regionMetaList,
regionMeta => regionMeta.regionCode,
regionMeta =>
html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
regionMeta => html`
<lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
`,
)}
</lion-select-rich>
`;
@ -96,14 +98,12 @@ describe('WithFormControlInputTelDropdown', () => {
}
customElements.define('input-tel-dropdown-mac', InputTelDropdownMac);
const el = /** @type {LionInputTelDropdown} */ (
await fixture(
html`
await fixture(html`
<input-tel-dropdown-mac
.allowedRegions="${['NL', 'BE']}"
.modelValue="${'+31612345678'}"
></input-tel-dropdown-mac>
`,
)
`)
);
const dropdownElement = el.refs.dropdown.value;
// @ts-expect-error [allow-protected-in-tests]
@ -140,8 +140,9 @@ describe('WithFormControlInputTelDropdown', () => {
${repeat(
data.regionMetaList,
regionMeta => regionMeta.regionCode,
regionMeta =>
html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
regionMeta => html`
<lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option>
`,
)}
</lion-select-rich>
`;
@ -150,14 +151,12 @@ describe('WithFormControlInputTelDropdown', () => {
}
customElements.define('input-tel-dropdown-windows', InputTelDropdownWindows);
const el = /** @type {LionInputTelDropdown} */ (
await fixture(
html`
await fixture(html`
<input-tel-dropdown-windows
.allowedRegions="${['NL', 'BE']}"
.modelValue="${'+31612345678'}"
></input-tel-dropdown-windows>
`,
)
`)
);
const dropdownElement = el.refs.dropdown.value;
// @ts-expect-error [allow-protected-in-tests]

5
packages/ui/components/listbox/test-suites/ListboxMixin.suite.js
View file

@ -1639,8 +1639,9 @@ export function runListboxMixinSuite(customConfig = {}) {
${repeat(
this.options,
(/** @type {string} */ option) => option,
(/** @type {string} */ option) =>
html` <lion-option .choiceValue="${option}">${option}</lion-option> `,
(/** @type {string} */ option) => html`
<lion-option .choiceValue="${option}">${option}</lion-option>
`,
)}
</${tag}>
`;

78
packages/ui/components/progress-indicator/test/lion-progress-indicator.test.js
View file

@ -24,9 +24,9 @@ describe('lion-progress-indicator', () => {
});
it('can override a label with "aria-label"', async () => {
const el = await fixture(
html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `,
);
const el = await fixture(html`
<lion-progress-indicator aria-label="foo"></lion-progress-indicator>
`);
await el.localizeNamespacesLoaded;
expect(el.getAttribute('aria-label')).to.equal('foo');
el.setAttribute('aria-label', 'bar');
@ -37,9 +37,9 @@ describe('lion-progress-indicator', () => {
});
it('can override a label with "aria-labelledby"', async () => {
const el = await fixture(
html` <lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator> `,
);
const el = await fixture(html`
<lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator>
`);
await el.localizeNamespacesLoaded;
expect(el.getAttribute('aria-labelledby')).to.equal('foo-id');
expect(el.hasAttribute('aria-label')).to.be.false;
@ -62,9 +62,9 @@ describe('lion-progress-indicator', () => {
});
it('keeps own aria-label when switch to determinate state', async () => {
const el = await fixture(
html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `,
);
const el = await fixture(html`
<lion-progress-indicator aria-label="foo"></lion-progress-indicator>
`);
expect(el.getAttribute('aria-label')).to.equal('foo');
el.setAttribute('value', '30');
await el.updateComplete;
@ -74,16 +74,16 @@ describe('lion-progress-indicator', () => {
describe('determinate', async () => {
it('is determinate when it has a value', async () => {
const el = await fixture(
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
);
const el = await fixture(html`
<lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
`);
expect(el.indeterminate).to.be.false;
});
it('can update value', async () => {
const el = await fixture(
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
);
const el = await fixture(html`
<lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
`);
expect(el.getAttribute('aria-valuenow')).to.equal('25');
el.value = 30;
await el.updateComplete;
@ -91,9 +91,9 @@ describe('lion-progress-indicator', () => {
});
it('can update min', async () => {
const el = await fixture(
html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `,
);
const el = await fixture(html`
<lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
`);
expect(el.getAttribute('aria-valuemin')).to.equal('0');
el.min = 30;
await el.updateComplete;
@ -101,9 +101,9 @@ describe('lion-progress-indicator', () => {
});
it('can update max', async () => {
const el = await fixture(
html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `,
);
const el = await fixture(html`
<lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
`);
expect(el.getAttribute('aria-valuemax')).to.equal('100');
el.max = 70;
await el.updateComplete;
@ -111,9 +111,9 @@ describe('lion-progress-indicator', () => {
});
it('min & max limits value', async () => {
const el = await fixture(
html` <lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator> `,
);
const el = await fixture(html`
<lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator>
`);
// sets to default max: 100
expect(el.getAttribute('aria-valuenow')).to.equal('100');
el.value = -20;
@ -124,14 +124,12 @@ describe('lion-progress-indicator', () => {
// TODO make this feature available
it.skip('supports valuetext', async () => {
const el = await fixture(
html`
const el = await fixture(html`
<lion-progress-indicator
value="8"
value-text="{value}% (34 minutes) remaining"
></lion-progress-indicator>
`,
);
`);
expect(el.getAttribute('aria-valuetext')).to.equal('8% (34 minutes) remaining');
});
@ -179,11 +177,9 @@ describe('lion-progress-indicator', () => {
describe('Subclasers', () => {
it('can use _progressPercentage getter to get the progress percentage', async () => {
const el = await fixture(
html`
const el = await fixture(html`
<lion-progress-indicator max="50" value="10" aria-label="foo"></lion-progress-indicator>
`,
);
`);
expect(el._progressPercentage).to.equal(20);
});
});
@ -203,23 +199,23 @@ describe('lion-progress-indicator', () => {
describe('determinate', () => {
it('passes a11y test', async () => {
const el = await fixture(
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
);
const el = await fixture(html`
<lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
`);
await expect(el).to.be.accessible();
});
it('once value is set', async () => {
const el = await fixture(
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
);
const el = await fixture(html`
<lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
`);
expect(el.getAttribute('aria-valuenow')).to.equal('25');
});
it('allows to set min & max values', async () => {
const el = await fixture(
html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
);
const el = await fixture(html`
<lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
`);
expect(el.getAttribute('aria-valuemin')).to.equal('0');
expect(el.getAttribute('aria-valuemax')).to.equal('100');
});

12
packages/ui/components/select-rich/test/lion-select-rich.test.js
View file

@ -444,9 +444,9 @@ describe('lion-select-rich', () => {
});
it('adds focus to element with [role=listbox] when trapsKeyboardFocus is true', async () => {
const el = await fixture(
html` <lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich> `,
);
const el = await fixture(html`
<lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich>
`);
const { _listboxNode } = getSelectRichMembers(el);
expect(document.activeElement).to.not.equal(_listboxNode);
@ -503,11 +503,9 @@ describe('lion-select-rich', () => {
});
it('does not close the listbox with [Tab] key once opened when trapsKeyboardFocus is true', async () => {
const el = await fixture(
html`
const el = await fixture(html`
<lion-select-rich opened .config=${{ trapsKeyboardFocus: true }}> </lion-select-rich>
`,
);
`);
// tab can only be caught via keydown
const { _listboxNode } = getSelectRichMembers(el);
_listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));

6
packages/ui/components/steps/test/lion-step.test.js
View file

@ -50,13 +50,11 @@ describe('lion-step', () => {
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(
html`
const el = await fixture(html`
<fake-lion-steps>
<lion-step hidden>Step 1</lion-step>
</fake-lion-steps>
`,
);
`);
expect(el.children[0]).not.to.be.displayed;
});

6
packages/ui/components/switch/test/lion-switch.test.js
View file

@ -160,13 +160,11 @@ describe('lion-switch', () => {
it('should not propagate the "checked-changed" event further up when caught by switch', async () => {
const handlerSpy = sinon.spy();
const parentHandlerSpy = sinon.spy();
const el = await fixture(
html`
const el = await fixture(html`
<div @checked-changed=${parentHandlerSpy}>
<lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch>
</div>
`,
);
`);
const switchEl = /** @type {LionSwitch} */ (el.firstElementChild);
switchEl.checked = true;
await switchEl.updateComplete;