feat(sbb-checkbox, sbb-toggle-check): introduce native form support (#…

…2456)
sbb-design-systems · Mar 6, 2024 · c9549a1 · c9549a1
1 parent 697788a
commit c9549a1
Show file tree

Hide file tree

Showing 32 changed files with 2,527 additions and 964 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -79,8 +79,8 @@
         "@typescript-eslint/no-unused-vars": [
           "error",
           {
-            "vars": "all",
-            "varsIgnorePattern": "h"
+            "args": "all",
+            "argsIgnorePattern": "^_"
           }
         ],
         "@typescript-eslint/no-use-before-define": "error",

diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "format": "prettier \"**/*\" --write --ignore-unknown",
     "generate": "tsx tools/generate-component/index.mts",
     "generate:chromatic-stories": "tsx scripts/chromatic-stories-generator.ts",
+    "remove:chromatic-stories": "find . -name '*.chromatic.stories.ts' -delete",
     "integrity": "npm-run-all format docs",
     "lint": "npm-run-all --sequential lint:*",
     "lint:ts": "eslint \"**/*.ts\"",
@@ -44,7 +45,7 @@
     "lint:tsc:components-spec": "tsc --noEmit --project src/components/tsconfig.spec.json",
     "start": "storybook dev -p 6006",
     "test": "wtr --coverage",
-    "test:snapshot": "yarn test --ci --update-snapshots",
+    "test:snapshot": "yarn test:csr --ci --update-snapshots",
     "test:csr": "wtr --group default",
     "test:ssr:hydrated": "wtr --group e2e-ssr-hydrated",
     "test:ssr:non-hydrated": "wtr --group e2e-ssr-non-hydrated",

diff --git a/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js b/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js
@@ -8,7 +8,7 @@ snapshots["sbb-breadcrumb-group renders - Dom"] =
 >
   <sbb-breadcrumb
     dir="ltr"
-    href="/"
+    href="https://example.com"
     icon-name="pie-small"
     role="link"
     slot="li-0"
@@ -17,7 +17,7 @@ snapshots["sbb-breadcrumb-group renders - Dom"] =
   </sbb-breadcrumb>
   <sbb-breadcrumb
     dir="ltr"
-    href="/one"
+    href="https://example.com/one"
     role="link"
     slot="li-1"
     tabindex="0"
@@ -27,7 +27,7 @@ snapshots["sbb-breadcrumb-group renders - Dom"] =
   <sbb-breadcrumb
     aria-current="page"
     dir="ltr"
-    href="/one"
+    href="https://example.com/one"
     role="link"
     slot="li-2"
     tabindex="0"
@@ -131,7 +131,7 @@ snapshots["sbb-breadcrumb-group A11y tree Firefox"] =
         {
           "role": "link",
           "name": "",
-          "value": "http://localhost:8000/"
+          "value": "https://example.com/"
         }
       ]
     },
@@ -142,7 +142,7 @@ snapshots["sbb-breadcrumb-group A11y tree Firefox"] =
         {
           "role": "link",
           "name": "One",
-          "value": "http://localhost:8000/one"
+          "value": "https://example.com/one"
         }
       ]
     },
@@ -153,7 +153,7 @@ snapshots["sbb-breadcrumb-group A11y tree Firefox"] =
         {
           "role": "link",
           "name": "Two",
-          "value": "http://localhost:8000/one"
+          "value": "https://example.com/one"
         }
       ]
     }

diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts
@@ -14,9 +14,9 @@ describe('sbb-breadcrumb-group', () => {
   beforeEach(async () => {
     root = await fixture(html`
       <sbb-breadcrumb-group>
-        <sbb-breadcrumb href="/" icon-name="pie-small"></sbb-breadcrumb>
-        <sbb-breadcrumb href="/one">One</sbb-breadcrumb>
-        <sbb-breadcrumb href="/one">Two</sbb-breadcrumb>
+        <sbb-breadcrumb href="https://example.com" icon-name="pie-small"></sbb-breadcrumb>
+        <sbb-breadcrumb href="https://example.com/one">One</sbb-breadcrumb>
+        <sbb-breadcrumb href="https://example.com/one">Two</sbb-breadcrumb>
       </sbb-breadcrumb-group>
     `);
     await waitForLitRender(root);

diff --git a/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js b/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js
@@ -5,7 +5,7 @@ snapshots["sbb-breadcrumb renders with text"] =
 `<a
   class="sbb-action-base sbb-breadcrumb"
   download=""
-  href="/test"
+  href="https://example.com/test"
   rel="subsection"
   role="presentation"
   tabindex="-1"
@@ -112,7 +112,7 @@ snapshots["sbb-breadcrumb A11y tree Firefox"] =
         {
           "role": "link",
           "name": "Breadcrumb",
-          "value": "http://localhost:8000/test"
+          "value": "https://example.com/test"
         }
       ]
     }

diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts
@@ -9,7 +9,7 @@ import './breadcrumb';
 describe('sbb-breadcrumb', () => {
   it('renders with text', async () => {
     const root = await fixture(html`
-      <sbb-breadcrumb href="/test" target="_blank" download rel="subsection"
+      <sbb-breadcrumb href="https://example.com/test" target="_blank" download rel="subsection"
         >Breadcrumb</sbb-breadcrumb
       >
     `);
@@ -19,7 +19,7 @@ describe('sbb-breadcrumb', () => {
         dir="ltr"
         role="link"
         tabindex="0"
-        href="/test"
+        href="https://example.com/test"
         target="_blank"
         download
         rel="subsection">
@@ -68,5 +68,7 @@ describe('sbb-breadcrumb', () => {
     await expect(root).shadowDom.to.equalSnapshot();
   });
 
-  testA11yTreeSnapshot(html` <sbb-breadcrumb href="/test">Breadcrumb</sbb-breadcrumb> `);
+  testA11yTreeSnapshot(html`
+    <sbb-breadcrumb href="https://example.com/test">Breadcrumb</sbb-breadcrumb>
+  `);
 });
diff --git a/src/components/button/common/button-common.ts b/src/components/button/common/button-common.ts
@@ -21,7 +21,7 @@ export type SbbButtonSize = 'l' | 'm';
 export type SbbButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'transparent';
 
 export declare class SbbButtonCommonElementMixinType
-  implements SbbNegativeMixinType, SbbDisabledMixinType, Partial<SbbIconNameMixinType>
+  implements SbbNegativeMixinType, Partial<SbbDisabledMixinType>, Partial<SbbIconNameMixinType>
 {
   public variant: SbbButtonVariant;
   public size?: SbbButtonSize;

diff --git a/src/components/checkbox/checkbox-group/__snapshots__/checkbox-group.spec.snap.js b/src/components/checkbox/checkbox-group/__snapshots__/checkbox-group.spec.snap.js
@@ -7,38 +7,26 @@ snapshots["sbb-checkbox-group renders - Dom"] =
   orientation="horizontal"
 >
   <sbb-checkbox
-    aria-checked="false"
-    aria-disabled="false"
-    aria-required="false"
     data-slot-names="unnamed"
     icon-placement="end"
-    role="checkbox"
     size="m"
     tabindex="0"
     value="checkbox-1"
   >
     Label 1
   </sbb-checkbox>
   <sbb-checkbox
-    aria-checked="false"
-    aria-disabled="false"
-    aria-required="false"
     data-slot-names="unnamed"
     icon-placement="end"
-    role="checkbox"
     size="m"
     tabindex="0"
     value="checkbox-2"
   >
     Label 2
   </sbb-checkbox>
   <sbb-checkbox
-    aria-checked="false"
-    aria-disabled="false"
-    aria-required="false"
     data-slot-names="unnamed"
     icon-placement="end"
-    role="checkbox"
     size="m"
     tabindex="0"
     value="checkbox-3"
@@ -61,7 +49,7 @@ snapshots["sbb-checkbox-group renders - ShadowDom"] =
 `;
 /* end snapshot sbb-checkbox-group renders - ShadowDom */
 
-snapshots["sbb-checkbox-group A11y tree Chrome"] = 
+snapshots["sbb-checkbox-group A11y tree Chrome"] =
 `<p>
   {
   "role": "WebArea",

diff --git a/src/components/checkbox/checkbox-group/checkbox-group.e2e.ts b/src/components/checkbox/checkbox-group/checkbox-group.e2e.ts
@@ -49,9 +49,7 @@ describe('sbb-checkbox-group', () => {
 
   it('disabled status prevents changes', async () => {
     const checkboxes: SbbCheckboxElement[] = [checkboxOne, checkboxTwo, checkboxThree];
-    checkboxes.forEach((check: SbbCheckboxElement) =>
-      expect(check).not.to.have.attribute('checked'),
-    );
+    checkboxes.forEach((check: SbbCheckboxElement) => expect(check.checked).to.be.false);
 
     element.setAttribute('disabled', 'true');
     await waitForLitRender(element);
@@ -60,9 +58,7 @@ describe('sbb-checkbox-group', () => {
       check.click();
     }
     await waitForLitRender(element);
-    checkboxes.forEach((check: SbbCheckboxElement) =>
-      expect(check).not.to.have.attribute('checked'),
-    );
+    checkboxes.forEach((check: SbbCheckboxElement) => expect(check.checked).to.be.false);
 
     element.removeAttribute('disabled');
     await waitForLitRender(element);
@@ -71,9 +67,9 @@ describe('sbb-checkbox-group', () => {
     }
     await waitForLitRender(element);
 
-    expect(checkboxOne).to.have.attribute('checked');
-    expect(checkboxTwo).not.to.have.attribute('checked');
-    expect(checkboxThree).to.have.attribute('checked');
+    expect(checkboxOne.checked).to.be.true;
+    expect(checkboxTwo.checked).to.be.false;
+    expect(checkboxThree.checked).to.be.true;
   });
 
   it('required status', async () => {