Style(web): Upgrade stylelint config and fix errors #DS-322

+ Improve SCSS coding style and add a comment anytime Stylelint needs to be disabled
lmc-eu · Oct 10, 2022 · 4df87da · 4df87da
1 parent 4d562f5
commit 4df87da
Show file tree

Hide file tree

Showing 37 changed files with 218 additions and 155 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -1,7 +1,6 @@
 module.exports = {
   extends: [
     '@lmc-eu/stylelint-config',
-    '@lmc-eu/stylelint-config/optional',
     'stylelint-config-prettier'
   ]
 }
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
@@ -18,7 +18,7 @@
     "test": "yarn lint"
   },
   "devDependencies": {
-    "@lmc-eu/stylelint-config": "4.0.1",
+    "@lmc-eu/stylelint-config": "^5.0.0",
     "shx": "0.3.4",
     "stylelint": "14.11.0",
     "stylelint-order": "5.0.0"

diff --git a/packages/web-react/src/components/Tabs/__tests__/TabPane.test.tsx b/packages/web-react/src/components/Tabs/__tests__/TabPane.test.tsx
@@ -9,7 +9,7 @@ import TabPane from '../TabPane';
 describe('TabPane', () => {
   classNamePrefixProviderTest(
     withTabsContext((props) => <TabPane {...props} tabId="test" />, { selectedTabId: 'test' } as TabsContextType),
-    'Tabs-pane',
+    'TabsPane',
   );
 
   it('should not render tab pane if tab is not selected', () => {

diff --git a/packages/web-react/src/components/Tabs/__tests__/useTabsStyleProps.test.tsx b/packages/web-react/src/components/Tabs/__tests__/useTabsStyleProps.test.tsx
@@ -9,14 +9,14 @@ describe('useTabsStyleProps', () => {
     expect(result.current.classProps.root).toBe('Tabs');
     expect(result.current.classProps.item).toBe('Tabs__item');
     expect(result.current.classProps.link).toBe('Tabs__link');
-    expect(result.current.classProps.pane).toBe('Tabs-pane');
+    expect(result.current.classProps.pane).toBe('TabsPane');
   });
 
   it('should return selected pane', () => {
     const props = { selectedTabId: 'test', tabId: 'test' };
     const { result } = renderHook(() => useTabsStyleProps(props));
 
-    expect(result.current.classProps.pane).toBe('Tabs-pane is-selected');
+    expect(result.current.classProps.pane).toBe('TabsPane is-selected');
   });
 
   it('should return selected link', () => {

diff --git a/packages/web-react/src/components/Tabs/useTabsStyleProps.tsx b/packages/web-react/src/components/Tabs/useTabsStyleProps.tsx
@@ -20,7 +20,7 @@ export function useTabsStyleProps(props: SpiritTabsProps = { selectedTabId: '',
   const tabsClass = useClassNamePrefix('Tabs');
   const tabsItemClass = `${tabsClass}__item`;
   const tabsLinkClass = `${tabsClass}__link`;
-  const tabsPaneClass = `${tabsClass}-pane`;
+  const tabsPaneClass = `${tabsClass}Pane`;
   const tabsSelectedClass = `is-selected`;
 
   return {

diff --git a/packages/web-twig/src/Resources/components/Tabs/TabPane.twig b/packages/web-twig/src/Resources/components/Tabs/TabPane.twig
@@ -7,7 +7,7 @@
 
 {# Class names #}
 {%- set _isSelectedClassName = _isSelected ? 'is-selected' : null -%}
-{%- set _rootClassName = _spiritClassPrefix ~ 'Tabs-pane' -%}
+{%- set _rootClassName = _spiritClassPrefix ~ 'TabsPane' -%}
 
 {# Attributes #}
 {%- set _ariaLabelAttr = _label ? ' aria-labelledby="' ~ _label ~ '"' : null -%}

diff --git a/...g/tests/__snapshots__/ComponentsSnapshotTest__test with data set tabsDefault.twig__1.html b/...g/tests/__snapshots__/ComponentsSnapshotTest__test with data set tabsDefault.twig__1.html
@@ -16,10 +16,10 @@
     </a>
   </li>
 </ul>
-<div id="pane1" class="Tabs-pane is-selected" role="tabpanel" aria-labelledby="pane1-tab">
+<div id="pane1" class="TabsPane is-selected" role="tabpanel" aria-labelledby="pane1-tab">
       Pane 1
 </div>
-<div id="pane2" class="Tabs-pane" role="tabpanel" aria-labelledby="pane2-tab">
+<div id="pane2" class="TabsPane" role="tabpanel" aria-labelledby="pane2-tab">
       Pane 2
 </div>
 </body></html>
diff --git a/packages/web/.prettierignore b/packages/web/.prettierignore
@@ -0,0 +1 @@
+public/icons/**/*
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -27,6 +27,7 @@
     "precss": "yarn css:lint",
     "css": "yarn css:compile && yarn css:prefix && yarn css:minify",
     "css:lint": "stylelint --config ../../.stylelintrc.js \"src/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
+    "css:lint:fix": "stylelint --config ../../.stylelintrc.js \"src/**/*.scss\" --fix",
     "css:compile:components": "sass --load-path=../design-tokens/dist/scss src/scss/components/index.scss dist/css/components.css",
     "css:compile:foundation": "sass --load-path=../design-tokens/dist/scss --load-path=../../node_modules src/scss/foundation/index.scss dist/css/foundation.css",
     "css:compile:helpers": "sass --load-path=../design-tokens/dist/scss src/scss/helpers/index.scss dist/css/helpers.css",
@@ -54,7 +55,7 @@
   },
   "devDependencies": {
     "@lmc-eu/browserslist-config": "1.0.3",
-    "@lmc-eu/stylelint-config": "4.0.1",
+    "@lmc-eu/stylelint-config": "^5.0.0",
     "@rollup/plugin-typescript": "8.4.0",
     "@swc/core": "1.2.247",
     "@swc/jest": "0.2.22",

diff --git a/packages/web/src/js/__tests__/Tabs.test.ts b/packages/web/src/js/__tests__/Tabs.test.ts
@@ -74,8 +74,8 @@ describe('Tabs', () => {
             <li class="Tabs__item" role="presentation"><button type="button" data-target="#profile" class="Tabs__link" role="tab">Profile</button></li>
           </ul>
           <div class="Tabs-content">
-            <div class="Tabs-pane is-selected" id="home" role="tabpanel"></div>
-            <div class="Tabs-pane" id="profile" role="tabpanel"></div>
+            <div class="TabsPane is-selected" id="home" role="tabpanel"></div>
+            <div class="TabsPane" id="profile" role="tabpanel"></div>
           </div>
         `;
 
@@ -99,8 +99,8 @@ describe('Tabs', () => {
             <li class="Tabs__item" role="presentation"><button type="button" id="triggerProfile" data-target="#profile" class="Tabs__link" role="tab">Profile</button></li>
           </ul>
           <div class="Tabs-content">
-            <div class="Tabs-pane is-selected" id="home" role="tabpanel"></div>
-            <div class="Tabs-pane" id="profile" role="tabpanel"></div>
+            <div class="TabsPane is-selected" id="home" role="tabpanel"></div>
+            <div class="TabsPane" id="profile" role="tabpanel"></div>
           </div>
         `;
 
@@ -205,9 +205,9 @@ describe('Tabs', () => {
             </li>
           </ul>
           <div class="Tabs-content">
-            <div role="tabpanel" class="Tabs-pane is-selected" id="profile">test 1</div>
-            <div role="tabpanel" class="Tabs-pane" id="buzz">test 2</div>
-            <div role="tabpanel" class="Tabs-pane" id="references">test 3</div>
+            <div role="tabpanel" class="TabsPane is-selected" id="profile">test 1</div>
+            <div role="tabpanel" class="TabsPane" id="buzz">test 2</div>
+            <div role="tabpanel" class="TabsPane" id="references">test 3</div>
           </div>
         `;
 
@@ -353,8 +353,8 @@ describe('Tabs', () => {
             </li>
           </ul>
           <div class="Tabs-content">
-            <div class="Tabs-pane is-selected" id="home" role="tabpanel"></div>
-            <div class="Tabs-pane" id="profile" role="tabpanel"></div>
+            <div class="TabsPane is-selected" id="home" role="tabpanel"></div>
+            <div class="TabsPane" id="profile" role="tabpanel"></div>
           </div>
         `;
 
@@ -382,12 +382,12 @@ describe('Tabs', () => {
                 <button type="button" id="tabNested2" data-target="#nested-tab2" class="Tabs__link" data-toggle="tabs" role="tab" aria-controls="x-profile">Nested Tabs2</button>
               </nav>
               <div class="Tabs-content">
-                <div class="Tabs-pane is-selected" id="nested-tab1" role="tabpanel">Nested Tabs1 Content</div>
-                <div class="Tabs-pane" id="nested-tab2" role="tabpanel">Nested Tabs2 Content</div>
+                <div class="TabsPane is-selected" id="nested-tab1" role="tabpanel">Nested Tabs1 Content</div>
+                <div class="TabsPane" id="nested-tab2" role="tabpanel">Nested Tabs2 Content</div>
               </div>
             </div>
-            <div class="Tabs-pane is-selected" id="x-tab2" role="tabpanel">Tabs2 Content</div>
-            <div class="Tabs-pane" id="x-tab3" role="tabpanel">Tabs3 Content</div>
+            <div class="TabsPane is-selected" id="x-tab2" role="tabpanel">Tabs2 Content</div>
+            <div class="TabsPane" id="x-tab3" role="tabpanel">Tabs3 Content</div>
           </div>
         `;
 
@@ -433,8 +433,8 @@ describe('Tabs', () => {
             <li class="Tabs__item" role="presentation"><button type="button" data-target="#profile" class="Tabs__link" disabled role="tab">Profile</button></li>
           </ul>
           <div class="Tabs-content">
-            <div class="Tabs-pane is-selected" id="home" role="tabpanel"></div>
-            <div class="Tabs-pane" id="profile" role="tabpanel"></div>
+            <div class="TabsPane is-selected" id="home" role="tabpanel"></div>
+            <div class="TabsPane" id="profile" role="tabpanel"></div>
           </div>
         `;
 
@@ -456,8 +456,8 @@ describe('Tabs', () => {
             <li class="Tabs__item" role="presentation"><a href="#profile" class="Tabs__link disabled" role="tab">Profile</a></li>
           </ul>
           <div class="Tabs-content">
-            <div class="Tabs-pane is-selected" id="home" role="tabpanel"></div>
-            <div class="Tabs-pane" id="profile" role="tabpanel"></div>
+            <div class="TabsPane is-selected" id="home" role="tabpanel"></div>
+            <div class="TabsPane" id="profile" role="tabpanel"></div>
           </div>
         `;
 

diff --git a/packages/web/src/scss/components/Button/_Button.scss b/packages/web/src/scss/components/Button/_Button.scss
@@ -8,16 +8,16 @@
     @include typography.generate(theme.$typography);
 
     display: inline-flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     text-align: center;
     text-decoration: none;
     vertical-align: middle;
     border-width: theme.$border-width;
     border-style: theme.$border-style;
     border-radius: theme.$border-radius;
-    cursor: pointer;
     user-select: none;
+    cursor: pointer;
 
     &:hover,
     &:focus {
@@ -27,8 +27,8 @@
     &:disabled,
     &.is-disabled,
     &.Button--disabled {
-        cursor: cursors.$disabled;
         pointer-events: none;
+        cursor: cursors.$disabled;
     }
 }
 

diff --git a/packages/web/src/scss/components/Button/_tools.scss b/packages/web/src/scss/components/Button/_tools.scss
@@ -18,30 +18,30 @@
 @mixin variant($variant, $variables) {
     .Button--#{$variant} {
         color: map.get($variables, default-color);
-        background-color: map.get($variables, default-background);
         border-color: map.get($variables, default-border-color);
+        background-color: map.get($variables, default-background);
 
         &:hover,
         &:focus {
             color: map.get($variables, hover-color);
-            background-color: map.get($variables, hover-background);
             border-color: map.get($variables, hover-border-color);
+            background-color: map.get($variables, hover-background);
         }
 
         &:active {
             color: map.get($variables, active-color);
-            background-color: map.get($variables, active-background);
             border-color: map.get($variables, active-border-color);
+            background-color: map.get($variables, active-background);
         }
 
         &:disabled,
         &.is-disabled,
         &.Button--disabled {
             color: map.get($variables, disabled-color);
-            background-color: map.get($variables, disabled-background);
             border-color: map.get($variables, disabled-border-color);
-            cursor: default;
+            background-color: map.get($variables, disabled-background);
             pointer-events: none;
+            cursor: default;
         }
     }
 }

diff --git a/packages/web/src/scss/components/CheckboxField/_CheckboxField.scss b/packages/web/src/scss/components/CheckboxField/_CheckboxField.scss
@@ -30,16 +30,16 @@
 
 .CheckboxField__input {
     appearance: none;
+    flex-shrink: 0;
     width: theme.$input-width;
     height: theme.$input-width;
     margin: 3px;
     color: theme.$input-unselected-color;
+    border: 2px solid currentcolor;
+    border-radius: 2px;
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
-    border: 2px solid currentcolor;
-    border-radius: 2px;
-    flex-shrink: 0;
 
     &:checked {
         color: theme.$input-selected-color;
@@ -67,22 +67,23 @@
     color: theme.$message-color-default;
 }
 
-.CheckboxField--error > .CheckboxField__text > .CheckboxField__message {
+.CheckboxField--error .CheckboxField__message {
     color: theme.$message-color-error;
 }
 
-.CheckboxField--disabled > .CheckboxField__text > .CheckboxField__label,
-.CheckboxField--disabled > .CheckboxField__text > .CheckboxField__message {
+.CheckboxField--disabled .CheckboxField__label,
+.CheckboxField--disabled .CheckboxField__message {
     color: theme.$label-color-disabled;
 }
 
-.CheckboxField > .CheckboxField__input:disabled,
-.CheckboxField:hover > .CheckboxField__input:disabled,
-.CheckboxField--disabled > .CheckboxField__input {
+.CheckboxField--disabled > .CheckboxField__input,
+.CheckboxField > .CheckboxField__input:disabled {
     color: theme.$input-disabled-color;
+}
 
-    &:checked,
-    &:indeterminate {
-        background-color: theme.$input-disabled-color;
-    }
+.CheckboxField--disabled > .CheckboxField__input:checked,
+.CheckboxField--disabled > .CheckboxField__input:indeterminate,
+.CheckboxField > .CheckboxField__input:disabled:checked,
+.CheckboxField > .CheckboxField__input:disabled:indeterminate {
+    background-color: theme.$input-disabled-color;
 }
diff --git a/packages/web/src/scss/components/Container/_Container.scss b/packages/web/src/scss/components/Container/_Container.scss
@@ -4,8 +4,8 @@
 .Container {
     width: 100%;
     max-width: theme.$container-max-width;
-    margin-inline: auto;
     padding-inline: var(--container-padding-inline);
+    margin-inline: auto;
 
     @include tools.paddings(theme.$container-paddings, theme.$container-breakpoints);
 }
diff --git a/packages/web/src/scss/components/Grid/_tools.scss b/packages/web/src/scss/components/Grid/_tools.scss
@@ -4,7 +4,7 @@
 @use '../../tools/breakpoint';
 
 @function breakpoint-class($name, $value) {
-    @if ($value > 0) {
+    @if $value > 0 {
         @return unquote($name + '--');
     }