Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .yarnrc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,8 @@ catalogs:
eslint-config-next: 14.2.35
globals: 16.5.0
eslint-config-airbnb-base: ^15.0.0
'@html-eslint/eslint-plugin': 0.58.1
'@html-eslint/parser': 0.58.1
# Storybook and addons
storybook:
storybook: 10.2.14
Expand Down
41 changes: 41 additions & 0 deletions configs/eslint-config-spirit/html.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
const html = require("@html-eslint/eslint-plugin");
const { TEMPLATE_ENGINE_SYNTAX } = require("@html-eslint/parser");

const recommended = html.configs["flat/recommended"];

// Flat ESLint config fragment for all `.html` files with Handlebars-aware parsing.
// Intended for Spirit demo templates in `packages/web` and `packages/web-react`.
module.exports = [
{
files: ["**/*.html"],
...recommended,
languageOptions: {
...recommended.languageOptions,
parserOptions: {
...recommended.languageOptions?.parserOptions,
templateEngineSyntax: TEMPLATE_ENGINE_SYNTAX.HANDLEBAR,
},
},
rules: {
...recommended.rules,
// Prefer one attribute per line when a tag has more than two attributes.
"@html-eslint/attrs-newline": [
"error",
{ closeStyle: "newline", ifAttrsMoreThan: 2 },
],
"@html-eslint/element-newline": "off",
"@html-eslint/sort-attrs": "off",
// Spirit demos use conventional void/self-closing tags.
"@html-eslint/require-closing-tags": "off",
// Demo snippets put `<li>` inside `<template>`; not invalid in final DOM.
"@html-eslint/require-li-container": "off",
// Do not enforce spacing before `/>`; both styles are acceptable.
"@html-eslint/no-extra-spacing-attrs": "off",
"@html-eslint/indent": ["error", 2],
"@html-eslint/quotes": ["error", "double"],
"@html-eslint/no-trailing-spaces": "error",
"@html-eslint/no-multiple-empty-lines": ["error", { max: 1 }],
"@html-eslint/no-extra-spacing-text": "error",
},
},
];
8 changes: 8 additions & 0 deletions configs/eslint-config-spirit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@
"version": "0.1.7",
"private": true,
"type": "commonjs",
"exports": {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

praise: ❤️

".": "./index.js",
"./prettier": "./prettier.js",
"./style": "./style.js",
"./html": "./html.js"
},
"repository": {
"type": "git",
"url": "https://github.com/alma-oss/spirit-design-system.git",
Expand All @@ -24,6 +30,8 @@
"@babel/core": "catalog:build",
"@babel/eslint-parser": "catalog:test",
"@babel/preset-react": "catalog:build",
"@html-eslint/eslint-plugin": "catalog:lint",
"@html-eslint/parser": "catalog:lint",
"@lmc-eu/eslint-config-base": "catalog:lint",
"@lmc-eu/eslint-config-react": "catalog:lint",
"@lmc-eu/eslint-config-typescript": "catalog:lint",
Expand Down
9 changes: 7 additions & 2 deletions packages/web-react/eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import { fixupConfigRules, fixupPluginRules } from '@eslint/compat';
import { FlatCompat } from '@eslint/eslintrc';
import spiritHtmlEslint from 'eslint-config-spirit/html';
import reactRefresh from 'eslint-plugin-react-refresh';

const compat = new FlatCompat({
baseDirectory: import.meta.dirname,
});

/** Only apply legacy shareable configs to JS/TS so `.html` demos use HTML-ESLint only */
const jsTsFiles = ['**/*.{js,mjs,cjs,ts,tsx,mts,cts}'];

export default [
{
// # .eslintignore
Expand Down Expand Up @@ -41,7 +45,7 @@ export default [
'@lmc-eu/eslint-config-typescript/react',
'eslint-config-spirit/prettier',
),
),
).map((config) => (config.files ? config : { ...config, files: jsTsFiles })),
{
plugins: {
'react-refresh': fixupPluginRules(reactRefresh),
Expand All @@ -54,7 +58,7 @@ export default [
},
},
// @TODO: remove `files` and `plugins` when all configs are flat
files: ['**/*.{js,mjs,cjs,ts,tsx,mts,cts}'],
files: jsTsFiles,

rules: {
// JSDoc is not able to resolve types from TypeScript files
Expand Down Expand Up @@ -243,4 +247,5 @@ export default [
'no-underscore-dangle': 'off',
},
},
...spiritHtmlEslint,
];
9 changes: 7 additions & 2 deletions packages/web/eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import { fixupConfigRules } from '@eslint/compat';
import { FlatCompat } from '@eslint/eslintrc';
import spiritHtmlEslint from 'eslint-config-spirit/html';

const compat = new FlatCompat({
baseDirectory: import.meta.dirname,
});

/** Only apply legacy shareable configs to JS/TS so `.html` demos use HTML-ESLint only */
const jsTsFiles = ['**/*.{js,mjs,cjs,ts,tsx,mts,cts}'];

export default [
{
// # .eslintignore
Expand Down Expand Up @@ -37,7 +41,7 @@ export default [
},
...fixupConfigRules(
compat.extends('eslint-config-spirit', '@lmc-eu/eslint-config-typescript', 'eslint-config-spirit/prettier'),
),
).map((config) => (config.files ? config : { ...config, files: jsTsFiles })),
{
languageOptions: {
parserOptions: {
Expand All @@ -46,10 +50,11 @@ export default [
},
},
// @TODO: remove `files` and `plugins` when all configs are flat
files: ['**/*.{js,mjs,cjs,ts,tsx,mts,cts}'],
files: jsTsFiles,
rules: {
// allow reassign in properties
'no-param-reassign': ['warn', { props: false }],
},
},
...spiritHtmlEslint,
];
56 changes: 42 additions & 14 deletions packages/web/src/scss/components/Accordion/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,12 @@ <h3 id="example-1-item-1-header" class="Accordion__itemHeader">
</button>
<span class="Accordion__itemSide">
<span class="Accordion__itemIcon">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
<svg
width="24"
height="24"
aria-hidden="true"
>
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down"/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -81,8 +85,12 @@ <h3 id="example-1-item-2-header" class="Accordion__itemHeader">

</span>
<span class="Accordion__itemIcon">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
<svg
width="24"
height="24"
aria-hidden="true"
>
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down"/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -127,8 +135,12 @@ <h3 id="example-1-item-3-header" class="Accordion__itemHeader">
</button>
<span class="Accordion__itemSide">
<span class="Accordion__itemIcon">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
<svg
width="24"
height="24"
aria-hidden="true"
>
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down"/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -183,8 +195,12 @@ <h3 id="example-1-item-4-header" class="Accordion__itemHeader">

</span>
<span class="Accordion__itemIcon">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
<svg
width="24"
height="24"
aria-hidden="true"
>
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down"/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -252,8 +268,12 @@ <h3 id="example-2-item-1-header" class="Accordion__itemHeader">
</button>
<span class="Accordion__itemSide">
<span class="Accordion__itemIcon">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
<svg
width="24"
height="24"
aria-hidden="true"
>
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down"/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -300,8 +320,12 @@ <h3 id="example-2-item-2-header" class="Accordion__itemHeader">
</button>
<span class="Accordion__itemSide">
<span class="Accordion__itemIcon">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
<svg
width="24"
height="24"
aria-hidden="true"
>
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down"/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -347,8 +371,12 @@ <h3 id="example-2-item-3-header" class="Accordion__itemHeader">
</button>
<span class="Accordion__itemSide">
<span class="Accordion__itemIcon">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
<svg
width="24"
height="24"
aria-hidden="true"
>
<use xlink:href="/assets/icons/svg/sprite.svg#chevron-down"/>
</svg>
</span>
</span>
Expand Down
24 changes: 12 additions & 12 deletions packages/web/src/scss/components/Alert/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h2 class="docs-Heading">Alert Colors</h2>

<div class="Alert Alert--success">
<svg width="24" height="24">
<use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
<use xlink:href="/assets/icons/svg/sprite.svg#check-plain"/>
</svg>
<div>
We sent you an activation link to email <strong>spirit@lmc.eu</strong>.
Expand All @@ -20,7 +20,7 @@ <h2 class="docs-Heading">Alert Colors</h2>

<div class="Alert Alert--informative">
<svg width="24" height="24">
<use xlink:href="/assets/icons/svg/sprite.svg#info" />
<use xlink:href="/assets/icons/svg/sprite.svg#info"/>
</svg>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
Expand All @@ -31,7 +31,7 @@ <h2 class="docs-Heading">Alert Colors</h2>

<div class="Alert Alert--warning">
<svg width="24" height="24">
<use xlink:href="/assets/icons/svg/sprite.svg#warning" />
<use xlink:href="/assets/icons/svg/sprite.svg#warning"/>
</svg>
<div>
<strong>Warning!</strong> Data update failed due to missing internet connection.
Expand All @@ -41,7 +41,7 @@ <h2 class="docs-Heading">Alert Colors</h2>

<div class="Alert Alert--danger">
<svg width="24" height="24">
<use xlink:href="/assets/icons/svg/sprite.svg#danger" />
<use xlink:href="/assets/icons/svg/sprite.svg#danger"/>
</svg>
<div>
Data update failed due to missing internet connection.
Expand All @@ -64,7 +64,7 @@ <h2 class="docs-Heading">Alert Centered</h2>

<div class="Alert Alert--success Alert--center">
<svg width="24" height="24">
<use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
<use xlink:href="/assets/icons/svg/sprite.svg#check-plain"/>
</svg>
<div>
We sent you an activation link to email <strong>spirit@lmc.eu</strong>.
Expand All @@ -74,7 +74,7 @@ <h2 class="docs-Heading">Alert Centered</h2>

<div class="Alert Alert--informative Alert--center">
<svg width="24" height="24">
<use xlink:href="/assets/icons/svg/sprite.svg#info" />
<use xlink:href="/assets/icons/svg/sprite.svg#info"/>
</svg>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
Expand All @@ -86,7 +86,7 @@ <h2 class="docs-Heading">Alert Centered</h2>

<div class="Alert Alert--warning Alert--center">
<svg width="24" height="24">
<use xlink:href="/assets/icons/svg/sprite.svg#warning" />
<use xlink:href="/assets/icons/svg/sprite.svg#warning"/>
</svg>
<div>
<strong>Warning!</strong> Data update failed due to missing internet connection.
Expand All @@ -96,7 +96,7 @@ <h2 class="docs-Heading">Alert Centered</h2>

<div class="Alert Alert--danger Alert--center">
<svg width="24" height="24">
<use xlink:href="/assets/icons/svg/sprite.svg#danger" />
<use xlink:href="/assets/icons/svg/sprite.svg#danger"/>
</svg>
<div>
Data update failed due to missing internet connection.
Expand All @@ -120,7 +120,7 @@ <h2 class="docs-Heading">Alert Icons</h2>

<div class="Alert Alert--success">
<svg width="24" height="24">
<use xlink:href="/assets/icons/svg/sprite.svg#profile" />
<use xlink:href="/assets/icons/svg/sprite.svg#profile"/>
</svg>
<div>
We sent you an activation link to email <strong>spirit@lmc.eu</strong>.
Expand All @@ -130,7 +130,7 @@ <h2 class="docs-Heading">Alert Icons</h2>

<div class="Alert Alert--informative">
<svg width="24" height="24">
<use xlink:href="/assets/icons/svg/sprite.svg#info" />
<use xlink:href="/assets/icons/svg/sprite.svg#info"/>
</svg>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
Expand All @@ -141,7 +141,7 @@ <h2 class="docs-Heading">Alert Icons</h2>

<div class="Alert Alert--warning">
<svg width="24" height="24">
<use xlink:href="/assets/icons/svg/sprite.svg#warning" />
<use xlink:href="/assets/icons/svg/sprite.svg#warning"/>
</svg>
<div>
<strong>Warning!</strong> Data update failed due to missing internet connection.
Expand All @@ -151,7 +151,7 @@ <h2 class="docs-Heading">Alert Icons</h2>

<div class="Alert Alert--danger">
<svg width="24" height="24">
<use xlink:href="/assets/icons/svg/sprite.svg#close" />
<use xlink:href="/assets/icons/svg/sprite.svg#close"/>
</svg>
<div>
Data update failed due to missing internet connection.
Expand Down
Loading
Loading